/* =========================
   HERO FULL HEIGHT
========================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
}

/* =========================
   INNER
========================= */
.hero-inner{
  position:relative;
  z-index:10;

  width:100%;
  padding:0 20px;

  display:flex;
  align-items:center; /* 🔥 กลางแนวตั้ง */
  justify-content:center;
}

/* =========================
   BG
========================= */
.hero-video,
.hero-overlay,
.particles{
  position:absolute;
  inset:0;
  z-index:1;
}

/* =========================
   GRID
========================= */
.hero-cards{
  width:100%;
  height:70vh; /* 🔥 สูงเกือบเต็ม */

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

/* =========================
   CARD
========================= */
.hero-card{

  position:relative;

  border-radius:24px;

  /* 🔥 glass จริง */
  background: rgba(10,20,15,0.45);
  backdrop-filter: blur(10px);

  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:40px;
}

/* 🔥 ตัวหนังสือคม */
.card-content{
  position:relative;
  z-index:2;
}

/* =========================
   ✨ NEON ANIMATION
========================= */
.hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  padding:2px;

  background:linear-gradient(
    120deg,
    transparent,
    var(--neon),
    transparent,
    var(--neon),
    transparent
  );

  background-size:300% 300%;


  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* glow */
.hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;

  background:var(--neon);
  opacity:0.15;
  filter:blur(30px);
}

/* animation */
@keyframes neonMove{
  0%{background-position:0% 50%;}
  100%{background-position:300% 50%;}
}

/* =========================
   COLORS
========================= */
.neon-green{
  --neon:#00ff88;
}

.neon-orange{
  --neon:#e94e1b;
}

/* =========================
   TEXT
========================= */
.hero-card h3{
  font-size:28px;
  margin-bottom:15px;
  color:#fff;
}

.hero-card p{
  font-size:25px;
  margin-bottom:8px;
  color:rgba(255,255,255,0.9);
}

/* =========================
   SPONSOR
========================= */
.sponsor-row{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  margin-top:15px;
}

.sponsor-row img{
  height:45px;
  filter:brightness(0.9);
  transition:0.3s;
}

.sponsor-row img:hover{
  transform:scale(1.1);
  filter:brightness(1.2);
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:900px){

  .hero-cards{
    grid-template-columns:1fr;
    height:auto;
  }

  .hero-card{
    min-height:260px;
  }
}

@media(max-width:600px){

  .hero-inner{
    padding:0 20px;
  }

  .hero-card{
    padding:25px;
  }

  .hero-card h3{
    font-size:22px;
  }
}
/* =========================
   HERO CONTENT STYLE
========================= */
.hero-main{
  text-align:center;
}

/* LOGO */
.hero-logo{
  width:120px;
  margin-bottom:15px;
}

/* TITLE */
.hero-title{
  font-size:42px;
  font-weight:800;
  color:#00ff88;
  margin-bottom:10px;
}

/* THEME */
.hero-theme{
  font-size:20px;
  color:#34d399;
  margin-bottom:15px;
}

/* LOCATION */
.hero-location{
  font-size:28px;
  font-weight:700;
  color:#e5e7eb;
  margin-bottom:20px;
}

/* DATE ROW */
.hero-date-row{
  display:flex;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
}

/* DATE */
.hero-date{
  font-size:32px;
  font-weight:800;
  color:#00ff88;
}

/* BADGE */
.hero-badge{
  font-size:14px;
  padding:6px 14px;
  border-radius:20px;

  background:rgba(0,255,136,0.15);
  color:#00ff88;

  border:1px solid rgba(0,255,136,0.4);
}
@media(max-width:768px){

  .hero-title{
    font-size:28px;
  }

  .hero-theme{
    font-size:16px;
  }

  .hero-location{
    font-size:20px;
  }

  .hero-date{
    font-size:22px;
  }

  .hero-logo{
    width:90px;
  }
}
/* =========================
   COUNTDOWN
========================= */
.hero-countdown{
  /*margin-top:20px;*/
  position:absolute;
  top:20px;
  right:20px;

  margin:0; /* 🔥 สำคัญ */
}

/* วงกลม */
.count-circle{
  width:80px;
  height:80px;

  border-radius:50%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  color:#00ff88;

  border:2px solid #00ff88;

  box-shadow:
    0 0 10px #00ff88,
    0 0 25px rgba(0,255,136,0.5),
    inset 0 0 10px rgba(0,255,136,0.3);

  background:rgba(0,255,136,0.05);

  animation:pulseGlow 2s infinite;
}

/* ตัวเลข */
.count-circle span{
  font-size:28px;
  font-weight:800;
  line-height:1;
}

/* text */
.count-circle small{
  font-size:11px;
  opacity:0.8;
}

/* animation */
@keyframes pulseGlow{
  0%{
    box-shadow:
      0 0 10px #00ff88,
      0 0 25px rgba(0,255,136,0.5),
      inset 0 0 10px rgba(0,255,136,0.3);
  }
  50%{
    box-shadow:
      0 0 20px #00ff88,
      0 0 40px rgba(0,255,136,0.8),
      inset 0 0 15px rgba(0,255,136,0.5);
  }
  100%{
    box-shadow:
      0 0 10px #00ff88,
      0 0 25px rgba(0,255,136,0.5),
      inset 0 0 10px rgba(0,255,136,0.3);
  }
}
/* =========================
   BASE (Desktop)
========================= */
.hero-card{
  position:relative;
}

.hero-countdown{
  position:absolute;
  top:20px;
  right:20px;
  margin:0;
  z-index:3;
}

.count-circle{
  width:80px;
  height:80px;

  border-radius:50%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  color:#00ff88;

  border:2px solid #00ff88;

  box-shadow:
    0 0 10px #00ff88,
    0 0 25px rgba(0,255,136,0.5),
    inset 0 0 10px rgba(0,255,136,0.3);

  background:rgba(0,255,136,0.05);
  backdrop-filter: blur(6px);

  animation:pulseGlow 2s infinite;
}

/* =========================
   Tablet
========================= */
@media(max-width:1024px){

  .count-circle{
    width:65px;
    height:65px;
  }

  .count-circle span{
    font-size:20px;
  }

  .count-circle small{
    font-size:10px;
  }

  .hero-countdown{
    top:15px;
    right:15px;
  }
}

/* =========================
   Mobile
========================= */
@media(max-width:768px){

  .hero-countdown{
    position:absolute;

    top:auto;
    bottom:15px;   /* 🔥 ย้ายลงล่าง */
    right:15px;
  }

  .count-circle{
    width:60px;
    height:60px;
  }

  .count-circle span{
    font-size:18px;
  }

  .count-circle small{
    font-size:9px;
  }
}

/* =========================
   Small Mobile
========================= */
@media(max-width:480px){

  .hero-countdown{
    bottom:10px;
    right:10px;
  }

  .count-circle{
    width:55px;
    height:55px;
  }
}
/* =========================
   SPONSORS
========================= */
.sponsor-title{
  font-size:26px;
  margin-bottom:25px;
}

/* =========================
   TIER
========================= */
.sponsor-tier{
  margin-bottom:25px;   /* 🔥 ใช้ spacing แทนเส้น */
}

/* label */
.tier-label{
  font-size:16px;
  letter-spacing:1px;
  text-transform:uppercase;

  color:#ff8c00;

  margin-bottom:10px;
  display:block;

  opacity:0.8;
}

/* =========================
   LOGO CONTAINER
========================= */
.tier-logos{
  display:flex;
  flex-wrap:wrap;
  gap:18px;            /* 🔥 เพิ่ม gap ให้โล่งขึ้น */
  align-items:center;
}

/* =========================
   PLATINUM
========================= */
.platinum img{
  height:80px;         /* 🔥 ขยายเล็กน้อยให้เด่น */
  filter:brightness(1.1);
}

/* =========================
   SILVER
========================= */
.silver img{
  height:70px;
  opacity:0.9;
}

/* =========================
   BOOTH GRID
========================= */
.booth-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}

.booth img{
  height:36px;
  opacity:0.8;
}

/* =========================
   HOVER EFFECT
========================= */
.sponsor-tier img{
  transition:0.3s;
  object-fit:contain;
}

.sponsor-tier img:hover{
  transform:scale(1.1);
  filter:none;
  opacity:1;
}

/* =========================
   GLASS BACKGROUND
========================= */
.sponsor-box{
  backdrop-filter:blur(10px);
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:768px){

  .platinum img{
    height:52px;
  }

  .silver img{
    height:42px;
  }

  .booth img{
    height:30px;
  }

  .booth-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}
/* =========================
   CLEAN SPONSOR BOX (NEW)
========================= */
.sponsor-clean-box{
  position:relative;
  z-index:2;

  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:30px;

  

  border-radius:16px;

  /* ❌ ไม่มี border / glow */
  border:none;
  box-shadow:none;
}

/* 🔥 กันพลาด: kill neon ทุกกรณี */
.sponsor-clean-box::before,
.sponsor-clean-box::after{
  display:none !important;
}
/* =========================
   BASE
========================= */
.sponsor-clean-box{
  padding:30px;
}

.sponsor-title{
  font-size:26px;
  margin-bottom:25px;
}

/* label */
.tier-label{
  display:block;
  margin-bottom:10px;
  font-weight: 800;
  font-size:16px;
  letter-spacing:1px;
  text-transform:uppercase;

  color:#00ff88;
  opacity:0.8;
}

/* spacing */
.sponsor-tier{
  margin-bottom:30px;
}

/* =========================
   🥇 PLATINUM (CENTER HERO)
========================= */
.platinum-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
  flex-wrap:wrap;
}

.platinum-wrap img{
  height:80px;
  object-fit:contain;

  filter:brightness(1.1);

  transition:0.3s;
}

.platinum-wrap img:hover{
  transform:scale(1.08);
}

/* =========================
   🥈 SILVER (GRID)
========================= */
.silver-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  align-items:center;
}

.silver-grid img{
  height:50px;
  margin:auto;
  object-fit:contain;

  opacity:0.9;
  transition:0.3s;
}

.silver-grid img:hover{
  transform:scale(1.05);
  opacity:1;
}

/* =========================
   🥉 BOOTH (COMPACT)
========================= */
.booth-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}

.booth-grid img{
  height:32px;
  margin:auto;
  object-fit:contain;

  opacity:0.75;
  transition:0.3s;
}

.booth-grid img:hover{
  transform:scale(1.05);
  opacity:1;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:1024px){

  .silver-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .booth-grid{
    grid-template-columns:repeat(3, 1fr);
  }

  .platinum-wrap img{
    height:70px;
  }
}

@media(max-width:600px){

  .silver-grid{
    grid-template-columns:1fr 1fr;
  }

  .booth-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .platinum-wrap{
    gap:20px;
  }

  .platinum-wrap img{
    height:60px;
  }
}
.silver-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;

  justify-items:center;   /* 🔥 จัดกลางแนวนอน */
  align-items:center;     /* 🔥 จัดกลางแนวตั้ง */
}

.silver-grid img{
  height:50px;
  object-fit:contain;

  display:block;
}
.booth-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;

  justify-items:center;   /* 🔥 ตัวหลัก */
  align-items:center;
}

.booth-grid img{
  height:32px;
  object-fit:contain;

  display:block;
}