/* === WD Showcase (đỏ-cam-vàng) v1.0.2 — full-height, no frame, nicer close === */
:root{
  --wd-red: #e53935;
  --wd-orange: #fb8c00;
  --wd-yellow: #fdd835;
  --wd-bg: #0f0f10;
  --wd-card: #141416;
  --wd-text: #f4f4f5;
  --wd-muted: #a1a1aa;
  --wd-border: rgba(255,255,255,0.08);
}
.wd-no-scroll { overflow: hidden; }

.wd-showcase{
  --wd-gap: 28px;      /* <-- cách xa hơn */
  margin: 12px 0 28px;
}
.wd-showcase .wd-grid{
  display: grid;
  grid-template-columns: repeat(var(--wd-cols, 3), 1fr);
  gap: var(--wd-gap);
}
@media (max-width: 1024px){
  .wd-showcase .wd-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .wd-showcase .wd-grid{ grid-template-columns: 1fr; }
}

.wd-showcase .wd-card{
  background: linear-gradient(140deg, rgba(229,57,53,0.18), rgba(251,140,0,0.12) 40%, rgba(253,216,53,0.10));
  border: 1px solid var(--wd-border);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  /* BÓNG XÁM MẶC ĐỊNH (chỉ hiện khi chưa hover) */
  box-shadow: 0 2px 20px rgba(0,0,0,.25);
}

/* Hover: CHỈ vầng vàng tươi, KHÔNG chồng bóng xám */
.wd-showcase .wd-card:hover,
.wd-showcase .wd-card:focus-visible{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 0 18px 2px rgba(255,196,0,.66);  /* vầng vàng tươi, phủ nhỏ */
}

.wd-showcase .wd-thumb-wrap{
  position: relative;
  aspect-ratio: 5/5;   /* dọc hơn/square – chỉnh 4/5 nếu muốn dọc hơn nữa */
  background: #0b0b0c;
  overflow: hidden;
}

.wd-showcase .wd-thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
  transition: transform .4s ease;
}
.wd-showcase .wd-card:hover .wd-thumb{ transform: scale(1.03); }

/* Vầng sáng phụ quanh viền – chỉ xuất hiện khi hover, tránh cảm giác viền */
.wd-showcase .wd-glow-border{
  position: absolute; inset: -1px; border-radius: 18px; pointer-events: none;
  background: radial-gradient(closest-side,
              rgba(255,196,0,.28), rgba(255,196,0,0) 58%);
  filter: blur(14px);
  opacity: 0;
  transition: opacity .2s ease;
}
.wd-showcase .wd-card:hover .wd-glow-border,
.wd-showcase .wd-card:focus-visible .wd-glow-border{ opacity: .38; }

/* Tiêu đề sản phẩm: nền trắng, chữ #202124, size 21px, weight 500 */
.wd-showcase .wd-card-title{
  background: #fff;
  color: #202124;
  font-size: 21px;
  font-weight: 500;
  padding: 14px 16px 16px;
  letter-spacing: .2px;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* Modal player */
.wd-showcase .wd-modal{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 9999;
}
.wd-showcase .wd-modal[data-open="true"]{
  opacity: 1;
  visibility: visible;
}

/* Nền mờ phía sau vẫn giữ để nổi bật nội dung */
.wd-showcase .wd-backdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 800px at 70% 10%, rgba(229,57,53,.25), transparent 40%),
    radial-gradient(700px 700px at 30% 90%, rgba(251,140,0,.22), transparent 45%),
    radial-gradient(900px 900px at 20% 30%, rgba(253,216,53,.18), transparent 50%),
    rgba(10,10,12,.85);
  backdrop-filter: blur(4px);
}

/* === YÊU CẦU 1 + 2: bỏ khung đen và cao full màn hình === */
.wd-showcase .wd-player{
  position: relative;
  width: min(1200px, 92vw);
  height: 100vh;
  height: 100dvh;           /* hỗ trợ mobile */
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

/* Viewport phủ sát để ảnh hiển thị hết nội dung */
.wd-showcase .wd-viewport{
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  box-shadow: none;
}

/* Hiệu ứng phát sáng viền (nhẹ, không lấn nội dung) */
.wd-showcase .wd-white-glow{
  position: absolute;
  inset: 0;
  border-radius: 0;
  box-shadow: 0 0 28px 8px rgba(255,255,255,.7);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.wd-showcase .wd-viewport.is-glow .wd-white-glow{ opacity: .9; }

.wd-showcase .wd-pan{ width: 100%; will-change: transform; }
.wd-showcase .wd-img{ width: 100%; height: auto; display: block; will-change: transform; transform-origin: center top; }

/* progress */
.wd-showcase .wd-progress{
  position: absolute;
  left: 16px; right: 16px; top: 14px;
  height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
  width: 0%;
  transition: opacity .2s ease;
  opacity: 0;
}
.wd-showcase .wd-progress.show{ opacity: 1; }
.wd-showcase .wd-progress::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--wd-red), var(--wd-orange), var(--wd-yellow));
  width: var(--wd-progress, 0%);
}

/* === Nút thoát gọn, đẹp === */
.wd-showcase .wd-close{
  position: absolute;
  top: 12px; right: 12px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 20px; line-height: 1; font-weight: 700;
  cursor: pointer; z-index: 3;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .15s ease, background .2s ease, opacity .2s ease;
  appearance: none; -webkit-appearance: none;
}
.wd-showcase .wd-close:hover{
  transform: scale(1.06);
  background: rgba(0,0,0,.50);
}

/* Mobile tối ưu */
@media (max-width: 640px){
  .wd-showcase .wd-player{
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  .wd-showcase .wd-viewport{ inset: 0; }
  .wd-showcase .wd-close{ top: 10px; right: 10px; }
  .wd-showcase .wd-progress{ left: 12px; right: 12px; top: 12px; }
}