/* Diviners Fest 2026 – popup nhà tài trợ + banner nhỏ (trang chủ tiếng Việt) */

/* Banner nhỏ cố định, góc dưới bên phải */
.dfp-mini {
  position: fixed;
  right: 16px;
  /* Banner nằm dưới cùng; nút chat tawk.to được plugin đẩy lên trên nó (xem diviners-fest-popup.php). */
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 9990;
  display: block;
  width: 275px;
  line-height: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.dfp-mini:hover,
.dfp-mini:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
}
.dfp-mini img {
  display: block;
  width: 100%;
  height: auto;
}

/* Popup chính */
.dfp {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .72);
  opacity: 0;
  transition: opacity .25s ease;
}
.dfp[hidden] { display: none; }
.dfp.is-open { opacity: 1; }
.dfp.is-closing { pointer-events: none; transition-duration: .5s; }

/* Khung tỉ lệ 1400:1980 (= 0,7071). Rộng tối đa 640px và luôn nằm gọn trong màn hình. */
.dfp-card {
  position: relative;
  width: min(100%, 640px, calc((100vh - 32px) * .7071));
  width: min(100%, 640px, calc((100dvh - 32px) * .7071));
  line-height: 0;
  transform: translateY(8px) scale(.98);
  transition: transform .25s ease;
}
.dfp.is-open .dfp-card { transform: none; }

.dfp-card__link {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
}
.dfp-card__link img {
  display: block;
  width: 100%;
  height: auto;
}

.dfp-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1f2a1f;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .4);
}
.dfp-close:hover { background: #f1efe6; }
/* Focus được đưa vào khung popup lúc mở, không cần viền. */
.dfp:focus { outline: none; }
/* Chỉ người dùng bàn phím (Tab) mới thấy viền; nút X dùng viền trắng mảnh, không phải viền vàng. */
.dfp-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.dfp-card__link:focus-visible,
.dfp-mini:focus-visible {
  outline: 3px solid #f2c94c;
  outline-offset: 2px;
}

html.dfp-lock { overflow: hidden; padding-right: var(--dfp-sw, 0px); }
html.dfp-lock .dfp-mini { right: calc(16px + var(--dfp-sw, 0px)); }

@media (max-width: 600px) {
  .dfp-mini { width: 220px; right: 12px; bottom: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  html.dfp-lock .dfp-mini { right: calc(12px + var(--dfp-sw, 0px)); }
}

/* Chỉ khi plugin bật DFP_RESPECT_REDUCED_MOTION (data-respect-rm="1") mới tắt chuyển động theo thiết lập hệ điều hành. */
@media (prefers-reduced-motion: reduce) {
  #dfp-root[data-respect-rm="1"] .dfp,
  #dfp-root[data-respect-rm="1"] .dfp-card,
  #dfp-root[data-respect-rm="1"] .dfp-mini { transition: none; }
  #dfp-root[data-respect-rm="1"] .dfp-card { transform: none; }
}