/* =========================================================
   PT88 — style.css
   รวมสไตล์ทุกบล็อก 1–7 (ตาม HTML ล่าสุด)
   - โครงหน้า + พื้นหลังจาก body[data-bg-image]
   - Block 1/2 Dealer (แยก ID ไม่ชนกัน)
   - Block 3 Promotion + 1:1 slider
   - Block 4 Withdraw chip + list + bank footer
   - Block 6 nx-neo (ตามโค้ดตัวอย่าง)
   - Block 7 2 ภาพรวมบล็อกเดียว + โลโก้ลด 50%
   Font: Kanit
   ========================================================= */

/* ==============================
   0) Base / Page Frame
   ============================== */
:root{
  --page-bg: none;
  --ink: #ffffff;
  --muted: rgba(255,255,255,0.78);
  --shadow-deep: 0 16px 40px rgba(0,0,0,0.65);
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

body{
  font-family: "Kanit", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background: #000;
  color: var(--ink);
}

/* ✅ พื้นหลังหลักจาก attribute */
body.has-bg-image{
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.05), transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(90,165,255,0.06), transparent 45%),
    linear-gradient(180deg, rgba(0,0,0,0.92), rgba(0,0,0,0.00)),
    var(--page-bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* โครงรวมของหน้า */
.pt88-page{
  width:100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(14px, 3.2vw, 28px) clamp(10px, 2.6vw, 22px) 60px;
}

.pt88-block{
  width:100%;
  margin: 0 auto 22px;
}

/* คลิกได้ทุก UI ตามที่ต้องการ */
[data-clickable="true"]{
  cursor: pointer;
}

/* ==============================
   1) BLOCK 1 — Dealer Widget 01
   (คงหน้าตาโค้ดตัวอย่าง 100%)
   ============================== */

#pt88-dealer-widget-01 .pt88-dealer-container{
  width:100%;
  display:flex;
  justify-content:center;
  padding:12px 0;
  margin:0;
}

#pt88-dealer-widget-01 .pt88-dealer-wrap{
  position: relative;
  display: inline-block;
  max-width:100%;
}

#pt88-dealer-widget-01 .pt88-dealer-link{
  display:inline-block;
  cursor:pointer;
  text-decoration:none;
  max-width:100%;
}

#pt88-dealer-widget-01 .pt88-dealer-motion{
  position: relative;
  display: inline-block;
  width: min(520px, 100vw - 32px);
  transform-origin:50% 100%;
  will-change: transform;
  overflow: visible;
  max-width:100%;
  animation: pt88DealerFloat_v1 4s ease-in-out infinite;
}

/* 🔵⚪🔴 ออร่าแดง-ขาว-น้ำเงิน */
#pt88-dealer-widget-01 .pt88-dealer-aura{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:74%;
  height:26%;
  background:
    radial-gradient(circle at 50% 0%,
      rgba(255,255,255,1) 0,
      rgba(180,220,255,1) 26%,
      rgba(40,120,255,1) 52%,
      rgba(255,40,80,0.95) 78%,
      rgba(0,0,0,0) 92%);
  filter:blur(12px);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:1;
  animation: pt88DealerNeonChill_v1 0.9s steps(4,end) infinite;
}

#pt88-dealer-widget-01 .pt88-dealer-img{
  display:block;
  width:100%;
  height:auto;
  transform-origin:50% 100%;
  position: relative;
  z-index:2;
  max-width:100%;
  filter:
    drop-shadow(0 0 8px rgba(160,210,255,.95))
    drop-shadow(0 0 14px rgba(255,255,255,0.95))
    drop-shadow(0 0 20px rgba(255,40,80,.9))
    drop-shadow(0 10px 24px rgba(0,0,0,.8));
  animation: pt88DealerGlow_v1 2.2s ease-in-out infinite;
  will-change: filter;
}

/* ✨ Sparkles */
#pt88-dealer-widget-01 .pt88-dealer-sparkles{
  position:absolute;
  inset:6% 10% 20% 10%;
  pointer-events:none;
  mix-blend-mode:screen;
  z-index:3;
  background-image:
    radial-gradient(circle, rgba(255,255,255,1) 0, rgba(255,255,255,0.0) 55%),
    radial-gradient(circle, rgba(170,210,255,1) 0, rgba(70,140,255,0.0) 60%),
    radial-gradient(circle, rgba(230,240,255,1) 0, rgba(120,180,255,0.0) 55%);
  background-size: 7px 7px, 9px 9px, 6px 6px;
  background-position:
    18% 26%,
    68% 34%,
    40% 14%;
  background-repeat:no-repeat;
  animation: pt88DealerSparkleFast_v1 0.75s steps(5,end) infinite;
}

#pt88-dealer-widget-01 .pt88-dealer-sparkles::after{
  content:"";
  position:absolute;
  inset:10% 14% 26% 14%;
  background-image:
    radial-gradient(circle, rgba(190,230,255,1) 0, rgba(90,150,255,0.0) 60%),
    radial-gradient(circle, rgba(255,255,255,0.95) 0, rgba(230,240,255,0.0) 58%);
  background-size: 8px 8px, 5px 5px;
  background-position:
    74% 22%,
    30% 46%;
  background-repeat:no-repeat;
  animation: pt88DealerSparkleFastSmall_v1 0.95s steps(4,end) infinite;
}

/* มือถือ */
@media (max-width:480px){
  #pt88-dealer-widget-01 .pt88-dealer-motion{
    width: min(100vw - 24px, 420px);
  }
}

/* ==============================
   2) BLOCK 2 — Dealer Widget 02
   ✅ ใช้สไตล์เดียวกับบล็อก 1
   ============================== */

#pt88-dealer-widget-02 .pt88-dealer-container{
  width:100%;
  display:flex;
  justify-content:center;
  padding:12px 0;
  margin:0;
}

#pt88-dealer-widget-02 .pt88-dealer-wrap{
  position: relative;
  display: inline-block;
  max-width:100%;
}

#pt88-dealer-widget-02 .pt88-dealer-link{
  display:inline-block;
  cursor:pointer;
  text-decoration:none;
  max-width:100%;
}

#pt88-dealer-widget-02 .pt88-dealer-motion{
  position: relative;
  display: inline-block;
  width: min(520px, 100vw - 32px);
  transform-origin:50% 100%;
  will-change: transform;
  overflow: visible;
  max-width:100%;
  animation: pt88DealerFloat_v1 4s ease-in-out infinite;
}

#pt88-dealer-widget-02 .pt88-dealer-aura{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:74%;
  height:26%;
  background:
    radial-gradient(circle at 50% 0%,
      rgba(255,255,255,1) 0,
      rgba(180,220,255,1) 26%,
      rgba(40,120,255,1) 52%,
      rgba(255,40,80,0.95) 78%,
      rgba(0,0,0,0) 92%);
  filter:blur(12px);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:1;
  animation: pt88DealerNeonChill_v1 0.9s steps(4,end) infinite;
}

#pt88-dealer-widget-02 .pt88-dealer-img{
  display:block;
  width:100%;
  height:auto;
  transform-origin:50% 100%;
  position: relative;
  z-index:2;
  max-width:100%;
  filter:
    drop-shadow(0 0 8px rgba(160,210,255,.95))
    drop-shadow(0 0 14px rgba(255,255,255,0.95))
    drop-shadow(0 0 20px rgba(255,40,80,.9))
    drop-shadow(0 10px 24px rgba(0,0,0,.8));
  animation: pt88DealerGlow_v1 2.2s ease-in-out infinite;
  will-change: filter;
}

#pt88-dealer-widget-02 .pt88-dealer-sparkles{
  position:absolute;
  inset:6% 10% 20% 10%;
  pointer-events:none;
  mix-blend-mode:screen;
  z-index:3;
  background-image:
    radial-gradient(circle, rgba(255,255,255,1) 0, rgba(255,255,255,0.0) 55%),
    radial-gradient(circle, rgba(170,210,255,1) 0, rgba(70,140,255,0.0) 60%),
    radial-gradient(circle, rgba(230,240,255,1) 0, rgba(120,180,255,0.0) 55%);
  background-size: 7px 7px, 9px 9px, 6px 6px;
  background-position:
    18% 26%,
    68% 34%,
    40% 14%;
  background-repeat:no-repeat;
  animation: pt88DealerSparkleFast_v1 0.75s steps(5,end) infinite;
}

#pt88-dealer-widget-02 .pt88-dealer-sparkles::after{
  content:"";
  position:absolute;
  inset:10% 14% 26% 14%;
  background-image:
    radial-gradient(circle, rgba(190,230,255,1) 0, rgba(90,150,255,0.0) 60%),
    radial-gradient(circle, rgba(255,255,255,0.95) 0, rgba(230,240,255,0.0) 58%);
  background-size: 8px 8px, 5px 5px;
  background-position:
    74% 22%,
    30% 46%;
  background-repeat:no-repeat;
  animation: pt88DealerSparkleFastSmall_v1 0.95s steps(4,end) infinite;
}

@media (max-width:480px){
  #pt88-dealer-widget-02 .pt88-dealer-motion{
    width: min(100vw - 24px, 420px);
  }
}

/* ==============================
   3) BLOCK 3 — Promotion + 1:1 Slider
   ============================== */

.block-3{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 12px;
}

.promo-header{
  width:100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 22px;
  border-radius: 999px;
  text-align:center;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: clamp(18px, 4.6vw, 24px);
  color:#ffffff;

  background:
    radial-gradient(circle at 0 0, rgba(160, 210, 255, 0.35), transparent 60%),
    linear-gradient(135deg, #001230, #4a0012);
  border: 1px solid rgba(160, 210, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 10px 22px rgba(0,0,0,0.9),
    0 0 20px rgba(160,210,255,0.85),
    0 0 34px rgba(255, 60, 90, 0.85);
  text-shadow:
    0 0 6px #ffffff,
    0 0 12px #9fd0ff;
}

.promo-square-slider{
  width: min(520px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 26px;
  overflow: hidden;
  position: relative;

  background:
    radial-gradient(circle at 10% 10%, rgba(255,80,80,0.18), transparent 45%),
    radial-gradient(circle at 90% 0%, rgba(80,150,255,0.18), transparent 45%),
    linear-gradient(135deg, #050018, #240010);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow:
    0 0 0 1px rgba(64,120,255,0.25) inset,
    0 12px 26px rgba(0,0,0,0.9),
    0 0 22px rgba(255,60,60,0.65),
    0 0 42px rgba(80,150,255,0.65);
}

.promo-square-img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transition: opacity .22s ease, filter .22s ease;
}

.promo-square-img.is-fade{
  opacity: 0.15;
  filter: blur(1.5px) brightness(0.9);
}

/* ==============================
   4) BLOCK 4 — Withdraw Chip + Widget + Bank Footer
   (ยึดโค้ดตัวอย่างเดิม)
   ============================== */

/* ----- Chip ----- */
.withdraw-latest-chip{
  font-family: 'Kanit', system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 500px;
  margin: 0 auto 12px;

  padding: 12px 24px;
  border-radius: 999px;

  background:
    radial-gradient(circle at 0 0, rgba(160, 210, 255, 0.4), transparent 60%),
    linear-gradient(135deg, #001230, #4a0012);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: clamp(16px, 4.4vw, 22px);

  border: 1px solid rgba(160, 210, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 10px 22px rgba(0,0,0,0.9),
    0 0 20px rgba(160,210,255,0.9),
    0 0 34px rgba(255, 60, 90, 0.9);
  text-shadow:
    0 0 6px #ffffff,
    0 0 12px #9fd0ff;
  overflow: hidden;
}

.withdraw-latest-chip::before{
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.40),
    rgba(255,255,255,0.05)
  );
  opacity: 0.45;
  pointer-events: none;
}

.withdraw-latest-chip::after{
  content: "";
  position: absolute;
  top: -50%;
  left: -30%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.95),
    transparent
  );
  opacity: 0.7;
  mix-blend-mode: screen;
  transform: translateX(-120%);
  animation: withdrawChipSweep 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes withdrawChipSweep{
  0%{
    transform: translateX(-120%) rotate(8deg);
    opacity: 0;
  }
  20%{ opacity: 0.9; }
  60%{
    transform: translateX(160%) rotate(8deg);
    opacity: 0;
  }
  100%{
    transform: translateX(160%) rotate(8deg);
    opacity: 0;
  }
}

@media (max-width:480px){
  .withdraw-latest-chip{ padding: 10px 18px; }
}

/* ----- Widget (scope ใน #withdraw-widget) ----- */
#withdraw-widget{
  font-family: 'Kanit', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: #fff;
}

#withdraw-widget .withdraw-wrapper{
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 2;
}

#withdraw-widget .withdraw-container{
  width: 100%;
  max-width: 500px;
  background: transparent;
  padding: 0 16px 22px;
}

#withdraw-widget .withdraw-list{
  width:100%;
}

/* การ์ดโทน แดง–น้ำเงิน + ไฮไลต์ขาว */
#withdraw-widget .withdraw-item{
  position: relative;
  background:
    radial-gradient(circle at 0 0, rgba(255,60,60,0.45), transparent 60%),
    linear-gradient(135deg, #050018, #240010);
  border-radius: 30px;
  padding: 14px 18px;
  margin-bottom: 15px;

  border: 1px solid rgba(255,255,255,0.85);
  box-shadow:
    0 0 0 1px rgba(64,120,255,0.35) inset,
    0 10px 22px rgba(0,0,0,0.9),
    0 0 20px rgba(255,60,60,0.95),
    0 0 44px rgba(64,140,255,0.95);

  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

#withdraw-widget .withdraw-item::before{
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 38%;
  border-radius: 28px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.32),
    rgba(255,255,255,0.04)
  );
  opacity: 0.5;
  pointer-events: none;
}

#withdraw-widget .withdraw-item::after{
  content: "";
  position: absolute;
  top: -60%;
  left: -40%;
  width: 40%;
  height: 220%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.95),
    transparent
  );
  opacity: 0.45;
  mix-blend-mode: screen;
  transform: translateX(-120%);
  animation: withdrawSweepRow 4s ease-in-out infinite;
  pointer-events: none;
}

#withdraw-widget .withdraw-item:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.16) inset,
    0 12px 26px rgba(0,0,0,0.95),
    0 0 26px rgba(255,80,80,1),
    0 0 56px rgba(80,150,255,1);
}

#withdraw-widget .withdraw-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

#withdraw-widget .withdraw-left{
  display: flex;
  align-items: center;
  gap: 10px;
}

#withdraw-widget .withdraw-left img{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #050b1a;
  object-fit: cover;
  box-shadow: 0 0 6px rgba(80,150,255,0.95);
}

#withdraw-widget .withdraw-name{
  font-weight: bold;
  color: #ffffff;
  font-size: 0.95rem;
  text-shadow:
    0 0 4px rgba(255,255,255,0.6),
    0 0 10px rgba(80,150,255,0.9);
}

#withdraw-widget .withdraw-amount{
  font-weight: bold;
  font-size: 1.3rem;
  color: #ffffff;
  text-shadow:
    0 0 6px #ffffff,
    0 0 14px #ff3b3b;
}

#withdraw-widget .withdraw-bottom{
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  position: relative;
  z-index: 1;
}

#withdraw-widget .withdraw-time{
  color: #dde9ff;
  text-shadow: 0 0 4px #407bff;
}

#withdraw-widget .withdraw-status{
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(255,255,255,0.8);
}

#withdraw-widget .withdraw-status.pending{
  color: #ffe5e5;
}

#withdraw-widget .withdraw-status.done{
  color: #e0f3ff;
  text-shadow: 0 0 6px #5fb4ff;
}

@keyframes withdrawSweepRow{
  0%{
    transform: translateX(-120%) rotate(10deg);
    opacity: 0;
  }
  15%{ opacity: 0.8; }
  55%{
    transform: translateX(180%) rotate(10deg);
    opacity: 0;
  }
  100%{
    transform: translateX(180%) rotate(10deg);
    opacity: 0;
  }
}

@media (max-width:480px){
  #withdraw-widget .withdraw-container{ padding: 0 12px 16px; }
}

/* ----- Bank footer image ----- */
.withdraw-bank-footer{
  width:100%;
  display:flex;
  justify-content:center;
  margin-top: 6px;
}

.withdraw-bank-footer img{
  width: min(520px, 100%);
  height:auto;
  display:block;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.75));
}

/* ==============================
   5) BLOCK 6 — nx-neo
   (คงโค้ดตัวอย่างเดิมแบบ scoped)
   ============================== */

.nx-neo{
  --bg:#000;
  --text:#fff;
  --muted:#cfd2d6;
  --r:#ff1c40;
  --b:#2f6bff;
  --br:#e8ebff;
  --shadow:0 10px 24px rgba(0,0,0,.45);

  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(16px,4vw,32px) clamp(12px,4vw,24px);
}

.nx-neo, .nx-neo *{
  box-sizing:border-box;
  font-family:'Kanit',system-ui,-apple-system,"Segoe UI",sans-serif;
}

.nx-neo .grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:20px;
  width:100%;
}

.nx-neo .card{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  padding:20px;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.2)) padding-box,
    linear-gradient(120deg, var(--r), #ffffff, var(--b)) border-box;
  border:2px solid transparent;
  background-size:300% 100%;
  box-shadow:
    var(--shadow),
    0 0 18px rgba(255,40,70,.45),
    0 0 22px rgba(47,107,255,.45);
  animation: nx-edge 8s linear infinite,
             nx-glow 1.4s ease-in-out infinite alternate;
  transition: transform .18s ease, box-shadow .25s ease, filter .25s ease;
}

.nx-neo .card-wide{
  grid-column: span 2;
}

.nx-neo .card:nth-child(even){
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.2)) padding-box,
    linear-gradient(240deg, var(--b), #ffffff, var(--r)) border-box;
}

.nx-neo .card:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    var(--shadow),
    0 0 26px rgba(255,60,90,.55),
    0 0 32px rgba(80,150,255,.6);
}

.nx-neo .icon{
  font-size:1.7rem;
  margin-bottom:8px;
  text-shadow:
    0 0 10px rgba(255,255,255,.35),
    0 0 14px rgba(80,150,255,.55);
  color:#ffffff;
}

.nx-neo .card h2{
  margin:10px 0 4px;
  font-size:1.6rem;
  font-weight:700;
  color:#ffffff;
  text-shadow:
    0 0 10px rgba(255,255,255,.6),
    0 0 14px rgba(255,60,90,.48);
}

.nx-neo .card p{
  margin:0;
  font-size:.95rem;
  color:#e9f0ff;
  opacity:.95;
  text-shadow:0 0 6px rgba(47,107,255,.45);
}

/* รีวิว */
.nx-neo .review{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  padding:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(5,10,30,.9)) padding-box,
    linear-gradient(120deg, var(--r), #ffffff, var(--b)) border-box;
  border:2px solid transparent;
  background-size:300% 100%;
  box-shadow:
    var(--shadow),
    0 0 14px rgba(255,50,80,.35),
    0 0 18px rgba(80,150,255,.35);
  animation: nx-edge 9s linear infinite,
             nx-glow 1.6s ease-in-out infinite alternate;
  transition: transform .18s ease, box-shadow .25s ease, filter .25s ease;
}

.nx-neo .review:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    var(--shadow),
    0 0 22px rgba(255,70,100,.55),
    0 0 28px rgba(90,165,255,.6);
}

.nx-neo .review .name{
  font-weight:700;
  color:#ffffff;
  text-shadow:0 0 8px rgba(255,255,255,.65);
}

.nx-neo .review .stars{
  color:#ffd166;
  letter-spacing:1px;
  margin:3px 0 2px;
  text-shadow:0 0 6px rgba(255,209,102,.75);
}

.nx-neo .review .text{
  color:#f3f7ff;
  font-size:1rem;
  margin-top:8px;
  line-height:1.5;
  text-shadow:0 0 6px rgba(47,107,255,.5);
}

.nx-neo .review .meta{
  font-size:.85rem;
  color:var(--muted);
  margin-top:10px;
}

/* Animations */
@keyframes nx-edge{
  0%{ background-position:0 50%; }
  100%{ background-position:200% 50%; }
}

@keyframes nx-glow{
  0%{
    box-shadow:
      var(--shadow),
      0 0 12px rgba(255,60,90,.28),
      0 0 16px rgba(80,150,255,.3);
  }
  100%{
    box-shadow:
      var(--shadow),
      0 0 20px rgba(255,80,110,.45),
      0 0 26px rgba(110,180,255,.5);
  }
}

/* Responsive */
@media (max-width:768px){
  .nx-neo{
    padding: 16px 10px 28px;
  }
  .nx-neo .grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .nx-neo .card,
  .nx-neo .review{
    padding: 16px 14px;
  }
  .nx-neo .card-wide{
    grid-column: auto;
  }
  .nx-neo .card h2{
    font-size:1.5rem;
  }
  .nx-neo .card p,
  .nx-neo .review .text{
    font-size:0.98rem;
  }
}

@media (max-width:480px){
  .nx-neo{
    padding: 14px 8px 24px;
  }
  .nx-neo .grid{
    gap: 12px;
  }
  .nx-neo .card h2{
    font-size:1.4rem;
  }
}

/* ==============================
   6) BLOCK 7 — Two Images Combined
   ✅ โลโก้ลดขนาด 50%
   ============================== */

.pt88-footer-combo{
  width:100%;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(14px, 3vw, 22px);
  border-radius: 22px;

  background:
    radial-gradient(circle at 10% 0%, rgba(80,150,255,0.18), transparent 45%),
    radial-gradient(circle at 90% 0%, rgba(255,70,100,0.18), transparent 45%),
    linear-gradient(135deg, rgba(5,0,24,0.95), rgba(36,0,16,0.95));
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow:
    0 0 0 1px rgba(64,120,255,0.22) inset,
    var(--shadow-deep),
    0 0 26px rgba(255,60,60,0.55),
    0 0 40px rgba(80,150,255,0.55);
  overflow:hidden;

  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 14px;
}

.footer-logo,
.footer-image{
  width:100%;
  display:flex;
  justify-content:center;
}

.pt88-logo-50{
  width: auto;
  height: auto;
  max-width: min(520px, 90%);
  transform: scale(0.5);
  transform-origin: center;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.25))
    drop-shadow(0 0 18px rgba(80,150,255,0.35))
    drop-shadow(0 0 18px rgba(255,80,110,0.35));
}

/* กันพื้นที่โลโก้ที่ถูก scale ไม่ให้ดูแคบเกิน */
.footer-logo{
  padding-top: 6px;
  padding-bottom: 2px;
}

.pt88-footer-img{
  width: min(860px, 100%);
  height:auto;
  display:block;
  border-radius: 14px;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.6));
}

/* ==============================
   7) Shared Keyframes (Dealer)
   ============================== */

@keyframes pt88DealerNeonChill_v1{
  0%{
    opacity:.15;
    filter:blur(8px);
    transform:translateX(-50%) scale(0.96,1.0);
  }
  25%{
    opacity:1;
    filter:blur(16px);
    transform:translateX(-50%) scale(1.04,1.06);
  }
  50%{
    opacity:.3;
    filter:blur(10px);
    transform:translateX(-50%) scale(0.98,1.0);
  }
  75%{
    opacity:.9;
    filter:blur(18px);
    transform:translateX(-50%) scale(1.05,1.08);
  }
  100%{
    opacity:.2;
    filter:blur(8px);
    transform:translateX(-50%) scale(1,1);
  }
}

@keyframes pt88DealerSparkleFast_v1{
  0%{
    opacity:0.2;
    transform:translate3d(0,0,0) scale(1);
  }
  25%{
    opacity:1;
    transform:translate3d(1px,-1px,0) scale(1.08);
  }
  50%{
    opacity:0.4;
    transform:translate3d(-1px,1px,0) scale(1.02);
  }
  75%{
    opacity:0.9;
    transform:translate3d(1px,0,0) scale(1.05);
  }
  100%{
    opacity:0.25;
    transform:translate3d(0,0,0) scale(1);
  }
}

@keyframes pt88DealerSparkleFastSmall_v1{
  0%{
    opacity:0.15;
    transform:translate3d(0,0,0) scale(1);
  }
  33%{
    opacity:0.95;
    transform:translate3d(-1px,-1px,0) scale(1.09);
  }
  66%{
    opacity:0.35;
    transform:translate3d(1px,1px,0) scale(1.02);
  }
  100%{
    opacity:0.2;
    transform:translate3d(0,0,0) scale(1);
  }
}

@keyframes pt88DealerFloat_v1{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

@keyframes pt88DealerGlow_v1{
  0%{
    filter:
      drop-shadow(0 0 6px rgba(160,210,255,0.8))
      drop-shadow(0 0 12px rgba(255,255,255,0.9))
      drop-shadow(0 0 18px rgba(255,40,80,0.8));
  }
  50%{
    filter:
      drop-shadow(0 0 20px rgba(190,230,255,1))
      drop-shadow(0 0 28px rgba(255,255,255,1))
      drop-shadow(0 0 30px rgba(255,60,100,1));
  }
  100%{
    filter:
      drop-shadow(0 0 6px rgba(160,210,255,0.8))
      drop-shadow(0 0 12px rgba(255,255,255,0.9))
      drop-shadow(0 0 18px rgba(255,40,80,0.8));
  }
}
