/* Theme Name: An Tâm Mệnh Theme URI: https://antammenh.com Author: Trần Minh Hiếu Version: 8.0 License: GPLv2 Text Domain: antammenh */ /* ===== VARIABLES ===== */ :root { --c-950: #0a0a0a; --c-900: #111111; --c-800: #1a1a1a; --c-700: #2a2a2a; --c-600: #3a3a3a; --gold: #d4af37; --gold-light: #f9e596; --gold-dark: #aa8529; --text: #d1d1d6; --text-dim: #9a9aa8; --text-faint: #78788a; --white: #ffffff; --beige: #faf9f6; --green: #22c55e; --red: #ef4444; --blue: #60a5fa; --pink: #f472b6; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-serif: 'Playfair Display', 'Georgia', serif; --shadow-gold: 0 0 20px rgba(212,175,55,0.3); --shadow-neon: 0 0 10px rgba(212,175,55,0.5), 0 0 30px rgba(212,175,55,0.2); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --header-h: 80px; } /* ===== RESET & BASE ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; background: var(--c-950); -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); color: var(--text); line-height: 1.7; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, select, textarea { font-family: inherit; } ul { list-style: none; } ::selection { background: var(--gold); color: var(--c-950); } section { scroll-margin-top: 100px; } /* ===== REDUCED MOTION ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===== SCREEN READER ONLY ===== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .sr-only:focus { position: fixed; top: 16px; left: 16px; z-index: 99999; width: auto; height: auto; padding: 12px 24px; margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--gold); color: var(--c-950); font-weight: 700; font-size: 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-neon); } /* ===== UTILITY ===== */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .container-sm { max-width: 900px; margin: 0 auto; padding: 0 20px; } .text-gold { color: var(--gold); } .text-white { color: var(--white); } .text-dim { color: var(--text-dim); } .font-serif { font-family: var(--font-serif); } .font-light { font-weight: 300; } .font-bold { font-weight: 700; } .text-center { text-align: center; } .uppercase { text-transform: uppercase; } .tracking-wide { letter-spacing: 0.15em; } .relative { position: relative; } /* ===== GRADIENT TEXT ===== */ .text-gradient-gold { background: linear-gradient(to right, var(--gold-light), var(--gold), var(--gold-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 32px; border-radius: var(--radius-md); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; transition: all 0.3s var(--ease-out); white-space: nowrap; min-height: 48px; } .btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--c-950); box-shadow: var(--shadow-neon); } .btn-gold:hover { transform: scale(1.03); box-shadow: var(--shadow-neon), 0 8px 30px rgba(0,0,0,0.3); } .btn-gold:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; } .btn-outline { border: 1.5px solid var(--gold); color: var(--gold); background: transparent; } .btn-outline:hover { background: var(--gold); color: var(--c-950); box-shadow: var(--shadow-gold); } .btn-outline:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; } .btn-sm { padding: 10px 20px; font-size: 11px; min-height: 40px; } /* ===== SVG ICON BASE ===== */ .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .icon-sm { width: 16px; height: 16px; } .icon-lg { width: 24px; height: 24px; } .icon-xl { width: 32px; height: 32px; } /* ===== GLASS PANEL ===== */ .glass { background: rgba(26,26,26,0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.05); } /* ===== REVEAL ANIMATION ===== */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .reveal.active { opacity: 1; transform: translateY(0); } .reveal-d1 { transition-delay: 100ms; } .reveal-d2 { transition-delay: 200ms; } .reveal-d3 { transition-delay: 300ms; } /* ===== PATTERN OVERLAY ===== */ .pattern { background-image: radial-gradient(rgba(212,175,55,0.08) 1px, transparent 1px); background-size: 30px 30px; } /* ===== HEADER ===== */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10,10,10,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(212,175,55,0.08); transition: box-shadow 0.3s; } .header.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.4); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); } .logo { display: flex; align-items: center; gap: 12px; } .logo-icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(212,175,55,0.5); display: flex; align-items: center; justify-content: center; color: var(--gold); box-shadow: var(--shadow-gold); position: relative; } .logo-icon svg { width: 22px; height: 22px; transition: transform 1s var(--ease-out); } .logo:hover .logo-icon svg { transform: rotate(180deg); } .logo-text { line-height: 1.1; } .logo-name { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--white); letter-spacing: 0.15em; text-transform: uppercase; } .logo-tagline { font-size: 9px; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 0.3em; } /* Nav */ .nav { display: flex; align-items: center; gap: 6px; } .nav-link { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); transition: all 0.3s var(--ease-out); position: relative; padding: 8px 14px; border-radius: 10px; display: flex; align-items: center; gap: 7px; } .nav-link svg { width: 14px; height: 14px; opacity: 0.5; transition: all 0.3s; flex-shrink: 0; } .nav-link:hover, .nav-link:focus-visible { color: var(--gold); background: rgba(212,175,55,0.06); } .nav-link:hover svg { opacity: 1; color: var(--gold); } .nav-link.active { color: var(--gold); background: rgba(212,175,55,0.08); } .nav-link.active svg { opacity: 1; color: var(--gold); } .nav-link.active::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--gold); } .nav-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .nav-cta { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 10px; border: 1.5px solid var(--gold); color: var(--gold); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.3s var(--ease-out); margin-left: 8px; white-space: nowrap; } .nav-cta svg { width: 14px; height: 14px; } .nav-cta:hover { background: var(--gold); color: var(--c-950); box-shadow: var(--shadow-gold); transform: translateY(-1px); } .nav-cta:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; } /* Mobile menu */ .mobile-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--gold); font-size: 22px; border-radius: var(--radius-sm); } .mobile-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .mobile-menu { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--c-950); border-top: 1px solid var(--c-700); padding: 24px 20px; } .mobile-menu.open { display: block; } .mobile-menu a { display: block; padding: 14px 12px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text); border-bottom: 1px solid var(--c-800); transition: color 0.2s; } .mobile-menu a:hover, .mobile-menu a:focus-visible { color: var(--gold); } @media (max-width: 1023px) { .nav, .nav-cta { display: none; } .mobile-toggle { display: flex; } } /* ===== HERO ===== */ .hero { padding: 140px 0 100px; background: var(--c-950); position: relative; overflow: hidden; min-height: 85vh; display: flex; align-items: center; } .hero-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 700px; height: 700px; background: radial-gradient(circle, rgba(212,175,55,0.08), transparent 70%); pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; background: var(--c-900); border: 1px solid rgba(212,175,55,0.3); box-shadow: var(--shadow-neon); font-size: 10px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 24px; } .hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .hero h1 { font-family: var(--font-serif); font-size: clamp(38px, 5vw, 58px); font-weight: 700; color: var(--white); line-height: 1.1; margin-bottom: 24px; } .hero h1 em { font-style: italic; } .hero-desc { font-size: 17px; color: var(--text-dim); line-height: 1.8; max-width: 520px; margin-bottom: 24px; font-weight: 300; } .hero-desc strong { color: var(--white); font-weight: 600; } .hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; } .hero-tag { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 100px; background: var(--c-900); border: 1px solid var(--c-700); font-size: 12px; color: var(--text-dim); } .hero-tag svg { color: var(--green); width: 14px; height: 14px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; } .hero-social { display: flex; align-items: center; gap: 12px; } .hero-avatars { display: flex; } .hero-avatars span { width: 32px; height: 32px; border-radius: 50%; background: var(--c-700); border: 2px solid var(--c-950); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-dim); margin-right: -8px; } .hero-avatars span:last-child { background: rgba(212,175,55,0.15); color: var(--gold); font-weight: 700; margin-right: 0; } .hero-social p { font-size: 12px; color: var(--text-faint); } .hero-social strong { color: var(--white); font-weight: 600; } /* Hero image */ .hero-visual { position: relative; } .hero-img-wrap { border-radius: var(--radius-2xl); background: var(--c-900); padding: 12px; border: 1px solid rgba(212,175,55,0.15); box-shadow: 0 30px 60px rgba(0,0,0,0.4); transform: rotate(-3deg); transition: transform 0.8s var(--ease-out); } .hero-img-wrap:hover { transform: rotate(0deg); box-shadow: var(--shadow-neon), 0 30px 60px rgba(0,0,0,0.4); } .hero-img-inner { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/3; position: relative; } .hero-img-inner img { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; mix-blend-mode: luminosity; transition: all 0.8s; } .hero-img-wrap:hover .hero-img-inner img { opacity: 0.65; transform: scale(1.05); } .hero-float { position: absolute; padding: 14px 16px; border-radius: var(--radius-lg); background: rgba(10,10,10,0.88); backdrop-filter: blur(12px); border: 1px solid rgba(212,175,55,0.25); display: flex; align-items: center; gap: 12px; animation: floatUp 3s ease-in-out infinite; } @keyframes floatUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .hero-float-tl { top: 24px; left: 24px; } .hero-float-br { bottom: 24px; right: 24px; animation-delay: 1.5s; } .hero-float .hf-icon { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; color: var(--gold); } .hero-float .hf-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-dim); } .hero-float .hf-value { font-family: var(--font-serif); font-weight: 700; font-size: 16px; color: var(--white); } @media (max-width: 1023px) { .hero { padding: 120px 0 60px; min-height: auto; } .hero-grid { grid-template-columns: 1fr; } .hero-visual { display: none; } } @media (max-width: 640px) { .hero-ctas { flex-direction: column; } .hero-ctas .btn { width: 100%; } } /* ===== SECTION COMMON ===== */ .section { padding: 80px 0; } .section-alt { background: var(--c-900); } .section-border { border-top: 1px solid var(--c-700); } .section-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 100px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 20px; } .section-badge-dark { background: var(--c-950); border: 1px solid var(--c-700); color: var(--text-dim); } .section-badge-gold { background: var(--c-900); border: 1px solid rgba(212,175,55,0.25); color: var(--gold); } .section-title { font-family: var(--font-serif); font-size: clamp(30px, 4vw, 48px); font-weight: 700; color: var(--white); line-height: 1.15; margin-bottom: 16px; } .section-title em { font-style: italic; color: var(--gold); font-weight: 400; } .section-desc { font-size: 17px; color: var(--text-dim); max-width: 620px; margin: 0 auto; font-weight: 300; line-height: 1.7; } /* ===== NỖI ĐAU SECTION ===== */ .pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .pain-card { padding: 40px; border-radius: var(--radius-xl); transition: all 0.4s var(--ease-out); position: relative; overflow: hidden; } .pain-card .glow { position: absolute; top: 0; right: 0; width: 160px; height: 160px; border-radius: 50%; filter: blur(60px); opacity: 0; transition: opacity 0.5s; pointer-events: none; } .pain-card:hover .glow { opacity: 1; } .pain-card:hover { transform: translateY(-8px); border-color: rgba(212,175,55,0.4) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.3); } .pain-icon { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--c-950); border: 1px solid var(--c-600); display: flex; align-items: center; justify-content: center; margin-bottom: 28px; transition: border-color 0.4s; } .pain-card:hover .pain-icon { border-color: var(--gold); } .pain-icon svg { width: 28px; height: 28px; color: var(--text-faint); transition: color 0.4s; } .pain-card:hover .pain-icon svg { color: var(--gold); } .pain-card h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--white); margin-bottom: 14px; } .pain-card p { font-size: 14px; color: var(--text-dim); font-weight: 300; line-height: 1.8; font-style: italic; } .pain-card.featured { background: rgba(42,42,42,0.5) !important; } .pain-card.featured h3 { color: var(--gold); } @media (max-width: 768px) { .pain-grid { grid-template-columns: 1fr; } } /* ===== TÂM GIAO ===== */ .empathy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .empathy-quote { border-left: 4px solid var(--gold); padding-left: 24px; } .empathy-quote p { font-size: 17px; color: var(--text); line-height: 1.8; font-weight: 300; margin-bottom: 18px; } .empathy-quote p:first-child { color: var(--white); } .empathy-quote .gold { color: var(--gold); font-weight: 500; } .steps-box { background: var(--c-900); padding: 40px; border-radius: var(--radius-2xl); border: 1px solid rgba(212,175,55,0.35); box-shadow: var(--shadow-neon); position: relative; } .steps-label { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); background: var(--c-950); border: 1px solid var(--gold); color: var(--gold); padding: 8px 24px; border-radius: 100px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; box-shadow: var(--shadow-gold); } .steps-intro { text-align: center; color: var(--text-dim); font-size: 14px; margin: 24px 0 20px; font-weight: 300; } .step-item { display: flex; gap: 18px; align-items: flex-start; padding: 16px; border-radius: var(--radius-lg); background: rgba(10,10,10,0.5); border: 1px solid var(--c-700); margin-bottom: 14px; transition: border-color 0.3s; } .step-item:hover { border-color: rgba(212,175,55,0.4); } .step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--c-950); border: 1px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex-shrink: 0; box-shadow: var(--shadow-gold); transition: transform 0.3s; } .step-item:hover .step-num { transform: scale(1.1); } .step-item h4 { font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 4px; } .step-item p { font-size: 13px; color: var(--text-dim); font-weight: 300; line-height: 1.6; } @media (max-width: 1023px) { .empathy-grid { grid-template-columns: 1fr; } } /* ===== NUMEROLOGY ===== */ .num-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; } .num-form-box { background: var(--c-900); border-radius: var(--radius-2xl); padding: 36px; border: 1px solid var(--c-700); } .num-form-box h3 { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--white); margin-bottom: 4px; } .num-form-box .sub { font-size: 13px; color: var(--text-faint); margin-bottom: 28px; font-weight: 300; } .form-group { margin-bottom: 18px; } .form-label { display: block; font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; margin-bottom: 10px; } .form-label span { color: var(--text-faint); font-weight: 400; text-transform: none; letter-spacing: normal; } .form-input { width: 100%; padding: 14px 18px; border-radius: var(--radius-md); background: rgba(17,17,17,0.9); border: 1px solid rgba(255,255,255,0.1); color: var(--white); font-size: 15px; transition: border-color 0.3s, box-shadow 0.3s; outline: none; min-height: 48px; } .form-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.1); } .form-input::placeholder { color: var(--text-faint); } input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) sepia(1) saturate(2) hue-rotate(10deg); cursor: pointer; } .form-note { margin-top: 24px; padding: 14px; border-radius: var(--radius-md); background: rgba(10,10,10,0.5); border: 1px solid var(--c-700); font-size: 12px; color: var(--text-faint); font-weight: 300; line-height: 1.6; } .form-note svg { vertical-align: middle; margin-right: 4px; } /* Numerology result */ .num-result { background: rgba(17,17,17,0.85); border: 1px solid rgba(212,175,55,0.15); border-radius: var(--radius-2xl); padding: 36px; transition: all 0.5s; } .num-result.show { border-color: rgba(212,175,55,0.45); box-shadow: 0 0 40px rgba(212,175,55,0.1); } .num-placeholder { text-align: center; padding: 60px 0; } .num-circle { width: 120px; height: 120px; border-radius: 50%; border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; font-size: 52px; font-family: var(--font-serif); font-weight: 700; color: var(--gold); box-shadow: 0 0 40px rgba(212,175,55,0.3), inset 0 0 30px rgba(212,175,55,0.04); margin: 0 auto 20px; position: relative; transition: transform 0.7s var(--ease-out); } .num-circle::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed rgba(212,175,55,0.25); animation: spin 20s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .num-result-header { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; } .num-result-header .num-circle { margin: 0; flex-shrink: 0; width: 110px; height: 110px; font-size: 48px; } .num-meta .label { font-size: 10px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; margin-bottom: 4px; } .num-meta h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--white); } .num-meta .sub { font-size: 13px; color: var(--text-dim); margin-top: 2px; } .calc-step { background: rgba(212,175,55,0.06); border: 1px solid rgba(212,175,55,0.15); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12px; color: var(--gold); font-family: var(--font-serif); letter-spacing: 0.04em; margin-bottom: 18px; } .num-desc { font-size: 14px; color: var(--text); font-weight: 300; line-height: 1.8; margin-bottom: 20px; } .trait-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .trait-tag { background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.25); color: var(--gold-light); border-radius: 100px; padding: 4px 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; } .num-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; } .num-stat { background: rgba(10,10,10,0.6); border-radius: var(--radius-md); padding: 14px; border: 1px solid var(--c-700); } .num-stat .label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; } .num-stat.good .val { color: var(--green); font-size: 13px; font-weight: 500; line-height: 1.5; } .num-stat.warn .val { color: var(--gold); font-size: 13px; font-weight: 500; line-height: 1.5; } .num-info-box { background: rgba(10,10,10,0.6); border-radius: var(--radius-md); padding: 16px; border: 1px solid rgba(212,175,55,0.2); margin-bottom: 14px; } .num-info-box .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 8px; } .num-info-box .label.career { color: var(--gold); } .num-info-box .label.love { color: var(--pink); } .num-info-box .val { font-size: 13px; color: var(--text); font-weight: 300; line-height: 1.7; } @media (max-width: 1023px) { .num-grid { grid-template-columns: 1fr; } } /* ===== TRIẾT LÝ ===== */ .phil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .phil-card { padding: 40px; border-radius: var(--radius-xl); text-align: left; position: relative; overflow: hidden; transition: all 0.4s var(--ease-out); } .phil-card:hover { transform: translateY(-8px); } .phil-card .watermark { position: absolute; right: -20px; top: -20px; font-size: 140px; opacity: 0.03; pointer-events: none; transition: transform 0.5s; color: var(--white); } .phil-card:hover .watermark { transform: rotate(12deg); } .phil-card .card-icon { width: 56px; height: 56px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 28px; } .phil-card .card-icon svg { width: 28px; height: 28px; } .phil-card h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 700; margin-bottom: 14px; } .phil-card .desc { font-size: 14px; font-weight: 300; line-height: 1.7; margin-bottom: 20px; } .phil-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; padding: 8px 0; font-weight: 300; } .phil-list li svg { width: 8px; height: 8px; color: var(--gold); flex-shrink: 0; } .phil-card.featured { background: linear-gradient(to bottom, var(--c-700), var(--c-950)); border: 1px solid rgba(212,175,55,0.45); box-shadow: var(--shadow-neon); } .phil-card.featured::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 3px; background: var(--gold); box-shadow: var(--shadow-gold); } @media (max-width: 768px) { .phil-grid { grid-template-columns: 1fr; } .phil-card.featured { transform: none !important; } } /* ===== QUY TRÌNH ===== */ .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .process-card { background: var(--c-900); padding: 32px; border-radius: var(--radius-lg); border: 1px solid var(--c-700); position: relative; transition: border-color 0.3s; } .process-card:hover { border-color: rgba(212,175,55,0.4); } .process-card .num { position: absolute; top: -16px; left: -12px; width: 44px; height: 44px; border-radius: 50%; background: var(--c-950); border: 1px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 700; font-size: 18px; box-shadow: var(--shadow-gold); } .process-card svg { width: 32px; height: 32px; color: var(--text-faint); margin-bottom: 20px; transition: color 0.3s; } .process-card:hover svg { color: var(--gold); } .process-card h4 { font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 8px; } .process-card p { font-size: 12px; color: var(--text-dim); font-weight: 300; line-height: 1.6; } .process-card.last { border-color: rgba(212,175,55,0.3); box-shadow: var(--shadow-neon); } .process-card.last .num { background: var(--gold); color: var(--c-950); } @media (max-width: 768px) { .process-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .process-grid { grid-template-columns: 1fr; } } /* ===== CHUYÊN GIA ===== */ .expert-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: center; } .expert-img { border-radius: var(--radius-2xl); overflow: hidden; aspect-ratio: 3/4; background: var(--c-700); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(212,175,55,0.25); box-shadow: var(--shadow-neon); position: relative; } .expert-img svg { width: 80px; height: 80px; color: var(--text-faint); } .expert-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--c-950), transparent); } .expert-badge { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); background: var(--c-950); border: 1px solid var(--gold); color: var(--gold); padding: 10px 24px; border-radius: var(--radius-md); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; z-index: 2; display: flex; align-items: center; gap: 8px; } .expert-content blockquote { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--white); line-height: 1.3; margin-bottom: 24px; } .expert-content blockquote em { color: var(--gold); font-style: italic; } .expert-content .bio { font-size: 16px; color: var(--text-dim); font-weight: 300; line-height: 1.8; margin-bottom: 32px; } .expert-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; } .expert-stat { background: var(--c-950); border: 1px solid var(--c-700); border-radius: var(--radius-md); padding: 16px; text-align: center; } .expert-stat .val { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--gold); } .expert-stat .label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; } .expert-sig { display: flex; align-items: center; gap: 14px; } .expert-sig .sig-icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-600); display: flex; align-items: center; justify-content: center; color: var(--text-faint); } .expert-sig .name { font-size: 14px; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.1em; } .expert-sig .role { font-size: 12px; color: var(--gold); margin-top: 2px; } @media (max-width: 768px) { .expert-grid { grid-template-columns: 1fr; } .expert-img { max-width: 300px; margin: 0 auto; } } /* ===== LỘ TRÌNH ===== */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } .pricing-card { padding: 40px; border-radius: var(--radius-2xl); display: flex; flex-direction: column; transition: all 0.4s var(--ease-out); position: relative; overflow: hidden; } .pricing-card:hover { transform: translateY(-6px); } .pricing-card .card-top { text-align: center; margin-bottom: 32px; } .pricing-card .p-icon { width: 56px; height: 56px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; } .pricing-card .p-icon svg { width: 28px; height: 28px; } .pricing-card .p-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 4px 12px; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; } .pricing-card h3 { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--white); line-height: 1.15; } .pricing-card .p-sub { font-size: 12px; color: var(--text-faint); margin-top: 6px; font-weight: 300; } .pricing-card .price { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--gold); margin-top: 14px; } .pricing-card .price span { font-size: 14px; font-weight: 400; color: var(--text-dim); } .pricing-list { flex: 1; margin-bottom: 32px; } .pricing-list li { position: relative; padding-left: 28px; margin-bottom: 14px; font-size: 14px; font-weight: 300; line-height: 1.6; } .pricing-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; } .pricing-list li::after { content: '✓'; position: absolute; left: 4px; top: 7px; font-size: 10px; font-weight: 900; color: var(--c-950); } .pricing-card .p-cta { width: 100%; } .pricing-card.featured { background: var(--c-900); border: 1px solid var(--gold); box-shadow: var(--shadow-neon); z-index: 2; } .pricing-card.featured .best-tag { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--c-950); padding: 6px 20px; border-radius: 0 0 12px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; } @media (max-width: 768px) { .pricing-grid { grid-template-columns: 1fr; } .pricing-card.featured { transform: none !important; } } /* ===== TESTIMONIALS ===== */ .test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .test-card { background: var(--c-900); border: 1px solid var(--c-700); padding: 32px; border-radius: var(--radius-lg); position: relative; transition: transform 0.3s; } .test-card:hover { transform: translateY(-6px); } .test-card .quote-mark { position: absolute; top: 12px; left: 16px; font-family: var(--font-serif); font-size: 64px; color: rgba(212,175,55,0.1); line-height: 1; } .test-stars { display: flex; gap: 2px; margin-bottom: 14px; } .test-stars svg { width: 12px; height: 12px; fill: var(--gold); } .test-card h4 { font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 12px; } .test-card .body { font-size: 13px; color: var(--text-dim); font-weight: 300; line-height: 1.75; font-style: italic; margin-bottom: 20px; } .test-card .author { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--c-700); padding-top: 16px; } .test-card .avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .test-card .author-name { font-size: 13px; font-weight: 700; color: var(--white); } .test-card .author-role { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; } .test-card.featured { border-color: rgba(212,175,55,0.4); box-shadow: var(--shadow-gold); } .test-card.featured h4 { color: var(--gold-light); } @media (max-width: 768px) { .test-grid { grid-template-columns: 1fr; } } /* ===== FAQ ===== */ .faq-item { border: 1px solid var(--c-700); border-radius: var(--radius-lg); overflow: hidden; background: var(--c-900); margin-bottom: 10px; } .faq-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; text-align: left; font-size: 15px; font-weight: 700; color: var(--white); transition: background 0.2s; min-height: 48px; } .faq-btn:hover { background: rgba(42,42,42,0.4); } .faq-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } .faq-btn svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; transition: transform 0.3s; } .faq-btn[aria-expanded="true"] svg { transform: rotate(180deg); } .faq-body { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0, 1, 0.5, 1); } .faq-body-inner { padding: 0 24px 22px; font-size: 14px; color: var(--text-dim); font-weight: 300; line-height: 1.8; border-top: 1px solid var(--c-700); padding-top: 18px; } .faq-body-inner strong { color: var(--white); font-weight: 600; } /* ===== BOOKING FORM ===== */ .booking { padding: 100px 0; background: var(--c-900); position: relative; overflow: hidden; border-top: 1px solid var(--c-700); } .booking .orbit { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; border: 1px dashed rgba(212,175,55,0.06); pointer-events: none; animation: spin 60s linear infinite; } .booking .orbit-1 { width: 700px; height: 700px; } .booking .orbit-2 { width: 450px; height: 450px; animation-direction: reverse; animation-duration: 40s; } .booking-box { max-width: 520px; margin: 0 auto; background: rgba(10,10,10,0.85); padding: 40px; border-radius: var(--radius-2xl); backdrop-filter: blur(20px); border: 1px solid rgba(212,175,55,0.25); box-shadow: 0 30px 60px rgba(0,0,0,0.5); position: relative; } .booking-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--gold), var(--gold-dark)); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; } .booking-field { position: relative; margin-bottom: 16px; } .booking-field label { position: absolute; top: -8px; left: 14px; font-size: 10px; color: var(--text-faint); background: var(--c-950); padding: 0 6px; z-index: 1; } .booking-field .field-icon { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: var(--text-faint); width: 16px; height: 16px; } .booking-field input, .booking-field select { width: 100%; padding: 16px 18px 16px 42px; border-radius: var(--radius-md); background: var(--c-900); border: 1px solid var(--c-600); color: var(--white); font-size: 14px; transition: border-color 0.3s, box-shadow 0.3s; outline: none; min-height: 52px; -webkit-appearance: none; } .booking-field input:focus, .booking-field select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.1); } .booking-field select { color: var(--text-dim); } .booking-field .select-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-faint); pointer-events: none; } .booking-privacy { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; color: var(--text-faint); margin-top: 16px; } .booking-privacy svg { color: var(--green); width: 14px; height: 14px; flex-shrink: 0; } /* Form success */ .form-success { display: none; text-align: center; padding: 40px 20px; } .form-success svg { width: 60px; height: 60px; color: var(--green); margin: 0 auto 16px; } .form-success h3 { font-family: var(--font-serif); font-size: 24px; color: var(--white); margin-bottom: 8px; } .form-success p { font-size: 14px; color: var(--text-dim); font-weight: 300; } /* ===== FOOTER ===== */ .footer { background: var(--c-950); border-top: 1px solid var(--c-700); padding: 60px 0 32px; } .footer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; flex-wrap: wrap; gap: 24px; } .footer-brand .f-name { display: flex; align-items: center; gap: 12px; font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--white); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; } .footer-brand .f-name svg { width: 28px; height: 28px; color: var(--gold); } .footer-brand .f-tagline { font-size: 11px; color: var(--text-faint); letter-spacing: 0.15em; text-transform: uppercase; font-weight: 300; } .footer-brand .f-address { font-size: 12px; color: var(--text-faint); margin-top: 4px; } .footer-social { display: flex; gap: 14px; } .footer-social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-600); display: flex; align-items: center; justify-content: center; color: var(--text-dim); transition: all 0.3s; } .footer-social a:hover { border-color: var(--gold); color: var(--gold); } .footer-social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .footer-social a svg { width: 18px; height: 18px; } .footer-bottom { border-top: 1px solid var(--c-800); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--text-faint); font-weight: 300; } .footer-bottom .motto { color: rgba(212,175,55,0.35); letter-spacing: 0.15em; text-transform: uppercase; } @media (max-width: 640px) { .footer-top { flex-direction: column; text-align: center; } .footer-bottom { flex-direction: column; text-align: center; } } /* ===== FLOATING WIDGETS ===== */ .float-widgets { position: fixed; bottom: 24px; right: 24px; z-index: 90; display: flex; flex-direction: column; gap: 14px; } .float-btn { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.4); transition: transform 0.3s; } .float-btn:hover { transform: scale(1.1); } .float-btn:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; } .float-btn-phone { background: var(--gold); color: var(--c-950); box-shadow: var(--shadow-neon); } .float-btn-phone svg { width: 22px; height: 22px; } /* ===== CHATBOT ===== */ .chat-widget { position: fixed; bottom: 100px; right: 24px; z-index: 95; } .chat-toggle { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), #8a6a1a); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-neon), 0 4px 20px rgba(0,0,0,0.4); transition: all 0.3s; color: var(--c-950); position: relative; } .chat-toggle:hover { transform: scale(1.1); } .chat-toggle:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; } .chat-toggle svg { width: 22px; height: 22px; } .chat-toggle .badge { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; background: var(--red); border-radius: 50%; border: 2px solid var(--c-950); font-size: 10px; color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; } .chat-panel { position: absolute; bottom: 72px; right: 0; width: 360px; max-width: calc(100vw - 40px); background: #0f0f0f; border: 1px solid rgba(212,175,55,0.25); border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,0.7); overflow: hidden; display: none; flex-direction: column; height: 520px; } .chat-panel.open { display: flex; } .chat-head { background: linear-gradient(135deg, #181200, #0f0f0f); border-bottom: 1px solid rgba(212,175,55,0.15); padding: 14px 16px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .chat-head-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; color: var(--c-950); flex-shrink: 0; } .chat-head-icon svg { width: 18px; height: 18px; } .chat-head-info { flex: 1; min-width: 0; } .chat-head-name { font-size: 13px; font-weight: 700; color: var(--white); } .chat-head-status { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--green); } .chat-head-status .dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; } .chat-close { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-faint); transition: all 0.2s; } .chat-close:hover { color: var(--white); background: rgba(255,255,255,0.05); } .chat-close svg { width: 18px; height: 18px; } .chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: rgba(212,175,55,0.15) transparent; } .chat-messages::-webkit-scrollbar { width: 3px; } .chat-messages::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.2); border-radius: 2px; } .chat-msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.65; } .chat-msg.bot { background: rgba(212,175,55,0.06); border: 1px solid rgba(212,175,55,0.12); color: #e0e0e0; border-bottom-left-radius: 4px; align-self: flex-start; } .chat-msg.user { background: linear-gradient(135deg, var(--gold), #8a6a1a); color: var(--c-950); border-bottom-right-radius: 4px; align-self: flex-end; font-weight: 500; } .chat-quick-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; } .chat-quick { background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.18); color: var(--gold-light); padding: 6px 12px; border-radius: 100px; font-size: 11px; font-family: inherit; transition: all 0.2s; white-space: nowrap; } .chat-quick:hover { background: rgba(212,175,55,0.2); border-color: rgba(212,175,55,0.45); } .chat-typing { display: flex; gap: 5px; align-items: center; padding: 10px 14px; } .chat-typing span { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; animation: typing 1.2s infinite; } .chat-typing span:nth-child(2) { animation-delay: 0.2s; } .chat-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes typing { 0%,80%,100% { transform: scale(0.7); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } .chat-input-area { border-top: 1px solid rgba(255,255,255,0.05); padding: 10px 14px; display: flex; gap: 8px; align-items: flex-end; background: rgba(0,0,0,0.3); flex-shrink: 0; } .chat-textarea { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); padding: 10px 14px; color: var(--white); font-size: 13px; resize: none; outline: none; min-height: 42px; max-height: 96px; font-family: inherit; line-height: 1.5; transition: border-color 0.2s; } .chat-textarea:focus { border-color: rgba(212,175,55,0.35); } .chat-textarea::placeholder { color: var(--text-faint); } .chat-send { width: 42px; height: 42px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--gold), #8a6a1a); display: flex; align-items: center; justify-content: center; color: var(--c-950); transition: all 0.2s; flex-shrink: 0; } .chat-send:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(212,175,55,0.4); } .chat-send:disabled { opacity: 0.3; cursor: not-allowed; transform: none; } .chat-send svg { width: 16px; height: 16px; } .footer-legal { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; font-size: 12px; } .footer-link { color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; } .footer-link:hover { color: var(--gold); } .footer-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; } /* ===== BACK TO TOP ===== */ .btt { position: fixed; bottom: 90px; left: 24px; z-index: 80; width: 44px; height: 44px; border-radius: 50%; background: var(--c-800); border: 1px solid var(--c-600); color: var(--text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transition: all 0.3s; } .btt.show { opacity: 1; pointer-events: auto; } .btt:hover { background: var(--gold); color: var(--c-950); border-color: var(--gold); } .btt:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .btt svg { width: 18px; height: 18px; } /* ===== SCROLL PROGRESS ===== */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(to right, var(--gold), var(--gold-dark)); z-index: 9999; width: 0%; transition: width 0.1s; pointer-events: none; } /* ===== FOCUS TRAP ===== */ .focus-trap-active { overflow: hidden; } /* ===== ENHANCED EFFECTS ===== */ /* All reveals — simple clean fade up only */ /* Magnetic hover for CTA buttons */ .btn-gold { position: relative; overflow: hidden; } .btn-gold::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.15), transparent 60%); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .btn-gold:hover::after { opacity: 1; } /* Card hover — clean translateY only */ .pain-card, .pricing-card, .test-card { transition: all 0.4s var(--ease-out); } .pain-card:hover, .pricing-card:hover, .test-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.3); } /* Text shimmer for gold text */ @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .text-shimmer { background: linear-gradient(90deg, var(--gold-light) 0%, var(--gold) 25%, var(--white) 50%, var(--gold) 75%, var(--gold-light) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 4s linear infinite; } /* Glow pulse for main CTA */ @keyframes glowPulse { 0%,100% { box-shadow: var(--shadow-neon); } 50% { box-shadow: 0 0 20px rgba(212,175,55,0.6), 0 0 50px rgba(212,175,55,0.2); } } .btn-glow { animation: glowPulse 3s ease-in-out infinite; } /* Parallax float for decorative elements */ @keyframes gentleFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 33% { transform: translateY(-6px) rotate(0.5deg); } 66% { transform: translateY(3px) rotate(-0.3deg); } } .float-gentle { animation: gentleFloat 6s ease-in-out infinite; } /* Counter animation */ .counter { display: inline-block; } /* Smooth section divider line */ .section-border::before { content: ''; display: block; width: 60px; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); margin: 0 auto; position: relative; top: -1px; } /* Enhanced scroll progress */ .scroll-progress { height: 2px; background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light), var(--gold)); background-size: 300% 100%; animation: shimmer 3s linear infinite; } /* Quote banner enhanced */ .quote-banner { position: relative; } .quote-banner::after { content: '✦'; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); font-size: 10px; color: rgba(212,175,55,0.15); } /* Loading skeleton shimmer */ @keyframes skeletonShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Dim-card — no transform on hover, just border glow */ .dim-card { transition: border-color 0.3s, box-shadow 0.3s; } .dim-card:hover { border-color: rgba(212,175,55,0.15); box-shadow: 0 4px 20px rgba(0,0,0,0.2); } /* ===== POPUP: Kích cầu tư vấn miễn phí ===== */ .promo-overlay { display:none; position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,0.7); backdrop-filter:blur(6px); align-items:center; justify-content:center; padding:20px; } .promo-overlay.show { display:flex; } .promo-box { background:var(--c-900); border:1px solid rgba(212,175,55,0.3); border-radius:24px; max-width:420px; width:100%; padding:36px 28px; text-align:center; position:relative; box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 40px rgba(212,175,55,0.08); animation:promoIn 0.5s var(--ease-out); } @keyframes promoIn { from { opacity:0; transform:scale(0.9) translateY(20px); } to { opacity:1; transform:scale(1) translateY(0); } } .promo-box::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(to right,var(--gold),var(--gold-dark)); border-radius:24px 24px 0 0; } .promo-close { position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; color:var(--text-faint); cursor:pointer; transition:all 0.2s; font-family:inherit; } .promo-close:hover { background:rgba(255,255,255,0.1); color:var(--white); } .promo-close:focus-visible { outline:2px solid var(--gold); outline-offset:2px; } .promo-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.2); color:#f87171; padding:5px 14px; border-radius:100px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:16px; } .promo-badge .pulse-dot { width:8px; height:8px; border-radius:50%; background:#ef4444; animation:pulse 1.5s infinite; } /* ===== POPUP: Social proof notification ===== */ .social-proof { position:fixed; bottom:24px; left:24px; z-index:90; transform:translateY(150%); opacity:0; transition:all 0.6s var(--ease-out); pointer-events:none; } .social-proof.show { transform:translateY(0); opacity:1; pointer-events:auto; } .sp-card { background:rgba(17,17,17,0.92); backdrop-filter:blur(16px); border-radius:16px; border:1px solid rgba(212,175,55,0.15); padding:14px 18px; max-width:320px; display:flex; align-items:center; gap:12px; box-shadow:0 12px 40px rgba(0,0,0,0.5); position:relative; overflow:hidden; } .sp-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold); border-radius:16px 0 0 16px; } .sp-avatar { width:36px; height:36px; border-radius:50%; background:rgba(212,175,55,0.1); border:1px solid rgba(212,175,55,0.2); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--gold); flex-shrink:0; } .sp-text { flex:1; min-width:0; } .sp-time { font-size:10px; color:var(--text-faint); margin-bottom:2px; } .sp-name { font-size:12px; color:var(--text); line-height:1.5; } .sp-name strong { color:var(--white); font-weight:600; } .sp-name em { color:var(--gold); font-style:normal; font-weight:600; } @media (max-width:768px) { .social-proof { bottom:80px; left:12px; right:12px; } .sp-card { max-width:none; } } /* ===== RADIO SECTION ===== */ .radio-card { background: var(--c-900); border: 1px solid var(--c-700); border-radius: var(--radius-xl); overflow: hidden; transition: border-color 0.3s; } .radio-card:hover { border-color: rgba(212,175,55,0.15); } .radio-visual { position: relative; padding: 40px 28px; background: linear-gradient(135deg, rgba(212,175,55,0.04), rgba(10,10,10,0.6)); text-align: center; overflow: hidden; } .radio-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 70%, rgba(212,175,55,0.06), transparent 60%); pointer-events: none; } .radio-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 48px; margin-bottom: 20px; } .radio-wave span { display: block; width: 3px; border-radius: 3px; background: var(--gold); opacity: 0.4; } @media (prefers-reduced-motion: no-preference) { .radio-wave span { animation: waveBar 1.2s ease-in-out infinite alternate; } .radio-wave span:nth-child(1) { height: 14px; animation-delay: 0s; } .radio-wave span:nth-child(2) { height: 24px; animation-delay: 0.1s; } .radio-wave span:nth-child(3) { height: 36px; animation-delay: 0.2s; } .radio-wave span:nth-child(4) { height: 48px; animation-delay: 0.3s; } .radio-wave span:nth-child(5) { height: 36px; animation-delay: 0.4s; } .radio-wave span:nth-child(6) { height: 24px; animation-delay: 0.5s; } .radio-wave span:nth-child(7) { height: 14px; animation-delay: 0.6s; } } @keyframes waveBar { 0% { transform: scaleY(0.4); opacity: 0.3; } 100% { transform: scaleY(1); opacity: 0.7; } } .radio-body { padding: 28px; } .radio-ep { background: var(--c-950); border: 1px solid var(--c-700); border-radius: var(--radius-md); padding: 18px; margin-bottom: 10px; display: flex; gap: 14px; align-items: flex-start; transition: border-color 0.3s, background 0.3s; cursor: default; } .radio-ep:hover { border-color: rgba(212,175,55,0.15); background: rgba(212,175,55,0.02); } .radio-ep-num { width: 36px; height: 36px; border-radius: 50%; background: rgba(212,175,55,0.06); border: 1px solid rgba(212,175,55,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--gold); font-size: 11px; font-weight: 700; } .radio-ep-text { flex: 1; } .radio-ep-title { font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 3px; line-height: 1.4; } .radio-ep-desc { font-size: 12px; color: var(--text-faint); line-height: 1.6; } .radio-ep-tag { font-size: 10px; color: var(--gold); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; display: inline-block; } /* ===== BLOG SECTION ===== */ .blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } } .blog-card { background: var(--c-900); border: 1px solid var(--c-700); border-radius: var(--radius-xl); padding: 28px; position: relative; overflow: hidden; transition: border-color 0.3s; } .blog-card:hover { border-color: rgba(212,175,55,0.15); } .blog-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .blog-card.bc1::before { background: var(--gold); } .blog-card.bc2::before { background: var(--green); } .blog-card.bc3::before { background: var(--pink); } .blog-card.bc4::before { background: #5090f0; } .blog-card.bc5::before { background: #a070e8; } .blog-card.bc6::before { background: var(--red); } .blog-cat { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 100px; } .bc1 .blog-cat { background: rgba(212,175,55,0.08); color: var(--gold); } .bc2 .blog-cat { background: rgba(61,214,140,0.08); color: var(--green); } .bc3 .blog-cat { background: rgba(244,114,182,0.08); color: var(--pink); } .bc4 .blog-cat { background: rgba(80,144,240,0.08); color: #5090f0; } .bc5 .blog-cat { background: rgba(160,112,232,0.08); color: #a070e8; } .bc6 .blog-cat { background: rgba(239,68,68,0.08); color: var(--red); } .blog-title { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--white); line-height: 1.35; margin-bottom: 10px; } .blog-excerpt { font-size: 13px; color: var(--text-dim); line-height: 1.75; font-weight: 300; } .blog-meta { margin-top: 14px; font-size: 11px; color: var(--text-faint); display: flex; align-items: center; gap: 12px; } .blog-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; } .blog-featured .bf-visual { padding: 40px 28px; background: linear-gradient(135deg, rgba(212,175,55,0.04), rgba(10,10,10,0.6)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; } .blog-featured .bf-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 80%, rgba(212,175,55,0.06), transparent 50%); pointer-events: none; } .blog-featured .bf-body { padding: 32px 28px; display: flex; flex-direction: column; justify-content: center; } @media (max-width: 640px) { .blog-featured { grid-template-columns: 1fr; } .blog-featured .bf-visual { padding: 28px 20px; } } /* ===== ECOSYSTEM ===== */ .eco-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .eco-grid { grid-template-columns: 1fr; } } .eco-card { background: var(--c-900); border: 1px solid var(--c-700); border-radius: var(--radius-xl); padding: 28px; position: relative; overflow: hidden; transition: border-color 0.3s; } .eco-card:hover { border-color: rgba(212,175,55,0.2); } .eco-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .eco-card.e1::before { background: linear-gradient(to right, var(--gold), #e8c838); } .eco-card.e2::before { background: linear-gradient(to right, #5090f0, #70b0ff); } .eco-card.e3::before { background: linear-gradient(to right, #3dd68c, #60eeaa); } .eco-card.e4::before { background: linear-gradient(to right, #e860a0, #ff80c0); } .eco-card.e5::before { background: linear-gradient(to right, #a070e8, #c090ff); } .eco-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; } .eco-featured .ef-visual { padding: 36px 28px; background: linear-gradient(135deg, rgba(212,175,55,0.04), rgba(10,10,10,0.6)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .eco-featured .ef-body { padding: 32px 28px; } @media (max-width: 640px) { .eco-featured { grid-template-columns: 1fr; } } .eco-status { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 10px; border-radius: 100px; margin-bottom: 14px; } .eco-status.live { background: rgba(61,214,140,0.1); color: var(--green); } .eco-status.soon { background: rgba(212,175,55,0.08); color: var(--gold); } .eco-status.dev { background: rgba(80,144,240,0.08); color: #5090f0; } .eco-icon { font-size: 32px; margin-bottom: 14px; } .eco-card h3 { font-family: var(--font-serif); font-size: 19px; font-weight: 700; color: var(--white); line-height: 1.3; margin-bottom: 8px; } .eco-card p { font-size: 13px; color: var(--text-dim); line-height: 1.75; } .eco-card p em { color: var(--gold); font-style: italic; } .eco-card p strong { color: var(--white); font-weight: 600; } .eco-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 10px 18px; border-radius: var(--radius-md); border: 1px solid rgba(212,175,55,0.2); color: var(--gold); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; transition: all 0.3s; cursor: pointer; background: transparent; font-family: inherit; } .eco-cta:hover { background: rgba(212,175,55,0.06); border-color: rgba(212,175,55,0.4); } /* ===== SECTION DIVIDERS — Gradient waves between sections ===== */ .section-divider { position: relative; height: 80px; overflow: hidden; pointer-events: none; } .section-divider svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; } .section-divider.to-dark svg path { fill: var(--c-950); } .section-divider.to-alt svg path { fill: var(--c-900); } /* ===== STAGGERED CHILDREN — Cards, grid items fade in sequence ===== */ .reveal.stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .reveal.stagger.active > *:nth-child(1) { transition-delay: 0s; } .reveal.stagger.active > *:nth-child(2) { transition-delay: 0.1s; } .reveal.stagger.active > *:nth-child(3) { transition-delay: 0.15s; } .reveal.stagger.active > *:nth-child(4) { transition-delay: 0.2s; } .reveal.stagger.active > *:nth-child(5) { transition-delay: 0.25s; } .reveal.stagger.active > *:nth-child(6) { transition-delay: 0.3s; } .reveal.stagger.active > * { opacity: 1; transform: translateY(0); } /* ===== ORNAMENTAL DOTS — Between sections ===== */ .section-ornament { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px 0; } .section-ornament span { width: 4px; height: 4px; border-radius: 50%; background: rgba(212,175,55,0.25); } .section-ornament span:nth-child(2) { width: 6px; height: 6px; background: rgba(212,175,55,0.4); } /* ===== QUOTE BANNER — Enhanced ornaments ===== */ .quote-banner { position: relative; } .quote-banner::after { content: '✦'; position: absolute; top: 50%; left: 24px; transform: translateY(-50%); font-size: 12px; color: rgba(212,175,55,0.12); } .quote-banner .qb-right { position: absolute; top: 50%; right: 24px; transform: translateY(-50%); font-size: 12px; color: rgba(212,175,55,0.12); } /* ===== SECTION NUMBER — Side indicator ===== */ .section-indicator { position: absolute; left: -60px; top: 50%; transform: translateY(-50%) rotate(-90deg); font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(212,175,55,0.08); white-space: nowrap; pointer-events: none; } @media (max-width: 1200px) { .section-indicator { display: none; } } /* ===== FLOATING PARTICLES — Decorative ambient ===== */ .particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .particle { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(212,175,55,0.15); } @media (prefers-reduced-motion: no-preference) { .particle { animation: particleFloat var(--dur, 20s) linear infinite; } @keyframes particleFloat { 0% { transform: translateY(100%) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100%) translateX(var(--drift, 30px)); opacity: 0; } } } /* ===== GLOW LINE — Animated gold line between sections ===== */ .glow-line { height: 1px; margin: 0 auto; max-width: 200px; position: relative; overflow: hidden; } .glow-line::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, var(--gold), transparent); } @media (prefers-reduced-motion: no-preference) { .glow-line::after { animation: glowSlide 4s ease-in-out infinite; } @keyframes glowSlide { 0% { left: -50%; } 100% { left: 100%; } } } /* ===== CARD SHINE — Hover light reflection ===== */ .pain-card, .pricing-card, .test-card, .eco-card, .blog-card, .radio-card { position: relative; overflow: hidden; } .pain-card::after, .pricing-card::after, .test-card::after, .eco-card::after, .blog-card::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(212,175,55,0.04), transparent 40%); opacity: 0; transition: opacity 0.5s; pointer-events: none; } .pain-card:hover::after, .pricing-card:hover::after, .test-card:hover::after, .eco-card:hover::after, .blog-card:hover::after { opacity: 1; } /* ===== SECTION TITLE — Underline decoration ===== */ .section-title em { position: relative; } .section-title em::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: linear-gradient(to right, var(--gold), transparent); opacity: 0.3; border-radius: 2px; } /* ===== ENHANCED BADGE — Subtle glow ===== */ .section-badge-gold { box-shadow: 0 0 20px rgba(212,175,55,0.06); } /* ===== PROCESS CARDS — Connection line ===== */ .process-card { position: relative; } .process-card:not(.last)::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 1px; height: 24px; background: linear-gradient(to bottom, rgba(212,175,55,0.15), transparent); } /* ===== PRICING FEATURED — Breathing glow ===== */ @media (prefers-reduced-motion: no-preference) { .pricing-card.featured { animation: featuredGlow 4s ease-in-out infinite; } @keyframes featuredGlow { 0%, 100% { box-shadow: 0 0 30px rgba(212,175,55,0.08); } 50% { box-shadow: 0 0 50px rgba(212,175,55,0.15), 0 0 80px rgba(212,175,55,0.05); } } } /* ===== HERO FLOATING CARDS — Gentle bob ===== */ @media (prefers-reduced-motion: no-preference) { .hero-float { animation: gentleBob 5s ease-in-out infinite; } .hero-float-br { animation-delay: -2.5s; } @keyframes gentleBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } } /* ===== MOBILE STICKY CTA ===== */ .mobile-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 80; padding: 12px 16px; background: rgba(10,10,10,0.95); backdrop-filter: blur(12px); border-top: 1px solid rgba(212,175,55,0.2); } .mobile-cta .btn { width: 100%; } @media (max-width: 768px) { .mobile-cta { display: block; } body { padding-bottom: 76px; } .section { padding: 56px 0; } .dim-card { padding: 20px 16px; } } /* ===== 6-DIMENSION FLOWING CARDS ===== */ .dim-card { background: var(--c-900); border-radius: var(--radius-xl); border: 1px solid var(--c-700); padding: 28px; margin-bottom: 16px; position: relative; overflow: hidden; } .dim-card .dim-num { position: absolute; top: 16px; right: 18px; font-size: 10px; color: var(--text-faint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .dim-card h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--white); margin-bottom: 10px; } .dim-card h3 span { font-size: 22px; margin-right: 8px; } .dim-revealed { font-size: 14px; color: var(--text); line-height: 1.85; font-weight: 300; } .dim-revealed strong { color: var(--white); font-weight: 600; } .dim-revealed em { color: var(--gold); font-style: italic; } .dim-locked { margin-top: 18px; padding: 18px; border-radius: var(--radius-md); background: rgba(212,175,55,0.03); border: 1px dashed rgba(212,175,55,0.15); position: relative; } .dim-locked::before { content: '🔒'; position: absolute; top: -10px; left: 18px; background: var(--c-900); padding: 0 6px; font-size: 12px; } .dim-locked p { font-size: 12px; color: var(--text-faint); line-height: 1.7; font-style: italic; } .dim-locked strong { color: var(--gold); font-weight: 600; font-style: normal; } .dim-whisper { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--text); line-height: 1.85; text-align: center; padding: 28px 20px; margin-bottom: 16px; border-radius: var(--radius-xl); border: 1px solid rgba(212,175,55,0.08); background: linear-gradient(135deg, rgba(212,175,55,0.02), rgba(10,10,10,0.4)); } .dim-whisper em { color: var(--gold); } .dim-summary { padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: 10px; } .dim-summary .sl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 5px; } .dim-summary .sv { font-size: 14px; font-weight: 500; line-height: 1.5; } .dim-cta-box { background: var(--c-900); border-radius: var(--radius-2xl); border: 1px solid rgba(212,175,55,0.25); padding: 36px 28px; text-align: center; margin-top: 24px; } .hand-svg { max-width: 120px; width: 100%; height: auto; margin: 0 auto 16px; display: block; opacity: 0.7; } /* ===== MICRO-COPY QUOTE BANNER ===== */ .quote-banner { padding: 40px 20px; text-align: center; border-top: 1px solid var(--c-700); border-bottom: 1px solid var(--c-700); background: var(--c-950); position: relative; overflow: hidden; } .quote-banner::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px; height: 400px; background: radial-gradient(circle, rgba(212,175,55,0.03), transparent 70%); pointer-events: none; } .quote-banner p { font-family: var(--font-serif); font-style: italic; font-size: clamp(17px, 2.5vw, 21px); color: var(--text); max-width: 640px; margin: 0 auto; line-height: 1.7; position: relative; } .quote-banner p strong { color: var(--gold); font-weight: 500; } /* ============================================================ BLOG LISTING, SINGLE POST, PODCAST — v7.0 ============================================================ */ /* === BLOG HERO === */ .blog-hero { padding: 140px 0 48px; position: relative; overflow: hidden; } /* === CATEGORY FILTER === */ .blog-filter { border-bottom: 1px solid var(--c-700); padding: 16px 0; background: var(--c-900); position: sticky; top: var(--header-h); z-index: 30; } .filter-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .filter-row::-webkit-scrollbar { display: none; } .filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 100px; font-size: 12px; font-weight: 600; color: var(--text-faint); background: transparent; border: 1px solid var(--c-700); transition: all 0.3s; white-space: nowrap; text-decoration: none; } .filter-btn:hover { border-color: rgba(212,175,55,0.3); color: var(--gold); } .filter-btn.active { background: rgba(212,175,55,0.1); border-color: var(--gold); color: var(--gold); } .filter-count { font-size: 10px; opacity: 0.6; } /* === BLOG LISTING GRID === */ .blog-listing { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .blog-listing .blog-featured { grid-column: 1 / -1; } @media (max-width: 640px) { .blog-listing { grid-template-columns: 1fr; } } /* === BLOG THUMBNAIL === */ .blog-thumb { margin: -28px -28px 18px; overflow: hidden; border-radius: var(--radius-xl) var(--radius-xl) 0 0; aspect-ratio: 16/9; } .blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .blog-card:hover .blog-thumb img { transform: scale(1.05); } .bf-bg-img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0.12; border-radius: var(--radius-xl) 0 0 var(--radius-xl); } /* === BLOG PAGINATION === */ .blog-pagination { margin-top: 48px; text-align: center; } .blog-pagination ul { display: inline-flex; gap: 6px; list-style: none; padding: 0; } .blog-pagination li a, .blog-pagination li span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--text-dim); border: 1px solid var(--c-700); transition: all 0.3s; text-decoration: none; } .blog-pagination li a:hover { border-color: var(--gold); color: var(--gold); } .blog-pagination li .current { background: var(--gold); color: var(--c-950); border-color: var(--gold); } /* === SINGLE POST === */ .post-hero { padding: 140px 0 40px; border-bottom: 1px solid var(--c-700); } .post-breadcrumb { font-size: 11px; color: var(--text-faint); margin-bottom: 20px; } .post-breadcrumb a { color: var(--text-faint); text-decoration: none; transition: color 0.2s; } .post-breadcrumb a:hover { color: var(--gold); } .post-cat { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); background: rgba(212,175,55,0.08); padding: 5px 14px; border-radius: 100px; margin-bottom: 16px; } .post-title { font-family: var(--font-serif); font-size: clamp(32px, 4.5vw, 48px); font-weight: 700; color: var(--white); line-height: 1.15; margin-bottom: 24px; } .post-meta-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .post-author-chip { display: flex; align-items: center; gap: 10px; } .pac-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(212,175,55,0.15); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .pac-name { font-size: 13px; font-weight: 600; color: var(--white); display: block; } .pac-role { font-size: 11px; color: var(--text-faint); } .post-meta-info { font-size: 12px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; } /* Post cover */ .post-cover { padding: 32px 0 0; } .post-cover-img { width: 100%; border-radius: var(--radius-xl); aspect-ratio: 21/9; object-fit: cover; border: 1px solid var(--c-700); } /* Post content */ .post-content { padding: 48px 0; } .post-content p { font-size: 17px; color: var(--text); line-height: 2; font-weight: 300; margin-bottom: 24px; } .post-content p strong { color: var(--white); font-weight: 600; } .post-content p em { color: var(--gold); } .post-content h2 { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--white); margin: 48px 0 16px; line-height: 1.25; } .post-content h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--white); margin: 36px 0 12px; } .post-content blockquote { border-left: 3px solid var(--gold); padding: 16px 24px; background: rgba(212,175,55,0.03); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: 32px 0; font-family: var(--font-serif); font-size: 18px; font-style: italic; color: var(--text); line-height: 1.8; } .post-content blockquote em, .post-content blockquote strong { color: var(--gold); } .post-content ul, .post-content ol { padding-left: 28px; margin-bottom: 24px; } .post-content li { font-size: 16px; color: var(--text-dim); line-height: 1.8; margin-bottom: 8px; font-weight: 300; } .post-content img { border-radius: var(--radius-lg); margin: 32px 0; } .post-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; } .post-content a:hover { color: var(--gold-light); } .post-content hr { border: none; height: 1px; background: var(--c-700); margin: 48px 0; } /* Post tags */ .post-tags { padding: 0 0 32px; border-bottom: 1px solid var(--c-700); } .post-tag { display: inline-block; padding: 6px 14px; border-radius: 100px; font-size: 12px; font-weight: 500; color: var(--text-dim); border: 1px solid var(--c-700); margin: 0 6px 6px 0; text-decoration: none; transition: all 0.3s; } .post-tag:hover { border-color: var(--gold); color: var(--gold); } /* Post CTA */ .post-cta { padding: 48px 0; } .post-cta-box { background: var(--c-900); border: 1px solid rgba(212,175,55,0.25); border-radius: var(--radius-2xl); padding: 40px; text-align: center; box-shadow: 0 0 40px rgba(212,175,55,0.05); } /* Related posts */ .post-related { padding: 60px 0; background: var(--c-900); border-top: 1px solid var(--c-700); } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 768px) { .related-grid { grid-template-columns: 1fr; } } /* === PODCAST === */ .podcast-subscribe { background: var(--c-900); border-bottom: 1px solid var(--c-700); padding: 16px 0; } .subscribe-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .subscribe-label { font-size: 12px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; } .subscribe-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 100px; font-size: 12px; font-weight: 600; color: var(--text-dim); border: 1px solid var(--c-700); transition: all 0.3s; text-decoration: none; } .subscribe-btn:hover { border-color: var(--gold); color: var(--gold); } .podcast-player { margin-bottom: 20px; } .player-placeholder { background: var(--c-900); border: 1px solid var(--c-700); border-radius: var(--radius-xl); padding: 48px 28px; text-align: center; overflow: hidden; position: relative; } .player-placeholder .radio-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 48px; margin-bottom: 20px; } .player-placeholder .radio-wave span { display: block; width: 3px; border-radius: 3px; background: var(--gold); opacity: 0.4; height: 20px; } /* Episode cards */ .ep-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: var(--radius-lg); background: var(--c-900); border: 1px solid var(--c-700); margin-bottom: 10px; transition: border-color 0.3s; } .ep-card:hover { border-color: rgba(212,175,55,0.2); } .ep-num { width: 40px; height: 40px; border-radius: 50%; background: rgba(212,175,55,0.06); border: 1px solid rgba(212,175,55,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--gold); font-size: 12px; font-weight: 700; } .ep-body { flex: 1; min-width: 0; } .ep-title { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 4px; line-height: 1.4; display: block; text-decoration: none; } .ep-title:hover { color: var(--gold); } .ep-excerpt { font-size: 13px; color: var(--text-faint); line-height: 1.6; } .ep-meta { margin-top: 6px; font-size: 11px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ep-tags { color: var(--gold); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .ep-play { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(212,175,55,0.2); display: flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; transition: all 0.3s; text-decoration: none; } .ep-play:hover { background: var(--gold); color: var(--c-950); } /* ===== CASE STUDY HERO ===== */ .cs-hero { padding: 140px 0 48px; position: relative; overflow: hidden; } /* ===== STATS BAR ===== */ .cs-stats-bar { background: var(--c-900); border-top: 1px solid var(--c-700); border-bottom: 1px solid var(--c-700); padding: 20px 0; } .cs-stats-row { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; } .cs-stat-item { text-align: center; } .cs-stat-val { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--gold); display: block; } .cs-stat-label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; } .cs-stat-divider { width: 1px; height: 32px; background: var(--c-700); } @media (max-width: 640px) { .cs-stat-divider { display: none; } .cs-stats-row { gap: 20px; } } /* ===== FILTER (reuse blog filter) ===== */ .cs-filter { background: var(--c-900); border-bottom: 1px solid var(--c-700); padding: 16px 0; position: sticky; top: var(--header-h); z-index: 30; } /* ===== CASE STUDY GRID ===== */ .cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .cs-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .cs-grid { grid-template-columns: 1fr; } } /* ===== CASE STUDY CARD ===== */ .cs-card { display: flex; flex-direction: column; background: var(--c-900); border: 1px solid var(--c-700); border-radius: var(--radius-xl); padding: 28px; position: relative; overflow: hidden; transition: all 0.4s var(--ease-out); text-decoration: none; color: inherit; } .cs-card:hover { transform: translateY(-6px); border-color: rgba(212,175,55,0.3); box-shadow: 0 16px 40px rgba(0,0,0,0.3); } .cs-card.cs-featured { border-color: rgba(212,175,55,0.4); box-shadow: 0 0 30px rgba(212,175,55,0.06); } .cs-video-badge { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 100px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: var(--red); font-size: 10px; font-weight: 600; } .cs-stars { display: flex; gap: 2px; margin-bottom: 12px; color: var(--gold); } .cs-quote-mark { font-family: var(--font-serif); font-size: 48px; color: rgba(212,175,55,0.12); line-height: 0.8; margin-bottom: 4px; } .cs-card-title { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--white); line-height: 1.35; margin-bottom: 16px; } /* Journey before/after */ .cs-journey { margin-bottom: 18px; } .cs-journey-step { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; } .cs-step-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; flex-shrink: 0; } .cs-step-before { background: rgba(239,68,68,0.1); color: var(--red); border: 1px solid rgba(239,68,68,0.2); } .cs-step-after { background: rgba(34,197,94,0.1); color: var(--green); border: 1px solid rgba(34,197,94,0.2); } .cs-step-text { font-size: 13px; color: var(--text-dim); line-height: 1.5; font-weight: 300; } .cs-journey-arrow { text-align: center; color: rgba(212,175,55,0.3); font-size: 14px; padding: 2px 0; } /* Card meta */ .cs-card-meta { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .cs-package-tag { font-size: 10px; font-weight: 600; color: var(--gold); background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.15); padding: 3px 10px; border-radius: 100px; } .cs-days-tag { font-size: 10px; font-weight: 600; color: var(--text-faint); background: rgba(255,255,255,0.03); border: 1px solid var(--c-700); padding: 3px 10px; border-radius: 100px; } /* Card author */ .cs-card-author { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--c-700); margin-top: auto; } .cs-avatar-text { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; background: rgba(212,175,55,0.1); color: var(--gold); } .cs-avatar-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .cs-author-name { font-size: 13px; font-weight: 600; color: var(--white); display: block; } .cs-author-role { font-size: 10px; color: var(--text-faint); } .cs-read-more { display: block; margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--gold); letter-spacing: 0.04em; } /* ===== SINGLE CASE STUDY ===== */ .cs-single-hero { padding: 140px 0 40px; border-bottom: 1px solid var(--c-700); } .cs-single-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); background: rgba(212,175,55,0.08); padding: 5px 14px; border-radius: 100px; margin-bottom: 16px; border: 1px solid rgba(212,175,55,0.15); } /* Summary bar (before → after) */ .cs-summary-bar { display: flex; align-items: center; gap: 16px; margin: 28px 0; padding: 20px; background: var(--c-900); border: 1px solid var(--c-700); border-radius: var(--radius-xl); } .cs-sum-item { flex: 1; } .cs-sum-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; } .cs-sum-before .cs-sum-label { color: var(--red); } .cs-sum-after .cs-sum-label { color: var(--green); } .cs-sum-val { font-size: 14px; color: var(--text); font-weight: 300; line-height: 1.5; } .cs-sum-arrow { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(212,175,55,0.2); display: flex; align-items: center; justify-content: center; } @media (max-width: 640px) { .cs-summary-bar { flex-direction: column; text-align: center; } .cs-sum-arrow { transform: rotate(90deg); } } /* Single meta chips */ .cs-single-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } .cs-meta-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-faint); padding: 6px 12px; border-radius: 100px; border: 1px solid var(--c-700); background: var(--c-900); } .cs-meta-stars { gap: 2px; } /* Video player */ .cs-video-wrap { padding: 32px 0; } .cs-video-player { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--c-700); aspect-ratio: 16/9; background: var(--c-800); } .cs-video-player iframe { width: 100%; height: 100%; border: none; } /* Timeline result bar */ .cs-timeline-result { padding: 48px 0; border-top: 1px solid var(--c-700); } .cs-result-steps { display: flex; align-items: flex-start; gap: 0; position: relative; } .cs-result-steps::before { content: ""; position: absolute; top: 11px; left: 24px; right: 24px; height: 2px; background: linear-gradient(to right, var(--red), var(--gold) 40%, var(--green)); } .cs-result-step { flex: 1; text-align: center; position: relative; } .cs-rs-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-600); background: var(--c-950); margin: 0 auto 8px; position: relative; z-index: 1; } .cs-result-step:first-child .cs-rs-dot { border-color: var(--red); } .cs-result-step:nth-child(2) .cs-rs-dot { border-color: var(--gold); } .cs-result-step:nth-child(3) .cs-rs-dot { border-color: var(--gold); } .cs-rs-final .cs-rs-dot { border-color: var(--green); background: var(--green); } .cs-rs-label { font-size: 11px; font-weight: 700; color: var(--white); margin-bottom: 2px; } .cs-rs-desc { font-size: 11px; color: var(--text-faint); font-weight: 300; } @media (max-width: 480px) { .cs-result-steps { flex-direction: column; gap: 16px; align-items: flex-start; padding-left: 24px; } .cs-result-steps::before { top: 0; bottom: 0; left: 10px; right: auto; width: 2px; height: auto; } .cs-result-step { display: flex; align-items: center; gap: 12px; text-align: left; } .cs-rs-dot { margin: 0; } } /* ===== POLICY PAGES ===== */ .policy-hero { padding: 140px 0 40px; border-bottom: 1px solid var(--c-700); } .policy-icon { width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(212,175,55,0.3); display: flex; align-items: center; justify-content: center; color: var(--gold); margin: 0 auto 20px; box-shadow: 0 0 30px rgba(212,175,55,0.1); } .policy-update { font-size: 12px; color: var(--text-faint); margin-top: 8px; } .policy-content { padding: 48px 0 80px; } /* Trust bar */ .policy-trust-bar { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 18px; background: var(--c-900); border: 1px solid var(--c-700); border-radius: var(--radius-xl); margin-bottom: 40px; flex-wrap: wrap; } .ptb-item { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-dim); } /* Policy body — content from WP editor */ .policy-body { margin-bottom: 48px; } .policy-body h2 { font-family: var(--font-serif); font-size: 26px; font-weight: 700; color: var(--white); margin: 48px 0 16px; padding-top: 32px; border-top: 1px solid var(--c-700); line-height: 1.3; } .policy-body h2:first-child { border-top: none; margin-top: 0; padding-top: 0; } .policy-body h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--white); margin: 32px 0 12px; } .policy-body p { font-size: 15px; color: var(--text); line-height: 1.9; font-weight: 300; margin-bottom: 18px; } .policy-body p strong { color: var(--white); font-weight: 600; } .policy-body p em { color: var(--gold); } .policy-body ul, .policy-body ol { padding-left: 24px; margin-bottom: 20px; } .policy-body li { font-size: 15px; color: var(--text-dim); line-height: 1.8; margin-bottom: 8px; font-weight: 300; } .policy-body li strong { color: var(--white); font-weight: 600; } .policy-body blockquote { border-left: 3px solid var(--gold); padding: 16px 24px; background: rgba(212,175,55,0.03); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: 28px 0; font-family: var(--font-serif); font-size: 17px; font-style: italic; color: var(--text); line-height: 1.8; } .policy-body table { width: 100%; border-collapse: collapse; margin: 24px 0; } .policy-body th { text-align: left; font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; padding: 12px 16px; border-bottom: 2px solid var(--c-700); font-weight: 700; } .policy-body td { font-size: 14px; color: var(--text-dim); padding: 12px 16px; border-bottom: 1px solid var(--c-800); font-weight: 300; } .policy-body td strong { color: var(--white); } .policy-body hr { border: none; height: 1px; background: var(--c-700); margin: 40px 0; } /* Highlight box within policy */ .policy-body .policy-highlight { background: var(--c-900); border: 1px solid rgba(212,175,55,0.2); border-radius: var(--radius-lg); padding: 24px; margin: 28px 0; } .policy-body .policy-highlight p { margin-bottom: 8px; } .policy-body .policy-highlight p:last-child { margin-bottom: 0; } /* Contact box */ .policy-contact { background: var(--c-900); border: 1px solid var(--c-700); border-radius: var(--radius-xl); padding: 32px; text-align: center; margin-bottom: 32px; } .policy-contact h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--white); margin-bottom: 8px; } .policy-contact p { font-size: 14px; color: var(--text-dim); margin-bottom: 16px; font-weight: 300; } .policy-contact-methods { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } .pcm-item { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gold); text-decoration: none; transition: color 0.2s; } .pcm-item:hover { color: var(--gold-light); } .pcm-divider { width: 1px; height: 16px; background: var(--c-700); } /* Related policies */ .policy-related { text-align: center; padding-top: 24px; border-top: 1px solid var(--c-700); } .pr-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; } .pr-links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .pr-link { font-size: 13px; color: var(--text-dim); padding: 8px 16px; border: 1px solid var(--c-700); border-radius: 100px; text-decoration: none; transition: all 0.3s; } .pr-link:hover { border-color: rgba(212,175,55,0.3); color: var(--gold); } /* ===== COMPARE HERO ===== */ .cmp-hero { padding: 140px 0 48px; position: relative; overflow: hidden; } /* ===== HOOK ===== */ .cmp-hook { padding: 32px 0; border-bottom: 1px solid var(--c-700); } /* ===== 4 CARDS ===== */ .cmp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; } @media (max-width: 1023px) { .cmp-cards { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .cmp-cards { grid-template-columns: 1fr; } } .cmp-card { background: var(--c-900); border: 1px solid var(--c-700); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; transition: all 0.4s var(--ease-out); position: relative; } .cmp-card:hover { transform: translateY(-4px); } .cmp-other { opacity: 0.85; } .cmp-other:hover { opacity: 1; } .cmp-featured { border-color: rgba(212,175,55,0.4); box-shadow: 0 0 40px rgba(212,175,55,0.08); } .cmp-featured-tag { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--c-950); padding: 5px 18px; border-radius: 0 0 10px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; z-index: 2; } .cmp-card-header { padding: 28px 24px 20px; text-align: center; border-bottom: 1px solid var(--c-700); } .cmp-featured .cmp-card-header { padding-top: 40px; border-bottom-color: rgba(212,175,55,0.15); } .cmp-emoji { font-size: 32px; display: block; margin-bottom: 12px; } .cmp-card-header h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--white); line-height: 1.3; margin-bottom: 6px; } .cmp-price { font-size: 13px; color: var(--text-faint); font-weight: 300; } .cmp-card-body { padding: 20px 24px 28px; flex: 1; display: flex; flex-direction: column; } .cmp-desc { font-size: 13px; color: var(--text-dim); line-height: 1.7; font-weight: 300; margin-bottom: 18px; font-style: italic; } .cmp-desc strong { color: var(--white); } .cmp-traits { flex: 1; margin-bottom: 18px; } .cmp-trait { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-dim); padding: 6px 0; line-height: 1.5; font-weight: 300; } .cmp-trait span { flex-shrink: 0; font-weight: 700; width: 18px; text-align: center; } .cmp-trait strong { color: var(--white); font-weight: 600; } .cmp-no span { color: var(--red); } .cmp-yes span { color: var(--green); } .cmp-mid span { color: var(--gold); } .cmp-feeling { padding-top: 14px; border-top: 1px solid var(--c-700); } .cmp-feel-label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; } .cmp-feel-text { font-family: var(--font-serif); font-size: 14px; font-style: italic; line-height: 1.6; } /* ===== COMPARISON TABLE ===== */ .cmp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-xl); border: 1px solid var(--c-700); } .cmp-table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: 13px; } .cmp-table thead { background: var(--c-800); } .cmp-th-feature { text-align: left; padding: 14px 18px; font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; width: 25%; } .cmp-th-other { text-align: center; padding: 14px 12px; font-size: 12px; font-weight: 600; color: var(--text-faint); width: 15%; } .cmp-th-atm { text-align: center; padding: 14px 12px; font-size: 12px; font-weight: 700; color: var(--gold); width: 22%; background: rgba(212,175,55,0.04); border-left: 2px solid rgba(212,175,55,0.15); } .cmp-table tbody tr { border-bottom: 1px solid var(--c-800); transition: background 0.2s; } .cmp-table tbody tr:hover { background: rgba(255,255,255,0.01); } .cmp-td-feature { padding: 12px 18px; font-weight: 500; color: var(--white); } .cmp-td-other { padding: 12px; text-align: center; color: var(--text-faint); } .cmp-td-atm { padding: 12px; text-align: center; color: var(--gold); background: rgba(212,175,55,0.02); border-left: 2px solid rgba(212,175,55,0.08); font-weight: 500; } .cmp-td-atm strong { color: var(--gold-light); font-weight: 700; } /* ===== EXIT-INTENT POPUP ===== */ .exit-overlay { display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.75); backdrop-filter:blur(8px); align-items:center; justify-content:center; padding:20px; } .exit-overlay.show { display:flex; } .exit-box { background:var(--c-900); border:1px solid rgba(212,175,55,.25); border-radius:24px; max-width:580px; width:100%; position:relative; box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(212,175,55,.06); animation:exitIn .5s var(--ease-out); overflow:hidden; } @keyframes exitIn { from { opacity:0; transform:scale(.92) translateY(20px); } to { opacity:1; transform:scale(1) translateY(0); } } .exit-box::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(to right,var(--gold),var(--gold-dark)); } .exit-close { position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:var(--text-faint); cursor:pointer; transition:all .2s; z-index:2; font-family:inherit; } .exit-close:hover { background:rgba(255,255,255,.1); color:var(--white); } .exit-content { display:flex; gap:0; } .exit-visual { width:180px; flex-shrink:0; background:linear-gradient(135deg,rgba(212,175,55,.06),rgba(10,10,10,.4)); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 20px; gap:20px; } .exit-pdf-icon { width:64px; height:64px; border-radius:var(--radius-lg); border:1px solid rgba(212,175,55,.3); display:flex; align-items:center; justify-content:center; color:var(--gold); position:relative; box-shadow:0 0 20px rgba(212,175,55,.1); } .exit-pdf-badge { position:absolute; bottom:-6px; right:-6px; background:var(--red); color:var(--white); font-size:8px; font-weight:800; padding:2px 6px; border-radius:4px; letter-spacing:.05em; } .exit-pdf-preview { display:flex; flex-direction:column; gap:6px; width:80px; } .epp-line { height:3px; border-radius:2px; background:rgba(212,175,55,.12); } .epp-1 { width:100%; } .epp-2 { width:70%; } .epp-3 { width:85%; } .exit-text { flex:1; padding:32px 28px 28px 24px; } .exit-hook { font-size:12px; color:var(--text-faint); font-weight:600; text-transform:uppercase; letter-spacing:.1em; margin-bottom:10px; } .exit-text h3 { font-family:var(--font-serif); font-size:24px; font-weight:700; color:var(--white); line-height:1.3; margin-bottom:12px; } .exit-desc { font-size:13px; color:var(--text-dim); line-height:1.7; font-weight:300; margin-bottom:16px; } .exit-desc strong { color:var(--white); font-weight:600; } .exit-desc em { color:var(--gold); } .exit-bullets { margin-bottom:18px; } .exit-bullet { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--text-dim); padding:4px 0; line-height:1.5; font-weight:300; } .exit-bullet span { flex-shrink:0; font-weight:700; } .exit-form { display:flex; flex-direction:column; gap:8px; } .exit-input { width:100%; padding:12px 14px; border-radius:var(--radius-sm); background:var(--c-950); border:1px solid var(--c-600); color:var(--white); font-size:13px; outline:none; font-family:inherit; min-height:44px; transition:border-color .2s; } .exit-input:focus { border-color:var(--gold); } .exit-input::placeholder { color:var(--text-faint); } .exit-form-row { display:flex; gap:8px; } .exit-btn { padding:12px 20px !important; font-size:11px !important; white-space:nowrap; min-height:44px !important; } .exit-privacy { font-size:10px; color:var(--text-faint); margin-top:10px; } .exit-success { display:none; padding:48px 32px; text-align:center; } @media (max-width:640px) { .exit-content { flex-direction:column; } .exit-visual { width:100%; flex-direction:row; padding:20px; gap:16px; } .exit-pdf-preview { display:none; } .exit-text { padding:20px; } .exit-form-row { flex-direction:column; } } /* ===== FOMO BAR ===== */ .fomo-bar { position:fixed; bottom:0; left:0; right:0; z-index:85; background:rgba(10,10,10,.95); backdrop-filter:blur(12px); border-top:1px solid rgba(212,175,55,.15); padding:0; transform:translateY(100%); transition:transform .5s var(--ease-out); } .fomo-bar.show { transform:translateY(0); } .fomo-inner { display:flex; align-items:center; gap:14px; padding:12px 0; } .fomo-pulse { width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0; animation:pulse 2s infinite; } .fomo-text { display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:1; min-width:0; } .fomo-label { font-size:12px; color:var(--text-dim); font-weight:300; } .fomo-limit { font-size:12px; color:var(--white); font-weight:700; } .fomo-divider { color:var(--c-600); } .fomo-remaining { font-size:12px; color:var(--gold); font-weight:600; } .fomo-remaining strong { font-family:var(--font-serif); font-size:18px; color:var(--gold-light); } .fomo-progress { width:80px; height:4px; border-radius:2px; background:var(--c-700); overflow:hidden; flex-shrink:0; } .fomo-progress-bar { height:100%; border-radius:2px; background:linear-gradient(to right,var(--green),var(--gold)); transition:width 1s var(--ease-out); } .fomo-cta { display:inline-flex; align-items:center; padding:8px 16px; border-radius:var(--radius-sm); background:var(--gold); color:var(--c-950); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; text-decoration:none; white-space:nowrap; transition:all .2s; flex-shrink:0; } .fomo-cta:hover { transform:scale(1.03); box-shadow:var(--shadow-gold); } .fomo-close { width:28px; height:28px; border-radius:50%; background:transparent; border:1px solid var(--c-600); display:flex; align-items:center; justify-content:center; color:var(--text-faint); cursor:pointer; flex-shrink:0; transition:all .2s; font-family:inherit; } .fomo-close:hover { border-color:var(--text-dim); color:var(--white); } @media (max-width:768px) { .fomo-inner { flex-wrap:wrap; gap:8px; padding:10px 0; } .fomo-progress { width:100%; order:10; } .fomo-text { font-size:11px; } body.fomo-visible { padding-bottom:120px; } } /* Adjust mobile CTA when fomo bar is visible */ body.fomo-visible .mobile-cta { bottom:52px; } /* ===== COMMUNITY HERO ===== */ .cd-hero { padding: 160px 0 80px; position: relative; overflow: hidden; } .cd-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(212,175,55,0.06), transparent 60%); pointer-events: none; } .cd-moon { font-size: 56px; margin-bottom: 20px; opacity: 0.8; } /* ===== WHO IS INSIDE ===== */ .cd-who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 768px) { .cd-who-grid { grid-template-columns: 1fr; } } .cd-who-card { background: var(--c-900); border: 1px solid var(--c-700); border-radius: var(--radius-xl); padding: 28px; text-align: center; transition: all 0.4s var(--ease-out); } .cd-who-card:hover { transform: translateY(-6px); border-color: rgba(212,175,55,0.25); } .cd-who-icon { font-size: 32px; margin-bottom: 14px; } .cd-who-card h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 8px; } .cd-who-card p { font-size: 13px; color: var(--text-dim); line-height: 1.7; font-weight: 300; } .cd-who-card p em { color: var(--gold); } /* ===== CONTENT PREVIEW ===== */ .cd-content-grid { display: flex; flex-direction: column; gap: 16px; } .cd-preview-card { background: var(--c-900); border: 1px solid var(--c-700); border-radius: var(--radius-xl); overflow: hidden; transition: border-color 0.3s; } .cd-preview-card:hover { border-color: rgba(212,175,55,0.2); } .cd-pv-header { display: flex; align-items: center; gap: 12px; padding: 20px 24px 0; } .cd-pv-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } .cd-pv-author { font-size: 13px; font-weight: 600; color: var(--white); display: block; } .cd-pv-time { font-size: 11px; color: var(--text-faint); } .cd-pv-title { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--white); padding: 14px 24px 0; line-height: 1.4; } .cd-pv-text { font-size: 14px; color: var(--text-dim); line-height: 1.8; font-weight: 300; padding: 8px 24px 0; } .cd-pv-text em { color: var(--gold); } .cd-pv-blur { padding: 20px 24px; margin-top: 16px; background: linear-gradient(to bottom, transparent, var(--c-800)); text-align: center; position: relative; } .cd-pv-blur::before { content: ''; position: absolute; top: -40px; left: 0; right: 0; height: 40px; background: linear-gradient(to top, var(--c-800), transparent); pointer-events: none; } .cd-pv-blur p { font-size: 12px; color: var(--text-faint); font-weight: 500; } /* ===== 4 PILLARS ===== */ .cd-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .cd-pillars { grid-template-columns: 1fr; } } .cd-pillar { background: var(--c-950); border: 1px solid var(--c-700); border-radius: var(--radius-xl); padding: 28px; transition: border-color 0.3s; position: relative; } .cd-pillar:hover { border-color: rgba(212,175,55,0.25); } .cd-pl-num { position: absolute; top: 16px; right: 18px; font-family: var(--font-serif); font-size: 32px; font-weight: 700; color: rgba(212,175,55,0.08); } .cd-pillar h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 8px; } .cd-pillar p { font-size: 13px; color: var(--text-dim); line-height: 1.75; font-weight: 300; } .cd-pillar p strong { color: var(--white); font-weight: 600; } .cd-pillar p em { color: var(--gold); } /* ===== MEMBER VOICES ===== */ .cd-voices { display: flex; flex-direction: column; gap: 16px; } .cd-voice { background: var(--c-900); border: 1px solid var(--c-700); border-radius: var(--radius-xl); padding: 28px; position: relative; transition: border-color 0.3s; } .cd-voice:hover { border-color: rgba(212,175,55,0.15); } .cd-voice-quote { position: absolute; top: 10px; left: 18px; font-family: var(--font-serif); font-size: 56px; color: rgba(212,175,55,0.08); line-height: 1; } .cd-voice-text { font-size: 15px; color: var(--text); line-height: 1.85; font-weight: 300; font-style: italic; margin-bottom: 16px; } .cd-voice-text em { color: var(--gold); font-style: italic; } .cd-voice-text strong { color: var(--white); font-weight: 600; } .cd-voice-author { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--c-700); } .cd-voice-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } .cd-voice-name { font-size: 13px; font-weight: 600; color: var(--white); display: block; } .cd-voice-role { font-size: 11px; color: var(--text-faint); } /* ===== HIẾU PROMISE ===== */ .cd-promise { padding: 60px 20px; border-top: 1px solid var(--c-700); border-bottom: 1px solid var(--c-700); background: var(--c-950); position: relative; } .cd-promise::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px; height: 400px; background: radial-gradient(circle, rgba(212,175,55,0.03), transparent 70%); } /* ===== HOW TO JOIN ===== */ .cd-steps { display: flex; flex-direction: column; gap: 0; } .cd-step { display: flex; gap: 20px; align-items: flex-start; padding: 24px; border-radius: var(--radius-xl); background: var(--c-950); border: 1px solid var(--c-700); margin-bottom: 12px; transition: border-color 0.3s; } .cd-step:hover { border-color: rgba(212,175,55,0.25); } .cd-step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--c-900); border: 1px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 700; font-size: 18px; flex-shrink: 0; box-shadow: 0 0 15px rgba(212,175,55,0.1); } .cd-step h3 { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--white); margin-bottom: 6px; } .cd-step p { font-size: 14px; color: var(--text-dim); line-height: 1.7; font-weight: 300; } .cd-step p strong { color: var(--white); font-weight: 600; } .cd-step p em { color: var(--gold); } /* ===== VIDEO GRID — Community page ===== */ .cd-video-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .cd-video-card { background: var(--c-900); border: 1px solid var(--c-700); border-radius: var(--radius-xl); overflow: hidden; transition: border-color 0.3s; } .cd-video-card:hover { border-color: rgba(212,175,55,0.2); } .cd-video-featured { border-color: rgba(212,175,55,0.15); } .cd-video-player { position: relative; aspect-ratio: 16/9; background: var(--c-800); overflow: hidden; } .cd-video-player iframe { width: 100%; height: 100%; border: none; } .cd-video-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; transition: all 0.3s; } .cd-video-placeholder:hover .cd-vp-play { transform: scale(1.15); box-shadow: 0 0 30px rgba(212,175,55,0.3); } .cd-vp-play { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(212,175,55,0.4); background: rgba(10,10,10,0.7); display: flex; align-items: center; justify-content: center; transition: all 0.3s; } .cd-vp-label { font-size: 12px; color: var(--text-faint); } .cd-vp-sm .cd-vp-play { width: 48px; height: 48px; } .cd-vp-sm .cd-vp-play svg { width: 20px; height: 20px; } .cd-video-info { padding: 20px 24px; } .cd-video-info h3 { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--white); line-height: 1.4; margin-bottom: 6px; } .cd-video-info p { font-size: 12px; color: var(--text-faint); } .cd-video-grid:not(.cd-video-single) { grid-template-columns: 1fr 1fr; } .cd-video-featured { grid-column: 1 / -1; } @media (max-width: 640px) { .cd-video-grid:not(.cd-video-single) { grid-template-columns: 1fr; } } /* ===== KB HERO ===== */ .kb-hero { padding: 140px 0 48px; position: relative; overflow: hidden; } /* ===== SEARCH BAR ===== */ .kb-search-bar { background: var(--c-900); border-bottom: 1px solid var(--c-700); padding: 20px 0; position: sticky; top: var(--header-h); z-index: 30; } .kb-search-wrap { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--c-950); border: 1px solid var(--c-700); border-radius: var(--radius-xl); transition: border-color 0.3s; } .kb-search-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.08); } .kb-search-wrap svg { color: var(--text-faint); flex-shrink: 0; } .kb-search-input { flex: 1; background: transparent; border: none; color: var(--white); font-size: 15px; outline: none; font-family: inherit; } .kb-search-input::placeholder { color: var(--text-faint); } /* ===== TOPIC CARDS ===== */ .kb-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 900px) { .kb-topics { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .kb-topics { grid-template-columns: 1fr; } } .kb-topic-card { background: var(--c-900); border: 1px solid var(--c-700); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; transition: all 0.4s var(--ease-out); position: relative; overflow: hidden; } .kb-topic-card:hover { transform: translateY(-4px); border-color: rgba(212,175,55,0.25); } .kb-topic-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .kb-t1::before { background: var(--gold); } .kb-t2::before { background: var(--green); } .kb-t3::before { background: var(--blue); } .kb-t4::before { background: var(--pink); } .kb-t5::before { background: #a070e8; } .kb-t6::before { background: var(--red); } .kb-tc-icon { font-size: 28px; margin-bottom: 12px; } .kb-topic-card h2 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--white); margin-bottom: 8px; } .kb-topic-card > p { font-size: 13px; color: var(--text-dim); line-height: 1.7; font-weight: 300; margin-bottom: 16px; } .kb-tc-articles { flex: 1; margin-bottom: 16px; } .kb-tc-articles span { display: block; font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 8px; } .kb-tc-articles a { display: block; font-size: 13px; color: var(--text); padding: 6px 0; border-bottom: 1px solid var(--c-800); text-decoration: none; transition: color 0.2s; font-weight: 300; } .kb-tc-articles a:hover { color: var(--gold); } .kb-tc-articles a:last-child { border-bottom: none; } .kb-tc-cta { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--gold); text-decoration: none; transition: color 0.2s; margin-top: auto; } .kb-tc-cta:hover { color: var(--gold-light); } /* ===== VIDEO GRID ===== */ .kb-video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 768px) { .kb-video-grid { grid-template-columns: 1fr; } } .kb-vid-card { background: var(--c-900); border: 1px solid var(--c-700); border-radius: var(--radius-xl); overflow: hidden; transition: border-color 0.3s; } .kb-vid-card:hover { border-color: rgba(212,175,55,0.2); } .kb-vid-player { position: relative; aspect-ratio: 16/9; background: var(--c-800); } .kb-vid-player iframe { width: 100%; height: 100%; border: none; } .kb-vid-info { padding: 16px 20px; } .kb-vid-tag { font-size: 9px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 6px; } .kb-vid-info h3 { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--white); line-height: 1.35; } /* ============================================================ PASTE vào cuối style.css ============================================================ */ /* ===== TMH HERO ===== */ .tmh-hero { padding: 160px 0 80px; position: relative; overflow: hidden; } .tmh-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(212,175,55,0.08), transparent 60%); pointer-events: none; } /* ===== 6 LENS GRID ===== */ .tmh-lens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 768px) { .tmh-lens-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .tmh-lens-grid { grid-template-columns: 1fr; } } .tmh-lens { background: var(--c-900); border: 1px solid var(--c-700); border-radius: var(--radius-xl); padding: 24px; text-align: center; transition: all 0.3s; } .tmh-lens:hover { border-color: rgba(212,175,55,0.2); } .tmh-lens-icon { font-size: 28px; margin-bottom: 10px; } .tmh-lens h3 { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--white); margin-bottom: 10px; } .tmh-lens-see { font-size: 12px; color: var(--green); margin-bottom: 4px; } .tmh-lens-miss { font-size: 12px; color: var(--red); font-style: italic; } /* ===== 7 LAYERS ===== */ .tmh-layers { display: flex; flex-direction: column; gap: 8px; } .tmh-layer { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border-radius: var(--radius-xl); background: var(--c-950); border: 1px solid var(--c-700); transition: all 0.3s; position: relative; } .tmh-layer:hover { border-color: rgba(212,175,55,0.2); } .tmh-new { border-color: rgba(34,197,94,0.2); } .tmh-core { border-color: rgba(212,175,55,0.4); box-shadow: 0 0 30px rgba(212,175,55,0.06); } .tmh-l-num { width: 40px; height: 40px; border-radius: 50%; background: var(--c-900); border: 1px solid var(--c-600); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--text-dim); flex-shrink: 0; } .tmh-core .tmh-l-num { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 15px rgba(212,175,55,0.15); } .tmh-l-badge { position: absolute; top: 12px; right: 16px; font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 4px; background: var(--green); color: var(--c-950); letter-spacing: .06em; } .tmh-l-body h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 2px; } .tmh-l-source { font-size: 11px; color: var(--gold); font-weight: 600; margin-bottom: 6px; } .tmh-l-body p:last-child { font-size: 14px; color: var(--text-dim); line-height: 1.7; font-weight: 300; } .tmh-l-body p:last-child em { color: var(--gold); } /* ===== TÂM SỐ SCALE ===== */ .tmh-tam-scale { display: flex; flex-direction: column; gap: 6px; } .tmh-tam-row { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-radius: var(--radius-lg); background: var(--c-950); border: 1px solid var(--c-800); transition: border-color 0.3s; } .tmh-tam-row:hover { border-color: rgba(212,175,55,0.15); } .tmh-tam-val { font-family: var(--font-serif); font-size: 20px; font-weight: 700; width: 48px; text-align: center; flex-shrink: 0; } .tmh-tam-low .tmh-tam-val { color: var(--red); } .tmh-tam-mid .tmh-tam-val { color: var(--text-dim); } .tmh-tam-good .tmh-tam-val { color: var(--green); } .tmh-tam-great .tmh-tam-val { color: var(--gold); } .tmh-tam-enlightened .tmh-tam-val { color: var(--gold-light); } .tmh-tam-transcend .tmh-tam-val { color: var(--white); font-size: 24px; } .tmh-tam-label { font-size: 14px; font-weight: 600; color: var(--white); width: 120px; flex-shrink: 0; } .tmh-tam-effect { font-size: 13px; color: var(--text-dim); font-weight: 300; flex: 1; } @media (max-width: 640px) { .tmh-tam-row { flex-wrap: wrap; gap: 8px; } .tmh-tam-label { width: auto; } } /* ===== TRANSFORM GRID ===== */ .tmh-transform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .tmh-transform-grid { grid-template-columns: 1fr; } } .tmh-tf-card { background: var(--c-900); border: 1px solid var(--c-700); border-radius: var(--radius-xl); padding: 24px; position: relative; transition: border-color 0.3s; } .tmh-tf-card:hover { border-color: rgba(212,175,55,0.2); } .tmh-tf-core { border-color: rgba(212,175,55,0.3); grid-column: 1 / -1; text-align: center; } .tmh-tf-num { position: absolute; top: 14px; right: 16px; font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: rgba(212,175,55,0.08); } .tmh-tf-card h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 4px; } .tmh-tf-target { font-size: 11px; color: var(--gold); font-weight: 600; margin-bottom: 8px; } .tmh-tf-card > p:last-child { font-size: 14px; color: var(--text-dim); line-height: 1.7; font-weight: 300; } .tmh-tf-card > p:last-child em { color: var(--gold); } /* ============================================================ MEGA MENU — Desktop Dropdown + Mobile Slide ============================================================ */ /* Desktop nav layout — inherits from line 106 */ .nav-link { font-size: 12px; font-weight: 600; color: var(--text-dim); padding: 8px 12px; border-radius: 8px; text-decoration: none; transition: all 0.2s; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; font-family: inherit; } .nav-link:hover { color: var(--white); background: rgba(255,255,255,0.04); } .nav-chevron { transition: transform 0.3s; } /* Dropdown container */ .nav-dropdown { position: relative; } .nav-drop-panel { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 280px; padding: 8px; background: var(--c-900); border: 1px solid var(--c-700); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); margin-top: 8px; z-index: 100; } .nav-dropdown:hover .nav-drop-panel, .nav-dropdown.open .nav-drop-panel { display: block; } .nav-dropdown:hover .nav-chevron { transform: rotate(180deg); } .nav-drop-panel::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } .ndp-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 10px; text-decoration: none; transition: background 0.2s; } .ndp-item:hover { background: rgba(255,255,255,0.03); } .ndp-icon { font-size: 20px; flex-shrink: 0; line-height: 1; margin-top: 2px; } .ndp-text strong { font-size: 13px; color: var(--white); font-weight: 600; display: block; margin-bottom: 2px; } .ndp-text small { font-size: 11px; color: var(--text-faint); font-weight: 300; } /* Nav CTA button */ .nav-cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 10px; background: var(--gold); color: var(--c-950); font-size: 11px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; transition: all 0.2s; white-space: nowrap; } .nav-cta:hover { transform: scale(1.03); box-shadow: var(--shadow-gold); } .mm-section { margin-bottom: 16px; } .mm-label { font-size: 9px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.15em; padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--c-800); } .mm-link { display: flex; align-items: center; gap: 10px; padding: 12px 8px; font-size: 14px; color: var(--text); text-decoration: none; border-radius: 10px; transition: background 0.2s; } .mm-link:hover { background: rgba(255,255,255,0.03); } .mm-gold { color: var(--gold); font-weight: 600; } .mm-cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; background: var(--gold); color: var(--c-950); border-radius: 12px; font-size: 14px; font-weight: 700; text-decoration: none; text-align: center; } /* ============================================================ SECTION "XEM THÊM" LINKS — front-page.php ============================================================ */ .section-more { display: flex; justify-content: center; padding: 24px 0 0; } .section-more-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 100px; border: 1px solid var(--c-700); background: transparent; color: var(--text-dim); font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.3s; font-family: inherit; cursor: pointer; } .section-more-btn:hover { border-color: rgba(212,175,55,0.3); color: var(--gold); background: rgba(212,175,55,0.03); } .section-more-btn svg { width: 14px; height: 14px; transition: transform 0.3s; } .section-more-btn:hover svg { transform: translateX(4px); } /* ============================================================ CAL.COM BOOKING EMBED ============================================================ */ #cal-panel iframe { background: var(--c-900); } #cal-panel .calendly-inline-widget { background: var(--c-900); } #cal-panel { transition: all 0.3s; } #zalo-panel { transition: all 0.3s; } /* ============================================================ LANGUAGE SWITCHER ============================================================ */ .lang-switcher { position: relative; } .lang-current { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--c-700); background: transparent; color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; } .lang-current:hover { border-color: rgba(212,175,55,0.3); color: var(--white); } .lang-flag { font-size: 14px; line-height: 1; } .lang-code { text-transform: uppercase; letter-spacing: 0.06em; } .lang-chevron { transition: transform 0.3s; } .lang-dropdown { display: none; position: absolute; top: 100%; right: 0; width: 180px; padding: 6px; background: var(--c-900); border: 1px solid var(--c-700); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,0.4); margin-top: 6px; z-index: 200; } .lang-switcher.open .lang-dropdown { display: block; } .lang-switcher.open .lang-chevron { transform: rotate(180deg); } .lang-dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none; font-size: 13px; color: var(--text); transition: background 0.2s; } .lang-dropdown a:hover { background: rgba(255,255,255,0.03); } .lang-dropdown a.lang-active { color: var(--gold); font-weight: 600; } .lang-dropdown::before { content: ''; position: absolute; top: -6px; right: 20px; width: 12px; height: 12px; background: var(--c-900); border-left: 1px solid var(--c-700); border-top: 1px solid var(--c-700); transform: rotate(45deg); } /* ============================================================ MEMBERSHIP — Locked content, login forms ============================================================ */ .atm-locked-content { background: var(--c-900); border: 1px solid var(--c-700); border-radius: 20px; padding: 40px 28px; text-align: center; } .atm-lock-icon { color: var(--gold); margin-bottom: 8px; opacity: 0.6; } .atm-locked-content h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 8px; } .atm-locked-content p { font-size: 14px; color: var(--text-dim); line-height: 1.7; } .form-input { width: 100%; padding: 14px 16px; background: var(--c-950); border: 1px solid var(--c-700); border-radius: 12px; color: var(--white); font-size: 15px; font-family: inherit; transition: border-color 0.2s; outline: none; box-sizing: border-box; } .form-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.08); } .form-input::placeholder { color: var(--text-faint); } /* ============================================================ POLISH — Section transitions & micro-interactions ============================================================ */ /* Section dividers — gold glow line between sections */ .section-border::before { content: ''; display: block; width: 80px; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,55,0.4), transparent); margin: 0 auto 0; } /* Reveal animation enhancement — stagger children */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); } .reveal.active { opacity: 1; transform: translateY(0); } /* Stagger children */ .reveal.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.stagger.active > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.05s; } .reveal.stagger.active > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; } .reveal.stagger.active > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; } .reveal.stagger.active > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; } .reveal.stagger.active > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.25s; } .reveal.stagger.active > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; } /* Smooth scroll for anchor links */ html { scroll-behavior: smooth; } /* Card hover depth — subtle lift */ .eco-card:hover, .pricing-card:hover, .pain-card:hover, .blog-card:hover, .kb-topic-card:hover, .cd-who-card:hover, .tmh-layer:hover, .cd-voice:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.3); } /* Gold underline animation for links */ .eco-cta, .kb-tc-cta, .section-more-btn { position: relative; } .eco-cta::after, .kb-tc-cta::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--gold); transition: width 0.3s ease; } .eco-cta:hover::after, .kb-tc-cta:hover::after { width: 100%; } /* Button pulse on CTA */ .btn-glow { animation: btnPulse 3s ease-in-out infinite; } @keyframes btnPulse { 0%, 100% { box-shadow: 0 0 20px rgba(212,175,55,0.2); } 50% { box-shadow: 0 0 35px rgba(212,175,55,0.4); } } /* Mobile touch targets — ensure 48px minimum */ @media (max-width: 768px) { .nav-link, .mm-link, .btn, button, a[href] { min-height: 44px; } .mm-link { padding: 14px 12px; } /* Better mobile spacing */ .section { padding: 48px 0; } .section-title { font-size: clamp(24px, 6vw, 40px); } h1 { font-size: clamp(28px, 7vw, 48px); } /* Stack booking tabs vertically on small screens */ #cal-panel iframe { height: 500px; } } @media (max-width: 375px) { .container { padding: 0 16px; } .section { padding: 40px 0; } .pricing-card { padding: 24px 16px; } .eco-card { padding: 20px 16px; } } /* Tablet optimization */ @media (min-width: 769px) and (max-width: 1023px) { .pricing-grid { grid-template-columns: 1fr 1fr; } .eco-grid { grid-template-columns: 1fr 1fr; } } /* Loading spinner */ @keyframes spin { to { transform: rotate(360deg); } } /* Focus visible — accessibility */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; } /* Print styles */ @media print { .header, .footer, .scroll-progress, .mobile-cta, .fomo-bar, .exit-overlay, .chat-toggle, #btt { display: none !important; } body { background: white; color: black; } .section { padding: 20px 0; } }