/* ========================================================================== FEBET World Cup Popup ========================================================================== */ .febet-popup-overlay { position: fixed; inset: 0; z-index: 2147483000; /* trên cả header sticky của Flatsome */ display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: clamp(16px, 4vw, 40px); background: rgba(8, 12, 20, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; animation: febet-fade-in 0.35s ease forwards; overscroll-behavior: contain; } .febet-popup-overlay.febet-closing { animation: febet-fade-out 0.25s ease forwards; } .febet-popup-box { position: relative; z-index: 2; /* nằm TRÊN lớp pháo hoa */ max-width: min(92vw, 680px); transform: scale(0.7); opacity: 0; animation: febet-pop-in 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.06s forwards; } /* Lớp canvas pháo hoa, phủ toàn overlay, nằm dưới ảnh popup */ .febet-popup-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .febet-popup-overlay.febet-closing .febet-popup-box { animation: febet-pop-out 0.25s ease forwards; } .febet-popup-link { display: block; line-height: 0; } a.febet-popup-link { cursor: pointer; } .febet-popup-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 82vh; border-radius: 14px; filter: drop-shadow(0 22px 48px rgba(0, 0, 0, 0.5)); -webkit-user-select: none; user-select: none; } /* Nút đóng (X) tròn xanh giống mẫu */ .febet-popup-close { position: absolute; top: -16px; right: -16px; width: 46px; height: 46px; min-width: 46px; min-height: 46px; max-width: 46px; max-height: 46px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; line-height: 1; color: #fff; background: #2ecc63; border: 3px solid #ffffff; border-radius: 50%; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); transition: transform 0.2s ease, background 0.2s ease; opacity: 0; animation: febet-pop-in 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.34s forwards; z-index: 2; } .febet-popup-close:hover, .febet-popup-close:focus-visible { background: #27b257; transform: scale(1.1) rotate(90deg); outline: none; } .febet-popup-close:focus-visible { box-shadow: 0 0 0 4px rgba(46, 204, 99, 0.45); } /* Khoá scroll khi popup mở */ /* Khoá scroll khi popup mở (cả lẫn vì có theme đặt scroll ở html) */ html.febet-popup-open, body.febet-popup-open { overflow: hidden !important; height: 100% !important; touch-action: none; } /* Responsive nhỏ */ @media (max-width: 600px) { .febet-popup-box { max-width: 94vw; } .febet-popup-close { top: -12px; right: -6px; width: 30px; height: 30px; min-width: 30px; min-height: 30px; max-width: 30px; max-height: 30px; font-size: 20px; } .febet-popup-img { max-height: 78vh; border-radius: 12px; } } /* Animations */ @keyframes febet-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes febet-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes febet-pop-in { 0% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: scale(1); } } @keyframes febet-pop-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.85); } } /* Tôn trọng người dùng tắt hiệu ứng */ @media (prefers-reduced-motion: reduce) { .febet-popup-overlay, .febet-popup-box, .febet-popup-close { animation-duration: 0.01ms !important; animation-delay: 0s !important; } }