/* assets/css/slot.css */
.joker8-section {
  background: #000 url('/wp-content/uploads/2025/10/background-1-scaled.webp') center/cover no-repeat;
  padding: 60px 0;
  text-align: center;
  position: relative;
  color: #fff;
}

/* Title */
.section-title { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:32px; }
.section-title--text { color:#ffde00; font-size:30px; font-weight:700; text-transform:uppercase; }
.section-title--side { width:120px; height:4px; background:linear-gradient(90deg, transparent, #ff00a9, #ffde00, transparent); border-radius:2px; }

/* Grid layout */
/* ======= BỐ CỤC GRID CHUẨN ======= */
.joker8-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 game 1 hàng trên PC */
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Màn hình laptop */
@media (max-width: 1280px) {
  .joker8-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 game 1 hàng */
  }
}

/* Màn hình tablet ngang */
@media (max-width: 1024px) {
  .joker8-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 game 1 hàng */
    gap: 20px;
  }
}

/* Màn hình mobile */
@media (max-width: 767px) {
  .joker8-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 game 1 hàng */
    gap: 14px !important;
    padding: 0 12px !important;
  }
}


/* Item */
.joker8-item { position:relative; overflow:hidden; border-radius:16px; transition:transform .28s ease; background:#0e0012; }
.joker8-item img { width:100%; height:auto; display:block; border-radius:16px; transition:transform .38s ease; }
.joker8-item:hover { transform:translateY(-6px); }

/* Overlay */
.joker8-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; opacity:0;
  background:linear-gradient(180deg, rgba(90,29,85,0.9) 0%, rgba(35,4,34,0.9) 100%);
  border-radius:16px; transition:opacity .25s ease; text-align:center; padding:12px;
}
.joker8-item:hover .joker8-overlay { opacity:1; }
.joker8-item:hover img { transform: scale(1.06); }

/* Overlay contents */
.joker8-overlay h3 { color:#fff; font-size:16px; font-weight:700; margin:0 0 6px; line-height:1.2; padding:0 6px; }
.joker8-overlay span { color:#b4a4c8; font-size:13px; margin-bottom:10px; }

/* Play button */
/* Overlay dịu lại khi hover (giảm alpha) */
.joker8-item:hover .joker8-overlay{
  opacity: 1;
  background: linear-gradient(180deg, rgba(90,29,85,0.55) 0%, rgba(35,4,34,0.55) 100%);
}

/* Tránh ảnh bị sáng thêm khi hover */
.joker8-item:hover img{
  transform: scale(1.06);
  filter: none;
}

/* Nút Play: giảm inner-glow, bỏ filter sáng khi hover */
.play-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 40px;
  font-family:"Yanone Kaffeesatz", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:800; font-size:24px; line-height:1; color:#fff; text-decoration:none;
  border-radius:18px;

  /* viền vàng + nền hồng nhưng dịu hơn */
  background:
    linear-gradient(180deg, #ff4eb9 0%, #b90f55 100%) padding-box,
    linear-gradient(180deg, #ffd85a 0%, #ff7800 100%) border-box;
  border:3px solid transparent;

  /* bóng vừa phải, giảm “glow” bên trong */
  box-shadow:
    0 6px 0 rgba(125,11,84,.85),
    inset 0 0 10px rgba(255,73,191,.18);

  text-shadow: 0 -1px 0 rgba(177,14,161,.55), 1px 1px 0 rgba(177,14,161,.25);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.play-btn:hover{
  transform: translateY(-1px);
  filter: none; /* <- bỏ tăng sáng */
  box-shadow:
    0 7px 0 rgba(106,10,70,.9),
    inset 0 0 8px rgba(255,73,191,.15);
}

.play-btn:active{
  transform: translateY(0);
  box-shadow:
    0 4px 0 rgba(106,10,70,.95),
    inset 0 2px 0 rgba(255,255,255,.08);
}

/* Tiêu đề trong overlay đỡ chói */
.joker8-overlay h3{ text-shadow: 0 1px 0 rgba(0,0,0,.35); }


/* Small mobile: show overlay by default (no hover) */
@media (hover: none) {
  .joker8-overlay { opacity:1; background:linear-gradient(180deg, rgba(90,29,85,0.7) 0%, rgba(35,4,34,0.7) 100%); }
}

/* empty fallback */
.joker8-empty { color:#ccc; padding:20px; text-align:center; }
/* ======= CĂN GIỮA TIÊU ĐỀ ALL GAMES ======= */
.section-title {
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
}
.section-title--text {
  font-family: "Yanone Kaffeesatz", sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: #ffde00;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* ======= ẨN CHỮ TRONG GAME TRÊN MOBILE ======= */
@media (max-width: 767px) {
  .joker8-overlay h3,
  .joker8-overlay span,
  .joker8-overlay .j8-ctas {
    display: none !important; /* ẩn toàn bộ text & nút Play */
  }

  /* Căn giữa lại tiêu đề ALL GAMES trên mobile */
  .section-title {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .section-title--text {
    font-size: 28px !important;
    color: #ffea78 !important;
  }

  /* Tăng nhẹ khoảng cách giữa các game cho dễ nhìn */
  .joker8-grid {
    gap: 14px !important;
  }
}
/* ======= FIX LỚP PHỦ TỐI TRÊN MOBILE ======= */
/* ======= HIỂN THỊ 2 GAME 1 HÀNG TRÊN MOBILE ======= */
@media (max-width: 767px) {
  .joker8-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important; /* 2 cột */
    gap: 14px !important;
    padding: 0 12px !important;
  }

  .joker8-item img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 1280px) { .joker8-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) { .joker8-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .joker8-grid { grid-template-columns: repeat(2, 1fr); } }
/* ======= FIX GRID CHUẨN (ƯU TIÊN CAO NHẤT) ======= */
.joker8-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important; /* 5 game 1 hàng trên PC */
  gap: 24px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* Laptop <1280px: 4 game / hàng */
@media (max-width: 1280px) {
  .joker8-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Tablet <1024px: 3 game / hàng */
@media (max-width: 1024px) {
  .joker8-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }
}

/* Mobile <768px: 2 game / hàng */
@media (max-width: 767px) {
  .joker8-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    padding: 0 12px !important;
  }
}
/* ======= NỀN KHỐI ALL GAMES ======= */
.joker8-section {
  background: #3B0033 !important; /* màu tím trầm */
  padding: 60px 0;
  text-align: center;
  position: relative;
  color: #fff;
  border-radius: 0; /* nếu muốn góc vuông */
}