/* =========================
 POPUP KHUYẾN MÃI - CSS
 - Prefix "sb-" để tránh xung đột CSS
========================= */

.sb-sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  border:0;
}

/* Khi popup mở: khóa scroll nền */
body.sb-modal-open{
  overflow: hidden;
}

.sb-promo-modal{
  position: fixed;
  inset: 0;
  z-index: 999999; /* đảm bảo đè lên mọi nút nổi */
  display: none;   /* mặc định ẩn */
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.sb-promo-modal.is-open{
  display: flex;
  animation: sbFadeIn .18s ease-out;
}

.sb-promo-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.sb-promo-dialog{
  position: relative;
  width: min(94vw, 920px);
  max-height: 92vh;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  transform: translateY(0);
  animation: sbPop .22s ease-out;
  border: 1px solid rgba(0,0,0,0.08);
}

/* Nút X góc phải */
.sb-promo-x{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.95);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.sb-promo-x:hover{
  background: #fff;
}

/* Banner */
.sb-promo-content{
  background: #fff;
}

.sb-promo-content img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 74vh;     /* tránh banner quá cao */
  object-fit: contain;  /* giữ nguyên ảnh */
  background: #fff;
}

/* Thanh action */
.sb-promo-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 14px;
  background: #f5f7fb;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Nút */
.sb-btn{
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}

.sb-btn:active{
  transform: translateY(1px);
}

.sb-btn-secondary{
  background: #6c757d;
  color: #fff;
}

.sb-btn-primary{
  background: #1d4ed8; /* xanh giống screenshot */
  color: #fff;
}

.sb-btn:hover{
  filter: brightness(1.03);
}

/* Mobile: nút xếp dọc cho dễ bấm */
@media (max-width: 480px){
  .sb-promo-actions{
    flex-direction: column;
    align-items: stretch;
  }
}

/* Animation */
@keyframes sbFadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@keyframes sbPop{
  from{ transform: translateY(10px) scale(0.98); opacity: .6; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

/* Tôn trọng người dùng giảm chuyển động */
@media (prefers-reduced-motion: reduce){
  .sb-promo-modal.is-open,
  .sb-promo-dialog{
    animation: none !important;
  }
}