/* ============================================================
   SKIN: STREAMIX — Dashboard Layout (Sidebar + Topbar)
   ทุก rule scope ใต้ .skin-streamix → ไม่ชนธีมเดิม (ถ้าไม่เลือกสกิน จะไม่มีผลเลย)
   สีผูกกับตัวแปรธีม (--primary-rgb / --accent-rgb / --grad) → เปลี่ยนสีในหลังบ้านได้เหมือนเดิม
   ============================================================ */
.skin-streamix{
  --sx-w:262px; --sx-topbar-h:74px; --sx-flash-h:44px;
  background:
    radial-gradient(1100px 560px at 100% -12%, rgba(var(--accent-rgb),.16), transparent 58%),
    radial-gradient(900px 520px at -6% 112%, rgba(var(--primary-rgb),.13), transparent 55%),
    linear-gradient(165deg, var(--bg), var(--bg-2)) !important;
  min-height:100vh;
}
/* กัน element เดิมโผล่ */
.skin-streamix > .navbar,
.skin-streamix > .mobile-tabbar,
.skin-streamix > .site-footer{display:none !important}
.skin-streamix #starfield{opacity:.45}
/* กัน transition วิ่งตอนตั้งค่าเริ่มต้น (accordion/sidebar เด้งเองตอนโหลด) */
.skin-streamix.sx-preload *{transition:none !important}

/* ---------- Flash Sale bar: ลอยติดบน + ดัน sidebar/topbar ลง ไม่ให้บังหัว sidebar ---------- */
.skin-streamix .flash-bar{position:sticky;top:0;z-index:61;height:var(--sx-flash-h);padding-top:0;padding-bottom:0;overflow:hidden}
.skin-streamix .flash-bar ~ .sx-shell .sx-sidebar{top:var(--sx-flash-h)}
.skin-streamix .flash-bar ~ .sx-shell .sx-topbar{top:var(--sx-flash-h)}

/* ---------- โครง shell ---------- */
.skin-streamix .sx-shell{display:flex;min-height:100vh;position:relative;z-index:1}
.skin-streamix .sx-main{flex:1;min-width:0;display:flex;flex-direction:column;margin-left:var(--sx-w);transition:margin-left .3s}

/* ---------- Sidebar ---------- */
.skin-streamix .sx-sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sx-w);z-index:40;
  display:flex;flex-direction:column;gap:14px;padding:16px 13px 18px;overflow-y:auto;
  background:linear-gradient(180deg,rgba(var(--primary-rgb),.06),transparent 26%),var(--bg-2);
  border-right:1px solid var(--glass-border)}
.skin-streamix .sx-sidebar::-webkit-scrollbar{width:5px}
.skin-streamix .sx-sidebar::-webkit-scrollbar-thumb{background:rgba(var(--primary-rgb),.4);border-radius:3px}
.skin-streamix .sx-side-head{display:flex;align-items:center;gap:8px;padding:4px 6px 13px;border-bottom:1px solid var(--glass-border)}
.skin-streamix .sx-brand{display:flex;align-items:center;gap:11px;flex:1;min-width:0;text-decoration:none}
.skin-streamix .sx-brand-logo{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;overflow:hidden;
  background:var(--grad);color:#fff;font-size:1.2rem;box-shadow:0 8px 20px -8px rgba(var(--primary-rgb),.7)}
.skin-streamix .sx-brand-logo img{width:100%;height:100%;object-fit:cover}
.skin-streamix .sx-brand-txt{min-width:0}
.skin-streamix .sx-brand-name{display:block;font-weight:800;font-size:1.1rem;color:var(--text);line-height:1.12;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skin-streamix .sx-brand-sub{display:block;font-size:.68rem;color:var(--muted);letter-spacing:.6px}
.skin-streamix .sx-collapse{background:transparent;border:none;color:var(--muted);font-size:1.02rem;cursor:pointer;padding:6px;border-radius:8px;flex:none}
.skin-streamix .sx-collapse:hover{color:var(--text);background:rgba(var(--primary-rgb),.1)}

.skin-streamix .sx-nav{display:flex;flex-direction:column;gap:3px}
.skin-streamix .sx-nav-title{font-size:.66rem;font-weight:800;color:var(--muted);letter-spacing:1.2px;text-transform:uppercase;padding:13px 10px 6px}
/* หัวข้อเมนูหมวดหมู่ (กดเปิด/ปิด — accordion) · พรีเมียม + แสงกระจก hover */
.skin-streamix .sx-nav-group{position:relative;overflow:hidden;display:flex;align-items:center;gap:11px;width:100%;margin-top:8px;padding:10px 13px;border-radius:14px;
  background:linear-gradient(135deg,rgba(var(--primary-rgb),.15),rgba(var(--accent-rgb),.07));
  border:1px solid rgba(var(--primary-rgb),.28);color:var(--text);font-family:inherit;font-weight:700;font-size:.9rem;cursor:pointer;
  transition:transform .25s,background .25s,border-color .3s}
.skin-streamix .sx-nav-group:hover{transform:translateY(-1px);border-color:rgba(var(--primary-rgb),.5);background:linear-gradient(135deg,rgba(var(--primary-rgb),.22),rgba(var(--accent-rgb),.1))}
.skin-streamix .sx-nav-group .sx-link-ic{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;font-size:.95rem;color:#fff;background:var(--grad);position:relative;z-index:2;transition:transform .25s}
.skin-streamix .sx-nav-group:hover .sx-link-ic{transform:scale(1.06)}
.skin-streamix .sx-nav-group .sx-link-tx{position:relative;z-index:2}
.skin-streamix .sx-nav-caret{margin-left:auto;position:relative;z-index:2;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:.68rem;color:var(--primary-light);background:rgba(var(--primary-rgb),.14);transition:transform .3s,background .25s}
.skin-streamix .sx-nav-group:hover .sx-nav-caret{background:rgba(var(--primary-rgb),.24)}
.skin-streamix .sx-nav-group[aria-expanded="false"] .sx-nav-caret{transform:rotate(-90deg)}
/* แสงกระจกวิ่งผ่าน */
.skin-streamix .sx-nav-group::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 15%,rgba(255,255,255,.32) 50%,transparent 85%);transform:skewX(-18deg)}
.skin-streamix .sx-nav-group:hover::after{animation:sxShine .85s ease}
.skin-streamix .sx-nav-sub{display:flex;flex-direction:column;gap:3px;overflow:hidden;max-height:1600px;opacity:1;margin-top:4px;transition:max-height .35s ease,opacity .3s ease,margin .3s}
.skin-streamix .sx-nav-sub.collapsed{max-height:0;opacity:0;margin-top:0}
.skin-streamix:not(.sx-collapsed) .sx-nav-sub .sx-link{padding-left:20px}
.skin-streamix .sx-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--muted);font-weight:600;font-size:.9rem;position:relative;transition:background .2s,color .2s,transform .2s}
.skin-streamix .sx-link-ic{width:24px;display:grid;place-items:center;font-size:1rem;flex:none}
.skin-streamix .sx-link-ic.has-img{width:26px;height:26px;border-radius:7px;overflow:hidden}
.skin-streamix .sx-link-ic.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.skin-streamix .sx-link-tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skin-streamix .sx-link:hover{background:rgba(var(--primary-rgb),.09);color:var(--text)}
.skin-streamix .sx-link.active{background:var(--grad);color:#fff;box-shadow:0 12px 26px -12px rgba(var(--primary-rgb),.85)}
.skin-streamix .sx-link.active .sx-link-ic{color:#fff}

/* side cards */
.skin-streamix .sx-side-card{border-radius:16px;padding:14px;background:var(--card);border:1px solid var(--glass-border)}
.skin-streamix .sx-feats{margin-top:6px;display:flex;flex-direction:column;gap:11px;background:rgba(var(--primary-rgb),.04)}
.skin-streamix .sx-feat{display:flex;align-items:center;gap:10px}
.skin-streamix .sx-feat-ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:.88rem;color:#fff}
.skin-streamix .sx-feat-ic.f1{background:linear-gradient(135deg,#f59e0b,#d97706)}
.skin-streamix .sx-feat-ic.f2{background:linear-gradient(135deg,#22c55e,#16a34a)}
.skin-streamix .sx-feat-ic.f3{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.skin-streamix .sx-feat-ic.f4{background:var(--grad)}
.skin-streamix .sx-feat-tx strong{display:block;font-size:.8rem;color:var(--text);line-height:1.2}
.skin-streamix .sx-feat-tx small{display:block;font-size:.68rem;color:var(--muted)}

.skin-streamix .sx-join{margin-top:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;
  background:linear-gradient(160deg,rgba(var(--accent-rgb),.2),rgba(var(--primary-rgb),.08));border-color:rgba(var(--accent-rgb),.3)}
.skin-streamix .sx-join-crown{font-size:1.7rem;color:#fbbf24;filter:drop-shadow(0 2px 8px rgba(251,191,36,.5))}
.skin-streamix .sx-join strong{color:var(--text);font-size:1rem}
.skin-streamix .sx-join small{color:var(--muted);font-size:.74rem;line-height:1.3}
.skin-streamix .sx-join-btn{margin-top:8px;width:100%;padding:9px;border-radius:11px;background:var(--grad);color:#fff;text-decoration:none;font-weight:700;font-size:.85rem;box-shadow:0 12px 24px -12px rgba(var(--primary-rgb),.8);transition:transform .2s}
.skin-streamix .sx-join-btn:hover{transform:translateY(-2px)}

.skin-streamix .sx-wallet{margin-top:auto;text-align:center;display:flex;flex-direction:column;gap:4px;
  background:linear-gradient(160deg,rgba(var(--primary-rgb),.16),rgba(var(--accent-rgb),.06))}
.skin-streamix .sx-wallet-lbl{font-size:.74rem;color:var(--muted);font-weight:600}
.skin-streamix .sx-wallet-lbl i{color:#fbbf24}
.skin-streamix .sx-wallet-amt{font-size:1.5rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.skin-streamix .sx-wallet-btn{margin-top:6px;padding:8px;border-radius:10px;background:var(--grad);color:#fff;text-decoration:none;font-weight:700;font-size:.82rem;transition:transform .2s}
.skin-streamix .sx-wallet-btn:hover{transform:translateY(-2px)}

/* ---------- Topbar ---------- */
.skin-streamix .sx-topbar{position:sticky;top:0;z-index:30;height:var(--sx-topbar-h);display:flex;align-items:center;gap:14px;
  padding:0 22px;background:var(--bg-2);border-bottom:1px solid var(--glass-border)}
.skin-streamix .sx-burger{display:none;background:transparent;border:none;color:var(--text);font-size:1.3rem;cursor:pointer;padding:6px}
.skin-streamix .sx-search{flex:1;max-width:560px;display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-radius:12px;background:var(--card);border:1px solid var(--glass-border);transition:.2s}
.skin-streamix .sx-search i{color:var(--muted);font-size:.9rem}
.skin-streamix .sx-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:.9rem}
.skin-streamix .sx-search input::placeholder{color:var(--muted)}
.skin-streamix .sx-search:focus-within{border-color:rgba(var(--primary-rgb),.6);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.12)}
.skin-streamix .sx-top-links{display:flex;align-items:center;gap:5px;margin-left:auto}
.skin-streamix .sx-tl{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:.85rem;font-weight:600;white-space:nowrap;transition:.2s}
.skin-streamix .sx-tl:hover{color:var(--text);background:rgba(var(--primary-rgb),.09)}
.skin-streamix .sx-tl.sx-cart{font-size:1.05rem;padding:8px 11px}
.skin-streamix .sx-login-btn{display:flex;align-items:center;gap:8px;padding:9px 18px;border-radius:11px;background:var(--grad);color:#fff;text-decoration:none;font-weight:700;font-size:.86rem;white-space:nowrap;box-shadow:0 12px 26px -12px rgba(var(--primary-rgb),.8);transition:transform .2s}
.skin-streamix .sx-login-btn:hover{transform:translateY(-2px)}
.skin-streamix .sx-bell{background:transparent;border:none;color:var(--muted);font-size:1.05rem;cursor:pointer;width:40px;height:40px;border-radius:50%;transition:.2s}
.skin-streamix .sx-bell:hover{color:var(--text);background:rgba(var(--primary-rgb),.1)}
.skin-streamix .sx-bal{display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:11px;background:var(--card);border:1px solid var(--glass-border);color:var(--text);text-decoration:none;font-weight:700;font-size:.85rem;white-space:nowrap;transition:.2s}
.skin-streamix .sx-bal i{color:#fbbf24}
.skin-streamix .sx-bal:hover{border-color:rgba(var(--primary-rgb),.5)}
.skin-streamix .sx-acc-btn{padding:0 !important;background:transparent !important;border:none !important;box-shadow:none !important;cursor:pointer}
.skin-streamix .sx-acc-btn .na-ava{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:1.05rem;box-shadow:0 0 0 2px rgba(var(--primary-rgb),.5);transition:box-shadow .25s,transform .25s}
.skin-streamix .sx-acc-btn:hover .na-ava{transform:scale(1.05);box-shadow:0 0 0 2px rgba(var(--primary-rgb),.9),0 0 16px -2px rgba(var(--primary-rgb),.7)}
.skin-streamix .nav-account.open .sx-acc-btn .na-ava{box-shadow:0 0 0 2px rgba(var(--primary-rgb),1),0 0 18px 0 rgba(var(--primary-rgb),.85)}

/* ---------- Content ---------- */
.skin-streamix .container{max-width:none;width:100%;margin:0;padding:26px 30px 56px}
.skin-streamix .sx-main>.container{flex:1 0 auto}   /* ดันฟุตเตอร์/ชื่อเว็บให้ติดล่างสุดเสมอ แม้เนื้อหาสั้น */

/* ---------- Footer strip ---------- */
.skin-streamix .sx-footer{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:22px 26px;margin-top:auto;border-top:1px solid var(--glass-border);background:var(--bg-2)}
.skin-streamix .sx-foot-item{display:flex;align-items:center;gap:12px}
.skin-streamix .sx-foot-ic{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;font-size:1.05rem;color:#fff;background:var(--grad)}
.skin-streamix .sx-foot-tx strong{display:block;font-size:.88rem;color:var(--text)}
.skin-streamix .sx-foot-tx small{display:block;font-size:.74rem;color:var(--muted)}
.skin-streamix .sx-copy{text-align:center;padding:14px;color:var(--muted);font-size:.8rem;background:var(--bg-2);border-top:1px solid var(--glass-border)}

/* ---------- Chat FAB ---------- */
.skin-streamix .sx-chat-fab{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;
  background:var(--grad);color:#fff;text-decoration:none;font-weight:700;font-size:.9rem;box-shadow:0 16px 40px -12px rgba(var(--primary-rgb),.85);transition:transform .25s}
.skin-streamix .sx-chat-fab:hover{transform:translateY(-3px) scale(1.03)}

/* ---------- Bottom tab bar (เฉพาะมือถือ) ---------- */
/* ล้าง body padding-bottom ของธีมเดิม (เผื่อ mobile-tabbar) — สกินคุมระยะเองผ่าน container/footer */
body.skin-streamix{padding-bottom:0}
.skin-streamix .sx-tabbar{display:none}
.skin-streamix .sx-tab-i{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;background:none;border:none;font-family:inherit;cursor:pointer;color:var(--muted);font-size:.66rem;font-weight:600;padding:7px 2px;transition:color .2s}
.skin-streamix .sx-tab-i i{font-size:1.18rem}
.skin-streamix .sx-tab-i.on,.skin-streamix .sx-tab-i.on i{color:var(--primary-light)}
.skin-streamix .sx-tab-center{overflow:visible}
.skin-streamix .sx-tab-center .sx-tab-fab{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--grad);margin-top:-30px;margin-bottom:1px;border:4px solid var(--card);box-shadow:0 12px 24px -6px rgba(var(--primary-rgb),.85)}
.skin-streamix .sx-tab-center .sx-tab-fab i{font-size:1.25rem}
.skin-streamix #mtab-bell.sx-tab-i{position:relative}
.skin-streamix #mtab-bell.has-new::after{content:"";position:absolute;top:5px;right:calc(50% - 15px);width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px var(--card)}
@media(max-width:700px){
  .skin-streamix .sx-tabbar{display:flex;align-items:center;justify-content:space-around;gap:2px;
    position:fixed;left:12px;right:12px;bottom:12px;z-index:70;height:62px;padding:0 6px;border-radius:26px;
    background:var(--card);border:1px solid var(--glass-border);box-shadow:0 16px 40px -10px rgba(0,0,0,.55);backdrop-filter:blur(16px)}
  .skin-streamix .container{padding-bottom:98px}
  .skin-streamix .sx-footer{margin-bottom:82px}
  .skin-streamix .sx-chat-fab{bottom:86px}
  .skin-streamix.sx-open .sx-tabbar{display:none}   /* เปิด drawer → ซ่อน tab bar ไม่ให้ทับ sidebar */
}

/* ---------- Scrim (mobile drawer) ---------- */
.skin-streamix .sx-scrim{position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}

/* ---------- Collapse (desktop) ---------- */
@media(min-width:1025px){
  .skin-streamix.sx-collapsed{--sx-w:80px}
  .skin-streamix.sx-collapsed .sx-brand-txt,
  .skin-streamix.sx-collapsed .sx-link-tx,
  .skin-streamix.sx-collapsed .sx-nav-title,
  .skin-streamix.sx-collapsed .sx-nav-caret,
  .skin-streamix.sx-collapsed .sx-side-card{display:none}
  .skin-streamix.sx-collapsed .sx-side-head{justify-content:center}
  .skin-streamix.sx-collapsed .sx-link,
  .skin-streamix.sx-collapsed .sx-nav-group{justify-content:center;padding:11px 0}
  .skin-streamix.sx-collapsed .sx-nav-group{margin-top:8px;background:transparent;border:none}
  .skin-streamix.sx-collapsed .sx-brand{display:none}   /* พับแล้วซ่อนโลโก้ เหลือปุ่มพับตรงกลาง */
}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .skin-streamix .sx-main{margin-left:0}
  .skin-streamix .sx-sidebar{transform:translateX(-100%);width:284px;transition:transform .3s}
  .skin-streamix.sx-open .sx-sidebar{transform:none;box-shadow:0 0 60px rgba(0,0,0,.6)}
  .skin-streamix.sx-open .sx-scrim{opacity:1;visibility:visible}
  .skin-streamix .sx-burger{display:block}
  .skin-streamix .sx-tl span{display:none}
  .skin-streamix .sx-tl{padding:8px 10px}
  .skin-streamix .sx-login-btn span{display:inline}
}
@media(max-width:680px){
  .skin-streamix .container{padding:16px 14px 70px}
  .skin-streamix .sx-topbar{padding:0 12px;gap:7px}
  .skin-streamix .sx-search{height:40px;padding:0 13px;min-width:0}
  .skin-streamix .sx-search input{min-width:0}
  .skin-streamix .sx-top-links{gap:4px;flex:none}
  .skin-streamix .sx-tl{display:none}
  .skin-streamix .sx-bell{width:38px;height:38px}
  .skin-streamix .sx-acc-btn .na-ava{width:38px;height:38px}
  .skin-streamix .sx-bal{display:none}
  .skin-streamix .sx-login-btn{padding:8px 12px}
  .skin-streamix .sx-footer{grid-template-columns:1fr 1fr;gap:13px;padding:18px 14px}
  .skin-streamix .sx-chat-fab span{display:none}
  .skin-streamix .sx-chat-fab{padding:14px;right:14px;bottom:14px}
}

/* ============================================================
   HOMEPAGE (streamix/home.php)
   ============================================================ */
/* ---- Hero ---- */
.skin-streamix .sx-hero{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:center;
  min-height:330px;border-radius:24px;padding:40px 44px;overflow:hidden;margin-bottom:20px;
  background:linear-gradient(130deg,rgba(var(--primary-rgb),.24),rgba(var(--accent-rgb),.12) 60%),var(--card);
  border:1px solid var(--glass-border);box-shadow:0 32px 74px -36px rgba(0,0,0,.6)}
.skin-streamix .sx-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 90% 10%,rgba(var(--accent-rgb),.28),transparent 60%)}
/* พื้นหลังรูป (อัปโหลดได้ + เบลอ + ความมืด) */
.skin-streamix .sx-hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transform:scale(1.06)}
.skin-streamix .sx-hero-scrim{position:absolute;inset:0;z-index:0}
.skin-streamix .sx-hero.has-bg{background:var(--bg-2)}
.skin-streamix .sx-hero.has-bg::before{display:none}
.skin-streamix .sx-hero-l{position:relative;z-index:1}
/* หัวข้อ Hero — ไล่สีเว็บ */
.skin-streamix .sx-hero-l h1{font-size:2.5rem;font-weight:800;line-height:1.14;margin:0 0 14px;letter-spacing:-.02em;
  background:linear-gradient(105deg,#fff 18%,var(--primary-light) 58%,var(--accent-light));-webkit-background-clip:text;background-clip:text;color:transparent}
.skin-streamix .sx-hero-sub{color:var(--muted);font-size:1rem;margin:0 0 20px;max-width:440px}
.skin-streamix .sx-spark{color:#fbbf24}
.skin-streamix .sx-hero-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.skin-streamix .sx-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:10px;font-size:.8rem;font-weight:600;color:var(--text);background:var(--card);border:1px solid var(--glass-border)}
.skin-streamix .sx-chip i{color:#22c55e}
.skin-streamix .sx-hero-cta{display:inline-flex;align-items:center;gap:10px;padding:13px 28px;border-radius:13px;background:var(--grad);color:#fff;text-decoration:none;font-weight:700;font-size:1rem;box-shadow:0 16px 34px -12px rgba(var(--primary-rgb),.8);transition:transform .25s}
.skin-streamix .sx-hero-cta:hover{transform:translateY(-3px)}
/* hero: badge ต้อนรับ + pills + ลูกค้า */
.skin-streamix .sx-hero-welcome{display:inline-flex;align-items:center;gap:8px;padding:6px 15px;border-radius:999px;font-size:.8rem;font-weight:700;color:var(--primary-light);background:rgba(var(--primary-rgb),.13);border:1px solid rgba(var(--primary-rgb),.32);margin-bottom:16px}
.skin-streamix .sx-hero-welcome i{font-size:.82rem}
.skin-streamix .sx-hero-sub2{color:var(--muted);font-size:.9rem;margin:2px 0 20px}
.skin-streamix .sx-hero-sub2 .sx-dot{color:rgba(var(--primary-rgb),.55);margin:0 5px}
.skin-streamix .sx-hero-pills{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%;border:1px solid var(--glass-border);border-radius:16px;background:rgba(var(--primary-rgb),.05);margin-bottom:22px}
.skin-streamix .sx-hp{display:flex;align-items:center;gap:11px;padding:12px 18px;position:relative}
.skin-streamix .sx-hp:not(:last-child)::after{content:"";position:absolute;right:0;top:24%;bottom:24%;width:1px;background:var(--glass-border)}
.skin-streamix .sx-hp-ic{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:1rem}
.skin-streamix .sx-hp-ic.i1{background:linear-gradient(135deg,#22c55e,#16a34a)}
.skin-streamix .sx-hp-ic.i2{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.skin-streamix .sx-hp-ic.i3{background:linear-gradient(135deg,#f59e0b,#f97316)}
.skin-streamix .sx-hp-ic.i4{background:linear-gradient(135deg,#ec4899,#db2777)}
.skin-streamix .sx-hp-tx strong{display:block;font-size:.85rem;color:var(--text)}
.skin-streamix .sx-hp-tx small{display:block;font-size:.7rem;color:var(--muted)}
.skin-streamix .sx-hero-social{display:flex;align-items:center;gap:13px;margin-top:22px}
.skin-streamix .sx-hs-avas{display:flex}
.skin-streamix .sx-hs-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:.78rem;color:#fff;background:var(--grad);border:2px solid var(--card);margin-left:-9px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.skin-streamix .sx-hs-av:first-child{margin-left:0}
.skin-streamix .sx-hs-av.more{background:var(--bg-2);color:var(--primary-light);font-weight:800}
.skin-streamix .sx-hs-tx strong{display:block;color:var(--text);font-size:.88rem}
.skin-streamix .sx-hs-tx small{display:block;color:var(--muted);font-size:.74rem}
/* hero ขวา: glow + ไอคอนลอย + badge ออนไลน์ (การ์ดคลิกได้ยังอยู่) */
.skin-streamix .sx-hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(48% 52% at 55% 48%,rgba(var(--primary-rgb),.45),transparent 62%),radial-gradient(38% 44% at 62% 58%,rgba(var(--accent-rgb),.32),transparent 60%)}
.skin-streamix .sx-hero-stage{position:relative;z-index:1}
.skin-streamix .sx-hero-deco{position:absolute;z-index:2;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:1.1rem;color:var(--primary-light);
  background:var(--bg-2);border:1px solid rgba(var(--primary-rgb),.3);box-shadow:0 8px 22px -6px rgba(var(--primary-rgb),.6);pointer-events:none;animation:sxFloat 4.5s ease-in-out infinite}
.skin-streamix .sx-hero-deco.d1{top:2%;left:2%}
.skin-streamix .sx-hero-deco.d2{top:0;right:7%;animation-delay:.8s}
.skin-streamix .sx-hero-deco.d3{bottom:16%;left:1%;animation-delay:1.6s}
.skin-streamix .sx-online-badge{position:absolute;z-index:2;bottom:8px;right:8px;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:12px;
  background:var(--bg-2);border:1px solid var(--glass-border);color:var(--text);font-size:.8rem;font-weight:700;box-shadow:0 12px 28px -10px rgba(0,0,0,.5)}
.skin-streamix .sx-online-badge small{color:var(--muted);font-weight:500;font-size:.72rem;margin-left:2px}
.skin-streamix .sx-ob-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;animation:sxLive 1.6s ease-out infinite}
/* hero responsive (องค์ประกอบใหม่) */
@media(max-width:600px){
  .skin-streamix .sx-hero-pills{display:grid;grid-template-columns:1fr 1fr}
  .skin-streamix .sx-hp:not(:last-child)::after{display:none}
  .skin-streamix .sx-hp:nth-child(odd){border-right:1px solid var(--glass-border)}
  .skin-streamix .sx-hp:nth-child(1),.skin-streamix .sx-hp:nth-child(2){border-bottom:1px solid var(--glass-border)}
  .skin-streamix .sx-hero-deco{display:none}
}
.skin-streamix .sx-hero-r{position:relative;z-index:1;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.skin-streamix .sx-hero-stage{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;transform:perspective(1100px) rotateY(-9deg) rotateX(4deg)}
.skin-streamix .sx-fcard{aspect-ratio:16/10;border-radius:14px;overflow:hidden;display:grid;place-items:center;text-decoration:none;
  background:var(--bg-2);border:1px solid rgba(var(--primary-rgb),.35);
  box-shadow:0 16px 34px -14px rgba(0,0,0,.6),0 10px 30px -6px rgba(var(--primary-rgb),.55);
  color:var(--muted);font-size:1.6rem;animation:sxFloat 5s ease-in-out infinite;transition:box-shadow .3s,transform .3s}
.skin-streamix .sx-fcard:hover{box-shadow:0 18px 40px -12px rgba(0,0,0,.6),0 14px 40px -4px rgba(var(--primary-rgb),.8);transform:translateY(-4px) scale(1.03)}
.skin-streamix .sx-fcard img{width:100%;height:100%;object-fit:cover}
.skin-streamix .sx-fc1{animation-delay:.3s}.skin-streamix .sx-fc2{animation-delay:.6s}
.skin-streamix .sx-fc3{animation-delay:.9s}.skin-streamix .sx-fc4{animation-delay:1.2s}.skin-streamix .sx-fc5{animation-delay:1.5s}
@keyframes sxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---- Feature strip ---- */
.skin-streamix .sx-featstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:18px 22px;border-radius:18px;margin-bottom:26px;background:var(--card);border:1px solid var(--glass-border)}
.skin-streamix .sx-fs-item{display:flex;align-items:center;gap:12px}
.skin-streamix .sx-fs-ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:1.1rem;color:#fff}
.skin-streamix .sx-fs-ic.i1{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.skin-streamix .sx-fs-ic.i2{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.skin-streamix .sx-fs-ic.i3{background:linear-gradient(135deg,#f59e0b,#d97706)}
.skin-streamix .sx-fs-ic.i4{background:linear-gradient(135deg,#ec4899,#be185d)}
.skin-streamix .sx-fs-item strong{display:block;font-size:.9rem;color:var(--text)}
.skin-streamix .sx-fs-item small{display:block;font-size:.74rem;color:var(--muted)}

/* ---- Section head + tabs ---- */
.skin-streamix .sx-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 14px}
.skin-streamix .sx-sec-title{font-size:1.32rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:9px;margin:0}
.skin-streamix .sx-sec-title i{color:#f97316}
.skin-streamix .sx-seeall{color:var(--muted);text-decoration:none;font-size:.84rem;font-weight:600;padding:7px 14px;border-radius:10px;border:1px solid var(--glass-border);white-space:nowrap;transition:.2s}
.skin-streamix .sx-seeall:hover{color:var(--text);border-color:rgba(var(--primary-rgb),.5)}
.skin-streamix .sx-tabs{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.skin-streamix .sx-tab{display:flex;align-items:center;gap:7px;padding:8px 15px;border-radius:10px;background:var(--card);border:1px solid var(--glass-border);color:var(--muted);font-family:inherit;font-weight:600;font-size:.85rem;cursor:pointer;transition:.2s}
.skin-streamix .sx-tab:hover{color:var(--text);border-color:rgba(var(--primary-rgb),.4)}
.skin-streamix .sx-tab.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 10px 22px -10px rgba(var(--primary-rgb),.7)}

/* ---- Product grid + card ---- */
.skin-streamix .sx-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:15px}
.skin-streamix .sx-pcard{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;text-decoration:none;background:var(--card);border:1px solid var(--glass-border);transition:transform .25s,box-shadow .25s,border-color .25s}
.skin-streamix .sx-pcard:hover{transform:translateY(-5px);border-color:rgba(var(--primary-rgb),.5);box-shadow:0 22px 42px -18px rgba(var(--primary-rgb),.55)}
.skin-streamix .sx-pcard-img{position:relative;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;background:var(--bg-2)}
.skin-streamix .sx-pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.skin-streamix .sx-pcard:hover .sx-pcard-img img{transform:scale(1.06)}
.skin-streamix .sx-pcard-img>i{font-size:2.4rem;color:var(--muted)}
.skin-streamix .sx-fav{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.42);color:#fff;font-size:.78rem;backdrop-filter:blur(4px);z-index:2}
.skin-streamix .sx-variant{position:absolute;bottom:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:.68rem;font-weight:700;color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.skin-streamix .sx-pcard-body{padding:12px 13px 14px;display:flex;flex-direction:column;gap:3px}
.skin-streamix .sx-pcard-name{font-weight:700;font-size:.92rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skin-streamix .sx-pcard-sub{font-size:.7rem;color:var(--muted)}
.skin-streamix .sx-pcard-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.skin-streamix .sx-pcard-price .price-box{display:flex;align-items:baseline;gap:8px}
.skin-streamix .sx-pcard-price .price{font-size:1.2rem;font-weight:800;color:var(--primary-light)}
.skin-streamix .sx-pcard-price .price-old{font-size:.78rem;color:var(--muted);text-decoration:line-through}
.skin-streamix .sx-variant-cta{color:var(--primary-light);font-weight:700;font-size:.9rem;display:inline-flex;gap:6px;align-items:center}
.skin-streamix .sx-pcard-foot{display:flex;align-items:center;justify-content:space-between;margin-top:5px}
.skin-streamix .sx-rate{color:#fbbf24;font-weight:700;font-size:.8rem;display:flex;align-items:center;gap:5px}
.skin-streamix .sx-sold{color:var(--muted);font-size:.72rem}

/* ---- Bottom: promo + popular + reviews ---- */
.skin-streamix .sx-bottom{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:16px;margin-top:28px}
.skin-streamix .sx-promo{position:relative;overflow:hidden;border-radius:18px;padding:26px;text-decoration:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(135deg,rgba(var(--primary-rgb),.95),rgba(var(--accent-rgb),.85));color:#fff;box-shadow:0 22px 46px -18px rgba(var(--primary-rgb),.7)}
.skin-streamix .sx-promo-badge{display:inline-flex;gap:6px;align-items:center;background:rgba(255,255,255,.22);padding:5px 13px;border-radius:999px;font-size:.76rem;font-weight:700}
.skin-streamix .sx-promo h3{font-size:1.5rem;margin:12px 0 2px;font-weight:800}
.skin-streamix .sx-promo h3 span{font-size:2rem}
.skin-streamix .sx-promo p{opacity:.9;font-size:.85rem;margin:0 0 14px}
.skin-streamix .sx-promo-btn{display:inline-flex;gap:8px;align-items:center;background:#fff;color:rgba(var(--primary-rgb),1);padding:9px 18px;border-radius:11px;font-weight:700;font-size:.85rem}
.skin-streamix .sx-promo-ico{font-size:4.4rem;opacity:.22;flex:none}
/* ฟีดออเดอร์ล่าสุด (แทนโปรโม) — เลื่อนลงวนลูป */
.skin-streamix .sx-orders{display:flex;flex-direction:column;overflow:hidden;border-radius:18px;padding:18px;background:var(--card);border:1px solid var(--glass-border)}
.skin-streamix .sx-orders-h{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--text);font-size:.98rem;margin-bottom:14px}
.skin-streamix .sx-live-dot{width:9px;height:9px;flex:none;border-radius:50%;background:#22c55e;animation:sxLive 1.6s ease-out infinite}
@keyframes sxLive{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}100%{box-shadow:0 0 0 9px rgba(34,197,94,0)}}
.skin-streamix .sx-orders-scroll{height:340px;overflow:hidden;position:relative;
  -webkit-mask:linear-gradient(transparent,#000 11%,#000 89%,transparent);mask:linear-gradient(transparent,#000 11%,#000 89%,transparent)}
.skin-streamix .sx-orders-track{display:flex;flex-direction:column;gap:10px;animation-name:sxVMarq;animation-timing-function:linear;animation-iteration-count:infinite}
.skin-streamix .sx-orders:hover .sx-orders-track{animation-play-state:paused}
.skin-streamix .sx-order-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;background:var(--bg-2);border:1px solid var(--glass-border)}
.skin-streamix .sx-oi-ava{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--grad);font-size:.85rem}
.skin-streamix .sx-oi-tx{flex:1;min-width:0}
.skin-streamix .sx-oi-tx strong{display:block;color:var(--text);font-size:.85rem;font-weight:700}
.skin-streamix .sx-oi-tx small{display:block;color:var(--muted);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skin-streamix .sx-oi-time{display:block;color:var(--muted);font-size:.66rem;margin-top:2px}
.skin-streamix .sx-oi-time i{margin-right:3px}
.skin-streamix .sx-oi-x{color:var(--primary-light);font-weight:700}
.skin-streamix .sx-oi-meta{flex:none;text-align:right;display:flex;flex-direction:column}
.skin-streamix .sx-oi-price{color:var(--primary-light);font-weight:800;font-size:.9rem}
.skin-streamix .sx-oi-ok{font-size:.66rem;color:#22c55e;font-weight:600;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.skin-streamix .sx-orders-track{animation:none}.skin-streamix .sx-orders-scroll{overflow-y:auto}}
.skin-streamix .sx-panel{border-radius:18px;padding:18px;background:var(--card);border:1px solid var(--glass-border)}
.skin-streamix .sx-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.skin-streamix .sx-panel-head>span{font-weight:700;color:var(--text);display:flex;gap:8px;align-items:center;font-size:.98rem}
.skin-streamix .sx-panel-head i{color:#fbbf24}
.skin-streamix .sx-panel-head a{color:var(--muted);font-size:.8rem;text-decoration:none}
.skin-streamix .sx-panel-head a:hover{color:var(--text)}
.skin-streamix .sx-poplist{display:flex;flex-direction:column;gap:8px}
/* marquee แนวตั้ง (ยอดนิยม/รีวิว) — เลื่อนลงวนลูป */
.skin-streamix .sx-vscroll{height:340px;overflow:hidden;position:relative;-webkit-mask:linear-gradient(transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(transparent,#000 8%,#000 92%,transparent)}
.skin-streamix .sx-vtrack{animation-name:sxVMarq;animation-timing-function:linear;animation-iteration-count:infinite}
.skin-streamix .sx-panel:hover .sx-vtrack{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.skin-streamix .sx-vtrack{animation:none}.skin-streamix .sx-vscroll{overflow-y:auto}}
.skin-streamix .sx-popitem{display:flex;align-items:center;gap:12px;text-decoration:none;padding:6px;border-radius:12px;transition:.2s}
.skin-streamix .sx-popitem:hover{background:rgba(var(--primary-rgb),.07)}
.skin-streamix .sx-pop-img{width:42px;height:42px;border-radius:10px;overflow:hidden;flex:none;display:grid;place-items:center;background:var(--bg-2);color:var(--muted)}
.skin-streamix .sx-pop-img img{width:100%;height:100%;object-fit:cover}
.skin-streamix .sx-pop-name{flex:1;min-width:0;color:var(--text);font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skin-streamix .sx-pop-price{flex:none;display:flex;align-items:baseline;gap:6px}
.skin-streamix .sx-pop-price .price{color:var(--primary-light);font-weight:800;font-size:.95rem}
.skin-streamix .sx-pop-price .price-old{font-size:.72rem;color:var(--muted);text-decoration:line-through}
.skin-streamix .sx-revlist{display:flex;flex-direction:column;gap:13px}
.skin-streamix .sx-review{display:flex;gap:11px}
.skin-streamix .sx-rev-ava{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--grad);color:#fff}
.skin-streamix .sx-rev-body{flex:1;min-width:0}
.skin-streamix .sx-rev-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.skin-streamix .sx-rev-top strong{color:var(--text);font-size:.86rem}
.skin-streamix .sx-rev-stars{color:#fbbf24;font-size:.68rem;white-space:nowrap}
.skin-streamix .sx-rev-prod{color:var(--primary-light);font-size:.76rem;font-weight:600;margin-top:2px}
.skin-streamix .sx-rev-cmt{color:var(--muted);font-size:.8rem;margin-top:2px}
.skin-streamix .sx-rev-time{color:var(--muted);font-size:.7rem;margin-top:4px}

/* ---- Homepage responsive ---- */
@media(max-width:960px){
  .skin-streamix .sx-hero{grid-template-columns:1fr;padding:30px 26px}
  .skin-streamix .sx-hero-stage{transform:none;max-width:420px}
  .skin-streamix .sx-featstrip{grid-template-columns:1fr 1fr}
  .skin-streamix .sx-bottom{grid-template-columns:1fr}
}
@media(max-width:600px){
  .skin-streamix .sx-hero-l h1{font-size:1.85rem}
  .skin-streamix .sx-featstrip{grid-template-columns:1fr}
  .skin-streamix .sx-pgrid{grid-template-columns:1fr 1fr;gap:11px}
  .skin-streamix .sx-hero-stage{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================
   TOPUP (streamix/topup.php)
   ============================================================ */
.skin-streamix .sx-topup{display:grid;grid-template-columns:1fr 332px;gap:20px;align-items:start}
.skin-streamix .sx-topup-main{min-width:0;display:flex;flex-direction:column;gap:18px}
.skin-streamix .sx-topup-rail{display:flex;flex-direction:column;gap:16px;position:sticky;top:90px}
/* hero */
.skin-streamix .sx-tu-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center;border-radius:22px;padding:32px 34px;
  background:linear-gradient(130deg,rgba(var(--primary-rgb),.24),rgba(var(--accent-rgb),.14) 65%),var(--card);border:1px solid var(--glass-border);box-shadow:0 30px 66px -34px rgba(0,0,0,.6)}
.skin-streamix .sx-tu-hero>.sx-tu-hero-l,.skin-streamix .sx-tu-hero>.sx-tu-hero-r{position:relative;z-index:1}

.skin-streamix .sx-tu-hero-l h1{font-size:2.5rem;font-weight:800;margin:0 0 6px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.skin-streamix .sx-tu-hero-l>p{color:var(--muted);margin:0 0 20px}
.skin-streamix .sx-tu-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.skin-streamix .sx-tu-feat{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.skin-streamix .sx-tu-fic{width:52px;height:52px;flex:none;border-radius:15px;display:grid;place-items:center;font-size:1.3rem;color:var(--primary-light);background:rgba(var(--primary-rgb),.14);border:1px solid rgba(var(--primary-rgb),.28)}
.skin-streamix .sx-tu-ft{font-size:.82rem;font-weight:700;color:var(--text);display:flex;flex-direction:column;line-height:1.35}
.skin-streamix .sx-tu-ft small{font-weight:500;color:var(--muted);font-size:.68rem}
/* credit card */
.skin-streamix .sx-tu-hero-r{display:flex;justify-content:center;align-items:center;perspective:1000px}
.skin-streamix .sx-credit-card{position:relative;width:318px;max-width:100%;height:199px;flex:none;border-radius:18px;padding:20px;color:#fff;
  background:linear-gradient(135deg,rgba(var(--primary-rgb),1),rgba(var(--accent-rgb),1));box-shadow:0 30px 60px -20px rgba(var(--primary-rgb),.8),inset 0 1px 0 rgba(255,255,255,.25);
  transform:rotateY(-13deg) rotateX(6deg);transform-style:preserve-3d;animation:sxCardFloat 5s ease-in-out infinite}
@keyframes sxCardFloat{0%,100%{transform:rotateY(-13deg) rotateX(6deg) translateY(0)}50%{transform:rotateY(-13deg) rotateX(6deg) translateY(-11px)}}
.skin-streamix .sx-cc-bg{position:absolute;inset:0;z-index:0;border-radius:inherit;background-size:cover;background-position:center;overflow:hidden}
.skin-streamix .sx-credit-card.has-bg>:not(.sx-cc-bg):not(.sx-cc-coin){position:relative;z-index:1}
.skin-streamix .sx-credit-card.has-bg .sx-cc-coin{z-index:2}
.skin-streamix .sx-cc-top{display:flex;justify-content:space-between;align-items:center;font-weight:800;letter-spacing:.5px}
.skin-streamix .sx-cc-brand{font-size:.95rem}
.skin-streamix .sx-cc-label{font-size:.72rem;opacity:.8;letter-spacing:2px}
.skin-streamix .sx-cc-chip{width:48px;height:37px;border-radius:8px;margin:14px 0;display:grid;place-items:center;
  background:linear-gradient(135deg,#fde68a,#f0b429 55%,#d98a00);box-shadow:inset 0 0 5px rgba(0,0,0,.35),0 3px 8px -2px rgba(0,0,0,.4)}
.skin-streamix .sx-cc-chip i{color:#7a5200;font-size:1.35rem}
.skin-streamix .sx-cc-num{display:flex;justify-content:space-between;font-size:1rem;letter-spacing:1px;font-family:monospace;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.skin-streamix .sx-cc-foot{display:flex;justify-content:space-between;margin-top:14px;font-size:.74rem;text-transform:uppercase;opacity:.92;letter-spacing:.5px}
.skin-streamix .sx-cc-coin{position:absolute;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 8px 20px -4px rgba(245,158,11,.7)}
.skin-streamix .sx-cc-coin.c1{width:38px;height:38px;top:-15px;right:22px;font-size:.9rem;animation:sxFloat 3s ease-in-out infinite}
.skin-streamix .sx-cc-coin.c2{width:28px;height:28px;bottom:-11px;left:26px;font-size:.72rem;animation:sxFloat 3.6s ease-in-out infinite .5s}
/* blocks */
.skin-streamix .sx-tu-block{border-radius:20px;padding:22px;background:var(--card);border:1px solid var(--glass-border)}
.skin-streamix .sx-tu-head{display:flex;align-items:center;gap:9px;font-size:1.05rem;font-weight:800;color:var(--text);margin-bottom:16px}
.skin-streamix .sx-tu-head i{color:var(--primary-light)}
.skin-streamix .sx-tu-prompt{text-align:center;color:var(--muted);font-size:.92rem;padding:22px;border-radius:16px;background:rgba(var(--primary-rgb),.05);border:1px dashed var(--glass-border)}
.skin-streamix .sx-tu-prompt i{color:var(--primary-light);margin-right:7px}
/* amount grid */
.skin-streamix .sx-amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.skin-streamix .sx-amount{display:flex;flex-direction:column;gap:6px;padding:15px;border-radius:14px;cursor:pointer;text-align:left;background:var(--bg-2);border:1.5px solid var(--glass-border);transition:.2s}
.skin-streamix .sx-amount:hover{border-color:rgba(var(--primary-rgb),.5);transform:translateY(-2px)}
.skin-streamix .sx-amount.active{border-color:transparent;background:linear-gradient(150deg,rgba(var(--primary-rgb),.25),rgba(var(--accent-rgb),.12));box-shadow:0 0 0 1.5px rgba(var(--primary-rgb),.85)}
.skin-streamix .sx-am-coin{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:.82rem;color:#fff;background:linear-gradient(135deg,#fbbf24,#f59e0b)}
.skin-streamix .sx-am-coin.alt{background:var(--grad)}
.skin-streamix .sx-am-baht{font-size:1.18rem;font-weight:800;color:var(--text)}
.skin-streamix .sx-am-baht small{font-size:.78rem;font-weight:500;color:var(--muted)}
.skin-streamix .sx-am-credit{font-size:.7rem;color:var(--muted)}
.skin-streamix .sx-am-input .input-icon{border-radius:12px}
/* methods */
.skin-streamix .sx-methods{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.skin-streamix .sx-method{position:relative;display:flex;align-items:center;gap:12px;justify-content:flex-start;text-align:left;padding:15px;border-radius:14px;min-height:74px;background:var(--bg-2);border:1.5px solid var(--glass-border);cursor:pointer;transition:.2s;backdrop-filter:none}
.skin-streamix .sx-method:hover{border-color:rgba(var(--primary-rgb),.5);transform:translateY(-2px);box-shadow:none}
.skin-streamix .sx-method.active{border-color:transparent;color:inherit;box-shadow:0 0 0 1.5px rgba(var(--primary-rgb),.85);background:linear-gradient(150deg,rgba(var(--primary-rgb),.22),rgba(var(--accent-rgb),.1))}
.skin-streamix .sx-m-ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:1.15rem;color:var(--primary-light);background:rgba(var(--primary-rgb),.12);transition:.2s}
.skin-streamix .sx-method.active .sx-m-ic{background:var(--grad);color:#fff}
.skin-streamix .sx-m-tx{display:flex;flex-direction:column;min-width:0}
.skin-streamix .sx-method .pc-name{font-weight:700;font-size:.9rem;color:var(--text)}
.skin-streamix .sx-method .pc-fee{font-size:.72rem;color:#fbbf24;font-weight:600}
.skin-streamix .sx-method .pc-fee.free{color:var(--success)}
.skin-streamix .sx-m-reco{position:absolute;top:9px;right:9px;padding:3px 9px;border-radius:999px;font-size:.64rem;font-weight:800;color:#fff;background:var(--grad)}
/* panels + form */
.skin-streamix .sx-tu-panels{border-radius:20px;padding:22px;background:var(--card);border:1px solid var(--glass-border);margin-top:0}
.skin-streamix .sx-tu-alert{background:rgba(251,191,36,.12);color:#fbbf24;border:1px solid rgba(251,191,36,.3);margin-bottom:16px;padding:12px 16px;border-radius:12px}
.skin-streamix .sx-tu-submit{margin-top:16px;padding:15px;font-size:1.05rem;border-radius:14px}
.skin-streamix .sx-tu-secure{text-align:center;color:var(--muted);font-size:.82rem;margin-top:14px}
.skin-streamix .sx-tu-secure i{color:#22c55e}
/* right rail */
.skin-streamix .sx-rail-card{border-radius:18px;padding:18px;background:var(--card);border:1px solid var(--glass-border)}
.skin-streamix .sx-rail-lbl{font-size:.85rem;color:var(--muted);font-weight:600;margin-bottom:9px}
.skin-streamix .sx-rail-amt{font-size:1.85rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:10px}
.skin-streamix .sx-rail-coin{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;font-size:1rem;color:#fff;background:linear-gradient(135deg,#fbbf24,#f59e0b)}
.skin-streamix .sx-rail-note{margin-top:12px;padding:9px 12px;border-radius:10px;background:rgba(34,197,94,.1);color:#22c55e;font-size:.78rem;font-weight:600}
.skin-streamix .sx-rail-promo-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.skin-streamix .sx-rail-promo-head>span:first-child{font-weight:700;color:var(--text);font-size:.95rem}
.skin-streamix .sx-rail-promo-head i{color:#ec4899}
.skin-streamix .sx-rail-timer{font-family:monospace;font-weight:700;color:#f472b6;background:rgba(236,72,153,.12);padding:4px 10px;border-radius:8px;font-size:.82rem}
.skin-streamix .sx-rail-bonus{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px;border-radius:14px;margin-bottom:14px;background:linear-gradient(135deg,rgba(var(--primary-rgb),.92),rgba(var(--accent-rgb),.82));color:#fff}
.skin-streamix .sx-rail-bonus-tx strong{font-size:.92rem}
.skin-streamix .sx-rail-bonus-tx p{font-size:.76rem;opacity:.92;margin:4px 0 0}
.skin-streamix .sx-rail-bonus-tx b{font-size:1rem}
.skin-streamix .sx-rail-bonus-badge{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;background:rgba(255,255,255,.22);font-weight:800;font-size:1.05rem;line-height:1}
.skin-streamix .sx-rail-bonus-badge small{font-size:.48rem;letter-spacing:1px;margin-top:2px}
.skin-streamix .sx-rail-blist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.skin-streamix .sx-rail-blist li{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--muted)}
.skin-streamix .sx-rail-blist i{color:var(--primary-light);width:16px;text-align:center}
.skin-streamix .sx-rail-head{margin-bottom:12px}
.skin-streamix .sx-rail-head span{font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.skin-streamix .sx-rail-head i{color:var(--primary-light)}
.skin-streamix .sx-rail-histlist{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.skin-streamix .sx-hist-item{display:flex;align-items:center;gap:11px}
.skin-streamix .sx-hist-ic{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--primary-light);background:rgba(var(--primary-rgb),.1)}
.skin-streamix .sx-hist-tx{display:flex;flex-direction:column;min-width:0}
.skin-streamix .sx-hist-tx strong{color:#22c55e;font-size:.9rem}
.skin-streamix .sx-hist-tx small{color:var(--muted);font-size:.72rem}
.skin-streamix .sx-rail-empty{color:var(--muted);font-size:.82rem;text-align:center;padding:12px}
.skin-streamix .sx-rail-histbtn{width:100%;padding:10px;border-radius:11px;background:transparent;border:1px solid var(--glass-border);color:var(--text);font-family:inherit;font-weight:600;font-size:.84rem;cursor:pointer;transition:.2s}
.skin-streamix .sx-rail-histbtn:hover{border-color:rgba(var(--primary-rgb),.5);background:rgba(var(--primary-rgb),.07)}
/* topup responsive */
@media(max-width:980px){
  .skin-streamix .sx-topup{grid-template-columns:1fr}
  .skin-streamix .sx-topup-rail{position:static}
  .skin-streamix .sx-tu-hero{grid-template-columns:1fr}
  .skin-streamix .sx-credit-card{margin:8px auto 0;height:auto;aspect-ratio:1.6/1}
}
@media(max-width:620px){
  .skin-streamix .sx-amount-grid{grid-template-columns:1fr 1fr}
  .skin-streamix .sx-methods{grid-template-columns:1fr 1fr}
  .skin-streamix .sx-tu-feats{grid-template-columns:1fr 1fr}
  .skin-streamix .sx-tu-hero-l h1{font-size:2rem}
  .skin-streamix .sx-tu-block{padding:16px}
}
@media(max-width:400px){.skin-streamix .sx-methods{grid-template-columns:1fr}}

/* ============================================================
   AUTH — login/register (streamix/auth.php) เต็มจอ ไม่มี sidebar
   ============================================================ */
.skin-streamix.auth-page .container{max-width:none;margin:0;padding:0;width:100%}
.skin-streamix .sx-auth{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;overflow:hidden}
.skin-streamix .sx-auth-inner{position:relative;z-index:2;width:100%;max-width:1000px;display:flex;flex-direction:column;align-items:center;gap:26px}
.skin-streamix .sx-auth-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.skin-streamix .sx-auth-logo-tx{display:none}   /* หน้า login/register: โชว์แค่โลโก้ ไม่เอาชื่อ+คำโปรย */
/* ปุ่มย้อนกลับหน้าหลัก (มุมซ้ายบน) */
.skin-streamix .sx-auth-back{position:absolute;top:20px;left:20px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:11px;background:var(--card);border:1px solid var(--glass-border);color:var(--text);text-decoration:none;font-size:.85rem;font-weight:600;backdrop-filter:blur(8px);transition:transform .2s,border-color .2s}
.skin-streamix .sx-auth-back:hover{border-color:rgba(var(--primary-rgb),.55);transform:translateX(-3px)}
@media(max-width:560px){.skin-streamix .sx-auth-back{top:14px;left:14px;padding:9px 12px}.skin-streamix .sx-auth-back span{display:none}}
.skin-streamix .sx-auth-logo-ic{width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;overflow:hidden;background:var(--grad);color:#fff;font-size:1.25rem;box-shadow:0 10px 24px -8px rgba(var(--primary-rgb),.7)}
.skin-streamix .sx-auth-logo-ic img{width:100%;height:100%;object-fit:cover}
.skin-streamix .sx-auth-logo-tx strong{display:block;color:var(--text);font-size:1.3rem;font-weight:800;letter-spacing:.5px;line-height:1.1}
.skin-streamix .sx-auth-logo-tx small{display:block;color:var(--muted);font-size:.72rem}
.skin-streamix .sx-auth-grid{display:flex;justify-content:center;width:100%}
.skin-streamix .sx-auth-card:not(.on){display:none}   /* โชว์ทีละใบ — สลับด้วยลิงก์ สมัคร/เข้าสู่ระบบ */
.skin-streamix .sx-auth-card{width:100%;max-width:470px;border-radius:22px;padding:32px 30px;background:var(--card);border:1px solid var(--glass-border);backdrop-filter:blur(14px);box-shadow:0 30px 70px -34px rgba(0,0,0,.6);transition:.3s}
.skin-streamix .sx-auth-card.on{border-color:rgba(var(--primary-rgb),.42);box-shadow:0 34px 80px -30px rgba(var(--primary-rgb),.5)}
.skin-streamix .sx-auth-h{font-size:1.7rem;font-weight:800;color:var(--text);text-align:center;margin:0 0 5px}
.skin-streamix .sx-auth-p{color:var(--muted);text-align:center;font-size:.88rem;margin:0 0 22px}
.skin-streamix .sx-auth-row{display:flex;align-items:center;justify-content:space-between;margin:2px 0 16px}
.skin-streamix .sx-check{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.83rem;cursor:pointer}
.skin-streamix .sx-check input{width:16px;height:16px;flex:none;accent-color:rgba(var(--primary-rgb),1)}
.skin-streamix .sx-auth-link{color:var(--primary-light);text-decoration:none;font-size:.83rem;font-weight:600}
.skin-streamix .sx-auth-btn{width:100%;padding:13px;border-radius:12px;border:none;background:var(--grad);color:#fff;font-family:inherit;font-weight:700;font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 14px 30px -12px rgba(var(--primary-rgb),.8);transition:transform .2s}
.skin-streamix .sx-auth-btn:hover{transform:translateY(-2px)}
.skin-streamix .sx-auth-or{position:relative;text-align:center;margin:20px 0}
.skin-streamix .sx-auth-or::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--glass-border)}
.skin-streamix .sx-auth-or span{position:relative;background:var(--card);padding:0 14px;color:var(--muted);font-size:.8rem}
.skin-streamix .sx-auth-oauth{display:flex;gap:10px;flex-wrap:wrap}
.skin-streamix .sx-auth-oauth>*{flex:1;min-width:100px}
.skin-streamix .sx-auth-foot{text-align:center;margin-top:18px;color:var(--muted);font-size:.85rem}
.skin-streamix .sx-auth-foot a{color:var(--primary-light);text-decoration:none;font-weight:600}

/* ===== รูปพื้นหลังหน้า login/register (เบลอ + มืด) ===== */
.skin-streamix .sx-auth-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transform:scale(1.06)}
.skin-streamix .sx-auth-scrim{position:absolute;inset:0;z-index:0}
.skin-streamix .sx-auth.has-bg .sx-auth-card{background:rgba(13,13,26,.74);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-color:rgba(255,255,255,.12)}
.skin-streamix .sx-auth.has-bg .sx-auth-logo-tx strong{text-shadow:0 2px 14px rgba(0,0,0,.6)}

/* register stepper */
.skin-streamix .sx-reg-steps{display:flex;align-items:flex-start;justify-content:space-between;margin:0 0 22px;position:relative}
.skin-streamix .sx-reg-steps::before{content:"";position:absolute;top:16px;left:14%;right:14%;height:2px;background:var(--glass-border)}
.skin-streamix .sx-rs{display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;z-index:1;flex:1}
.skin-streamix .sx-rs-n{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;background:var(--bg-2);border:1px solid var(--glass-border);color:var(--muted)}
.skin-streamix .sx-rs.on .sx-rs-n{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 0 0 4px rgba(var(--primary-rgb),.16)}
.skin-streamix .sx-rs-l{font-size:.72rem;color:var(--muted)}
.skin-streamix .sx-rs.on .sx-rs-l{color:var(--text);font-weight:600}
.skin-streamix .sx-terms{align-items:flex-start;margin:6px 0 16px;line-height:1.5}
.skin-streamix .sx-terms a{color:var(--primary-light);text-decoration:none}
/* floating decoration */
.skin-streamix .sx-auth-float{position:absolute;inset:0;z-index:1;pointer-events:none}
.skin-streamix .sx-af{position:absolute;width:78px;height:78px;border-radius:18px;overflow:hidden;display:grid;place-items:center;font-size:1.8rem;color:var(--primary-light);
  background:var(--bg-2);border:1px solid var(--glass-border);box-shadow:0 18px 40px -14px rgba(0,0,0,.6);animation:sxFloat 6s ease-in-out infinite}
.skin-streamix .sx-af img{width:100%;height:100%;object-fit:cover}
.skin-streamix .sx-af0{top:11%;left:5%;animation-delay:0s}
.skin-streamix .sx-af1{top:40%;left:2%;animation-delay:.8s}
.skin-streamix .sx-af2{bottom:12%;left:7%;animation-delay:1.6s}
.skin-streamix .sx-af3{top:13%;right:5%;animation-delay:.4s}
.skin-streamix .sx-af4{top:44%;right:2%;animation-delay:1.2s}
.skin-streamix .sx-af5{bottom:14%;right:7%;animation-delay:2s}
/* trust strip */
.skin-streamix .sx-auth-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;width:100%;padding-top:22px;border-top:1px solid var(--glass-border)}
.skin-streamix .sx-at-item{display:flex;align-items:center;gap:11px}
.skin-streamix .sx-at-item>i{font-size:1.4rem;color:var(--primary-light);flex:none}
.skin-streamix .sx-at-item strong{display:block;font-size:.85rem;color:var(--text)}
.skin-streamix .sx-at-item small{display:block;font-size:.72rem;color:var(--muted)}
/* auth responsive */
@media(max-width:860px){
  .skin-streamix .sx-auth-float{display:none}
  /* trust: 2×2 กระชับ + จำกัดกว้างเท่าการ์ด จัดกึ่งกลาง (ไม่กางเต็มจอ) */
  .skin-streamix .sx-auth-trust{grid-template-columns:1fr 1fr;gap:14px 12px;max-width:470px;margin:0 auto;justify-items:start}
}
@media(max-width:480px){
  .skin-streamix .sx-auth-card{padding:24px 20px}
  .skin-streamix .sx-auth-trust{gap:12px 10px}
  .skin-streamix .sx-at-item{align-items:flex-start;gap:9px}
  .skin-streamix .sx-at-item>i{font-size:1.15rem;margin-top:2px}
  .skin-streamix .sx-at-item strong{font-size:.8rem;line-height:1.25}
  .skin-streamix .sx-at-item small{font-size:.68rem}
}

/* ============================================================
   HARMONIZE default pages (shop / product / group / profile / checkout)
   ให้ component เดิมเข้าชุดกับสกิน (ใช้ตัวแปรธีมอยู่แล้ว — ปรับเล็กน้อย)
   ============================================================ */
.skin-streamix .section-title{font-size:1.3rem;font-weight:800;color:var(--text);letter-spacing:-.01em}
.skin-streamix .section-title i{color:var(--primary-light)}
.skin-streamix .panel{border-radius:18px}
.skin-streamix .card{border-radius:16px}
.skin-streamix .breadcrumb{color:var(--muted)}
/* ทำให้หัวข้อ/เนื้อหาหน้าใน ไม่ชิดขอบเกินไปบนจอเล็ก */
@media(max-width:680px){
  .skin-streamix .section-title{font-size:1.15rem}
}

/* ============================================================
   Glass shine sweep — แสงกระจกวิ่งผ่านตอน hover การ์ด
   ============================================================ */
.skin-streamix .sx-pcard,.skin-streamix .sx-fcard,.skin-streamix .sx-method,
.skin-streamix .sx-amount,.skin-streamix .sx-popitem,.skin-streamix .sx-fcard{position:relative;overflow:hidden}
.skin-streamix .sx-pcard::after,.skin-streamix .sx-fcard::after,.skin-streamix .sx-method::after,
.skin-streamix .sx-amount::after,.skin-streamix .sx-popitem::after{
  content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;z-index:5;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 15%,rgba(255,255,255,.28) 50%,transparent 85%);transform:skewX(-18deg)}
.skin-streamix .sx-pcard:hover::after,.skin-streamix .sx-fcard:hover::after,.skin-streamix .sx-method:hover::after,
.skin-streamix .sx-amount:hover::after,.skin-streamix .sx-popitem:hover::after{animation:sxShine .85s ease}
@keyframes sxShine{0%{left:-80%;opacity:1}100%{left:135%;opacity:1}}
@media(prefers-reduced-motion:reduce){
  .skin-streamix .sx-pcard:hover::after,.skin-streamix .sx-fcard:hover::after,.skin-streamix .sx-method:hover::after,
  .skin-streamix .sx-amount:hover::after,.skin-streamix .sx-popitem:hover::after{animation:none}
}

/* ============================================================
   PRODUCT (streamix/product.php) — 3 คอลัมน์
   ============================================================ */
.skin-streamix .sx-crumb{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.82rem;margin-bottom:12px;flex-wrap:wrap}
.skin-streamix .sx-crumb a{color:var(--muted);text-decoration:none}
.skin-streamix .sx-crumb a:hover{color:var(--text)}
.skin-streamix .sx-crumb i{font-size:.58rem;opacity:.6}
.skin-streamix .sx-crumb span{color:var(--text);font-weight:600}
.skin-streamix .sx-p-head{margin-bottom:18px}
.skin-streamix .sx-p-head h1{font-size:1.8rem;font-weight:800;color:var(--text);margin:0 0 4px}
.skin-streamix .sx-p-head p{color:var(--muted);margin:0;font-size:.9rem}
.skin-streamix .sx-p{display:grid;gap:18px;align-items:start}
.skin-streamix .sx-p.has-var{grid-template-columns:minmax(430px,400px) 1fr minmax(400px,344px)}
.skin-streamix .sx-p.no-var{grid-template-columns:minmax(300px,360px) 1fr minmax(300px,344px)}
/* คอลัมน์กลางเมื่อไม่มี variant (รายละเอียด + จุดเด่น) */
.skin-streamix .sx-p-mid-info{display:flex;flex-direction:column;gap:16px}
.skin-streamix .sx-p-midbox{border-radius:16px;padding:20px;background:var(--card);border:1px solid var(--glass-border)}
.skin-streamix .sx-p-midbox .sx-p-video{margin-top:0}
.skin-streamix .sx-p-desc-list.one{grid-template-columns:1fr;gap:11px}
.skin-streamix .sx-p-benefits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.skin-streamix .sx-p-benefits li{display:flex;align-items:flex-start;gap:12px;color:var(--muted);font-size:.88rem;line-height:1.5}
.skin-streamix .sx-p-benefits li strong{color:var(--text)}
.skin-streamix .sx-bf-ic{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;color:#fff;background:var(--grad);font-size:.85rem;margin-top:1px}
/* left */
.skin-streamix .sx-p-left{border-radius:20px;padding:20px;background:var(--card);border:1px solid var(--glass-border)}
.skin-streamix .sx-p-back{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-decoration:none;font-size:.82rem;margin-bottom:12px}
.skin-streamix .sx-p-back:hover{color:var(--text)}
.skin-streamix .sx-p-img{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;display:grid;place-items:center;background:var(--bg-2);margin-bottom:16px}
.skin-streamix .sx-p-img img{width:100%;height:100%;object-fit:cover}
.skin-streamix .sx-p-img>i{font-size:3rem;color:var(--muted)}
.skin-streamix .sx-p-name{font-size:1.3rem;font-weight:800;color:var(--text);margin:0 0 8px}
.skin-streamix .sx-p-cat{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:.76rem;font-weight:600;color:var(--primary-light);background:rgba(var(--primary-rgb),.12)}
.skin-streamix .sx-p-meta{display:flex;gap:14px;align-items:center;margin:12px 0}
.skin-streamix .sx-p-rate{color:#fbbf24;font-weight:700;font-size:.88rem;display:flex;align-items:center;gap:5px}
.skin-streamix .sx-p-sold{color:var(--muted);font-size:.82rem}
.skin-streamix .sx-p-feats{list-style:none;margin:0 0 16px;padding:14px;border-radius:14px;background:var(--bg-2);display:flex;flex-direction:column;gap:9px}
.skin-streamix .sx-p-feats li{display:flex;align-items:flex-start;gap:9px;color:var(--text);font-size:.85rem}
.skin-streamix .sx-p-feats i{color:#22c55e;margin-top:3px}
.skin-streamix .sx-p-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.skin-streamix .sx-pb{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:12px 8px;border-radius:12px;background:var(--bg-2);border:1px solid var(--glass-border)}
.skin-streamix .sx-pb-ic{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;color:#fff;background:var(--grad);font-size:1rem}
.skin-streamix .sx-pb-tx{font-size:.73rem;font-weight:700;color:var(--text);display:flex;flex-direction:column;line-height:1.3}
.skin-streamix .sx-pb-tx small{font-weight:500;color:var(--muted);font-size:.64rem}
.skin-streamix .sx-p-video{margin-top:16px;border-radius:14px;overflow:hidden;aspect-ratio:16/9}
.skin-streamix .sx-p-video iframe{width:100%;height:100%;border:0}
/* middle packages */
.skin-streamix .sx-p-mid{display:flex;flex-direction:column;gap:12px}
.skin-streamix .sx-p-midhead{font-size:1.05rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:9px}
.skin-streamix .sx-p-midhead i{color:var(--primary-light)}
.skin-streamix .sx-pkgs{display:flex;flex-direction:column;gap:12px}
.skin-streamix .sx-pkg{position:relative;display:flex;align-items:center;gap:14px;padding:18px;border-radius:16px;text-decoration:none;background:var(--card);border:1.5px solid var(--glass-border);transition:.2s}
.skin-streamix .sx-pkgs{padding-top:9px}   /* เผื่อที่ให้ป้าย "แนะนำ" ที่โผล่เหนือการ์ด */
.skin-streamix .sx-pkg:hover{border-color:rgba(var(--primary-rgb),.5);transform:translateY(-2px)}
.skin-streamix .sx-pkg.active{border-color:transparent;background:linear-gradient(140deg,rgba(var(--primary-rgb),.2),rgba(var(--accent-rgb),.09));box-shadow:0 0 0 1.5px rgba(var(--primary-rgb),.85)}
.skin-streamix .sx-pkg.out{opacity:.55}
.skin-streamix .sx-pkg-radio{width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--glass-border);position:relative;transition:.2s}
.skin-streamix .sx-pkg.active .sx-pkg-radio{border-color:rgba(var(--primary-rgb),1)}
.skin-streamix .sx-pkg.active .sx-pkg-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--grad)}
.skin-streamix .sx-pkg-main{flex:1;min-width:0}
.skin-streamix .sx-pkg-name{font-size:1.05rem;font-weight:700;color:var(--text)}
.skin-streamix .sx-pkg-sub{font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:2px}
.skin-streamix .sx-pkg-price{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end}
.skin-streamix .sx-pkg-old{font-size:.75rem;color:var(--muted);text-decoration:line-through}
.skin-streamix .sx-pkg-now{font-size:1.25rem;font-weight:800;color:var(--primary-light)}
.skin-streamix .sx-pkg-out{font-size:.7rem;color:#ef4444;font-weight:600}
.skin-streamix .sx-pkg-tag{position:absolute;top:0;left:18px;transform:translateY(-45%);padding:2px 11px;border-radius:999px;font-size:.66rem;font-weight:800;color:#fff;background:var(--grad);z-index:2}
.skin-streamix .sx-pkg-note{display:flex;align-items:center;gap:9px;padding:13px 15px;border-radius:14px;background:rgba(var(--primary-rgb),.07);border:1px solid rgba(var(--primary-rgb),.2);color:var(--muted);font-size:.8rem}
.skin-streamix .sx-pkg-note i{color:#fbbf24;flex:none}
/* right summary */
.skin-streamix .sx-p-sum{border-radius:20px;padding:20px;background:var(--card);border:1px solid var(--glass-border);position:sticky;top:90px;display:flex;flex-direction:column;gap:14px}
.skin-streamix .sx-sum-head{font-size:1.1rem;font-weight:800;color:var(--text)}
.skin-streamix .sx-sum-item{display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid var(--glass-border)}
.skin-streamix .sx-sum-img{width:44px;height:44px;flex:none;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:var(--bg-2);color:var(--muted)}
.skin-streamix .sx-sum-img img{width:100%;height:100%;object-fit:cover}
.skin-streamix .sx-sum-name{flex:1;min-width:0;color:var(--text);font-weight:600;font-size:.86rem}
.skin-streamix .sx-sum-uprice{color:var(--text);font-weight:700;font-size:.9rem;white-space:nowrap}
.skin-streamix .sx-sum-row{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;color:var(--muted)}
.skin-streamix .sx-sum-qtyrow{color:var(--text);font-weight:600}
.skin-streamix .sx-sum-lines{display:flex;flex-direction:column;gap:9px;padding:13px 0;border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border)}
.skin-streamix .sx-sum-disc{color:#22c55e;font-weight:600}
.skin-streamix .sx-sum-total{display:flex;align-items:center;justify-content:space-between}
.skin-streamix .sx-sum-total>span:first-child{color:var(--text);font-weight:700;font-size:.95rem}
.skin-streamix .sx-sum-total .total-amt{font-size:1.55rem;font-weight:800;color:var(--primary-light)}
.skin-streamix .sx-sum-btn{width:100%;padding:13px;border-radius:12px;border:none;background:var(--grad);color:#fff;font-family:inherit;font-weight:700;font-size:.92rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;box-shadow:0 14px 30px -12px rgba(var(--primary-rgb),.8);transition:transform .2s}
.skin-streamix .sx-sum-btn:hover{transform:translateY(-2px)}
.skin-streamix .sx-sum-btn[disabled]{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}
.skin-streamix .sx-sum-wallet{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:12px;background:var(--bg-2)}
.skin-streamix .sx-sw-lbl{color:var(--muted);font-size:.82rem;font-weight:600}
.skin-streamix .sx-sw-lbl i{color:#fbbf24}
.skin-streamix .sx-sw-amt{color:var(--text);font-weight:800}
.skin-streamix .sx-sum-topup{text-align:center;color:var(--primary-light);text-decoration:none;font-size:.82rem;font-weight:600}
.skin-streamix .sx-sum-topup:hover{text-decoration:underline}
.skin-streamix .sx-sum-secure{text-align:center;color:var(--muted);font-size:.73rem}
.skin-streamix .sx-sum-secure i{color:#22c55e}
.skin-streamix .sx-why{margin-top:26px}
/* กล่องรายละเอียดเต็มความกว้าง (ล่าง) */
.skin-streamix .sx-p-desc{margin-top:20px;border-radius:20px;padding:22px;background:var(--card);border:1px solid var(--glass-border)}
.skin-streamix .sx-p-desc-head{font-size:1.05rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:9px;margin-bottom:16px}
.skin-streamix .sx-p-desc-head i{color:var(--primary-light)}
.skin-streamix .sx-p-desc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px 26px}
.skin-streamix .sx-p-desc-list li{display:flex;align-items:flex-start;gap:10px;color:var(--text);font-size:.88rem;line-height:1.55}
.skin-streamix .sx-p-desc-list li i{color:#22c55e;margin-top:4px;flex:none}
@media(max-width:700px){.skin-streamix .sx-p-desc-list{grid-template-columns:1fr}}

/* ============================================================
   PROFILE (streamix/profile.php)
   ============================================================ */
.skin-streamix .sx-prof{display:flex;flex-direction:column;gap:20px}
.skin-streamix .sx-prof-head{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;border-radius:22px;padding:26px 30px;position:relative;overflow:hidden;
  background:linear-gradient(130deg,rgba(var(--primary-rgb),.18),rgba(var(--accent-rgb),.1)),var(--card);border:1px solid var(--glass-border)}
.skin-streamix .sx-prof-head.has-bg{background:var(--bg-2)}
.skin-streamix .sx-prof-head.has-bg>.sx-ph-ava,.skin-streamix .sx-prof-head.has-bg>.sx-ph-info,.skin-streamix .sx-prof-head.has-bg>.sx-ph-side{position:relative;z-index:1}
.skin-streamix .sx-ph-ava{width:118px;height:118px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:3rem;font-weight:800;color:#fff;
  background:var(--grad);box-shadow:0 0 0 5px rgba(var(--primary-rgb),.15),0 16px 40px -12px rgba(var(--primary-rgb),.7)}
.skin-streamix .sx-ph-info{min-width:0}
.skin-streamix .sx-ph-info h1{font-size:1.7rem;font-weight:800;color:var(--text);margin:0 0 9px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.skin-streamix .sx-ph-badge{font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:999px;background:rgba(var(--primary-rgb),.15);color:var(--primary-light);display:inline-flex;align-items:center;gap:6px}
.skin-streamix .sx-ph-rows{display:flex;flex-wrap:wrap;gap:6px 20px;color:var(--muted);font-size:.88rem;margin-bottom:8px}
.skin-streamix .sx-ph-rows i{color:var(--primary-light);margin-right:5px}
.skin-streamix .sx-ph-sub{display:flex;flex-wrap:wrap;gap:4px 20px;color:var(--muted);font-size:.82rem}
.skin-streamix .sx-ph-sub b{color:var(--text)}
.skin-streamix .sx-ph-side{display:flex;flex-direction:column;gap:12px;min-width:290px}
.skin-streamix .sx-ph-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px;border-radius:14px;background:var(--bg-2);border:1px solid var(--glass-border)}
.skin-streamix .sx-ph-stats>div{text-align:center}
.skin-streamix .sx-ph-stats strong{display:block;font-size:1.4rem;font-weight:800;color:var(--text)}
.skin-streamix .sx-ph-stats small{font-size:.66rem;color:var(--muted)}
.skin-streamix .sx-ph-wallet{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid var(--glass-border);background:linear-gradient(135deg,rgba(var(--primary-rgb),.16),rgba(var(--accent-rgb),.08))}
.skin-streamix .sx-ph-wallet small{display:block;color:var(--muted);font-size:.72rem;margin-bottom:2px}
.skin-streamix .sx-ph-wallet strong{font-size:1.5rem;font-weight:800;color:var(--text)}
.skin-streamix .sx-ph-topup{flex:none;padding:10px 18px;border-radius:11px;background:var(--grad);color:#fff;text-decoration:none;font-weight:700;font-size:.85rem;white-space:nowrap;transition:transform .2s}
.skin-streamix .sx-ph-topup:hover{transform:translateY(-2px)}
/* tabs */
.skin-streamix .sx-prof-tabs{display:flex;gap:4px;border-bottom:1px solid var(--glass-border);overflow-x:auto}
.skin-streamix .sx-prof-tabs a{display:flex;align-items:center;gap:8px;padding:13px 20px;color:var(--muted);text-decoration:none;font-weight:600;font-size:.9rem;border-bottom:2px solid transparent;white-space:nowrap;transition:.2s}
.skin-streamix .sx-prof-tabs a:hover{color:var(--text)}
.skin-streamix .sx-prof-tabs a.on{color:var(--primary-light);border-bottom-color:rgba(var(--primary-rgb),1)}
/* about */
.skin-streamix .sx-prof-about{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.skin-streamix .sx-prof-about .sx-pa-card{display:flex;flex-direction:column;min-height:0;height:358px;overflow:hidden}
.skin-streamix .sx-prof-about .sx-pa-head{flex:none}
.skin-streamix .sx-pa-body{display:flex;flex-direction:column}
/* รายการล่าสุด: โชว์ ~5 · ยาวเกิน → ไหลลงล่างวนลูป (marquee แนวตั้ง) */
.skin-streamix .sx-mini-scroll{flex:1;min-height:0;overflow:hidden;position:relative}
.skin-streamix .sx-mini-list{display:flex;flex-direction:column}
.skin-streamix .sx-marq-track{display:flex;flex-direction:column}
.skin-streamix .sx-marq-on .sx-marq-track{animation:sxVMarq linear infinite}
.skin-streamix .sx-marq-on:hover .sx-marq-track{animation-play-state:paused}
@keyframes sxVMarq{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.skin-streamix .sx-marq-on .sx-marq-track{animation:none}.skin-streamix .sx-mini-scroll{overflow-y:auto}}
.skin-streamix .sx-pa-card{border-radius:18px;padding:20px;background:var(--card);border:1px solid var(--glass-border)}
.skin-streamix .sx-pa-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.skin-streamix .sx-pa-head>span{font-weight:700;color:var(--text);display:flex;align-items:center;gap:9px}
.skin-streamix .sx-pa-head>span i{color:var(--primary-light)}
.skin-streamix .sx-pa-edit{color:var(--primary-light);text-decoration:none;font-size:.8rem;font-weight:600;padding:5px 12px;border-radius:8px;border:1px solid var(--glass-border);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.skin-streamix .sx-pa-edit:hover{background:rgba(var(--primary-rgb),.08)}
.skin-streamix .sx-pa-edit.sm{padding:2px 8px;border:none}
.skin-streamix .sx-pa-edit.danger{color:#f87171}
.skin-streamix .sx-info-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--glass-border);font-size:.88rem}
.skin-streamix .sx-info-row:last-child{border-bottom:none}
.skin-streamix .sx-ir-k{color:var(--muted);display:flex;align-items:center;gap:9px}
.skin-streamix .sx-ir-k i{color:var(--muted);width:16px;text-align:center}
.skin-streamix .sx-ir-v{color:var(--text);font-weight:600;text-align:right}
.skin-streamix .sx-ir-v.sx-muted{color:var(--muted);font-weight:500}
.skin-streamix .sx-pa-empty{color:var(--muted);font-size:.88rem;text-align:center;padding:16px}
.skin-streamix .sx-pa-empty a{color:var(--primary-light)}
.skin-streamix .sx-mini-item{display:flex;align-items:center;gap:12px;padding:11px 6px;border-radius:12px;text-decoration:none;transition:.2s;border-bottom:1px solid var(--glass-border)}
.skin-streamix .sx-mini-item:last-child{border-bottom:none}
.skin-streamix .sx-mini-item:hover{background:rgba(var(--primary-rgb),.06)}
.skin-streamix .sx-mi-ic{width:40px;height:40px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--primary-light);background:rgba(var(--primary-rgb),.12)}
.skin-streamix .sx-mi-ic.topup{color:#22c55e;background:rgba(34,197,94,.12)}
.skin-streamix .sx-mi-tx{flex:1;min-width:0}
.skin-streamix .sx-mi-tx strong{display:block;color:var(--text);font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skin-streamix .sx-mi-tx small{color:var(--muted);font-size:.72rem}
.skin-streamix .sx-mi-badge{flex:none;font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:999px}
.skin-streamix .sx-mi-badge.ok{color:#22c55e;background:rgba(34,197,94,.13)}
.skin-streamix .sx-mi-amt{flex:none;color:var(--text);font-weight:800;font-size:.9rem}
.skin-streamix .sx-mi-amt.plus{color:#22c55e}
.skin-streamix .sx-mi-arr{color:var(--muted);font-size:.72rem}
/* panels (orders/wallet reuse) + account */
.skin-streamix .sx-prof-panel{border-radius:18px;padding:20px;background:var(--card);border:1px solid var(--glass-border)}
.skin-streamix .sx-panel-note{color:var(--muted);font-size:.85rem;margin-bottom:14px}
.skin-streamix .sx-panel-note i{color:var(--primary-light)}
.skin-streamix .sx-prof-acc{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.skin-streamix .sx-acc-sub{color:var(--muted);font-size:.83rem;margin:-6px 0 14px}
/* profile responsive */
@media(max-width:980px){
  .skin-streamix .sx-prof-head{grid-template-columns:1fr;text-align:center;justify-items:center}
  .skin-streamix .sx-ph-info h1{justify-content:center}
  .skin-streamix .sx-ph-rows,.skin-streamix .sx-ph-sub{justify-content:center}
  .skin-streamix .sx-ph-side{width:100%;min-width:0}
  .skin-streamix .sx-prof-about,.skin-streamix .sx-prof-acc{grid-template-columns:1fr}
}
@media(max-width:560px){
  .skin-streamix .sx-ph-ava{width:90px;height:90px;font-size:2.2rem}
  .skin-streamix .sx-ph-wallet{flex-direction:column;align-items:stretch;text-align:center;gap:8px}
  .skin-streamix .sx-ph-stats strong{font-size:1.2rem}
}
/* qty (reuse main.js #qty/.qty-btn/#total) */
.skin-streamix .sx-sum-qty{display:inline-flex;align-items:center;border:1px solid var(--glass-border);border-radius:10px;overflow:hidden;background:var(--bg-2)}
.skin-streamix .sx-sum-qty .qty-btn{width:34px;height:34px;border:none;background:transparent;color:var(--text);cursor:pointer;font-size:.8rem}
.skin-streamix .sx-sum-qty .qty-btn:hover{background:rgba(var(--primary-rgb),.12)}
.skin-streamix .sx-sum-qty input{width:46px;text-align:center;border:none;background:transparent;color:var(--text);font-family:inherit;font-weight:700;-moz-appearance:textfield}
.skin-streamix .sx-sum-qty input::-webkit-outer-spin-button,.skin-streamix .sx-sum-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* product responsive */
@media(max-width:1100px){
  .skin-streamix .sx-p.has-var,.skin-streamix .sx-p.no-var{grid-template-columns:1fr}
  .skin-streamix .sx-p-sum{position:static}
}