Mystical Hub 鈥?Kh谩m Ph谩 B岷 Th芒n qua L膬ng K铆nh V农 Tr峄?/title> <meta name="description" content="6 h峄?th峄憂g lu岷璶 gi岷 chuy锚n s芒u 鈥?Th岷 s峄?h峄峜, Tarot, T峄?vi, Ch貌m sao, Ma tr岷璶膽峄媙h m峄噉h, B谩t t峄? Kh么ng AI, kh么ng c么ng th峄ヽ chung chung."> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.min.css">  <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-app-compat.js"></script> <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-auth-compat.js"></script> <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore-compat.js"></script> <script> const _fbConfig = { apiKey: "AIzaSyBnSgsosG9YLHwnFElqYH4ZfQh1Hg2pdn0", authDomain: "tra-cuu-ban-menh-965cc.firebaseapp.com", projectId: "tra-cuu-ban-menh-965cc", storageBucket: "tra-cuu-ban-menh-965cc.firebasestorage.app", messagingSenderId: "919853886585", appId: "1:919853886585:web:2749995ba39ef05e9db8a8" }; firebase.initializeApp(_fbConfig); window.fbAuth = firebase.auth(); window.fbDb = firebase.firestore(); </script> <style> /* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺? MYSTICAL HUB 鈥?NEW DESIGN SYSTEM 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/ /* 鈹€鈹€ Reset & Base 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* 鈹€鈹€ NEW NAVBAR 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem; height: 60px; background: rgba(13, 10, 30, 0.85); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .mh-navbar-left { display: flex; align-items: center; gap: 0.75rem; } .mh-logo-icon { width: 34px; height: 34px; background: linear-gradient(135deg, #7c3aed, #a855f7); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .mh-logo-text { font-size: 0.95rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; } .mh-premium-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fbbf24; border: 1px solid #fbbf24; border-radius: 4px; padding: 1px 5px; margin-left: 2px; } .mh-nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; } .mh-nav-links a { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 0.88rem; font-weight: 500; transition: color 0.2s; } .mh-nav-links a:hover { color: #fff; } .mh-navbar-right { display: flex; align-items: center; gap: 1rem; } .mh-btn-login { color: rgba(255, 255, 255, 0.75); background: none; border: none; font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: color 0.2s; } .mh-btn-login:hover { color: #fff; } .mh-btn-cta { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; border: none; border-radius: 8px; padding: 0.5rem 1.1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s, transform 0.15s; white-space: nowrap; } .mh-btn-cta:hover { opacity: 0.9; transform: translateY(-1px); } /* user nav (logged in state) */ .mh-user-nav { display: flex; align-items: center; gap: 1rem; } .mh-nav-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(168, 85, 247, 0.4); } .mh-nav-username { font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); font-weight: 500; } .mh-btn-nav-secondary { color: rgba(255, 255, 255, 0.6); background: none; border: none; font-size: 0.83rem; cursor: pointer; transition: color 0.2s; text-decoration: none; } .mh-btn-nav-secondary:hover { color: #fff; } /* 鈹€鈹€ HERO / LANDING 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 5rem 1.5rem 3rem; } .mh-hero-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 0.3rem 0.85rem; margin-bottom: 1.6rem; letter-spacing: 0.02em; } .mh-hero-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; display: inline-block; } .mh-hero-title { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.15; color: #fff; margin-bottom: 0.5rem; letter-spacing: -0.02em; } .mh-hero-title .gradient-word { background: linear-gradient(135deg, #c084fc, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mh-hero-subtitle-italic { font-family: 'Lora', serif; font-style: italic; font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: rgba(255, 255, 255, 0.65); margin-bottom: 1.4rem; } .mh-hero-desc { max-width: 520px; font-size: 0.95rem; color: rgba(255, 255, 255, 0.5); line-height: 1.7; margin: 0 auto 2rem; } .mh-hero-actions { display: flex; gap: 0.85rem; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; } .mh-btn-primary { display: inline-flex; align-items: center; gap: 0.4rem; background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; border: none; border-radius: 10px; padding: 0.8rem 1.6rem; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s; box-shadow: 0 4px 20px rgba(124, 58, 237, 0.45); } .mh-btn-primary:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 6px 28px rgba(124, 58, 237, 0.55); } .mh-btn-outline { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.8); border: 1.5px solid rgba(255, 255, 255, 0.15); border-radius: 10px; padding: 0.8rem 1.6rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .mh-btn-outline:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); } .mh-hero-trust { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; font-size: 0.78rem; color: rgba(255, 255, 255, 0.45); } .mh-hero-trust span::before { content: '鉁?'; color: #a78bfa; } /* 鈹€鈹€ MODULE GRID SECTION 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-modules-section { padding: 5rem 1.5rem; max-width: 1100px; margin: 0 auto; } .mh-section-eyebrow { text-align: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #a78bfa; margin-bottom: 0.6rem; } .mh-section-title { text-align: center; font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; color: #fff; margin-bottom: 3rem; letter-spacing: -0.02em; } .mh-section-title .accent { color: #fbbf24; } .mh-module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } @media (max-width: 768px) { .mh-module-grid { grid-template-columns: 1fr; } .mh-navbar { padding: 0 1rem; } .mh-nav-links { display: none; } } @media (max-width: 1024px) and (min-width: 769px) { .mh-module-grid { grid-template-columns: repeat(2, 1fr); } } .mh-module-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 1.5rem; position: relative; transition: border-color 0.2s, background 0.2s, transform 0.2s; cursor: pointer; } .mh-module-card:hover { border-color: rgba(168, 85, 247, 0.35); background: rgba(168, 85, 247, 0.06); transform: translateY(-3px); } .mh-module-card.locked { cursor: default; } .mh-module-card.locked:hover { transform: none; } .mh-module-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; } .mh-module-icon { width: 54px; height: 54px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: linear-gradient(135deg, rgba(30, 15, 60, 0.95), rgba(15, 8, 40, 0.98)); border: 1px solid rgba(168, 85, 247, 0.18); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); overflow: hidden; flex-shrink: 0; } /* Individual icon accent border only 鈥?same dark bg for all */ .mh-module-icon.numerology { border-color: rgba(124, 58, 237, 0.35); } .mh-module-icon.tarot { border-color: rgba(220, 38, 38, 0.35); } .mh-module-icon.astro { border-color: rgba(234, 179, 8, 0.35); } .mh-module-icon.matrix { border-color: rgba(6, 182, 212, 0.35); } .mh-module-icon.tuvi { border-color: rgba(99, 102, 241, 0.35); } .mh-module-icon.batu { border-color: rgba(239, 68, 68, 0.35); } .mh-module-status { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; border-radius: 6px; padding: 0.2rem 0.55rem; } .mh-module-status.live { background: rgba(34, 197, 94, 0.2); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.25); } .mh-module-status.q2 { background: rgba(234, 179, 8, 0.15); color: #fbbf24; border: 1px solid rgba(234, 179, 8, 0.2); } .mh-module-status.q3 { background: rgba(99, 102, 241, 0.15); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.2); } .mh-module-status.q4 { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.2); } .mh-module-status.future { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); } .mh-module-name { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem; } .mh-module-desc { font-size: 0.82rem; color: rgba(255, 255, 255, 0.45); line-height: 1.55; margin-bottom: 1rem; } .mh-module-progress { height: 3px; background: rgba(255, 255, 255, 0.08); border-radius: 99px; overflow: hidden; } .mh-module-progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7c3aed, #a855f7); } /* 鈹€鈹€ RESULTS / REPORT HEADER 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-results-header { text-align: center; padding: 5rem 1.5rem 2rem; } .mh-results-header h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: #fff; margin-bottom: 2rem; } .mh-results-header h2 .accent { color: #a78bfa; } .mh-report-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 1.4rem 1.6rem; max-width: 760px; margin: 0 auto; } .mh-report-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .mh-report-meta small { display: block; font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); margin-bottom: 0.3rem; } .mh-report-meta strong { font-size: 1rem; font-weight: 700; color: #fff; } .mh-report-lp { text-align: right; } .mh-report-lp-number { font-size: 2.8rem; font-weight: 800; color: #fff; line-height: 1; } .mh-report-lp-label { font-size: 0.7rem; color: rgba(255, 255, 255, 0.4); margin-top: 0.2rem; } .mh-report-section { padding: 0.9rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .mh-report-section:last-child { border-bottom: none; } .mh-report-section-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; } .mh-tier-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; border-radius: 4px; padding: 0.15rem 0.44rem; } .mh-tier-badge.free { background: rgba(34, 197, 94, 0.2); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.25); } .mh-tier-badge.pro { background: rgba(234, 179, 8, 0.2); color: #fbbf24; border: 1px solid rgba(234, 179, 8, 0.25); } .mh-report-section-title { font-size: 0.9rem; font-weight: 600; color: #fff; } .mh-report-section-body { font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); line-height: 1.65; } .mh-blur-text { filter: blur(5px); user-select: none; color: rgba(255, 255, 255, 0.4); font-size: 0.82rem; line-height: 1.65; } .mh-paywall-strip { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid rgba(255, 255, 255, 0.07); flex-wrap: wrap; } .mh-btn-pro { display: inline-flex; align-items: center; gap: 0.4rem; background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; border: none; border-radius: 8px; padding: 0.55rem 1.1rem; font-size: 0.83rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: opacity 0.2s; } .mh-btn-pro:hover { opacity: 0.88; } .mh-voucher-hint { font-size: 0.78rem; color: rgba(255, 255, 255, 0.35); } /* 鈹€鈹€ PRICING 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-pricing-section { padding: 5rem 1.5rem; max-width: 1000px; margin: 0 auto; text-align: center; } .mh-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem; } @media (max-width: 768px) { .mh-pricing-grid { grid-template-columns: 1fr; } } .mh-plan-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 2rem 1.5rem; text-align: left; position: relative; transition: border-color 0.2s; } .mh-plan-card.popular { border-color: rgba(168, 85, 247, 0.5); background: rgba(124, 58, 237, 0.08); } .mh-popular-badge { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, #7c3aed, #a855f7); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; border-radius: 0 0 8px 8px; padding: 0.2rem 0.8rem; white-space: nowrap; } .mh-plan-tier { font-size: 0.8rem; color: rgba(255, 255, 255, 0.45); margin-bottom: 0.5rem; } .mh-plan-price { font-size: 2.4rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 0.3rem; } .mh-plan-price.popular-price { color: #a78bfa; } .mh-plan-price.vip-price { color: #fbbf24; } .mh-plan-period { font-size: 0.78rem; color: rgba(255, 255, 255, 0.35); margin-bottom: 1.4rem; } .mh-plan-features { list-style: none; margin-bottom: 1.5rem; } .mh-plan-features li { font-size: 0.84rem; color: rgba(255, 255, 255, 0.6); padding: 0.28rem 0; display: flex; align-items: center; gap: 0.5rem; } .mh-plan-features li::before { content: '鉁?; color: #4ade80; font-weight: 700; } .mh-plan-features li.off { color: rgba(255, 255, 255, 0.3); } .mh-plan-features li.off::before { content: '鉁?; color: rgba(255, 255, 255, 0.2); } .mh-btn-plan { display: block; width: 100%; padding: 0.75rem; border-radius: 8px; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s, transform 0.15s; text-align: center; } .mh-btn-plan.outline { background: none; border: 1.5px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.65); } .mh-btn-plan.outline:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; } .mh-btn-plan.filled { background: linear-gradient(135deg, #7c3aed, #a855f7); border: none; color: #fff; box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4); } .mh-btn-plan.filled:hover { opacity: 0.9; transform: translateY(-1px); } /* 鈹€鈹€ FORM ELEMENTS 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .field-hint { display: block; font-size: .75rem; color: #a78bfa; margin-top: .3rem; font-style: italic } .gender-radio-row { display: flex; gap: .6rem; margin-top: .2rem } .gender-pill { display: flex; align-items: center; gap: .4rem; flex: 1; justify-content: center; padding: .65rem .8rem; border-radius: 10px; border: 1.5px solid rgba(168, 85, 247, .3); background: rgba(255, 255, 255, .03); color: #c4b5fd; font-size: .92rem; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s, color .15s; user-select: none } .gender-pill input[type=radio] { display: none } .gender-pill.active { background: rgba(139, 44, 237, .35); border-color: #a855f7; color: #fff } .gender-pill:hover:not(.active) { border-color: rgba(168, 85, 247, .55); background: rgba(255, 255, 255, .06) } .btn-submit-main { display: block; width: 100%; padding: 1rem 1.5rem; background: linear-gradient(135deg, #a21caf 0%, #7c3aed 100%); color: #fff; border: none; border-radius: 12px; font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; cursor: pointer; transition: opacity .2s, transform .15s, box-shadow .2s; box-shadow: 0 4px 24px rgba(162, 28, 175, .4); margin-top: .5rem; text-transform: uppercase } .btn-submit-main:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 32px rgba(162, 28, 175, .55) } .btn-submit-main:active { transform: translateY(0) } </style>  <style> /* 鈹€鈹€ Keyframes 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); } 50% { box-shadow: 0 0 24px 6px rgba(168, 85, 247, 0.35); } } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes progressIn { from { width: 0 !important; } } @keyframes badgePop { 0% { transform: scale(0.7) translateY(-4px); opacity: 0; } 60% { transform: scale(1.12) translateY(0); opacity: 1; } 100% { transform: scale(1); } } @keyframes navSlide { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } } @keyframes starTwinkle { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } @keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes particleDrift { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.6; } 33% { transform: translateY(-30px) translateX(12px) scale(1.2); opacity: 0.9; } 66% { transform: translateY(-10px) translateX(-8px) scale(0.9); opacity: 0.7; } 100% { transform: translateY(-50px) translateX(4px) scale(1); opacity: 0; } } /* 鈹€鈹€ Navbar entrance 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-navbar { animation: navSlide 0.5s cubic-bezier(0.23, 1, 0.32, 1) both; } /* 鈹€鈹€ Hero section animations 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-hero-badge { animation: fadeInDown 0.6s 0.1s ease both; } .mh-hero-title { animation: fadeInUp 0.7s 0.25s ease both; } .mh-hero-subtitle-italic { animation: fadeInUp 0.7s 0.4s ease both; } .mh-hero-desc { animation: fadeInUp 0.7s 0.55s ease both; } .mh-hero-actions { animation: fadeInUp 0.7s 0.7s ease both; } .mh-hero-trust { animation: fadeInUp 0.7s 0.85s ease both; } /* 鈹€鈹€ Animated gradient title 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-hero-title .gradient-word { background: linear-gradient(135deg, #c084fc, #60a5fa, #a78bfa, #c084fc); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientShift 4s ease infinite; } /* 鈹€鈹€ Floating hero logo 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mystic-circle-icon { animation: float 4s ease-in-out infinite; } /* 鈹€鈹€ Shimmer effect on CTA buttons 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-btn-primary { background: linear-gradient(135deg, #7c3aed, #a855f7, #7c3aed); background-size: 200% auto; animation: shimmer 3s linear infinite; } /* 鈹€鈹€ Pulse glow on primary CTA 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-btn-cta { animation: pulseGlow 2.5s ease-in-out infinite; } /* 鈹€鈹€ Module cards: scroll-reveal base 鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-module-card { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.25s ease, background 0.25s ease; } .mh-module-card.visible { opacity: 1; transform: translateY(0); } /* Hover: lift + glow */ .mh-module-card:not(.locked):hover { box-shadow: 0 8px 32px rgba(168, 85, 247, 0.25); } .mh-module-card.locked:hover { opacity: 0.85; } /* 鈹€鈹€ Progress bar animated fill 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-module-progress-fill { animation: progressIn 1.4s 0.6s cubic-bezier(0.23, 1, 0.32, 1) both; } /* 鈹€鈹€ Status badge pop 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-module-status { animation: badgePop 0.5s 0.5s cubic-bezier(0.23, 1, 0.32, 1) both; } /* 鈹€鈹€ Pricing cards scroll-reveal 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-plan-card { opacity: 0; transform: translateY(30px) scale(0.97); transition: opacity 0.55s ease, transform 0.55s ease, border-color 0.25s ease; } .mh-plan-card.visible { opacity: 1; transform: translateY(0) scale(1); } .mh-plan-card.popular.visible { animation: pulseGlow 3s 1s ease-in-out infinite; } .mh-plan-card:hover { transform: translateY(-4px) scale(1.01) !important; } /* 鈹€鈹€ Section title entrance 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-section-eyebrow, .mh-section-title { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } .mh-section-eyebrow.visible, .mh-section-title.visible { opacity: 1; transform: translateY(0); } /* 鈹€鈹€ Floating particles canvas 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ #mh-particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* 鈹€鈹€ Cursor typing effect 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .typing-cursor::after { content: '|'; color: #a78bfa; animation: cursorBlink 0.85s step-end infinite; margin-left: 2px; } /* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺? MYSTICAL HUB PREMIUM 鈥?AURORA & EFFECTS 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/ /* Aurora radial background */ .mh-aurora-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(120, 40, 200, 0.35), transparent), radial-gradient(ellipse 60% 60% at 80% 80%, rgba(30, 80, 200, 0.2), transparent), radial-gradient(ellipse 40% 40% at 20% 60%, rgba(200, 80, 120, 0.15), transparent); } /* Floating aurora orbs */ .mh-orb { position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; animation: mhFloatOrb 12s ease-in-out infinite; } .mh-orb-1 { width: 420px; height: 420px; background: rgba(139, 92, 246, 0.16); top: -120px; left: -120px; animation-delay: 0s; } .mh-orb-2 { width: 320px; height: 320px; background: rgba(59, 130, 246, 0.13); bottom: 80px; right: -60px; animation-delay: -4s; } .mh-orb-3 { width: 260px; height: 260px; background: rgba(236, 72, 153, 0.1); top: 50%; left: 62%; animation-delay: -8s; } @keyframes mhFloatOrb { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -30px) scale(1.05); } 66% { transform: translate(-20px, 20px) scale(0.95); } } /* Premium progress bar 鈥?top of page */ .mh-progress-bar-top { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; border-radius: 0 0 99px 99px; background: linear-gradient(90deg, #7c3aed, #60a5fa, #f472b6); background-size: 200%; animation: mhProgressFlow 3s linear infinite; } @keyframes mhProgressFlow { 0% { background-position: 0%; } 100% { background-position: 200%; } } /* Badge shimmer 鈥?PREMIUM badge */ .mh-premium-badge { animation: mhBadgeShimmer 3s ease-in-out infinite !important; } @keyframes mhBadgeShimmer { 0%, 100% { box-shadow: 0 0 6px rgba(251, 191, 36, 0.2); } 50% { box-shadow: 0 0 16px rgba(251, 191, 36, 0.55); } } /* Nav link underline hover animation */ .mh-nav-links a { position: relative; } .mh-nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg, #7c3aed, #60a5fa); transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease; } .mh-nav-links a:hover::after { transform: scaleX(1); } .mh-nav-links a:hover { color: #c4b5fd !important; } /* Enhanced module card hover */ .mh-module-card:not(.locked):hover { transform: translateY(-6px) scale(1.02) !important; box-shadow: 0 20px 60px rgba(139, 92, 246, 0.28), 0 0 0 1px rgba(139, 92, 246, 0.2) !important; border-color: rgba(139, 92, 246, 0.45) !important; } /* Enhanced pricing card hover for popular */ .mh-plan-card.popular { position: relative; overflow: hidden; } .mh-plan-card.popular::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #7c3aed, #60a5fa, #f472b6); background-size: 200%; animation: mhProgressFlow 3s linear infinite; } /* Twinkle stars (generated via JS) */ .mh-star { position: fixed; width: 2px; height: 2px; background: white; border-radius: 50%; pointer-events: none; z-index: 0; animation: mhTwinkle var(--dur, 3s) ease-in-out infinite; animation-delay: var(--del, 0s); } @keyframes mhTwinkle { 0%, 100% { opacity: 0.1; transform: scale(1); } 50% { opacity: 0.75; transform: scale(1.6); } } /* Scroll dot pulse in hero badge */ .mh-hero-badge .mh-pulse-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; animation: mhPulseDot 2s ease-in-out infinite; margin-right: 4px; vertical-align: middle; } @keyframes mhPulseDot { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.5); opacity: 1; } } </style>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q88C01D63S"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-Q88C01D63S'); </script> </head> <body>  <div class="mh-progress-bar-top" id="mh-progress-bar"></div>  <div class="mh-aurora-bg"></div> <div class="mh-orb mh-orb-1"></div> <div class="mh-orb mh-orb-2"></div> <div class="mh-orb mh-orb-3"></div>  <div id="mh-stars-container" style="position:fixed;inset:0;z-index:0;pointer-events:none;"></div>  <div class="galaxy-bg" style="display:none;"> <div class="stars"></div> <div class="stars2"></div> <div class="stars3"></div> </div> <style> /* 鈹€鈹€ Module icon images 鈹€鈹€ */ .module-icon-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* All module icon boxes 鈥?full circle clips white corners of JPG */ .mh-module-icon { overflow: hidden; border-radius: 50% !important; } /* Navbar app logo 鈥?also circle */ .mh-logo-icon { overflow: hidden; border-radius: 50% !important; } .mh-logo-icon .module-icon-img { object-fit: cover; } </style>  <nav class="mh-navbar" id="app-header">  <div class="mh-navbar-left" id="btn-logo-home" style="cursor:pointer;"> <div class="mh-logo-icon"><img src="assets/icons/app-logo.jpg" alt="Mystical Hub" class="module-icon-img"></div> <span class="mh-logo-text">Mystical Hub</span> <span class="mh-premium-badge">PREMIUM</span> </div>  <ul class="mh-nav-links" id="nav-center-links"> <li><a href="#" onclick="return false;">Th岷 s峄?h峄峜</a></li> <li><a href="#" onclick="return false;">Tarot</a></li> <li><a href="#" onclick="return false;">T峄?vi</a></li> <li><a href="#" onclick="return false;" id="nav-pricing-link">Pricing</a></li> </ul>   <div class="mh-navbar-right" id="nav-logged-out" style="display:flex;"> <button class="mh-btn-login" id="btn-nav-login">膼膬ng nh岷璸</button> <button class="mh-btn-cta" id="btn-mock-login-nav">鉁?D霉ng th峄?mi峄卬 ph铆</button> </div>  <div class="mh-user-nav" id="nav-logged-in" style="display:none;"> <img id="nav-user-avatar" src="" alt="Avatar" class="mh-nav-avatar" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><circle cx=%2220%22 cy=%2220%22 r=%2220%22 fill=%22%237c3aed%22/><text x=%2250%25%22 y=%2255%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-size=%2218%22 fill=%22white%22>U</text></svg>'"> <span class="mh-nav-username" id="nav-user-name"></span> <a href="#" id="btn-nav-home" class="mh-btn-nav-secondary">馃彔 Trang ch峄?/a> <a href="#" id="btn-logout" class="mh-btn-nav-secondary">膼膬ng xu岷</a> </div> </nav> <main class="main-content" style="padding-top:0;">  <section id="view-login" class="view-section active">  <div class="mh-hero"> <div class="mh-hero-badge"><span class="mh-pulse-dot"></span>Thu岷璽 to谩n chu岷﹏ x谩c 鈥?Tri th峄ヽ chuy锚n gia 鈥?Lu岷璶 gi岷 膽峄檆 b岷</div> <h1 class="mh-hero-title"> Kh谩m Ph谩 <span class="gradient-word">B岷 Th芒n</span> </h1> <p class="mh-hero-subtitle-italic">qua l膬ng k铆nh v农 tr峄?/p> <p class="mh-hero-desc"> H峄 nh岷 6 h峄?th峄憂g tinh hoa: Th岷 s峄? Tarot, T峄?vi, Ch貌m sao, Ma tr岷璶 & B谩t t峄?<br> V岷璶 h脿nh b岷眓g Engine & Kho tri th峄ヽ膽峄檆 quy峄乶鈥?N贸i kh么ng v峄沬 AI v脿 nh峄痭g c么ng th峄ヽ膽岷 tr脿. </p> <div class="mh-hero-actions"> <button class="mh-btn-primary" id="btn-mock-login">鉁?B岷痶膽岷 mi峄卬 ph铆</button> <button class="mh-btn-outline" id="btn-google-login"> <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" width="16" height="16" alt="G" style="vertical-align:middle;"> 膼膬ng nh岷璸 Google </button> </div> <div class="mh-hero-trust"> <span>Mi峄卬 ph铆 3 l瓢峄/ng脿y</span> <span>B岷 m岷璽 th么ng tin c谩 nh芒n</span> <span>K岷縯 qu岷?chuy锚n s芒u</span> </div> </div>  <div class="mh-modules-section"> <div class="mh-section-eyebrow">6 MODULE</div> <h2 class="mh-section-title">H峄?th峄憂g tra c峄﹗ <span class="accent">chuy锚n s芒u</span></h2> <div class="mh-module-grid">  <div class="mh-module-card" id="module-numerology-hero"> <div class="mh-module-card-top"> <div class="mh-module-icon numerology"><img src="assets/icons/numerology.png" alt="Th岷 s峄?h峄峜" class="module-icon-img"></div> <span class="mh-module-status live">LIVE</span> </div> <div class="mh-module-name">Th岷 s峄?h峄峜</div> <div class="mh-module-desc">Ph芒n t铆ch 30 ch峄?s峄?t峄?t锚n & ng脿y sinh. S峄?m峄噉h, Linh h峄搉, V岷璶 s峄? Chu k峄?.. </div> <div class="mh-module-progress"> <div class="mh-module-progress-fill" style="width:100%"></div> </div> </div>  <div class="mh-module-card locked"> <div class="mh-module-card-top"> <div class="mh-module-icon tarot"><img src="assets/icons/tarot.png" alt="Tarot" class="module-icon-img"> </div> <span class="mh-module-status q2">Q2</span> </div> <div class="mh-module-name">Tarot</div> <div class="mh-module-desc">R煤t b脿i & lu岷璶 gi岷 78 l谩, spread 1/3/10 l谩, xu么i & ng瓢峄.</div> <div class="mh-module-progress"> <div class="mh-module-progress-fill" style="width:22%; background: linear-gradient(90deg, #fbbf24, #f97316);"></div> </div> </div>  <div class="mh-module-card locked"> <div class="mh-module-card-top"> <div class="mh-module-icon tuvi"><img src="assets/icons/tuvi.png" alt="T峄?vi" class="module-icon-img"> </div> <span class="mh-module-status q2">Q2</span> </div> <div class="mh-module-name">T峄?vi</div> <div class="mh-module-desc">L岷璸 l谩 s峄? 14 ch铆nh tinh, 12 cung, ph芒n t铆ch t峄?h峄 sao.</div> <div class="mh-module-progress"> <div class="mh-module-progress-fill" style="width:15%; background: linear-gradient(90deg, #a855f7, #c084fc);"></div> </div> </div>  <div class="mh-module-card locked"> <div class="mh-module-card-top"> <div class="mh-module-icon matrix"><img src="assets/icons/matrix.png" alt="Ma tr岷璶膽峄媙h m峄噉h" class="module-icon-img"></div> <span class="mh-module-status q3">Q3</span> </div> <div class="mh-module-name">Ma tr岷璶膽峄媙h m峄噉h</div> <div class="mh-module-desc">22 膽i峄僲 n膬ng l瓢峄g, v岷?ma tr岷璶 h矛nh thoi, lu岷璶 gi岷 Arcana.</div> <div class="mh-module-progress"> <div class="mh-module-progress-fill" style="width:5%; background: linear-gradient(90deg, #06b6d4, #0ea5e9);"></div> </div> </div>  <div class="mh-module-card locked"> <div class="mh-module-card-top"> <div class="mh-module-icon astro"><img src="assets/icons/astro.png" alt="Ch貌m sao" class="module-icon-img"></div> <span class="mh-module-status q3">Q3</span> </div> <div class="mh-module-name">Ch貌m sao</div> <div class="mh-module-desc">Birth chart SVG, 12 cung, 10 h脿nh tinh, ph芒n t铆ch aspect.</div> <div class="mh-module-progress"> <div class="mh-module-progress-fill" style="width:5%; background: linear-gradient(90deg, #6366f1, #818cf8);"></div> </div> </div>  <div class="mh-module-card locked"> <div class="mh-module-card-top"> <div class="mh-module-icon batu"><img src="assets/icons/batu.png" alt="B谩t t峄? class="module-icon-img"> </div> <span class="mh-module-status future">2027</span> </div> <div class="mh-module-name">B谩t t峄?/div> <div class="mh-module-desc">T峄?tr峄? Can Chi, Ng农 h脿nh, Th岷 S谩t t峄?gi峄?sinh.</div> <div class="mh-module-progress"> <div class="mh-module-progress-fill" style="width:1%;"></div> </div> </div> </div> </div>  <div class="mh-pricing-section" id="section-pricing"> <h2 class="mh-section-title">Ch峄峮 <span class="accent" style="color:#a78bfa;">g贸i ph霉 h峄</span></h2> <div class="mh-pricing-grid">  <div class="mh-plan-card"> <div class="mh-plan-tier">Kh谩m ph谩</div> <div class="mh-plan-price">0膽</div> <div class="mh-plan-period">M茫i m茫i mi峄卬 ph铆</div> <ul class="mh-plan-features"> <li>3 tra c峄﹗ / ng脿y</li> <li>K岷縯 qu岷?t贸m t岷痶</li> <li class="off">Ph芒n t铆ch chuy锚n s芒u</li> <li class="off">L瓢u l峄媍h s峄?/li> </ul> <button class="mh-btn-plan outline" id="btn-free-plan">B岷痶膽岷 mi峄卬 ph铆</button> </div>  <div class="mh-plan-card popular"> <div class="mh-popular-badge">Ph峄?bi岷縩 nh岷</div> <div class="mh-plan-tier">Chuy锚n s芒u</div> <div class="mh-plan-price popular-price">99K</div> <div class="mh-plan-period">m峄梚 th谩ng</div> <ul class="mh-plan-features"> <li>Kh么ng gi峄沬 h岷 tra c峄﹗</li> <li>To脿n b峄?30 ch峄?s峄?/li> <li>Xu岷 PDF</li> <li>L瓢u l峄媍h s峄?3 th谩ng</li> </ul> <button class="mh-btn-plan filled" id="btn-pro-plan">Ch峄峮 Pro</button> </div>  <div class="mh-plan-card"> <div class="mh-plan-tier">VIP</div> <div class="mh-plan-price vip-price">299K</div> <div class="mh-plan-period">m峄梚 th谩ng</div> <ul class="mh-plan-features"> <li>T岷 c岷?t铆nh n膬ng Pro</li> <li>L瓢u l峄媍h s峄?1 n膬m</li> <li>So s谩nh h峄 c谩ch</li> <li>漂u ti锚n support</li> </ul> <button class="mh-btn-plan outline" id="btn-vip-plan">Ch峄峮 VIP</button> </div> </div> </div> </section>  <section id="view-dashboard" class="view-section hidden"> <div class="mh-modules-section" style="padding-top:7rem;"> <div class="mh-section-eyebrow">6 MODULE</div> <h2 class="mh-section-title">H峄?th峄憂g tra c峄﹗ <span class="accent">chuy锚n s芒u</span></h2> <div class="mh-module-grid">  <div class="mh-module-card" id="module-numerology"> <div class="mh-module-card-top"> <div class="mh-module-icon numerology"><img src="assets/icons/numerology.png" alt="Th岷 s峄?h峄峜" class="module-icon-img"></div> <span class="mh-module-status live">LIVE</span> </div> <div class="mh-module-name">Th岷 s峄?h峄峜</div> <div class="mh-module-desc">Ph芒n t铆ch 30 ch峄?s峄?t峄?t锚n & ng脿y sinh. S峄?m峄噉h, Linh h峄搉, V岷璶 s峄? Chu k峄?.. </div> <div class="mh-module-progress"> <div class="mh-module-progress-fill" style="width:100%"></div> </div> </div>  <div class="mh-module-card locked"> <div class="mh-module-card-top"> <div class="mh-module-icon tarot"><img src="assets/icons/tarot.png" alt="Tarot" class="module-icon-img"> </div><span class="mh-module-status q2">Q2</span> </div> <div class="mh-module-name">Tarot</div> <div class="mh-module-desc">R煤t b脿i & lu岷璶 gi岷 78 l谩, spread 1/3/10 l谩, xu么i & ng瓢峄.</div> <div class="mh-module-progress"> <div class="mh-module-progress-fill" style="width:22%; background:linear-gradient(90deg,#fbbf24,#f97316);"></div> </div> </div>  <div class="mh-module-card locked"> <div class="mh-module-card-top"> <div class="mh-module-icon tuvi"><img src="assets/icons/tuvi.png" alt="T峄?vi" class="module-icon-img"> </div><span class="mh-module-status q2">Q2</span> </div> <div class="mh-module-name">T峄?vi</div> <div class="mh-module-desc">L岷璸 l谩 s峄? 14 ch铆nh tinh, 12 cung, ph芒n t铆ch t峄?h峄 sao.</div> <div class="mh-module-progress"> <div class="mh-module-progress-fill" style="width:15%; background:linear-gradient(90deg,#a855f7,#c084fc);"> </div> </div> </div>  <div class="mh-module-card locked"> <div class="mh-module-card-top"> <div class="mh-module-icon matrix"><img src="assets/icons/matrix.png" alt="Ma tr岷璶" class="module-icon-img"></div><span class="mh-module-status q3">Q3</span> </div> <div class="mh-module-name">Ma tr岷璶膽峄媙h m峄噉h</div> <div class="mh-module-desc">22 膽i峄僲 n膬ng l瓢峄g, v岷?ma tr岷璶 h矛nh thoi, lu岷璶 gi岷 Arcana.</div> <div class="mh-module-progress"> <div class="mh-module-progress-fill" style="width:5%; background:linear-gradient(90deg,#06b6d4,#0ea5e9);"> </div> </div> </div>  <div class="mh-module-card locked"> <div class="mh-module-card-top"> <div class="mh-module-icon astro"><img src="assets/icons/astro.png" alt="Ch貌m sao" class="module-icon-img"></div><span class="mh-module-status q3">Q3</span> </div> <div class="mh-module-name">Ch貌m sao</div> <div class="mh-module-desc">Birth chart SVG, 12 cung, 10 h脿nh tinh, ph芒n t铆ch aspect.</div> <div class="mh-module-progress"> <div class="mh-module-progress-fill" style="width:5%; background:linear-gradient(90deg,#6366f1,#818cf8);"> </div> </div> </div>  <div class="mh-module-card locked"> <div class="mh-module-card-top"> <div class="mh-module-icon batu"><img src="assets/icons/batu.png" alt="B谩t t峄? class="module-icon-img"> </div><span class="mh-module-status future">2027</span> </div> <div class="mh-module-name">B谩t t峄?/div> <div class="mh-module-desc">T峄?tr峄? Can Chi, Ng农 h脿nh, Th岷 S谩t t峄?gi峄?sinh.</div> <div class="mh-module-progress"> <div class="mh-module-progress-fill" style="width:1%;"></div> </div> </div> </div> </div> </section>  <section id="view-input" class="view-section hidden"> <div class="hero-container"> <div class="hero-image"> <div class="mystic-circle-icon">鈭?/div> </div> <h2 class="gold-text">D峄?膼O脕N CH脥NH X脕C</h2> <p class="hero-subtitle">Th脿nh c么ng, 膽瓢峄漬g 膽峄漣, 膽i峄僲 m岷h y岷縰, ti峄乵 n膬ng s峄?nghi峄噋, c谩c giai 膽o岷 thu岷璶 l峄... </p> <form id="numerology-form" class="home-form"> <div class="form-group"> <label>H峄?v脿 T锚n khai sinh <span class="required">*</span></label> <input type="text" id="fullname" placeholder="Nh岷璸膽岷 膽峄?h峄?v脿 t锚n khai sinh..." required autocomplete="off"> </div> <div class="form-row"> <div class="form-group half"> <label>T锚n th瓢峄漬g d霉ng / Bi峄噒 danh</label> <input type="text" id="nickname" placeholder="T锚n th瓢峄漬g d霉ng (n岷縰 c贸)"> <span class="field-hint">馃挕 D霉ng 膽峄?t铆nh c谩c ch峄?s峄?danh t铆nh ph峄?/span> </div> <div class="form-group half"> <label>Gi峄沬 t铆nh</label> <select id="gender" style="display:none"> <option value="male">Nam</option> <option value="female">N峄?/option> </select> <div class="gender-radio-row"> <label class="gender-pill active" id="gpill-male"> <input type="radio" name="gender-r" value="male" checked onchange="document.getElementById('gender').value='male'; document.getElementById('gpill-male').classList.add('active'); document.getElementById('gpill-female').classList.remove('active');"> 馃懆 Nam </label> <label class="gender-pill" id="gpill-female"> <input type="radio" name="gender-r" value="female" onchange="document.getElementById('gender').value='female'; document.getElementById('gpill-female').classList.add('active'); document.getElementById('gpill-male').classList.remove('active');"> 馃懇 N峄? </label> </div> </div> </div> <div class="form-group"> <label>Ng脿y / Th谩ng / N膬m sinh d瓢啤ng l峄媍h <span class="required">*</span></label> <div class="dob-picker"> <div class="dob-field"> <label class="dob-sublabel">Ng脿y</label> <select id="dob-day" class="dob-desktop-el"> <option value="">-- Ng脿y --</option> </select> <input type="text" inputmode="numeric" pattern="[0-9]*" id="dob-day-m" class="dob-mobile-el" placeholder="VD: 03" maxlength="2"> </div> <div class="dob-field"> <label class="dob-sublabel">Th谩ng</label> <select id="dob-month" class="dob-desktop-el"> <option value="">-- Th谩ng --</option> <option value="1">Th谩ng 1</option> <option value="2">Th谩ng 2</option> <option value="3">Th谩ng 3</option> <option value="4">Th谩ng 4</option> <option value="5">Th谩ng 5</option> <option value="6">Th谩ng 6</option> <option value="7">Th谩ng 7</option> <option value="8">Th谩ng 8</option> <option value="9">Th谩ng 9</option> <option value="10">Th谩ng 10</option> <option value="11">Th谩ng 11</option> <option value="12">Th谩ng 12</option> </select> <input type="text" inputmode="numeric" pattern="[0-9]*" id="dob-month-m" class="dob-mobile-el" placeholder="VD: 09" maxlength="2"> </div> <div class="dob-field dob-year"> <label class="dob-sublabel">N膬m</label> <input type="number" id="dob-year" placeholder="VD: 1996" min="1924" max="2025" required> </div> </div> <p id="dob-hint" class="dob-hint" style="display:none;"></p> </div> <button type="submit" class="btn-submit-main" id="btn-submit"> 馃敭 TRA C峄║ TH岷 S峄?H峄孋 NGAY </button> <div class="disclaimer"> B岷 b谩o c谩o mi峄卬 ph铆 cung c岷 c谩c ch峄?s峄?quan tr峄峮g v峄?th岷 s峄?h峄峜.<br> N芒ng c岷 t脿i kho岷 膽峄?xem tr峄峮 b峄?30 ch峄?s峄?ph芒n t铆ch chuy锚n s芒u! </div> </form> </div> </section>  <section id="view-loading" class="view-section hidden"> <div class="loader-container"> <div class="spinner"></div> <p>膼ang k岷縯 n峄慽 n膬ng l瓢峄g v农 tr峄?..</p> </div> </section>  <section id="view-summary" class="view-section hidden">  <div class="mh-results-header"> <h2>K岷縯 qu岷?ph芒n t铆ch <span class="accent">chuy锚n s芒u</span></h2> </div> <div class="summary-container"> <div class="sum-header-bar"> <div class="sum-header-name">鉁?<span id="sum-name"></span></div> <div class="sum-header-dob">Ng脿y sinh: <span id="sum-dob"></span></div> </div> <div id="sum-content"></div> <div style="text-align:center; margin: 2.5rem 0 1rem;"> <button id="btn-view-details" class="btn-primary large"> 馃搫 Xem chi ti岷縯 lu岷璶 gi岷 (30 ch峄?s峄? </button> </div> </div> </section>  <section id="view-details" class="view-section hidden">  <div class="mh-results-header"> <h2>K岷縯 qu岷?ph芒n t铆ch <span class="accent">chuy锚n s芒u</span></h2> </div> <div class="report-paper"> <h2 class="report-main-title">B脕O C脕O TH岷 S峄?H峄孋</h2> <div class="toc-jump" style="text-align:center; margin-bottom:2rem; font-size:0.9rem; color:#d8b4fe; font-style:italic;"> *Cu峄檔 xu峄憂g 膽峄?膽峄峜 to脿n b峄?30 ch峄?s峄?ph芒n t铆ch* </div> <div id="dynamic-report-content"></div> <div class="report-footer"> <button id="btn-reset" class="btn-secondary">鉄?Tra c峄﹗ ng瓢峄漣 kh谩c</button> </div> </div> </section> </main>  <canvas id="mh-particles"></canvas> <script src="engine.browser.js"></script> <script src="charts.js"></script> <script src="narrative_templates.js"></script> <script src="app.min.js"></script>  <script> (function () { /* 1. Scroll-reveal via IntersectionObserver */ var revealTargets = [ { sel: '.mh-module-card', delay: 80 }, { sel: '.mh-plan-card', delay: 100 }, { sel: '.mh-section-eyebrow', delay: 0 }, { sel: '.mh-section-title', delay: 80 }, ]; var io = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (entry.isIntersecting) { var el = entry.target; var d = parseFloat(el.dataset.revealDelay || 0); setTimeout(function () { el.classList.add('visible'); }, d); io.unobserve(el); } }); }, { threshold: 0.12 }); function initReveal() { revealTargets.forEach(function (cfg) { document.querySelectorAll(cfg.sel).forEach(function (el, i) { el.dataset.revealDelay = i * cfg.delay; io.observe(el); }); }); } initReveal(); /* Re-run when views change (SPA navigation) */ var _origSwitch = window.switchView; if (typeof _origSwitch === 'function') { window.switchView = function (id) { _origSwitch(id); setTimeout(initReveal, 120); }; } /* 2. Floating particles */ var canvas = document.getElementById('mh-particles'); if (canvas) { var ctx = canvas.getContext('2d'); var particles = []; var W, H; function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; } window.addEventListener('resize', resize); resize(); for (var i = 0; i < 55; i++) { particles.push({ x: Math.random() * W, y: Math.random() * H, r: Math.random() * 1.4 + 0.4, vx: (Math.random() - 0.5) * 0.25, vy: -Math.random() * 0.35 - 0.1, alpha: Math.random() * 0.5 + 0.15, color: Math.random() > 0.5 ? '168,85,247' : '96,165,250' }); } function drawParticles() { ctx.clearRect(0, 0, W, H); particles.forEach(function (p) { ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fillStyle = 'rgba(' + p.color + ',' + p.alpha + ')'; ctx.fill(); p.x += p.vx; p.y += p.vy; /* Twinkle */ p.alpha += (Math.random() - 0.5) * 0.015; p.alpha = Math.min(0.75, Math.max(0.05, p.alpha)); /* Reset if out of view */ if (p.y < -5) { p.y = H + 5; p.x = Math.random() * W; } if (p.x < -5) p.x = W + 5; if (p.x > W + 5) p.x = -5; }); requestAnimationFrame(drawParticles); } drawParticles(); } /* 3. Mouse parallax tilt on module cards */ document.addEventListener('mousemove', function (e) { var cx = window.innerWidth / 2; var cy = window.innerHeight / 2; var dx = (e.clientX - cx) / cx; var dy = (e.clientY - cy) / cy; document.querySelectorAll('.mh-module-card.visible:not(.locked)').forEach(function (card) { card.style.transform = 'translateY(0) rotateX(' + (-dy * 3) + 'deg) rotateY(' + (dx * 3) + 'deg)'; }); }); document.addEventListener('mouseleave', function () { document.querySelectorAll('.mh-module-card').forEach(function (card) { card.style.transform = ''; }); }); /* 4. Hero title typing effect (run on load) */ var heroTitle = document.querySelector('.mh-hero-title'); if (heroTitle) { heroTitle.classList.add('typing-cursor'); setTimeout(function () { heroTitle.classList.remove('typing-cursor'); }, 3200); } /* 5. Ripple effect on buttons */ document.addEventListener('click', function (e) { var btn = e.target.closest('.mh-btn-primary, .mh-btn-cta, .mh-btn-plan.filled'); if (!btn) return; var ripple = document.createElement('span'); var rect = btn.getBoundingClientRect(); var size = Math.max(rect.width, rect.height); ripple.style.cssText = [ 'position:absolute', 'border-radius:50%', 'width:' + size + 'px', 'height:' + size + 'px', 'left:' + (e.clientX - rect.left - size / 2) + 'px', 'top:' + (e.clientY - rect.top - size / 2) + 'px', 'background:rgba(255,255,255,0.22)', 'transform:scale(0)', 'pointer-events:none', 'transition:transform 0.55s ease, opacity 0.55s ease', 'opacity:1' ].join(';'); btn.style.position = 'relative'; btn.style.overflow = 'hidden'; btn.appendChild(ripple); requestAnimationFrame(function () { ripple.style.transform = 'scale(2.5)'; ripple.style.opacity = '0'; }); setTimeout(function () { ripple.remove(); }, 600); }); }()); </script>  <script> document.addEventListener('DOMContentLoaded', function () { // 鈹€鈹€ Logo "Mystical Hub" 鈫?v峄?trang ch峄?鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ var logoHome = document.getElementById('btn-logo-home'); if (logoHome) { logoHome.addEventListener('click', function () { if (typeof CURRENT_USER !== 'undefined' && CURRENT_USER) { if (typeof switchView === 'function') switchView('view-dashboard'); } else { if (typeof switchView === 'function') switchView('view-login'); window.scrollTo({ top: 0, behavior: 'smooth' }); } }); } // Secondary "D霉ng th峄?mi峄卬 ph铆" button in navbar var navCta = document.getElementById('btn-mock-login-nav'); if (navCta) { navCta.addEventListener('click', function () { var mainBtn = document.getElementById('btn-mock-login'); if (mainBtn) mainBtn.click(); }); } // Hero module card click 鈫?same as dashboard module click var heroModule = document.getElementById('module-numerology-hero'); if (heroModule) { heroModule.addEventListener('click', function () { var mockBtn = document.getElementById('btn-mock-login'); if (mockBtn) mockBtn.click(); }); } // Pricing plan free button var freePlan = document.getElementById('btn-free-plan'); if (freePlan) { freePlan.addEventListener('click', function () { var mockBtn = document.getElementById('btn-mock-login'); if (mockBtn) mockBtn.click(); }); } // Pricing scroll var pricingLink = document.getElementById('nav-pricing-link'); if (pricingLink) { pricingLink.addEventListener('click', function (e) { e.preventDefault(); var s = document.getElementById('section-pricing'); if (s) s.scrollIntoView({ behavior: 'smooth' }); }); } // 鈹€鈹€ FIX: Nav "Th岷 s峄?h峄峜" link 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ var navLinks = document.querySelectorAll('.mh-nav-links a'); navLinks.forEach(function (link) { var text = link.textContent.trim(); if (text === 'Th岷 s峄?h峄峜') { link.addEventListener('click', function (e) { e.preventDefault(); // N岷縰膽茫 login 鈫?v脿o view-input; ch瓢a login 鈫?mock login lu么n if (typeof CURRENT_USER !== 'undefined' && CURRENT_USER) { if (typeof switchView === 'function') switchView('view-input'); } else { var mockBtn = document.getElementById('btn-mock-login'); if (mockBtn) mockBtn.click(); } }); } else if (text === 'Tarot' || text === 'T峄?vi') { link.addEventListener('click', function (e) { e.preventDefault(); showComingSoonToast(text); }); } }); // 鈹€鈹€ FIX: 膼膬ng nh岷璸 button in navbar 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ var navLoginBtn = document.getElementById('btn-nav-login'); if (navLoginBtn) { navLoginBtn.addEventListener('click', function () { if (typeof switchView === 'function') switchView('view-login'); }); } // 鈹€鈹€ Helper: Coming Soon toast 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ function showComingSoonToast(moduleName) { var existing = document.getElementById('coming-soon-toast'); if (existing) existing.remove(); var toast = document.createElement('div'); toast.id = 'coming-soon-toast'; toast.style.cssText = [ 'position:fixed', 'bottom:2rem', 'left:50%', 'transform:translateX(-50%)', 'background:linear-gradient(135deg,#7c3aed,#3b82f6)', 'color:#fff', 'padding:0.9rem 2rem', 'border-radius:2rem', 'font-size:0.95rem', 'font-weight:600', 'z-index:9999', 'box-shadow:0 8px 32px rgba(124,58,237,0.4)', 'animation:fadeInUp 0.3s ease' ].join(';'); toast.textContent = '鉁?' + moduleName + ' 鈥?S岷痯 ra m岷痶! H茫y theo d玫i.'; document.body.appendChild(toast); setTimeout(function () { toast.style.opacity = '0'; toast.style.transition = 'opacity 0.4s'; setTimeout(function () { toast.remove(); }, 400); }, 3000); } }); </script>  <style> /* 鈹€鈹€ Aurora nebula blobs 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-aurora { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; } .mh-aurora-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.13; animation: blobDrift var(--dur, 18s) ease-in-out infinite alternate; } .mh-aurora-blob:nth-child(1) { width: 520px; height: 420px; background: radial-gradient(circle, #7c3aed, transparent 70%); top: -10%; left: -8%; --dur: 20s; } .mh-aurora-blob:nth-child(2) { width: 400px; height: 480px; background: radial-gradient(circle, #2563eb, transparent 70%); top: 30%; right: -10%; --dur: 25s; animation-delay: -8s; } .mh-aurora-blob:nth-child(3) { width: 350px; height: 350px; background: radial-gradient(circle, #db2777, transparent 70%); bottom: 5%; left: 35%; --dur: 22s; animation-delay: -4s; } @keyframes blobDrift { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.1); } 66% { transform: translate(-20px, 25px) scale(0.95); } 100% { transform: translate(30px, 15px) scale(1.05); } } /* 鈹€鈹€ Cursor ambient glow 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ #mh-cursor-light { position: fixed; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(168, 85, 247, 0.09) 0%, transparent 70%); pointer-events: none; z-index: 1; transform: translate(-50%, -50%); transition: opacity 0.3s; will-change: transform; } /* 鈹€鈹€ Neon border trace on card hover 鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-module-card::before { content: ''; position: absolute; inset: 0; border-radius: 16px; padding: 1.5px; background: linear-gradient(135deg, #7c3aed, #60a5fa, #a855f7, #7c3aed); background-size: 300% 300%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.35s ease; animation: gradientShift 3s linear infinite; } .mh-module-card:not(.locked):hover::before { opacity: 1; } /* 鈹€鈹€ Shooting stars canvas 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ #mh-shooting-stars { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* 鈹€鈹€ Navbar scroll morph 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-navbar.scrolled { background: rgba(8, 6, 20, 0.95); box-shadow: 0 1px 30px rgba(124, 58, 237, 0.18); border-bottom-color: rgba(168, 85, 247, 0.2); } /* 鈹€鈹€ Magnetic button base 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-magnetic { display: inline-flex; transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); will-change: transform; } /* 鈹€鈹€ Parallax hero layers 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-hero { perspective: 600px; } .mh-parallax-slow { will-change: transform; } .mh-parallax-fast { will-change: transform; } /* 鈹€鈹€ Constellation orbs 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-orb { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; animation: orbFloat var(--orbDur, 12s) ease-in-out infinite; } @keyframes orbFloat { 0%, 100% { transform: translateY(0) translateX(0); } 25% { transform: translateY(-18px) translateX(8px); } 50% { transform: translateY(-8px) translateX(-10px); } 75% { transform: translateY(-24px) translateX(4px); } } /* 鈹€鈹€ Number counter 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-counter-wrap { text-align: center; padding: 3rem 1.5rem; max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .mh-counter-item { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .mh-counter-item.visible { opacity: 1; transform: translateY(0); } .mh-counter-num { font-size: 2.6rem; font-weight: 800; background: linear-gradient(135deg, #c084fc, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .mh-counter-label { font-size: 0.82rem; color: rgba(255, 255, 255, 0.45); margin-top: 0.3rem; } /* 鈹€鈹€ Hover sparkle 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-sparkle { position: absolute; pointer-events: none; z-index: 999; animation: sparkleFade 0.7s ease forwards; } @keyframes sparkleFade { 0% { transform: scale(0) rotate(0deg); opacity: 1; } 60% { transform: scale(1.3) rotate(90deg); opacity: 0.8; } 100% { transform: scale(0.4) rotate(180deg) translateY(-20px); opacity: 0; } } /* 鈹€鈹€ Scan line effect on hero 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-scanline { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.35), transparent); animation: scanDown 6s linear infinite; pointer-events: none; z-index: 2; } @keyframes scanDown { 0% { top: -5px; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* 鈹€鈹€ Logo icon pulse 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-logo-icon { animation: logoPulse 3s ease-in-out infinite; } @keyframes logoPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); } 50% { transform: scale(1.08); box-shadow: 0 0 14px 4px rgba(168, 85, 247, 0.45); } } /* 鈹€鈹€ Text letter reveal 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .reveal-letter { display: inline-block; opacity: 0; transform: translateY(100%); animation: letterReveal 0.5s ease forwards; } @keyframes letterReveal { to { opacity: 1; transform: translateY(0); } } /* 鈹€鈹€ Hero glow orb behind title 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mh-hero-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 300px; border-radius: 50%; background: radial-gradient(ellipse, rgba(124, 58, 237, 0.15) 0%, transparent 70%); pointer-events: none; z-index: 0; animation: glowPulse 5s ease-in-out infinite; } @keyframes glowPulse { 0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } } </style> <script> (function () { /* 鈹€鈹€ 1. Aurora blobs DOM 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ var auroraDiv = document.createElement('div'); auroraDiv.className = 'mh-aurora'; auroraDiv.innerHTML = '<div class="mh-aurora-blob"></div><div class="mh-aurora-blob"></div><div class="mh-aurora-blob"></div>'; document.body.insertBefore(auroraDiv, document.body.firstChild); /* 鈹€鈹€ 2. Cursor ambient light 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ var cursorLight = document.createElement('div'); cursorLight.id = 'mh-cursor-light'; document.body.appendChild(cursorLight); document.addEventListener('mousemove', function (e) { cursorLight.style.left = e.clientX + 'px'; cursorLight.style.top = e.clientY + 'px'; }); /* 鈹€鈹€ 3. Shooting stars canvas 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ var ssCanvas = document.createElement('canvas'); ssCanvas.id = 'mh-shooting-stars'; document.body.insertBefore(ssCanvas, document.body.firstChild); var ssCtx = ssCanvas.getContext('2d'); var stars = []; function resizeSS() { ssCanvas.width = window.innerWidth; ssCanvas.height = window.innerHeight; } window.addEventListener('resize', resizeSS); resizeSS(); function spawnStar() { var startX = Math.random() * ssCanvas.width * 0.7; var startY = Math.random() * ssCanvas.height * 0.4; stars.push({ x: startX, y: startY, len: Math.random() * 160 + 60, speed: Math.random() * 6 + 4, angle: Math.PI / 4 + (Math.random() - 0.5) * 0.3, alpha: 1, width: Math.random() * 1.5 + 0.5 }); } setInterval(spawnStar, 2800); spawnStar(); function drawSS() { ssCtx.clearRect(0, 0, ssCanvas.width, ssCanvas.height); stars = stars.filter(function (s) { s.x += Math.cos(s.angle) * s.speed; s.y += Math.sin(s.angle) * s.speed; s.alpha -= 0.018; if (s.alpha <= 0) return false; var tailX = s.x - Math.cos(s.angle) * s.len; var tailY = s.y - Math.sin(s.angle) * s.len; var grad = ssCtx.createLinearGradient(tailX, tailY, s.x, s.y); grad.addColorStop(0, 'rgba(255,255,255,0)'); grad.addColorStop(1, 'rgba(200,170,255,' + s.alpha + ')'); ssCtx.beginPath(); ssCtx.moveTo(tailX, tailY); ssCtx.lineTo(s.x, s.y); ssCtx.strokeStyle = grad; ssCtx.lineWidth = s.width; ssCtx.stroke(); return true; }); requestAnimationFrame(drawSS); } drawSS(); /* 鈹€鈹€ 4. Navbar scroll morph 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ var navbar = document.getElementById('app-header'); window.addEventListener('scroll', function () { if (!navbar) return; if (window.scrollY > 40) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }, { passive: true }); /* 鈹€鈹€ 5. Parallax on hero scroll 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ var heroBadge = document.querySelector('.mh-hero-badge'); var heroTitle = document.querySelector('.mh-hero-title'); var heroSubtitle = document.querySelector('.mh-hero-subtitle-italic'); window.addEventListener('scroll', function () { var y = window.scrollY; if (heroBadge) heroBadge.style.transform = 'translateY(' + (y * 0.08) + 'px)'; if (heroTitle) heroTitle.style.transform = 'translateY(' + (y * 0.12) + 'px)'; if (heroSubtitle) heroSubtitle.style.transform = 'translateY(' + (y * 0.1) + 'px)'; }, { passive: true }); /* 鈹€鈹€ 6. Magnetic effect on CTA buttons 鈹€鈹€鈹€鈹€鈹€ */ function initMagnetic() { document.querySelectorAll('.mh-btn-primary, .mh-btn-cta').forEach(function (btn) { if (btn.dataset.magnetic) return; btn.dataset.magnetic = '1'; btn.addEventListener('mousemove', function (e) { var r = btn.getBoundingClientRect(); var dx = e.clientX - (r.left + r.width / 2); var dy = e.clientY - (r.top + r.height / 2); btn.style.transform = 'translate(' + (dx * 0.2) + 'px, ' + (dy * 0.2) + 'px) scale(1.04)'; }); btn.addEventListener('mouseleave', function () { btn.style.transform = ''; }); }); } initMagnetic(); document.addEventListener('switchViewDone', initMagnetic); /* 鈹€鈹€ 7. Sparkle on module card click 鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ document.querySelectorAll('.mh-module-card').forEach(function (card) { card.addEventListener('click', function (e) { for (var i = 0; i < 7; i++) { var spark = document.createElement('div'); spark.className = 'mh-sparkle'; var symbols = ['鉁?, '鉁?, '鈰?, '路', '鈽?]; spark.textContent = symbols[Math.floor(Math.random() * symbols.length)]; spark.style.cssText = [ 'left:' + e.clientX + 'px', 'top:' + e.clientY + 'px', 'font-size:' + (Math.random() * 14 + 8) + 'px', 'color:hsl(' + (Math.random() * 60 + 250) + ',90%,80%)', 'animation-delay:' + (i * 60) + 'ms', 'animation-duration:' + (Math.random() * 400 + 500) + 'ms' ].join(';'); document.body.appendChild(spark); setTimeout(function () { spark.remove(); }, 900); } }); }); /* 鈹€鈹€ 8. Constellation floating orbs 鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ var orbData = [ { size: 6, top: '18%', left: '8%', dur: 11, color: 'rgba(168,85,247,0.55)', delay: 0 }, { size: 4, top: '65%', left: '5%', dur: 14, color: 'rgba(96,165,250,0.5)', delay: -5 }, { size: 8, top: '25%', right: '6%', dur: 16, color: 'rgba(251,191,36,0.4)', delay: -3 }, { size: 5, top: '80%', right: '9%', dur: 10, color: 'rgba(168,85,247,0.45)', delay: -7 }, { size: 3, top: '45%', left: '14%', dur: 19, color: 'rgba(96,165,250,0.55)', delay: -2 }, ]; orbData.forEach(function (o) { var orb = document.createElement('div'); orb.className = 'mh-orb'; orb.style.cssText = [ 'width:' + o.size + 'px', 'height:' + o.size + 'px', 'top:' + (o.top || ''), 'left:' + (o.left || ''), 'right:' + (o.right || ''), 'background:' + o.color, '--orbDur:' + o.dur + 's', 'animation-delay:' + o.delay + 's', 'box-shadow:0 0 ' + (o.size * 3) + 'px ' + o.color ].join(';'); document.body.appendChild(orb); }); /* 鈹€鈹€ 9. Animated number counter 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ var statsHTML = '<div class="mh-counter-wrap" id="mh-stats">' + '<div class="mh-counter-item"><div class="mh-counter-num" data-target="50" data-suffix="+">0</div><div class="mh-counter-label">Ch峄?s峄?ph芒n t铆ch</div></div>' + '<div class="mh-counter-item" style="transition-delay:0.12s"><div class="mh-counter-num" data-target="1000000" data-suffix="+">0</div><div class="mh-counter-label">T峄?h峄 lu岷璶 gi岷</div></div>' + '<div class="mh-counter-item" style="transition-delay:0.24s"><div class="mh-counter-num" data-target="6" data-suffix="">0</div><div class="mh-counter-label">L膬ng k铆nh v农 tr峄?/div></div>' + '</div>'; var pricingSection = document.getElementById('section-pricing'); if (pricingSection) { pricingSection.insertAdjacentHTML('beforebegin', statsHTML); } function animateCounter(el) { var target = parseInt(el.dataset.target); var duration = 1800; var start = performance.now(); function tick(now) { var elapsed = now - start; var progress = Math.min(elapsed / duration, 1); var eased = 1 - Math.pow(1 - progress, 3); var current = Math.round(eased * target); var suffix = el.dataset.suffix !== undefined ? el.dataset.suffix : ''; if (target >= 1000000) { el.textContent = new Intl.NumberFormat('vi-VN').format(current) + suffix; } else if (target >= 1000) { el.textContent = (current / 1000).toFixed(1) + 'K' + suffix; } else { el.textContent = current + suffix; } if (progress < 1) requestAnimationFrame(tick); } requestAnimationFrame(tick); } var statsIO = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (!entry.isIntersecting) return; entry.target.querySelectorAll('.mh-counter-item').forEach(function (item, i) { setTimeout(function () { item.classList.add('visible'); animateCounter(item.querySelector('.mh-counter-num')); }, i * 140); }); statsIO.unobserve(entry.target); }); }, { threshold: 0.3 }); var statsEl = document.getElementById('mh-stats'); if (statsEl) statsIO.observe(statsEl); /* 鈹€鈹€ 10. Scanline on hero 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ var heroSection = document.getElementById('view-login'); if (heroSection) { heroSection.style.position = 'relative'; var scanLine = document.createElement('div'); scanLine.className = 'mh-scanline'; heroSection.appendChild(scanLine); } /* 鈹€鈹€ 11. Hero background glow orb 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ var heroDiv = document.querySelector('.mh-hero'); if (heroDiv) { heroDiv.style.position = 'relative'; var glowOrb = document.createElement('div'); glowOrb.className = 'mh-hero-glow'; heroDiv.insertBefore(glowOrb, heroDiv.firstChild); } /* 鈹€鈹€ 12. Word-by-word reveal on section headings 鈹€鈹€ */ function splitReveal(selector) { document.querySelectorAll(selector).forEach(function (el) { if (el.dataset.split) return; el.dataset.split = '1'; var words = el.textContent.trim().split(/\s+/); el.innerHTML = ''; words.forEach(function (w, i) { var span = document.createElement('span'); span.textContent = w; span.className = 'reveal-letter'; span.style.cssText = 'animation-delay:' + (i * 90) + 'ms; white-space:nowrap; margin-right:0.28em;'; el.appendChild(span); }); }); } var splitIO = new IntersectionObserver(function (entries) { entries.forEach(function (e) { if (e.isIntersecting) { splitReveal('.mh-section-title'); splitIO.unobserve(e.target); } }); }, { threshold: 0.5 }); document.querySelectorAll('.mh-section-title').forEach(function (el) { splitIO.observe(el); }); /* 鈹€鈹€ 13. Click-anywhere comet burst 鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ document.addEventListener('dblclick', function (e) { for (var i = 0; i < 12; i++) { var dot = document.createElement('div'); var angle = (i / 12) * Math.PI * 2; var dist = Math.random() * 80 + 40; dot.style.cssText = [ 'position:fixed', 'width:4px', 'height:4px', 'border-radius:50%', 'left:' + e.clientX + 'px', 'top:' + e.clientY + 'px', 'background:hsl(' + (Math.random() * 60 + 250) + ',95%,75%)', 'pointer-events:none', 'z-index:9999', 'transition:transform 0.7s cubic-bezier(0.23,1,0.32,1), opacity 0.7s ease', 'opacity:1' ].join(';'); document.body.appendChild(dot); requestAnimationFrame(function (d, a, di) { return function () { d.style.transform = 'translate(' + (Math.cos(a) * di) + 'px,' + (Math.sin(a) * di) + 'px) scale(0)'; d.style.opacity = '0'; }; }(dot, angle, dist)); setTimeout(function (d) { return function () { d.remove(); }; }(dot), 750); } }); }()); </script>  <script> (function () { var container = document.getElementById('mh-stars-container'); if (!container) return; for (var i = 0; i < 120; i++) { var star = document.createElement('div'); star.className = 'mh-star'; var x = Math.random() * 100; var y = Math.random() * 100; var dur = (2 + Math.random() * 4).toFixed(1) + 's'; var del = (Math.random() * 4).toFixed(1) + 's'; var op = (Math.random() * 0.5).toFixed(2); star.style.cssText = 'left:' + x + '%;top:' + y + '%;--dur:' + dur + ';--del:' + del + ';opacity:' + op; if (Math.random() > 0.8) { star.style.width = star.style.height = '3px'; } container.appendChild(star); } })(); </script> </body> </html>