.beit-popup-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:99999; display:flex; align-items:center; justify-content:center; }
.beit-popup-content { position:relative; width:90%; max-width:650px; border-radius:10px; padding:30px; box-shadow:0 10px 30px rgba(0,0,0,0.3); text-align:center; }
.beit-popup-content.template-lucky_wheel { max-width:720px; }
.beit-popup-close { position:absolute; top:-15px; right:-15px; width:35px; height:35px; background:#fff; color:#333; border-radius:50%; font-size:24px; line-height:35px; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,0.2); z-index:10; }
.anim-fade { animation: fade 0.5s forwards; } @keyframes fade { from{opacity:0} to{opacity:1} }

/* ===== Gamification / Lucky Wheel v4.3 (SVG) ===== */
.beit-wheel-container { display:flex; align-items:center; gap:30px; text-align:left; }
.beit-wheel-left { flex:1; min-width:0; }
.beit-wheel-title { font-size:27px; line-height:1.2; margin:0 0 8px; font-weight:800; background:linear-gradient(90deg,#d63638,#ff9a00); -webkit-background-clip:text; background-clip:text; color:transparent; }
.beit-wheel-sub { margin:0 0 16px; color:#555; font-size:15px; }
.beit-wheel-right { position:relative; flex-shrink:0; }
.beit-wheel-stage { position:relative; width:320px; height:320px; margin:0 auto; }
.beit-wheel-frame { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.beit-wheel-rotor { position:absolute; inset:6px; z-index:2; transition:transform 5s cubic-bezier(.12,.8,.08,1); will-change:transform; }
.beit-wheel-svg { width:100%; height:100%; display:block; filter:drop-shadow(0 8px 14px rgba(0,0,0,.30)); }
.beit-wheel-label { font-weight:700; letter-spacing:.5px; filter:drop-shadow(1px 1px 2px rgba(0,0,0,.55)); }
.beit-wheel-hub-text { fill:#fff; font-weight:800; letter-spacing:1px; filter:drop-shadow(1px 2px 2px rgba(0,0,0,.45)); }
.beit-bulb { fill:#fff7ae; animation:beitBlink 1.1s ease-in-out infinite alternate; }
.beit-bulb.b-alt { animation-delay:.55s; }
@keyframes beitBlink { from { fill:#fff7ae; opacity:.5; } to { fill:#ffd54d; opacity:1; } }
.beit-spinning .beit-bulb { animation-duration:.35s; }
.beit-wheel-arrow { position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:46px; height:46px; z-index:5; filter:drop-shadow(0 6px 4px rgba(0,0,0,.4)); }
.beit-spinning .beit-wheel-arrow { animation:beitTick .18s ease-in-out infinite alternate; transform-origin:50% 0; }
@keyframes beitTick { from { transform:translateX(-50%) rotate(-7deg); } to { transform:translateX(-50%) rotate(7deg); } }
.beit-wheel-win .beit-wheel-rotor { filter:drop-shadow(0 0 24px rgba(255,170,0,.8)); }

/* 3D Button & Forms */
.beit-popup-form input { width:100%; padding:12px; margin-bottom:12px; border:1px solid #ddd; border-radius:5px; box-sizing:border-box; }
.beit-popup-form button { width:100%; padding:12px; background:#0073aa; color:#fff; border:none; border-radius:5px; font-weight:bold; cursor:pointer; }
.beit-popup-form .beit-spin-btn { background:linear-gradient(to bottom, #ff5e3a, #d63638); padding:16px; border-radius:8px; box-shadow:0 6px 0 #9e1a1b, 0 10px 15px rgba(0,0,0,0.3); text-shadow:1px 1px 2px rgba(0,0,0,0.3); text-transform:uppercase; position:relative; top:0; transition:0.1s ease; margin-bottom:15px; }
.beit-popup-form .beit-spin-btn:active { top:6px; box-shadow:0 0 0 #9e1a1b, 0 2px 5px rgba(0,0,0,0.3); }
.beit-popup-form .beit-spin-btn:disabled { opacity:.65; cursor:wait; }

/* Responsive Mobile */
@media (max-width: 768px) {
    .beit-wheel-container { flex-direction:column-reverse; gap:15px; }
    .beit-wheel-stage { width:250px; height:250px; }
    .beit-wheel-left { text-align:center; }
    .beit-wheel-title { font-size:23px; }
    .beit-popup-content { width:95%; padding:20px 15px; max-height:85vh; overflow-y:auto; }
}

/* ===== Form Templates v4.4 ===== */
/* --- Gradient Nổi Bật --- */
.beit-popup-content.template-form_gradient { background:linear-gradient(135deg,#7c3aed 0%,#db2777 55%,#f59e0b 100%); color:#fff; border-radius:16px; }
.beit-tpl-gradient h2 { margin:0 0 10px; font-size:30px; font-weight:800; line-height:1.25; }
.beit-tpl-gradient p { opacity:.93; }
.beit-tpl-gradient .beit-popup-form { margin-top:16px; }
.beit-tpl-gradient .beit-popup-form input { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.45); color:#fff; border-radius:10px; padding:13px; }
.beit-tpl-gradient .beit-popup-form input::placeholder { color:rgba(255,255,255,.75); }
.beit-tpl-gradient .beit-popup-form input:focus { background:rgba(255,255,255,.25); outline:none; border-color:#fff; }
.beit-tpl-gradient .beit-popup-form button { background:#fff; color:#db2777; border-radius:10px; padding:14px; font-size:16px; box-shadow:0 8px 20px rgba(0,0,0,.25); }
.beit-popup-content.template-form_gradient[style*="background-image"] .beit-tpl-gradient { background:linear-gradient(135deg, rgba(124,58,237,.88), rgba(219,39,119,.88)); border-radius:12px; padding:24px; }

/* --- Ảnh + Nội Dung (Split) --- */
.beit-popup-content.template-form_split { padding:0; overflow:hidden; border-radius:16px; max-width:760px; }
.beit-popup-content.template-form_split .beit-popup-close { top:10px; right:10px; }
.beit-tpl-split { display:flex; text-align:left; }
.beit-split-media { flex:0 0 42%; min-height:340px; background-size:cover; background-position:center; background-color:#1e3a8a; background-image:linear-gradient(135deg,#2563eb,#7c3aed); }
.beit-split-body { flex:1; padding:30px 28px; min-width:0; }
.beit-split-body h2 { margin:0 0 10px; font-size:26px; line-height:1.3; }
.beit-split-body .beit-popup-form { margin-top:14px; }
.beit-split-body .beit-popup-form button { background:linear-gradient(90deg,#2563eb,#7c3aed); border-radius:10px; padding:14px; font-size:15px; }

/* --- Tối Giản Hiện Đại (Minimal) --- */
.beit-popup-content.template-form_minimal { border-top:6px solid #2563eb; border-radius:14px; }
.beit-tpl-minimal h2 { margin:0 0 10px; font-size:27px; font-weight:700; letter-spacing:-.5px; color:#0f172a; }
.beit-tpl-minimal p { color:#475569; }
.beit-tpl-minimal .beit-popup-form { margin-top:16px; }
.beit-tpl-minimal .beit-popup-form input { border:1.5px solid #e2e8f0; border-radius:10px; padding:13px; background:#f8fafc; }
.beit-tpl-minimal .beit-popup-form input:focus { border-color:#2563eb; background:#fff; outline:none; }
.beit-tpl-minimal .beit-popup-form button { background:#2563eb; border-radius:10px; padding:14px; font-size:15px; }
.beit-tpl-minimal .beit-popup-form button:hover { background:#1d4ed8; }

/* --- Tối Sang Trọng (Dark) --- */
.beit-popup-content.template-form_dark { background:#101828; color:#e6e9f0; border-radius:16px; }
.beit-tpl-dark h2 { margin:0 0 10px; font-size:29px; font-weight:800; color:#f5c451; line-height:1.25; }
.beit-tpl-dark p { color:#b8c0d0; }
.beit-tpl-dark .beit-popup-form { margin-top:16px; }
.beit-tpl-dark .beit-popup-form input { background:#1b2740; border:1px solid #2c3d5f; color:#fff; border-radius:10px; padding:13px; }
.beit-tpl-dark .beit-popup-form input::placeholder { color:#7d8aa5; }
.beit-tpl-dark .beit-popup-form input:focus { border-color:#f5c451; outline:none; }
.beit-tpl-dark .beit-popup-form button { background:linear-gradient(90deg,#f5c451,#e08a00); color:#231a00; border-radius:10px; padding:14px; font-size:16px; }
.beit-popup-content.template-form_dark[style*="background-image"] .beit-tpl-dark { background:rgba(10,15,28,.88); border-radius:12px; padding:24px; }

@media (max-width: 768px) {
    .beit-tpl-split { flex-direction:column; }
    .beit-split-media { flex:none; min-height:160px; }
    .beit-split-body { padding:22px 18px; }
    .beit-tpl-gradient h2, .beit-tpl-dark h2 { font-size:24px; }
}