/* Wrapper bọc ngoài để isolate CSS */
.edu-mgg-wrapper {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    width: 100%;
}

/* Hộp quà Box chính */
.edu-mgg-box {
    background: #ffffff;
    width: 100%;
    max-width: 480px;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    border: 4px solid #fecaca;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Các Style Border Riêng Biệt */
.edu-mgg-box.style-2 { border-color: #fcd34d; }
.edu-mgg-box.style-3 { border-color: #c084fc; background: #faf5ff; }
.edu-mgg-box.style-4 { border-color: #ef4444; background: #fff1f2; }
.edu-mgg-box.style-5 { border-color: #34d399; }
.edu-mgg-box.style-6 { border-color: #6366f1; background: #eef2ff; }
.edu-mgg-box.style-7 { border-color: #f97316; background: #fff7ed; }
.edu-mgg-box.style-8 { border-color: #14b8a6; }
.edu-mgg-box.style-9 { border-color: #06b6d4; background: #ecfeff; }
.edu-mgg-box.style-10 { border-color: #b45309; background: #fef3c7; }

.edu-mgg-step {
    padding: 40px 30px;
    display: none;
    animation: fadeInMgg 0.5s ease-in-out;
}
.edu-mgg-step.active { display: block; }

@keyframes fadeInMgg {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.edu-mgg-icon { font-size: 64px; line-height: 1; margin-bottom: 10px; text-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.edu-mgg-title { color: #1e293b; font-size: 26px; font-weight: 900; margin: 0 0 10px 0; letter-spacing: 0.5px; }
.edu-mgg-desc { color: #4b5563; font-size: 15px; margin-bottom: 25px; line-height: 1.5; }

.edu-mgg-form-group { margin-bottom: 15px; }
.edu-mgg-form-group input {
    width: 100%; padding: 14px 16px; border: 2px solid #e2e8f0; border-radius: 12px; font-size: 15px;
    outline: none; transition: all 0.3s ease; box-sizing: border-box; background: #f8fafc; color: #0f172a;
}
.edu-mgg-form-group input:focus { border-color: #2563eb; background: #ffffff; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); }

/* --- HIỆU ỨNG NÚT BẤM (PULSE EFFET) KÍCH THÍCH CLICK --- */
.edu-mgg-btn {
    width: 100%; color: #ffffff;
    font-size: 16px; font-weight: 800; padding: 16px; border: none; border-radius: 12px; cursor: pointer;
    text-transform: uppercase; transition: all 0.3s; box-sizing: border-box; display: inline-flex;
    justify-content: center; align-items: center; gap: 8px; text-decoration: none; position: relative;
}

/* Nút Xanh Nhấn Form */
.btn-mgg-submit { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
.btn-mgg-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4); color: #ffffff; }

@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
.edu-btn-pulse { animation: pulse-blue 2s infinite; }

/* Nút Vàng Mua Hàng */
.edu-mgg-btn-gold { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
.edu-mgg-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(245, 158, 11, 0.4); color: #ffffff; }

@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
.edu-btn-pulse-gold { animation: pulse-gold 2s infinite; }

.edu-mgg-secure { font-size: 12px; color: #94a3b8; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 4px; }

/* ================= BƯỚC 2: CÁC HIỆU ỨNG ANIMATION ================= */
.edu-mgg-animation-container { margin: 30px 0; height: 120px; display: flex; align-items: center; justify-content: center;}

/* (Giữ nguyên các animation cũ để không làm bài viết quá dài) */
.box-shaking { font-size: 80px; display: inline-block; animation: shaking 0.5s infinite; transform-origin: bottom center; }
@keyframes shaking { 0% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(15deg) scale(1.1); } 50% { transform: rotate(0deg) scale(1.1); } 75% { transform: rotate(-15deg) scale(1.1); } 100% { transform: rotate(0deg) scale(1); } }
.wheel-container { position: relative; width: 100px; height: 100px; }
.wheel-spin { font-size: 80px; line-height: 100px; animation: spinWheel 0.3s infinite linear; }
.wheel-pointer { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 24px; z-index: 2; }
@keyframes spinWheel { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cards-container { display: flex; gap: 10px; justify-content: center; }
.card { font-size: 50px; background: #fff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px; transition: 0.5s; animation: floatCard 1s infinite alternate; }
.card-2 { animation-delay: 0.2s; }
.card-3 { animation-delay: 0.4s; }
.card.flipping { transform: rotateY(180deg) scale(1.2); box-shadow: 0 0 20px #c084fc; z-index: 10; }
@keyframes floatCard { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.lixi-container { display: flex; gap: 15px; justify-content: center; }
.lixi { font-size: 50px; transition: 0.5s; cursor: pointer; animation: pulseLixi 1s infinite alternate;}
.lixi.opening { transform: scale(1.4); animation: none; filter: drop-shadow(0 0 10px #ef4444); }
@keyframes pulseLixi { from { transform: scale(1); } to { transform: scale(1.1); } }
.slot-container { display: flex; gap: 10px; background: #1e293b; padding: 10px 20px; border-radius: 12px; border: 4px solid #cbd5e1; }
.slot-box { font-size: 40px; background: #fff; padding: 10px; border-radius: 8px; width: 60px; text-align: center; animation: slotRoll 0.2s infinite linear; }
@keyframes slotRoll { 0% { transform: translateY(-10px); } 100% { transform: translateY(10px); } }
.key-container { position: relative; width: 150px; height: 100px; display: flex; align-items: center; justify-content: center; }
.door-icon { font-size: 80px; z-index: 1; }
.key-icon { font-size: 50px; position: absolute; left: 0; z-index: 2; transition: 1s ease-in-out; animation: keyShake 1s infinite; }
.key-container.unlocking .key-icon { left: 50px; transform: rotate(45deg); animation: none; }
.key-container.unlocking .door-icon { filter: drop-shadow(0 0 15px #6366f1); transform: scale(1.1); transition: 0.5s; transition-delay: 0.5s;}
@keyframes keyShake { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(15deg); } }
.rocket-container { position: relative; width: 100px; height: 120px; display: flex; flex-direction: column; align-items: center; }
.rocket-icon { font-size: 60px; transition: 1.5s ease-in; animation: rocketShake 0.1s infinite; z-index: 2;}
.clouds { font-size: 40px; position: absolute; bottom: 0; opacity: 0.8; z-index: 1;}
.rocket-container.launching .rocket-icon { transform: translateY(-150px) scale(0.5); opacity: 0; animation: none;}
.rocket-container.launching .clouds { filter: drop-shadow(0 20px 20px #f97316); }
@keyframes rocketShake { 0% { transform: translateX(-2px); } 100% { transform: translateX(2px); } }
.cups-container { display: flex; gap: 15px; }
.cup { font-size: 60px; transition: 0.5s ease-in-out; position: relative; }
.cups-container.shuffling .cup-1 { transform: translateX(75px); }
.cups-container.shuffling .cup-3 { transform: translateX(-75px); }
.cups-container.shuffling .cup-2 { transform: translateY(-30px); }
.ice-container { position: relative; width: 120px; height: 100px; display: flex; align-items: center; justify-content: center; }
.ice-block { font-size: 80px; transition: 0.3s; }
.hammer { font-size: 50px; position: absolute; top: -20px; right: -20px; transform-origin: bottom left; animation: hammerHit 0.5s infinite alternate; z-index: 2; }
.ice-container.breaking .hammer { animation: none; transform: rotate(-45deg); opacity: 0; transition: 0.5s; }
.ice-container.breaking .ice-block { transform: scale(1.2); filter: blur(2px); opacity: 0.5; }
@keyframes hammerHit { 0% { transform: rotate(20deg); } 100% { transform: rotate(-45deg); } }
.compass-container { position: relative; width: 100px; height: 100px; }
.compass-spin { font-size: 80px; line-height: 100px; transition: 2s cubic-bezier(0.25, 1, 0.5, 1); animation: compassWobble 0.5s infinite; }
.compass-container.found .compass-spin { animation: none; transform: rotate(720deg) scale(1.2); filter: drop-shadow(0 0 15px #b45309); }
@keyframes compassWobble { 0% { transform: rotate(-10deg); } 100% { transform: rotate(10deg); } }


.edu-mgg-title-loading { font-size: 20px; font-weight: bold; color: #2563eb; margin-bottom: 5px;}
.edu-mgg-desc-loading { font-size: 14px; color: #64748b; }

/* ================= BƯỚC 3: KẾT QUẢ SUCCESS ================= */
.edu-mgg-firework { animation: popMgg 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }
@keyframes popMgg { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.edu-mgg-title-success { color: #059669; font-size: 24px; font-weight: 900; margin-bottom: 10px; text-transform: uppercase;}
.edu-mgg-desc-success { color: #4b5563; font-size: 15px; margin-bottom: 20px;}

.edu-mgg-coupon-ticket { background: #fef3c7; border: 3px dashed #f59e0b; padding: 20px 10px; border-radius: 12px; margin: 0 auto 20px auto; position: relative; }
.edu-mgg-result-code { font-size: 32px; font-weight: 900; color: #d97706; letter-spacing: 3px; font-family: monospace; }
.edu-mgg-note { font-size: 14px; color: #64748b; margin-bottom: 25px;}