— top stripe đỏ→vàng chạy LR, bottom stripe teal→peach chạy RL, lệch chu kỳ tạo motion bất đồng bộ. 2. Logo "tráng gương" — diagonal shine sweep ngang qua logo định kỳ. */ /* Neon section frame — chỉ áp khi (index.html homepage). Tránh áp lên

trong admin tab content, blog post detail, account tab v.v. */ .has-neon-sections section { position: relative; isolation: isolate; } .has-neon-sections section::before, .has-neon-sections section::after { pointer-events: none; content: ''; position: absolute; height: 2px; width: 35%; z-index: 5; } .has-neon-sections section::before { top: 0; left: -35%; background: linear-gradient(90deg, transparent 0%, rgba(255, 64, 0, 0.95) 30%, rgba(255, 220, 100, 1) 50%, rgba(255, 64, 0, 0.95) 70%, transparent 100%); box-shadow: 0 0 12px 1px rgba(255, 64, 0, 0.7), 0 0 28px 2px rgba(255, 180, 60, 0.35); animation: neonRunTop 6s linear infinite; } .has-neon-sections section::after { bottom: 0; right: -35%; background: linear-gradient(90deg, transparent 0%, rgba(80, 178, 192, 0.95) 30%, rgba(250, 170, 141, 1) 50%, rgba(80, 178, 192, 0.95) 70%, transparent 100%); box-shadow: 0 0 12px 1px rgba(80, 178, 192, 0.7), 0 0 28px 2px rgba(250, 170, 141, 0.35); animation: neonRunBottom 7s linear infinite; animation-delay: 2.5s; } @keyframes neonRunTop { 0% { left: -35%; } 100% { left: 100%; } } @keyframes neonRunBottom { 0% { right: -35%; } 100% { right: 100%; } } /* Logo mirror shine — diagonal sweep across .logo-hover (img + brand text) */ .logo-hover::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.55) 55%, transparent 75%); background-size: 220% 100%; background-repeat: no-repeat; background-position: -120% 0; animation: logoMirrorSweep 5s ease-in-out infinite; pointer-events: none; z-index: 2; mix-blend-mode: overlay; } @keyframes logoMirrorSweep { 0%, 65%, 100% { background-position: -120% 0; } 82% { background-position: 220% 0; } } /* Reduce motion: tắt cả 3 animation trên */ @media (prefers-reduced-motion: reduce) { .has-neon-sections section::before, .has-neon-sections section::after, .logo-hover::after { animation: none !important; opacity: 0.4; } } /* ==================== Buy button — fire animation (S12.10) ==================== Hiệu ứng "rực lửa" cho mọi nút Mua + Thanh toán: gradient đỏ động + shimmer vàng sweep + outer ring pulse + glow shadow nhấp nháy. Áp cho 3 selectors: - `.resource-buy-btn` (Resources + AI Tools rows) - `.detail-action-buy` (Product detail modal) - `.btn-buy-fire` (course Mua ngay + checkout confirm — class thêm thủ công) */ .resource-buy-btn, .detail-action-buy, .btn-buy-fire { position: relative; isolation: isolate; background: linear-gradient(135deg, #FF4000 0%, #E03000 45%, #C72E00 100%) !important; background-size: 220% 220%; color: #FEEFDD !important; border: 0 !important; font-weight: 700; letter-spacing: 0.01em; animation: fireGradientShift 4s ease-in-out infinite, fireGlowPulse 2.2s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(255, 64, 0, 0.55), 0 6px 18px -4px rgba(255, 64, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18); overflow: hidden; text-shadow: 0 1px 2px rgba(120, 20, 0, 0.35); } /* Inner flame shimmer — yellow streak sweeps across */ .resource-buy-btn::before, .detail-action-buy::before, .btn-buy-fire::before { content: ''; position: absolute; top: 0; left: -60%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 220, 100, 0.55) 45%, rgba(255, 240, 200, 0.7) 50%, rgba(255, 220, 100, 0.55) 55%, transparent 100%); filter: blur(2px); z-index: 0; animation: fireShimmerSweep 3.2s ease-in-out infinite; pointer-events: none; } /* Outer pulsing ring — fading red halo */ .resource-buy-btn::after, .detail-action-buy::after, .btn-buy-fire::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid rgba(255, 90, 30, 0.55); z-index: -1; animation: fireRingPulse 2.4s ease-out infinite; pointer-events: none; } /* Make sure inner content stays above shimmer pseudo */ .resource-buy-btn > *, .detail-action-buy > *, .btn-buy-fire > * { position: relative; z-index: 1; } @keyframes fireGradientShift { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } } @keyframes fireGlowPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 64, 0, 0.5), 0 6px 18px -4px rgba(255, 64, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18); } 50% { box-shadow: 0 0 18px 3px rgba(255, 110, 30, 0.7), 0 12px 30px -6px rgba(255, 64, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.28); } } @keyframes fireShimmerSweep { 0% { left: -60%; } 55%, 100% { left: 160%; } } @keyframes fireRingPulse { 0% { transform: scale(0.98); opacity: 0.6; } 60% { transform: scale(1.12); opacity: 0; } 100% { transform: scale(1.12); opacity: 0; } } /* Hover — đẩy nhanh animation + lift + brightness boost */ .resource-buy-btn:hover, .detail-action-buy:hover, .btn-buy-fire:hover { transform: translateY(-2px) scale(1.04) !important; filter: brightness(1.12) saturate(1.18); animation-duration: 1.5s, 1.2s; background: linear-gradient(135deg, #FF5A1A 0%, #FF4000 40%, #D63300 100%) !important; } .resource-buy-btn:active, .detail-action-buy:active, .btn-buy-fire:active { transform: translateY(0) scale(1) !important; filter: brightness(0.95); } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { .resource-buy-btn, .detail-action-buy, .btn-buy-fire, .resource-buy-btn::before, .detail-action-buy::before, .btn-buy-fire::before, .resource-buy-btn::after, .detail-action-buy::after, .btn-buy-fire::after { animation: none !important; } } /* ==================== Product detail modal (S12.9) ==================== Click vào sản phẩm/dịch vụ/tài nguyên/khóa học → mở popup chi tiết. Backdrop full-screen, panel max-w-560px, scale-in animation. */ .product-detail-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(32, 30, 31, 0.55); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: backdropFadeIn 0.2s ease-out; } .product-detail-backdrop.hidden { display: none; } @keyframes backdropFadeIn { from { opacity: 0; } to { opacity: 1; } } .product-detail-modal { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto; background: linear-gradient(180deg, #FFFFFF 0%, #FEEFDD 100%); border-radius: 28px; border: 1px solid #F2C5A5; box-shadow: 0 30px 60px -20px rgba(32, 30, 31, 0.35), 0 0 0 1px rgba(255, 64, 0, 0.08); padding: 28px 26px 24px; animation: detailModalIn 0.32s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes detailModalIn { from { opacity: 0; transform: scale(0.92) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .product-detail-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(32, 30, 31, 0.06); border: 1px solid transparent; color: #4A4548; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); z-index: 2; } .product-detail-close:hover { background: rgba(255, 64, 0, 0.12); color: #FF4000; transform: rotate(90deg); } .product-detail-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; padding-right: 36px; } .product-detail-emoji { width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(135deg, #FEEFDD, #FAD9C0); border: 1px solid rgba(255, 64, 0, 0.18); display: flex; align-items: center; justify-content: center; font-size: 36px; line-height: 1; flex-shrink: 0; box-shadow: 0 8px 18px -8px rgba(255, 64, 0, 0.35); } .product-detail-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .product-detail-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #FF4000; } .product-detail-name { font-family: inherit; font-weight: 800; font-size: 24px; line-height: 1.2; color: #201E1F; margin: 0; } .product-detail-tagline { font-size: 13px; color: #4A4548; font-weight: 500; } .product-detail-price-block { background: linear-gradient(135deg, rgba(255, 64, 0, 0.08), rgba(80, 178, 192, 0.06)); border: 1px solid rgba(255, 64, 0, 0.22); border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; } .product-detail-price-block.hidden { display: none; } .product-detail-price-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #8E8588; margin-bottom: 4px; } .product-detail-price { font-family: inherit; font-weight: 800; font-size: 26px; color: #FF4000; line-height: 1.1; } .product-detail-desc { font-size: 14px; line-height: 1.65; color: #4A4548; margin-bottom: 14px; } .product-detail-features { list-style: none; padding: 0; margin: 0 0 18px 0; display: flex; flex-direction: column; gap: 8px; } .product-detail-features.hidden { display: none; } .product-detail-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: #4A4548; line-height: 1.5; } .detail-feat-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(91, 168, 90, 0.18); color: #5BA85A; font-size: 11px; font-weight: 800; flex-shrink: 0; margin-top: 1px; } .product-detail-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px dashed #F2C5A5; } .detail-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 14px; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease, box-shadow 0.25s ease; } .detail-action-buy { background: #FF4000; color: #FEEFDD; box-shadow: 0 8px 18px -8px rgba(255, 64, 0, 0.5); } .detail-action-buy:hover { background: #E03800; transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(255, 64, 0, 0.6); } .detail-action-zalo { background: #201E1F; color: #FEEFDD; } .detail-action-zalo:hover { background: #FF4000; transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(255, 64, 0, 0.45); } .detail-action-msger { background: #FFFFFF; color: #201E1F; border: 1px solid #F2C5A5; } .detail-action-msger:hover { background: #FCE0CE; border-color: rgba(255, 64, 0, 0.32); transform: translateY(-2px); } @media (min-width: 481px) { .product-detail-actions { flex-direction: row; } .detail-action-btn { flex: 1; } } /* Product info button reset (S12.9) — `