/* css/extension-promo.css — Modal quảng bá Chrome Extension "YTT Thiên Nhãn" trên web chính.
   Class prefix "ep-" (extension promo) — tách riêng, không đụng CSS chung. */

.ep-wrapper {
  background: linear-gradient(135deg, #0d0820 0%, #1a0d30 50%, #200d20 100%);
  border-radius: 20px;
  max-width: 640px;
  width: 92%;
  margin: 5vh auto;
  padding: 28px 28px 32px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  border: 1px solid rgba(202,168,255,.15);
}

.ep-close-btn {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: none; color: #fff;
  cursor: pointer; font-size: 16px; z-index: 2;
}
.ep-close-btn:hover { background: rgba(255,255,255,.16); }

.ep-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ep-icon { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; }
.ep-title { color: #fff; font-size: 22px; margin: 0; }
.ep-subtitle { color: #b3a2d9; font-size: 13px; margin: 4px 0 0; }

.ep-carousel { position: relative; display: flex; align-items: center; gap: 8px; }
.ep-slides { flex: 1; overflow: hidden; border-radius: 14px; background: rgba(255,255,255,.03); min-height: 260px; }
.ep-slide { display: none; }
.ep-slide.active { display: block; animation: epFade .25s ease; }
@keyframes epFade { from { opacity: 0; } to { opacity: 1; } }
/* height CỐ ĐỊNH (không phải min-height) — giữ khung carousel không đổi cao khi chuyển slide dù 4
   ảnh nguồn có tỉ lệ khung hình khác nhau (1.6:1 → 2.4:1). object-fit:CONTAIN (không phải cover) —
   Founder phản hồi cover cắt mất nội dung minh hoạ quan trọng ở 2 mép slide chat (2026-07-31) — contain
   thu nhỏ vừa khung, KHÔNG BAO GIỜ cắt mất nội dung, đánh đổi bằng viền nền (đã cùng tông tím đậm
   modal nên không lộ) nếu ảnh không khớp tỉ lệ khung. */
.ep-slide img { width: 100%; height: 230px; display: block; border-radius: 14px 14px 0 0; background: #1a1228; object-fit: contain; }
.ep-caption { padding: 12px 16px 14px; }
.ep-caption strong { display: block; color: #fff; font-size: 15px; margin-bottom: 4px; }
.ep-caption span { display: block; color: #a998cf; font-size: 12.5px; line-height: 1.5; }

.ep-nav {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff;
  cursor: pointer; font-size: 14px;
}
.ep-nav:hover { background: rgba(202,168,255,.2); }

.ep-dots { display: flex; justify-content: center; gap: 7px; margin: 14px 0 20px; }
.ep-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); cursor: pointer; transition: background .2s, width .2s; }
.ep-dot.active { background: #CAA8FF; width: 20px; border-radius: 4px; }

.ep-install-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, #7248D9, #CAA8FF);
  color: #fff; font-weight: 700; font-size: 15px;
  padding: 13px; border-radius: 12px; text-decoration: none;
}
.ep-install-btn:hover { filter: brightness(1.08); }

@media (max-width: 560px) {
  .ep-wrapper { padding: 22px 16px 26px; margin: 8vh auto; }
  .ep-nav { display: none; }
}