/* =========================
   Media Card + Badge Glass
   (GIỮ NGUYÊN THÔNG SỐ)
   ========================= */

.media-card{
  position: relative;            /* bắt buộc để badge canh theo card */
  display: flex;
  flex-direction: column;
  align-items: center;           /* canh giữa toàn bộ */
}

/* (tuỳ theme) phần khung ảnh */
.media-box{
  width: 100%;
}

/* Badge overlay căn giữa */
.badge-glass{
  --badge-w: min(92%, 260px);    /* badge không vượt quá ảnh */
  width: var(--badge-w);

  display: flex;                /* dùng flex để chữ giữa tuyệt đối */
  align-items: center;
  justify-content: center;
  text-align: center;

  margin-top: -18px;            /* kéo badge đè lên ảnh (chỉnh số này) */
  padding: 12px 18px;           /* nhỏ lại */
  border-radius: 2px;           /* bo góc nằm ở đây */

  font-weight: 900;             /* chữ in đậm */
  font-size: 16px;              /* nhỏ lại cho cân */
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--badge-color, #1c75bd);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* fill app*/
background: rgba(255,255,255,0.35);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);

/* viền kính */
border: 1px solid rgba(255,255,255,0.6);

/* viền màu + shadow */
box-shadow:
  0 0 0 1px var(--badge-color, #1c75bd), /* ← viền màu quay lại */
  0 8px 24px rgba(0,0,0,.12),
  inset 0 1px 0 rgba(255,255,255,.7);
  /* /fill app*/
  position: relative;
}

/* Lướt sáng giữ nguyên */
.badge-glass::after{
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.95),
    transparent
  );
  transform: skewX(-25deg);
  transition: .9s ease;
}

.badge-glass:hover::after{
  left: 140%;
}

/* Mobile tự co */
@media (max-width: 480px){
  .badge-glass{
    font-size: 14px;
    padding: 10px 14px;
    margin-top: -16px;
    --badge-w: min(94%, 240px);
  }
}