Saladin Pro (no header\/footer)<\/title>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<style>\n\/* Saladin Design System \u2014 tokens + fonts (slimmed for Saladin Pro landing) *\/\n\n@import url(\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans:wght@400;500;600;700&display=swap\");\n@import url(\"https:\/\/cdn.jsdelivr.net\/npm\/remixicon@4.5.0\/fonts\/remixicon.css\");\n\n\n:root {\n \/* Primary \u2014 Emerald (Saladin Green) *\/\n --primary-10:#00210A; --primary-20:#003916; --primary-30:#005323; --primary-40:#006D31;\n --primary-50:#008A40; --primary-60:#00A74F; --primary-70:#14C560; --primary-80:#44E178;\n --primary-90:#66FF92; --primary-95:#C5FFCA; --primary-99:#F6FFF2; --primary-100:#FFFFFF;\n\n \/* Navy (Saladin Blue) *\/\n --navy-10:#0A1530; --navy-20:#112147; --navy-30:#182E62; --navy-40:#1E3888;\n --navy-50:#2A4DAE; --navy-60:#4769C9; --navy-70:#6A8AE0; --navy-80:#94ADEC;\n --navy-90:#C2D0F6; --navy-95:#E1E8FB; --navy-99:#F4F6FE; --navy-100:#FFFFFF;\n\n \/* Secondary \u2014 sage *\/\n --secondary-10:#0E1F11; --secondary-20:#233425; --secondary-30:#394B3B; --secondary-40:#506351;\n --secondary-50:#697C69; --secondary-60:#829682; --secondary-70:#9CB19C; --secondary-80:#B7CCB6;\n --secondary-90:#DDE5DA; --secondary-95:#E1F6E0; --secondary-99:#F6FFF2; --secondary-100:#FFFFFF;\n\n \/* Tertiary \u2014 slate teal *\/\n --tertiary-10:#001F25; --tertiary-20:#00363E; --tertiary-30:#204D55; --tertiary-40:#39656D;\n --tertiary-50:#537E87; --tertiary-60:#6C98A1; --tertiary-70:#86B2BC; --tertiary-80:#A1CED8;\n --tertiary-90:#BDEAF4; --tertiary-95:#D3F7FF; --tertiary-99:#F7FDFF; --tertiary-100:#FFFFFF;\n\n \/* Neutral *\/\n --neutral-10:#161D17; --neutral-20:#2B322B; --neutral-30:#414941; --neutral-40:#596058;\n --neutral-50:#727970; --neutral-60:#8B9389; --neutral-70:#A6ADA3; --neutral-80:#C1C9BE;\n --neutral-90:#DDE5DA; --neutral-95:#EBF3E8; --neutral-99:#F7FEF3; --neutral-100:#FFFFFF;\n\n \/* Gray *\/\n --gray-10:#1B1D20; --gray-20:#373A40; --gray-30:#5C5F5F; --gray-40:#6B7280;\n --gray-50:#919294; --gray-60:#A6ADA3; --gray-70:#C4C7C7; --gray-80:#DCDFE3;\n --gray-90:#EFF1F1; --gray-95:#F2F4F7; --gray-99:#FAFAFA; --gray-100:#FFFFFF;\n\n \/* Error *\/\n --error-10:#410002; --error-20:#690005; --error-30:#93000A; --error-40:#BA1A1A;\n --error-50:#DE3730; --error-60:#FF5449; --error-70:#FF897D; --error-80:#FFB4AB;\n --error-90:#FFDAD6; --error-95:#FFEDEA; --error-99:#FFFBFF; --error-100:#FFFFFF;\n\n \/* Warning *\/\n --warning-10:#201C00; --warning-20:#373100; --warning-30:#504700; --warning-40:#6A5F00;\n --warning-50:#857800; --warning-60:#A29200; --warning-70:#BFAC00; --warning-80:#DDC800;\n --warning-90:#FCE40F; --warning-95:#FFF2A6; --warning-99:#FFFCF4; --warning-100:#FFFFFF;\n\n \/* Success *\/\n --success-10:#0B2000; --success-20:#173800; --success-30:#255100; --success-40:#336B00;\n --success-50:#418700; --success-60:#52A305; --success-70:#6BBF2B; --success-80:#86DC46;\n --success-90:#A0F960; --success-95:#CFFFA9; --success-99:#F8FFEB; --success-100:#FFFFFF;\n\n \/* Semantic *\/\n --bg:#FFFFFF; --bg-variant:#F8FAFA; --bg-alternative:var(--neutral-99);\n --bg-primary-action:var(--primary-70); --bg-primary-action-hover:var(--primary-60); --bg-primary-action-pressed:var(--primary-50);\n --bg-secondary-action:var(--primary-95);\n --bg-destructive-action:var(--error-40); --bg-destructive-action-hover:var(--error-30);\n --bg-error:var(--error-95); --bg-success:var(--primary-95); --bg-warning:var(--warning-95);\n --bg-active:var(--primary-95);\n --bg-container-lowest:var(--gray-99); --bg-container-low:var(--gray-95); --bg-container:var(--gray-90);\n --bg-container-high:var(--gray-80); --bg-container-highest:var(--gray-70);\n --bg-overlay-light:rgba(255,255,255,0.72); --bg-overlay-dark:rgba(0,0,0,0.48);\n\n --text-primary:var(--navy-40); --text-default:#1B1D20; --text-support:var(--gray-30);\n --text-information:var(--navy-40); --text-success:var(--primary-50); --text-error:var(--error-40);\n --text-warning:var(--warning-60); --text-warning-inverse:var(--warning-10);\n --text-on-primary:#FFFFFF; --text-on-secondary:var(--primary-40); --text-inverse:#FFFFFF;\n --text-disabled:var(--gray-50); --text-on-primary-disabled:rgba(255,255,255,0.6);\n\n --border-default:var(--gray-80); --border-strong:var(--gray-70);\n --border-primary:var(--primary-70); --border-error:var(--error-40); --border-on-bg:var(--secondary-90);\n\n --brand-green:var(--primary-70); --brand-navy:var(--navy-40);\n\n \/* Type *\/\n --font-sans:\"Noto Sans\",\"Segoe UI\",system-ui,-apple-system,sans-serif;\n --font-display:-apple-system,BlinkMacSystemFont,\"Noto Sans\",\"Segoe UI\",sans-serif;\n --font-ios:\"SF Pro Display\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\n --fs-display:52px; --lh-display:80px;\n --fs-h1:40px; --lh-h1:64px;\n --fs-h2:32px; --lh-h2:40px;\n --fs-h3:24px; --lh-h3:32px;\n --fs-h4:20px; --lh-h4:28px;\n --fs-h5:18px; --lh-h5:24px;\n --fs-body:16px; --lh-body:24px;\n --fs-body-sm:14px; --lh-body-sm:20px;\n --fs-caption:12px; --lh-caption:16px;\n --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;\n\n \/* Spacing *\/\n --space-none:0; --space-4xs:2px; --space-3xs:4px; --space-2xs:6px; --space-xs:8px;\n --space-sm:12px; --space-md:16px; --space-lg:24px; --space-xl:32px;\n --space-2xl:36px; --space-3xl:40px; --space-4xl:64px;\n\n \/* Radii *\/\n --radius-none:0; --radius-xs:2px; --radius-sm:4px; --radius-md:6px;\n --radius-lg:8px; --radius-xl:16px; --radius-round:9999px;\n\n \/* Borders *\/\n --border-w-sm:1px; --border-w-md:2px; --border-w-lg:4px;\n\n \/* Shadows *\/\n --shadow-xs:0 1px 2px 0 rgba(16,24,40,0.05);\n --shadow-sm:0 1px 3px 0 rgba(16,24,40,0.10), 0 1px 2px 0 rgba(16,24,40,0.06);\n --shadow-md:0 4px 8px -2px rgba(16,24,40,0.08), 0 2px 4px -2px rgba(16,24,40,0.04);\n --shadow-lg:0 12px 16px -4px rgba(16,24,40,0.08), 0 4px 6px -2px rgba(16,24,40,0.03);\n --shadow-drag:0 4px 4px 0 rgba(0,0,0,0.30), 0 8px 12px 6px rgba(0,0,0,0.15);\n\n \/* Motion *\/\n --easing-standard:cubic-bezier(0.4,0,0.2,1);\n --easing-decelerate:cubic-bezier(0,0,0.2,1);\n --easing-accelerate:cubic-bezier(0.4,0,1,1);\n --duration-fast:150ms; --duration-base:250ms; --duration-slow:350ms;\n}\n\nhtml, body { margin: 0; padding: 0; }\nhtml { font-family: var(--font-sans); color: var(--text-default); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }\nbody { font-size: var(--fs-body); line-height: var(--lh-body); }\nh1,h2,h3,h4,h5,h6 { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--text-default); letter-spacing: -0.015em; }\np { margin: 0; }\nbutton { font: inherit; color: inherit; }\n* { box-sizing: border-box; }\n\n\n\/* Mobile responsiveness pass *\/\n@media (max-width: 900px) {\n .sp-container { padding: 0 20px !important; }\n .sp-header-inner { padding: 12px 20px !important; gap: 14px !important; }\n .sp-header-nav { gap: 14px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; justify-content: flex-start !important; }\n .sp-header-nav::-webkit-scrollbar { display: none; }\n .sp-header-nav a, .sp-header-nav button { white-space: nowrap !important; }\n\n .sp-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }\n .sp-hero-h1 { font-size: clamp(32px, 9vw, 42px) !important; }\n .sp-hero-visual { height: auto !important; padding: 40px 0 !important; }\n .sp-hero-img { height: auto !important; width: 78% !important; max-width: 320px !important; margin-bottom: 20px !important; }\n .sp-stat-tile { position: static !important; width: 100% !important; max-width: 320px !important; min-width: 0 !important; margin: 10px auto 0 !important; box-shadow: 0 8px 20px -10px rgba(16,24,40,0.18) !important; }\n .sp-hero-tiles { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; }\n .sp-trust-row { gap: 22px !important; }\n\n .sp-grid-2, .sp-grid-income, .sp-grid-how, .sp-grid-dashboard, .sp-grid-faq, .sp-grid-finalcta { grid-template-columns: 1fr !important; gap: 32px !important; }\n .sp-grid-3 { grid-template-columns: 1fr 1fr !important; }\n .sp-grid-4 { grid-template-columns: 1fr 1fr !important; }\n .sp-grid-5 { grid-template-columns: 1fr 1fr !important; }\n .sp-grid-6 { grid-template-columns: repeat(3, 1fr) !important; }\n .sp-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px 24px !important; }\n .sp-footer-brand { grid-column: 1 \/ -1 !important; }\n\n .sp-how-steps { padding-left: 64px !important; }\n .sp-how-steps [style*=\"left: -80\"] { left: -64px !important; }\n .sp-how-visual { max-width: 280px !important; margin: 0 auto !important; }\n\n .sp-dash-phone { max-width: 280px !important; width: 100% !important; margin: 0 auto !important; }\n .sp-faq-rail { position: static !important; top: auto !important; }\n .sp-dash-h2 { font-size: clamp(28px, 8vw, 40px) !important; }\n .sp-finalcta-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }\n .sp-finalcta-h2 { white-space: normal !important; font-size: clamp(26px, 7vw, 40px) !important; }\n .sp-finalcta-visual { min-height: 0 !important; margin-top: 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; }\n .sp-finalcta-frame { width: 100% !important; max-width: 420px !important; margin: 0 auto !important; }\n .sp-finalcta-img { height: auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; display: block !important; }\n .sp-support-badge { position: static !important; transform: none !important; margin-top: 16px !important; }\n .sp-app-badges { flex-wrap: wrap !important; }\n .sp-app-badges a { min-width: 0 !important; flex: 1 1 160px !important; padding: 10px 14px !important; }\n}\n@media (max-width: 480px) {\n .sp-app-badges { flex-direction: column !important; align-items: stretch !important; }\n}\n\n@media (max-width: 560px) {\n .sp-grid-3, .sp-grid-4, .sp-grid-5, .sp-footer-grid { grid-template-columns: 1fr !important; }\n .sp-grid-6 { grid-template-columns: repeat(2, 1fr) !important; }\n .sp-hero-h1 { font-size: clamp(28px, 10vw, 36px) !important; }\n .sp-footer-brand { grid-column: auto !important; }\n}\n\nhtml, body { overflow-x: hidden !important; max-width: 100vw !important; }\n\n#sp-wp-root{background:#fff;font-family:var(--font-sans);color:var(--text-default);margin-bottom:0!important}\n#sp-wp-root>div{margin-bottom:0!important}\n#sp-wp-root section:last-child{margin-bottom:0!important}\nbody .entry-content,body .wp-block-html,body .wp-block-post-content{margin-bottom:0!important;padding-bottom:0!important}\n#sp-wp-root *{box-sizing:border-box!important}\n#sp-wp-root img{margin:0!important;padding:0!important;border:0!important;max-width:none!important;vertical-align:top!important;display:block}\n#sp-wp-root h1,#sp-wp-root h2,#sp-wp-root h3,#sp-wp-root h4,#sp-wp-root h5,#sp-wp-root h6,#sp-wp-root p{margin:0!important}\n#sp-wp-root button{font:inherit!important;color:inherit!important;margin:0!important;padding:0!important}\n#sp-wp-root ul,#sp-wp-root li{margin:0!important;padding:0!important;list-style:none!important}\n#sp-wp-root a{color:inherit;text-decoration:none;margin:0!important}\n.coin{position:absolute;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE38A 0%,#F2B821 60%,#B07A05 100%);box-shadow:inset -2px -3px 0 rgba(0,0,0,0.15),0 2px 4px rgba(176,122,5,0.25)}\n.coin::after{content:\"\u20ab\";position:absolute;inset:0;display:grid;place-items:center;color:#8C5800;font-weight:800;font-size:14px;font-family:var(--font-display)}\n.coin.lg{width:40px;height:40px}.coin.lg::after{font-size:20px}\n.coin.sm{width:20px;height:20px}.coin.sm::after{font-size:10px}\n.reveal{opacity:0;transform:translateY(16px);transition:opacity 600ms var(--easing-decelerate),transform 600ms var(--easing-decelerate)}\n.reveal.in{opacity:1;transform:none}\n.hero-cta{transition:transform 200ms var(--easing-standard),box-shadow 200ms var(--easing-standard)}\n.hero-cta:hover{transform:translateY(-2px);box-shadow:0 24px 40px -8px rgba(10,21,48,0.6),0 8px 16px -2px rgba(10,21,48,0.4),inset 0 -4px 0 rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.2)}\nbutton{cursor:pointer}\n#sp-wp-root .sp-how-step{padding:0 0 36px !important;margin:0 !important;display:block !important;width:100% !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;text-align:left !important;letter-spacing:normal !important;text-transform:none !important;min-height:0 !important;line-height:1.2 !important;color:inherit !important}\n#sp-wp-root .sp-how-step:hover,#sp-wp-root .sp-how-step:focus{background:transparent !important;box-shadow:none !important}\n#sp-wp-root video{max-width:100% !important;display:block !important}\n#sp-wp-root h1,#sp-wp-root h2,#sp-wp-root h3,#sp-wp-root h4,#sp-wp-root p{padding:0 !important}\n#sp-wp-root .sp-cta-lead{margin-top:30px !important;margin-bottom:14px !important}\n#sp-wp-root .sp-why-lead{margin-top:-20px !important;margin-bottom:44px !important}\n#sp-wp-root .sp-faq-lead{margin-top:28px !important;margin-bottom:0 !important}\n#sp-wp-root .sp-dash-lead{margin-bottom:72px !important}\n#sp-wp-root .sp-path-lead{margin-top:28px !important;margin-bottom:0 !important}\n#sp-wp-root .sp-center-lead{text-align:center !important;margin-left:auto !important;margin-right:auto !important}\n#sp-wp-root .sp-center-lead>*{text-align:center !important}\n#sp-wp-root button,#sp-wp-root a{font-family:inherit !important;text-transform:none !important;letter-spacing:normal !important;min-height:0 !important;min-width:0 !important;width:auto;text-shadow:none}\n#sp-wp-root .sp-cta-btn{padding:14px 34px !important;border-radius:10px !important;background:#14C560 !important;color:#fff !important;border:0 !important;font-weight:600 !important;font-size:16px !important;line-height:1.2 !important;width:auto !important;box-shadow:none !important;margin:8px 0 0 !important}\n#sp-wp-root .sp-cta-btn:hover{background:#00A74F !important}\n#sp-wp-root .sp-faq-btn{padding:24px 24px 24px 28px !important;margin:0 !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;width:100% !important;display:grid !important;grid-template-columns:auto 1fr auto !important;align-items:center !important;gap:22px !important;text-align:left !important;line-height:1.35 !important;color:inherit !important}\n#sp-wp-root .sp-faq-btn:hover,#sp-wp-root .sp-faq-btn:focus{background:transparent !important;box-shadow:none !important}\n<\/style>\n<\/head>\n<body>\n<div id=\"root\"><\/div>\n<script src=\"https:\/\/unpkg.com\/react@18.3.1\/umd\/react.development.js\" integrity=\"sha384-hD6\/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu\/6onKUg4lLsHAs9EBPT82L\" crossorigin=\"anonymous\"><\/script>\n<script src=\"https:\/\/unpkg.com\/react-dom@18.3.1\/umd\/react-dom.development.js\" integrity=\"sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm\" crossorigin=\"anonymous\"><\/script>\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone@7.29.0\/babel.min.js\" integrity=\"sha384-m08KidiNqLdpJqLq95G\/LEi8Qvjl\/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y\" crossorigin=\"anonymous\"><\/script>\n<script type=\"text\/babel\">\n\n\/\/ Reusable illustration + decorative components for the Saladin Pro landing\n\/\/ Exports: PersonAvatar, Coin, CoinScatter, MoneyBag, AppPhoneIncome, AppPhoneDashboard, AppPhoneSplash, StepPhone, ChevronDown\n\n\/\/ \u2500\u2500\u2500 Person avatar (illustrated silhouette over warm gradient) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction PersonAvatar({ tone = \"warm\", style = {} }) {\n const tones = {\n warm: { bg: 'linear-gradient(135deg, #FFD9A6 0%, #E8A268 65%, #B97142 100%)', skin: '#F2BE8B', hair: '#352014', shirt: '#1E3888' },\n cool: { bg: 'linear-gradient(135deg, #DCE9D5 0%, #98B884 60%, #4D6B43 100%)', skin: '#E4B58D', hair: '#1E1A14', shirt: '#FFFFFF' },\n soft: { bg: 'linear-gradient(135deg, #F6E0D1 0%, #D6A48A 60%, #8B5536 100%)', skin: '#EFC4A1', hair: '#2C1F18', shirt: '#C5FFCA' },\n studio: { bg: 'linear-gradient(135deg, #C7D7E8 0%, #6A8AE0 60%, #2A4DAE 100%)', skin: '#F0C6A1', hair: '#1B1410', shirt: '#fff' },\n lawn: { bg: 'linear-gradient(135deg, #DDE5DA 0%, #9CB19C 60%, #506351 100%)', skin: '#E8B68A', hair: '#221813', shirt: '#1E3888' },\n bake: { bg: 'linear-gradient(135deg, #FFEFD4 0%, #EAB377 60%, #B5743C 100%)', skin: '#F0C5A0', hair: '#2A1B13', shirt: '#fff' }\n };\n const t = tones[tone] || tones.warm;\n return (\n <div style={{ position: 'relative', overflow: 'hidden', background: t.bg, ...style }}>\n <svg viewBox=\"0 0 200 160\" preserveAspectRatio=\"xMidYMax slice\" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>\n {\/* Shoulders\/shirt *\/}\n <path d=\"M 0 160 L 0 145 Q 30 110 60 100 L 140 100 Q 170 110 200 145 L 200 160 Z\" fill={t.shirt} \/>\n {\/* Neck *\/}\n <rect x=\"88\" y=\"84\" width=\"24\" height=\"20\" rx=\"4\" fill={t.skin} \/>\n {\/* Head *\/}\n <ellipse cx=\"100\" cy=\"64\" rx=\"30\" ry=\"34\" fill={t.skin} \/>\n {\/* Hair top *\/}\n <path d=\"M 70 56 Q 75 28 100 26 Q 125 28 130 56 Q 130 44 100 42 Q 80 44 70 56 Z\" fill={t.hair} \/>\n {\/* Subtle smile *\/}\n <path d=\"M 90 72 Q 100 78 110 72\" stroke={t.hair} strokeWidth=\"2\" fill=\"none\" strokeLinecap=\"round\" opacity=\"0.4\" \/>\n <\/svg>\n <\/div>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Coin \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction Coin({ size = 28, style = {} }) {\n return (\n <div className=\"coin\" style={{ width: size, height: size, ...style }} \/>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Hero character (excited agent in hoodie) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction HeroCharacter({ style = {} }) {\n return (\n <div style={{ position: 'relative', ...style }}>\n <svg viewBox=\"0 0 360 480\" style={{ width: '100%', height: 'auto', display: 'block' }}>\n <defs>\n <linearGradient id=\"hoodieG\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" stopColor=\"#F6E5D7\" \/>\n <stop offset=\"1\" stopColor=\"#D8B595\" \/>\n <\/linearGradient>\n <linearGradient id=\"skinG\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" stopColor=\"#F2C49A\" \/>\n <stop offset=\"1\" stopColor=\"#D89A6F\" \/>\n <\/linearGradient>\n <\/defs>\n {\/* Hoodie body *\/}\n <path d=\"M 50 480 L 50 360 Q 50 270 110 240 L 250 240 Q 310 270 310 360 L 310 480 Z\" fill=\"url(#hoodieG)\" \/>\n {\/* Hoodie hood *\/}\n <path d=\"M 110 240 Q 100 200 130 175 L 230 175 Q 260 200 250 240 Z\" fill=\"url(#hoodieG)\" \/>\n {\/* Neck *\/}\n <rect x=\"160\" y=\"195\" width=\"40\" height=\"38\" rx=\"6\" fill=\"url(#skinG)\" \/>\n {\/* Head *\/}\n <ellipse cx=\"180\" cy=\"148\" rx=\"62\" ry=\"68\" fill=\"url(#skinG)\" \/>\n {\/* Hair *\/}\n <path d=\"M 125 130 Q 125 80 180 78 Q 235 80 235 130 Q 235 105 180 100 Q 145 105 125 130 Z\" fill=\"#241712\" \/>\n <path d=\"M 130 130 Q 145 115 180 113 Q 215 115 230 130\" fill=\"none\" stroke=\"#241712\" strokeWidth=\"2\" \/>\n {\/* Eyes (closed smile) *\/}\n <path d=\"M 150 152 Q 158 144 168 152\" stroke=\"#241712\" strokeWidth=\"3\" fill=\"none\" strokeLinecap=\"round\" \/>\n <path d=\"M 195 152 Q 203 144 213 152\" stroke=\"#241712\" strokeWidth=\"3\" fill=\"none\" strokeLinecap=\"round\" \/>\n {\/* Eyebrows *\/}\n <path d=\"M 148 140 L 168 138\" stroke=\"#241712\" strokeWidth=\"3\" strokeLinecap=\"round\" \/>\n <path d=\"M 195 138 L 215 140\" stroke=\"#241712\" strokeWidth=\"3\" strokeLinecap=\"round\" \/>\n {\/* Open mouth (laughing) *\/}\n <path d=\"M 162 178 Q 180 200 200 178 Q 195 192 180 192 Q 165 192 162 178 Z\" fill=\"#3A1810\" \/>\n <path d=\"M 167 178 L 195 178\" stroke=\"#fff\" strokeWidth=\"3\" strokeLinecap=\"round\" \/>\n {\/* Cheek blush *\/}\n <ellipse cx=\"142\" cy=\"172\" rx=\"9\" ry=\"5\" fill=\"#F19A7A\" opacity=\"0.55\" \/>\n <ellipse cx=\"218\" cy=\"172\" rx=\"9\" ry=\"5\" fill=\"#F19A7A\" opacity=\"0.55\" \/>\n {\/* Right arm pointing *\/}\n <path d=\"M 290 290 Q 320 270 330 240 L 330 230 Q 345 230 348 248 Q 350 280 318 320 L 310 360 Z\" fill=\"url(#hoodieG)\" \/>\n {\/* Right hand *\/}\n <circle cx=\"335\" cy=\"234\" r=\"14\" fill=\"url(#skinG)\" \/>\n {\/* Finger pointing left toward phone *\/}\n <rect x=\"305\" y=\"228\" width=\"34\" height=\"9\" rx=\"4\" fill=\"url(#skinG)\" transform=\"rotate(-12 322 232)\" \/>\n {\/* Left arm (close to body) *\/}\n <path d=\"M 70 290 Q 60 340 80 380 L 110 380 L 110 340 Q 100 320 100 290 Z\" fill=\"url(#hoodieG)\" \/>\n {\/* Hoodie strings *\/}\n <line x1=\"170\" y1=\"232\" x2=\"168\" y2=\"270\" stroke=\"#A87B4F\" strokeWidth=\"3\" strokeLinecap=\"round\" \/>\n <line x1=\"190\" y1=\"232\" x2=\"192\" y2=\"270\" stroke=\"#A87B4F\" strokeWidth=\"3\" strokeLinecap=\"round\" \/>\n <circle cx=\"168\" cy=\"272\" r=\"4\" fill=\"#A87B4F\" \/>\n <circle cx=\"192\" cy=\"272\" r=\"4\" fill=\"#A87B4F\" \/>\n <\/svg>\n <\/div>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Money bag illustration \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction MoneyBag({ size = 64 }) {\n return (\n <svg viewBox=\"0 0 64 64\" width={size} height={size}>\n <path d=\"M 22 12 L 42 12 L 38 20 L 26 20 Z\" fill=\"#3A2914\" \/>\n <path d=\"M 24 20 Q 8 32 12 48 Q 14 58 32 58 Q 50 58 52 48 Q 56 32 40 20 Z\" fill=\"#F2BE8B\" \/>\n <path d=\"M 24 20 Q 8 32 12 48 Q 14 58 32 58 Q 50 58 52 48 Q 56 32 40 20 Z\" fill=\"url(#mb)\" opacity=\"0.6\" \/>\n <defs>\n <linearGradient id=\"mb\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" stopColor=\"#fff\" stopOpacity=\"0.3\" \/>\n <stop offset=\"1\" stopColor=\"#000\" stopOpacity=\"0.2\" \/>\n <\/linearGradient>\n <\/defs>\n <text x=\"32\" y=\"44\" textAnchor=\"middle\" fontSize=\"20\" fontWeight=\"700\" fill=\"#3A2914\" fontFamily=\"var(--font-display)\">\u20ab<\/text>\n <\/svg>);\n\n}\n\n\/\/ \u2500\u2500\u2500 App phone showing income card (hero) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction AppPhoneIncome() {\n return (\n <div style={{\n width: 252, height: 510, borderRadius: 38, background: '#0E1F11',\n padding: 8, boxShadow: '0 24px 48px -8px rgba(16,24,40,0.32), 0 12px 24px -8px rgba(16,24,40,0.18)',\n position: 'relative'\n }}>\n <div style={{ width: '100%', height: '100%', borderRadius: 32, background: 'linear-gradient(180deg, #F6FFF2 0%, #fff 50%, #F8FAFA 100%)', overflow: 'hidden', position: 'relative' }}>\n {\/* Notch *\/}\n <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 90, height: 22, background: '#0E1F11', borderRadius: 14, zIndex: 5 }} \/>\n\n {\/* Status bar *\/}\n <div style={{ height: 36, display: 'flex', justifyContent: 'space-between', padding: '14px 22px 0', fontSize: 11, fontWeight: 600, fontFamily: 'var(--font-ios)' }}>\n <span>9:41<\/span>\n <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}>\n <i className=\"ri-signal-tower-fill\" style={{ fontSize: 10 }}><\/i>\n <i className=\"ri-wifi-fill\" style={{ fontSize: 10 }}><\/i>\n <i className=\"ri-battery-fill\" style={{ fontSize: 12 }}><\/i>\n <\/span>\n <\/div>\n\n {\/* App header *\/}\n <div style={{ padding: '12px 16px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n <div>\n <div style={{ fontSize: 11, color: '#5C5F5F' }}>Ch\u00e0o bu\u1ed5i s\u00e1ng<\/div>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: '#0E1F11' }}>Anh Minh \ud83d\udc4b<\/div>\n <\/div>\n <div style={{ width: 36, height: 36, borderRadius: 50, background: 'linear-gradient(135deg, #FFD9A6, #E8A268)' }} \/>\n <\/div>\n\n {\/* Income card *\/}\n <div style={{ margin: '8px 14px 0', borderRadius: 16, padding: 16, background: 'linear-gradient(135deg, #14C560 0%, #008A40 100%)', color: '#fff', position: 'relative', overflow: 'hidden' }}>\n <div style={{ fontSize: 10, opacity: 0.85, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Thu nh\u1eadp th\u00e1ng 11<\/div>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26, marginTop: 4, letterSpacing: '-0.02em' }}>24.580.000<span style={{ fontSize: 14, marginLeft: 2 }}>\u20ab<\/span><\/div>\n <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 4, fontSize: 10, fontWeight: 600 }}>\n <i className=\"ri-arrow-up-line\"><\/i> +18% so v\u1edbi th\u00e1ng tr\u01b0\u1edbc\n <\/div>\n <div style={{ position: 'absolute', right: -16, top: -16, width: 96, height: 96, background: 'radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%)', borderRadius: '50%' }} \/>\n <\/div>\n\n {\/* Quick actions *\/}\n <div style={{ margin: '12px 14px 0', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>\n {[\n { ic: 'ri-add-line', l: 'B\u00e1n m\u1edbi' },\n { ic: 'ri-share-line', l: 'Chia s\u1ebb' },\n { ic: 'ri-user-line', l: 'Kh\u00e1ch' },\n { ic: 'ri-wallet-line', l: 'R\u00fat ti\u1ec1n' }].\n map((a, i) =>\n <div key={i} style={{ background: '#fff', border: '1px solid #DDE5DA', borderRadius: 10, padding: '8px 4px', textAlign: 'center' }}>\n <div style={{ width: 28, height: 28, borderRadius: 8, background: '#F6FFF2', display: 'grid', placeItems: 'center', margin: '0 auto' }}>\n <i className={a.ic} style={{ fontSize: 14, color: '#14C560' }}><\/i>\n <\/div>\n <div style={{ fontSize: 8.5, marginTop: 3, color: '#414941', fontWeight: 500 }}>{a.l}<\/div>\n <\/div>\n )}\n <\/div>\n\n {\/* Recent orders *\/}\n <div style={{ margin: '14px 14px 0' }}>\n <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>\n <span style={{ fontSize: 11, fontWeight: 700, fontFamily: 'var(--font-display)' }}>\u0110\u01a1n g\u1ea7n \u0111\u00e2y<\/span>\n <span style={{ fontSize: 9, color: '#14C560', fontWeight: 600 }}>Xem t\u1ea5t c\u1ea3<\/span>\n <\/div>\n {[\n { ic: 'ri-motorbike-fill', g: '#FFEFD4', c: '#A29200', t: 'BH xe m\u00e1y \u00b7 GIC', sub: '12\/11 \u00b7 \u0110\u00e3 ch\u1ed1t', a: '+ 320.000 \u20ab' },\n { ic: 'ri-heart-pulse-fill', g: '#FFDAD6', c: '#BA1A1A', t: 'S\u1ee9c kho\u1ebb \u00b7 DBV', sub: '11\/11 \u00b7 Hoa h\u1ed3ng v\u1ec1', a: '+ 1.250.000 \u20ab' },\n { ic: 'ri-plane-fill', g: '#D3F7FF', c: '#39656D', t: 'Du l\u1ecbch \u00b7 MIC', sub: '10\/11 \u00b7 Ch\u1edd duy\u1ec7t', a: '+ 180.000 \u20ab' }].\n map((o, i) =>\n <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: i < 2 ? '1px solid #EFF1F1' : 'none' }}>\n <div style={{ width: 30, height: 30, borderRadius: 8, background: o.g, display: 'grid', placeItems: 'center', flexShrink: 0 }}>\n <i className={o.ic} style={{ fontSize: 14, color: o.c }}><\/i>\n <\/div>\n <div style={{ flex: 1, minWidth: 0 }}>\n <div style={{ fontSize: 10.5, fontWeight: 600, color: '#1B1D20' }}>{o.t}<\/div>\n <div style={{ fontSize: 8.5, color: '#5C5F5F' }}>{o.sub}<\/div>\n <\/div>\n <div style={{ fontSize: 10, fontWeight: 700, color: '#14C560' }}>{o.a}<\/div>\n <\/div>\n )}\n <\/div>\n\n {\/* Bottom nav *\/}\n <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 50, background: '#fff', borderTop: '1px solid #EFF1F1', display: 'flex', justifyContent: 'space-around', alignItems: 'center', paddingBottom: 6 }}>\n {[\n { ic: 'ri-home-5-fill', a: true },\n { ic: 'ri-shopping-bag-line' },\n { ic: 'ri-line-chart-line' },\n { ic: 'ri-user-line' }].\n map((n, i) =>\n <i key={i} className={n.ic} style={{ fontSize: 18, color: n.a ? '#14C560' : '#A6ADA3' }}><\/i>\n )}\n <\/div>\n <\/div>\n <\/div>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Phone showing video (for \"how it works\") \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction AppPhoneSplash() {\n const videoRef = React.useRef(null);\n const [playing, setPlaying] = React.useState(false);\n const VIDEO_URL = 'https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/05\/27032341\/3-Vi-sao-nen-tham-gia-dang-ky-Pro.mp4';\n\n const toggle = () => {\n const v = videoRef.current;\n if (!v) return;\n if (v.paused) {v.play();setPlaying(true);} else\n {v.pause();setPlaying(false);}\n };\n\n return (\n <div style={{\n width: 280, height: 568, borderRadius: 42, background: '#0E1F11',\n padding: 8, boxShadow: '0 24px 48px -8px rgba(16,24,40,0.32)',\n position: 'relative'\n }}>\n <div style={{ width: '100%', height: '100%', borderRadius: 36, background: '#000', overflow: 'hidden', position: 'relative' }}>\n <video\n ref={videoRef}\n src={VIDEO_URL}\n poster=\"\"\n playsInline\n preload=\"metadata\"\n onPlay={() => setPlaying(true)}\n onPause={() => setPlaying(false)}\n onEnded={() => setPlaying(false)}\n style={{\n width: '100%', height: '100%', objectFit: 'contain', display: 'block',\n background: '#000'\n }} \/>\n \n\n {\/* Notch *\/}\n <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 90, height: 22, background: '#0E1F11', borderRadius: 14, zIndex: 2 }} \/>\n\n {\/* Play overlay (visible when paused) *\/}\n {!playing &&\n <button onClick={toggle} aria-label=\"Ph\u00e1t video\" style={{\n position: 'absolute', inset: 0,\n background: 'linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.35) 100%)',\n border: 'none', cursor: 'pointer',\n display: 'grid', placeItems: 'center'\n }}>\n <div style={{\n width: 72, height: 72, borderRadius: '50%',\n background: 'rgba(255,255,255,0.95)',\n display: 'grid', placeItems: 'center',\n boxShadow: '0 8px 24px rgba(0,0,0,0.25), 0 0 0 8px rgba(255,255,255,0.18)'\n }}>\n <i className=\"ri-play-fill\" style={{ fontSize: 38, color: '#14C560', marginLeft: 5 }}><\/i>\n <\/div>\n <div style={{\n position: 'absolute', bottom: 24, left: 16, right: 16,\n color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, lineHeight: 1.25,\n textShadow: '0 2px 8px rgba(0,0,0,0.45)'\n }}>\n V\u00ec sao n\u00ean tham gia<br \/>\u0111\u0103ng k\u00fd Saladin Pro\n <\/div>\n <\/button>\n }\n\n {\/* Mini pause\/resume control when playing *\/}\n {playing &&\n <button onClick={toggle} aria-label=\"T\u1ea1m d\u1eebng\" style={{\n position: 'absolute', bottom: 18, right: 18,\n width: 40, height: 40, borderRadius: '50%',\n background: 'rgba(0,0,0,0.55)', border: 'none', color: '#fff', cursor: 'pointer',\n display: 'grid', placeItems: 'center',\n backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)'\n }}>\n <i className=\"ri-pause-fill\" style={{ fontSize: 22 }}><\/i>\n <\/button>\n }\n <\/div>\n <\/div>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Dashboard phone for \"Qu\u1ea3n l\u00fd thu nh\u1eadp\" section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction AppPhoneDashboard() {\n return (\n <div style={{\n width: 248, height: 502, borderRadius: 38, background: '#0E1F11',\n padding: 8, boxShadow: '0 24px 48px -8px rgba(16,24,40,0.32)',\n position: 'relative', transform: 'rotate(-6deg)'\n }}>\n <div style={{ width: '100%', height: '100%', borderRadius: 32, background: '#F8FAFA', overflow: 'hidden', position: 'relative' }}>\n <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 86, height: 22, background: '#0E1F11', borderRadius: 14, zIndex: 5 }} \/>\n <div style={{ padding: '36px 14px 12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16 }}>\u0110\u01a1n h\u00e0ng<\/div>\n <i className=\"ri-search-line\" style={{ fontSize: 16 }}><\/i>\n <\/div>\n {\/* Tabs *\/}\n <div style={{ padding: '0 14px', display: 'flex', gap: 6 }}>\n {['T\u1ea5t c\u1ea3', 'Ch\u1edd x\u1eed l\u00fd', 'Hoa h\u1ed3ng'].map((t, i) =>\n <div key={i} style={{\n padding: '4px 10px', borderRadius: 50, fontSize: 9.5, fontWeight: 600,\n background: i === 0 ? '#1E3888' : '#fff', color: i === 0 ? '#fff' : '#5C5F5F',\n border: i === 0 ? 'none' : '1px solid #DCDFE3'\n }}>{t}<\/div>\n )}\n <\/div>\n {\/* Filter row *\/}\n <div style={{ padding: '10px 14px 0', display: 'flex', gap: 6 }}>\n <div style={{ flex: 1, background: '#fff', border: '1px solid #DCDFE3', borderRadius: 6, padding: '6px 8px', fontSize: 9.5, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n <span>Th\u00e1ng 11<\/span><i className=\"ri-arrow-down-s-line\" style={{ fontSize: 12 }}><\/i>\n <\/div>\n <div style={{ flex: 1, background: '#fff', border: '1px solid #DCDFE3', borderRadius: 6, padding: '6px 8px', fontSize: 9.5, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n <span>\u0110\u00e3 b\u00e1n<\/span><i className=\"ri-arrow-down-s-line\" style={{ fontSize: 12 }}><\/i>\n <\/div>\n <\/div>\n {\/* Stats panel *\/}\n <div style={{ margin: '12px 14px 0', padding: 12, background: '#fff', borderRadius: 12, boxShadow: '0 2px 4px rgba(16,24,40,0.05)' }}>\n <div style={{ display: 'flex', gap: 10 }}>\n <div style={{ flex: 1 }}>\n <div style={{ fontSize: 9, color: '#5C5F5F' }}>Doanh s\u1ed1<\/div>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: '#1E3888' }}>50.000.000\u20ab<\/div>\n <\/div>\n <div style={{ flex: 1 }}>\n <div style={{ fontSize: 9, color: '#5C5F5F' }}>Thu nh\u1eadp<\/div>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: '#14C560' }}>20.000.000\u20ab<\/div>\n <\/div>\n <\/div>\n {\/* Mini chart *\/}\n <svg viewBox=\"0 0 200 50\" style={{ width: '100%', height: 36, marginTop: 6 }}>\n <defs>\n <linearGradient id=\"chartG\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" stopColor=\"#14C560\" stopOpacity=\"0.4\" \/>\n <stop offset=\"1\" stopColor=\"#14C560\" stopOpacity=\"0\" \/>\n <\/linearGradient>\n <\/defs>\n <path d=\"M 0 40 L 25 30 L 50 35 L 75 22 L 100 28 L 125 14 L 150 18 L 175 8 L 200 4 L 200 50 L 0 50 Z\" fill=\"url(#chartG)\" \/>\n <path d=\"M 0 40 L 25 30 L 50 35 L 75 22 L 100 28 L 125 14 L 150 18 L 175 8 L 200 4\" stroke=\"#14C560\" strokeWidth=\"2\" fill=\"none\" \/>\n <\/svg>\n <\/div>\n {\/* List *\/}\n <div style={{ margin: '10px 14px 0', display: 'flex', flexDirection: 'column', gap: 6 }}>\n {[\n { c: '#FFEFD4', i: 'ri-motorbike-fill', ci: '#A29200', t: '#SLD-3421', s: 'Hoa h\u1ed3ng v\u1ec1', a: '+450.000\u20ab' },\n { c: '#FFDAD6', i: 'ri-heart-pulse-fill', ci: '#BA1A1A', t: '#SLD-3418', s: 'Ch\u1edd KH thanh to\u00e1n', a: '1.250.000\u20ab' },\n { c: '#D3F7FF', i: 'ri-plane-fill', ci: '#39656D', t: '#SLD-3402', s: 'Hoa h\u1ed3ng v\u1ec1', a: '+180.000\u20ab' }].\n map((o, i) =>\n <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: 8, background: '#fff', borderRadius: 8 }}>\n <div style={{ width: 26, height: 26, borderRadius: 6, background: o.c, display: 'grid', placeItems: 'center' }}>\n <i className={o.i} style={{ fontSize: 13, color: o.ci }}><\/i>\n <\/div>\n <div style={{ flex: 1 }}>\n <div style={{ fontSize: 10, fontWeight: 600 }}>{o.t}<\/div>\n <div style={{ fontSize: 8.5, color: '#5C5F5F' }}>{o.s}<\/div>\n <\/div>\n <div style={{ fontSize: 9.5, fontWeight: 700, color: o.a.startsWith('+') ? '#14C560' : '#1B1D20' }}>{o.a}<\/div>\n <\/div>\n )}\n <\/div>\n <\/div>\n <\/div>);\n\n}\n\nObject.assign(window, { PersonAvatar, Coin, HeroCharacter, MoneyBag, AppPhoneIncome, AppPhoneSplash, AppPhoneDashboard });\n\n\/\/ Saladin Pro landing \u2014 Header + Hero\n\/\/ Exports: ProHeader, ProHero\n\nconst SG = '#14C560'; \/\/ brand green\nconst SGD = '#008A40'; \/\/ deep green\nconst SGL = '#C5FFCA'; \/\/ light green\nconst SN = '#1E3888'; \/\/ brand navy\n\n\/\/ \u2500\u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction NavDropdown({ label, items }) {\n const [open, setOpen] = React.useState(false);\n return (\n <div\n onMouseEnter={() => setOpen(true)}\n onMouseLeave={() => setOpen(false)}\n style={{ position: 'relative' }}>\n \n <button style={{\n fontSize: 14, fontWeight: 500, color: '#1B1D20', padding: '6px 0',\n background: 'transparent', border: 'none', fontFamily: 'inherit',\n borderBottom: `2px solid ${open ? SG : 'transparent'}`, transition: 'border-color 150ms',\n display: 'inline-flex', alignItems: 'center', gap: 5, cursor: 'pointer'\n }}>\n {label}\n <i className=\"ri-arrow-down-s-line\" style={{\n fontSize: 15, transition: 'transform 180ms', transform: open ? 'rotate(180deg)' : 'none'\n }}><\/i>\n <\/button>\n <div style={{\n position: 'absolute', top: '100%', left: 0, paddingTop: 10,\n opacity: open ? 1 : 0, visibility: open ? 'visible' : 'hidden',\n transform: open ? 'translateY(0)' : 'translateY(-6px)',\n transition: 'opacity 180ms var(--easing-standard), transform 180ms var(--easing-standard)'\n }}>\n <div style={{\n background: '#fff', borderRadius: 12, minWidth: 220, padding: 8,\n boxShadow: '0 16px 32px -10px rgba(16,24,40,0.22), 0 4px 8px -2px rgba(16,24,40,0.08)',\n border: '1px solid rgba(220,223,227,0.6)'\n }}>\n {items.map((it) =>\n <a key={it.l} href={it.h} style={{\n display: 'block', padding: '10px 12px', borderRadius: 8,\n fontSize: 14, fontWeight: 500, color: '#1B1D20', textDecoration: 'none',\n transition: 'background 150ms'\n }}\n onMouseEnter={(e) => e.currentTarget.style.background = '#F6FFF2'}\n onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>\n {it.l}<\/a>\n )}\n <\/div>\n <\/div>\n <\/div>);\n\n}\n\nfunction ProHeader() {\n const learnMore = [\n { l: 'D\u00e0nh cho ai?', h: 'https:\/\/pro.saladin.vn\/cong-tac-vien\/danh-cho-ai\/' },\n { l: 'Thu nh\u1eadp ra sao?', h: 'https:\/\/pro.saladin.vn\/cong-tac-vien\/tai-lieu-dao-tao\/thu-nhap-ra-sao\/' },\n { l: 'S\u1ea3n ph\u1ea9m v\u00e0 \u0110\u1ed1i t\u00e1c', h: '#partners' }];\n\n const tips = [\n { l: 'T\u00e0i li\u1ec7u \u0111\u00e0o t\u1ea1o', h: 'https:\/\/pro.saladin.vn\/cong-tac-vien\/category\/tai-lieu-dao-tao\/' },\n { l: 'N\u00e2ng cao thu nh\u1eadp', h: 'https:\/\/pro.saladin.vn\/cong-tac-vien\/category\/bi-kip-kiem-them\/' },\n { l: 'Tra c\u1ee9u', h: 'https:\/\/pro.saladin.vn\/cong-tac-vien\/tra-cuu\/' },\n { l: 'Th\u00f4ng tin s\u1ea3n ph\u1ea9m', h: 'https:\/\/pro.saladin.vn\/cong-tac-vien\/category\/tai-lieu-dao-tao\/thong-tin-san-pham\/' }];\n\n\n return (\n <header style={{\n position: 'sticky', top: 0, zIndex: 100,\n background: 'rgba(255,255,255,0.85)',\n backdropFilter: 'blur(16px) saturate(180%)',\n WebkitBackdropFilter: 'blur(16px) saturate(180%)',\n borderBottom: '1px solid rgba(220,223,227,0.5)'\n }}>\n <div className=\"sp-header-inner\" style={{ maxWidth: 1280, margin: '0 auto', padding: '14px 32px', display: 'flex', alignItems: 'center', gap: 32 }}>\n <a href=\"#top\" style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>\n <img decoding=\"async\" src=\"https:\/\/pro.saladin.vn\/image\/agent_landing_page_logo.png\" alt=\"Saladin Pro\" style={{ height: 40, width: 'auto', display: 'block' }} \/>\n <\/a>\n <nav className=\"sp-header-nav\" style={{ display: 'flex', gap: 28, marginLeft: 16, alignItems: 'center', justifyContent: 'flex-end', flex: 1 }}>\n <NavDropdown label=\"T\u00ecm hi\u1ec3u tham gia\" items={learnMore} \/>\n <a href=\"https:\/\/pro.saladin.vn\/about\" target=\"_blank\" rel=\"noopener\" style={{\n fontSize: 14, fontWeight: 500, color: '#1B1D20', padding: '6px 0',\n borderBottom: '2px solid transparent', transition: 'border-color 150ms'\n }} onMouseEnter={(e) => e.currentTarget.style.borderBottomColor = SG}\n onMouseLeave={(e) => e.currentTarget.style.borderBottomColor = 'transparent'}>\n V\u1ec1 Saladin Pro<\/a>\n <NavDropdown label=\"B\u00ed k\u00edp\" items={tips} \/>\n <\/nav>\n <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>\n <a href=\"https:\/\/id.saladin.vn\/?callback_url=https%3A%2F%2Fpro.saladin.vn%2Flogin%2Fcallback%3Fredirect%3Dhttps%253A%252F%252Fpro.saladin.vn%252F%26channel%3Dpro&from=pro\" style={{\n background: SG, color: '#fff', padding: '10px 18px', borderRadius: 6,\n border: 'none', fontWeight: 600, fontSize: 14, fontFamily: 'inherit',\n boxShadow: '0 4px 10px -2px rgba(20,197,96,0.4)', textDecoration: 'none',\n display: 'inline-flex', alignItems: 'center', gap: 6\n }}>\u0110\u0103ng nh\u1eadp \/ \u0110\u0103ng k\u00fd <i className=\"ri-arrow-right-line\"><\/i><\/a>\n <button style={{\n background: 'transparent', border: '1px solid #DCDFE3', borderRadius: 6,\n padding: '8px 10px', fontSize: 13, fontWeight: 500, display: 'none', alignItems: 'center', gap: 5\n }}>\n <span style={{\n width: 18, height: 14, borderRadius: 2, display: 'inline-block', overflow: 'hidden',\n background: 'linear-gradient(180deg, #DA251D 50%, #DA251D 50%)', position: 'relative'\n }}>\n <span style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: '#FFD500', fontSize: 9 }}>\u2605<\/span>\n <\/span>\n VN\n <\/button>\n <\/div>\n <\/div>\n <\/header>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Hero floating card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction FloatCard({ children, style }) {\n return (\n <div style={{\n position: 'absolute', background: '#fff', borderRadius: 14,\n padding: '12px 14px', boxShadow: '0 12px 24px -8px rgba(16,24,40,0.18), 0 4px 8px -2px rgba(16,24,40,0.08)',\n display: 'flex', alignItems: 'center', gap: 10,\n ...style\n }}>{children}<\/div>);\n\n}\n\nfunction IconBadge({ ic, bg, color = '#fff', size = 36 }) {\n return (\n <div style={{ width: size, height: size, borderRadius: 10, background: bg, display: 'grid', placeItems: 'center', flexShrink: 0 }}>\n <i className={ic} style={{ color, fontSize: size * 0.5 }}><\/i>\n <\/div>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Flat, credible hero stat tile (no rotation\/stickers) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction StatTile({ style, iconBg, icon, iconColor = '#fff', value, valueColor, label, prefix }) {\n return (\n <div className=\"sp-stat-tile\" style={{\n position: 'absolute', zIndex: 3,\n background: '#fff', borderRadius: 14, padding: '16px 18px',\n minWidth: 216,\n boxShadow: '0 16px 32px -12px rgba(16,24,40,0.18), 0 4px 8px -2px rgba(16,24,40,0.06)',\n border: '1px solid rgba(220,223,227,0.7)',\n display: 'flex', alignItems: 'center', gap: 14,\n ...style\n }}>\n <div>\n <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>\n {prefix && <span style={{ fontSize: 13, fontWeight: 600, color: '#5C5F5F' }}>{prefix}<\/span>}\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, letterSpacing: '-0.02em', color: valueColor, lineHeight: 1.05 }}>{value}<\/div>\n <\/div>\n <div style={{ fontSize: 13, color: '#5C5F5F', marginTop: 2, lineHeight: 1.3 }}>{label}<\/div>\n <\/div>\n <\/div>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Hero \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction ProHero() {\n const REG_URL = 'https:\/\/id.saladin.vn\/?callback_url=https%3A%2F%2Fpro.saladin.vn%2Flogin%2Fcallback%3Fredirect%3Dhttps%253A%252F%252Fpro.saladin.vn%252F%26channel%3Dpro&from=pro';\n return (\n <section id=\"top\" data-screen-label=\"01 Hero\" style={{\n position: 'relative', overflow: 'hidden',\n background: 'linear-gradient(160deg, #F7FAF7 0%, #EDF6EC 55%, #E3F3E2 100%)',\n padding: '56px 0 88px'\n }}>\n {\/* Subtle decorative leaf, low opacity *\/}\n <img decoding=\"async\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzUgMjM2IiBmaWxsPSJub25lIj4KICAKICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCA0OCkiPgogICAgPHBhdGggZD0iTSA0Mi42NzYgMTQxLjkyMSBDIDM4LjgxMSAxMzcuNDM4IDM0Ljc5MiAxMzIuNDkgMzEuMDgxIDEyNy4zODkgQyAyMS44MDUgMTE0LjA5MyAxNS4xNTggODkuODIxIDExLjYwMiA1Ny4zNTYgQyA5LjkwMSA0MC42NTkgOS4yODMgMjUuNTA5IDkuMTI4IDE3LjMxNSBMIDI4LjE0NCAxMi4zNjggTCAzOS40MyA5LjU4NSBDIDM5LjI3NSA2LjMzOSAzOS43MzkgMy4yNDcgNDAuODIxIDAgTCAyOC40NTMgMi45MzcgTCAwLjAwNyAxMC4yMDMgQyAwLjAwNyAxMC4yMDMgLTEuMDc1IDk2LjYyNCAyMy42NiAxMzIuMzM2IEMgMzAuOTI2IDE0Mi44NDkgMzguOTY2IDE1MS42NjEgNDYuNjk2IDE1OC45MjcgQyA0NC45OTUgMTU0LjI4OSA0My4yOTQgMTQ4LjcyMyA0Mi42NzYgMTQxLjkyMSBaIiBmaWxsPSIjMUUzODg4Ij48L3BhdGg+CiAgPC9nPgogIAogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg3LjQyLCA1MS4xKSI+CiAgICA8cGF0aCBkPSJNIDg3LjQzNCA3LjExMSBMIDU5Ljc2MSAwIEMgNjEuMzA3IDIuNjI4IDYzLjQ3MiA5Ljc0IDYzLjQ3MiAxMC4yMDMgTCA3OC40NjggMTQuMDY4IEMgNzguMzEzIDIyLjI2MiA3Ny42OTUgMzcuMTA0IDc1Ljk5NCA1My45NTUgQyA3NS4wNjYgNjIuNjEyIDcxLjY2NSA4My40ODMgNzAuODkyIDg2LjExMSBDIDY3LjE4MiAxMDIuODA4IDYyLjM4OSAxMTUuNjM5IDU2LjUxNSAxMjQuMTQyIEMgNDIuMjkyIDE0NC43MDQgMjQuODIyIDE1OC43NzIgMTIuNDU0IDE2Ny4xMiBMIDIuMjUxIDE3NC4wNzcgQyAyLjA5NiAxNzYuMDg3IDEuOTQyIDE3Ny45NDIgMS4zMjMgMTc5Ljc5NyBDIDEuMTY5IDE4MC4yNjEgLTAuMzc3IDE4NC40MzUgMC4wODYgMTg0LjU5IEMgMC4wODYgMTg0LjU5IDQuMTA2IDE4Mi41OCAxMC43NTQgMTc4LjcxNSBDIDIzLjc0IDE3MC44MzEgNDYuMDAyIDE1NC45MDcgNjMuOTM1IDEyOS4wODkgQyA4OC41MTYgOTMuNTMyIDg3LjQzNCA3LjExMSA4Ny40MzQgNy4xMTEgWiIgZmlsbD0iIzFFMzg4OCI+PC9wYXRoPgogIDwvZz4KICAKICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNy4yNCwgMCkiPgogICAgPHBhdGggZD0iTSAxMDQuNTM3IDEwMy41ODEgQyAxMDEuMjkxIDk4LjAxNSA5OS43NDUgOTIuNjA0IDEwMC44MjcgODYuMTExIEMgMTAxLjYgODEuNjI4IDEwMy40NTUgNzcuNDU0IDEwNC42OTIgNzIuOTcgQyAxMDUuNjE5IDY5LjI2IDEwNS42MTkgNjUuMzk1IDEwNC42OTIgNjEuNTMgQyAxMDQuMzgzIDYwLjQ0OCAxMDMuOTE5IDU5LjIxMSAxMDMuNjEgNTguMTI5IEMgMTAyLjM3MyA1NS4wMzcgMTAwLjUxOCA1Mi4xIDk4LjM1MyA0OS45MzUgQyA5OC4zNTMgNDkuOTM1IDk4LjM1MyA0OS45MzUgOTguMTk5IDQ5Ljc4MSBDIDk4LjE5OSA0OS43ODEgOTYuODA3IDQ4LjA4IDkzLjU2MSA0Ni4zNzkgQyA5MS4yNDIgNDUuMTQzIDg4LjMwNCA0NC4wNiA4My45NzYgNDMuNTk3IEMgODMuMDQ4IDQzLjQ0MiA4Mi40MyA0My40NDIgODEuODExIDQzLjQ0MiBDIDc3Ljc5MiA0My4xMzMgNzUuNDczIDQyLjY2OSA3NC4zOTEgNDEuNDMyIEMgNzMuMzA4IDQwLjM1IDczLjE1NCAzOC4zNCA3My4xNTQgMzQuNjMgQyA3Mi45OTkgMjcuMjA5IDczLjQ2MyAxOS4wMTYgNjkuOTA3IDEyLjIxMyBDIDY3LjI3OSA3LjI2NiA2Mi4zMzIgMi43ODMgNTYuNzY2IDEuMDgyIEMgNTQuNDQ3IDAuMzA5IDUyLjEyOCAwIDQ5LjgwOSAwIEMgNDUuNzkgMCA0MS42MTYgMS4wODIgMzguMDYgMi43ODMgQyAzNC4xOTUgNC43OTMgMzEuMTAzIDcuODg0IDI5LjI0OCAxMS45MDQgQyAyNS44NDcgMTguNzA2IDI2LjQ2NSAyOS41MjggMTguMTE3IDMyLjc3NSBDIDEzLjAxNSAzNC43ODUgNy45MTMgMzcuNDEzIDQuNjY3IDQyLjA1MSBDIDMuMjc2IDQ0LjA2IDIuMTkzIDQ1LjkxNiAxLjQyIDQ4LjA4IEMgMC4zMzggNTEuMTcyIC0wLjEyNiA1NC4yNjQgMC4wMjkgNTcuNjY1IEMgMC4xODQgNjAuNDQ4IDAuODAyIDYzLjU0IDEuNzMgNjYuMTY4IEMgMy40MyA3MC45NiA2LjUyMiA3NS40NDQgOS43NjkgNzkuMzA5IEMgMTIuODYxIDgzLjAxOSAxNi44OCA4NS45NTYgMTkuMTk5IDkwLjEzMSBDIDIzLjA2NCA5Ny4wODggMTUuOTUyIDEwMi4wMzUgMTIuMDg4IDEwNi42NzMgQyA3LjYwNCAxMTIuMjM4IDQuODIyIDExOC41NzcgNC42NjcgMTI1LjY4OCBDIDQuNTEyIDEzMS41NjMgNS45MDQgMTM3LjQzOCA5LjE1IDE0Mi4zODUgQyAxMC4wNzggMTQzLjkzMSAxMS4xNiAxNDUuNDc3IDEyLjM5NyAxNDYuNzE0IEMgMTQuMDk3IDE0OC40MTQgMTYuODggMTQ5Ljk2IDE3Ljk2MiAxNTIuNDM0IEMgMTguMjcyIDE1My41MTYgMTguNDI2IDE1NC43NTMgMTguMTE3IDE1NS44MzUgQyAxNy4xODkgMTU5Ljg1NCAxNS42NDMgMTYzLjg3NCAxNS4wMjUgMTY4LjA0OCBDIDE0LjA5NyAxNzMuNjE0IDEzLjk0MyAxNzkuMTc5IDE0LjI1MiAxODQuNzQ1IEMgMTQuNzE2IDE5MS43MDIgMTUuNzk4IDE5Ni45NTggMTcuNDk4IDIwMS41OTYgQyAyMC4xMjcgMjA4Ljg2MiAyNC4xNDYgMjEzLjgwOSAyOC4wMTEgMjE4LjI5MiBDIDMwLjc5NCAyMjEuNTM5IDM3LjEzMiAyMjYuOTUgNDEuMzA3IDIyOS43MzMgQyA0NS42MzUgMjMyLjIwNiA1MC4xMTkgMjM1LjI5OCA1MC40MjggMjM1LjI5OCBDIDUwLjQyOCAyMzUuMTQ0IDUyLjkwMSAyMjkuNzMzIDUyLjkwMSAyMjUuMDk1IEMgNTMuMDU2IDIyMS42OTQgNTIuNzQ3IDIxOC4yOTIgNTIuNzQ3IDIxNS4yIEMgNTIuNzQ3IDIwOS42MzUgNTMuMDU2IDIwNC4wNjkgNTQuNDQ3IDE5OC42NTggQyA1Ni40NTcgMTkxLjIzOCA1OS41NDkgMTg0LjI4MSA2NC4zNDIgMTc4LjI1MiBDIDY1LjExNSAxNzcuMzI0IDY1LjczMyAxNzYuNTUxIDY2LjUwNiAxNzUuNjIzIEMgNzcuOTQ2IDE2Mi43OTIgOTYuMzQzIDE1OS4wODEgMTA3LjAxMSAxNDUuNzg2IEMgMTExLjMzOSAxNDAuNTMgMTE0LjI3NyAxMzMuNDE4IDExNC4yNzcgMTI2LjQ2MSBDIDExNC4xMjIgMTE3LjY0OSAxMDguNDAyIDExMC41MzggMTA0LjUzNyAxMDMuNTgxIFogTSA5OS43NDUgMTM5LjkxMSBDIDk1LjI2MSAxNDUuNjMxIDg4LjYxNCAxNDkuMzQyIDgxLjUwMiAxNTMuMzYxIEMgNzMuOTI3IDE1Ny44NDUgNjYuMDQyIDE2Mi4xNzMgNTkuNzA0IDE2OS4yODUgQyA1OC43NzYgMTcwLjM2NyA1OC4wMDMgMTcxLjI5NSA1Ny4yMyAxNzIuMzc3IEMgNTEuOTc0IDE3OS4xNzkgNDcuOTU0IDE4Ny4wNjQgNDUuNjM1IDE5Ni4xODUgQyA0My45MzUgMjAyLjk4NyA0My42MjYgMjA5LjYzNSA0My40NzEgMjE0Ljg5MSBDIDQzLjQ3MSAyMTYuMjgzIDQzLjQ3MSAyMTcuOTgzIDQzLjQ3MSAyMTkuMzc1IEMgNDMuNDcxIDIxOS44MzggNDMuNDcxIDIyMC40NTcgNDMuNDcxIDIyMC45MjEgQyA0MC4yMjQgMjE4LjYwMiAzNi4wNSAyMTQuODkxIDM0LjA0MSAyMTIuNTcyIEMgMjguMzIgMjA1LjkyNSAyMy41MjggMTk5LjQzMSAyMi40NDYgMTg0LjEyNiBDIDIyLjI5MSAxODEuNjUzIDIyLjI5MSAxNzkuMzM0IDIyLjI5MSAxNzcuMDE1IEMgMjIuNiAxNzIuMzc3IDI0LjQ1NSAxNjUuNDIgMjUuODQ3IDE2MC40NzMgQyAyNi45MjkgMTU4LjMwOCAyOC4xNjYgMTU1LjY4IDI5Ljg2NiAxNTQuNTk4IEMgMzAuOTQ4IDE1NC4xMzQgMzQuODEzIDE1NC4xMzQgMzYuODIzIDE1NC4xMzQgQyAzOC4wNiAxNTQuMTM0IDM5LjI5NyAxNTQuMTM0IDQwLjM3OSAxNTQuMTM0IEMgNTUuNTMgMTUzLjA1MiA2NS4yNjkgMTQ3LjQ4NyA3NS4zMTggMTM5LjYwMiBMIDY5Ljc1MyAxMzIuNjQ1IEMgNTguOTMxIDE0MS4zMDMgNTEuMDQ2IDE0NC41NDkgMzkuNzYxIDE0NS4zMjIgQyAzOC45ODggMTQ1LjMyMiAzOC4wNiAxNDUuMzIyIDM2Ljk3OCAxNDUuMzIyIEMgMzUuNDMyIDE0NS4zMjIgMzMuNzMxIDE0NS4zMjIgMzIuMTg1IDE0NS4zMjIgQyAzNS44OTYgMTM3LjI4MyAzOC45ODggMTMwLjYzNSA0MC45OTcgMTIzLjY3OCBDIDU5LjA4NSAxMTUuMTc2IDc0LjU0NSAxMDAuNzk4IDg0LjkwMyA4My4wMTkgTCA3Ny4zMjggNzguNTM2IEMgNjkuMjg5IDkyLjYwNCA1Ny44NDkgMTA0LjE5OSA0NC4wODkgMTExLjkyOSBDIDQ1LjAxNyAxMDcuNiA0NS40ODEgMTAzLjExNyA0NS43OSA5Ny43MDYgQyA0NS45NDUgOTYuMTYgNDUuOTQ1IDk0LjQ1OSA0NS45NDUgOTIuOTEzIEMgNDUuOTQ1IDkyLjc1OSA0NS45NDUgOTIuNjA0IDQ1Ljk0NSA5Mi42MDQgQyA0NS45NDUgOTIuMjk1IDQ1Ljk0NSA5MS42NzcgNDUuOTQ1IDkxLjM2NyBDIDQ1Ljk0NSA4Ny45NjYgNDYuMjU0IDg0LjI1NiA0OC4xMDkgODEuNzgyIEMgNDkuMTkxIDgwLjM5MSA1MC40MjggNzkgNTEuODE5IDc3LjQ1NCBDIDUyLjEyOSA3Ni45OSA1Mi43NDcgNzYuNTI2IDUzLjA1NiA3Ni4wNjIgQyA1OS4yNCA2OS43MjQgNjMuNTY5IDYyLjE0OCA2Ni41MDYgNTMuNDkxIEwgNTguMDAzIDUwLjcwOCBDIDU1LjUzIDU4LjEyOSA1MS44MTkgNjQuNDY3IDQ2LjU2MyA2OS44NzggQyA0Ni4yNTQgNzAuMTg3IDQ1LjYzNSA3MC44MDYgNDUuMzI2IDcxLjExNSBDIDQ0Ljg2MiA3MS41NzkgNDQuMzk5IDcyLjA0MyA0My45MzUgNzIuNTA2IEMgNDEuOTI1IDYwLjkxMiAzOS4xNDIgNTEuMTcyIDM3LjkwNiA0Ny42MTYgQyAzNy41OTYgNDYuNjg5IDM3LjQ0MiA0Ni4yMjUgMzcuNDQyIDQ2LjIyNSBMIDI5LjA5MyA0OS4wMDggQyAyOS4wOTMgNDkuMDA4IDI5LjI0OCA0OS4zMTcgMjkuNDAzIDQ5LjkzNSBDIDMwLjk0OSA1NC41NzMgMzguMDYgNzguMDcyIDM2LjgyMyA5Ny4yNDIgQyAzNS40MzIgMTE2LjU2NyAzMS4xMDMgMTI2LjQ2MSAyMi40NDYgMTQ0LjcwNCBDIDIxLjM2NCAxNDMuNDY3IDIwLjEyNyAxNDIuMzg1IDE5LjA0NCAxNDEuNjEyIEMgMTguNzM1IDE0MS4zMDMgMTguMTE3IDE0MC44MzkgMTcuOTYyIDE0MC42ODQgQyAxNy4xODkgMTM5Ljc1NyAxNi40MTYgMTM4Ljk4NCAxNS43OTggMTM3LjkwMSBDIDEzLjYzNCAxMzQuNSAxMi41NTEgMTMwLjQ4MSAxMi43MDYgMTI2LjE1MiBDIDEyLjg2MSAxMjEuMjA1IDE0LjcxNiAxMTYuNzIxIDE4LjI3MSAxMTIuMzkzIEMgMTguNzM1IDExMS42MiAxOS41MDggMTExLjAwMSAyMC40MzYgMTEwLjA3NCBDIDI0LjQ1NSAxMDUuNzQ1IDMyLjgwNCA5Ny4wODggMjYuNDY1IDg1LjY0NyBDIDI0LjMwMSA4MS45MzcgMjEuNjczIDc5LjMwOSAxOS4xOTkgNzYuOTkgQyAxNy45NjIgNzUuOTA4IDE2Ljg4IDc0LjY3MSAxNS45NTIgNzMuNzQzIEMgMTIuNzA2IDY5Ljg3OCAxMC42OTYgNjYuNDc3IDkuMzA1IDYzLjA3NiBDIDguMjIzIDYwLjQ0OCA3LjkxMyA1Ny44MiA4LjIyMyA1NS4xOTEgQyA4LjM3NyA1Mi40MDkgOS40NTkgNDkuNjI2IDExLjAwNSA0Ny4xNTIgQyAxMS43NzggNDYuMjI1IDEyLjU1MSA0NS40NTIgMTMuNDc5IDQ0LjUyNCBDIDE1LjE4IDQzLjEzMyAxNy40OTkgNDIuMDUxIDIwLjI4MSA0MC45NjggQyAzMC4xNzYgMzcuMjU4IDMyLjY0OSAyNy44MjggMzQuNTA0IDIxLjY0NCBDIDM0Ljk2OCAxOS40NzkgMzUuNTg3IDE3LjMxNSAzNi4yMDUgMTYuMDc4IEMgMzcuNDQyIDEzLjc1OSAzOC45ODggMTIuMDU5IDQxLjMwNyAxMC45NzYgQyA0My42MjYgOS43NCA0Ni40MDggOC45NjcgNDguODgyIDguOTY3IEMgNTAuMjczIDguOTY3IDUxLjY2NSA5LjEyMSA1Mi45MDEgOS43NCBDIDU2LjE0OCAxMC44MjIgNTkuNTQ5IDEzLjYwNSA2MS4wOTUgMTYuODUxIEMgNjMuMTA1IDIwLjU2MiA2My4yNiAyNi4xMjcgNjMuMjYgMzEuNTM4IEMgNjMuMjYgMzIuNzc1IDYzLjI2IDMzLjg1NyA2My4yNiAzNS4wOTQgQyA2My4yNiAzNi40ODUgNjMuNDE0IDM3LjcyMiA2My40MTQgMzguOTU5IEMgNjMuODc4IDQzLjkwNiA2NS41NzkgNDcuNDYyIDY5Ljc1MyA0OS42MjYgQyA3Mi4yMjYgNTAuODYzIDc1LjQ3MyA1MS43OSA3OS45NTYgNTIuMjU0IEMgNzkuOTU2IDUyLjI1NCA3OS45NTYgNTIuMjU0IDgwLjExMSA1Mi4yNTQgQyA4MC44ODQgNTIuMjU0IDgxLjUwMiA1Mi40MDkgODIuMjc1IDUyLjQwOSBDIDg1LjY3NiA1Mi43MTggODcuOTk1IDUzLjggODkuMjMyIDU0LjU3MyBDIDkwLjAwNSA1NC44ODIgOTAuMzE0IDU1LjM0NiA5MC42MjMgNTUuNTAxIEwgOTAuNjIzIDU1LjY1NSBMIDkxLjA4NyA1Ni4xMTkgQyA5My4wOTcgNTguMTI5IDk0LjQ4OCA2MC43NTcgOTUuMTA3IDYzLjU0IEMgOTUuNTcxIDY1Ljg1OSA5NS41NzEgNjguMzMyIDk1LjEwNyA3MC40OTcgQyA5NC43OTggNzEuODg4IDk0LjE3OSA3My41ODkgOTMuNzE1IDc1LjEzNSBDIDkyLjc4OCA3Ny45MTcgOTEuNzA2IDgxLjAwOSA5MS4yNDIgODQuNDExIEMgOTAuMDA1IDkyLjQ1IDkxLjM5NiA5OS44NyA5Ni4wMzQgMTA3Ljc1NSBDIDk2LjgwNyAxMDkuMTQ2IDk3LjU4IDExMC4zODMgOTguMzUzIDExMS42MiBDIDEwMS40NDUgMTE2LjU2NyAxMDQuMzgzIDEyMS4yMDUgMTA0LjIyOCAxMjUuNjg4IEMgMTA1LjE1NiAxMzAuNjM1IDEwMy4xNDYgMTM1Ljg5MiA5OS43NDUgMTM5LjkxMSBaIiBmaWxsPSIjMTRDNTYwIj48L3BhdGg+CiAgPC9nPgo8L3N2Zz4=\" alt=\"\" style={{\n position: 'absolute', right: '-8%', top: '-6%', width: 460, opacity: 0.04,\n pointerEvents: 'none'\n }} \/>\n\n <div className=\"sp-container\" style={{ maxWidth: 1280, margin: '0 auto', padding: '0 32px', position: 'relative' }}>\n <div className=\"sp-hero-grid\" style={{ display: 'grid', gridTemplateColumns: '1fr 560px', gap: 56, alignItems: 'center' }}>\n\n {\/* Left: copy *\/}\n <div>\n <div style={{\n display: 'inline-flex', alignItems: 'center', gap: 8,\n padding: '7px 16px', borderRadius: 50,\n background: '#fff', border: '1px solid #C5FFCA',\n fontSize: 13, fontWeight: 600, color: SGD\n }}>\n <span style={{ width: 7, height: 7, borderRadius: '50%', background: SG }} \/>\n N\u1ec1n t\u1ea3ng h\u1ee3p t\u00e1c b\u1ea3o hi\u1ec3m c\u00f4ng ngh\u1ec7\n <\/div>\n\n <h1 className=\"sp-hero-h1\" style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 60, lineHeight: 1.05, letterSpacing: '-0.03em',\n color: '#0A1530', margin: '20px 0 0'\n }}>\n C\u1ed9ng t\u00e1c vi\u00ean<br \/><span style={{ color: SG }}>b\u1ea3o hi\u1ec3m 5.0<\/span>\n <\/h1>\n\n <p style={{\n marginTop: 20, fontSize: 17, lineHeight: 1.6,\n color: '#414941', maxWidth: 480\n }}>\n H\u1ee3p t\u00e1c c\u00f9ng m\u1ea1ng l\u01b0\u1edbi CTV b\u1ea3o hi\u1ec3m h\u00e0ng \u0111\u1ea7u Vi\u1ec7t Nam \u2014 kh\u00f4ng c\u1ea7n v\u1ed1n,\n kh\u00f4ng r\u00e0ng bu\u1ed9c th\u1eddi gian, th\u00f9 lao minh b\u1ea1ch chi tr\u1ea3 h\u00e0ng th\u00e1ng.\n <\/p>\n\n <div style={{ display: 'flex', alignItems: 'center', gap: 20, marginTop: 32, flexWrap: 'wrap' }}>\n <a href={REG_URL} target=\"_blank\" rel=\"noopener\" style={{\n background: SG, color: '#fff',\n padding: '15px 28px', borderRadius: 8, border: 'none',\n fontFamily: 'inherit', fontWeight: 700, fontSize: 16,\n boxShadow: '0 8px 20px -6px rgba(0,138,64,0.4)',\n display: 'inline-flex', alignItems: 'center', gap: 10,\n textDecoration: 'none', transition: 'background 150ms, transform 150ms'\n }}\n onMouseEnter={(e) => {e.currentTarget.style.background = SGD;e.currentTarget.style.transform = 'translateY(-1px)';}}\n onMouseLeave={(e) => {e.currentTarget.style.background = SG;e.currentTarget.style.transform = 'translateY(0)';}}>\n \n \u0110\u0103ng k\u00fd tr\u1edf th\u00e0nh CTV <i className=\"ri-arrow-right-line\" style={{ fontSize: 18 }}><\/i>\n <\/a>\n <a href=\"#how\" style={{\n fontSize: 15, fontWeight: 600, color: SN, textDecoration: 'none',\n display: 'inline-flex', alignItems: 'center', gap: 6,\n borderBottom: '1px solid transparent', paddingBottom: 2,\n transition: 'border-color 150ms'\n }}\n onMouseEnter={(e) => e.currentTarget.style.borderBottomColor = SN}\n onMouseLeave={(e) => e.currentTarget.style.borderBottomColor = 'transparent'}>\n \n T\u00ecm hi\u1ec3u quy tr\u00ecnh\n <\/a>\n <\/div>\n\n {\/* Trust stat row *\/}\n <div className=\"sp-trust-row\" style={{\n display: 'flex', gap: 36, marginTop: 44, paddingTop: 28,\n borderTop: '1px solid rgba(10,21,48,0.1)', flexWrap: 'wrap'\n }}>\n {[\n { v: '15+', l: 'Nh\u00e0 b\u1ea3o hi\u1ec3m' },\n { v: '60s', l: 'L\u00ean \u0111\u01a1n' },\n { v: 'T\u1ee9c th\u00ec', l: 'Nh\u1eadn th\u00f9 lao' }].\n map((s, i) =>\n <div key={i}>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 30, color: '#0A1530', letterSpacing: '-0.02em', lineHeight: 1 }}>{s.v}<\/div>\n <div style={{ fontSize: 13, color: '#5C5F5F', marginTop: 6 }}>{s.l}<\/div>\n <\/div>\n )}\n <\/div>\n <\/div>\n\n {\/* Right: photo with flat docked stat tiles *\/}\n <div className=\"sp-hero-visual sp-hero-tiles\" style={{ position: 'relative', height: 560, display: 'flex', justifyContent: 'center', alignItems: 'flex-end' }}>\n <div style={{\n position: 'absolute', inset: '6% 4%', borderRadius: 28,\n background: 'linear-gradient(160deg, #DFF3DE 0%, #C5FFCA 100%)'\n }} \/>\n <img decoding=\"async\" className=\"sp-hero-img\" src=\"https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/07\/22081951\/saladin-pro-hero-agent.png\" alt=\"Saladin Pro CTV c\u1ea7m \u0111i\u1ec7n tho\u1ea1i\"\n style={{\n position: 'relative', zIndex: 2,\n height: 500, width: 'auto', objectFit: 'contain', marginBottom: 60,\n filter: 'drop-shadow(0 20px 28px rgba(0,57,22,0.16))',\n WebkitMaskImage: 'linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0) 88%)',\n maskImage: 'linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0) 88%)'\n }} \/>\n\n <StatTile\n style={{ top: 24, left: -20 }}\n iconBg=\"linear-gradient(135deg, #14C560 0%, #008A40 100%)\"\n icon=\"ri-percent-fill\"\n prefix=\"L\u00ean \u0111\u1ebfn\"\n value=\"65%\"\n valueColor={SN}\n label=\"Th\u00f9 lao m\u1ed7i \u0111\u01a1n\" \/>\n \n <StatTile\n style={{ bottom: 96, right: -30 }}\n iconBg=\"linear-gradient(135deg, #2A4DAE 0%, #1E3888 100%)\"\n icon=\"ri-team-fill\"\n value=\"20.000+\"\n valueColor={SN}\n label=\"CTV h\u00e0ng \u0111\u1ea7u Vi\u1ec7t Nam\" \/>\n \n <StatTile\n style={{ bottom: 10, left: 10 }}\n iconBg=\"linear-gradient(135deg, #FFD56B 0%, #E89E0A 100%)\"\n icon=\"ri-shield-check-fill\"\n iconColor=\"#1E3888\"\n value=\"0\u20ab\"\n valueColor={SN}\n label=\"Ph\u00ed tham gia\" \/>\n \n <\/div>\n <\/div>\n <\/div>\n <\/section>);\n\n}\n\nObject.assign(window, { ProHeader, ProHero, FloatCard, IconBadge, StatTile });\n\/\/ Saladin Pro landing \u2014 Body sections\n\/\/ Exports: PartnersStrip, WhySection, IncomeSection, HowItWorks, AudienceSection, DashboardSection, FaqSection, FinalCta\n\nconst Sg = '#14C560';\nconst Sgd = '#008A40';\nconst Sgl = '#C5FFCA';\nconst Sn = '#1E3888';\n\n\/\/ \u2500\u2500\u2500 Container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction C({ children, style }) {\n return <div className=\"sp-container\" style={{ maxWidth: 1180, margin: '0 auto', padding: '0 32px', ...(style || {}) }}>{children}<\/div>;\n}\n\n\/\/ \u2500\u2500\u2500 Section title \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction SectionTitle({ children, eyebrow, light, align = 'center', eyebrowColor }) {\n return (\n <div style={{ textAlign: align, marginBottom: 40 }}>\n {eyebrow && <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: eyebrowColor || (light ? Sgl : Sgd), marginBottom: 10 }}>{eyebrow}<\/div>}\n <h2 style={{\n fontFamily: 'var(--font-display)', fontWeight: 700, letterSpacing: '-0.025em',\n fontSize: 40, lineHeight: 1.1, color: light ? '#fff' : '#0E1F11', margin: 0, textWrap: 'balance'\n }}>{children}<\/h2>\n <\/div>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Partners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction PartnersStrip() {\n const insurers = [\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/baoviet_logo.png', href: 'https:\/\/www.saladin.vn\/doi-tac\/bao-viet', name: 'B\u1ea3o Vi\u1ec7t' },\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/pvi.png', href: 'https:\/\/www.saladin.vn\/doi-tac\/pvi', name: 'PVI' },\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/baominh_logo.png', href: 'https:\/\/www.saladin.vn\/doi-tac\/bao-minh', name: 'B\u1ea3o Minh' },\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/msig_logo.png', href: 'https:\/\/www.saladin.vn\/doi-tac\/msig', name: 'MSIG' },\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/liberty_logo.png', href: 'https:\/\/www.saladin.vn\/doi-tac\/liberty', name: 'Liberty' },\n { logo: 'data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAALYAAAC1CAYAAADyZAWqAAAACXBIWXMAAAsSAAALEgHS3X78AAAY90lEQVR4nO2dXUwbZ7rH\/\/moaQ2Y6rggQbNgbugHNrmgghAJFlBLcoEjnbRJUJdIPaWbo1USpI2UdiOoNquCcjaREimlZ7VJWfUIuktBzUWciyZdkQikpI6Wi9imaTgXNmkLR04txTamxfngXDjvZMaeLxvP6\/Hw\/qRI7XiYeWfmP888z\/N+PBtWV1evAfg1GAzj0LYx1y1gMLSACZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSDbnugH5jMcfwv3YCgBg2rcIAKgsK0ZVWRG2Vr+AkkJTLpu3rmHCVsDjD2E+GIXHH8Itfwjh2Apu+UOILMcBAA6bFS32cjgbbUzMOoIJm8d8MIop3yI8\/p\/g8YcwPbsoul9laRH6u+rhbLShqqyYcisZaljXwg7H4rjoDmDat4Ap3wLu3luS3b+5thx9XfVosVdQaiEjU9adsOeDUbjcAYxMzsEbCKn6Gybo\/GNdCDsTMQMJl+NcbysTdB5iaGETMV+6GUj7b\/v21aOvqz77jWJQwXDCDsfiGHJ5MTJ5R9FnFiNTK+3xh+ByBzDlW8D07CJ7MXKMYYQ9H4xicGwGF90BLhWXLs215Rg\/tkN1ym4+GMWQywuXO5DRS8TQjrwXNhH06NW5NR2nu60G53pbVe3r8Ycw5PKu+ZwM7chbYROXY\/CLmTUfS63bEI7FcXT4OhN0HpCXwh5yeTEwNpOxy8Hnr4dbsb+9RnG\/kck5HB2+npVzMrQnr4Tt8Yfw27PX0krZyXHy3SZFUYdjcfz27LWMMiuM3JE3wh4cm8mK20HobqvBIadDdp9sv0gMeuhe2FqIq7PBphgoevwhdPS7mOuRp+ha2Fr4tQ6bFeeZqA2PLoWtVfbBYjbhfG+rbJ6aidoY6E7Y4VgcHf0uTfza\/q561FVbJX9nojYOuhK2xx\/C3hOXNenFa64tlw0WSfaDidoY6EbYWlpLi9mkGCyy7Iex0MVkXq1dgMNOh+xMlyGXl+WpDUbOLbbWoq4sLZLtLp8PRjEwlr38eDZ5cMMNANj0qy3YuOXFlN8f\/\/AjVsMRbKp9RbD90extPI5EVJ1jc+0r2GCxqGrLwyft4f62qRHPNDUKtq1MXMAzTY2i7aVJToVNI1jr63pN9vcDOvKrH9xwIz5xAQ9uuPH4hx9Tft+8rQGmHW\/AtPMNbLAUI7LnN9i45UVYJj4X7Lcy8SVWxi9gNRpVPGfx+GiKOAmPZm\/jl+HPsDJxgdu26dWXscFiwWokgp\/PfIwNxcUw7XwDz+x4HauRKGJHPkDx+Oj6FXY4FsfeE5c1FVVzbblsl7nLHZCcsEuTR7O3ETs+gIff3OS2mTpeR8F77+CZpkasRiJ4cMONXz79DMt\/GsTynwa5\/cQEZD7eD\/Pxfm5\/MYo+\/W+Ydrwh2abl4wP4Zfh\/BO0x\/6lfcL7HP\/yI5T8OYGXigkD8eiBnPnZHv0vzMczd7S\/J\/n50+Lqm51fDysQFhHfuEoja\/Mc+FA3\/hbOkGywWmHa8AcvE5yg8\/WfVxzbtFBeuqeN1WVHHjnwgEPXmbQ0oGv5Lyku0ccuLKBr+S1ptokVOhH10+LrmGYjK0iJZaz0yOZfzyQGPZm8jduQDwbbN2xrw7HvvSP5NwZ7dqoUk5Q4k++R8Ykc+SLG+RWdOyp6nYM9umP\/Yp6pNtKAubJc7gE8u+TQ\/j5JvPTj2L83boET0vd+lbCs83q\/4dwV7duO53x\/Oenvil79OEbWp43VV\/vKz772Dzdsast6mTKEqbNIJojUWswm7Gm2Sv+vBWv98+mxKgLhxy4uy1pTPc0d6sx6gLR9P9cc3SwSWYjx3pDebzVkTVIVNq2dvV6NNdjzI6OQdzdugRPzy1ynbpLITUjzb8052GoOEry+WiVH7ogGJ9hfs2Y2NKtKHWkMtKzLlW6DWCdIt41vLLV1Gi9VIBI++\/S5le7oW+Nn33pH1x9MhOUdNSPdl00sgSc1iH6DgggCJoFFu6YQRHVjrh7O3Rben89nPNg9nv83ZubWAirBp+rRK64G43AEq7ZBD7JOfa8S+IPkMFWHTzEA4ZYJGjz+U86ARAB5\/\/0Oum6CKTa++nOsmZIzmPjbtDIScsPXghgDAxl9tUb3vaiQi6bokIzWmJFPy2YprLmyaGYjm2nLZ36d8ue8+B6SDxFWRgUuPv\/8RP58+K+iZlDrmc0d6UbBnd0Zt2vTqy3kt5GQ0dUXmg1GqGQg5\/zoci+tmvPVmiRTaIxHLvKn2FVgmPse\/ff+\/MHW8Lvp3haf\/jOdvXMtY1ACwaYv4V0TsZcsHNBX2kMur5eFTkJv2dcv\/E8WWyLPBYhHtpRMTNh\/TXnHhppuSE0MqI\/NAIg2odzQVNu0MhJywp3XihhAK9r6Zsk1JRFIDl7LhVxfs3Y0NxamTMR5c\/mdax1mNRHRh5TUT9nwwSjVotJhNsrNkbvn14YYQCvbsTsk6rEajoj2SNNhgsYh29sS\/+lq1UFcjEUT2\/Ea0a542mgmbdqC2VcZaA4kXTW8UnT6ZYiV\/+fQzyf3TtYRS+0ttf+5Ir+jLpkaoj3\/4EZE9v8Gjb7\/DMzvEYwGaaCbsad+CVocWRal6l14CRz4kMOSL++E3N1OGshLiaboFUq6N3HEsE5+niHtl4gKWen4n2rG0Gong59NnEe5w4tG336Hw9J9lx3rTQrN0H20Lma9l6TbVvoKSKy4s\/f59LqW3MnEBj77\/AYXH+7lBSKuRCFbGv0z5+41bXsRqJCKYt7gycQGPZr\/Fyrj4rBZiXZ9pakTB3jcFPvoGiwWWic+xfHxQMIQ1fuWfiF\/5JzZva+Bm9Tycvc21mUw6yEYgmw00EzbtgUZyo\/mmKH890oXMWyRzHuNffY2H39xEeOcu0f2JuEw73hAdffdo9ls8nL2tODLvwQ13wromBZ8bLJaE5d2zGyuffob4lacW\/uE3NwU59U2vvoxn3\/uPNaUatWDD6urqNQC\/zvaBaYtJripuOBannu6rKite01dEbKb5RoslrWGk2USsPWpnuOeANs2EzWDkkDZdLJjDYGQbJmyGIWHCZhgSJmyGIWHCZhgSTfLY88EoRifp1kLsbq+RTK\/loj3N9nLJYbRTvgXqg7L0dn\/k2pMNNBH284UFWa3wpRapVVXDsTj19vShXlLY075F6u1ptpdLCsnjD1Fvj9xMp2ygiStSUmiCxayuHjkN5IazrhfkrKMnByMftX4mmvnYSqPtso0eR+\/pCTlh34+tUGyJ8hS+bKCZsJWWQcg2SsKmcTP1isMmb2RoW2waX1DNhK21D5WM0kSCfB39lw2Urp32JAwa2tBM2HXVVqp+dmQ5Lmu117OfLecWhmNxqhUdLGYTla+5pnlsuRVPtUDuk7qehd1sl3bDaI96pKUJTYUtV1dRC+SETdvn1xNbq1+Q\/C0X+XQaaCrsumorKkuLtDyFAKUx4OsxgHTYrLqZhKG0YGg20bxLXamyQDZRmrVDO6DVAy0ybghAd6YTTS1oLuz97TVUrbbcWibr0R3ZL1Ngiua6L0o1gbINlUFQNN9UuYdF2zXKNZWlRbJBM01h09QAQEnYNK22ks8oZ8GMhpLrdZGSsGlba4DisNVzva1UznP33pKsuGlF5XpALivlcgeo5a9pPXs+1ITdYq9AZ4ONyrnkhmBWlRVTa0cuaa6VHs0H0HNDOhtsOYltqE40ON\/bSqU38qI7gHBM2hodcto1b0OukbPW4Vgco1e1H39tMZtwPgfWGqAs7JJCOhcaWY7L+o8t9gpDB5GVpUW6qOwwfqxDNoeuJdSnhjkbbTjYqb3FVKp7QztKp4nStdFYt7xvn\/RECxrkZM7jqZ7tmvcC3r23hBEZX3t\/e40heyIdNmvOa8g315ZLzmaiRc4m844f26E4TnitKFvt3N58LTjV0yT7u9YV3Bw2K8aP7dD0HGrImbBLCk24MuDUNJhUstot9gp0txkn\/dfdVqNQvFVba20xJ55prvxqPjldfoGGuJUs1Kme7bqan5kpFrMJp3q2S\/4ejsU1tdZ6EjWgg3VF6qqtmor77r0lDI5Jz8CmlanRmvO9rbKiGnJ5NbPWRNR6GvOec2EDT8Wtlc\/9scsrO7uGVqZGKw522hUrEmu1vILDZtWdqAGdCBvQVtyR5TgOnL0mu8+pnu2aB7Na0FxbLuuCAMBvFa49U\/QqakBHwgae+txaBHTTs4uK+VstvxpaoCYDMTg2o0n9ne62Gl351MnoSthAQtznelvRty\/7qbj3\/3ZDdvoY8bfzIZhUE6xN+RY0cUH69tXjnIJPn2t0J2xCX1c9vvqoM+si23visuw4Eq2D2WxQWVqkKOpwLI69J65k9bwWswlffdSZF\/l\/3QobSOSZ75x7O6uj8e7eW0JHv0t2H62D2bXgsFnhPvOWrF8bjsXR0e\/K6rDUzgYb7px7O29mIela2EDCPRg\/1oEv\/tCRNSvqDYQUg0kibj11u3c22FT5tUeHr2fNr7aYTfjiDx05HdCUCboXNsHZmLAY2QosR6\/OKYq7pNCEywNOTfz9dOnbV69KXAfOXsvakNTuthrcOfd2Xk6C1qzOoxaQwLK7vQaDYzNrnmFNBKA0w6Ovqx7N9nIcOHuNan14IOF6nO9tVZVSy5aoySCmfHE7xMgbi82nxV6BywNO\/PVw65rHVaux3OSc3517G3376qkElhazCSffbYL7zJvURF1ZWoS\/Hm7F5QFnXosayDOLncz+9hrsb6\/ByOQcBsf+lbE1Hb06h\/uxuGK3NJCw3oecDgy5vPjY5c36vMHExNeXcMjpUOXTkkBxLT51ZWkR+rpeoz7hVksMVcB0rQJP57PPP6fLHcClmwHB9r599ZJpscGxmZT8cmeDDc5GW1ri8vhD2HvicsbXa0RBP8GYlXmnfAsYcvlSxKYGMkou3YcdjsUx5VuAxx\/ClG8B3e0vSR5jZHIOo5N30GKvQF21NaPgbMjlxcDYTEZfjM4GGw457XnvbshgTGETSNGgkck7aVu1zgYbTvU06W5d7flgFAfOXks7cCYujtZFjXSCsYXNx+MPYWTyDlzugGqRW8wmHHY6dNPTNjg2k5ZfbzGbsKvRhu52+QkIBmT9CJsPEfmUb1FV0JVrXzSd2IHMUHc25mY9D52wPoXNZz4YxZRvEdO+BUz5FmTFU1lahENOB\/a3v6R5L1w4FseQy6voRpGleZvtFWiRKXm3zmDCTmY+GIXHH+KCwFv+kOinn2QxdjXasiZyEoCOTM6JBr4Wswlbq62oq7airvoFJmRpmLDVEI7Fccv\/Ezz+ECc+4Ona0s215U+sZkJoasU2H4xiPhjFtG8xUa2Xdzwg0SlUUmhCXbU1reMymLCzAhE+HyUhutwBgaXfWv1CXg0y0jlM2AxD0paXY0UYDCWYsBmGhAmbYUiYsBmGhAmbYUiYsBmGhAmbYUiYsBmGhAmbYUiYsBmGhAmbYUiYsBmGhAmbYUiYsBmGhAmbYUiYsBmGhAmbYUiYsBmGhAlbhESxzxm43IFcN4WRIZqtturxh7gybOPHOvJqhjV\/9dKT7zbhkNOR4xYZi70nriAcW0GLvUKzVbY0m8z78oG\/434sjshyHBazCe4zb+pa3GSBGkJdtRX7\/usKDnbaFeso6gWXO8BVRct0sUst4bePLNX2zWl163+nSZtmFtt95i3cj63glf\/8h1anyCp7T1zm1vVw2KyYD0ZhMZvQ3\/VajlumnhZ7BQae1HXUmzEhX3Cy+NDJd5sQjsUxH4xqUgBVMx+7pNCEKd8iV49QLzdYjCGXF9Ozi+hsSJSe9gZCKCk04f8+fyev1vogBWAdNisiy9kvh7cWiKhJPZ8hlxeHnA7NviqKrghZipesfkSoq7aixV4h2bAdSSXnLg84JRtB1ou+9eQztfXJZ1RpjTz+OZKPL\/bb0eHr3KdQbJsYUvud6tkusDTkGghiDy15HzHqqq0C18flDsDlDnC14ImLIbXgZPI5xNbp5u9TUliA8WMd3G8efwhHh6+LXqPU+VzuAMKxFcE19He9Jnh2Su3inzf5Hsj9JoGyKzIfjIpWd52eXcQnl3zobqtJKU7k8YdS1m92uQMpD1qqzMT07CKmZxcxMjknG3jKrREt9ptYu8S2iZG8n8sdEDz0IZdXcB1iL\/3dYFT1utZy9+aTSz50NthES4uMTt4RnON+LJ4i7OR2EOuZ2H+F++0+T6zJyFVTmJ5dTCk1otQu\/nmTkftNirRckcrSIvTtq8fBTvvTBl+dS0mLjYhYpWSLDyT8WvLgLGYTDnbaBeXuvIEQ1c+pw2ZFc2254B\/hflI134u8a54PRtUtR1xWzB2XXxy1srSI205eFr6oyb3hF3K9dDOAgbF\/CY4fjsVTBOANhDhrL8XA2IxsteJkPP4QOvpdnKgtZhOaa8vR3VbDXRvfGEm1K51zpktawWNVWbEgPfPJJR+AxIXyrdOUL3ERFrMJzxeacPfeElzugOATMjI5x10s8cPJQ+1ur8HODy8BSNyAkck5KmtTn+ppkvzEJwuXPJiSQpPqfDcpBgUkXnRyjfvbXxLc15HJOe58laVFcJ95i7N+Qy4v3v\/bDQCJ+3\/I6eBExH\/ZKkuLOOFN+Raxv106xoksJzJCalNvR4evc0Ggw2ZVLKrKb5fDZuWu7aI7oNlzzSh4TKw4+vQN5Iuab71a7BWcUO7eWxL4qHwxHHY6BJ\/1FnuFwDpNi1h7PUAeGLkXay3NR+CnHfuSfNVDTofgPKOTT0vg8e9Tsp8uBfkqDX4xo2jZgcTz5VtfNZWC+efv5708WnaApSXsW\/4QXj7wd5R3f8allE6+2yQQJb+xLfZyNPMsIN9F4d\/EZntqWeetvGOqueHmfz8n+JcJR4dvYEe\/i\/s3MplaN5H\/wiWCpji3lrXwq5X5yyj01VPvDf88t3jGgrxoDlsiwCT1KC\/dDEh+9vlWenAsNZZKRvDcastVZY3IvUinXWslLWFHluOCYCGynLDc\/MYlW\/JdIi4KIHx4YsGhmNi1xhsIcYHr9Owi7j55iPzr21pt5aycx\/+TQMBalMYQuzfPFxZw\/02yEVO+Bc49IC\/DLhUvWou9grue0atzmA\/KlwOZ9qUXxLncgYzatVbS8rEdNitO9TRhPrjE1US5dDPA+Wd86wUgpeItCWSqyooFvhbZxifdG5hc71wsk6NEd5uwohZ5uZLXvm6xVySEf2+Js+qdDdmrbMDH4w+lpNz42QrSXv6XkvTw8a2rWFaK0NdVz\/n7g0kBaTL8tiQH1GLwhZtuu9ZCWsJ+vtDEWaWqsiLuZkz5FtCH+pS3TyxF43IHuICHCHvat5hi7fjHUtO5kxz4ZCRsldW1mu3lwBeJ\/+a7IdnqhOK\/9FO+hRRh80VMfuNvu3tvKSUNd9EdgJSDRqw2eVnl4F+jNxASffGk2qq2XckvDP8rUsL7WsmRcc+jWKcG\/yK622oS1Wn31Qv8UmLh+G\/pxy6v4Hj8jAmQEJyeaLFXpNRTT64HoyYukIL\/qR4YmxHcm6PD1wXicDba4PGHuG0kJUv+kXZGluOywVpyX4QUddVWQaqyo98lMELhWJxrr9p2TfkWBAbFGwhxx0wewyMWc4iRlsWeD0YxODYjqJcCJHqRAGFap6+rnnvQ88EoZ9mIO7K\/vYbr1IgsJzojdjXacD\/JnelsoFfWjXyB+Hz1UadogNNir+DamZy3BZBxGWggkfkg1cIiy3FsO\/IlmmvLcT8WF8QmBzvtqCorFjx4Z6NN8PW65Q9x7ZzyLUh+9qvKitHdVoPRq6kBczLne1ux7ciXABLC3PnhJYFQHTYr3GfeFAg+uV3zwSh3Lpc7gBZ7heD8Oz+8hObacswHo4J8uVq3JS2LfffeEga\/mBGI+mCnHfvba+DhVddKftDEpyaQIJKMawASN2T06lyKqM+rtCRawreYxO\/mWw6+hU225JlQUmjC+LEdgrTe9OxiiqhJSo+fvUk2AnwhKKXX+rrqVbW\/rtqKrz7qFLQvshznnj9pZ7rtOtWzXaCTZNfoVM921e6eosWuKivGwU674OGSKlZ8v\/J+bIUL4MR8rv6ueu4Yzz8JskoKEyPQRibnMO1b4D7fVWXFqvzd5IBR6bfu9pdSjim2jU9VWTFgB\/pQ\/\/T\/kehUIde5tfoFbv9TPdu5bIocVWXFXBvFMkB11Va4z7yFi0\/GipDsR121VXBuIPFikZcr2aLtarThblB4L5rt5dz1JLfpfG8r95zkRNRir8B3597GyOQcPE8qqpH21T25H3LtcjbaUp4RGcRFisvyr5nfEaUGVlyJYURYcSWGMWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhiS\/wekpekPGYBWgAAAAABJRU5ErkJggg==', href: 'https:\/\/www.saladin.vn\/doi-tac\/gic', name: 'GIC' },\n { logo: 'https:\/\/cdn.saladin.vn\/insurance-provider\/pjico\/logo\/stacked.svg', href: 'https:\/\/www.saladin.vn\/doi-tac\/pjico', name: 'PJICO' },\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/vbi.png', href: 'https:\/\/www.saladin.vn\/doi-tac\/vbi', name: 'VBI' },\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/pti.png', href: 'https:\/\/www.saladin.vn\/doi-tac\/pti', name: 'PTI' },\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/mic.png', href: 'https:\/\/www.saladin.vn\/doi-tac\/mic', name: 'MIC' },\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/aaa.jpg', href: 'https:\/\/www.saladin.vn\/doi-tac\/aaa', name: 'AAA' }];\n\n const HAIRLINE = 'rgba(26,28,30,0.08)';\n return (\n <section id=\"partners\" data-screen-label=\"02 Partners\" style={{ background: '#fff', padding: '88px 0 56px' }}>\n <C>\n {\/* Divider rule with centered eyebrow *\/}\n <div style={{\n display: 'flex', alignItems: 'center', gap: 14,\n fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase',\n color: '#5C5F5F', marginBottom: 28\n }}>\n <span style={{ flex: 1, height: 1, background: HAIRLINE }} \/>\n <span>H\u1ee3p t\u00e1c c\u00f9ng 15+ h\u00e3ng b\u1ea3o hi\u1ec3m h\u00e0ng \u0111\u1ea7u Vi\u1ec7t Nam<\/span>\n <span style={{ flex: 1, height: 1, background: HAIRLINE }} \/>\n <\/div>\n\n {\/* Logo grid *\/}\n <div className=\"sp-grid-6\" style={{\n display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)',\n gap: 1, background: HAIRLINE,\n border: `1px solid ${HAIRLINE}`, borderRadius: 16, overflow: 'hidden'\n }}>\n {insurers.map((p) =>\n <a key={p.name} href={p.href} target=\"_blank\" rel=\"noopener\" title={p.name} style={{\n background: '#fff', padding: '24px 16px',\n display: 'flex', alignItems: 'center', justifyContent: 'center',\n minHeight: 96, textDecoration: 'none',\n transition: 'background 200ms'\n }}\n onMouseEnter={(e) => e.currentTarget.style.background = '#FBFBF8'}\n onMouseLeave={(e) => e.currentTarget.style.background = '#fff'}>\n <img src={p.logo} alt={p.name} style={{\n maxHeight: 48, maxWidth: '100%', width: 'auto', objectFit: 'contain'\n }} \/>\n <\/a>\n )}\n <\/div>\n <\/C>\n <\/section>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Audience path split \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction AudiencePathSection() {\n const paths = [\n {\n key: 'insurance',\n title: 'D\u00e0nh cho Chuy\u00ean gia B\u1ea3o hi\u1ec3m',\n desc: 'M\u1edf r\u1ed9ng danh m\u1ee5c s\u1ea3n ph\u1ea9m v\u1edbi 15+ nh\u00e0 b\u1ea3o hi\u1ec3m, kh\u00f4ng gi\u1edbi h\u1ea1n c\u00f4ng ty hi\u1ec7n t\u1ea1i.',\n icon: 'custom-insurance',\n href: 'https:\/\/pro.saladin.vn\/cong-tac-vien\/danh-cho-chuyen-gia-bao-hiem\/',\n accent: 'linear-gradient(135deg, #2A4DAE 0%, #1E3888 100%)'\n },\n {\n key: 'sales',\n title: 'D\u00e0nh cho Chuy\u00ean gia Sales',\n desc: 'B\u1ed5 sung th\u00eam gi\u1ea3i ph\u00e1p b\u1ea3o hi\u1ec3m v\u00e0o h\u00e0nh tr\u00ecnh \u0111\u1ed3ng h\u00e0nh c\u00f9ng kh\u00e1ch h\u00e0ng v\u00e0 t\u1ea1o th\u00eam ngu\u1ed3n thu nh\u1eadp.',\n icon: 'custom-sales',\n href: 'https:\/\/pro.saladin.vn\/cong-tac-vien\/danh-cho-chuyen-gia-sales\/',\n accent: 'linear-gradient(135deg, #44E178 0%, #00A74F 100%)'\n }];\n\n return (\n <section data-screen-label=\"02b Audience Path\" style={{ background: '#F8FAFA', padding: '72px 0' }}>\n <C>\n <div style={{ textAlign: 'center', marginBottom: 36 }}>\n <h2 style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 32, letterSpacing: '-0.02em', color: '#0E1F11', margin: 0\n }}>B\u1ea1n thu\u1ed9c nh\u00f3m n\u00e0o?<\/h2>\n <p className=\"sp-path-lead\" style={{ marginTop: 28, marginBottom: 0, fontSize: 15, color: '#5C5F5F' }}>\n Ch\u1ecdn h\u01b0\u1edbng ph\u00f9 h\u1ee3p \u0111\u1ec3 xem l\u1ed9 tr\u00ecnh h\u1ee3p t\u00e1c d\u00e0nh ri\u00eang cho b\u1ea1n.\n <\/p>\n <\/div>\n <div className=\"sp-grid-2\" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>\n {paths.map((p) =>\n <a key={p.key} href={p.href} target=\"_blank\" rel=\"noopener\" style={{\n display: 'flex', alignItems: 'center', gap: 20,\n background: '#fff', borderRadius: 16, padding: '28px 26px',\n border: '1px solid #EFF1F1', textDecoration: 'none',\n boxShadow: '0 8px 20px -8px rgba(16,24,40,0.1)',\n transition: 'transform 200ms var(--easing-standard), box-shadow 200ms var(--easing-standard)'\n }}\n onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-3px)';e.currentTarget.style.boxShadow = '0 16px 28px -8px rgba(16,24,40,0.16)';}}\n onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = '0 8px 20px -8px rgba(16,24,40,0.1)';}}>\n \n <div style={{\n width: 56, height: 56, borderRadius: 14, background: p.accent, flexShrink: 0,\n display: 'grid', placeItems: 'center'\n }}>\n {p.icon === 'custom-insurance' ?\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n {\/* Two overlapping shields: existing insurer expertise + Saladin add-on *\/}\n <path d=\"M 9 4 L 17 7 L 17 16 C 17 21 13 24.5 9 26 C 5 24.5 1 21 1 16 L 1 7 Z\" fill=\"#94ADEC\" opacity=\"0.55\" transform=\"translate(1,1)\" \/>\n <path d=\"M 16 3 L 25 6.5 L 25 16.5 C 25 22 20.5 26 16 27.5 C 11.5 26 7 22 7 16.5 L 7 6.5 Z\" fill=\"#fff\" \/>\n <path d=\"M 16 3 L 25 6.5 L 25 16.5 C 25 22 20.5 26 16 27.5 Z\" fill=\"#C2D0F6\" \/>\n <path d=\"M 12 15.5 L 15 18.5 L 20.5 12\" stroke=\"#1E3888\" strokeWidth=\"2.2\" fill=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\" \/>\n <\/svg> :\n\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n {\/* Briefcase (sales) with a small insurance shield badge added on top *\/}\n <rect x=\"4\" y=\"12\" width=\"24\" height=\"15\" rx=\"3\" fill=\"#fff\" \/>\n <rect x=\"4\" y=\"12\" width=\"24\" height=\"6\" rx=\"3\" fill=\"#B7E8C4\" \/>\n <rect x=\"12\" y=\"8\" width=\"8\" height=\"5\" rx=\"1.5\" fill=\"none\" stroke=\"#fff\" strokeWidth=\"2\" \/>\n <circle cx=\"24\" cy=\"10\" r=\"7\" fill=\"#FFC53A\" stroke=\"#fff\" strokeWidth=\"1.6\" \/>\n <path d=\"M 24 6.5 L 27.5 8 L 27.5 10.5 C 27.5 12.3 25.9 13.6 24 14.2 C 22.1 13.6 20.5 12.3 20.5 10.5 L 20.5 8 Z\" fill=\"#00A74F\" \/>\n <\/svg>\n }\n <\/div>\n <div style={{ flex: 1 }}>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, color: '#0E1F11' }}>{p.title}<\/div>\n <div style={{ fontSize: 13.5, color: '#5C5F5F', marginTop: 4, lineHeight: 1.5 }}>{p.desc}<\/div>\n <\/div>\n <i className=\"ri-arrow-right-line\" style={{ fontSize: 22, color: '#5C5F5F', flexShrink: 0 }}><\/i>\n <\/a>\n )}\n <\/div>\n <div className=\"sp-grid-4\" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginTop: 16 }}>\n {[\n { title: 'Chuy\u00ean gia v\u1ec1 Xe', href: '#audience', bg: '#FFE8CC', fg: '#7A4300' },\n { title: 'Chuy\u00ean gia v\u1ec1 S\u1ee9c kh\u1ecfe', href: '#audience', bg: '#FFD9E1', fg: '#8A1F3D' },\n { title: 'Chuy\u00ean gia v\u1ec1 Du l\u1ecbch', href: '#audience', bg: '#D6EBFF', fg: '#0F3D73' },\n { title: 'Chuy\u00ean gia v\u1ec1 l\u0129nh v\u1ef1c Kh\u00e1c', href: '#audience', bg: '#E4E0FF', fg: '#3C2E82' }].\n map((t) =>\n <a key={t.title} href={t.href} style={{\n display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center',\n background: t.bg, borderRadius: 12, padding: '18px 14px', minHeight: 64,\n border: '1px solid rgba(0,0,0,0.04)', textDecoration: 'none',\n fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: t.fg,\n boxShadow: '0 6px 14px -8px rgba(16,24,40,0.1)',\n transition: 'transform 200ms var(--easing-standard), box-shadow 200ms var(--easing-standard)'\n }}\n onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.boxShadow = '0 12px 20px -8px rgba(16,24,40,0.18)';}}\n onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = '0 6px 14px -8px rgba(16,24,40,0.1)';}}>\n {t.title}<\/a>\n )}\n <\/div>\n <\/C>\n <\/section>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Why \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ 5 vertical cards alternating navy\/green. Title is always visible; on\n\/\/ hover, the illustration cross-fades to a description paragraph.\nfunction WhyCard({ tone, title, description, illustration }) {\n const fills = tone === 'navy' ?\n { bg: 'linear-gradient(180deg, #2A4DAE 0%, #1E3888 100%)', text: '#fff', sub: 'rgba(255,255,255,0.85)', glow: 'rgba(148,173,236,0.5)' } :\n { bg: 'linear-gradient(180deg, #44E178 0%, #00A74F 100%)', text: '#fff', sub: 'rgba(255,255,255,0.92)', glow: 'rgba(197,255,202,0.6)' };\n const [hover, setHover] = React.useState(false);\n return (\n <div\n onMouseEnter={() => setHover(true)}\n onMouseLeave={() => setHover(false)}\n style={{\n borderRadius: 16, background: fills.bg, padding: '24px 22px',\n color: fills.text, position: 'relative', overflow: 'hidden',\n display: 'flex', flexDirection: 'column', gap: 16, minHeight: 208,\n boxShadow: hover ?\n `0 24px 40px -10px rgba(16,24,40,0.32), 0 0 0 2px ${fills.glow}, 0 0 32px -4px ${fills.glow}` :\n '0 8px 18px -8px rgba(16,24,40,0.16)',\n transform: hover ? 'translateY(-6px) scale(1.02)' : 'translateY(0) scale(1)',\n transition: 'transform 260ms var(--easing-decelerate), box-shadow 260ms var(--easing-decelerate)',\n cursor: 'default'\n }}>\n {\/* Sheen sweep on hover *\/}\n <div aria-hidden=\"true\" style={{\n position: 'absolute', top: 0, left: hover ? '110%' : '-60%', width: '55%', height: '100%',\n background: 'linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%)',\n transform: 'skewX(-18deg)',\n transition: 'left 620ms var(--easing-decelerate)',\n pointerEvents: 'none'\n }} \/>\n {\/* Title *\/}\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.02em', lineHeight: 1.15, textWrap: 'balance', position: 'relative', zIndex: 1 }}>{title}<\/div>\n\n {\/* Body area \u2014 illustration \u21c6 description cross-fade *\/}\n <div style={{ position: 'relative', flex: 1, minHeight: 64, zIndex: 1 }}>\n {\/* Illustration layer *\/}\n <div style={{\n position: 'absolute', inset: 0,\n display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-start',\n opacity: hover ? 0 : 1,\n transform: hover ? 'translateY(6px) scale(0.9) rotate(-4deg)' : 'translateY(0) scale(1) rotate(0deg)',\n transition: 'opacity 220ms var(--easing-standard), transform 280ms var(--easing-standard)',\n pointerEvents: 'none'\n }}>\n <div style={{ width: 64, height: 64, transition: 'transform 280ms var(--easing-decelerate)', transform: hover ? 'none' : 'none' }}>{illustration}<\/div>\n <\/div>\n {\/* Description layer *\/}\n <div style={{\n position: 'absolute', inset: 0,\n display: 'flex', alignItems: 'center',\n opacity: hover ? 1 : 0,\n transform: hover ? 'translateY(0)' : 'translateY(10px)',\n transition: 'opacity 260ms var(--easing-decelerate) 60ms, transform 300ms var(--easing-decelerate) 60ms',\n pointerEvents: 'none'\n }}>\n <div style={{\n fontSize: 13.5, lineHeight: 1.5, color: fills.sub,\n fontWeight: 500\n }}>{description}<\/div>\n <\/div>\n <\/div>\n <\/div>);\n\n}\n\nfunction WhySection() {\n \/\/ Tonal accent colors for icons (lighter shade of card bg)\n const navyIc = '#94ADEC'; \/\/ light blue against navy cards\n const greenIc = '#C5FFCA'; \/\/ pale green against green cards\n return (\n <section id=\"why\" data-screen-label=\"03 Why\" style={{ background: '#fff', padding: '88px 0 96px' }}>\n <C>\n <SectionTitle eyebrow=\"V\u00ec sao ch\u1ecdn Saladin Pro\" eyebrowColor=\"rgb(20, 197, 96)\">\n V\u00ec sao nhi\u1ec1u ng\u01b0\u1eddi \u0111\u0103ng k\u00fd l\u00e0m CTV <span style={{ color: Sg }}>Saladin Pro<\/span>?\n <\/SectionTitle>\n <p className=\"sp-center-lead sp-why-lead\" style={{ textAlign: 'center', marginTop: -20, marginBottom: 44, fontSize: 15, color: '#5C5F5F', maxWidth: 620, marginLeft: 'auto', marginRight: 'auto' }}>\n Gi\u1ea3i ph\u00e1p thu nh\u1eadp th\u00f4ng minh, kh\u00f4ng r\u1ee7i ro cho m\u1ecdi \u0111\u1ed1i t\u01b0\u1ee3ng.\n <\/p>\n <div className=\"sp-grid-5\" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>\n <WhyCard tone=\"navy\" title={<>H\u1ed7 tr\u1ee3<br \/>5 sao<\/>} description=\"B\u1eaft \u0111\u1ea7u ngay l\u1eadp t\u1ee9c m\u00e0 kh\u00f4ng c\u1ea7n \u0111\u1eb7t c\u1ecdc hay chi ph\u00ed tham gia.\" illustration={\n \/\/ Wallet with 0\u20ab\n <svg viewBox=\"0 0 120 120\" width=\"110\" height=\"110\" aria-hidden=\"true\">\n <rect x=\"20\" y=\"38\" width=\"80\" height=\"58\" rx=\"10\" fill={navyIc} \/>\n <rect x=\"20\" y=\"38\" width=\"80\" height=\"14\" rx=\"10\" fill={navyIc} opacity=\"0.7\" \/>\n {\/* Coin slot \/ clasp *\/}\n <rect x=\"68\" y=\"62\" width=\"28\" height=\"20\" rx=\"6\" fill=\"#1E3888\" \/>\n <circle cx=\"82\" cy=\"72\" r=\"6\" fill={navyIc} \/>\n <text x=\"82\" y=\"76\" textAnchor=\"middle\" fontSize=\"11\" fontWeight=\"800\" fontFamily=\"var(--font-display)\" fill=\"#1E3888\">0<\/text>\n <\/svg>\n } \/>\n <WhyCard tone=\"green\" title={<>L\u00e0m m\u1ecdi<br \/>l\u00fac, m\u1ecdi<br \/>n\u01a1i<\/>} description=\"T\u1ef1 do s\u1eafp x\u1ebfp th\u1eddi gian l\u00e0m vi\u1ec7c, ph\u00f9 h\u1ee3p v\u1edbi m\u1ecdi l\u1ecbch tr\u00ecnh.\" illustration={\n \/\/ Map pin\n <svg viewBox=\"0 0 120 120\" width=\"110\" height=\"110\" aria-hidden=\"true\">\n <path d=\"M 60 14 C 41 14 28 28 28 47 C 28 70 60 102 60 102 C 60 102 92 70 92 47 C 92 28 79 14 60 14 Z\" fill={greenIc} \/>\n <circle cx=\"60\" cy=\"46\" r=\"11\" fill=\"#14C560\" \/>\n <\/svg>\n } \/>\n <WhyCard tone=\"navy\" title={<>Th\u00f9 lao<br \/>h\u1ea5p d\u1eabn<\/>} description=\"Ch\u00ednh s\u00e1ch th\u00f9 lao minh b\u1ea1ch, chi tr\u1ea3 nhanh ch\u00f3ng h\u00e0ng th\u00e1ng.\" illustration={\n \/\/ Tulip\n <svg viewBox=\"0 0 120 120\" width=\"110\" height=\"110\" aria-hidden=\"true\">\n {\/* Stem *\/}\n <path d=\"M 60 64 L 60 100\" stroke={navyIc} strokeWidth=\"3\" strokeLinecap=\"round\" \/>\n {\/* Petals *\/}\n <path d=\"M 60 30 C 76 30 86 46 84 64 C 78 60 70 60 60 64 Z\" fill={navyIc} \/>\n <path d=\"M 60 30 C 44 30 34 46 36 64 C 42 60 50 60 60 64 Z\" fill={navyIc} opacity=\"0.85\" \/>\n <path d=\"M 60 30 C 56 38 56 56 60 64 C 64 56 64 38 60 30 Z\" fill=\"#1E3888\" \/>\n {\/* Leaf *\/}\n <path d=\"M 60 80 C 70 78 78 82 82 88 C 76 92 68 92 60 88 Z\" fill={navyIc} opacity=\"0.7\" \/>\n <\/svg>\n } \/>\n <WhyCard tone=\"green\" title={<>Ng\u01b0\u1eddi m\u1edbi<br \/>v\u1eabn l\u00e0m<br \/>\u0111\u01b0\u1ee3c<\/>} description=\"H\u1ec7 th\u1ed1ng \u0111\u00e0o t\u1ea1o b\u00e0i b\u1ea3n v\u00e0 \u0111\u1ed9i ng\u0169 chuy\u00ean gia h\u1ed7 tr\u1ee3 ch\u1ed1t \u0111\u01a1n.\" illustration={\n \/\/ 3 people heads\n <svg viewBox=\"0 0 120 120\" width=\"110\" height=\"110\" aria-hidden=\"true\">\n {\/* Back-left person *\/}\n <circle cx=\"36\" cy=\"56\" r=\"10\" fill={greenIc} opacity=\"0.85\" \/>\n <path d=\"M 20 86 Q 20 72 36 72 Q 52 72 52 86 L 52 92 L 20 92 Z\" fill={greenIc} opacity=\"0.85\" \/>\n {\/* Front-center person *\/}\n <circle cx=\"60\" cy=\"46\" r=\"13\" fill={greenIc} \/>\n <path d=\"M 38 90 Q 38 70 60 70 Q 82 70 82 90 L 82 100 L 38 100 Z\" fill={greenIc} \/>\n {\/* Back-right person *\/}\n <circle cx=\"86\" cy=\"58\" r=\"9\" fill={greenIc} opacity=\"0.75\" \/>\n <path d=\"M 72 88 Q 72 76 86 76 Q 100 76 100 88 L 100 94 L 72 94 Z\" fill={greenIc} opacity=\"0.75\" \/>\n <\/svg>\n } \/>\n <WhyCard tone=\"navy\" title={<>Nhi\u1ec1u s\u1ea3n<br \/>ph\u1ea9m d\u1ec5<br \/>b\u00e1n<\/>} description=\"T\u1eeb b\u1ea3o hi\u1ec3m xe m\u00e1y \u0111\u1ebfn s\u1ee9c kh\u1ecfe, \u0111\u00e1p \u1ee9ng m\u1ecdi nhu c\u1ea7u kh\u00e1ch h\u00e0ng.\" illustration={\n \/\/ 4 shapes: 3 squares + 1 diamond\n <svg viewBox=\"0 0 120 120\" width=\"110\" height=\"110\" aria-hidden=\"true\">\n <rect x=\"22\" y=\"36\" width=\"28\" height=\"28\" rx=\"4\" fill={navyIc} \/>\n <rect x=\"22\" y=\"72\" width=\"28\" height=\"28\" rx=\"4\" fill={navyIc} opacity=\"0.85\" \/>\n <rect x=\"58\" y=\"72\" width=\"28\" height=\"28\" rx=\"4\" fill={navyIc} opacity=\"0.85\" \/>\n <rect x=\"72\" y=\"22\" width=\"28\" height=\"28\" rx=\"4\" fill={navyIc} transform=\"rotate(45 86 36)\" \/>\n <\/svg>\n } \/>\n <\/div>\n\n {\/* No-KPI callout band *\/}\n <div style={{\n marginTop: 32, position: 'relative',\n borderRadius: 18, overflow: 'hidden',\n background: 'linear-gradient(120deg, #0A1530 0%, #1E3888 100%)',\n padding: '30px 40px',\n display: 'flex', alignItems: 'center', gap: 26,\n boxShadow: '0 16px 32px -12px rgba(10,21,48,0.32)'\n }}>\n {\/* Left: flat stamp badge *\/}\n <div style={{\n flexShrink: 0,\n width: 88, height: 88, borderRadius: '50%',\n background: '#FFC53A',\n display: 'grid', placeItems: 'center'\n }}>\n <div style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 22, lineHeight: 1.15, color: '#0A1530',\n textAlign: 'center', letterSpacing: '-0.01em'\n }}>NO<br \/>KPI<\/div>\n <\/div>\n\n {\/* Right: copy *\/}\n <div>\n <div style={{\n fontFamily: 'var(--font-display)', fontWeight: 700,\n fontSize: 24, lineHeight: 1.25, letterSpacing: '-0.015em',\n color: '#FFC53A'\n }}>\n Kh\u00f4ng y\u00eau c\u1ea7u KPIs, kh\u00f4ng ch\u1ec9 ti\u00eau doanh s\u1ed1\n <\/div>\n <div style={{\n marginTop: 8, fontSize: 14.5, color: 'rgba(255,255,255,0.8)',\n maxWidth: 560, lineHeight: 1.5\n }}>\n Kh\u00f4ng \u00e1p l\u1ef1c doanh s\u1ed1, b\u1ea1n l\u00e0m vi\u1ec7c theo kh\u1ea3 n\u0103ng c\u1ee7a m\u00ecnh.\n <\/div>\n <\/div>\n <\/div>\n <\/C>\n <\/section>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Income \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction IncomeIcon({ kind }) {\n \/\/ Small illustrated multi-color icons (matches the colorful flat-illustration style of the reference)\n const w = 32,h = 32;\n switch (kind) {\n case 'health':return (\n <svg width={w} height={h} viewBox=\"0 0 32 32\">\n <path d=\"M 9 6 L 9 16 Q 9 21 14 21 Q 19 21 19 16 L 19 6\" stroke=\"#14C560\" strokeWidth=\"2.5\" fill=\"none\" strokeLinecap=\"round\" \/>\n <circle cx=\"9\" cy=\"6\" r=\"2.2\" fill=\"#1E3888\" \/>\n <circle cx=\"19\" cy=\"6\" r=\"2.2\" fill=\"#1E3888\" \/>\n <path d=\"M 14 21 L 14 24 Q 14 28 19 28 Q 24 28 24 23\" stroke=\"#14C560\" strokeWidth=\"2.5\" fill=\"none\" strokeLinecap=\"round\" \/>\n <circle cx=\"24\" cy=\"22\" r=\"3.5\" fill=\"#FFC53A\" stroke=\"#0A1530\" strokeWidth=\"1.2\" \/>\n <\/svg>);\n\n case 'car':return (\n <svg width={w} height={h} viewBox=\"0 0 32 32\">\n <path d=\"M 5 19 L 7 13 Q 8 11 10 11 L 22 11 Q 24 11 25 13 L 27 19 L 27 23 Q 27 24 26 24 L 24 24 Q 23 24 23 23 L 23 22 L 9 22 L 9 23 Q 9 24 8 24 L 6 24 Q 5 24 5 23 Z\" fill=\"#E14B4B\" \/>\n <path d=\"M 9 17 L 10 13 Q 10.3 12 11 12 L 21 12 Q 21.7 12 22 13 L 23 17 Z\" fill=\"#6BC1FF\" \/>\n <line x1=\"16\" y1=\"12\" x2=\"16\" y2=\"17\" stroke=\"#0A1530\" strokeWidth=\"1\" \/>\n <circle cx=\"9.5\" cy=\"22.5\" r=\"2.3\" fill=\"#1A1D20\" \/>\n <circle cx=\"22.5\" cy=\"22.5\" r=\"2.3\" fill=\"#1A1D20\" \/>\n <\/svg>);\n\n case 'moto':return (\n <svg width={w} height={h} viewBox=\"0 0 32 32\">\n <circle cx=\"7\" cy=\"22\" r=\"4\" fill=\"#1A1D20\" \/>\n <circle cx=\"7\" cy=\"22\" r=\"1.6\" fill=\"#fff\" \/>\n <circle cx=\"25\" cy=\"22\" r=\"4\" fill=\"#1A1D20\" \/>\n <circle cx=\"25\" cy=\"22\" r=\"1.6\" fill=\"#fff\" \/>\n <path d=\"M 7 22 L 14 22 L 17 14 L 22 14 L 25 22\" fill=\"#14C560\" \/>\n <path d=\"M 14 22 L 19 17 L 23 17\" stroke=\"#FFC53A\" strokeWidth=\"2\" fill=\"none\" strokeLinecap=\"round\" \/>\n <rect x=\"20\" y=\"11\" width=\"5\" height=\"3\" rx=\"0.8\" fill=\"#E14B4B\" \/>\n <\/svg>);\n\n case 'travel':return (\n <svg width={w} height={h} viewBox=\"0 0 32 32\">\n <path d=\"M 3 18 L 12 16 L 18 8 L 21 8 L 18 17 L 24 18 L 27 14 L 29 15 L 26 22 L 8 25 L 4 22 Z\" fill=\"#3DBCD6\" \/>\n <path d=\"M 12 16 L 18 17 L 17 22 L 11 21 Z\" fill=\"#1F8FB0\" opacity=\"0.6\" \/>\n <circle cx=\"21\" cy=\"11\" r=\"1.2\" fill=\"#fff\" \/>\n <\/svg>);\n\n case 'accident':return (\n <svg width={w} height={h} viewBox=\"0 0 32 32\">\n <rect x=\"6\" y=\"13\" width=\"20\" height=\"6\" rx=\"3\" fill=\"#F2A2C0\" transform=\"rotate(-22 16 16)\" \/>\n <rect x=\"14.5\" y=\"14.5\" width=\"3\" height=\"3\" fill=\"#fff\" transform=\"rotate(-22 16 16)\" \/>\n <circle cx=\"10.5\" cy=\"18.5\" r=\"0.8\" fill=\"#fff\" \/>\n <circle cx=\"21.5\" cy=\"13.5\" r=\"0.8\" fill=\"#fff\" \/>\n <circle cx=\"10.5\" cy=\"15\" r=\"0.8\" fill=\"#fff\" \/>\n <circle cx=\"21.5\" cy=\"17\" r=\"0.8\" fill=\"#fff\" \/>\n <\/svg>);\n\n case 'home':return (\n <svg width={w} height={h} viewBox=\"0 0 32 32\">\n <path d=\"M 5 15 L 16 6 L 27 15 L 25 15 L 25 26 L 7 26 L 7 15 Z\" fill=\"#F4F6FE\" \/>\n <path d=\"M 4 16 L 16 5 L 28 16 L 25 16 L 16 8 L 7 16 Z\" fill=\"#14C560\" \/>\n <rect x=\"13\" y=\"17\" width=\"6\" height=\"9\" fill=\"#E14B4B\" \/>\n <circle cx=\"17.5\" cy=\"22\" r=\"0.6\" fill=\"#FFC53A\" \/>\n <rect x=\"9\" y=\"17\" width=\"3\" height=\"3\" fill=\"#6BC1FF\" \/>\n <rect x=\"20\" y=\"17\" width=\"3\" height=\"3\" fill=\"#6BC1FF\" \/>\n <\/svg>);\n\n }\n return null;\n}\n\nfunction IncomeSection() {\n const rows = [\n { icon: 'https:\/\/cdn.saladin.vn\/images\/product_cat\/HEALTH_COMPREHENSIVE.svg', name: 'B\u1ea3o hi\u1ec3m s\u1ee9c kho\u1ebb', range: '1.000.000 - 2.500.000 VN\u0110' },\n { icon: 'https:\/\/cdn.saladin.vn\/images\/product_cat\/CAR_COMPREHENSIVE.svg', name: 'B\u1ea3o hi\u1ec3m \u00f4 t\u00f4', range: '1.000.000 - 3.500.000 VN\u0110' },\n { icon: 'https:\/\/cdn.saladin.vn\/images\/product_cat\/BIKE.svg', name: 'B\u1ea3o hi\u1ec3m xe m\u00e1y', range: '400.000 - 1.000.000 VN\u0110' },\n { icon: 'https:\/\/cdn.saladin.vn\/images\/product_cat\/INTER_TRAVEL.svg', name: 'B\u1ea3o hi\u1ec3m du l\u1ecbch', range: '150.000 - 1.000.000 VN\u0110' },\n { icon: 'https:\/\/cdn.saladin.vn\/images\/product_cat\/PERSONAL_ACCIDENT.svg', name: 'B\u1ea3o hi\u1ec3m tai n\u1ea1n', range: '200.000 - 500.000 VN\u0110' },\n { icon: 'https:\/\/cdn.saladin.vn\/images\/product_cat\/HOME_INSURANCE.svg', name: 'B\u1ea3o hi\u1ec3m nh\u00e0 t\u01b0 nh\u00e2n', range: '300.000 - 1.500.000 VN\u0110' }];\n\n const perks = [\n { kind: 'chart', t: 'Kh\u00f4ng gi\u1edbi h\u1ea1n thu nh\u1eadp', s: 'B\u1ea1n c\u00e0ng n\u1ed7 l\u1ef1c, thu nh\u1eadp c\u00e0ng cao, kh\u00f4ng c\u00f3 tr\u1ea7n gi\u1edbi h\u1ea1n.' },\n { kind: 'check', t: 'Theo d\u00f5i minh b\u1ea1ch', s: 'Qu\u1ea3n l\u00fd thu nh\u1eadp v\u00e0 h\u1ee3p \u0111\u1ed3ng ngay tr\u00ean \u1ee9ng d\u1ee5ng Saladin Pro.' },\n { kind: 'alarm', t: 'Kh\u00f4ng c\u1ea7n ngh\u1ec9 vi\u1ec7c full-time', s: 'V\u1eeba l\u00e0m c\u00f4ng vi\u1ec7c hi\u1ec7n t\u1ea1i, v\u1eeba gia t\u0103ng thu nh\u1eadp th\u1ee5 \u0111\u1ed9ng.' }];\n\n\n const SECTION_BG = '#0A1530'; \/\/ deepest navy\n const CARD_BG = '#142146'; \/\/ slightly lighter panel\n const HAIRLINE = 'rgba(255,255,255,0.08)';\n const GREEN = '#14C560';\n const GOLD = '#FFC53A';\n\n return (\n (() => {\n const perksRef = React.useRef(null);\n const [perksIn, setPerksIn] = React.useState(false);\n React.useEffect(() => {\n const el = perksRef.current;\n if (!el) return;\n const fallback = setTimeout(() => setPerksIn(true), 900);\n const obs = new IntersectionObserver(([entry]) => {\n if (entry.isIntersecting) {setPerksIn(true);obs.disconnect();clearTimeout(fallback);}\n }, { threshold: 0.3 });\n obs.observe(el);\n return () => {obs.disconnect();clearTimeout(fallback);};\n }, []);\n return (\n <section id=\"income\" data-screen-label=\"04 Income\" style={{ background: SECTION_BG, padding: '96px 0 104px', color: '#fff', position: 'relative', overflow: 'hidden' }}>\n <C>\n {\/* Title block *\/}\n <div style={{ textAlign: 'center', marginBottom: 48 }}>\n <h2 style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 44, lineHeight: 1.1, letterSpacing: '-0.025em',\n color: '#fff', margin: 0, textWrap: 'balance'\n }}>B\u1ea1n c\u00f3 th\u1ec3 ki\u1ebfm \u0111\u01b0\u1ee3c bao nhi\u00eau?<\/h2>\n <p style={{ marginTop: 14, fontSize: 16, color: 'rgba(255,255,255,0.72)' }}>\n D\u1ef1 to\u00e1n thu nh\u1eadp d\u1ef1a tr\u00ean nh\u1eefng s\u1ea3n ph\u1ea9m ph\u1ed5 bi\u1ebfn nh\u1ea5t.\n <\/p>\n <\/div>\n\n <div className=\"sp-grid-income\" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 56, alignItems: 'center' }}>\n {\/* Income table *\/}\n <div style={{\n background: CARD_BG, borderRadius: 18, padding: '8px 8px',\n border: `1px solid ${HAIRLINE}`,\n boxShadow: '0 24px 48px -16px rgba(0,0,0,0.4)'\n }}>\n {rows.map((r, i) =>\n <div key={i} style={{\n display: 'grid', gridTemplateColumns: '40px 1fr auto', alignItems: 'center', gap: 18,\n padding: '18px 20px',\n borderBottom: i < rows.length - 1 ? `1px solid ${HAIRLINE}` : 'none'\n }}>\n <img src={r.icon} alt=\"\" width=\"36\" height=\"36\" style={{ display: 'block', flexShrink: 0 }} \/>\n <span style={{ fontSize: 16, fontWeight: 500, color: '#fff' }}>{r.name}<\/span>\n <span style={{ fontSize: 15, fontWeight: 700, color: GREEN, fontFamily: 'var(--font-display)', letterSpacing: '-0.005em' }}>{r.range}<\/span>\n <\/div>\n )}\n <\/div>\n\n {\/* Perks list *\/}\n <div ref={perksRef} style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>\n {perks.map((p, i) =>\n <div key={i} style={{\n display: 'flex', gap: 18, alignItems: 'flex-start',\n opacity: perksIn ? 1 : 0,\n transform: perksIn ? 'translateY(0)' : 'translateY(22px)',\n transition: `opacity 520ms var(--easing-decelerate) ${i * 150}ms, transform 520ms var(--easing-decelerate) ${i * 150}ms`\n }}>\n <div style={{\n width: 52, height: 52, borderRadius: '50%',\n border: `2.5px solid ${GOLD}`, color: GOLD,\n display: 'grid', placeItems: 'center', flexShrink: 0,\n position: 'relative',\n background: perksIn ? GREEN : 'transparent',\n borderColor: perksIn ? GREEN : GOLD,\n transform: perksIn ? 'scale(1)' : 'scale(0.6)',\n transition: `background 320ms var(--easing-decelerate) ${i * 150 + 180}ms, border-color 320ms var(--easing-decelerate) ${i * 150 + 180}ms, transform 420ms cubic-bezier(0.34,1.56,0.64,1) ${i * 150 + 180}ms`\n }}>\n <span style={{\n display: 'grid', placeItems: 'center',\n opacity: perksIn ? 0 : 1,\n transition: `opacity 200ms ${i * 150 + 180}ms`\n }}>\n <PerkIcon kind={p.kind} color={GOLD} \/>\n <\/span>\n <i className=\"ri-check-line\" style={{\n position: 'absolute', fontSize: 26, color: '#fff',\n opacity: perksIn ? 1 : 0,\n transform: perksIn ? 'scale(1)' : 'scale(0.4)',\n transition: `opacity 220ms var(--easing-decelerate) ${i * 150 + 260}ms, transform 320ms cubic-bezier(0.34,1.56,0.64,1) ${i * 150 + 260}ms`\n }}><\/i>\n <\/div>\n <div style={{ paddingTop: 4 }}>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: GOLD, letterSpacing: '-0.01em' }}>{p.t}<\/div>\n <div style={{ fontSize: 14.5, color: 'rgba(255,255,255,0.82)', marginTop: 6, lineHeight: 1.55 }}>{p.s}<\/div>\n <\/div>\n <\/div>\n )}\n <button className=\"sp-cta-btn\" style={{\n marginTop: 8, alignSelf: 'flex-start',\n background: GREEN, color: '#fff', padding: '14px 34px',\n borderRadius: 10, border: 'none', fontFamily: 'inherit', fontWeight: 600, fontSize: 16,\n cursor: 'pointer', transition: 'background 200ms'\n }}\n onMouseEnter={(e) => e.currentTarget.style.background = '#00A74F'}\n onMouseLeave={(e) => e.currentTarget.style.background = GREEN}>\n \u0110\u0103ng k\u00fd ngay<\/button>\n <\/div>\n <\/div>\n\n <p style={{\n marginTop: 32, fontSize: 12.5, lineHeight: 1.6,\n color: 'rgba(255,255,255,0.55)', maxWidth: 720\n }}>\n *Thu nh\u1eadp \u01b0\u1edbc t\u00ednh d\u1ef1a tr\u00ean s\u1ed1 l\u01b0\u1ee3ng \u0111\u01a1n\/h\u1ee3p \u0111\u1ed3ng ph\u00e1t sinh. Th\u00f9 lao th\u1ef1c t\u1ebf c\u00f3 th\u1ec3 thay \u0111\u1ed5i t\u00f9y s\u1ea3n ph\u1ea9m, gi\u00e1 tr\u1ecb h\u1ee3p \u0111\u1ed3ng v\u00e0 ch\u00ednh s\u00e1ch th\u00f9 lao hi\u1ec7n h\u00e0nh.\n <\/p>\n <\/C>\n <\/section>);\n\n })());\n\n\n}\n\n\/\/ \u2500\u2500\u2500 How it works \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction HowItWorks() {\n const steps = [\n { n: 1, t: '\u0110\u0103ng k\u00fd t\u00e0i kho\u1ea3n', s: 'T\u1ea3i app v\u00e0 \u0111i\u1ec1n th\u00f4ng tin c\u01a1 b\u1ea3n ch\u1ec9 trong 30 gi\u00e2y.' },\n { n: 2, t: 'K\u00fd h\u1ee3p \u0111\u1ed3ng \u0111i\u1ec7n t\u1eed', s: 'X\u00e1c th\u1ef1c danh t\u00ednh v\u00e0 k\u00fd h\u1ee3p \u0111\u1ed3ng CTV nhanh ch\u00f3ng online.' },\n { n: 3, t: 'Chia s\u1ebb & T\u01b0 v\u1ea5n', s: 'S\u1eed d\u1ee5ng kho t\u01b0 li\u1ec7u chuy\u00ean nghi\u1ec7p \u0111\u1ec3 chia s\u1ebb cho kh\u00e1ch h\u00e0ng.' },\n { n: 4, t: 'Kh\u00e1ch h\u00e0ng thanh to\u00e1n', s: 'Kh\u00e1ch mua tr\u1ef1c ti\u1ebfp qua link gi\u1edbi thi\u1ec7u c\u1ee7a b\u1ea1n.' },\n { n: 5, t: 'Nh\u1eadn th\u00f9 lao', s: 'Th\u00f9 lao v\u1ec1 t\u00e0i kho\u1ea3n ng\u00e2n h\u00e0ng ngay sau khi \u0111\u01a1n \u0111\u01b0\u1ee3c duy\u1ec7t.' }];\n\n const [active, setActive] = React.useState(0);\n const GREEN = '#14C560';\n\n return (\n <section id=\"how\" data-screen-label=\"05 How it works\" style={{ background: '#fff', padding: '104px 0 112px' }}>\n <C>\n {\/* Title (matches reference: inline \"Saladin Pro\" in green) *\/}\n <div style={{ textAlign: 'center', marginBottom: 14 }}>\n <h2 style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 44, lineHeight: 1.1, letterSpacing: '-0.025em',\n color: '#0E1F11', margin: 0\n }}>\n L\u00e0m CTV <span style={{ color: GREEN }}>Saladin Pro<\/span> nh\u01b0 th\u1ebf n\u00e0o?\n <\/h2>\n <\/div>\n <p className=\"sp-center-lead\" style={{ textAlign: 'center', marginTop: 16, marginBottom: 64, fontSize: 16, color: '#5C5F5F' }}>\n Ch\u1ec9 v\u1edbi 5 b\u01b0\u1edbc \u0111\u01a1n gi\u1ea3n \u0111\u1ec3 b\u1eaft \u0111\u1ea7u h\u00e0nh tr\u00ecnh c\u1ee7a b\u1ea1n.\n <\/p>\n\n <div className=\"sp-grid-how\" style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 80, alignItems: 'center' }}>\n {\/* Steps *\/}\n <div className=\"sp-how-steps\" style={{ position: 'relative', paddingLeft: 80 }}>\n {\/* Continuous green connector *\/}\n <div style={{\n position: 'absolute', left: 31, top: 30, bottom: 30, width: 2,\n background: GREEN, borderRadius: 1\n }} \/>\n {steps.map((st, i) => {\n const isActive = active === i;\n return (\n <button\n key={st.n}\n onClick={() => setActive(i)}\n onMouseEnter={() => setActive(i)}\n className=\"sp-how-step\"\n style={{\n position: 'relative', display: 'block', width: '100%',\n padding: '0 0 36px',\n background: 'transparent', border: 'none', textAlign: 'left',\n cursor: 'pointer', fontFamily: 'inherit'\n }}>\n {\/* Numbered badge *\/}\n <div style={{\n position: 'absolute', left: -80, top: 4,\n width: 64, height: 64, borderRadius: '50%',\n background: '#fff',\n display: 'grid', placeItems: 'center'\n }}>\n <div style={{\n width: 44, height: 44, borderRadius: '50%',\n background: GREEN, color: '#fff',\n display: 'grid', placeItems: 'center',\n fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20,\n boxShadow: isActive ?\n `0 0 0 6px rgba(20,197,96,0.18), 0 8px 16px -4px rgba(20,197,96,0.4)` :\n '0 4px 8px -2px rgba(20,197,96,0.25)',\n transition: 'box-shadow 220ms var(--easing-standard), transform 220ms',\n transform: isActive ? 'scale(1.06)' : 'none'\n }}>{st.n}<\/div>\n <\/div>\n <div style={{\n fontFamily: 'var(--font-display)', fontWeight: 700,\n fontSize: 24, letterSpacing: '-0.02em',\n color: isActive ? GREEN : '#0E1F11',\n transition: 'color 200ms',\n lineHeight: 1.2\n }}>{st.t}<\/div>\n <div style={{\n fontSize: 15, color: '#5C5F5F', marginTop: 8,\n lineHeight: 1.6, maxWidth: 520\n }}>{st.s}<\/div>\n <\/button>);\n\n })}\n <\/div>\n\n {\/* Phone with video *\/}\n <div style={{ display: 'grid', placeItems: 'center', position: 'relative' }}>\n <AppPhoneSplash \/>\n <\/div>\n <\/div>\n <\/C>\n <\/section>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Audience cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction AudienceCard({ slotId, label, sub, placeholder, src }) {\n return (\n <div style={{\n position: 'relative', borderRadius: 18, overflow: 'hidden',\n height: 460, background: '#E1F6E0',\n boxShadow: '0 12px 24px -8px rgba(16,24,40,0.12)',\n border: '1px solid rgba(255,255,255,0.6)'\n }}>\n {\/* Photo drop-zone *\/}\n <img src={src} alt={label} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} \/>\n \n\n {\/* Bottom green-fade gradient for legibility *\/}\n <div aria-hidden=\"true\" style={{\n position: 'absolute', left: 0, right: 0, bottom: 0, height: '52%',\n background: 'linear-gradient(180deg, rgba(198,255,202,0) 0%, rgba(102,255,146,0.55) 55%, rgba(20,197,96,0.85) 100%)',\n pointerEvents: 'none'\n }} \/>\n\n {\/* Frosted glass info panel *\/}\n <div style={{\n position: 'absolute', left: 16, right: 16, bottom: 16,\n padding: '18px 20px 20px',\n background: 'rgba(255,255,255,0.82)',\n backdropFilter: 'blur(18px) saturate(180%)',\n WebkitBackdropFilter: 'blur(18px) saturate(180%)',\n borderRadius: 14,\n border: '1px solid rgba(255,255,255,0.9)',\n boxShadow: '0 8px 24px -6px rgba(16,24,40,0.18)',\n textAlign: 'center'\n }}>\n <div style={{\n fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22,\n color: '#0E1F11', letterSpacing: '-0.02em', lineHeight: 1.2\n }}>{label}<\/div>\n <div style={{\n fontSize: 13.5, color: '#1B1D20', marginTop: 8, lineHeight: 1.55,\n textWrap: 'balance'\n }}>{sub}<\/div>\n <\/div>\n <\/div>);\n\n}\n\nfunction AudienceSection() {\n const personas = [\n { slotId: 'persona-insurance', label: 'Nh\u00e2n vi\u00ean B\u1ea3o hi\u1ec3m', sub: 'H\u1ee3p t\u00e1c \u0111\u01a1n gi\u1ea3n tr\u00ean vai tr\u00f2 CTV \/ Afilliate, kh\u00f4ng \u1ea3nh h\u01b0\u1edfng thu nh\u1eadp t\u1eeb c\u00f4ng vi\u1ec7c hi\u1ec7n t\u1ea1i.',\n placeholder: '\u1ea2nh nh\u00e2n vi\u00ean b\u1ea3o hi\u1ec3m nam (m\u1ec9m c\u01b0\u1eddi, m\u1eb7c vest)', src: 'https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/07\/22081944\/saladin-pro-nv-bao-hiem.webp' },\n { slotId: 'persona-office', label: 'Nh\u00e2n vi\u00ean V\u0103n ph\u00f2ng', sub: 'T\u1eadn d\u1ee5ng th\u1eddi gian r\u1ea3nh v\u00e0 m\u1ea1ng l\u01b0\u1edbi m\u1ed1i quan h\u1ec7 \u0111\u1ec3 ki\u1ebfm th\u00eam thu nh\u1eadp th\u1ee5 \u0111\u1ed9ng.',\n placeholder: '\u1ea2nh n\u1eef nh\u00e2n vi\u00ean v\u0103n ph\u00f2ng (k\u00ednh, \u00e1o s\u01a1 mi)', src: 'https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/07\/22081943\/saladin-pro-nv-van-phong.webp' },\n { slotId: 'persona-freelancer', label: 'Freelancer', sub: 'Ch\u1ee7 \u0111\u1ed9ng c\u00f4ng vi\u1ec7c, kh\u00f4ng g\u00f2 b\u00f3 th\u1eddi gian, qu\u1ea3n l\u00fd thu nh\u1eadp ngay tr\u00ean smartphone.',\n placeholder: '\u1ea2nh freelancer tr\u1ebb (tai nghe, kh\u00f4ng gian s\u00e1ng t\u1ea1o)', src: 'https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/07\/22081943\/saladin-pro-freelancer.webp' },\n { slotId: 'persona-garage', label: 'Ch\u1ee7 Garage\/C\u1eeda h\u00e0ng', sub: 'Gia t\u0103ng gi\u00e1 tr\u1ecb cho kh\u00e1ch h\u00e0ng b\u1eb1ng c\u00e1ch t\u01b0 v\u1ea5n b\u1ea3o hi\u1ec3m xe ngay t\u1ea1i ch\u1ed7.',\n placeholder: '\u1ea2nh ng\u01b0\u1eddi \u0111\u00e0n \u00f4ng trung ni\u00ean (ch\u1ee7 garage)', src: 'https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/07\/22081942\/saladin-pro-chu-garage.webp' },\n { slotId: 'persona-mom', label: 'M\u1eb9 b\u1ec9m s\u1eefa', sub: 'V\u1eeba ch\u0103m s\u00f3c gia \u0111\u00ecnh v\u1eeba c\u00f3 th\u1ec3 kinh doanh online b\u1ea3o hi\u1ec3m d\u1ec5 d\u00e0ng, an to\u00e0n.',\n placeholder: '\u1ea2nh m\u1eb9 tr\u1ebb v\u00e0 em b\u00e9', src: 'https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/07\/22081942\/saladin-pro-me-bim-sua.webp' },\n { slotId: 'persona-travel', label: 'Du l\u1ecbch\/B\u1ea5t \u0111\u1ed9ng s\u1ea3n', sub: 'S\u1ea3n ph\u1ea9m b\u1ea3o hi\u1ec3m du l\u1ecbch v\u00e0 b\u1ed3i th\u01b0\u1eddng nh\u00e0 c\u1eeda l\u00e0 m\u1ea3nh gh\u00e9p ho\u00e0n h\u1ea3o cho kh\u00e1ch h\u00e0ng.',\n placeholder: '\u1ea2nh \u0111\u00f4i nam n\u1eef ch\u1ec9 tay (du l\u1ecbch)', src: 'https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/07\/22081941\/saladin-pro-bds.webp' }];\n\n return (\n <section id=\"audience\" data-screen-label=\"06 Audience\" style={{\n background: 'linear-gradient(180deg, #F6FFF2 0%, #C5FFCA 100%)',\n padding: '96px 0'\n }}>\n <C>\n <SectionTitle eyebrow=\"D\u00e0nh cho ai?\">\n Ai ph\u00f9 h\u1ee3p v\u1edbi <span style={{ color: Sg }}>Saladin Pro<\/span>?\n <\/SectionTitle>\n <p className=\"sp-center-lead\" style={{ textAlign: 'center', marginTop: -22, marginBottom: 28, fontSize: 15, color: '#414941', maxWidth: 860, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.65 }}>\n Kh\u00f4ng gi\u1edbi h\u1ea1n ng\u00e0nh ngh\u1ec1, kinh nghi\u1ec7m hay xu\u1ea5t ph\u00e1t \u0111i\u1ec3m. \u0110i\u1ec1u quan tr\u1ecdng l\u00e0 b\u1ea1n s\u1eb5n s\u00e0ng t\u1ea1o th\u00eam gi\u00e1 tr\u1ecb cho nh\u1eefng ng\u01b0\u1eddi xung quanh v\u00e0 ch\u00ednh m\u00ecnh. Saladin Pro c\u00f3 nhi\u1ec1u l\u1ed9 tr\u00ecnh gi\u00fap b\u1ea1n \u1ee9ng d\u1ee5ng c\u00f4ng ngh\u1ec7 \u0111\u1ec3 ph\u00e1t tri\u1ec3n thu nh\u1eadp m\u1ed9t c\u00e1ch chuy\u00ean nghi\u1ec7p.\n <\/p>\n\n <div style={{ textAlign: 'center', marginTop: 32, marginBottom: 48 }}>\n <a href=\"https:\/\/id.saladin.vn\/?callback_url=https%3A%2F%2Fpro.saladin.vn%2Flogin%2Fcallback%3Fredirect%3Dhttps%253A%252F%252Fpro.saladin.vn%252F%26channel%3Dpro&from=pro\"\n target=\"_blank\" rel=\"noopener\" style={{\n background: Sg, color: '#fff', padding: '14px 28px',\n borderRadius: 50, border: 'none', fontFamily: 'inherit', fontWeight: 700, fontSize: 15,\n boxShadow: '0 8px 20px -4px rgba(0,109,49,0.4)',\n display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none'\n }}>\u0110\u0103ng k\u00fd ngay <i className=\"ri-arrow-right-line\" style={{ fontSize: 18 }}><\/i><\/a>\n <\/div>\n\n <div className=\"sp-grid-3\" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>\n {personas.map((p) => <AudienceCard key={p.slotId} {...p} \/>)}\n <\/div>\n <\/C>\n <\/section>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Dashboard \/ income mgmt \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction DashCallout({ icon, t, s }) {\n return (\n <div style={{\n background: '#fff', borderRadius: 18, padding: '22px 22px',\n display: 'flex', gap: 16, alignItems: 'flex-start',\n border: '1px solid #F4D86A',\n boxShadow: '0 8px 20px -6px rgba(133,120,0,0.22), 0 2px 4px -1px rgba(133,120,0,0.08)',\n transition: 'transform 200ms var(--easing-standard), box-shadow 200ms var(--easing-standard)',\n cursor: 'default'\n }}\n onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-4px)';e.currentTarget.style.boxShadow = '0 16px 28px -8px rgba(133,120,0,0.32), 0 4px 8px -2px rgba(133,120,0,0.12)';}}\n onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = '0 8px 20px -6px rgba(133,120,0,0.22), 0 2px 4px -1px rgba(133,120,0,0.08)';}}>\n \n <div style={{\n width: 64, height: 64, borderRadius: 16,\n background: 'linear-gradient(135deg, #F6FFF2 0%, #C5FFCA 100%)',\n display: 'grid', placeItems: 'center', flexShrink: 0,\n boxShadow: '0 4px 10px -2px rgba(0,138,64,0.15), inset 0 -2px 0 rgba(0,0,0,0.04)',\n border: '1px solid #B7CCB6'\n }}>\n {icon}\n <\/div>\n <div>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: '#0E1F11', lineHeight: 1.3, letterSpacing: '-0.01em', textWrap: 'balance' }}>{t}<\/div>\n {s && <div style={{ fontSize: 13.5, color: '#414941', marginTop: 6, lineHeight: 1.5 }}>{s}<\/div>}\n <\/div>\n <\/div>);\n\n}\n\n\/\/ Gold outline icons for the income perks list\nfunction PerkIcon({ kind, color = '#FFC53A' }) {\n switch (kind) {\n case 'chart':return (\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth=\"2.4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n <polyline points=\"4,15 10,9 14,13 20,5\" \/>\n <polyline points=\"15,5 20,5 20,10\" \/>\n <\/svg>);\n\n case 'check':return (\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth=\"2.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n <polyline points=\"5,12.5 10,17.5 19,7.5\" \/>\n <\/svg>);\n\n case 'alarm':return (\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n {\/* Ear bumps *\/}\n <line x1=\"4\" y1=\"5\" x2=\"7\" y2=\"2.5\" \/>\n <line x1=\"20\" y1=\"5\" x2=\"17\" y2=\"2.5\" \/>\n {\/* Clock face *\/}\n <circle cx=\"12\" cy=\"13\" r=\"7\" \/>\n {\/* Hands *\/}\n <polyline points=\"12,10 12,13 15,15\" \/>\n <\/svg>);\n\n }\n return null;\n}\n\n\/\/ Custom flat illustrations for the dashboard section\nfunction DashIcon({ kind }) {\n const N = '#1E3888',G = '#14C560',GL = '#66FF92',GD = '#003916',A = '#FFC53A';\n switch (kind) {\n case 'dashboard':return (\n <svg viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\">\n {\/* Card *\/}\n <rect x=\"4\" y=\"8\" width=\"40\" height=\"32\" rx=\"4\" fill={N} \/>\n <rect x=\"4\" y=\"8\" width=\"40\" height=\"6\" rx=\"4\" fill=\"#2A4DAE\" \/>\n <circle cx=\"8\" cy=\"11\" r=\"0.8\" fill=\"#fff\" \/>\n <circle cx=\"11\" cy=\"11\" r=\"0.8\" fill=\"#fff\" \/>\n <circle cx=\"14\" cy=\"11\" r=\"0.8\" fill=\"#fff\" \/>\n {\/* Bars *\/}\n <rect x=\"9\" y=\"28\" width=\"5\" height=\"8\" rx=\"1\" fill={GL} \/>\n <rect x=\"16\" y=\"22\" width=\"5\" height=\"14\" rx=\"1\" fill={G} \/>\n <rect x=\"23\" y=\"25\" width=\"5\" height=\"11\" rx=\"1\" fill={GL} \/>\n {\/* Line trending up *\/}\n <path d=\"M 30 24 L 34 21 L 38 23 L 42 18\" stroke={A} strokeWidth=\"1.6\" fill=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\" \/>\n <circle cx=\"42\" cy=\"18\" r=\"1.6\" fill={A} \/>\n <\/svg>);\n\n case 'route':return (\n <svg viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\">\n {\/* Dashed winding path *\/}\n <path d=\"M 10 8 Q 10 18 22 18 Q 36 18 36 30 Q 36 40 22 40\" stroke={G} strokeWidth=\"2.4\" fill=\"none\" strokeLinecap=\"round\" strokeDasharray=\"2 4\" \/>\n {\/* Start pin *\/}\n <circle cx=\"10\" cy=\"8\" r=\"4.5\" fill={N} \/>\n <circle cx=\"10\" cy=\"8\" r=\"1.6\" fill=\"#fff\" \/>\n {\/* End pin *\/}\n <path d=\"M 22 32 C 17 32 14 35 14 39 C 14 43 22 48 22 48 C 22 48 30 43 30 39 C 30 35 27 32 22 32 Z\" fill={G} transform=\"translate(0,-8)\" \/>\n <circle cx=\"22\" cy=\"32\" r=\"2.4\" fill=\"#fff\" \/>\n {\/* Check mark inside the destination *\/}\n <path d=\"M 20.5 32 L 21.6 33.1 L 23.8 30.9\" stroke={G} strokeWidth=\"1.4\" fill=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\" \/>\n <\/svg>);\n\n case 'marketing':return (\n <svg viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\">\n {\/* Megaphone body *\/}\n <path d=\"M 8 24 L 8 30 L 14 31 L 14 23 Z\" fill={N} \/>\n <path d=\"M 14 18 L 30 10 L 30 44 L 14 36 Z\" fill={G} \/>\n {\/* Sound waves *\/}\n <path d=\"M 34 20 Q 40 24 34 28\" stroke={A} strokeWidth=\"2.2\" fill=\"none\" strokeLinecap=\"round\" \/>\n <path d=\"M 38 16 Q 46 24 38 32\" stroke={A} strokeWidth=\"2.2\" fill=\"none\" strokeLinecap=\"round\" \/>\n {\/* Flag \/ personalization tag *\/}\n <rect x=\"15\" y=\"33\" width=\"8\" height=\"10\" rx=\"1.5\" fill={GL} transform=\"rotate(6 19 38)\" \/>\n <circle cx=\"19\" cy=\"38\" r=\"1.2\" fill={N} transform=\"rotate(6 19 38)\" \/>\n <\/svg>);\n\n case 'tasks':return (\n <svg viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\">\n {\/* Clipboard *\/}\n <rect x=\"10\" y=\"8\" width=\"28\" height=\"34\" rx=\"4\" fill={N} \/>\n <rect x=\"18\" y=\"6\" width=\"12\" height=\"6\" rx=\"2\" fill={A} \/>\n {\/* Checklist rows *\/}\n <rect x=\"15\" y=\"18\" width=\"4\" height=\"4\" rx=\"1\" fill={GL} \/>\n <line x1=\"22\" y1=\"20\" x2=\"33\" y2=\"20\" stroke=\"#fff\" strokeWidth=\"2\" strokeLinecap=\"round\" \/>\n <rect x=\"15\" y=\"26\" width=\"4\" height=\"4\" rx=\"1\" fill={G} \/>\n <path d=\"M 15.5 28 L 16.7 29.2 L 18.7 27\" stroke=\"#fff\" strokeWidth=\"1.3\" fill=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\" \/>\n <line x1=\"22\" y1=\"28\" x2=\"30\" y2=\"28\" stroke=\"#fff\" strokeWidth=\"2\" strokeLinecap=\"round\" \/>\n <rect x=\"15\" y=\"34\" width=\"4\" height=\"4\" rx=\"1\" fill={GL} \/>\n <line x1=\"22\" y1=\"36\" x2=\"33\" y2=\"36\" stroke=\"#fff\" strokeWidth=\"2\" strokeLinecap=\"round\" \/>\n <\/svg>);\n\n case 'training':return (\n <svg viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\">\n {\/* Open book *\/}\n <path d=\"M 6 12 Q 16 8 22 12 L 22 36 Q 16 32 6 36 Z\" fill={N} \/>\n <path d=\"M 42 12 Q 32 8 26 12 L 26 36 Q 32 32 42 36 Z\" fill={G} \/>\n <line x1=\"11\" y1=\"17\" x2=\"18\" y2=\"15\" stroke=\"#fff\" strokeWidth=\"1.6\" strokeLinecap=\"round\" \/>\n <line x1=\"11\" y1=\"23\" x2=\"18\" y2=\"21\" stroke=\"#fff\" strokeWidth=\"1.6\" strokeLinecap=\"round\" \/>\n <line x1=\"30\" y1=\"15\" x2=\"37\" y2=\"17\" stroke=\"#fff\" strokeWidth=\"1.6\" strokeLinecap=\"round\" \/>\n <line x1=\"30\" y1=\"21\" x2=\"37\" y2=\"23\" stroke=\"#fff\" strokeWidth=\"1.6\" strokeLinecap=\"round\" \/>\n {\/* Refresh \/ update badge *\/}\n <circle cx=\"37\" cy=\"10\" r=\"8\" fill={A} \/>\n <path d=\"M 34 10 A 3.4 3.4 0 1 1 35.2 12.6\" stroke=\"#1E3888\" strokeWidth=\"1.4\" fill=\"none\" strokeLinecap=\"round\" \/>\n <path d=\"M 34 8 L 34 10.4 L 36.4 10.4 Z\" fill=\"#1E3888\" \/>\n <\/svg>);\n\n case 'catalog':return (\n <svg viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\">\n {\/* Three stacked cards (fanned) *\/}\n <rect x=\"9\" y=\"10\" width=\"22\" height=\"28\" rx=\"3\" fill=\"#94ADEC\" transform=\"rotate(-8 20 24)\" \/>\n <rect x=\"13\" y=\"12\" width=\"22\" height=\"28\" rx=\"3\" fill={N} transform=\"rotate(0 24 26)\" \/>\n <rect x=\"17\" y=\"10\" width=\"22\" height=\"28\" rx=\"3\" fill={G} transform=\"rotate(8 28 24)\" \/>\n {\/* Top card content *\/}\n <g transform=\"rotate(8 28 24)\">\n <circle cx=\"22\" cy=\"18\" r=\"2.6\" fill=\"#fff\" \/>\n <rect x=\"20\" y=\"23\" width=\"16\" height=\"2\" rx=\"1\" fill=\"#fff\" \/>\n <rect x=\"20\" y=\"27\" width=\"11\" height=\"2\" rx=\"1\" fill=\"#fff\" opacity=\"0.7\" \/>\n <rect x=\"20\" y=\"31\" width=\"13\" height=\"2\" rx=\"1\" fill=\"#fff\" opacity=\"0.7\" \/>\n <circle cx=\"34\" cy=\"18\" r=\"3\" fill={A} \/>\n <\/g>\n <\/svg>);\n\n case 'withdraw':return (\n <svg viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\">\n {\/* Bank card *\/}\n <rect x=\"6\" y=\"14\" width=\"28\" height=\"20\" rx=\"3\" fill={N} \/>\n <rect x=\"6\" y=\"18\" width=\"28\" height=\"3.5\" fill=\"#2A4DAE\" \/>\n <rect x=\"10\" y=\"26\" width=\"9\" height=\"3\" rx=\"0.5\" fill={A} \/>\n <rect x=\"22\" y=\"26\" width=\"8\" height=\"3\" rx=\"0.5\" fill=\"#fff\" opacity=\"0.6\" \/>\n {\/* Coin with \u20ab *\/}\n <circle cx=\"36\" cy=\"32\" r=\"9\" fill={G} \/>\n <circle cx=\"36\" cy=\"32\" r=\"7\" fill={GL} opacity=\"0.35\" \/>\n <text x=\"36\" y=\"35.5\" textAnchor=\"middle\" fontFamily=\"var(--font-display)\" fontWeight=\"800\" fontSize=\"11\" fill=\"#fff\">\u20ab<\/text>\n {\/* Down arrow indicating \"r\u00fat\" *\/}\n <path d=\"M 36 18 L 36 23 M 33 21 L 36 24 L 39 21\" stroke={GD} strokeWidth=\"1.6\" fill=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\" \/>\n <\/svg>);\n\n }\n return null;\n}\n\nfunction DashboardSection() {\n return (\n <section id=\"dashboard\" data-screen-label=\"07 Dashboard\" style={{\n background: 'linear-gradient(180deg, #FFFDF2 0%, #FFF8CC 100%)',\n padding: '96px 0', position: 'relative', overflow: 'hidden'\n }}>\n <C>\n <div style={{ textAlign: 'center', marginBottom: 16 }}>\n <h2 style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 52, lineHeight: 1.05, letterSpacing: '-0.03em',\n color: '#0E1F11', margin: 0, textWrap: 'balance'\n }} className=\"sp-dash-h2\">\n Qu\u1ea3n l\u00fd thu nh\u1eadp <span style={{ color: '#14C560' }}>trong t\u1ea7m tay<\/span>\n <\/h2>\n <\/div>\n <p className=\"sp-center-lead sp-dash-lead\" style={{ textAlign: 'center', marginTop: 16, marginBottom: 72, fontSize: 16, color: '#414941' }}>\n \u1ee8ng d\u1ee5ng th\u00f4ng minh gi\u00fap b\u1ea1n v\u1eadn h\u00e0nh v\u00e0 qu\u1ea3n l\u00fd c\u00f4ng vi\u1ec7c m\u1ecdi l\u00fac m\u1ecdi n\u01a1i.\n <\/p>\n\n <div className=\"sp-grid-dashboard\" style={{ display: 'grid', gridTemplateColumns: '420px 1fr', gap: 56, alignItems: 'center' }}>\n {\/* Phone *\/}\n <div className=\"sp-dash-phone\" style={{ display: 'grid', placeItems: 'center', position: 'relative' }}>\n <img decoding=\"async\"\n src=\"https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/07\/22081941\/saladin-pro-dashboard-phone.png\"\n alt=\"\u1ee8ng d\u1ee5ng Saladin Pro qu\u1ea3n l\u00fd \u0111\u01a1n h\u00e0ng\"\n style={{\n width: '100%', maxWidth: 420, height: 'auto', display: 'block',\n filter: 'drop-shadow(0 24px 36px rgba(133,120,0,0.32))'\n }} \/>\n <\/div>\n\n {\/* Callouts grid *\/}\n <div className=\"sp-grid-2\" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>\n <DashCallout icon={<DashIcon kind=\"dashboard\" \/>} t=\"Qu\u1ea3n l\u00fd \u0111\u1ed9i ng\u0169 trong t\u1ea7m tay\" \/>\n <DashCallout icon={<DashIcon kind=\"marketing\" \/>} t=\"Th\u01b0 vi\u1ec7n Marketing c\u00e1 nh\u00e2n h\u00f3a\" \/>\n <DashCallout icon={<DashIcon kind=\"tasks\" \/>} t=\"Qu\u1ea3n l\u00fd c\u00f4ng vi\u1ec7c d\u1ec5 d\u00e0ng\" \/>\n <DashCallout icon={<DashIcon kind=\"catalog\" \/>} t=\"Catalog s\u1ea3n ph\u1ea9m \u0111\u1ea7y \u0111\u1ee7 t\u1eeb 15+ nh\u00e0 b\u1ea3o hi\u1ec3m\" \/>\n <DashCallout icon={<DashIcon kind=\"withdraw\" \/>} t=\"Nh\u1eadn th\u00f9 lao li\u1ec1n tay v\u1edbi ch\u1ec9 1 ch\u1ea1m\" \/>\n <DashCallout icon={<DashIcon kind=\"training\" \/>} t=\"\u0110\u00e0o t\u1ea1o v\u00e0 c\u1eadp nh\u1eadt th\u00f4ng tin s\u1ea3n ph\u1ea9m mi\u1ec5n ph\u00ed h\u00e0ng tu\u1ea7n\" \/>\n\n {\/* App store badges *\/}\n <div className=\"sp-app-badges\" style={{ gridColumn: '1 \/ -1', display: 'flex', justifyContent: 'center', gap: 16, marginTop: 12 }}>\n <a\n href=\"https:\/\/apps.apple.com\/us\/app\/saladin-pro-ctv-b%E1%BA%A3o-hi%E1%BB%83m\/id6454701055\"\n target=\"_blank\" rel=\"noopener\"\n aria-label=\"T\u1ea3i Saladin Pro tr\u00ean App Store\"\n style={{\n background: '#000', color: '#fff', borderRadius: 12,\n border: '1.5px solid #fff',\n outline: '1px solid #B7BAC3', outlineOffset: 0,\n padding: '12px 22px 12px 18px',\n display: 'inline-flex', alignItems: 'center', gap: 14,\n textDecoration: 'none', minWidth: 200,\n transition: 'transform 200ms var(--easing-standard), box-shadow 200ms',\n boxShadow: '0 10px 24px -8px rgba(0,0,0,0.35)'\n }}\n onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.boxShadow = '0 16px 28px -8px rgba(0,0,0,0.45)';}}\n onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = '0 10px 24px -8px rgba(0,0,0,0.35)';}}>\n \n {\/* Official Apple glyph *\/}\n <svg width=\"32\" height=\"38\" viewBox=\"0 0 24 28\" aria-hidden=\"true\">\n <path fill=\"#fff\" d=\"M17.05 14.86c-.03-3.04 2.48-4.5 2.6-4.57-1.42-2.07-3.62-2.36-4.4-2.39-1.87-.19-3.65 1.1-4.6 1.1-.96 0-2.42-1.08-3.98-1.05-2.05.03-3.94 1.19-5 3.02-2.13 3.69-.55 9.16 1.53 12.15 1.01 1.46 2.22 3.11 3.81 3.05 1.53-.06 2.11-.99 3.96-.99 1.84 0 2.37.99 3.99.95 1.65-.03 2.69-1.5 3.7-2.97 1.16-1.7 1.64-3.35 1.67-3.43-.04-.02-3.2-1.22-3.23-4.87Z\" \/>\n <path fill=\"#fff\" d=\"M14.6 5.95c.84-1.02 1.41-2.44 1.25-3.85-1.21.05-2.68.81-3.55 1.83-.78.9-1.46 2.34-1.28 3.73 1.35.1 2.74-.69 3.58-1.71Z\" \/>\n <\/svg>\n <div style={{ textAlign: 'left', lineHeight: 1.15 }}>\n <div style={{ fontSize: 12, opacity: 0.95, letterSpacing: '0.005em' }}>Download on the<\/div>\n <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, marginTop: 1, letterSpacing: '-0.01em' }}>App Store<\/div>\n <\/div>\n <\/a>\n\n <a\n href=\"https:\/\/play.google.com\/store\/apps\/details?id=vn.saladin.pro&hl=en\"\n target=\"_blank\" rel=\"noopener\"\n aria-label=\"T\u1ea3i Saladin Pro tr\u00ean Google Play\"\n style={{\n background: '#000', color: '#fff', borderRadius: 12,\n border: '1.5px solid #fff',\n outline: '1px solid #B7BAC3', outlineOffset: 0,\n padding: '12px 22px 12px 18px',\n display: 'inline-flex', alignItems: 'center', gap: 14,\n textDecoration: 'none', minWidth: 200,\n transition: 'transform 200ms var(--easing-standard), box-shadow 200ms',\n boxShadow: '0 10px 24px -8px rgba(0,0,0,0.35)'\n }}\n onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.boxShadow = '0 16px 28px -8px rgba(0,0,0,0.45)';}}\n onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = '0 10px 24px -8px rgba(0,0,0,0.35)';}}>\n \n {\/* Official Google Play multi-color triangle *\/}\n <svg width=\"32\" height=\"36\" viewBox=\"0 0 32 36\" aria-hidden=\"true\">\n <defs>\n <linearGradient id=\"gpBlue\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n <stop offset=\"0%\" stopColor=\"#00C8FF\" \/>\n <stop offset=\"100%\" stopColor=\"#1E88FF\" \/>\n <\/linearGradient>\n <linearGradient id=\"gpGreen\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n <stop offset=\"0%\" stopColor=\"#3FF9A1\" \/>\n <stop offset=\"100%\" stopColor=\"#00C266\" \/>\n <\/linearGradient>\n <linearGradient id=\"gpYellow\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor=\"#FFE600\" \/>\n <stop offset=\"100%\" stopColor=\"#FFAA00\" \/>\n <\/linearGradient>\n <linearGradient id=\"gpRed\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n <stop offset=\"0%\" stopColor=\"#FF5252\" \/>\n <stop offset=\"100%\" stopColor=\"#E10000\" \/>\n <\/linearGradient>\n <\/defs>\n {\/* Triangle: 4 facets meeting at the front-right point.\n Apex left-top -> right point -> bottom-left, split horizontally through the middle. *\/}\n <path d=\"M 4 3 L 19 17 L 4 17 Z\" fill=\"url(#gpGreen)\" \/>\n <path d=\"M 4 17 L 19 17 L 4 31 Z\" fill=\"url(#gpRed)\" \/>\n <path d=\"M 4 3 L 19 17 L 28 17 Q 30 17 28 18.2 L 22.5 21.3 Z\" fill=\"url(#gpYellow)\" opacity=\"0\" \/>\n {\/* Better: render with two left halves + the right point *\/}\n <path d=\"M 4 3 L 4 17 L 19 17 Z\" fill=\"url(#gpGreen)\" \/>\n <path d=\"M 4 17 L 4 31 L 19 17 Z\" fill=\"url(#gpRed)\" \/>\n <path d=\"M 4 3 L 19 17 L 28 11 Z\" fill=\"url(#gpBlue)\" \/>\n <path d=\"M 19 17 L 28 23 L 4 31 L 4 17 Z\" fill=\"url(#gpYellow)\" opacity=\"0\" \/>\n {\/* Yellow front quad *\/}\n <path d=\"M 19 17 L 28 11 L 28 23 Z\" fill=\"url(#gpYellow)\" \/>\n <\/svg>\n <div style={{ textAlign: 'left', lineHeight: 1.15 }}>\n <div style={{ fontSize: 12, opacity: 0.95, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Get it on<\/div>\n <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, marginTop: 1, letterSpacing: '-0.01em' }}>Google Play<\/div>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/C>\n <\/section>);\n\n}\n\n\/\/ \u2500\u2500\u2500 FAQ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction FaqItem({ idx, q, a, isOpen, onToggle }) {\n return (\n <div style={{\n position: 'relative',\n background: isOpen ? '#fff' : 'transparent',\n borderRadius: 16,\n transition: 'background 240ms var(--easing-standard), box-shadow 240ms var(--easing-standard)',\n boxShadow: isOpen ? '0 16px 32px -10px rgba(16,24,40,0.12), 0 4px 8px -2px rgba(16,24,40,0.04)' : 'none',\n overflow: 'hidden',\n borderBottom: isOpen ? 'none' : '1px solid rgba(26,28,30,0.08)'\n }}>\n {\/* Active accent bar *\/}\n {isOpen &&\n <span aria-hidden=\"true\" style={{\n position: 'absolute', left: 0, top: 16, bottom: 16, width: 4,\n background: 'linear-gradient(180deg, #14C560 0%, #008A40 100%)',\n borderRadius: '0 4px 4px 0'\n }} \/>\n }\n <button onClick={onToggle} className=\"sp-faq-btn\" style={{\n width: '100%', background: 'transparent', border: 'none',\n padding: '24px 24px 24px 28px',\n display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: 22,\n textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit'\n }}>\n {\/* Numbered chip *\/}\n <span style={{\n fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14,\n letterSpacing: '0.05em',\n color: isOpen ? '#14C560' : '#A6ADA3',\n transition: 'color 200ms'\n }}>{String(idx + 1).padStart(2, '0')}<\/span>\n {\/* Question *\/}\n <span style={{\n fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19,\n color: isOpen ? '#0E1F11' : '#1B1D20',\n letterSpacing: '-0.015em', lineHeight: 1.35\n }}>{q}<\/span>\n {\/* +\/- toggle *\/}\n <span style={{\n width: 40, height: 40, borderRadius: '50%',\n background: isOpen ?\n 'linear-gradient(135deg, #14C560 0%, #008A40 100%)' :\n '#fff',\n border: isOpen ? 'none' : '1.5px solid #DCDFE3',\n color: isOpen ? '#fff' : '#5C5F5F',\n display: 'grid', placeItems: 'center', flexShrink: 0,\n transition: 'all 200ms var(--easing-standard)',\n boxShadow: isOpen ? '0 6px 14px -3px rgba(0,138,64,0.45)' : 'none'\n }}>\n {\/* Custom +\/- so the rotation is intentional *\/}\n <span style={{ position: 'relative', width: 16, height: 16 }}>\n <span style={{\n position: 'absolute', left: 0, top: '50%', width: 16, height: 2,\n background: 'currentColor', borderRadius: 2,\n transform: 'translateY(-50%)'\n }} \/>\n <span style={{\n position: 'absolute', top: 0, left: '50%', width: 2, height: 16,\n background: 'currentColor', borderRadius: 2,\n transform: `translateX(-50%) rotate(${isOpen ? 90 : 0}deg)`,\n transformOrigin: 'center',\n transition: 'transform 240ms var(--easing-standard)'\n }} \/>\n <\/span>\n <\/span>\n <\/button>\n {\/* Answer *\/}\n <div style={{\n display: 'grid',\n gridTemplateRows: isOpen ? '1fr' : '0fr',\n transition: 'grid-template-rows 280ms var(--easing-standard)'\n }}>\n <div style={{ overflow: 'hidden' }}>\n <div style={{\n padding: '0 32px 26px 80px',\n fontSize: 15, color: '#414941', lineHeight: 1.65,\n maxWidth: 640\n }}>{a}<\/div>\n <\/div>\n <\/div>\n <\/div>);\n\n}\n\nfunction FaqSection() {\n const items = [\n { q: 'Tham gia Saladin c\u00f3 m\u1ea5t ph\u00ed kh\u00f4ng?', a: 'Ho\u00e0n to\u00e0n KH\u00d4NG. B\u1ea1n kh\u00f4ng ph\u1ea3i \u0111\u00f3ng b\u1ea5t k\u1ef3 kho\u1ea3n ph\u00ed tham gia, ph\u00ed duy tr\u00ec hay \u0111\u1eb7t c\u1ecdc n\u00e0o khi l\u00e0m CTV.' },\n { q: 'T\u00f4i kh\u00f4ng bi\u1ebft g\u00ec v\u1ec1 b\u1ea3o hi\u1ec3m c\u00f3 l\u00e0m \u0111\u01b0\u1ee3c kh\u00f4ng?', a: 'Ho\u00e0n to\u00e0n \u0111\u01b0\u1ee3c. Saladin c\u00f3 ch\u01b0\u01a1ng tr\u00ecnh \u0111\u00e0o t\u1ea1o mi\u1ec5n ph\u00ed v\u00e0 \u0111\u1ed9i ng\u0169 chuy\u00ean gia h\u1ed7 tr\u1ee3 7 ng\u00e0y\/tu\u1ea7n cho CTV m\u1edbi.' },\n { q: 'Th\u00f9 lao \u0111\u01b0\u1ee3c tr\u1ea3 nh\u01b0 th\u1ebf n\u00e0o?', a: 'Th\u00f9 lao \u0111\u01b0\u1ee3c tr\u1ea3 ngay sau khi h\u1ee3p \u0111\u1ed3ng b\u1ea3o hi\u1ec3m c\u00f3 hi\u1ec7u l\u1ef1c, chuy\u1ec3n kho\u1ea3n tr\u1ef1c ti\u1ebfp v\u1ec1 t\u00e0i kho\u1ea3n ng\u00e2n h\u00e0ng c\u1ee7a b\u1ea1n.' },\n { q: 'L\u00e0m CTV c\u00f3 b\u1ecb r\u00e0ng bu\u1ed9c th\u1eddi gian kh\u00f4ng?', a: 'Kh\u00f4ng. B\u1ea1n ho\u00e0n to\u00e0n ch\u1ee7 \u0111\u1ed9ng th\u1eddi gian. Saladin Pro kh\u00f4ng y\u00eau c\u1ea7u KPIs hay s\u1ed1 gi\u1edd l\u00e0m vi\u1ec7c c\u1ed1 \u0111\u1ecbnh.' },\n { q: 'T\u00f4i c\u1ea7n chu\u1ea9n b\u1ecb g\u00ec \u0111\u1ec3 \u0111\u0103ng k\u00fd?', a: 'B\u1ea1n ch\u1ec9 c\u1ea7n CMND\/CCCD, s\u1ed1 \u0111i\u1ec7n tho\u1ea1i v\u00e0 t\u00e0i kho\u1ea3n ng\u00e2n h\u00e0ng. To\u00e0n b\u1ed9 qu\u00e1 tr\u00ecnh \u0111\u0103ng k\u00fd di\u1ec5n ra online trong v\u00e0i ph\u00fat.' }];\n\n const [open, setOpen] = React.useState(0);\n return (\n <section id=\"faq\" data-screen-label=\"08 FAQ\" style={{\n background: 'linear-gradient(180deg, #FAFBF8 0%, #F2F8EE 100%)',\n padding: '104px 0 112px',\n position: 'relative', overflow: 'hidden'\n }}>\n {\/* Decorative ghosted leaf *\/}\n <img decoding=\"async\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzUgMjM2IiBmaWxsPSJub25lIj4KICAKICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCA0OCkiPgogICAgPHBhdGggZD0iTSA0Mi42NzYgMTQxLjkyMSBDIDM4LjgxMSAxMzcuNDM4IDM0Ljc5MiAxMzIuNDkgMzEuMDgxIDEyNy4zODkgQyAyMS44MDUgMTE0LjA5MyAxNS4xNTggODkuODIxIDExLjYwMiA1Ny4zNTYgQyA5LjkwMSA0MC42NTkgOS4yODMgMjUuNTA5IDkuMTI4IDE3LjMxNSBMIDI4LjE0NCAxMi4zNjggTCAzOS40MyA5LjU4NSBDIDM5LjI3NSA2LjMzOSAzOS43MzkgMy4yNDcgNDAuODIxIDAgTCAyOC40NTMgMi45MzcgTCAwLjAwNyAxMC4yMDMgQyAwLjAwNyAxMC4yMDMgLTEuMDc1IDk2LjYyNCAyMy42NiAxMzIuMzM2IEMgMzAuOTI2IDE0Mi44NDkgMzguOTY2IDE1MS42NjEgNDYuNjk2IDE1OC45MjcgQyA0NC45OTUgMTU0LjI4OSA0My4yOTQgMTQ4LjcyMyA0Mi42NzYgMTQxLjkyMSBaIiBmaWxsPSIjMUUzODg4Ij48L3BhdGg+CiAgPC9nPgogIAogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg3LjQyLCA1MS4xKSI+CiAgICA8cGF0aCBkPSJNIDg3LjQzNCA3LjExMSBMIDU5Ljc2MSAwIEMgNjEuMzA3IDIuNjI4IDYzLjQ3MiA5Ljc0IDYzLjQ3MiAxMC4yMDMgTCA3OC40NjggMTQuMDY4IEMgNzguMzEzIDIyLjI2MiA3Ny42OTUgMzcuMTA0IDc1Ljk5NCA1My45NTUgQyA3NS4wNjYgNjIuNjEyIDcxLjY2NSA4My40ODMgNzAuODkyIDg2LjExMSBDIDY3LjE4MiAxMDIuODA4IDYyLjM4OSAxMTUuNjM5IDU2LjUxNSAxMjQuMTQyIEMgNDIuMjkyIDE0NC43MDQgMjQuODIyIDE1OC43NzIgMTIuNDU0IDE2Ny4xMiBMIDIuMjUxIDE3NC4wNzcgQyAyLjA5NiAxNzYuMDg3IDEuOTQyIDE3Ny45NDIgMS4zMjMgMTc5Ljc5NyBDIDEuMTY5IDE4MC4yNjEgLTAuMzc3IDE4NC40MzUgMC4wODYgMTg0LjU5IEMgMC4wODYgMTg0LjU5IDQuMTA2IDE4Mi41OCAxMC43NTQgMTc4LjcxNSBDIDIzLjc0IDE3MC44MzEgNDYuMDAyIDE1NC45MDcgNjMuOTM1IDEyOS4wODkgQyA4OC41MTYgOTMuNTMyIDg3LjQzNCA3LjExMSA4Ny40MzQgNy4xMTEgWiIgZmlsbD0iIzFFMzg4OCI+PC9wYXRoPgogIDwvZz4KICAKICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNy4yNCwgMCkiPgogICAgPHBhdGggZD0iTSAxMDQuNTM3IDEwMy41ODEgQyAxMDEuMjkxIDk4LjAxNSA5OS43NDUgOTIuNjA0IDEwMC44MjcgODYuMTExIEMgMTAxLjYgODEuNjI4IDEwMy40NTUgNzcuNDU0IDEwNC42OTIgNzIuOTcgQyAxMDUuNjE5IDY5LjI2IDEwNS42MTkgNjUuMzk1IDEwNC42OTIgNjEuNTMgQyAxMDQuMzgzIDYwLjQ0OCAxMDMuOTE5IDU5LjIxMSAxMDMuNjEgNTguMTI5IEMgMTAyLjM3MyA1NS4wMzcgMTAwLjUxOCA1Mi4xIDk4LjM1MyA0OS45MzUgQyA5OC4zNTMgNDkuOTM1IDk4LjM1MyA0OS45MzUgOTguMTk5IDQ5Ljc4MSBDIDk4LjE5OSA0OS43ODEgOTYuODA3IDQ4LjA4IDkzLjU2MSA0Ni4zNzkgQyA5MS4yNDIgNDUuMTQzIDg4LjMwNCA0NC4wNiA4My45NzYgNDMuNTk3IEMgODMuMDQ4IDQzLjQ0MiA4Mi40MyA0My40NDIgODEuODExIDQzLjQ0MiBDIDc3Ljc5MiA0My4xMzMgNzUuNDczIDQyLjY2OSA3NC4zOTEgNDEuNDMyIEMgNzMuMzA4IDQwLjM1IDczLjE1NCAzOC4zNCA3My4xNTQgMzQuNjMgQyA3Mi45OTkgMjcuMjA5IDczLjQ2MyAxOS4wMTYgNjkuOTA3IDEyLjIxMyBDIDY3LjI3OSA3LjI2NiA2Mi4zMzIgMi43ODMgNTYuNzY2IDEuMDgyIEMgNTQuNDQ3IDAuMzA5IDUyLjEyOCAwIDQ5LjgwOSAwIEMgNDUuNzkgMCA0MS42MTYgMS4wODIgMzguMDYgMi43ODMgQyAzNC4xOTUgNC43OTMgMzEuMTAzIDcuODg0IDI5LjI0OCAxMS45MDQgQyAyNS44NDcgMTguNzA2IDI2LjQ2NSAyOS41MjggMTguMTE3IDMyLjc3NSBDIDEzLjAxNSAzNC43ODUgNy45MTMgMzcuNDEzIDQuNjY3IDQyLjA1MSBDIDMuMjc2IDQ0LjA2IDIuMTkzIDQ1LjkxNiAxLjQyIDQ4LjA4IEMgMC4zMzggNTEuMTcyIC0wLjEyNiA1NC4yNjQgMC4wMjkgNTcuNjY1IEMgMC4xODQgNjAuNDQ4IDAuODAyIDYzLjU0IDEuNzMgNjYuMTY4IEMgMy40MyA3MC45NiA2LjUyMiA3NS40NDQgOS43NjkgNzkuMzA5IEMgMTIuODYxIDgzLjAxOSAxNi44OCA4NS45NTYgMTkuMTk5IDkwLjEzMSBDIDIzLjA2NCA5Ny4wODggMTUuOTUyIDEwMi4wMzUgMTIuMDg4IDEwNi42NzMgQyA3LjYwNCAxMTIuMjM4IDQuODIyIDExOC41NzcgNC42NjcgMTI1LjY4OCBDIDQuNTEyIDEzMS41NjMgNS45MDQgMTM3LjQzOCA5LjE1IDE0Mi4zODUgQyAxMC4wNzggMTQzLjkzMSAxMS4xNiAxNDUuNDc3IDEyLjM5NyAxNDYuNzE0IEMgMTQuMDk3IDE0OC40MTQgMTYuODggMTQ5Ljk2IDE3Ljk2MiAxNTIuNDM0IEMgMTguMjcyIDE1My41MTYgMTguNDI2IDE1NC43NTMgMTguMTE3IDE1NS44MzUgQyAxNy4xODkgMTU5Ljg1NCAxNS42NDMgMTYzLjg3NCAxNS4wMjUgMTY4LjA0OCBDIDE0LjA5NyAxNzMuNjE0IDEzLjk0MyAxNzkuMTc5IDE0LjI1MiAxODQuNzQ1IEMgMTQuNzE2IDE5MS43MDIgMTUuNzk4IDE5Ni45NTggMTcuNDk4IDIwMS41OTYgQyAyMC4xMjcgMjA4Ljg2MiAyNC4xNDYgMjEzLjgwOSAyOC4wMTEgMjE4LjI5MiBDIDMwLjc5NCAyMjEuNTM5IDM3LjEzMiAyMjYuOTUgNDEuMzA3IDIyOS43MzMgQyA0NS42MzUgMjMyLjIwNiA1MC4xMTkgMjM1LjI5OCA1MC40MjggMjM1LjI5OCBDIDUwLjQyOCAyMzUuMTQ0IDUyLjkwMSAyMjkuNzMzIDUyLjkwMSAyMjUuMDk1IEMgNTMuMDU2IDIyMS42OTQgNTIuNzQ3IDIxOC4yOTIgNTIuNzQ3IDIxNS4yIEMgNTIuNzQ3IDIwOS42MzUgNTMuMDU2IDIwNC4wNjkgNTQuNDQ3IDE5OC42NTggQyA1Ni40NTcgMTkxLjIzOCA1OS41NDkgMTg0LjI4MSA2NC4zNDIgMTc4LjI1MiBDIDY1LjExNSAxNzcuMzI0IDY1LjczMyAxNzYuNTUxIDY2LjUwNiAxNzUuNjIzIEMgNzcuOTQ2IDE2Mi43OTIgOTYuMzQzIDE1OS4wODEgMTA3LjAxMSAxNDUuNzg2IEMgMTExLjMzOSAxNDAuNTMgMTE0LjI3NyAxMzMuNDE4IDExNC4yNzcgMTI2LjQ2MSBDIDExNC4xMjIgMTE3LjY0OSAxMDguNDAyIDExMC41MzggMTA0LjUzNyAxMDMuNTgxIFogTSA5OS43NDUgMTM5LjkxMSBDIDk1LjI2MSAxNDUuNjMxIDg4LjYxNCAxNDkuMzQyIDgxLjUwMiAxNTMuMzYxIEMgNzMuOTI3IDE1Ny44NDUgNjYuMDQyIDE2Mi4xNzMgNTkuNzA0IDE2OS4yODUgQyA1OC43NzYgMTcwLjM2NyA1OC4wMDMgMTcxLjI5NSA1Ny4yMyAxNzIuMzc3IEMgNTEuOTc0IDE3OS4xNzkgNDcuOTU0IDE4Ny4wNjQgNDUuNjM1IDE5Ni4xODUgQyA0My45MzUgMjAyLjk4NyA0My42MjYgMjA5LjYzNSA0My40NzEgMjE0Ljg5MSBDIDQzLjQ3MSAyMTYuMjgzIDQzLjQ3MSAyMTcuOTgzIDQzLjQ3MSAyMTkuMzc1IEMgNDMuNDcxIDIxOS44MzggNDMuNDcxIDIyMC40NTcgNDMuNDcxIDIyMC45MjEgQyA0MC4yMjQgMjE4LjYwMiAzNi4wNSAyMTQuODkxIDM0LjA0MSAyMTIuNTcyIEMgMjguMzIgMjA1LjkyNSAyMy41MjggMTk5LjQzMSAyMi40NDYgMTg0LjEyNiBDIDIyLjI5MSAxODEuNjUzIDIyLjI5MSAxNzkuMzM0IDIyLjI5MSAxNzcuMDE1IEMgMjIuNiAxNzIuMzc3IDI0LjQ1NSAxNjUuNDIgMjUuODQ3IDE2MC40NzMgQyAyNi45MjkgMTU4LjMwOCAyOC4xNjYgMTU1LjY4IDI5Ljg2NiAxNTQuNTk4IEMgMzAuOTQ4IDE1NC4xMzQgMzQuODEzIDE1NC4xMzQgMzYuODIzIDE1NC4xMzQgQyAzOC4wNiAxNTQuMTM0IDM5LjI5NyAxNTQuMTM0IDQwLjM3OSAxNTQuMTM0IEMgNTUuNTMgMTUzLjA1MiA2NS4yNjkgMTQ3LjQ4NyA3NS4zMTggMTM5LjYwMiBMIDY5Ljc1MyAxMzIuNjQ1IEMgNTguOTMxIDE0MS4zMDMgNTEuMDQ2IDE0NC41NDkgMzkuNzYxIDE0NS4zMjIgQyAzOC45ODggMTQ1LjMyMiAzOC4wNiAxNDUuMzIyIDM2Ljk3OCAxNDUuMzIyIEMgMzUuNDMyIDE0NS4zMjIgMzMuNzMxIDE0NS4zMjIgMzIuMTg1IDE0NS4zMjIgQyAzNS44OTYgMTM3LjI4MyAzOC45ODggMTMwLjYzNSA0MC45OTcgMTIzLjY3OCBDIDU5LjA4NSAxMTUuMTc2IDc0LjU0NSAxMDAuNzk4IDg0LjkwMyA4My4wMTkgTCA3Ny4zMjggNzguNTM2IEMgNjkuMjg5IDkyLjYwNCA1Ny44NDkgMTA0LjE5OSA0NC4wODkgMTExLjkyOSBDIDQ1LjAxNyAxMDcuNiA0NS40ODEgMTAzLjExNyA0NS43OSA5Ny43MDYgQyA0NS45NDUgOTYuMTYgNDUuOTQ1IDk0LjQ1OSA0NS45NDUgOTIuOTEzIEMgNDUuOTQ1IDkyLjc1OSA0NS45NDUgOTIuNjA0IDQ1Ljk0NSA5Mi42MDQgQyA0NS45NDUgOTIuMjk1IDQ1Ljk0NSA5MS42NzcgNDUuOTQ1IDkxLjM2NyBDIDQ1Ljk0NSA4Ny45NjYgNDYuMjU0IDg0LjI1NiA0OC4xMDkgODEuNzgyIEMgNDkuMTkxIDgwLjM5MSA1MC40MjggNzkgNTEuODE5IDc3LjQ1NCBDIDUyLjEyOSA3Ni45OSA1Mi43NDcgNzYuNTI2IDUzLjA1NiA3Ni4wNjIgQyA1OS4yNCA2OS43MjQgNjMuNTY5IDYyLjE0OCA2Ni41MDYgNTMuNDkxIEwgNTguMDAzIDUwLjcwOCBDIDU1LjUzIDU4LjEyOSA1MS44MTkgNjQuNDY3IDQ2LjU2MyA2OS44NzggQyA0Ni4yNTQgNzAuMTg3IDQ1LjYzNSA3MC44MDYgNDUuMzI2IDcxLjExNSBDIDQ0Ljg2MiA3MS41NzkgNDQuMzk5IDcyLjA0MyA0My45MzUgNzIuNTA2IEMgNDEuOTI1IDYwLjkxMiAzOS4xNDIgNTEuMTcyIDM3LjkwNiA0Ny42MTYgQyAzNy41OTYgNDYuNjg5IDM3LjQ0MiA0Ni4yMjUgMzcuNDQyIDQ2LjIyNSBMIDI5LjA5MyA0OS4wMDggQyAyOS4wOTMgNDkuMDA4IDI5LjI0OCA0OS4zMTcgMjkuNDAzIDQ5LjkzNSBDIDMwLjk0OSA1NC41NzMgMzguMDYgNzguMDcyIDM2LjgyMyA5Ny4yNDIgQyAzNS40MzIgMTE2LjU2NyAzMS4xMDMgMTI2LjQ2MSAyMi40NDYgMTQ0LjcwNCBDIDIxLjM2NCAxNDMuNDY3IDIwLjEyNyAxNDIuMzg1IDE5LjA0NCAxNDEuNjEyIEMgMTguNzM1IDE0MS4zMDMgMTguMTE3IDE0MC44MzkgMTcuOTYyIDE0MC42ODQgQyAxNy4xODkgMTM5Ljc1NyAxNi40MTYgMTM4Ljk4NCAxNS43OTggMTM3LjkwMSBDIDEzLjYzNCAxMzQuNSAxMi41NTEgMTMwLjQ4MSAxMi43MDYgMTI2LjE1MiBDIDEyLjg2MSAxMjEuMjA1IDE0LjcxNiAxMTYuNzIxIDE4LjI3MSAxMTIuMzkzIEMgMTguNzM1IDExMS42MiAxOS41MDggMTExLjAwMSAyMC40MzYgMTEwLjA3NCBDIDI0LjQ1NSAxMDUuNzQ1IDMyLjgwNCA5Ny4wODggMjYuNDY1IDg1LjY0NyBDIDI0LjMwMSA4MS45MzcgMjEuNjczIDc5LjMwOSAxOS4xOTkgNzYuOTkgQyAxNy45NjIgNzUuOTA4IDE2Ljg4IDc0LjY3MSAxNS45NTIgNzMuNzQzIEMgMTIuNzA2IDY5Ljg3OCAxMC42OTYgNjYuNDc3IDkuMzA1IDYzLjA3NiBDIDguMjIzIDYwLjQ0OCA3LjkxMyA1Ny44MiA4LjIyMyA1NS4xOTEgQyA4LjM3NyA1Mi40MDkgOS40NTkgNDkuNjI2IDExLjAwNSA0Ny4xNTIgQyAxMS43NzggNDYuMjI1IDEyLjU1MSA0NS40NTIgMTMuNDc5IDQ0LjUyNCBDIDE1LjE4IDQzLjEzMyAxNy40OTkgNDIuMDUxIDIwLjI4MSA0MC45NjggQyAzMC4xNzYgMzcuMjU4IDMyLjY0OSAyNy44MjggMzQuNTA0IDIxLjY0NCBDIDM0Ljk2OCAxOS40NzkgMzUuNTg3IDE3LjMxNSAzNi4yMDUgMTYuMDc4IEMgMzcuNDQyIDEzLjc1OSAzOC45ODggMTIuMDU5IDQxLjMwNyAxMC45NzYgQyA0My42MjYgOS43NCA0Ni40MDggOC45NjcgNDguODgyIDguOTY3IEMgNTAuMjczIDguOTY3IDUxLjY2NSA5LjEyMSA1Mi45MDEgOS43NCBDIDU2LjE0OCAxMC44MjIgNTkuNTQ5IDEzLjYwNSA2MS4wOTUgMTYuODUxIEMgNjMuMTA1IDIwLjU2MiA2My4yNiAyNi4xMjcgNjMuMjYgMzEuNTM4IEMgNjMuMjYgMzIuNzc1IDYzLjI2IDMzLjg1NyA2My4yNiAzNS4wOTQgQyA2My4yNiAzNi40ODUgNjMuNDE0IDM3LjcyMiA2My40MTQgMzguOTU5IEMgNjMuODc4IDQzLjkwNiA2NS41NzkgNDcuNDYyIDY5Ljc1MyA0OS42MjYgQyA3Mi4yMjYgNTAuODYzIDc1LjQ3MyA1MS43OSA3OS45NTYgNTIuMjU0IEMgNzkuOTU2IDUyLjI1NCA3OS45NTYgNTIuMjU0IDgwLjExMSA1Mi4yNTQgQyA4MC44ODQgNTIuMjU0IDgxLjUwMiA1Mi40MDkgODIuMjc1IDUyLjQwOSBDIDg1LjY3NiA1Mi43MTggODcuOTk1IDUzLjggODkuMjMyIDU0LjU3MyBDIDkwLjAwNSA1NC44ODIgOTAuMzE0IDU1LjM0NiA5MC42MjMgNTUuNTAxIEwgOTAuNjIzIDU1LjY1NSBMIDkxLjA4NyA1Ni4xMTkgQyA5My4wOTcgNTguMTI5IDk0LjQ4OCA2MC43NTcgOTUuMTA3IDYzLjU0IEMgOTUuNTcxIDY1Ljg1OSA5NS41NzEgNjguMzMyIDk1LjEwNyA3MC40OTcgQyA5NC43OTggNzEuODg4IDk0LjE3OSA3My41ODkgOTMuNzE1IDc1LjEzNSBDIDkyLjc4OCA3Ny45MTcgOTEuNzA2IDgxLjAwOSA5MS4yNDIgODQuNDExIEMgOTAuMDA1IDkyLjQ1IDkxLjM5NiA5OS44NyA5Ni4wMzQgMTA3Ljc1NSBDIDk2LjgwNyAxMDkuMTQ2IDk3LjU4IDExMC4zODMgOTguMzUzIDExMS42MiBDIDEwMS40NDUgMTE2LjU2NyAxMDQuMzgzIDEyMS4yMDUgMTA0LjIyOCAxMjUuNjg4IEMgMTA1LjE1NiAxMzAuNjM1IDEwMy4xNDYgMTM1Ljg5MiA5OS43NDUgMTM5LjkxMSBaIiBmaWxsPSIjMTRDNTYwIj48L3BhdGg+CiAgPC9nPgo8L3N2Zz4=\" alt=\"\" style={{\n position: 'absolute', left: '-4%', bottom: '-8%', width: 360, opacity: 0.05,\n pointerEvents: 'none'\n }} \/>\n\n <C>\n <div className=\"sp-grid-faq\" style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 64, alignItems: 'start' }}>\n {\/* Left rail *\/}\n <div className=\"sp-faq-rail\" style={{ position: 'sticky', top: 100 }}>\n <div style={{\n fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase',\n color: '#008A40', marginBottom: 12\n }}>FAQ<\/div>\n <h2 style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 44, lineHeight: 1.05, letterSpacing: '-0.03em',\n color: '#0E1F11', margin: 0, textWrap: 'balance'\n }}>\n C\u00e2u h\u1ecfi <span style={{ color: '#14C560' }}>th\u01b0\u1eddng g\u1eb7p<\/span>\n <\/h2>\n <p className=\"sp-faq-lead\" style={{\n marginTop: 28, marginBottom: 0, fontSize: 15, color: '#5C5F5F', lineHeight: 1.6,\n maxWidth: 320\n }}>\n M\u1ecdi \u0111i\u1ec1u b\u1ea1n c\u1ea7n bi\u1ebft tr\u01b0\u1edbc khi tr\u1edf th\u00e0nh C\u1ed9ng t\u00e1c vi\u00ean Saladin Pro.\n <\/p>\n\n {\/* Support card *\/}\n <div style={{\n marginTop: 28, padding: 24,\n borderRadius: 18,\n background: 'linear-gradient(135deg, #0A1530 0%, #1E3888 100%)',\n color: '#fff',\n position: 'relative', overflow: 'hidden',\n boxShadow: '0 16px 32px -10px rgba(10,21,48,0.4)'\n }}>\n <div style={{\n position: 'absolute', right: -20, top: -20,\n width: 100, height: 100, borderRadius: '50%',\n background: 'radial-gradient(circle, rgba(255,197,58,0.25) 0%, transparent 70%)'\n }} \/>\n <div style={{\n width: 64, height: 64, borderRadius: 16,\n background: 'rgba(255,197,58,0.14)',\n border: '1px solid rgba(255,197,58,0.3)',\n display: 'grid', placeItems: 'center', marginBottom: 16,\n boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.08)'\n }}>\n {\/* Custom headset + chat bubble icon *\/}\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 40 40\" aria-hidden=\"true\">\n {\/* Headset band *\/}\n <path d=\"M 8 22 Q 8 10 20 10 Q 32 10 32 22\" fill=\"none\" stroke=\"#FFC53A\" strokeWidth=\"2.4\" strokeLinecap=\"round\" \/>\n {\/* Left earcup *\/}\n <rect x=\"5\" y=\"22\" width=\"7\" height=\"11\" rx=\"2.4\" fill=\"#FFC53A\" \/>\n <rect x=\"7\" y=\"24\" width=\"3\" height=\"7\" rx=\"1\" fill=\"#1E3888\" opacity=\"0.85\" \/>\n {\/* Right earcup with mic stem *\/}\n <rect x=\"28\" y=\"22\" width=\"7\" height=\"11\" rx=\"2.4\" fill=\"#FFC53A\" \/>\n <rect x=\"30\" y=\"24\" width=\"3\" height=\"7\" rx=\"1\" fill=\"#1E3888\" opacity=\"0.85\" \/>\n {\/* Mic boom *\/}\n <path d=\"M 28 30 Q 22 30 22 35\" fill=\"none\" stroke=\"#FFC53A\" strokeWidth=\"2.2\" strokeLinecap=\"round\" \/>\n {\/* Mic tip *\/}\n <circle cx=\"22\" cy=\"35\" r=\"2\" fill=\"#FFC53A\" \/>\n {\/* Conversation dot accent *\/}\n <circle cx=\"20\" cy=\"20\" r=\"1.6\" fill=\"#FFC53A\" opacity=\"0.65\" \/>\n <\/svg>\n <\/div>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.01em' }}>C\u00f2n c\u00e2u h\u1ecfi kh\u00e1c?<\/div>\n <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.72)', marginTop: 6, lineHeight: 1.55 }}>\n \u0110\u1ed9i ng\u0169 chuy\u00ean gia Saladin Pro s\u1eb5n s\u00e0ng h\u1ed7 tr\u1ee3 b\u1ea1n 7 ng\u00e0y\/tu\u1ea7n.\n <\/div>\n <a href=\"tel:1900638454\" style={{\n marginTop: 20, display: 'block', textDecoration: 'none'\n }}>\n <div style={{\n display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,\n marginBottom: 8\n }}>\n <div style={{\n fontSize: 10, fontWeight: 700, color: 'rgba(255,255,255,0.55)',\n letterSpacing: '0.16em', textTransform: 'uppercase'\n }}>Hotline \u00b7 7 ng\u00e0y\/tu\u1ea7n<\/div>\n <div style={{\n display: 'inline-flex', alignItems: 'center', gap: 6,\n fontSize: 12, fontWeight: 700, color: '#FFC53A'\n }}>\n G\u1ecdi ngay <i className=\"ri-arrow-right-line\" style={{ fontSize: 13 }}><\/i>\n <\/div>\n <\/div>\n <div style={{\n fontFamily: '\"SF Pro Display\", \"Noto Sans\", system-ui, sans-serif',\n fontWeight: 700, fontSize: 36, lineHeight: 1,\n letterSpacing: '0.08em',\n color: '#FFC53A',\n fontVariantNumeric: 'tabular-nums',\n textShadow: '0 1px 0 rgba(255,255,255,0.18), 0 2px 0 rgba(0,0,0,0.35), 0 4px 8px rgba(0,0,0,0.25)',\n display: 'inline-block'\n }}>1900 638 454<\/div>\n <\/a>\n <\/div>\n <\/div>\n\n {\/* Right: accordion *\/}\n <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>\n {items.map((it, i) =>\n <FaqItem key={i} idx={i} q={it.q} a={it.a}\n isOpen={open === i}\n onToggle={() => setOpen(open === i ? -1 : i)} \/>\n )}\n <\/div>\n <\/div>\n <\/C>\n <\/section>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Final CTA \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction FinalCta() {\n const REG_URL = 'https:\/\/id.saladin.vn\/?callback_url=https%3A%2F%2Fpro.saladin.vn%2Flogin%2Fcallback%3Fredirect%3Dhttps%253A%252F%252Fpro.saladin.vn%252F%26channel%3Dpro&from=pro';\n return (\n <section data-screen-label=\"09 Final CTA\" style={{\n background: 'linear-gradient(135deg, #0A1530 0%, #1E3888 60%, #2A4DAE 100%)',\n padding: '88px 0',\n position: 'relative', overflow: 'hidden',\n color: '#fff'\n }}>\n {\/* Radial glow *\/}\n <div aria-hidden=\"true\" style={{\n position: 'absolute', right: '-10%', top: '-30%', width: 720, height: 720,\n background: 'radial-gradient(circle, rgba(20,197,96,0.22) 0%, transparent 60%)',\n pointerEvents: 'none'\n }} \/>\n <div aria-hidden=\"true\" style={{\n position: 'absolute', left: '-10%', bottom: '-40%', width: 600, height: 600,\n background: 'radial-gradient(circle, rgba(255,197,58,0.15) 0%, transparent 60%)',\n pointerEvents: 'none'\n }} \/>\n\n <C>\n <div className=\"sp-grid-finalcta\" style={{ position: 'relative', zIndex: 1, maxWidth: 780, margin: '0 auto', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>\n <div style={{\n display: 'inline-flex', alignItems: 'center', gap: 8,\n padding: '6px 14px 6px 10px',\n background: 'rgba(255,197,58,0.15)',\n border: '1px solid rgba(255,197,58,0.4)',\n borderRadius: 50,\n fontSize: 12, fontWeight: 700, color: '#FFC53A',\n letterSpacing: '0.08em', textTransform: 'uppercase'\n }}>\n <span style={{\n display: 'inline-block', width: 8, height: 8, borderRadius: '50%',\n background: '#FFC53A', boxShadow: '0 0 0 4px rgba(255,197,58,0.25)'\n }} \/>\n \u0110\u0103ng k\u00fd mi\u1ec5n ph\u00ed \u00b7 30 gi\u00e2y\n <\/div>\n <h2 className=\"sp-finalcta-h2\" style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 'clamp(30px, 3.4vw, 50px)', lineHeight: 1.12, letterSpacing: '-0.03em',\n margin: '22px 0 0', color: '#fff', textWrap: 'balance'\n }}>\n B\u1eaft \u0111\u1ea7u ki\u1ebfm th\u00eam thu nh\u1eadp c\u00f9ng <span style={{ color: '#44E178' }}>Saladin Pro<\/span> <span style={{ color: '#FFC53A' }}>ngay h\u00f4m nay<\/span>\n <\/h2>\n <p className=\"sp-cta-lead\" style={{ margin: '30px 0 14px', fontSize: 16, lineHeight: 1.6, color: 'rgba(255,255,255,0.72)', maxWidth: 560 }}>\n Kh\u00f4ng ph\u00ed tham gia, kh\u00f4ng r\u00e0ng bu\u1ed9c th\u1eddi gian. \u0110\u0103ng k\u00fd online v\u00e0 b\u1eaft \u0111\u1ea7u nh\u1eadn th\u00f9 lao ngay t\u1eeb \u0111\u01a1n \u0111\u1ea7u ti\u00ean.\n <\/p>\n\n <a href={REG_URL} target=\"_blank\" rel=\"noopener\" style={{\n marginTop: 30,\n background: 'var(--bg-primary-action)',\n color: 'var(--text-on-primary)',\n padding: '16px 34px', borderRadius: 'var(--radius-lg)', border: 'none',\n fontFamily: 'inherit', fontWeight: 700, fontSize: 16,\n boxShadow: 'var(--shadow-md)',\n display: 'inline-flex', alignItems: 'center', gap: 10,\n whiteSpace: 'nowrap', textDecoration: 'none',\n transition: 'background 150ms, transform 150ms'\n }}\n onMouseEnter={(e) => {e.currentTarget.style.background = 'var(--bg-primary-action-hover)';e.currentTarget.style.transform = 'translateY(-1px)';}}\n onMouseLeave={(e) => {e.currentTarget.style.background = 'var(--bg-primary-action)';e.currentTarget.style.transform = 'translateY(0)';}}>\n \n \u0110\u0103ng k\u00fd tr\u1edf th\u00e0nh CTV\n <i className=\"ri-arrow-right-line\" style={{ fontSize: 18 }}><\/i>\n <\/a>\n\n <div style={{ marginTop: 14, fontSize: 13, color: 'rgba(255,255,255,0.55)' }}>\n H\u1ed7 tr\u1ee3 7 ng\u00e0y\/tu\u1ea7n \u00b7 Hotline <a href=\"tel:1900638454\" style={{ color: '#FFC53A', textDecoration: 'none', fontWeight: 700 }}>1900 638 454<\/a>\n <\/div>\n\n <div className=\"sp-finalcta-stats\" style={{\n marginTop: 44, paddingTop: 28, width: '100%',\n borderTop: '1px solid rgba(255,255,255,0.12)',\n display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24\n }}>\n {[\n { v: '2.000+', l: 'CTV ho\u1ea1t \u0111\u1ed9ng' },\n { v: '65%', l: 'Th\u00f9 lao\/\u0111\u01a1n', accent: '#FFC53A', prefix: 'L\u00ean \u0111\u1ebfn' },\n { v: '15+', l: 'Nh\u00e0 b\u1ea3o hi\u1ec3m' },\n { v: '0\u20ab', l: 'Ph\u00ed tham gia', accent: '#44E178' }].\n map((s, i) =>\n <div key={i} style={{ textAlign: 'center' }}>\n <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 6, flexWrap: 'nowrap' }}>\n {s.prefix && <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', whiteSpace: 'nowrap' }}>{s.prefix}<\/span>}\n <span style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 30, color: s.accent || '#fff',\n letterSpacing: '-0.025em', lineHeight: 1, whiteSpace: 'nowrap'\n }}>{s.v}<\/span>\n <\/div>\n <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.6)', marginTop: 8, letterSpacing: '0.04em' }}>{s.l}<\/div>\n <\/div>\n )}\n <\/div>\n <\/div>\n <\/C>\n <\/section>);\n\n}\n\nObject.assign(window, { PartnersStrip, AudiencePathSection, WhySection, IncomeSection, HowItWorks, AudienceSection, DashboardSection, FaqSection, FinalCta });\n\nfunction AppNoChrome() {\n React.useEffect(() => {\n const obs = new IntersectionObserver((entries) => {\n entries.forEach((e) => {if (e.isIntersecting) e.target.classList.add('in');});\n }, { threshold: 0.1 });\n document.querySelectorAll('.reveal').forEach((el) => obs.observe(el));\n return () => obs.disconnect();\n }, []);\n return (\n <div id=\"sp-wp-root\">\n <ProHero \/><PartnersStrip \/><AudiencePathSection \/><WhySection \/><IncomeSection \/>\n <HowItWorks \/><AudienceSection \/><DashboardSection \/><FaqSection \/><FinalCta \/>\n <\/div>);\n\n}\nReactDOM.createRoot(document.getElementById('root')).render(<AppNoChrome \/>);\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Saladin Pro (no header\/footer)<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/pro.saladin.vn\/cong-tac-vien\/wp-json\/wp\/v2\/pages\/41"}],"collection":[{"href":"https:\/\/pro.saladin.vn\/cong-tac-vien\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pro.saladin.vn\/cong-tac-vien\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pro.saladin.vn\/cong-tac-vien\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pro.saladin.vn\/cong-tac-vien\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":11,"href":"https:\/\/pro.saladin.vn\/cong-tac-vien\/wp-json\/wp\/v2\/pages\/41\/revisions"}],"predecessor-version":[{"id":1363,"href":"https:\/\/pro.saladin.vn\/cong-tac-vien\/wp-json\/wp\/v2\/pages\/41\/revisions\/1363"}],"wp:attachment":[{"href":"https:\/\/pro.saladin.vn\/cong-tac-vien\/wp-json\/wp\/v2\/media?parent=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":41,"date":"2024-10-23T03:03:42","date_gmt":"2024-10-23T03:03:42","guid":{"rendered":"https:\/\/pro.saladin.vn\/cong-tac-vien\/?page_id=41"},"modified":"2026-07-29T08:53:42","modified_gmt":"2026-07-29T08:53:42","slug":"home","status":"publish","type":"page","link":"https:\/\/pro.saladin.vn\/cong-tac-vien\/home\/","title":{"rendered":"Ch\u01b0\u01a1ng Tr\u00ecnh C\u1ed9ng T\u00e1c Vi\u00ean B\u1ea3o Hi\u1ec3m"},"content":{"rendered":"\n\n\n\n\nSaladin Pro (no header\/footer)<\/title>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<style>\n\/* Saladin Design System \u2014 tokens + fonts (slimmed for Saladin Pro landing) *\/\n\n@import url(\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans:wght@400;500;600;700&display=swap\");\n@import url(\"https:\/\/cdn.jsdelivr.net\/npm\/remixicon@4.5.0\/fonts\/remixicon.css\");\n\n\n:root {\n \/* Primary \u2014 Emerald (Saladin Green) *\/\n --primary-10:#00210A; --primary-20:#003916; --primary-30:#005323; --primary-40:#006D31;\n --primary-50:#008A40; --primary-60:#00A74F; --primary-70:#14C560; --primary-80:#44E178;\n --primary-90:#66FF92; --primary-95:#C5FFCA; --primary-99:#F6FFF2; --primary-100:#FFFFFF;\n\n \/* Navy (Saladin Blue) *\/\n --navy-10:#0A1530; --navy-20:#112147; --navy-30:#182E62; --navy-40:#1E3888;\n --navy-50:#2A4DAE; --navy-60:#4769C9; --navy-70:#6A8AE0; --navy-80:#94ADEC;\n --navy-90:#C2D0F6; --navy-95:#E1E8FB; --navy-99:#F4F6FE; --navy-100:#FFFFFF;\n\n \/* Secondary \u2014 sage *\/\n --secondary-10:#0E1F11; --secondary-20:#233425; --secondary-30:#394B3B; --secondary-40:#506351;\n --secondary-50:#697C69; --secondary-60:#829682; --secondary-70:#9CB19C; --secondary-80:#B7CCB6;\n --secondary-90:#DDE5DA; --secondary-95:#E1F6E0; --secondary-99:#F6FFF2; --secondary-100:#FFFFFF;\n\n \/* Tertiary \u2014 slate teal *\/\n --tertiary-10:#001F25; --tertiary-20:#00363E; --tertiary-30:#204D55; --tertiary-40:#39656D;\n --tertiary-50:#537E87; --tertiary-60:#6C98A1; --tertiary-70:#86B2BC; --tertiary-80:#A1CED8;\n --tertiary-90:#BDEAF4; --tertiary-95:#D3F7FF; --tertiary-99:#F7FDFF; --tertiary-100:#FFFFFF;\n\n \/* Neutral *\/\n --neutral-10:#161D17; --neutral-20:#2B322B; --neutral-30:#414941; --neutral-40:#596058;\n --neutral-50:#727970; --neutral-60:#8B9389; --neutral-70:#A6ADA3; --neutral-80:#C1C9BE;\n --neutral-90:#DDE5DA; --neutral-95:#EBF3E8; --neutral-99:#F7FEF3; --neutral-100:#FFFFFF;\n\n \/* Gray *\/\n --gray-10:#1B1D20; --gray-20:#373A40; --gray-30:#5C5F5F; --gray-40:#6B7280;\n --gray-50:#919294; --gray-60:#A6ADA3; --gray-70:#C4C7C7; --gray-80:#DCDFE3;\n --gray-90:#EFF1F1; --gray-95:#F2F4F7; --gray-99:#FAFAFA; --gray-100:#FFFFFF;\n\n \/* Error *\/\n --error-10:#410002; --error-20:#690005; --error-30:#93000A; --error-40:#BA1A1A;\n --error-50:#DE3730; --error-60:#FF5449; --error-70:#FF897D; --error-80:#FFB4AB;\n --error-90:#FFDAD6; --error-95:#FFEDEA; --error-99:#FFFBFF; --error-100:#FFFFFF;\n\n \/* Warning *\/\n --warning-10:#201C00; --warning-20:#373100; --warning-30:#504700; --warning-40:#6A5F00;\n --warning-50:#857800; --warning-60:#A29200; --warning-70:#BFAC00; --warning-80:#DDC800;\n --warning-90:#FCE40F; --warning-95:#FFF2A6; --warning-99:#FFFCF4; --warning-100:#FFFFFF;\n\n \/* Success *\/\n --success-10:#0B2000; --success-20:#173800; --success-30:#255100; --success-40:#336B00;\n --success-50:#418700; --success-60:#52A305; --success-70:#6BBF2B; --success-80:#86DC46;\n --success-90:#A0F960; --success-95:#CFFFA9; --success-99:#F8FFEB; --success-100:#FFFFFF;\n\n \/* Semantic *\/\n --bg:#FFFFFF; --bg-variant:#F8FAFA; --bg-alternative:var(--neutral-99);\n --bg-primary-action:var(--primary-70); --bg-primary-action-hover:var(--primary-60); --bg-primary-action-pressed:var(--primary-50);\n --bg-secondary-action:var(--primary-95);\n --bg-destructive-action:var(--error-40); --bg-destructive-action-hover:var(--error-30);\n --bg-error:var(--error-95); --bg-success:var(--primary-95); --bg-warning:var(--warning-95);\n --bg-active:var(--primary-95);\n --bg-container-lowest:var(--gray-99); --bg-container-low:var(--gray-95); --bg-container:var(--gray-90);\n --bg-container-high:var(--gray-80); --bg-container-highest:var(--gray-70);\n --bg-overlay-light:rgba(255,255,255,0.72); --bg-overlay-dark:rgba(0,0,0,0.48);\n\n --text-primary:var(--navy-40); --text-default:#1B1D20; --text-support:var(--gray-30);\n --text-information:var(--navy-40); --text-success:var(--primary-50); --text-error:var(--error-40);\n --text-warning:var(--warning-60); --text-warning-inverse:var(--warning-10);\n --text-on-primary:#FFFFFF; --text-on-secondary:var(--primary-40); --text-inverse:#FFFFFF;\n --text-disabled:var(--gray-50); --text-on-primary-disabled:rgba(255,255,255,0.6);\n\n --border-default:var(--gray-80); --border-strong:var(--gray-70);\n --border-primary:var(--primary-70); --border-error:var(--error-40); --border-on-bg:var(--secondary-90);\n\n --brand-green:var(--primary-70); --brand-navy:var(--navy-40);\n\n \/* Type *\/\n --font-sans:\"Noto Sans\",\"Segoe UI\",system-ui,-apple-system,sans-serif;\n --font-display:-apple-system,BlinkMacSystemFont,\"Noto Sans\",\"Segoe UI\",sans-serif;\n --font-ios:\"SF Pro Display\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\n --fs-display:52px; --lh-display:80px;\n --fs-h1:40px; --lh-h1:64px;\n --fs-h2:32px; --lh-h2:40px;\n --fs-h3:24px; --lh-h3:32px;\n --fs-h4:20px; --lh-h4:28px;\n --fs-h5:18px; --lh-h5:24px;\n --fs-body:16px; --lh-body:24px;\n --fs-body-sm:14px; --lh-body-sm:20px;\n --fs-caption:12px; --lh-caption:16px;\n --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;\n\n \/* Spacing *\/\n --space-none:0; --space-4xs:2px; --space-3xs:4px; --space-2xs:6px; --space-xs:8px;\n --space-sm:12px; --space-md:16px; --space-lg:24px; --space-xl:32px;\n --space-2xl:36px; --space-3xl:40px; --space-4xl:64px;\n\n \/* Radii *\/\n --radius-none:0; --radius-xs:2px; --radius-sm:4px; --radius-md:6px;\n --radius-lg:8px; --radius-xl:16px; --radius-round:9999px;\n\n \/* Borders *\/\n --border-w-sm:1px; --border-w-md:2px; --border-w-lg:4px;\n\n \/* Shadows *\/\n --shadow-xs:0 1px 2px 0 rgba(16,24,40,0.05);\n --shadow-sm:0 1px 3px 0 rgba(16,24,40,0.10), 0 1px 2px 0 rgba(16,24,40,0.06);\n --shadow-md:0 4px 8px -2px rgba(16,24,40,0.08), 0 2px 4px -2px rgba(16,24,40,0.04);\n --shadow-lg:0 12px 16px -4px rgba(16,24,40,0.08), 0 4px 6px -2px rgba(16,24,40,0.03);\n --shadow-drag:0 4px 4px 0 rgba(0,0,0,0.30), 0 8px 12px 6px rgba(0,0,0,0.15);\n\n \/* Motion *\/\n --easing-standard:cubic-bezier(0.4,0,0.2,1);\n --easing-decelerate:cubic-bezier(0,0,0.2,1);\n --easing-accelerate:cubic-bezier(0.4,0,1,1);\n --duration-fast:150ms; --duration-base:250ms; --duration-slow:350ms;\n}\n\nhtml, body { margin: 0; padding: 0; }\nhtml { font-family: var(--font-sans); color: var(--text-default); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }\nbody { font-size: var(--fs-body); line-height: var(--lh-body); }\nh1,h2,h3,h4,h5,h6 { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--text-default); letter-spacing: -0.015em; }\np { margin: 0; }\nbutton { font: inherit; color: inherit; }\n* { box-sizing: border-box; }\n\n\n\/* Mobile responsiveness pass *\/\n@media (max-width: 900px) {\n .sp-container { padding: 0 20px !important; }\n .sp-header-inner { padding: 12px 20px !important; gap: 14px !important; }\n .sp-header-nav { gap: 14px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; justify-content: flex-start !important; }\n .sp-header-nav::-webkit-scrollbar { display: none; }\n .sp-header-nav a, .sp-header-nav button { white-space: nowrap !important; }\n\n .sp-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }\n .sp-hero-h1 { font-size: clamp(32px, 9vw, 42px) !important; }\n .sp-hero-visual { height: auto !important; padding: 40px 0 !important; }\n .sp-hero-img { height: auto !important; width: 78% !important; max-width: 320px !important; margin-bottom: 20px !important; }\n .sp-stat-tile { position: static !important; width: 100% !important; max-width: 320px !important; min-width: 0 !important; margin: 10px auto 0 !important; box-shadow: 0 8px 20px -10px rgba(16,24,40,0.18) !important; }\n .sp-hero-tiles { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; }\n .sp-trust-row { gap: 22px !important; }\n\n .sp-grid-2, .sp-grid-income, .sp-grid-how, .sp-grid-dashboard, .sp-grid-faq, .sp-grid-finalcta { grid-template-columns: 1fr !important; gap: 32px !important; }\n .sp-grid-3 { grid-template-columns: 1fr 1fr !important; }\n .sp-grid-4 { grid-template-columns: 1fr 1fr !important; }\n .sp-grid-5 { grid-template-columns: 1fr 1fr !important; }\n .sp-grid-6 { grid-template-columns: repeat(3, 1fr) !important; }\n .sp-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px 24px !important; }\n .sp-footer-brand { grid-column: 1 \/ -1 !important; }\n\n .sp-how-steps { padding-left: 64px !important; }\n .sp-how-steps [style*=\"left: -80\"] { left: -64px !important; }\n .sp-how-visual { max-width: 280px !important; margin: 0 auto !important; }\n\n .sp-dash-phone { max-width: 280px !important; width: 100% !important; margin: 0 auto !important; }\n .sp-faq-rail { position: static !important; top: auto !important; }\n .sp-dash-h2 { font-size: clamp(28px, 8vw, 40px) !important; }\n .sp-finalcta-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }\n .sp-finalcta-h2 { white-space: normal !important; font-size: clamp(26px, 7vw, 40px) !important; }\n .sp-finalcta-visual { min-height: 0 !important; margin-top: 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; }\n .sp-finalcta-frame { width: 100% !important; max-width: 420px !important; margin: 0 auto !important; }\n .sp-finalcta-img { height: auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; display: block !important; }\n .sp-support-badge { position: static !important; transform: none !important; margin-top: 16px !important; }\n .sp-app-badges { flex-wrap: wrap !important; }\n .sp-app-badges a { min-width: 0 !important; flex: 1 1 160px !important; padding: 10px 14px !important; }\n}\n@media (max-width: 480px) {\n .sp-app-badges { flex-direction: column !important; align-items: stretch !important; }\n}\n\n@media (max-width: 560px) {\n .sp-grid-3, .sp-grid-4, .sp-grid-5, .sp-footer-grid { grid-template-columns: 1fr !important; }\n .sp-grid-6 { grid-template-columns: repeat(2, 1fr) !important; }\n .sp-hero-h1 { font-size: clamp(28px, 10vw, 36px) !important; }\n .sp-footer-brand { grid-column: auto !important; }\n}\n\nhtml, body { overflow-x: hidden !important; max-width: 100vw !important; }\n\n#sp-wp-root{background:#fff;font-family:var(--font-sans);color:var(--text-default);margin-bottom:0!important}\n#sp-wp-root>div{margin-bottom:0!important}\n#sp-wp-root section:last-child{margin-bottom:0!important}\nbody .entry-content,body .wp-block-html,body .wp-block-post-content{margin-bottom:0!important;padding-bottom:0!important}\n#sp-wp-root *{box-sizing:border-box!important}\n#sp-wp-root img{margin:0!important;padding:0!important;border:0!important;max-width:none!important;vertical-align:top!important;display:block}\n#sp-wp-root h1,#sp-wp-root h2,#sp-wp-root h3,#sp-wp-root h4,#sp-wp-root h5,#sp-wp-root h6,#sp-wp-root p{margin:0!important}\n#sp-wp-root button{font:inherit!important;color:inherit!important;margin:0!important;padding:0!important}\n#sp-wp-root ul,#sp-wp-root li{margin:0!important;padding:0!important;list-style:none!important}\n#sp-wp-root a{color:inherit;text-decoration:none;margin:0!important}\n.coin{position:absolute;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE38A 0%,#F2B821 60%,#B07A05 100%);box-shadow:inset -2px -3px 0 rgba(0,0,0,0.15),0 2px 4px rgba(176,122,5,0.25)}\n.coin::after{content:\"\u20ab\";position:absolute;inset:0;display:grid;place-items:center;color:#8C5800;font-weight:800;font-size:14px;font-family:var(--font-display)}\n.coin.lg{width:40px;height:40px}.coin.lg::after{font-size:20px}\n.coin.sm{width:20px;height:20px}.coin.sm::after{font-size:10px}\n.reveal{opacity:0;transform:translateY(16px);transition:opacity 600ms var(--easing-decelerate),transform 600ms var(--easing-decelerate)}\n.reveal.in{opacity:1;transform:none}\n.hero-cta{transition:transform 200ms var(--easing-standard),box-shadow 200ms var(--easing-standard)}\n.hero-cta:hover{transform:translateY(-2px);box-shadow:0 24px 40px -8px rgba(10,21,48,0.6),0 8px 16px -2px rgba(10,21,48,0.4),inset 0 -4px 0 rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.2)}\nbutton{cursor:pointer}\n#sp-wp-root .sp-how-step{padding:0 0 36px !important;margin:0 !important;display:block !important;width:100% !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;text-align:left !important;letter-spacing:normal !important;text-transform:none !important;min-height:0 !important;line-height:1.2 !important;color:inherit !important}\n#sp-wp-root .sp-how-step:hover,#sp-wp-root .sp-how-step:focus{background:transparent !important;box-shadow:none !important}\n#sp-wp-root video{max-width:100% !important;display:block !important}\n#sp-wp-root h1,#sp-wp-root h2,#sp-wp-root h3,#sp-wp-root h4,#sp-wp-root p{padding:0 !important}\n#sp-wp-root .sp-cta-lead{margin-top:30px !important;margin-bottom:14px !important}\n#sp-wp-root .sp-why-lead{margin-top:-20px !important;margin-bottom:44px !important}\n#sp-wp-root .sp-faq-lead{margin-top:28px !important;margin-bottom:0 !important}\n#sp-wp-root .sp-dash-lead{margin-bottom:72px !important}\n#sp-wp-root .sp-path-lead{margin-top:28px !important;margin-bottom:0 !important}\n#sp-wp-root .sp-center-lead{text-align:center !important;margin-left:auto !important;margin-right:auto !important}\n#sp-wp-root .sp-center-lead>*{text-align:center !important}\n#sp-wp-root button,#sp-wp-root a{font-family:inherit !important;text-transform:none !important;letter-spacing:normal !important;min-height:0 !important;min-width:0 !important;width:auto;text-shadow:none}\n#sp-wp-root .sp-cta-btn{padding:14px 34px !important;border-radius:10px !important;background:#14C560 !important;color:#fff !important;border:0 !important;font-weight:600 !important;font-size:16px !important;line-height:1.2 !important;width:auto !important;box-shadow:none !important;margin:8px 0 0 !important}\n#sp-wp-root .sp-cta-btn:hover{background:#00A74F !important}\n#sp-wp-root .sp-faq-btn{padding:24px 24px 24px 28px !important;margin:0 !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;width:100% !important;display:grid !important;grid-template-columns:auto 1fr auto !important;align-items:center !important;gap:22px !important;text-align:left !important;line-height:1.35 !important;color:inherit !important}\n#sp-wp-root .sp-faq-btn:hover,#sp-wp-root .sp-faq-btn:focus{background:transparent !important;box-shadow:none !important}\n<\/style>\n<\/head>\n<body>\n<div id=\"root\"><\/div>\n<script src=\"https:\/\/unpkg.com\/react@18.3.1\/umd\/react.development.js\" integrity=\"sha384-hD6\/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu\/6onKUg4lLsHAs9EBPT82L\" crossorigin=\"anonymous\"><\/script>\n<script src=\"https:\/\/unpkg.com\/react-dom@18.3.1\/umd\/react-dom.development.js\" integrity=\"sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm\" crossorigin=\"anonymous\"><\/script>\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone@7.29.0\/babel.min.js\" integrity=\"sha384-m08KidiNqLdpJqLq95G\/LEi8Qvjl\/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y\" crossorigin=\"anonymous\"><\/script>\n<script type=\"text\/babel\">\n\n\/\/ Reusable illustration + decorative components for the Saladin Pro landing\n\/\/ Exports: PersonAvatar, Coin, CoinScatter, MoneyBag, AppPhoneIncome, AppPhoneDashboard, AppPhoneSplash, StepPhone, ChevronDown\n\n\/\/ \u2500\u2500\u2500 Person avatar (illustrated silhouette over warm gradient) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction PersonAvatar({ tone = \"warm\", style = {} }) {\n const tones = {\n warm: { bg: 'linear-gradient(135deg, #FFD9A6 0%, #E8A268 65%, #B97142 100%)', skin: '#F2BE8B', hair: '#352014', shirt: '#1E3888' },\n cool: { bg: 'linear-gradient(135deg, #DCE9D5 0%, #98B884 60%, #4D6B43 100%)', skin: '#E4B58D', hair: '#1E1A14', shirt: '#FFFFFF' },\n soft: { bg: 'linear-gradient(135deg, #F6E0D1 0%, #D6A48A 60%, #8B5536 100%)', skin: '#EFC4A1', hair: '#2C1F18', shirt: '#C5FFCA' },\n studio: { bg: 'linear-gradient(135deg, #C7D7E8 0%, #6A8AE0 60%, #2A4DAE 100%)', skin: '#F0C6A1', hair: '#1B1410', shirt: '#fff' },\n lawn: { bg: 'linear-gradient(135deg, #DDE5DA 0%, #9CB19C 60%, #506351 100%)', skin: '#E8B68A', hair: '#221813', shirt: '#1E3888' },\n bake: { bg: 'linear-gradient(135deg, #FFEFD4 0%, #EAB377 60%, #B5743C 100%)', skin: '#F0C5A0', hair: '#2A1B13', shirt: '#fff' }\n };\n const t = tones[tone] || tones.warm;\n return (\n <div style={{ position: 'relative', overflow: 'hidden', background: t.bg, ...style }}>\n <svg viewBox=\"0 0 200 160\" preserveAspectRatio=\"xMidYMax slice\" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>\n {\/* Shoulders\/shirt *\/}\n <path d=\"M 0 160 L 0 145 Q 30 110 60 100 L 140 100 Q 170 110 200 145 L 200 160 Z\" fill={t.shirt} \/>\n {\/* Neck *\/}\n <rect x=\"88\" y=\"84\" width=\"24\" height=\"20\" rx=\"4\" fill={t.skin} \/>\n {\/* Head *\/}\n <ellipse cx=\"100\" cy=\"64\" rx=\"30\" ry=\"34\" fill={t.skin} \/>\n {\/* Hair top *\/}\n <path d=\"M 70 56 Q 75 28 100 26 Q 125 28 130 56 Q 130 44 100 42 Q 80 44 70 56 Z\" fill={t.hair} \/>\n {\/* Subtle smile *\/}\n <path d=\"M 90 72 Q 100 78 110 72\" stroke={t.hair} strokeWidth=\"2\" fill=\"none\" strokeLinecap=\"round\" opacity=\"0.4\" \/>\n <\/svg>\n <\/div>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Coin \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction Coin({ size = 28, style = {} }) {\n return (\n <div className=\"coin\" style={{ width: size, height: size, ...style }} \/>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Hero character (excited agent in hoodie) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction HeroCharacter({ style = {} }) {\n return (\n <div style={{ position: 'relative', ...style }}>\n <svg viewBox=\"0 0 360 480\" style={{ width: '100%', height: 'auto', display: 'block' }}>\n <defs>\n <linearGradient id=\"hoodieG\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" stopColor=\"#F6E5D7\" \/>\n <stop offset=\"1\" stopColor=\"#D8B595\" \/>\n <\/linearGradient>\n <linearGradient id=\"skinG\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" stopColor=\"#F2C49A\" \/>\n <stop offset=\"1\" stopColor=\"#D89A6F\" \/>\n <\/linearGradient>\n <\/defs>\n {\/* Hoodie body *\/}\n <path d=\"M 50 480 L 50 360 Q 50 270 110 240 L 250 240 Q 310 270 310 360 L 310 480 Z\" fill=\"url(#hoodieG)\" \/>\n {\/* Hoodie hood *\/}\n <path d=\"M 110 240 Q 100 200 130 175 L 230 175 Q 260 200 250 240 Z\" fill=\"url(#hoodieG)\" \/>\n {\/* Neck *\/}\n <rect x=\"160\" y=\"195\" width=\"40\" height=\"38\" rx=\"6\" fill=\"url(#skinG)\" \/>\n {\/* Head *\/}\n <ellipse cx=\"180\" cy=\"148\" rx=\"62\" ry=\"68\" fill=\"url(#skinG)\" \/>\n {\/* Hair *\/}\n <path d=\"M 125 130 Q 125 80 180 78 Q 235 80 235 130 Q 235 105 180 100 Q 145 105 125 130 Z\" fill=\"#241712\" \/>\n <path d=\"M 130 130 Q 145 115 180 113 Q 215 115 230 130\" fill=\"none\" stroke=\"#241712\" strokeWidth=\"2\" \/>\n {\/* Eyes (closed smile) *\/}\n <path d=\"M 150 152 Q 158 144 168 152\" stroke=\"#241712\" strokeWidth=\"3\" fill=\"none\" strokeLinecap=\"round\" \/>\n <path d=\"M 195 152 Q 203 144 213 152\" stroke=\"#241712\" strokeWidth=\"3\" fill=\"none\" strokeLinecap=\"round\" \/>\n {\/* Eyebrows *\/}\n <path d=\"M 148 140 L 168 138\" stroke=\"#241712\" strokeWidth=\"3\" strokeLinecap=\"round\" \/>\n <path d=\"M 195 138 L 215 140\" stroke=\"#241712\" strokeWidth=\"3\" strokeLinecap=\"round\" \/>\n {\/* Open mouth (laughing) *\/}\n <path d=\"M 162 178 Q 180 200 200 178 Q 195 192 180 192 Q 165 192 162 178 Z\" fill=\"#3A1810\" \/>\n <path d=\"M 167 178 L 195 178\" stroke=\"#fff\" strokeWidth=\"3\" strokeLinecap=\"round\" \/>\n {\/* Cheek blush *\/}\n <ellipse cx=\"142\" cy=\"172\" rx=\"9\" ry=\"5\" fill=\"#F19A7A\" opacity=\"0.55\" \/>\n <ellipse cx=\"218\" cy=\"172\" rx=\"9\" ry=\"5\" fill=\"#F19A7A\" opacity=\"0.55\" \/>\n {\/* Right arm pointing *\/}\n <path d=\"M 290 290 Q 320 270 330 240 L 330 230 Q 345 230 348 248 Q 350 280 318 320 L 310 360 Z\" fill=\"url(#hoodieG)\" \/>\n {\/* Right hand *\/}\n <circle cx=\"335\" cy=\"234\" r=\"14\" fill=\"url(#skinG)\" \/>\n {\/* Finger pointing left toward phone *\/}\n <rect x=\"305\" y=\"228\" width=\"34\" height=\"9\" rx=\"4\" fill=\"url(#skinG)\" transform=\"rotate(-12 322 232)\" \/>\n {\/* Left arm (close to body) *\/}\n <path d=\"M 70 290 Q 60 340 80 380 L 110 380 L 110 340 Q 100 320 100 290 Z\" fill=\"url(#hoodieG)\" \/>\n {\/* Hoodie strings *\/}\n <line x1=\"170\" y1=\"232\" x2=\"168\" y2=\"270\" stroke=\"#A87B4F\" strokeWidth=\"3\" strokeLinecap=\"round\" \/>\n <line x1=\"190\" y1=\"232\" x2=\"192\" y2=\"270\" stroke=\"#A87B4F\" strokeWidth=\"3\" strokeLinecap=\"round\" \/>\n <circle cx=\"168\" cy=\"272\" r=\"4\" fill=\"#A87B4F\" \/>\n <circle cx=\"192\" cy=\"272\" r=\"4\" fill=\"#A87B4F\" \/>\n <\/svg>\n <\/div>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Money bag illustration \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction MoneyBag({ size = 64 }) {\n return (\n <svg viewBox=\"0 0 64 64\" width={size} height={size}>\n <path d=\"M 22 12 L 42 12 L 38 20 L 26 20 Z\" fill=\"#3A2914\" \/>\n <path d=\"M 24 20 Q 8 32 12 48 Q 14 58 32 58 Q 50 58 52 48 Q 56 32 40 20 Z\" fill=\"#F2BE8B\" \/>\n <path d=\"M 24 20 Q 8 32 12 48 Q 14 58 32 58 Q 50 58 52 48 Q 56 32 40 20 Z\" fill=\"url(#mb)\" opacity=\"0.6\" \/>\n <defs>\n <linearGradient id=\"mb\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" stopColor=\"#fff\" stopOpacity=\"0.3\" \/>\n <stop offset=\"1\" stopColor=\"#000\" stopOpacity=\"0.2\" \/>\n <\/linearGradient>\n <\/defs>\n <text x=\"32\" y=\"44\" textAnchor=\"middle\" fontSize=\"20\" fontWeight=\"700\" fill=\"#3A2914\" fontFamily=\"var(--font-display)\">\u20ab<\/text>\n <\/svg>);\n\n}\n\n\/\/ \u2500\u2500\u2500 App phone showing income card (hero) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction AppPhoneIncome() {\n return (\n <div style={{\n width: 252, height: 510, borderRadius: 38, background: '#0E1F11',\n padding: 8, boxShadow: '0 24px 48px -8px rgba(16,24,40,0.32), 0 12px 24px -8px rgba(16,24,40,0.18)',\n position: 'relative'\n }}>\n <div style={{ width: '100%', height: '100%', borderRadius: 32, background: 'linear-gradient(180deg, #F6FFF2 0%, #fff 50%, #F8FAFA 100%)', overflow: 'hidden', position: 'relative' }}>\n {\/* Notch *\/}\n <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 90, height: 22, background: '#0E1F11', borderRadius: 14, zIndex: 5 }} \/>\n\n {\/* Status bar *\/}\n <div style={{ height: 36, display: 'flex', justifyContent: 'space-between', padding: '14px 22px 0', fontSize: 11, fontWeight: 600, fontFamily: 'var(--font-ios)' }}>\n <span>9:41<\/span>\n <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}>\n <i className=\"ri-signal-tower-fill\" style={{ fontSize: 10 }}><\/i>\n <i className=\"ri-wifi-fill\" style={{ fontSize: 10 }}><\/i>\n <i className=\"ri-battery-fill\" style={{ fontSize: 12 }}><\/i>\n <\/span>\n <\/div>\n\n {\/* App header *\/}\n <div style={{ padding: '12px 16px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n <div>\n <div style={{ fontSize: 11, color: '#5C5F5F' }}>Ch\u00e0o bu\u1ed5i s\u00e1ng<\/div>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: '#0E1F11' }}>Anh Minh \ud83d\udc4b<\/div>\n <\/div>\n <div style={{ width: 36, height: 36, borderRadius: 50, background: 'linear-gradient(135deg, #FFD9A6, #E8A268)' }} \/>\n <\/div>\n\n {\/* Income card *\/}\n <div style={{ margin: '8px 14px 0', borderRadius: 16, padding: 16, background: 'linear-gradient(135deg, #14C560 0%, #008A40 100%)', color: '#fff', position: 'relative', overflow: 'hidden' }}>\n <div style={{ fontSize: 10, opacity: 0.85, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Thu nh\u1eadp th\u00e1ng 11<\/div>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26, marginTop: 4, letterSpacing: '-0.02em' }}>24.580.000<span style={{ fontSize: 14, marginLeft: 2 }}>\u20ab<\/span><\/div>\n <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 4, fontSize: 10, fontWeight: 600 }}>\n <i className=\"ri-arrow-up-line\"><\/i> +18% so v\u1edbi th\u00e1ng tr\u01b0\u1edbc\n <\/div>\n <div style={{ position: 'absolute', right: -16, top: -16, width: 96, height: 96, background: 'radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%)', borderRadius: '50%' }} \/>\n <\/div>\n\n {\/* Quick actions *\/}\n <div style={{ margin: '12px 14px 0', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>\n {[\n { ic: 'ri-add-line', l: 'B\u00e1n m\u1edbi' },\n { ic: 'ri-share-line', l: 'Chia s\u1ebb' },\n { ic: 'ri-user-line', l: 'Kh\u00e1ch' },\n { ic: 'ri-wallet-line', l: 'R\u00fat ti\u1ec1n' }].\n map((a, i) =>\n <div key={i} style={{ background: '#fff', border: '1px solid #DDE5DA', borderRadius: 10, padding: '8px 4px', textAlign: 'center' }}>\n <div style={{ width: 28, height: 28, borderRadius: 8, background: '#F6FFF2', display: 'grid', placeItems: 'center', margin: '0 auto' }}>\n <i className={a.ic} style={{ fontSize: 14, color: '#14C560' }}><\/i>\n <\/div>\n <div style={{ fontSize: 8.5, marginTop: 3, color: '#414941', fontWeight: 500 }}>{a.l}<\/div>\n <\/div>\n )}\n <\/div>\n\n {\/* Recent orders *\/}\n <div style={{ margin: '14px 14px 0' }}>\n <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>\n <span style={{ fontSize: 11, fontWeight: 700, fontFamily: 'var(--font-display)' }}>\u0110\u01a1n g\u1ea7n \u0111\u00e2y<\/span>\n <span style={{ fontSize: 9, color: '#14C560', fontWeight: 600 }}>Xem t\u1ea5t c\u1ea3<\/span>\n <\/div>\n {[\n { ic: 'ri-motorbike-fill', g: '#FFEFD4', c: '#A29200', t: 'BH xe m\u00e1y \u00b7 GIC', sub: '12\/11 \u00b7 \u0110\u00e3 ch\u1ed1t', a: '+ 320.000 \u20ab' },\n { ic: 'ri-heart-pulse-fill', g: '#FFDAD6', c: '#BA1A1A', t: 'S\u1ee9c kho\u1ebb \u00b7 DBV', sub: '11\/11 \u00b7 Hoa h\u1ed3ng v\u1ec1', a: '+ 1.250.000 \u20ab' },\n { ic: 'ri-plane-fill', g: '#D3F7FF', c: '#39656D', t: 'Du l\u1ecbch \u00b7 MIC', sub: '10\/11 \u00b7 Ch\u1edd duy\u1ec7t', a: '+ 180.000 \u20ab' }].\n map((o, i) =>\n <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: i < 2 ? '1px solid #EFF1F1' : 'none' }}>\n <div style={{ width: 30, height: 30, borderRadius: 8, background: o.g, display: 'grid', placeItems: 'center', flexShrink: 0 }}>\n <i className={o.ic} style={{ fontSize: 14, color: o.c }}><\/i>\n <\/div>\n <div style={{ flex: 1, minWidth: 0 }}>\n <div style={{ fontSize: 10.5, fontWeight: 600, color: '#1B1D20' }}>{o.t}<\/div>\n <div style={{ fontSize: 8.5, color: '#5C5F5F' }}>{o.sub}<\/div>\n <\/div>\n <div style={{ fontSize: 10, fontWeight: 700, color: '#14C560' }}>{o.a}<\/div>\n <\/div>\n )}\n <\/div>\n\n {\/* Bottom nav *\/}\n <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 50, background: '#fff', borderTop: '1px solid #EFF1F1', display: 'flex', justifyContent: 'space-around', alignItems: 'center', paddingBottom: 6 }}>\n {[\n { ic: 'ri-home-5-fill', a: true },\n { ic: 'ri-shopping-bag-line' },\n { ic: 'ri-line-chart-line' },\n { ic: 'ri-user-line' }].\n map((n, i) =>\n <i key={i} className={n.ic} style={{ fontSize: 18, color: n.a ? '#14C560' : '#A6ADA3' }}><\/i>\n )}\n <\/div>\n <\/div>\n <\/div>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Phone showing video (for \"how it works\") \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction AppPhoneSplash() {\n const videoRef = React.useRef(null);\n const [playing, setPlaying] = React.useState(false);\n const VIDEO_URL = 'https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/05\/27032341\/3-Vi-sao-nen-tham-gia-dang-ky-Pro.mp4';\n\n const toggle = () => {\n const v = videoRef.current;\n if (!v) return;\n if (v.paused) {v.play();setPlaying(true);} else\n {v.pause();setPlaying(false);}\n };\n\n return (\n <div style={{\n width: 280, height: 568, borderRadius: 42, background: '#0E1F11',\n padding: 8, boxShadow: '0 24px 48px -8px rgba(16,24,40,0.32)',\n position: 'relative'\n }}>\n <div style={{ width: '100%', height: '100%', borderRadius: 36, background: '#000', overflow: 'hidden', position: 'relative' }}>\n <video\n ref={videoRef}\n src={VIDEO_URL}\n poster=\"\"\n playsInline\n preload=\"metadata\"\n onPlay={() => setPlaying(true)}\n onPause={() => setPlaying(false)}\n onEnded={() => setPlaying(false)}\n style={{\n width: '100%', height: '100%', objectFit: 'contain', display: 'block',\n background: '#000'\n }} \/>\n \n\n {\/* Notch *\/}\n <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 90, height: 22, background: '#0E1F11', borderRadius: 14, zIndex: 2 }} \/>\n\n {\/* Play overlay (visible when paused) *\/}\n {!playing &&\n <button onClick={toggle} aria-label=\"Ph\u00e1t video\" style={{\n position: 'absolute', inset: 0,\n background: 'linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.35) 100%)',\n border: 'none', cursor: 'pointer',\n display: 'grid', placeItems: 'center'\n }}>\n <div style={{\n width: 72, height: 72, borderRadius: '50%',\n background: 'rgba(255,255,255,0.95)',\n display: 'grid', placeItems: 'center',\n boxShadow: '0 8px 24px rgba(0,0,0,0.25), 0 0 0 8px rgba(255,255,255,0.18)'\n }}>\n <i className=\"ri-play-fill\" style={{ fontSize: 38, color: '#14C560', marginLeft: 5 }}><\/i>\n <\/div>\n <div style={{\n position: 'absolute', bottom: 24, left: 16, right: 16,\n color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, lineHeight: 1.25,\n textShadow: '0 2px 8px rgba(0,0,0,0.45)'\n }}>\n V\u00ec sao n\u00ean tham gia<br \/>\u0111\u0103ng k\u00fd Saladin Pro\n <\/div>\n <\/button>\n }\n\n {\/* Mini pause\/resume control when playing *\/}\n {playing &&\n <button onClick={toggle} aria-label=\"T\u1ea1m d\u1eebng\" style={{\n position: 'absolute', bottom: 18, right: 18,\n width: 40, height: 40, borderRadius: '50%',\n background: 'rgba(0,0,0,0.55)', border: 'none', color: '#fff', cursor: 'pointer',\n display: 'grid', placeItems: 'center',\n backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)'\n }}>\n <i className=\"ri-pause-fill\" style={{ fontSize: 22 }}><\/i>\n <\/button>\n }\n <\/div>\n <\/div>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Dashboard phone for \"Qu\u1ea3n l\u00fd thu nh\u1eadp\" section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction AppPhoneDashboard() {\n return (\n <div style={{\n width: 248, height: 502, borderRadius: 38, background: '#0E1F11',\n padding: 8, boxShadow: '0 24px 48px -8px rgba(16,24,40,0.32)',\n position: 'relative', transform: 'rotate(-6deg)'\n }}>\n <div style={{ width: '100%', height: '100%', borderRadius: 32, background: '#F8FAFA', overflow: 'hidden', position: 'relative' }}>\n <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 86, height: 22, background: '#0E1F11', borderRadius: 14, zIndex: 5 }} \/>\n <div style={{ padding: '36px 14px 12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16 }}>\u0110\u01a1n h\u00e0ng<\/div>\n <i className=\"ri-search-line\" style={{ fontSize: 16 }}><\/i>\n <\/div>\n {\/* Tabs *\/}\n <div style={{ padding: '0 14px', display: 'flex', gap: 6 }}>\n {['T\u1ea5t c\u1ea3', 'Ch\u1edd x\u1eed l\u00fd', 'Hoa h\u1ed3ng'].map((t, i) =>\n <div key={i} style={{\n padding: '4px 10px', borderRadius: 50, fontSize: 9.5, fontWeight: 600,\n background: i === 0 ? '#1E3888' : '#fff', color: i === 0 ? '#fff' : '#5C5F5F',\n border: i === 0 ? 'none' : '1px solid #DCDFE3'\n }}>{t}<\/div>\n )}\n <\/div>\n {\/* Filter row *\/}\n <div style={{ padding: '10px 14px 0', display: 'flex', gap: 6 }}>\n <div style={{ flex: 1, background: '#fff', border: '1px solid #DCDFE3', borderRadius: 6, padding: '6px 8px', fontSize: 9.5, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n <span>Th\u00e1ng 11<\/span><i className=\"ri-arrow-down-s-line\" style={{ fontSize: 12 }}><\/i>\n <\/div>\n <div style={{ flex: 1, background: '#fff', border: '1px solid #DCDFE3', borderRadius: 6, padding: '6px 8px', fontSize: 9.5, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n <span>\u0110\u00e3 b\u00e1n<\/span><i className=\"ri-arrow-down-s-line\" style={{ fontSize: 12 }}><\/i>\n <\/div>\n <\/div>\n {\/* Stats panel *\/}\n <div style={{ margin: '12px 14px 0', padding: 12, background: '#fff', borderRadius: 12, boxShadow: '0 2px 4px rgba(16,24,40,0.05)' }}>\n <div style={{ display: 'flex', gap: 10 }}>\n <div style={{ flex: 1 }}>\n <div style={{ fontSize: 9, color: '#5C5F5F' }}>Doanh s\u1ed1<\/div>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: '#1E3888' }}>50.000.000\u20ab<\/div>\n <\/div>\n <div style={{ flex: 1 }}>\n <div style={{ fontSize: 9, color: '#5C5F5F' }}>Thu nh\u1eadp<\/div>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: '#14C560' }}>20.000.000\u20ab<\/div>\n <\/div>\n <\/div>\n {\/* Mini chart *\/}\n <svg viewBox=\"0 0 200 50\" style={{ width: '100%', height: 36, marginTop: 6 }}>\n <defs>\n <linearGradient id=\"chartG\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" stopColor=\"#14C560\" stopOpacity=\"0.4\" \/>\n <stop offset=\"1\" stopColor=\"#14C560\" stopOpacity=\"0\" \/>\n <\/linearGradient>\n <\/defs>\n <path d=\"M 0 40 L 25 30 L 50 35 L 75 22 L 100 28 L 125 14 L 150 18 L 175 8 L 200 4 L 200 50 L 0 50 Z\" fill=\"url(#chartG)\" \/>\n <path d=\"M 0 40 L 25 30 L 50 35 L 75 22 L 100 28 L 125 14 L 150 18 L 175 8 L 200 4\" stroke=\"#14C560\" strokeWidth=\"2\" fill=\"none\" \/>\n <\/svg>\n <\/div>\n {\/* List *\/}\n <div style={{ margin: '10px 14px 0', display: 'flex', flexDirection: 'column', gap: 6 }}>\n {[\n { c: '#FFEFD4', i: 'ri-motorbike-fill', ci: '#A29200', t: '#SLD-3421', s: 'Hoa h\u1ed3ng v\u1ec1', a: '+450.000\u20ab' },\n { c: '#FFDAD6', i: 'ri-heart-pulse-fill', ci: '#BA1A1A', t: '#SLD-3418', s: 'Ch\u1edd KH thanh to\u00e1n', a: '1.250.000\u20ab' },\n { c: '#D3F7FF', i: 'ri-plane-fill', ci: '#39656D', t: '#SLD-3402', s: 'Hoa h\u1ed3ng v\u1ec1', a: '+180.000\u20ab' }].\n map((o, i) =>\n <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: 8, background: '#fff', borderRadius: 8 }}>\n <div style={{ width: 26, height: 26, borderRadius: 6, background: o.c, display: 'grid', placeItems: 'center' }}>\n <i className={o.i} style={{ fontSize: 13, color: o.ci }}><\/i>\n <\/div>\n <div style={{ flex: 1 }}>\n <div style={{ fontSize: 10, fontWeight: 600 }}>{o.t}<\/div>\n <div style={{ fontSize: 8.5, color: '#5C5F5F' }}>{o.s}<\/div>\n <\/div>\n <div style={{ fontSize: 9.5, fontWeight: 700, color: o.a.startsWith('+') ? '#14C560' : '#1B1D20' }}>{o.a}<\/div>\n <\/div>\n )}\n <\/div>\n <\/div>\n <\/div>);\n\n}\n\nObject.assign(window, { PersonAvatar, Coin, HeroCharacter, MoneyBag, AppPhoneIncome, AppPhoneSplash, AppPhoneDashboard });\n\n\/\/ Saladin Pro landing \u2014 Header + Hero\n\/\/ Exports: ProHeader, ProHero\n\nconst SG = '#14C560'; \/\/ brand green\nconst SGD = '#008A40'; \/\/ deep green\nconst SGL = '#C5FFCA'; \/\/ light green\nconst SN = '#1E3888'; \/\/ brand navy\n\n\/\/ \u2500\u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction NavDropdown({ label, items }) {\n const [open, setOpen] = React.useState(false);\n return (\n <div\n onMouseEnter={() => setOpen(true)}\n onMouseLeave={() => setOpen(false)}\n style={{ position: 'relative' }}>\n \n <button style={{\n fontSize: 14, fontWeight: 500, color: '#1B1D20', padding: '6px 0',\n background: 'transparent', border: 'none', fontFamily: 'inherit',\n borderBottom: `2px solid ${open ? SG : 'transparent'}`, transition: 'border-color 150ms',\n display: 'inline-flex', alignItems: 'center', gap: 5, cursor: 'pointer'\n }}>\n {label}\n <i className=\"ri-arrow-down-s-line\" style={{\n fontSize: 15, transition: 'transform 180ms', transform: open ? 'rotate(180deg)' : 'none'\n }}><\/i>\n <\/button>\n <div style={{\n position: 'absolute', top: '100%', left: 0, paddingTop: 10,\n opacity: open ? 1 : 0, visibility: open ? 'visible' : 'hidden',\n transform: open ? 'translateY(0)' : 'translateY(-6px)',\n transition: 'opacity 180ms var(--easing-standard), transform 180ms var(--easing-standard)'\n }}>\n <div style={{\n background: '#fff', borderRadius: 12, minWidth: 220, padding: 8,\n boxShadow: '0 16px 32px -10px rgba(16,24,40,0.22), 0 4px 8px -2px rgba(16,24,40,0.08)',\n border: '1px solid rgba(220,223,227,0.6)'\n }}>\n {items.map((it) =>\n <a key={it.l} href={it.h} style={{\n display: 'block', padding: '10px 12px', borderRadius: 8,\n fontSize: 14, fontWeight: 500, color: '#1B1D20', textDecoration: 'none',\n transition: 'background 150ms'\n }}\n onMouseEnter={(e) => e.currentTarget.style.background = '#F6FFF2'}\n onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>\n {it.l}<\/a>\n )}\n <\/div>\n <\/div>\n <\/div>);\n\n}\n\nfunction ProHeader() {\n const learnMore = [\n { l: 'D\u00e0nh cho ai?', h: 'https:\/\/pro.saladin.vn\/cong-tac-vien\/danh-cho-ai\/' },\n { l: 'Thu nh\u1eadp ra sao?', h: 'https:\/\/pro.saladin.vn\/cong-tac-vien\/tai-lieu-dao-tao\/thu-nhap-ra-sao\/' },\n { l: 'S\u1ea3n ph\u1ea9m v\u00e0 \u0110\u1ed1i t\u00e1c', h: '#partners' }];\n\n const tips = [\n { l: 'T\u00e0i li\u1ec7u \u0111\u00e0o t\u1ea1o', h: 'https:\/\/pro.saladin.vn\/cong-tac-vien\/category\/tai-lieu-dao-tao\/' },\n { l: 'N\u00e2ng cao thu nh\u1eadp', h: 'https:\/\/pro.saladin.vn\/cong-tac-vien\/category\/bi-kip-kiem-them\/' },\n { l: 'Tra c\u1ee9u', h: 'https:\/\/pro.saladin.vn\/cong-tac-vien\/tra-cuu\/' },\n { l: 'Th\u00f4ng tin s\u1ea3n ph\u1ea9m', h: 'https:\/\/pro.saladin.vn\/cong-tac-vien\/category\/tai-lieu-dao-tao\/thong-tin-san-pham\/' }];\n\n\n return (\n <header style={{\n position: 'sticky', top: 0, zIndex: 100,\n background: 'rgba(255,255,255,0.85)',\n backdropFilter: 'blur(16px) saturate(180%)',\n WebkitBackdropFilter: 'blur(16px) saturate(180%)',\n borderBottom: '1px solid rgba(220,223,227,0.5)'\n }}>\n <div className=\"sp-header-inner\" style={{ maxWidth: 1280, margin: '0 auto', padding: '14px 32px', display: 'flex', alignItems: 'center', gap: 32 }}>\n <a href=\"#top\" style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>\n <img decoding=\"async\" src=\"https:\/\/pro.saladin.vn\/image\/agent_landing_page_logo.png\" alt=\"Saladin Pro\" style={{ height: 40, width: 'auto', display: 'block' }} \/>\n <\/a>\n <nav className=\"sp-header-nav\" style={{ display: 'flex', gap: 28, marginLeft: 16, alignItems: 'center', justifyContent: 'flex-end', flex: 1 }}>\n <NavDropdown label=\"T\u00ecm hi\u1ec3u tham gia\" items={learnMore} \/>\n <a href=\"https:\/\/pro.saladin.vn\/about\" target=\"_blank\" rel=\"noopener\" style={{\n fontSize: 14, fontWeight: 500, color: '#1B1D20', padding: '6px 0',\n borderBottom: '2px solid transparent', transition: 'border-color 150ms'\n }} onMouseEnter={(e) => e.currentTarget.style.borderBottomColor = SG}\n onMouseLeave={(e) => e.currentTarget.style.borderBottomColor = 'transparent'}>\n V\u1ec1 Saladin Pro<\/a>\n <NavDropdown label=\"B\u00ed k\u00edp\" items={tips} \/>\n <\/nav>\n <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>\n <a href=\"https:\/\/id.saladin.vn\/?callback_url=https%3A%2F%2Fpro.saladin.vn%2Flogin%2Fcallback%3Fredirect%3Dhttps%253A%252F%252Fpro.saladin.vn%252F%26channel%3Dpro&from=pro\" style={{\n background: SG, color: '#fff', padding: '10px 18px', borderRadius: 6,\n border: 'none', fontWeight: 600, fontSize: 14, fontFamily: 'inherit',\n boxShadow: '0 4px 10px -2px rgba(20,197,96,0.4)', textDecoration: 'none',\n display: 'inline-flex', alignItems: 'center', gap: 6\n }}>\u0110\u0103ng nh\u1eadp \/ \u0110\u0103ng k\u00fd <i className=\"ri-arrow-right-line\"><\/i><\/a>\n <button style={{\n background: 'transparent', border: '1px solid #DCDFE3', borderRadius: 6,\n padding: '8px 10px', fontSize: 13, fontWeight: 500, display: 'none', alignItems: 'center', gap: 5\n }}>\n <span style={{\n width: 18, height: 14, borderRadius: 2, display: 'inline-block', overflow: 'hidden',\n background: 'linear-gradient(180deg, #DA251D 50%, #DA251D 50%)', position: 'relative'\n }}>\n <span style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: '#FFD500', fontSize: 9 }}>\u2605<\/span>\n <\/span>\n VN\n <\/button>\n <\/div>\n <\/div>\n <\/header>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Hero floating card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction FloatCard({ children, style }) {\n return (\n <div style={{\n position: 'absolute', background: '#fff', borderRadius: 14,\n padding: '12px 14px', boxShadow: '0 12px 24px -8px rgba(16,24,40,0.18), 0 4px 8px -2px rgba(16,24,40,0.08)',\n display: 'flex', alignItems: 'center', gap: 10,\n ...style\n }}>{children}<\/div>);\n\n}\n\nfunction IconBadge({ ic, bg, color = '#fff', size = 36 }) {\n return (\n <div style={{ width: size, height: size, borderRadius: 10, background: bg, display: 'grid', placeItems: 'center', flexShrink: 0 }}>\n <i className={ic} style={{ color, fontSize: size * 0.5 }}><\/i>\n <\/div>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Flat, credible hero stat tile (no rotation\/stickers) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction StatTile({ style, iconBg, icon, iconColor = '#fff', value, valueColor, label, prefix }) {\n return (\n <div className=\"sp-stat-tile\" style={{\n position: 'absolute', zIndex: 3,\n background: '#fff', borderRadius: 14, padding: '16px 18px',\n minWidth: 216,\n boxShadow: '0 16px 32px -12px rgba(16,24,40,0.18), 0 4px 8px -2px rgba(16,24,40,0.06)',\n border: '1px solid rgba(220,223,227,0.7)',\n display: 'flex', alignItems: 'center', gap: 14,\n ...style\n }}>\n <div>\n <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>\n {prefix && <span style={{ fontSize: 13, fontWeight: 600, color: '#5C5F5F' }}>{prefix}<\/span>}\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, letterSpacing: '-0.02em', color: valueColor, lineHeight: 1.05 }}>{value}<\/div>\n <\/div>\n <div style={{ fontSize: 13, color: '#5C5F5F', marginTop: 2, lineHeight: 1.3 }}>{label}<\/div>\n <\/div>\n <\/div>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Hero \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction ProHero() {\n const REG_URL = 'https:\/\/id.saladin.vn\/?callback_url=https%3A%2F%2Fpro.saladin.vn%2Flogin%2Fcallback%3Fredirect%3Dhttps%253A%252F%252Fpro.saladin.vn%252F%26channel%3Dpro&from=pro';\n return (\n <section id=\"top\" data-screen-label=\"01 Hero\" style={{\n position: 'relative', overflow: 'hidden',\n background: 'linear-gradient(160deg, #F7FAF7 0%, #EDF6EC 55%, #E3F3E2 100%)',\n padding: '56px 0 88px'\n }}>\n {\/* Subtle decorative leaf, low opacity *\/}\n <img decoding=\"async\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzUgMjM2IiBmaWxsPSJub25lIj4KICAKICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCA0OCkiPgogICAgPHBhdGggZD0iTSA0Mi42NzYgMTQxLjkyMSBDIDM4LjgxMSAxMzcuNDM4IDM0Ljc5MiAxMzIuNDkgMzEuMDgxIDEyNy4zODkgQyAyMS44MDUgMTE0LjA5MyAxNS4xNTggODkuODIxIDExLjYwMiA1Ny4zNTYgQyA5LjkwMSA0MC42NTkgOS4yODMgMjUuNTA5IDkuMTI4IDE3LjMxNSBMIDI4LjE0NCAxMi4zNjggTCAzOS40MyA5LjU4NSBDIDM5LjI3NSA2LjMzOSAzOS43MzkgMy4yNDcgNDAuODIxIDAgTCAyOC40NTMgMi45MzcgTCAwLjAwNyAxMC4yMDMgQyAwLjAwNyAxMC4yMDMgLTEuMDc1IDk2LjYyNCAyMy42NiAxMzIuMzM2IEMgMzAuOTI2IDE0Mi44NDkgMzguOTY2IDE1MS42NjEgNDYuNjk2IDE1OC45MjcgQyA0NC45OTUgMTU0LjI4OSA0My4yOTQgMTQ4LjcyMyA0Mi42NzYgMTQxLjkyMSBaIiBmaWxsPSIjMUUzODg4Ij48L3BhdGg+CiAgPC9nPgogIAogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg3LjQyLCA1MS4xKSI+CiAgICA8cGF0aCBkPSJNIDg3LjQzNCA3LjExMSBMIDU5Ljc2MSAwIEMgNjEuMzA3IDIuNjI4IDYzLjQ3MiA5Ljc0IDYzLjQ3MiAxMC4yMDMgTCA3OC40NjggMTQuMDY4IEMgNzguMzEzIDIyLjI2MiA3Ny42OTUgMzcuMTA0IDc1Ljk5NCA1My45NTUgQyA3NS4wNjYgNjIuNjEyIDcxLjY2NSA4My40ODMgNzAuODkyIDg2LjExMSBDIDY3LjE4MiAxMDIuODA4IDYyLjM4OSAxMTUuNjM5IDU2LjUxNSAxMjQuMTQyIEMgNDIuMjkyIDE0NC43MDQgMjQuODIyIDE1OC43NzIgMTIuNDU0IDE2Ny4xMiBMIDIuMjUxIDE3NC4wNzcgQyAyLjA5NiAxNzYuMDg3IDEuOTQyIDE3Ny45NDIgMS4zMjMgMTc5Ljc5NyBDIDEuMTY5IDE4MC4yNjEgLTAuMzc3IDE4NC40MzUgMC4wODYgMTg0LjU5IEMgMC4wODYgMTg0LjU5IDQuMTA2IDE4Mi41OCAxMC43NTQgMTc4LjcxNSBDIDIzLjc0IDE3MC44MzEgNDYuMDAyIDE1NC45MDcgNjMuOTM1IDEyOS4wODkgQyA4OC41MTYgOTMuNTMyIDg3LjQzNCA3LjExMSA4Ny40MzQgNy4xMTEgWiIgZmlsbD0iIzFFMzg4OCI+PC9wYXRoPgogIDwvZz4KICAKICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNy4yNCwgMCkiPgogICAgPHBhdGggZD0iTSAxMDQuNTM3IDEwMy41ODEgQyAxMDEuMjkxIDk4LjAxNSA5OS43NDUgOTIuNjA0IDEwMC44MjcgODYuMTExIEMgMTAxLjYgODEuNjI4IDEwMy40NTUgNzcuNDU0IDEwNC42OTIgNzIuOTcgQyAxMDUuNjE5IDY5LjI2IDEwNS42MTkgNjUuMzk1IDEwNC42OTIgNjEuNTMgQyAxMDQuMzgzIDYwLjQ0OCAxMDMuOTE5IDU5LjIxMSAxMDMuNjEgNTguMTI5IEMgMTAyLjM3MyA1NS4wMzcgMTAwLjUxOCA1Mi4xIDk4LjM1MyA0OS45MzUgQyA5OC4zNTMgNDkuOTM1IDk4LjM1MyA0OS45MzUgOTguMTk5IDQ5Ljc4MSBDIDk4LjE5OSA0OS43ODEgOTYuODA3IDQ4LjA4IDkzLjU2MSA0Ni4zNzkgQyA5MS4yNDIgNDUuMTQzIDg4LjMwNCA0NC4wNiA4My45NzYgNDMuNTk3IEMgODMuMDQ4IDQzLjQ0MiA4Mi40MyA0My40NDIgODEuODExIDQzLjQ0MiBDIDc3Ljc5MiA0My4xMzMgNzUuNDczIDQyLjY2OSA3NC4zOTEgNDEuNDMyIEMgNzMuMzA4IDQwLjM1IDczLjE1NCAzOC4zNCA3My4xNTQgMzQuNjMgQyA3Mi45OTkgMjcuMjA5IDczLjQ2MyAxOS4wMTYgNjkuOTA3IDEyLjIxMyBDIDY3LjI3OSA3LjI2NiA2Mi4zMzIgMi43ODMgNTYuNzY2IDEuMDgyIEMgNTQuNDQ3IDAuMzA5IDUyLjEyOCAwIDQ5LjgwOSAwIEMgNDUuNzkgMCA0MS42MTYgMS4wODIgMzguMDYgMi43ODMgQyAzNC4xOTUgNC43OTMgMzEuMTAzIDcuODg0IDI5LjI0OCAxMS45MDQgQyAyNS44NDcgMTguNzA2IDI2LjQ2NSAyOS41MjggMTguMTE3IDMyLjc3NSBDIDEzLjAxNSAzNC43ODUgNy45MTMgMzcuNDEzIDQuNjY3IDQyLjA1MSBDIDMuMjc2IDQ0LjA2IDIuMTkzIDQ1LjkxNiAxLjQyIDQ4LjA4IEMgMC4zMzggNTEuMTcyIC0wLjEyNiA1NC4yNjQgMC4wMjkgNTcuNjY1IEMgMC4xODQgNjAuNDQ4IDAuODAyIDYzLjU0IDEuNzMgNjYuMTY4IEMgMy40MyA3MC45NiA2LjUyMiA3NS40NDQgOS43NjkgNzkuMzA5IEMgMTIuODYxIDgzLjAxOSAxNi44OCA4NS45NTYgMTkuMTk5IDkwLjEzMSBDIDIzLjA2NCA5Ny4wODggMTUuOTUyIDEwMi4wMzUgMTIuMDg4IDEwNi42NzMgQyA3LjYwNCAxMTIuMjM4IDQuODIyIDExOC41NzcgNC42NjcgMTI1LjY4OCBDIDQuNTEyIDEzMS41NjMgNS45MDQgMTM3LjQzOCA5LjE1IDE0Mi4zODUgQyAxMC4wNzggMTQzLjkzMSAxMS4xNiAxNDUuNDc3IDEyLjM5NyAxNDYuNzE0IEMgMTQuMDk3IDE0OC40MTQgMTYuODggMTQ5Ljk2IDE3Ljk2MiAxNTIuNDM0IEMgMTguMjcyIDE1My41MTYgMTguNDI2IDE1NC43NTMgMTguMTE3IDE1NS44MzUgQyAxNy4xODkgMTU5Ljg1NCAxNS42NDMgMTYzLjg3NCAxNS4wMjUgMTY4LjA0OCBDIDE0LjA5NyAxNzMuNjE0IDEzLjk0MyAxNzkuMTc5IDE0LjI1MiAxODQuNzQ1IEMgMTQuNzE2IDE5MS43MDIgMTUuNzk4IDE5Ni45NTggMTcuNDk4IDIwMS41OTYgQyAyMC4xMjcgMjA4Ljg2MiAyNC4xNDYgMjEzLjgwOSAyOC4wMTEgMjE4LjI5MiBDIDMwLjc5NCAyMjEuNTM5IDM3LjEzMiAyMjYuOTUgNDEuMzA3IDIyOS43MzMgQyA0NS42MzUgMjMyLjIwNiA1MC4xMTkgMjM1LjI5OCA1MC40MjggMjM1LjI5OCBDIDUwLjQyOCAyMzUuMTQ0IDUyLjkwMSAyMjkuNzMzIDUyLjkwMSAyMjUuMDk1IEMgNTMuMDU2IDIyMS42OTQgNTIuNzQ3IDIxOC4yOTIgNTIuNzQ3IDIxNS4yIEMgNTIuNzQ3IDIwOS42MzUgNTMuMDU2IDIwNC4wNjkgNTQuNDQ3IDE5OC42NTggQyA1Ni40NTcgMTkxLjIzOCA1OS41NDkgMTg0LjI4MSA2NC4zNDIgMTc4LjI1MiBDIDY1LjExNSAxNzcuMzI0IDY1LjczMyAxNzYuNTUxIDY2LjUwNiAxNzUuNjIzIEMgNzcuOTQ2IDE2Mi43OTIgOTYuMzQzIDE1OS4wODEgMTA3LjAxMSAxNDUuNzg2IEMgMTExLjMzOSAxNDAuNTMgMTE0LjI3NyAxMzMuNDE4IDExNC4yNzcgMTI2LjQ2MSBDIDExNC4xMjIgMTE3LjY0OSAxMDguNDAyIDExMC41MzggMTA0LjUzNyAxMDMuNTgxIFogTSA5OS43NDUgMTM5LjkxMSBDIDk1LjI2MSAxNDUuNjMxIDg4LjYxNCAxNDkuMzQyIDgxLjUwMiAxNTMuMzYxIEMgNzMuOTI3IDE1Ny44NDUgNjYuMDQyIDE2Mi4xNzMgNTkuNzA0IDE2OS4yODUgQyA1OC43NzYgMTcwLjM2NyA1OC4wMDMgMTcxLjI5NSA1Ny4yMyAxNzIuMzc3IEMgNTEuOTc0IDE3OS4xNzkgNDcuOTU0IDE4Ny4wNjQgNDUuNjM1IDE5Ni4xODUgQyA0My45MzUgMjAyLjk4NyA0My42MjYgMjA5LjYzNSA0My40NzEgMjE0Ljg5MSBDIDQzLjQ3MSAyMTYuMjgzIDQzLjQ3MSAyMTcuOTgzIDQzLjQ3MSAyMTkuMzc1IEMgNDMuNDcxIDIxOS44MzggNDMuNDcxIDIyMC40NTcgNDMuNDcxIDIyMC45MjEgQyA0MC4yMjQgMjE4LjYwMiAzNi4wNSAyMTQuODkxIDM0LjA0MSAyMTIuNTcyIEMgMjguMzIgMjA1LjkyNSAyMy41MjggMTk5LjQzMSAyMi40NDYgMTg0LjEyNiBDIDIyLjI5MSAxODEuNjUzIDIyLjI5MSAxNzkuMzM0IDIyLjI5MSAxNzcuMDE1IEMgMjIuNiAxNzIuMzc3IDI0LjQ1NSAxNjUuNDIgMjUuODQ3IDE2MC40NzMgQyAyNi45MjkgMTU4LjMwOCAyOC4xNjYgMTU1LjY4IDI5Ljg2NiAxNTQuNTk4IEMgMzAuOTQ4IDE1NC4xMzQgMzQuODEzIDE1NC4xMzQgMzYuODIzIDE1NC4xMzQgQyAzOC4wNiAxNTQuMTM0IDM5LjI5NyAxNTQuMTM0IDQwLjM3OSAxNTQuMTM0IEMgNTUuNTMgMTUzLjA1MiA2NS4yNjkgMTQ3LjQ4NyA3NS4zMTggMTM5LjYwMiBMIDY5Ljc1MyAxMzIuNjQ1IEMgNTguOTMxIDE0MS4zMDMgNTEuMDQ2IDE0NC41NDkgMzkuNzYxIDE0NS4zMjIgQyAzOC45ODggMTQ1LjMyMiAzOC4wNiAxNDUuMzIyIDM2Ljk3OCAxNDUuMzIyIEMgMzUuNDMyIDE0NS4zMjIgMzMuNzMxIDE0NS4zMjIgMzIuMTg1IDE0NS4zMjIgQyAzNS44OTYgMTM3LjI4MyAzOC45ODggMTMwLjYzNSA0MC45OTcgMTIzLjY3OCBDIDU5LjA4NSAxMTUuMTc2IDc0LjU0NSAxMDAuNzk4IDg0LjkwMyA4My4wMTkgTCA3Ny4zMjggNzguNTM2IEMgNjkuMjg5IDkyLjYwNCA1Ny44NDkgMTA0LjE5OSA0NC4wODkgMTExLjkyOSBDIDQ1LjAxNyAxMDcuNiA0NS40ODEgMTAzLjExNyA0NS43OSA5Ny43MDYgQyA0NS45NDUgOTYuMTYgNDUuOTQ1IDk0LjQ1OSA0NS45NDUgOTIuOTEzIEMgNDUuOTQ1IDkyLjc1OSA0NS45NDUgOTIuNjA0IDQ1Ljk0NSA5Mi42MDQgQyA0NS45NDUgOTIuMjk1IDQ1Ljk0NSA5MS42NzcgNDUuOTQ1IDkxLjM2NyBDIDQ1Ljk0NSA4Ny45NjYgNDYuMjU0IDg0LjI1NiA0OC4xMDkgODEuNzgyIEMgNDkuMTkxIDgwLjM5MSA1MC40MjggNzkgNTEuODE5IDc3LjQ1NCBDIDUyLjEyOSA3Ni45OSA1Mi43NDcgNzYuNTI2IDUzLjA1NiA3Ni4wNjIgQyA1OS4yNCA2OS43MjQgNjMuNTY5IDYyLjE0OCA2Ni41MDYgNTMuNDkxIEwgNTguMDAzIDUwLjcwOCBDIDU1LjUzIDU4LjEyOSA1MS44MTkgNjQuNDY3IDQ2LjU2MyA2OS44NzggQyA0Ni4yNTQgNzAuMTg3IDQ1LjYzNSA3MC44MDYgNDUuMzI2IDcxLjExNSBDIDQ0Ljg2MiA3MS41NzkgNDQuMzk5IDcyLjA0MyA0My45MzUgNzIuNTA2IEMgNDEuOTI1IDYwLjkxMiAzOS4xNDIgNTEuMTcyIDM3LjkwNiA0Ny42MTYgQyAzNy41OTYgNDYuNjg5IDM3LjQ0MiA0Ni4yMjUgMzcuNDQyIDQ2LjIyNSBMIDI5LjA5MyA0OS4wMDggQyAyOS4wOTMgNDkuMDA4IDI5LjI0OCA0OS4zMTcgMjkuNDAzIDQ5LjkzNSBDIDMwLjk0OSA1NC41NzMgMzguMDYgNzguMDcyIDM2LjgyMyA5Ny4yNDIgQyAzNS40MzIgMTE2LjU2NyAzMS4xMDMgMTI2LjQ2MSAyMi40NDYgMTQ0LjcwNCBDIDIxLjM2NCAxNDMuNDY3IDIwLjEyNyAxNDIuMzg1IDE5LjA0NCAxNDEuNjEyIEMgMTguNzM1IDE0MS4zMDMgMTguMTE3IDE0MC44MzkgMTcuOTYyIDE0MC42ODQgQyAxNy4xODkgMTM5Ljc1NyAxNi40MTYgMTM4Ljk4NCAxNS43OTggMTM3LjkwMSBDIDEzLjYzNCAxMzQuNSAxMi41NTEgMTMwLjQ4MSAxMi43MDYgMTI2LjE1MiBDIDEyLjg2MSAxMjEuMjA1IDE0LjcxNiAxMTYuNzIxIDE4LjI3MSAxMTIuMzkzIEMgMTguNzM1IDExMS42MiAxOS41MDggMTExLjAwMSAyMC40MzYgMTEwLjA3NCBDIDI0LjQ1NSAxMDUuNzQ1IDMyLjgwNCA5Ny4wODggMjYuNDY1IDg1LjY0NyBDIDI0LjMwMSA4MS45MzcgMjEuNjczIDc5LjMwOSAxOS4xOTkgNzYuOTkgQyAxNy45NjIgNzUuOTA4IDE2Ljg4IDc0LjY3MSAxNS45NTIgNzMuNzQzIEMgMTIuNzA2IDY5Ljg3OCAxMC42OTYgNjYuNDc3IDkuMzA1IDYzLjA3NiBDIDguMjIzIDYwLjQ0OCA3LjkxMyA1Ny44MiA4LjIyMyA1NS4xOTEgQyA4LjM3NyA1Mi40MDkgOS40NTkgNDkuNjI2IDExLjAwNSA0Ny4xNTIgQyAxMS43NzggNDYuMjI1IDEyLjU1MSA0NS40NTIgMTMuNDc5IDQ0LjUyNCBDIDE1LjE4IDQzLjEzMyAxNy40OTkgNDIuMDUxIDIwLjI4MSA0MC45NjggQyAzMC4xNzYgMzcuMjU4IDMyLjY0OSAyNy44MjggMzQuNTA0IDIxLjY0NCBDIDM0Ljk2OCAxOS40NzkgMzUuNTg3IDE3LjMxNSAzNi4yMDUgMTYuMDc4IEMgMzcuNDQyIDEzLjc1OSAzOC45ODggMTIuMDU5IDQxLjMwNyAxMC45NzYgQyA0My42MjYgOS43NCA0Ni40MDggOC45NjcgNDguODgyIDguOTY3IEMgNTAuMjczIDguOTY3IDUxLjY2NSA5LjEyMSA1Mi45MDEgOS43NCBDIDU2LjE0OCAxMC44MjIgNTkuNTQ5IDEzLjYwNSA2MS4wOTUgMTYuODUxIEMgNjMuMTA1IDIwLjU2MiA2My4yNiAyNi4xMjcgNjMuMjYgMzEuNTM4IEMgNjMuMjYgMzIuNzc1IDYzLjI2IDMzLjg1NyA2My4yNiAzNS4wOTQgQyA2My4yNiAzNi40ODUgNjMuNDE0IDM3LjcyMiA2My40MTQgMzguOTU5IEMgNjMuODc4IDQzLjkwNiA2NS41NzkgNDcuNDYyIDY5Ljc1MyA0OS42MjYgQyA3Mi4yMjYgNTAuODYzIDc1LjQ3MyA1MS43OSA3OS45NTYgNTIuMjU0IEMgNzkuOTU2IDUyLjI1NCA3OS45NTYgNTIuMjU0IDgwLjExMSA1Mi4yNTQgQyA4MC44ODQgNTIuMjU0IDgxLjUwMiA1Mi40MDkgODIuMjc1IDUyLjQwOSBDIDg1LjY3NiA1Mi43MTggODcuOTk1IDUzLjggODkuMjMyIDU0LjU3MyBDIDkwLjAwNSA1NC44ODIgOTAuMzE0IDU1LjM0NiA5MC42MjMgNTUuNTAxIEwgOTAuNjIzIDU1LjY1NSBMIDkxLjA4NyA1Ni4xMTkgQyA5My4wOTcgNTguMTI5IDk0LjQ4OCA2MC43NTcgOTUuMTA3IDYzLjU0IEMgOTUuNTcxIDY1Ljg1OSA5NS41NzEgNjguMzMyIDk1LjEwNyA3MC40OTcgQyA5NC43OTggNzEuODg4IDk0LjE3OSA3My41ODkgOTMuNzE1IDc1LjEzNSBDIDkyLjc4OCA3Ny45MTcgOTEuNzA2IDgxLjAwOSA5MS4yNDIgODQuNDExIEMgOTAuMDA1IDkyLjQ1IDkxLjM5NiA5OS44NyA5Ni4wMzQgMTA3Ljc1NSBDIDk2LjgwNyAxMDkuMTQ2IDk3LjU4IDExMC4zODMgOTguMzUzIDExMS42MiBDIDEwMS40NDUgMTE2LjU2NyAxMDQuMzgzIDEyMS4yMDUgMTA0LjIyOCAxMjUuNjg4IEMgMTA1LjE1NiAxMzAuNjM1IDEwMy4xNDYgMTM1Ljg5MiA5OS43NDUgMTM5LjkxMSBaIiBmaWxsPSIjMTRDNTYwIj48L3BhdGg+CiAgPC9nPgo8L3N2Zz4=\" alt=\"\" style={{\n position: 'absolute', right: '-8%', top: '-6%', width: 460, opacity: 0.04,\n pointerEvents: 'none'\n }} \/>\n\n <div className=\"sp-container\" style={{ maxWidth: 1280, margin: '0 auto', padding: '0 32px', position: 'relative' }}>\n <div className=\"sp-hero-grid\" style={{ display: 'grid', gridTemplateColumns: '1fr 560px', gap: 56, alignItems: 'center' }}>\n\n {\/* Left: copy *\/}\n <div>\n <div style={{\n display: 'inline-flex', alignItems: 'center', gap: 8,\n padding: '7px 16px', borderRadius: 50,\n background: '#fff', border: '1px solid #C5FFCA',\n fontSize: 13, fontWeight: 600, color: SGD\n }}>\n <span style={{ width: 7, height: 7, borderRadius: '50%', background: SG }} \/>\n N\u1ec1n t\u1ea3ng h\u1ee3p t\u00e1c b\u1ea3o hi\u1ec3m c\u00f4ng ngh\u1ec7\n <\/div>\n\n <h1 className=\"sp-hero-h1\" style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 60, lineHeight: 1.05, letterSpacing: '-0.03em',\n color: '#0A1530', margin: '20px 0 0'\n }}>\n C\u1ed9ng t\u00e1c vi\u00ean<br \/><span style={{ color: SG }}>b\u1ea3o hi\u1ec3m 5.0<\/span>\n <\/h1>\n\n <p style={{\n marginTop: 20, fontSize: 17, lineHeight: 1.6,\n color: '#414941', maxWidth: 480\n }}>\n H\u1ee3p t\u00e1c c\u00f9ng m\u1ea1ng l\u01b0\u1edbi CTV b\u1ea3o hi\u1ec3m h\u00e0ng \u0111\u1ea7u Vi\u1ec7t Nam \u2014 kh\u00f4ng c\u1ea7n v\u1ed1n,\n kh\u00f4ng r\u00e0ng bu\u1ed9c th\u1eddi gian, th\u00f9 lao minh b\u1ea1ch chi tr\u1ea3 h\u00e0ng th\u00e1ng.\n <\/p>\n\n <div style={{ display: 'flex', alignItems: 'center', gap: 20, marginTop: 32, flexWrap: 'wrap' }}>\n <a href={REG_URL} target=\"_blank\" rel=\"noopener\" style={{\n background: SG, color: '#fff',\n padding: '15px 28px', borderRadius: 8, border: 'none',\n fontFamily: 'inherit', fontWeight: 700, fontSize: 16,\n boxShadow: '0 8px 20px -6px rgba(0,138,64,0.4)',\n display: 'inline-flex', alignItems: 'center', gap: 10,\n textDecoration: 'none', transition: 'background 150ms, transform 150ms'\n }}\n onMouseEnter={(e) => {e.currentTarget.style.background = SGD;e.currentTarget.style.transform = 'translateY(-1px)';}}\n onMouseLeave={(e) => {e.currentTarget.style.background = SG;e.currentTarget.style.transform = 'translateY(0)';}}>\n \n \u0110\u0103ng k\u00fd tr\u1edf th\u00e0nh CTV <i className=\"ri-arrow-right-line\" style={{ fontSize: 18 }}><\/i>\n <\/a>\n <a href=\"#how\" style={{\n fontSize: 15, fontWeight: 600, color: SN, textDecoration: 'none',\n display: 'inline-flex', alignItems: 'center', gap: 6,\n borderBottom: '1px solid transparent', paddingBottom: 2,\n transition: 'border-color 150ms'\n }}\n onMouseEnter={(e) => e.currentTarget.style.borderBottomColor = SN}\n onMouseLeave={(e) => e.currentTarget.style.borderBottomColor = 'transparent'}>\n \n T\u00ecm hi\u1ec3u quy tr\u00ecnh\n <\/a>\n <\/div>\n\n {\/* Trust stat row *\/}\n <div className=\"sp-trust-row\" style={{\n display: 'flex', gap: 36, marginTop: 44, paddingTop: 28,\n borderTop: '1px solid rgba(10,21,48,0.1)', flexWrap: 'wrap'\n }}>\n {[\n { v: '15+', l: 'Nh\u00e0 b\u1ea3o hi\u1ec3m' },\n { v: '60s', l: 'L\u00ean \u0111\u01a1n' },\n { v: 'T\u1ee9c th\u00ec', l: 'Nh\u1eadn th\u00f9 lao' }].\n map((s, i) =>\n <div key={i}>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 30, color: '#0A1530', letterSpacing: '-0.02em', lineHeight: 1 }}>{s.v}<\/div>\n <div style={{ fontSize: 13, color: '#5C5F5F', marginTop: 6 }}>{s.l}<\/div>\n <\/div>\n )}\n <\/div>\n <\/div>\n\n {\/* Right: photo with flat docked stat tiles *\/}\n <div className=\"sp-hero-visual sp-hero-tiles\" style={{ position: 'relative', height: 560, display: 'flex', justifyContent: 'center', alignItems: 'flex-end' }}>\n <div style={{\n position: 'absolute', inset: '6% 4%', borderRadius: 28,\n background: 'linear-gradient(160deg, #DFF3DE 0%, #C5FFCA 100%)'\n }} \/>\n <img decoding=\"async\" className=\"sp-hero-img\" src=\"https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/07\/22081951\/saladin-pro-hero-agent.png\" alt=\"Saladin Pro CTV c\u1ea7m \u0111i\u1ec7n tho\u1ea1i\"\n style={{\n position: 'relative', zIndex: 2,\n height: 500, width: 'auto', objectFit: 'contain', marginBottom: 60,\n filter: 'drop-shadow(0 20px 28px rgba(0,57,22,0.16))',\n WebkitMaskImage: 'linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0) 88%)',\n maskImage: 'linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0) 88%)'\n }} \/>\n\n <StatTile\n style={{ top: 24, left: -20 }}\n iconBg=\"linear-gradient(135deg, #14C560 0%, #008A40 100%)\"\n icon=\"ri-percent-fill\"\n prefix=\"L\u00ean \u0111\u1ebfn\"\n value=\"65%\"\n valueColor={SN}\n label=\"Th\u00f9 lao m\u1ed7i \u0111\u01a1n\" \/>\n \n <StatTile\n style={{ bottom: 96, right: -30 }}\n iconBg=\"linear-gradient(135deg, #2A4DAE 0%, #1E3888 100%)\"\n icon=\"ri-team-fill\"\n value=\"20.000+\"\n valueColor={SN}\n label=\"CTV h\u00e0ng \u0111\u1ea7u Vi\u1ec7t Nam\" \/>\n \n <StatTile\n style={{ bottom: 10, left: 10 }}\n iconBg=\"linear-gradient(135deg, #FFD56B 0%, #E89E0A 100%)\"\n icon=\"ri-shield-check-fill\"\n iconColor=\"#1E3888\"\n value=\"0\u20ab\"\n valueColor={SN}\n label=\"Ph\u00ed tham gia\" \/>\n \n <\/div>\n <\/div>\n <\/div>\n <\/section>);\n\n}\n\nObject.assign(window, { ProHeader, ProHero, FloatCard, IconBadge, StatTile });\n\/\/ Saladin Pro landing \u2014 Body sections\n\/\/ Exports: PartnersStrip, WhySection, IncomeSection, HowItWorks, AudienceSection, DashboardSection, FaqSection, FinalCta\n\nconst Sg = '#14C560';\nconst Sgd = '#008A40';\nconst Sgl = '#C5FFCA';\nconst Sn = '#1E3888';\n\n\/\/ \u2500\u2500\u2500 Container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction C({ children, style }) {\n return <div className=\"sp-container\" style={{ maxWidth: 1180, margin: '0 auto', padding: '0 32px', ...(style || {}) }}>{children}<\/div>;\n}\n\n\/\/ \u2500\u2500\u2500 Section title \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction SectionTitle({ children, eyebrow, light, align = 'center', eyebrowColor }) {\n return (\n <div style={{ textAlign: align, marginBottom: 40 }}>\n {eyebrow && <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: eyebrowColor || (light ? Sgl : Sgd), marginBottom: 10 }}>{eyebrow}<\/div>}\n <h2 style={{\n fontFamily: 'var(--font-display)', fontWeight: 700, letterSpacing: '-0.025em',\n fontSize: 40, lineHeight: 1.1, color: light ? '#fff' : '#0E1F11', margin: 0, textWrap: 'balance'\n }}>{children}<\/h2>\n <\/div>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Partners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction PartnersStrip() {\n const insurers = [\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/baoviet_logo.png', href: 'https:\/\/www.saladin.vn\/doi-tac\/bao-viet', name: 'B\u1ea3o Vi\u1ec7t' },\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/pvi.png', href: 'https:\/\/www.saladin.vn\/doi-tac\/pvi', name: 'PVI' },\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/baominh_logo.png', href: 'https:\/\/www.saladin.vn\/doi-tac\/bao-minh', name: 'B\u1ea3o Minh' },\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/msig_logo.png', href: 'https:\/\/www.saladin.vn\/doi-tac\/msig', name: 'MSIG' },\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/liberty_logo.png', href: 'https:\/\/www.saladin.vn\/doi-tac\/liberty', name: 'Liberty' },\n { logo: 'data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAALYAAAC1CAYAAADyZAWqAAAACXBIWXMAAAsSAAALEgHS3X78AAAY90lEQVR4nO2dXUwbZ7rH\/\/moaQ2Y6rggQbNgbugHNrmgghAJFlBLcoEjnbRJUJdIPaWbo1USpI2UdiOoNquCcjaREimlZ7VJWfUIuktBzUWciyZdkQikpI6Wi9imaTgXNmkLR04txTamxfngXDjvZMaeLxvP6\/Hw\/qRI7XiYeWfmP888z\/N+PBtWV1evAfg1GAzj0LYx1y1gMLSACZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSJiwGYaECZthSDbnugH5jMcfwv3YCgBg2rcIAKgsK0ZVWRG2Vr+AkkJTLpu3rmHCVsDjD2E+GIXHH8Itfwjh2Apu+UOILMcBAA6bFS32cjgbbUzMOoIJm8d8MIop3yI8\/p\/g8YcwPbsoul9laRH6u+rhbLShqqyYcisZaljXwg7H4rjoDmDat4Ap3wLu3luS3b+5thx9XfVosVdQaiEjU9adsOeDUbjcAYxMzsEbCKn6Gybo\/GNdCDsTMQMJl+NcbysTdB5iaGETMV+6GUj7b\/v21aOvqz77jWJQwXDCDsfiGHJ5MTJ5R9FnFiNTK+3xh+ByBzDlW8D07CJ7MXKMYYQ9H4xicGwGF90BLhWXLs215Rg\/tkN1ym4+GMWQywuXO5DRS8TQjrwXNhH06NW5NR2nu60G53pbVe3r8Ycw5PKu+ZwM7chbYROXY\/CLmTUfS63bEI7FcXT4OhN0HpCXwh5yeTEwNpOxy8Hnr4dbsb+9RnG\/kck5HB2+npVzMrQnr4Tt8Yfw27PX0krZyXHy3SZFUYdjcfz27LWMMiuM3JE3wh4cm8mK20HobqvBIadDdp9sv0gMeuhe2FqIq7PBphgoevwhdPS7mOuRp+ha2Fr4tQ6bFeeZqA2PLoWtVfbBYjbhfG+rbJ6aidoY6E7Y4VgcHf0uTfza\/q561FVbJX9nojYOuhK2xx\/C3hOXNenFa64tlw0WSfaDidoY6EbYWlpLi9mkGCyy7Iex0MVkXq1dgMNOh+xMlyGXl+WpDUbOLbbWoq4sLZLtLp8PRjEwlr38eDZ5cMMNANj0qy3YuOXFlN8f\/\/AjVsMRbKp9RbD90extPI5EVJ1jc+0r2GCxqGrLwyft4f62qRHPNDUKtq1MXMAzTY2i7aVJToVNI1jr63pN9vcDOvKrH9xwIz5xAQ9uuPH4hx9Tft+8rQGmHW\/AtPMNbLAUI7LnN9i45UVYJj4X7Lcy8SVWxi9gNRpVPGfx+GiKOAmPZm\/jl+HPsDJxgdu26dWXscFiwWokgp\/PfIwNxcUw7XwDz+x4HauRKGJHPkDx+Oj6FXY4FsfeE5c1FVVzbblsl7nLHZCcsEuTR7O3ETs+gIff3OS2mTpeR8F77+CZpkasRiJ4cMONXz79DMt\/GsTynwa5\/cQEZD7eD\/Pxfm5\/MYo+\/W+Ydrwh2abl4wP4Zfh\/BO0x\/6lfcL7HP\/yI5T8OYGXigkD8eiBnPnZHv0vzMczd7S\/J\/n50+Lqm51fDysQFhHfuEoja\/Mc+FA3\/hbOkGywWmHa8AcvE5yg8\/WfVxzbtFBeuqeN1WVHHjnwgEPXmbQ0oGv5Lyku0ccuLKBr+S1ptokVOhH10+LrmGYjK0iJZaz0yOZfzyQGPZm8jduQDwbbN2xrw7HvvSP5NwZ7dqoUk5Q4k++R8Ykc+SLG+RWdOyp6nYM9umP\/Yp6pNtKAubJc7gE8u+TQ\/j5JvPTj2L83boET0vd+lbCs83q\/4dwV7duO53x\/Oenvil79OEbWp43VV\/vKz772Dzdsast6mTKEqbNIJojUWswm7Gm2Sv+vBWv98+mxKgLhxy4uy1pTPc0d6sx6gLR9P9cc3SwSWYjx3pDebzVkTVIVNq2dvV6NNdjzI6OQdzdugRPzy1ynbpLITUjzb8052GoOEry+WiVH7ogGJ9hfs2Y2NKtKHWkMtKzLlW6DWCdIt41vLLV1Gi9VIBI++\/S5le7oW+Nn33pH1x9MhOUdNSPdl00sgSc1iH6DgggCJoFFu6YQRHVjrh7O3Rben89nPNg9nv83ZubWAirBp+rRK64G43AEq7ZBD7JOfa8S+IPkMFWHTzEA4ZYJGjz+U86ARAB5\/\/0Oum6CKTa++nOsmZIzmPjbtDIScsPXghgDAxl9tUb3vaiQi6bokIzWmJFPy2YprLmyaGYjm2nLZ36d8ue8+B6SDxFWRgUuPv\/8RP58+K+iZlDrmc0d6UbBnd0Zt2vTqy3kt5GQ0dUXmg1GqGQg5\/zoci+tmvPVmiRTaIxHLvKn2FVgmPse\/ff+\/MHW8Lvp3haf\/jOdvXMtY1ACwaYv4V0TsZcsHNBX2kMur5eFTkJv2dcv\/E8WWyLPBYhHtpRMTNh\/TXnHhppuSE0MqI\/NAIg2odzQVNu0MhJywp3XihhAK9r6Zsk1JRFIDl7LhVxfs3Y0NxamTMR5c\/mdax1mNRHRh5TUT9nwwSjVotJhNsrNkbvn14YYQCvbsTsk6rEajoj2SNNhgsYh29sS\/+lq1UFcjEUT2\/Ea0a542mgmbdqC2VcZaA4kXTW8UnT6ZYiV\/+fQzyf3TtYRS+0ttf+5Ir+jLpkaoj3\/4EZE9v8Gjb7\/DMzvEYwGaaCbsad+CVocWRal6l14CRz4kMOSL++E3N1OGshLiaboFUq6N3HEsE5+niHtl4gKWen4n2rG0Gong59NnEe5w4tG336Hw9J9lx3rTQrN0H20Lma9l6TbVvoKSKy4s\/f59LqW3MnEBj77\/AYXH+7lBSKuRCFbGv0z5+41bXsRqJCKYt7gycQGPZr\/Fyrj4rBZiXZ9pakTB3jcFPvoGiwWWic+xfHxQMIQ1fuWfiF\/5JzZva+Bm9Tycvc21mUw6yEYgmw00EzbtgUZyo\/mmKH890oXMWyRzHuNffY2H39xEeOcu0f2JuEw73hAdffdo9ls8nL2tODLvwQ13wromBZ8bLJaE5d2zGyuffob4lacW\/uE3NwU59U2vvoxn3\/uPNaUatWDD6urqNQC\/zvaBaYtJripuOBannu6rKite01dEbKb5RoslrWGk2USsPWpnuOeANs2EzWDkkDZdLJjDYGQbJmyGIWHCZhgSJmyGIWHCZhgSTfLY88EoRifp1kLsbq+RTK\/loj3N9nLJYbRTvgXqg7L0dn\/k2pMNNBH284UFWa3wpRapVVXDsTj19vShXlLY075F6u1ptpdLCsnjD1Fvj9xMp2ygiStSUmiCxayuHjkN5IazrhfkrKMnByMftX4mmvnYSqPtso0eR+\/pCTlh34+tUGyJ8hS+bKCZsJWWQcg2SsKmcTP1isMmb2RoW2waX1DNhK21D5WM0kSCfB39lw2Urp32JAwa2tBM2HXVVqp+dmQ5Lmu117OfLecWhmNxqhUdLGYTla+5pnlsuRVPtUDuk7qehd1sl3bDaI96pKUJTYUtV1dRC+SETdvn1xNbq1+Q\/C0X+XQaaCrsumorKkuLtDyFAKUx4OsxgHTYrLqZhKG0YGg20bxLXamyQDZRmrVDO6DVAy0ybghAd6YTTS1oLuz97TVUrbbcWibr0R3ZL1Ngiua6L0o1gbINlUFQNN9UuYdF2zXKNZWlRbJBM01h09QAQEnYNK22ks8oZ8GMhpLrdZGSsGlba4DisNVzva1UznP33pKsuGlF5XpALivlcgeo5a9pPXs+1ITdYq9AZ4ONyrnkhmBWlRVTa0cuaa6VHs0H0HNDOhtsOYltqE40ON\/bSqU38qI7gHBM2hodcto1b0OukbPW4Vgco1e1H39tMZtwPgfWGqAs7JJCOhcaWY7L+o8t9gpDB5GVpUW6qOwwfqxDNoeuJdSnhjkbbTjYqb3FVKp7QztKp4nStdFYt7xvn\/RECxrkZM7jqZ7tmvcC3r23hBEZX3t\/e40heyIdNmvOa8g315ZLzmaiRc4m844f26E4TnitKFvt3N58LTjV0yT7u9YV3Bw2K8aP7dD0HGrImbBLCk24MuDUNJhUstot9gp0txkn\/dfdVqNQvFVba20xJ55prvxqPjldfoGGuJUs1Kme7bqan5kpFrMJp3q2S\/4ejsU1tdZ6EjWgg3VF6qqtmor77r0lDI5Jz8CmlanRmvO9rbKiGnJ5NbPWRNR6GvOec2EDT8Wtlc\/9scsrO7uGVqZGKw522hUrEmu1vILDZtWdqAGdCBvQVtyR5TgOnL0mu8+pnu2aB7Na0FxbLuuCAMBvFa49U\/QqakBHwgae+txaBHTTs4uK+VstvxpaoCYDMTg2o0n9ne62Gl351MnoSthAQtznelvRty\/7qbj3\/3ZDdvoY8bfzIZhUE6xN+RY0cUH69tXjnIJPn2t0J2xCX1c9vvqoM+si23visuw4Eq2D2WxQWVqkKOpwLI69J65k9bwWswlffdSZF\/l\/3QobSOSZ75x7O6uj8e7eW0JHv0t2H62D2bXgsFnhPvOWrF8bjsXR0e\/K6rDUzgYb7px7O29mIela2EDCPRg\/1oEv\/tCRNSvqDYQUg0kibj11u3c22FT5tUeHr2fNr7aYTfjiDx05HdCUCboXNsHZmLAY2QosR6\/OKYq7pNCEywNOTfz9dOnbV69KXAfOXsvakNTuthrcOfd2Xk6C1qzOoxaQwLK7vQaDYzNrnmFNBKA0w6Ovqx7N9nIcOHuNan14IOF6nO9tVZVSy5aoySCmfHE7xMgbi82nxV6BywNO\/PVw65rHVaux3OSc3517G3376qkElhazCSffbYL7zJvURF1ZWoS\/Hm7F5QFnXosayDOLncz+9hrsb6\/ByOQcBsf+lbE1Hb06h\/uxuGK3NJCw3oecDgy5vPjY5c36vMHExNeXcMjpUOXTkkBxLT51ZWkR+rpeoz7hVksMVcB0rQJP57PPP6fLHcClmwHB9r599ZJpscGxmZT8cmeDDc5GW1ri8vhD2HvicsbXa0RBP8GYlXmnfAsYcvlSxKYGMkou3YcdjsUx5VuAxx\/ClG8B3e0vSR5jZHIOo5N30GKvQF21NaPgbMjlxcDYTEZfjM4GGw457XnvbshgTGETSNGgkck7aVu1zgYbTvU06W5d7flgFAfOXks7cCYujtZFjXSCsYXNx+MPYWTyDlzugGqRW8wmHHY6dNPTNjg2k5ZfbzGbsKvRhu52+QkIBmT9CJsPEfmUb1FV0JVrXzSd2IHMUHc25mY9D52wPoXNZz4YxZRvEdO+BUz5FmTFU1lahENOB\/a3v6R5L1w4FseQy6voRpGleZvtFWiRKXm3zmDCTmY+GIXHH+KCwFv+kOinn2QxdjXasiZyEoCOTM6JBr4Wswlbq62oq7airvoFJmRpmLDVEI7Fccv\/Ezz+ECc+4Ona0s215U+sZkJoasU2H4xiPhjFtG8xUa2Xdzwg0SlUUmhCXbU1reMymLCzAhE+HyUhutwBgaXfWv1CXg0y0jlM2AxD0paXY0UYDCWYsBmGhAmbYUiYsBmGhAmbYUiYsBmGhAmbYUiYsBmGhAmbYUiYsBmGhAmbYUiYsBmGhAmbYUiYsBmGhAmbYUiYsBmGhAmbYUiYsBmGhAlbhESxzxm43IFcN4WRIZqtturxh7gybOPHOvJqhjV\/9dKT7zbhkNOR4xYZi70nriAcW0GLvUKzVbY0m8z78oG\/434sjshyHBazCe4zb+pa3GSBGkJdtRX7\/usKDnbaFeso6gWXO8BVRct0sUst4bePLNX2zWl163+nSZtmFtt95i3cj63glf\/8h1anyCp7T1zm1vVw2KyYD0ZhMZvQ3\/VajlumnhZ7BQae1HXUmzEhX3Cy+NDJd5sQjsUxH4xqUgBVMx+7pNCEKd8iV49QLzdYjCGXF9Ozi+hsSJSe9gZCKCk04f8+fyev1vogBWAdNisiy9kvh7cWiKhJPZ8hlxeHnA7NviqKrghZipesfkSoq7aixV4h2bAdSSXnLg84JRtB1ou+9eQztfXJZ1RpjTz+OZKPL\/bb0eHr3KdQbJsYUvud6tkusDTkGghiDy15HzHqqq0C18flDsDlDnC14ImLIbXgZPI5xNbp5u9TUliA8WMd3G8efwhHh6+LXqPU+VzuAMKxFcE19He9Jnh2Su3inzf5Hsj9JoGyKzIfjIpWd52eXcQnl3zobqtJKU7k8YdS1m92uQMpD1qqzMT07CKmZxcxMjknG3jKrREt9ptYu8S2iZG8n8sdEDz0IZdXcB1iL\/3dYFT1utZy9+aTSz50NthES4uMTt4RnON+LJ4i7OR2EOuZ2H+F++0+T6zJyFVTmJ5dTCk1otQu\/nmTkftNirRckcrSIvTtq8fBTvvTBl+dS0mLjYhYpWSLDyT8WvLgLGYTDnbaBeXuvIEQ1c+pw2ZFc2254B\/hflI134u8a54PRtUtR1xWzB2XXxy1srSI205eFr6oyb3hF3K9dDOAgbF\/CY4fjsVTBOANhDhrL8XA2IxsteJkPP4QOvpdnKgtZhOaa8vR3VbDXRvfGEm1K51zpktawWNVWbEgPfPJJR+AxIXyrdOUL3ERFrMJzxeacPfeElzugOATMjI5x10s8cPJQ+1ur8HODy8BSNyAkck5KmtTn+ppkvzEJwuXPJiSQpPqfDcpBgUkXnRyjfvbXxLc15HJOe58laVFcJ95i7N+Qy4v3v\/bDQCJ+3\/I6eBExH\/ZKkuLOOFN+Raxv106xoksJzJCalNvR4evc0Ggw2ZVLKrKb5fDZuWu7aI7oNlzzSh4TKw4+vQN5Iuab71a7BWcUO7eWxL4qHwxHHY6BJ\/1FnuFwDpNi1h7PUAeGLkXay3NR+CnHfuSfNVDTofgPKOTT0vg8e9Tsp8uBfkqDX4xo2jZgcTz5VtfNZWC+efv5708WnaApSXsW\/4QXj7wd5R3f8allE6+2yQQJb+xLfZyNPMsIN9F4d\/EZntqWeetvGOqueHmfz8n+JcJR4dvYEe\/i\/s3MplaN5H\/wiWCpji3lrXwq5X5yyj01VPvDf88t3jGgrxoDlsiwCT1KC\/dDEh+9vlWenAsNZZKRvDcastVZY3IvUinXWslLWFHluOCYCGynLDc\/MYlW\/JdIi4KIHx4YsGhmNi1xhsIcYHr9Owi7j55iPzr21pt5aycx\/+TQMBalMYQuzfPFxZw\/02yEVO+Bc49IC\/DLhUvWou9grue0atzmA\/KlwOZ9qUXxLncgYzatVbS8rEdNitO9TRhPrjE1US5dDPA+Wd86wUgpeItCWSqyooFvhbZxifdG5hc71wsk6NEd5uwohZ5uZLXvm6xVySEf2+Js+qdDdmrbMDH4w+lpNz42QrSXv6XkvTw8a2rWFaK0NdVz\/n7g0kBaTL8tiQH1GLwhZtuu9ZCWsJ+vtDEWaWqsiLuZkz5FtCH+pS3TyxF43IHuICHCHvat5hi7fjHUtO5kxz4ZCRsldW1mu3lwBeJ\/+a7IdnqhOK\/9FO+hRRh80VMfuNvu3tvKSUNd9EdgJSDRqw2eVnl4F+jNxASffGk2qq2XckvDP8rUsL7WsmRcc+jWKcG\/yK622oS1Wn31Qv8UmLh+G\/pxy6v4Hj8jAmQEJyeaLFXpNRTT64HoyYukIL\/qR4YmxHcm6PD1wXicDba4PGHuG0kJUv+kXZGluOywVpyX4QUddVWQaqyo98lMELhWJxrr9p2TfkWBAbFGwhxx0wewyMWc4iRlsWeD0YxODYjqJcCJHqRAGFap6+rnnvQ88EoZ9mIO7K\/vYbr1IgsJzojdjXacD\/JnelsoFfWjXyB+Hz1UadogNNir+DamZy3BZBxGWggkfkg1cIiy3FsO\/IlmmvLcT8WF8QmBzvtqCorFjx4Z6NN8PW65Q9x7ZzyLUh+9qvKitHdVoPRq6kBczLne1ux7ciXABLC3PnhJYFQHTYr3GfeFAg+uV3zwSh3Lpc7gBZ7heD8Oz+8hObacswHo4J8uVq3JS2LfffeEga\/mBGI+mCnHfvba+DhVddKftDEpyaQIJKMawASN2T06lyKqM+rtCRawreYxO\/mWw6+hU225JlQUmjC+LEdgrTe9OxiiqhJSo+fvUk2AnwhKKXX+rrqVbW\/rtqKrz7qFLQvshznnj9pZ7rtOtWzXaCTZNfoVM921e6eosWuKivGwU674OGSKlZ8v\/J+bIUL4MR8rv6ueu4Yzz8JskoKEyPQRibnMO1b4D7fVWXFqvzd5IBR6bfu9pdSjim2jU9VWTFgB\/pQ\/\/T\/kehUIde5tfoFbv9TPdu5bIocVWXFXBvFMkB11Va4z7yFi0\/GipDsR121VXBuIPFikZcr2aLtarThblB4L5rt5dz1JLfpfG8r95zkRNRir8B3597GyOQcPE8qqpH21T25H3LtcjbaUp4RGcRFisvyr5nfEaUGVlyJYURYcSWGMWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhgSJmyGIWHCZhiS\/wekpekPGYBWgAAAAABJRU5ErkJggg==', href: 'https:\/\/www.saladin.vn\/doi-tac\/gic', name: 'GIC' },\n { logo: 'https:\/\/cdn.saladin.vn\/insurance-provider\/pjico\/logo\/stacked.svg', href: 'https:\/\/www.saladin.vn\/doi-tac\/pjico', name: 'PJICO' },\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/vbi.png', href: 'https:\/\/www.saladin.vn\/doi-tac\/vbi', name: 'VBI' },\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/pti.png', href: 'https:\/\/www.saladin.vn\/doi-tac\/pti', name: 'PTI' },\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/mic.png', href: 'https:\/\/www.saladin.vn\/doi-tac\/mic', name: 'MIC' },\n { logo: 'https:\/\/www.saladin.vn\/image\/partners\/aaa.jpg', href: 'https:\/\/www.saladin.vn\/doi-tac\/aaa', name: 'AAA' }];\n\n const HAIRLINE = 'rgba(26,28,30,0.08)';\n return (\n <section id=\"partners\" data-screen-label=\"02 Partners\" style={{ background: '#fff', padding: '88px 0 56px' }}>\n <C>\n {\/* Divider rule with centered eyebrow *\/}\n <div style={{\n display: 'flex', alignItems: 'center', gap: 14,\n fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase',\n color: '#5C5F5F', marginBottom: 28\n }}>\n <span style={{ flex: 1, height: 1, background: HAIRLINE }} \/>\n <span>H\u1ee3p t\u00e1c c\u00f9ng 15+ h\u00e3ng b\u1ea3o hi\u1ec3m h\u00e0ng \u0111\u1ea7u Vi\u1ec7t Nam<\/span>\n <span style={{ flex: 1, height: 1, background: HAIRLINE }} \/>\n <\/div>\n\n {\/* Logo grid *\/}\n <div className=\"sp-grid-6\" style={{\n display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)',\n gap: 1, background: HAIRLINE,\n border: `1px solid ${HAIRLINE}`, borderRadius: 16, overflow: 'hidden'\n }}>\n {insurers.map((p) =>\n <a key={p.name} href={p.href} target=\"_blank\" rel=\"noopener\" title={p.name} style={{\n background: '#fff', padding: '24px 16px',\n display: 'flex', alignItems: 'center', justifyContent: 'center',\n minHeight: 96, textDecoration: 'none',\n transition: 'background 200ms'\n }}\n onMouseEnter={(e) => e.currentTarget.style.background = '#FBFBF8'}\n onMouseLeave={(e) => e.currentTarget.style.background = '#fff'}>\n <img src={p.logo} alt={p.name} style={{\n maxHeight: 48, maxWidth: '100%', width: 'auto', objectFit: 'contain'\n }} \/>\n <\/a>\n )}\n <\/div>\n <\/C>\n <\/section>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Audience path split \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction AudiencePathSection() {\n const paths = [\n {\n key: 'insurance',\n title: 'D\u00e0nh cho Chuy\u00ean gia B\u1ea3o hi\u1ec3m',\n desc: 'M\u1edf r\u1ed9ng danh m\u1ee5c s\u1ea3n ph\u1ea9m v\u1edbi 15+ nh\u00e0 b\u1ea3o hi\u1ec3m, kh\u00f4ng gi\u1edbi h\u1ea1n c\u00f4ng ty hi\u1ec7n t\u1ea1i.',\n icon: 'custom-insurance',\n href: 'https:\/\/pro.saladin.vn\/cong-tac-vien\/danh-cho-chuyen-gia-bao-hiem\/',\n accent: 'linear-gradient(135deg, #2A4DAE 0%, #1E3888 100%)'\n },\n {\n key: 'sales',\n title: 'D\u00e0nh cho Chuy\u00ean gia Sales',\n desc: 'B\u1ed5 sung th\u00eam gi\u1ea3i ph\u00e1p b\u1ea3o hi\u1ec3m v\u00e0o h\u00e0nh tr\u00ecnh \u0111\u1ed3ng h\u00e0nh c\u00f9ng kh\u00e1ch h\u00e0ng v\u00e0 t\u1ea1o th\u00eam ngu\u1ed3n thu nh\u1eadp.',\n icon: 'custom-sales',\n href: 'https:\/\/pro.saladin.vn\/cong-tac-vien\/danh-cho-chuyen-gia-sales\/',\n accent: 'linear-gradient(135deg, #44E178 0%, #00A74F 100%)'\n }];\n\n return (\n <section data-screen-label=\"02b Audience Path\" style={{ background: '#F8FAFA', padding: '72px 0' }}>\n <C>\n <div style={{ textAlign: 'center', marginBottom: 36 }}>\n <h2 style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 32, letterSpacing: '-0.02em', color: '#0E1F11', margin: 0\n }}>B\u1ea1n thu\u1ed9c nh\u00f3m n\u00e0o?<\/h2>\n <p className=\"sp-path-lead\" style={{ marginTop: 28, marginBottom: 0, fontSize: 15, color: '#5C5F5F' }}>\n Ch\u1ecdn h\u01b0\u1edbng ph\u00f9 h\u1ee3p \u0111\u1ec3 xem l\u1ed9 tr\u00ecnh h\u1ee3p t\u00e1c d\u00e0nh ri\u00eang cho b\u1ea1n.\n <\/p>\n <\/div>\n <div className=\"sp-grid-2\" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>\n {paths.map((p) =>\n <a key={p.key} href={p.href} target=\"_blank\" rel=\"noopener\" style={{\n display: 'flex', alignItems: 'center', gap: 20,\n background: '#fff', borderRadius: 16, padding: '28px 26px',\n border: '1px solid #EFF1F1', textDecoration: 'none',\n boxShadow: '0 8px 20px -8px rgba(16,24,40,0.1)',\n transition: 'transform 200ms var(--easing-standard), box-shadow 200ms var(--easing-standard)'\n }}\n onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-3px)';e.currentTarget.style.boxShadow = '0 16px 28px -8px rgba(16,24,40,0.16)';}}\n onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = '0 8px 20px -8px rgba(16,24,40,0.1)';}}>\n \n <div style={{\n width: 56, height: 56, borderRadius: 14, background: p.accent, flexShrink: 0,\n display: 'grid', placeItems: 'center'\n }}>\n {p.icon === 'custom-insurance' ?\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n {\/* Two overlapping shields: existing insurer expertise + Saladin add-on *\/}\n <path d=\"M 9 4 L 17 7 L 17 16 C 17 21 13 24.5 9 26 C 5 24.5 1 21 1 16 L 1 7 Z\" fill=\"#94ADEC\" opacity=\"0.55\" transform=\"translate(1,1)\" \/>\n <path d=\"M 16 3 L 25 6.5 L 25 16.5 C 25 22 20.5 26 16 27.5 C 11.5 26 7 22 7 16.5 L 7 6.5 Z\" fill=\"#fff\" \/>\n <path d=\"M 16 3 L 25 6.5 L 25 16.5 C 25 22 20.5 26 16 27.5 Z\" fill=\"#C2D0F6\" \/>\n <path d=\"M 12 15.5 L 15 18.5 L 20.5 12\" stroke=\"#1E3888\" strokeWidth=\"2.2\" fill=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\" \/>\n <\/svg> :\n\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n {\/* Briefcase (sales) with a small insurance shield badge added on top *\/}\n <rect x=\"4\" y=\"12\" width=\"24\" height=\"15\" rx=\"3\" fill=\"#fff\" \/>\n <rect x=\"4\" y=\"12\" width=\"24\" height=\"6\" rx=\"3\" fill=\"#B7E8C4\" \/>\n <rect x=\"12\" y=\"8\" width=\"8\" height=\"5\" rx=\"1.5\" fill=\"none\" stroke=\"#fff\" strokeWidth=\"2\" \/>\n <circle cx=\"24\" cy=\"10\" r=\"7\" fill=\"#FFC53A\" stroke=\"#fff\" strokeWidth=\"1.6\" \/>\n <path d=\"M 24 6.5 L 27.5 8 L 27.5 10.5 C 27.5 12.3 25.9 13.6 24 14.2 C 22.1 13.6 20.5 12.3 20.5 10.5 L 20.5 8 Z\" fill=\"#00A74F\" \/>\n <\/svg>\n }\n <\/div>\n <div style={{ flex: 1 }}>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, color: '#0E1F11' }}>{p.title}<\/div>\n <div style={{ fontSize: 13.5, color: '#5C5F5F', marginTop: 4, lineHeight: 1.5 }}>{p.desc}<\/div>\n <\/div>\n <i className=\"ri-arrow-right-line\" style={{ fontSize: 22, color: '#5C5F5F', flexShrink: 0 }}><\/i>\n <\/a>\n )}\n <\/div>\n <div className=\"sp-grid-4\" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginTop: 16 }}>\n {[\n { title: 'Chuy\u00ean gia v\u1ec1 Xe', href: '#audience', bg: '#FFE8CC', fg: '#7A4300' },\n { title: 'Chuy\u00ean gia v\u1ec1 S\u1ee9c kh\u1ecfe', href: '#audience', bg: '#FFD9E1', fg: '#8A1F3D' },\n { title: 'Chuy\u00ean gia v\u1ec1 Du l\u1ecbch', href: '#audience', bg: '#D6EBFF', fg: '#0F3D73' },\n { title: 'Chuy\u00ean gia v\u1ec1 l\u0129nh v\u1ef1c Kh\u00e1c', href: '#audience', bg: '#E4E0FF', fg: '#3C2E82' }].\n map((t) =>\n <a key={t.title} href={t.href} style={{\n display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center',\n background: t.bg, borderRadius: 12, padding: '18px 14px', minHeight: 64,\n border: '1px solid rgba(0,0,0,0.04)', textDecoration: 'none',\n fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: t.fg,\n boxShadow: '0 6px 14px -8px rgba(16,24,40,0.1)',\n transition: 'transform 200ms var(--easing-standard), box-shadow 200ms var(--easing-standard)'\n }}\n onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.boxShadow = '0 12px 20px -8px rgba(16,24,40,0.18)';}}\n onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = '0 6px 14px -8px rgba(16,24,40,0.1)';}}>\n {t.title}<\/a>\n )}\n <\/div>\n <\/C>\n <\/section>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Why \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ 5 vertical cards alternating navy\/green. Title is always visible; on\n\/\/ hover, the illustration cross-fades to a description paragraph.\nfunction WhyCard({ tone, title, description, illustration }) {\n const fills = tone === 'navy' ?\n { bg: 'linear-gradient(180deg, #2A4DAE 0%, #1E3888 100%)', text: '#fff', sub: 'rgba(255,255,255,0.85)', glow: 'rgba(148,173,236,0.5)' } :\n { bg: 'linear-gradient(180deg, #44E178 0%, #00A74F 100%)', text: '#fff', sub: 'rgba(255,255,255,0.92)', glow: 'rgba(197,255,202,0.6)' };\n const [hover, setHover] = React.useState(false);\n return (\n <div\n onMouseEnter={() => setHover(true)}\n onMouseLeave={() => setHover(false)}\n style={{\n borderRadius: 16, background: fills.bg, padding: '24px 22px',\n color: fills.text, position: 'relative', overflow: 'hidden',\n display: 'flex', flexDirection: 'column', gap: 16, minHeight: 208,\n boxShadow: hover ?\n `0 24px 40px -10px rgba(16,24,40,0.32), 0 0 0 2px ${fills.glow}, 0 0 32px -4px ${fills.glow}` :\n '0 8px 18px -8px rgba(16,24,40,0.16)',\n transform: hover ? 'translateY(-6px) scale(1.02)' : 'translateY(0) scale(1)',\n transition: 'transform 260ms var(--easing-decelerate), box-shadow 260ms var(--easing-decelerate)',\n cursor: 'default'\n }}>\n {\/* Sheen sweep on hover *\/}\n <div aria-hidden=\"true\" style={{\n position: 'absolute', top: 0, left: hover ? '110%' : '-60%', width: '55%', height: '100%',\n background: 'linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%)',\n transform: 'skewX(-18deg)',\n transition: 'left 620ms var(--easing-decelerate)',\n pointerEvents: 'none'\n }} \/>\n {\/* Title *\/}\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.02em', lineHeight: 1.15, textWrap: 'balance', position: 'relative', zIndex: 1 }}>{title}<\/div>\n\n {\/* Body area \u2014 illustration \u21c6 description cross-fade *\/}\n <div style={{ position: 'relative', flex: 1, minHeight: 64, zIndex: 1 }}>\n {\/* Illustration layer *\/}\n <div style={{\n position: 'absolute', inset: 0,\n display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-start',\n opacity: hover ? 0 : 1,\n transform: hover ? 'translateY(6px) scale(0.9) rotate(-4deg)' : 'translateY(0) scale(1) rotate(0deg)',\n transition: 'opacity 220ms var(--easing-standard), transform 280ms var(--easing-standard)',\n pointerEvents: 'none'\n }}>\n <div style={{ width: 64, height: 64, transition: 'transform 280ms var(--easing-decelerate)', transform: hover ? 'none' : 'none' }}>{illustration}<\/div>\n <\/div>\n {\/* Description layer *\/}\n <div style={{\n position: 'absolute', inset: 0,\n display: 'flex', alignItems: 'center',\n opacity: hover ? 1 : 0,\n transform: hover ? 'translateY(0)' : 'translateY(10px)',\n transition: 'opacity 260ms var(--easing-decelerate) 60ms, transform 300ms var(--easing-decelerate) 60ms',\n pointerEvents: 'none'\n }}>\n <div style={{\n fontSize: 13.5, lineHeight: 1.5, color: fills.sub,\n fontWeight: 500\n }}>{description}<\/div>\n <\/div>\n <\/div>\n <\/div>);\n\n}\n\nfunction WhySection() {\n \/\/ Tonal accent colors for icons (lighter shade of card bg)\n const navyIc = '#94ADEC'; \/\/ light blue against navy cards\n const greenIc = '#C5FFCA'; \/\/ pale green against green cards\n return (\n <section id=\"why\" data-screen-label=\"03 Why\" style={{ background: '#fff', padding: '88px 0 96px' }}>\n <C>\n <SectionTitle eyebrow=\"V\u00ec sao ch\u1ecdn Saladin Pro\" eyebrowColor=\"rgb(20, 197, 96)\">\n V\u00ec sao nhi\u1ec1u ng\u01b0\u1eddi \u0111\u0103ng k\u00fd l\u00e0m CTV <span style={{ color: Sg }}>Saladin Pro<\/span>?\n <\/SectionTitle>\n <p className=\"sp-center-lead sp-why-lead\" style={{ textAlign: 'center', marginTop: -20, marginBottom: 44, fontSize: 15, color: '#5C5F5F', maxWidth: 620, marginLeft: 'auto', marginRight: 'auto' }}>\n Gi\u1ea3i ph\u00e1p thu nh\u1eadp th\u00f4ng minh, kh\u00f4ng r\u1ee7i ro cho m\u1ecdi \u0111\u1ed1i t\u01b0\u1ee3ng.\n <\/p>\n <div className=\"sp-grid-5\" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>\n <WhyCard tone=\"navy\" title={<>H\u1ed7 tr\u1ee3<br \/>5 sao<\/>} description=\"B\u1eaft \u0111\u1ea7u ngay l\u1eadp t\u1ee9c m\u00e0 kh\u00f4ng c\u1ea7n \u0111\u1eb7t c\u1ecdc hay chi ph\u00ed tham gia.\" illustration={\n \/\/ Wallet with 0\u20ab\n <svg viewBox=\"0 0 120 120\" width=\"110\" height=\"110\" aria-hidden=\"true\">\n <rect x=\"20\" y=\"38\" width=\"80\" height=\"58\" rx=\"10\" fill={navyIc} \/>\n <rect x=\"20\" y=\"38\" width=\"80\" height=\"14\" rx=\"10\" fill={navyIc} opacity=\"0.7\" \/>\n {\/* Coin slot \/ clasp *\/}\n <rect x=\"68\" y=\"62\" width=\"28\" height=\"20\" rx=\"6\" fill=\"#1E3888\" \/>\n <circle cx=\"82\" cy=\"72\" r=\"6\" fill={navyIc} \/>\n <text x=\"82\" y=\"76\" textAnchor=\"middle\" fontSize=\"11\" fontWeight=\"800\" fontFamily=\"var(--font-display)\" fill=\"#1E3888\">0<\/text>\n <\/svg>\n } \/>\n <WhyCard tone=\"green\" title={<>L\u00e0m m\u1ecdi<br \/>l\u00fac, m\u1ecdi<br \/>n\u01a1i<\/>} description=\"T\u1ef1 do s\u1eafp x\u1ebfp th\u1eddi gian l\u00e0m vi\u1ec7c, ph\u00f9 h\u1ee3p v\u1edbi m\u1ecdi l\u1ecbch tr\u00ecnh.\" illustration={\n \/\/ Map pin\n <svg viewBox=\"0 0 120 120\" width=\"110\" height=\"110\" aria-hidden=\"true\">\n <path d=\"M 60 14 C 41 14 28 28 28 47 C 28 70 60 102 60 102 C 60 102 92 70 92 47 C 92 28 79 14 60 14 Z\" fill={greenIc} \/>\n <circle cx=\"60\" cy=\"46\" r=\"11\" fill=\"#14C560\" \/>\n <\/svg>\n } \/>\n <WhyCard tone=\"navy\" title={<>Th\u00f9 lao<br \/>h\u1ea5p d\u1eabn<\/>} description=\"Ch\u00ednh s\u00e1ch th\u00f9 lao minh b\u1ea1ch, chi tr\u1ea3 nhanh ch\u00f3ng h\u00e0ng th\u00e1ng.\" illustration={\n \/\/ Tulip\n <svg viewBox=\"0 0 120 120\" width=\"110\" height=\"110\" aria-hidden=\"true\">\n {\/* Stem *\/}\n <path d=\"M 60 64 L 60 100\" stroke={navyIc} strokeWidth=\"3\" strokeLinecap=\"round\" \/>\n {\/* Petals *\/}\n <path d=\"M 60 30 C 76 30 86 46 84 64 C 78 60 70 60 60 64 Z\" fill={navyIc} \/>\n <path d=\"M 60 30 C 44 30 34 46 36 64 C 42 60 50 60 60 64 Z\" fill={navyIc} opacity=\"0.85\" \/>\n <path d=\"M 60 30 C 56 38 56 56 60 64 C 64 56 64 38 60 30 Z\" fill=\"#1E3888\" \/>\n {\/* Leaf *\/}\n <path d=\"M 60 80 C 70 78 78 82 82 88 C 76 92 68 92 60 88 Z\" fill={navyIc} opacity=\"0.7\" \/>\n <\/svg>\n } \/>\n <WhyCard tone=\"green\" title={<>Ng\u01b0\u1eddi m\u1edbi<br \/>v\u1eabn l\u00e0m<br \/>\u0111\u01b0\u1ee3c<\/>} description=\"H\u1ec7 th\u1ed1ng \u0111\u00e0o t\u1ea1o b\u00e0i b\u1ea3n v\u00e0 \u0111\u1ed9i ng\u0169 chuy\u00ean gia h\u1ed7 tr\u1ee3 ch\u1ed1t \u0111\u01a1n.\" illustration={\n \/\/ 3 people heads\n <svg viewBox=\"0 0 120 120\" width=\"110\" height=\"110\" aria-hidden=\"true\">\n {\/* Back-left person *\/}\n <circle cx=\"36\" cy=\"56\" r=\"10\" fill={greenIc} opacity=\"0.85\" \/>\n <path d=\"M 20 86 Q 20 72 36 72 Q 52 72 52 86 L 52 92 L 20 92 Z\" fill={greenIc} opacity=\"0.85\" \/>\n {\/* Front-center person *\/}\n <circle cx=\"60\" cy=\"46\" r=\"13\" fill={greenIc} \/>\n <path d=\"M 38 90 Q 38 70 60 70 Q 82 70 82 90 L 82 100 L 38 100 Z\" fill={greenIc} \/>\n {\/* Back-right person *\/}\n <circle cx=\"86\" cy=\"58\" r=\"9\" fill={greenIc} opacity=\"0.75\" \/>\n <path d=\"M 72 88 Q 72 76 86 76 Q 100 76 100 88 L 100 94 L 72 94 Z\" fill={greenIc} opacity=\"0.75\" \/>\n <\/svg>\n } \/>\n <WhyCard tone=\"navy\" title={<>Nhi\u1ec1u s\u1ea3n<br \/>ph\u1ea9m d\u1ec5<br \/>b\u00e1n<\/>} description=\"T\u1eeb b\u1ea3o hi\u1ec3m xe m\u00e1y \u0111\u1ebfn s\u1ee9c kh\u1ecfe, \u0111\u00e1p \u1ee9ng m\u1ecdi nhu c\u1ea7u kh\u00e1ch h\u00e0ng.\" illustration={\n \/\/ 4 shapes: 3 squares + 1 diamond\n <svg viewBox=\"0 0 120 120\" width=\"110\" height=\"110\" aria-hidden=\"true\">\n <rect x=\"22\" y=\"36\" width=\"28\" height=\"28\" rx=\"4\" fill={navyIc} \/>\n <rect x=\"22\" y=\"72\" width=\"28\" height=\"28\" rx=\"4\" fill={navyIc} opacity=\"0.85\" \/>\n <rect x=\"58\" y=\"72\" width=\"28\" height=\"28\" rx=\"4\" fill={navyIc} opacity=\"0.85\" \/>\n <rect x=\"72\" y=\"22\" width=\"28\" height=\"28\" rx=\"4\" fill={navyIc} transform=\"rotate(45 86 36)\" \/>\n <\/svg>\n } \/>\n <\/div>\n\n {\/* No-KPI callout band *\/}\n <div style={{\n marginTop: 32, position: 'relative',\n borderRadius: 18, overflow: 'hidden',\n background: 'linear-gradient(120deg, #0A1530 0%, #1E3888 100%)',\n padding: '30px 40px',\n display: 'flex', alignItems: 'center', gap: 26,\n boxShadow: '0 16px 32px -12px rgba(10,21,48,0.32)'\n }}>\n {\/* Left: flat stamp badge *\/}\n <div style={{\n flexShrink: 0,\n width: 88, height: 88, borderRadius: '50%',\n background: '#FFC53A',\n display: 'grid', placeItems: 'center'\n }}>\n <div style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 22, lineHeight: 1.15, color: '#0A1530',\n textAlign: 'center', letterSpacing: '-0.01em'\n }}>NO<br \/>KPI<\/div>\n <\/div>\n\n {\/* Right: copy *\/}\n <div>\n <div style={{\n fontFamily: 'var(--font-display)', fontWeight: 700,\n fontSize: 24, lineHeight: 1.25, letterSpacing: '-0.015em',\n color: '#FFC53A'\n }}>\n Kh\u00f4ng y\u00eau c\u1ea7u KPIs, kh\u00f4ng ch\u1ec9 ti\u00eau doanh s\u1ed1\n <\/div>\n <div style={{\n marginTop: 8, fontSize: 14.5, color: 'rgba(255,255,255,0.8)',\n maxWidth: 560, lineHeight: 1.5\n }}>\n Kh\u00f4ng \u00e1p l\u1ef1c doanh s\u1ed1, b\u1ea1n l\u00e0m vi\u1ec7c theo kh\u1ea3 n\u0103ng c\u1ee7a m\u00ecnh.\n <\/div>\n <\/div>\n <\/div>\n <\/C>\n <\/section>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Income \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction IncomeIcon({ kind }) {\n \/\/ Small illustrated multi-color icons (matches the colorful flat-illustration style of the reference)\n const w = 32,h = 32;\n switch (kind) {\n case 'health':return (\n <svg width={w} height={h} viewBox=\"0 0 32 32\">\n <path d=\"M 9 6 L 9 16 Q 9 21 14 21 Q 19 21 19 16 L 19 6\" stroke=\"#14C560\" strokeWidth=\"2.5\" fill=\"none\" strokeLinecap=\"round\" \/>\n <circle cx=\"9\" cy=\"6\" r=\"2.2\" fill=\"#1E3888\" \/>\n <circle cx=\"19\" cy=\"6\" r=\"2.2\" fill=\"#1E3888\" \/>\n <path d=\"M 14 21 L 14 24 Q 14 28 19 28 Q 24 28 24 23\" stroke=\"#14C560\" strokeWidth=\"2.5\" fill=\"none\" strokeLinecap=\"round\" \/>\n <circle cx=\"24\" cy=\"22\" r=\"3.5\" fill=\"#FFC53A\" stroke=\"#0A1530\" strokeWidth=\"1.2\" \/>\n <\/svg>);\n\n case 'car':return (\n <svg width={w} height={h} viewBox=\"0 0 32 32\">\n <path d=\"M 5 19 L 7 13 Q 8 11 10 11 L 22 11 Q 24 11 25 13 L 27 19 L 27 23 Q 27 24 26 24 L 24 24 Q 23 24 23 23 L 23 22 L 9 22 L 9 23 Q 9 24 8 24 L 6 24 Q 5 24 5 23 Z\" fill=\"#E14B4B\" \/>\n <path d=\"M 9 17 L 10 13 Q 10.3 12 11 12 L 21 12 Q 21.7 12 22 13 L 23 17 Z\" fill=\"#6BC1FF\" \/>\n <line x1=\"16\" y1=\"12\" x2=\"16\" y2=\"17\" stroke=\"#0A1530\" strokeWidth=\"1\" \/>\n <circle cx=\"9.5\" cy=\"22.5\" r=\"2.3\" fill=\"#1A1D20\" \/>\n <circle cx=\"22.5\" cy=\"22.5\" r=\"2.3\" fill=\"#1A1D20\" \/>\n <\/svg>);\n\n case 'moto':return (\n <svg width={w} height={h} viewBox=\"0 0 32 32\">\n <circle cx=\"7\" cy=\"22\" r=\"4\" fill=\"#1A1D20\" \/>\n <circle cx=\"7\" cy=\"22\" r=\"1.6\" fill=\"#fff\" \/>\n <circle cx=\"25\" cy=\"22\" r=\"4\" fill=\"#1A1D20\" \/>\n <circle cx=\"25\" cy=\"22\" r=\"1.6\" fill=\"#fff\" \/>\n <path d=\"M 7 22 L 14 22 L 17 14 L 22 14 L 25 22\" fill=\"#14C560\" \/>\n <path d=\"M 14 22 L 19 17 L 23 17\" stroke=\"#FFC53A\" strokeWidth=\"2\" fill=\"none\" strokeLinecap=\"round\" \/>\n <rect x=\"20\" y=\"11\" width=\"5\" height=\"3\" rx=\"0.8\" fill=\"#E14B4B\" \/>\n <\/svg>);\n\n case 'travel':return (\n <svg width={w} height={h} viewBox=\"0 0 32 32\">\n <path d=\"M 3 18 L 12 16 L 18 8 L 21 8 L 18 17 L 24 18 L 27 14 L 29 15 L 26 22 L 8 25 L 4 22 Z\" fill=\"#3DBCD6\" \/>\n <path d=\"M 12 16 L 18 17 L 17 22 L 11 21 Z\" fill=\"#1F8FB0\" opacity=\"0.6\" \/>\n <circle cx=\"21\" cy=\"11\" r=\"1.2\" fill=\"#fff\" \/>\n <\/svg>);\n\n case 'accident':return (\n <svg width={w} height={h} viewBox=\"0 0 32 32\">\n <rect x=\"6\" y=\"13\" width=\"20\" height=\"6\" rx=\"3\" fill=\"#F2A2C0\" transform=\"rotate(-22 16 16)\" \/>\n <rect x=\"14.5\" y=\"14.5\" width=\"3\" height=\"3\" fill=\"#fff\" transform=\"rotate(-22 16 16)\" \/>\n <circle cx=\"10.5\" cy=\"18.5\" r=\"0.8\" fill=\"#fff\" \/>\n <circle cx=\"21.5\" cy=\"13.5\" r=\"0.8\" fill=\"#fff\" \/>\n <circle cx=\"10.5\" cy=\"15\" r=\"0.8\" fill=\"#fff\" \/>\n <circle cx=\"21.5\" cy=\"17\" r=\"0.8\" fill=\"#fff\" \/>\n <\/svg>);\n\n case 'home':return (\n <svg width={w} height={h} viewBox=\"0 0 32 32\">\n <path d=\"M 5 15 L 16 6 L 27 15 L 25 15 L 25 26 L 7 26 L 7 15 Z\" fill=\"#F4F6FE\" \/>\n <path d=\"M 4 16 L 16 5 L 28 16 L 25 16 L 16 8 L 7 16 Z\" fill=\"#14C560\" \/>\n <rect x=\"13\" y=\"17\" width=\"6\" height=\"9\" fill=\"#E14B4B\" \/>\n <circle cx=\"17.5\" cy=\"22\" r=\"0.6\" fill=\"#FFC53A\" \/>\n <rect x=\"9\" y=\"17\" width=\"3\" height=\"3\" fill=\"#6BC1FF\" \/>\n <rect x=\"20\" y=\"17\" width=\"3\" height=\"3\" fill=\"#6BC1FF\" \/>\n <\/svg>);\n\n }\n return null;\n}\n\nfunction IncomeSection() {\n const rows = [\n { icon: 'https:\/\/cdn.saladin.vn\/images\/product_cat\/HEALTH_COMPREHENSIVE.svg', name: 'B\u1ea3o hi\u1ec3m s\u1ee9c kho\u1ebb', range: '1.000.000 - 2.500.000 VN\u0110' },\n { icon: 'https:\/\/cdn.saladin.vn\/images\/product_cat\/CAR_COMPREHENSIVE.svg', name: 'B\u1ea3o hi\u1ec3m \u00f4 t\u00f4', range: '1.000.000 - 3.500.000 VN\u0110' },\n { icon: 'https:\/\/cdn.saladin.vn\/images\/product_cat\/BIKE.svg', name: 'B\u1ea3o hi\u1ec3m xe m\u00e1y', range: '400.000 - 1.000.000 VN\u0110' },\n { icon: 'https:\/\/cdn.saladin.vn\/images\/product_cat\/INTER_TRAVEL.svg', name: 'B\u1ea3o hi\u1ec3m du l\u1ecbch', range: '150.000 - 1.000.000 VN\u0110' },\n { icon: 'https:\/\/cdn.saladin.vn\/images\/product_cat\/PERSONAL_ACCIDENT.svg', name: 'B\u1ea3o hi\u1ec3m tai n\u1ea1n', range: '200.000 - 500.000 VN\u0110' },\n { icon: 'https:\/\/cdn.saladin.vn\/images\/product_cat\/HOME_INSURANCE.svg', name: 'B\u1ea3o hi\u1ec3m nh\u00e0 t\u01b0 nh\u00e2n', range: '300.000 - 1.500.000 VN\u0110' }];\n\n const perks = [\n { kind: 'chart', t: 'Kh\u00f4ng gi\u1edbi h\u1ea1n thu nh\u1eadp', s: 'B\u1ea1n c\u00e0ng n\u1ed7 l\u1ef1c, thu nh\u1eadp c\u00e0ng cao, kh\u00f4ng c\u00f3 tr\u1ea7n gi\u1edbi h\u1ea1n.' },\n { kind: 'check', t: 'Theo d\u00f5i minh b\u1ea1ch', s: 'Qu\u1ea3n l\u00fd thu nh\u1eadp v\u00e0 h\u1ee3p \u0111\u1ed3ng ngay tr\u00ean \u1ee9ng d\u1ee5ng Saladin Pro.' },\n { kind: 'alarm', t: 'Kh\u00f4ng c\u1ea7n ngh\u1ec9 vi\u1ec7c full-time', s: 'V\u1eeba l\u00e0m c\u00f4ng vi\u1ec7c hi\u1ec7n t\u1ea1i, v\u1eeba gia t\u0103ng thu nh\u1eadp th\u1ee5 \u0111\u1ed9ng.' }];\n\n\n const SECTION_BG = '#0A1530'; \/\/ deepest navy\n const CARD_BG = '#142146'; \/\/ slightly lighter panel\n const HAIRLINE = 'rgba(255,255,255,0.08)';\n const GREEN = '#14C560';\n const GOLD = '#FFC53A';\n\n return (\n (() => {\n const perksRef = React.useRef(null);\n const [perksIn, setPerksIn] = React.useState(false);\n React.useEffect(() => {\n const el = perksRef.current;\n if (!el) return;\n const fallback = setTimeout(() => setPerksIn(true), 900);\n const obs = new IntersectionObserver(([entry]) => {\n if (entry.isIntersecting) {setPerksIn(true);obs.disconnect();clearTimeout(fallback);}\n }, { threshold: 0.3 });\n obs.observe(el);\n return () => {obs.disconnect();clearTimeout(fallback);};\n }, []);\n return (\n <section id=\"income\" data-screen-label=\"04 Income\" style={{ background: SECTION_BG, padding: '96px 0 104px', color: '#fff', position: 'relative', overflow: 'hidden' }}>\n <C>\n {\/* Title block *\/}\n <div style={{ textAlign: 'center', marginBottom: 48 }}>\n <h2 style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 44, lineHeight: 1.1, letterSpacing: '-0.025em',\n color: '#fff', margin: 0, textWrap: 'balance'\n }}>B\u1ea1n c\u00f3 th\u1ec3 ki\u1ebfm \u0111\u01b0\u1ee3c bao nhi\u00eau?<\/h2>\n <p style={{ marginTop: 14, fontSize: 16, color: 'rgba(255,255,255,0.72)' }}>\n D\u1ef1 to\u00e1n thu nh\u1eadp d\u1ef1a tr\u00ean nh\u1eefng s\u1ea3n ph\u1ea9m ph\u1ed5 bi\u1ebfn nh\u1ea5t.\n <\/p>\n <\/div>\n\n <div className=\"sp-grid-income\" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 56, alignItems: 'center' }}>\n {\/* Income table *\/}\n <div style={{\n background: CARD_BG, borderRadius: 18, padding: '8px 8px',\n border: `1px solid ${HAIRLINE}`,\n boxShadow: '0 24px 48px -16px rgba(0,0,0,0.4)'\n }}>\n {rows.map((r, i) =>\n <div key={i} style={{\n display: 'grid', gridTemplateColumns: '40px 1fr auto', alignItems: 'center', gap: 18,\n padding: '18px 20px',\n borderBottom: i < rows.length - 1 ? `1px solid ${HAIRLINE}` : 'none'\n }}>\n <img src={r.icon} alt=\"\" width=\"36\" height=\"36\" style={{ display: 'block', flexShrink: 0 }} \/>\n <span style={{ fontSize: 16, fontWeight: 500, color: '#fff' }}>{r.name}<\/span>\n <span style={{ fontSize: 15, fontWeight: 700, color: GREEN, fontFamily: 'var(--font-display)', letterSpacing: '-0.005em' }}>{r.range}<\/span>\n <\/div>\n )}\n <\/div>\n\n {\/* Perks list *\/}\n <div ref={perksRef} style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>\n {perks.map((p, i) =>\n <div key={i} style={{\n display: 'flex', gap: 18, alignItems: 'flex-start',\n opacity: perksIn ? 1 : 0,\n transform: perksIn ? 'translateY(0)' : 'translateY(22px)',\n transition: `opacity 520ms var(--easing-decelerate) ${i * 150}ms, transform 520ms var(--easing-decelerate) ${i * 150}ms`\n }}>\n <div style={{\n width: 52, height: 52, borderRadius: '50%',\n border: `2.5px solid ${GOLD}`, color: GOLD,\n display: 'grid', placeItems: 'center', flexShrink: 0,\n position: 'relative',\n background: perksIn ? GREEN : 'transparent',\n borderColor: perksIn ? GREEN : GOLD,\n transform: perksIn ? 'scale(1)' : 'scale(0.6)',\n transition: `background 320ms var(--easing-decelerate) ${i * 150 + 180}ms, border-color 320ms var(--easing-decelerate) ${i * 150 + 180}ms, transform 420ms cubic-bezier(0.34,1.56,0.64,1) ${i * 150 + 180}ms`\n }}>\n <span style={{\n display: 'grid', placeItems: 'center',\n opacity: perksIn ? 0 : 1,\n transition: `opacity 200ms ${i * 150 + 180}ms`\n }}>\n <PerkIcon kind={p.kind} color={GOLD} \/>\n <\/span>\n <i className=\"ri-check-line\" style={{\n position: 'absolute', fontSize: 26, color: '#fff',\n opacity: perksIn ? 1 : 0,\n transform: perksIn ? 'scale(1)' : 'scale(0.4)',\n transition: `opacity 220ms var(--easing-decelerate) ${i * 150 + 260}ms, transform 320ms cubic-bezier(0.34,1.56,0.64,1) ${i * 150 + 260}ms`\n }}><\/i>\n <\/div>\n <div style={{ paddingTop: 4 }}>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: GOLD, letterSpacing: '-0.01em' }}>{p.t}<\/div>\n <div style={{ fontSize: 14.5, color: 'rgba(255,255,255,0.82)', marginTop: 6, lineHeight: 1.55 }}>{p.s}<\/div>\n <\/div>\n <\/div>\n )}\n <button className=\"sp-cta-btn\" style={{\n marginTop: 8, alignSelf: 'flex-start',\n background: GREEN, color: '#fff', padding: '14px 34px',\n borderRadius: 10, border: 'none', fontFamily: 'inherit', fontWeight: 600, fontSize: 16,\n cursor: 'pointer', transition: 'background 200ms'\n }}\n onMouseEnter={(e) => e.currentTarget.style.background = '#00A74F'}\n onMouseLeave={(e) => e.currentTarget.style.background = GREEN}>\n \u0110\u0103ng k\u00fd ngay<\/button>\n <\/div>\n <\/div>\n\n <p style={{\n marginTop: 32, fontSize: 12.5, lineHeight: 1.6,\n color: 'rgba(255,255,255,0.55)', maxWidth: 720\n }}>\n *Thu nh\u1eadp \u01b0\u1edbc t\u00ednh d\u1ef1a tr\u00ean s\u1ed1 l\u01b0\u1ee3ng \u0111\u01a1n\/h\u1ee3p \u0111\u1ed3ng ph\u00e1t sinh. Th\u00f9 lao th\u1ef1c t\u1ebf c\u00f3 th\u1ec3 thay \u0111\u1ed5i t\u00f9y s\u1ea3n ph\u1ea9m, gi\u00e1 tr\u1ecb h\u1ee3p \u0111\u1ed3ng v\u00e0 ch\u00ednh s\u00e1ch th\u00f9 lao hi\u1ec7n h\u00e0nh.\n <\/p>\n <\/C>\n <\/section>);\n\n })());\n\n\n}\n\n\/\/ \u2500\u2500\u2500 How it works \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction HowItWorks() {\n const steps = [\n { n: 1, t: '\u0110\u0103ng k\u00fd t\u00e0i kho\u1ea3n', s: 'T\u1ea3i app v\u00e0 \u0111i\u1ec1n th\u00f4ng tin c\u01a1 b\u1ea3n ch\u1ec9 trong 30 gi\u00e2y.' },\n { n: 2, t: 'K\u00fd h\u1ee3p \u0111\u1ed3ng \u0111i\u1ec7n t\u1eed', s: 'X\u00e1c th\u1ef1c danh t\u00ednh v\u00e0 k\u00fd h\u1ee3p \u0111\u1ed3ng CTV nhanh ch\u00f3ng online.' },\n { n: 3, t: 'Chia s\u1ebb & T\u01b0 v\u1ea5n', s: 'S\u1eed d\u1ee5ng kho t\u01b0 li\u1ec7u chuy\u00ean nghi\u1ec7p \u0111\u1ec3 chia s\u1ebb cho kh\u00e1ch h\u00e0ng.' },\n { n: 4, t: 'Kh\u00e1ch h\u00e0ng thanh to\u00e1n', s: 'Kh\u00e1ch mua tr\u1ef1c ti\u1ebfp qua link gi\u1edbi thi\u1ec7u c\u1ee7a b\u1ea1n.' },\n { n: 5, t: 'Nh\u1eadn th\u00f9 lao', s: 'Th\u00f9 lao v\u1ec1 t\u00e0i kho\u1ea3n ng\u00e2n h\u00e0ng ngay sau khi \u0111\u01a1n \u0111\u01b0\u1ee3c duy\u1ec7t.' }];\n\n const [active, setActive] = React.useState(0);\n const GREEN = '#14C560';\n\n return (\n <section id=\"how\" data-screen-label=\"05 How it works\" style={{ background: '#fff', padding: '104px 0 112px' }}>\n <C>\n {\/* Title (matches reference: inline \"Saladin Pro\" in green) *\/}\n <div style={{ textAlign: 'center', marginBottom: 14 }}>\n <h2 style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 44, lineHeight: 1.1, letterSpacing: '-0.025em',\n color: '#0E1F11', margin: 0\n }}>\n L\u00e0m CTV <span style={{ color: GREEN }}>Saladin Pro<\/span> nh\u01b0 th\u1ebf n\u00e0o?\n <\/h2>\n <\/div>\n <p className=\"sp-center-lead\" style={{ textAlign: 'center', marginTop: 16, marginBottom: 64, fontSize: 16, color: '#5C5F5F' }}>\n Ch\u1ec9 v\u1edbi 5 b\u01b0\u1edbc \u0111\u01a1n gi\u1ea3n \u0111\u1ec3 b\u1eaft \u0111\u1ea7u h\u00e0nh tr\u00ecnh c\u1ee7a b\u1ea1n.\n <\/p>\n\n <div className=\"sp-grid-how\" style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 80, alignItems: 'center' }}>\n {\/* Steps *\/}\n <div className=\"sp-how-steps\" style={{ position: 'relative', paddingLeft: 80 }}>\n {\/* Continuous green connector *\/}\n <div style={{\n position: 'absolute', left: 31, top: 30, bottom: 30, width: 2,\n background: GREEN, borderRadius: 1\n }} \/>\n {steps.map((st, i) => {\n const isActive = active === i;\n return (\n <button\n key={st.n}\n onClick={() => setActive(i)}\n onMouseEnter={() => setActive(i)}\n className=\"sp-how-step\"\n style={{\n position: 'relative', display: 'block', width: '100%',\n padding: '0 0 36px',\n background: 'transparent', border: 'none', textAlign: 'left',\n cursor: 'pointer', fontFamily: 'inherit'\n }}>\n {\/* Numbered badge *\/}\n <div style={{\n position: 'absolute', left: -80, top: 4,\n width: 64, height: 64, borderRadius: '50%',\n background: '#fff',\n display: 'grid', placeItems: 'center'\n }}>\n <div style={{\n width: 44, height: 44, borderRadius: '50%',\n background: GREEN, color: '#fff',\n display: 'grid', placeItems: 'center',\n fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20,\n boxShadow: isActive ?\n `0 0 0 6px rgba(20,197,96,0.18), 0 8px 16px -4px rgba(20,197,96,0.4)` :\n '0 4px 8px -2px rgba(20,197,96,0.25)',\n transition: 'box-shadow 220ms var(--easing-standard), transform 220ms',\n transform: isActive ? 'scale(1.06)' : 'none'\n }}>{st.n}<\/div>\n <\/div>\n <div style={{\n fontFamily: 'var(--font-display)', fontWeight: 700,\n fontSize: 24, letterSpacing: '-0.02em',\n color: isActive ? GREEN : '#0E1F11',\n transition: 'color 200ms',\n lineHeight: 1.2\n }}>{st.t}<\/div>\n <div style={{\n fontSize: 15, color: '#5C5F5F', marginTop: 8,\n lineHeight: 1.6, maxWidth: 520\n }}>{st.s}<\/div>\n <\/button>);\n\n })}\n <\/div>\n\n {\/* Phone with video *\/}\n <div style={{ display: 'grid', placeItems: 'center', position: 'relative' }}>\n <AppPhoneSplash \/>\n <\/div>\n <\/div>\n <\/C>\n <\/section>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Audience cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction AudienceCard({ slotId, label, sub, placeholder, src }) {\n return (\n <div style={{\n position: 'relative', borderRadius: 18, overflow: 'hidden',\n height: 460, background: '#E1F6E0',\n boxShadow: '0 12px 24px -8px rgba(16,24,40,0.12)',\n border: '1px solid rgba(255,255,255,0.6)'\n }}>\n {\/* Photo drop-zone *\/}\n <img src={src} alt={label} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} \/>\n \n\n {\/* Bottom green-fade gradient for legibility *\/}\n <div aria-hidden=\"true\" style={{\n position: 'absolute', left: 0, right: 0, bottom: 0, height: '52%',\n background: 'linear-gradient(180deg, rgba(198,255,202,0) 0%, rgba(102,255,146,0.55) 55%, rgba(20,197,96,0.85) 100%)',\n pointerEvents: 'none'\n }} \/>\n\n {\/* Frosted glass info panel *\/}\n <div style={{\n position: 'absolute', left: 16, right: 16, bottom: 16,\n padding: '18px 20px 20px',\n background: 'rgba(255,255,255,0.82)',\n backdropFilter: 'blur(18px) saturate(180%)',\n WebkitBackdropFilter: 'blur(18px) saturate(180%)',\n borderRadius: 14,\n border: '1px solid rgba(255,255,255,0.9)',\n boxShadow: '0 8px 24px -6px rgba(16,24,40,0.18)',\n textAlign: 'center'\n }}>\n <div style={{\n fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22,\n color: '#0E1F11', letterSpacing: '-0.02em', lineHeight: 1.2\n }}>{label}<\/div>\n <div style={{\n fontSize: 13.5, color: '#1B1D20', marginTop: 8, lineHeight: 1.55,\n textWrap: 'balance'\n }}>{sub}<\/div>\n <\/div>\n <\/div>);\n\n}\n\nfunction AudienceSection() {\n const personas = [\n { slotId: 'persona-insurance', label: 'Nh\u00e2n vi\u00ean B\u1ea3o hi\u1ec3m', sub: 'H\u1ee3p t\u00e1c \u0111\u01a1n gi\u1ea3n tr\u00ean vai tr\u00f2 CTV \/ Afilliate, kh\u00f4ng \u1ea3nh h\u01b0\u1edfng thu nh\u1eadp t\u1eeb c\u00f4ng vi\u1ec7c hi\u1ec7n t\u1ea1i.',\n placeholder: '\u1ea2nh nh\u00e2n vi\u00ean b\u1ea3o hi\u1ec3m nam (m\u1ec9m c\u01b0\u1eddi, m\u1eb7c vest)', src: 'https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/07\/22081944\/saladin-pro-nv-bao-hiem.webp' },\n { slotId: 'persona-office', label: 'Nh\u00e2n vi\u00ean V\u0103n ph\u00f2ng', sub: 'T\u1eadn d\u1ee5ng th\u1eddi gian r\u1ea3nh v\u00e0 m\u1ea1ng l\u01b0\u1edbi m\u1ed1i quan h\u1ec7 \u0111\u1ec3 ki\u1ebfm th\u00eam thu nh\u1eadp th\u1ee5 \u0111\u1ed9ng.',\n placeholder: '\u1ea2nh n\u1eef nh\u00e2n vi\u00ean v\u0103n ph\u00f2ng (k\u00ednh, \u00e1o s\u01a1 mi)', src: 'https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/07\/22081943\/saladin-pro-nv-van-phong.webp' },\n { slotId: 'persona-freelancer', label: 'Freelancer', sub: 'Ch\u1ee7 \u0111\u1ed9ng c\u00f4ng vi\u1ec7c, kh\u00f4ng g\u00f2 b\u00f3 th\u1eddi gian, qu\u1ea3n l\u00fd thu nh\u1eadp ngay tr\u00ean smartphone.',\n placeholder: '\u1ea2nh freelancer tr\u1ebb (tai nghe, kh\u00f4ng gian s\u00e1ng t\u1ea1o)', src: 'https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/07\/22081943\/saladin-pro-freelancer.webp' },\n { slotId: 'persona-garage', label: 'Ch\u1ee7 Garage\/C\u1eeda h\u00e0ng', sub: 'Gia t\u0103ng gi\u00e1 tr\u1ecb cho kh\u00e1ch h\u00e0ng b\u1eb1ng c\u00e1ch t\u01b0 v\u1ea5n b\u1ea3o hi\u1ec3m xe ngay t\u1ea1i ch\u1ed7.',\n placeholder: '\u1ea2nh ng\u01b0\u1eddi \u0111\u00e0n \u00f4ng trung ni\u00ean (ch\u1ee7 garage)', src: 'https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/07\/22081942\/saladin-pro-chu-garage.webp' },\n { slotId: 'persona-mom', label: 'M\u1eb9 b\u1ec9m s\u1eefa', sub: 'V\u1eeba ch\u0103m s\u00f3c gia \u0111\u00ecnh v\u1eeba c\u00f3 th\u1ec3 kinh doanh online b\u1ea3o hi\u1ec3m d\u1ec5 d\u00e0ng, an to\u00e0n.',\n placeholder: '\u1ea2nh m\u1eb9 tr\u1ebb v\u00e0 em b\u00e9', src: 'https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/07\/22081942\/saladin-pro-me-bim-sua.webp' },\n { slotId: 'persona-travel', label: 'Du l\u1ecbch\/B\u1ea5t \u0111\u1ed9ng s\u1ea3n', sub: 'S\u1ea3n ph\u1ea9m b\u1ea3o hi\u1ec3m du l\u1ecbch v\u00e0 b\u1ed3i th\u01b0\u1eddng nh\u00e0 c\u1eeda l\u00e0 m\u1ea3nh gh\u00e9p ho\u00e0n h\u1ea3o cho kh\u00e1ch h\u00e0ng.',\n placeholder: '\u1ea2nh \u0111\u00f4i nam n\u1eef ch\u1ec9 tay (du l\u1ecbch)', src: 'https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/07\/22081941\/saladin-pro-bds.webp' }];\n\n return (\n <section id=\"audience\" data-screen-label=\"06 Audience\" style={{\n background: 'linear-gradient(180deg, #F6FFF2 0%, #C5FFCA 100%)',\n padding: '96px 0'\n }}>\n <C>\n <SectionTitle eyebrow=\"D\u00e0nh cho ai?\">\n Ai ph\u00f9 h\u1ee3p v\u1edbi <span style={{ color: Sg }}>Saladin Pro<\/span>?\n <\/SectionTitle>\n <p className=\"sp-center-lead\" style={{ textAlign: 'center', marginTop: -22, marginBottom: 28, fontSize: 15, color: '#414941', maxWidth: 860, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.65 }}>\n Kh\u00f4ng gi\u1edbi h\u1ea1n ng\u00e0nh ngh\u1ec1, kinh nghi\u1ec7m hay xu\u1ea5t ph\u00e1t \u0111i\u1ec3m. \u0110i\u1ec1u quan tr\u1ecdng l\u00e0 b\u1ea1n s\u1eb5n s\u00e0ng t\u1ea1o th\u00eam gi\u00e1 tr\u1ecb cho nh\u1eefng ng\u01b0\u1eddi xung quanh v\u00e0 ch\u00ednh m\u00ecnh. Saladin Pro c\u00f3 nhi\u1ec1u l\u1ed9 tr\u00ecnh gi\u00fap b\u1ea1n \u1ee9ng d\u1ee5ng c\u00f4ng ngh\u1ec7 \u0111\u1ec3 ph\u00e1t tri\u1ec3n thu nh\u1eadp m\u1ed9t c\u00e1ch chuy\u00ean nghi\u1ec7p.\n <\/p>\n\n <div style={{ textAlign: 'center', marginTop: 32, marginBottom: 48 }}>\n <a href=\"https:\/\/id.saladin.vn\/?callback_url=https%3A%2F%2Fpro.saladin.vn%2Flogin%2Fcallback%3Fredirect%3Dhttps%253A%252F%252Fpro.saladin.vn%252F%26channel%3Dpro&from=pro\"\n target=\"_blank\" rel=\"noopener\" style={{\n background: Sg, color: '#fff', padding: '14px 28px',\n borderRadius: 50, border: 'none', fontFamily: 'inherit', fontWeight: 700, fontSize: 15,\n boxShadow: '0 8px 20px -4px rgba(0,109,49,0.4)',\n display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none'\n }}>\u0110\u0103ng k\u00fd ngay <i className=\"ri-arrow-right-line\" style={{ fontSize: 18 }}><\/i><\/a>\n <\/div>\n\n <div className=\"sp-grid-3\" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>\n {personas.map((p) => <AudienceCard key={p.slotId} {...p} \/>)}\n <\/div>\n <\/C>\n <\/section>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Dashboard \/ income mgmt \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction DashCallout({ icon, t, s }) {\n return (\n <div style={{\n background: '#fff', borderRadius: 18, padding: '22px 22px',\n display: 'flex', gap: 16, alignItems: 'flex-start',\n border: '1px solid #F4D86A',\n boxShadow: '0 8px 20px -6px rgba(133,120,0,0.22), 0 2px 4px -1px rgba(133,120,0,0.08)',\n transition: 'transform 200ms var(--easing-standard), box-shadow 200ms var(--easing-standard)',\n cursor: 'default'\n }}\n onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-4px)';e.currentTarget.style.boxShadow = '0 16px 28px -8px rgba(133,120,0,0.32), 0 4px 8px -2px rgba(133,120,0,0.12)';}}\n onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = '0 8px 20px -6px rgba(133,120,0,0.22), 0 2px 4px -1px rgba(133,120,0,0.08)';}}>\n \n <div style={{\n width: 64, height: 64, borderRadius: 16,\n background: 'linear-gradient(135deg, #F6FFF2 0%, #C5FFCA 100%)',\n display: 'grid', placeItems: 'center', flexShrink: 0,\n boxShadow: '0 4px 10px -2px rgba(0,138,64,0.15), inset 0 -2px 0 rgba(0,0,0,0.04)',\n border: '1px solid #B7CCB6'\n }}>\n {icon}\n <\/div>\n <div>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: '#0E1F11', lineHeight: 1.3, letterSpacing: '-0.01em', textWrap: 'balance' }}>{t}<\/div>\n {s && <div style={{ fontSize: 13.5, color: '#414941', marginTop: 6, lineHeight: 1.5 }}>{s}<\/div>}\n <\/div>\n <\/div>);\n\n}\n\n\/\/ Gold outline icons for the income perks list\nfunction PerkIcon({ kind, color = '#FFC53A' }) {\n switch (kind) {\n case 'chart':return (\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth=\"2.4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n <polyline points=\"4,15 10,9 14,13 20,5\" \/>\n <polyline points=\"15,5 20,5 20,10\" \/>\n <\/svg>);\n\n case 'check':return (\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth=\"2.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n <polyline points=\"5,12.5 10,17.5 19,7.5\" \/>\n <\/svg>);\n\n case 'alarm':return (\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n {\/* Ear bumps *\/}\n <line x1=\"4\" y1=\"5\" x2=\"7\" y2=\"2.5\" \/>\n <line x1=\"20\" y1=\"5\" x2=\"17\" y2=\"2.5\" \/>\n {\/* Clock face *\/}\n <circle cx=\"12\" cy=\"13\" r=\"7\" \/>\n {\/* Hands *\/}\n <polyline points=\"12,10 12,13 15,15\" \/>\n <\/svg>);\n\n }\n return null;\n}\n\n\/\/ Custom flat illustrations for the dashboard section\nfunction DashIcon({ kind }) {\n const N = '#1E3888',G = '#14C560',GL = '#66FF92',GD = '#003916',A = '#FFC53A';\n switch (kind) {\n case 'dashboard':return (\n <svg viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\">\n {\/* Card *\/}\n <rect x=\"4\" y=\"8\" width=\"40\" height=\"32\" rx=\"4\" fill={N} \/>\n <rect x=\"4\" y=\"8\" width=\"40\" height=\"6\" rx=\"4\" fill=\"#2A4DAE\" \/>\n <circle cx=\"8\" cy=\"11\" r=\"0.8\" fill=\"#fff\" \/>\n <circle cx=\"11\" cy=\"11\" r=\"0.8\" fill=\"#fff\" \/>\n <circle cx=\"14\" cy=\"11\" r=\"0.8\" fill=\"#fff\" \/>\n {\/* Bars *\/}\n <rect x=\"9\" y=\"28\" width=\"5\" height=\"8\" rx=\"1\" fill={GL} \/>\n <rect x=\"16\" y=\"22\" width=\"5\" height=\"14\" rx=\"1\" fill={G} \/>\n <rect x=\"23\" y=\"25\" width=\"5\" height=\"11\" rx=\"1\" fill={GL} \/>\n {\/* Line trending up *\/}\n <path d=\"M 30 24 L 34 21 L 38 23 L 42 18\" stroke={A} strokeWidth=\"1.6\" fill=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\" \/>\n <circle cx=\"42\" cy=\"18\" r=\"1.6\" fill={A} \/>\n <\/svg>);\n\n case 'route':return (\n <svg viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\">\n {\/* Dashed winding path *\/}\n <path d=\"M 10 8 Q 10 18 22 18 Q 36 18 36 30 Q 36 40 22 40\" stroke={G} strokeWidth=\"2.4\" fill=\"none\" strokeLinecap=\"round\" strokeDasharray=\"2 4\" \/>\n {\/* Start pin *\/}\n <circle cx=\"10\" cy=\"8\" r=\"4.5\" fill={N} \/>\n <circle cx=\"10\" cy=\"8\" r=\"1.6\" fill=\"#fff\" \/>\n {\/* End pin *\/}\n <path d=\"M 22 32 C 17 32 14 35 14 39 C 14 43 22 48 22 48 C 22 48 30 43 30 39 C 30 35 27 32 22 32 Z\" fill={G} transform=\"translate(0,-8)\" \/>\n <circle cx=\"22\" cy=\"32\" r=\"2.4\" fill=\"#fff\" \/>\n {\/* Check mark inside the destination *\/}\n <path d=\"M 20.5 32 L 21.6 33.1 L 23.8 30.9\" stroke={G} strokeWidth=\"1.4\" fill=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\" \/>\n <\/svg>);\n\n case 'marketing':return (\n <svg viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\">\n {\/* Megaphone body *\/}\n <path d=\"M 8 24 L 8 30 L 14 31 L 14 23 Z\" fill={N} \/>\n <path d=\"M 14 18 L 30 10 L 30 44 L 14 36 Z\" fill={G} \/>\n {\/* Sound waves *\/}\n <path d=\"M 34 20 Q 40 24 34 28\" stroke={A} strokeWidth=\"2.2\" fill=\"none\" strokeLinecap=\"round\" \/>\n <path d=\"M 38 16 Q 46 24 38 32\" stroke={A} strokeWidth=\"2.2\" fill=\"none\" strokeLinecap=\"round\" \/>\n {\/* Flag \/ personalization tag *\/}\n <rect x=\"15\" y=\"33\" width=\"8\" height=\"10\" rx=\"1.5\" fill={GL} transform=\"rotate(6 19 38)\" \/>\n <circle cx=\"19\" cy=\"38\" r=\"1.2\" fill={N} transform=\"rotate(6 19 38)\" \/>\n <\/svg>);\n\n case 'tasks':return (\n <svg viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\">\n {\/* Clipboard *\/}\n <rect x=\"10\" y=\"8\" width=\"28\" height=\"34\" rx=\"4\" fill={N} \/>\n <rect x=\"18\" y=\"6\" width=\"12\" height=\"6\" rx=\"2\" fill={A} \/>\n {\/* Checklist rows *\/}\n <rect x=\"15\" y=\"18\" width=\"4\" height=\"4\" rx=\"1\" fill={GL} \/>\n <line x1=\"22\" y1=\"20\" x2=\"33\" y2=\"20\" stroke=\"#fff\" strokeWidth=\"2\" strokeLinecap=\"round\" \/>\n <rect x=\"15\" y=\"26\" width=\"4\" height=\"4\" rx=\"1\" fill={G} \/>\n <path d=\"M 15.5 28 L 16.7 29.2 L 18.7 27\" stroke=\"#fff\" strokeWidth=\"1.3\" fill=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\" \/>\n <line x1=\"22\" y1=\"28\" x2=\"30\" y2=\"28\" stroke=\"#fff\" strokeWidth=\"2\" strokeLinecap=\"round\" \/>\n <rect x=\"15\" y=\"34\" width=\"4\" height=\"4\" rx=\"1\" fill={GL} \/>\n <line x1=\"22\" y1=\"36\" x2=\"33\" y2=\"36\" stroke=\"#fff\" strokeWidth=\"2\" strokeLinecap=\"round\" \/>\n <\/svg>);\n\n case 'training':return (\n <svg viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\">\n {\/* Open book *\/}\n <path d=\"M 6 12 Q 16 8 22 12 L 22 36 Q 16 32 6 36 Z\" fill={N} \/>\n <path d=\"M 42 12 Q 32 8 26 12 L 26 36 Q 32 32 42 36 Z\" fill={G} \/>\n <line x1=\"11\" y1=\"17\" x2=\"18\" y2=\"15\" stroke=\"#fff\" strokeWidth=\"1.6\" strokeLinecap=\"round\" \/>\n <line x1=\"11\" y1=\"23\" x2=\"18\" y2=\"21\" stroke=\"#fff\" strokeWidth=\"1.6\" strokeLinecap=\"round\" \/>\n <line x1=\"30\" y1=\"15\" x2=\"37\" y2=\"17\" stroke=\"#fff\" strokeWidth=\"1.6\" strokeLinecap=\"round\" \/>\n <line x1=\"30\" y1=\"21\" x2=\"37\" y2=\"23\" stroke=\"#fff\" strokeWidth=\"1.6\" strokeLinecap=\"round\" \/>\n {\/* Refresh \/ update badge *\/}\n <circle cx=\"37\" cy=\"10\" r=\"8\" fill={A} \/>\n <path d=\"M 34 10 A 3.4 3.4 0 1 1 35.2 12.6\" stroke=\"#1E3888\" strokeWidth=\"1.4\" fill=\"none\" strokeLinecap=\"round\" \/>\n <path d=\"M 34 8 L 34 10.4 L 36.4 10.4 Z\" fill=\"#1E3888\" \/>\n <\/svg>);\n\n case 'catalog':return (\n <svg viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\">\n {\/* Three stacked cards (fanned) *\/}\n <rect x=\"9\" y=\"10\" width=\"22\" height=\"28\" rx=\"3\" fill=\"#94ADEC\" transform=\"rotate(-8 20 24)\" \/>\n <rect x=\"13\" y=\"12\" width=\"22\" height=\"28\" rx=\"3\" fill={N} transform=\"rotate(0 24 26)\" \/>\n <rect x=\"17\" y=\"10\" width=\"22\" height=\"28\" rx=\"3\" fill={G} transform=\"rotate(8 28 24)\" \/>\n {\/* Top card content *\/}\n <g transform=\"rotate(8 28 24)\">\n <circle cx=\"22\" cy=\"18\" r=\"2.6\" fill=\"#fff\" \/>\n <rect x=\"20\" y=\"23\" width=\"16\" height=\"2\" rx=\"1\" fill=\"#fff\" \/>\n <rect x=\"20\" y=\"27\" width=\"11\" height=\"2\" rx=\"1\" fill=\"#fff\" opacity=\"0.7\" \/>\n <rect x=\"20\" y=\"31\" width=\"13\" height=\"2\" rx=\"1\" fill=\"#fff\" opacity=\"0.7\" \/>\n <circle cx=\"34\" cy=\"18\" r=\"3\" fill={A} \/>\n <\/g>\n <\/svg>);\n\n case 'withdraw':return (\n <svg viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\">\n {\/* Bank card *\/}\n <rect x=\"6\" y=\"14\" width=\"28\" height=\"20\" rx=\"3\" fill={N} \/>\n <rect x=\"6\" y=\"18\" width=\"28\" height=\"3.5\" fill=\"#2A4DAE\" \/>\n <rect x=\"10\" y=\"26\" width=\"9\" height=\"3\" rx=\"0.5\" fill={A} \/>\n <rect x=\"22\" y=\"26\" width=\"8\" height=\"3\" rx=\"0.5\" fill=\"#fff\" opacity=\"0.6\" \/>\n {\/* Coin with \u20ab *\/}\n <circle cx=\"36\" cy=\"32\" r=\"9\" fill={G} \/>\n <circle cx=\"36\" cy=\"32\" r=\"7\" fill={GL} opacity=\"0.35\" \/>\n <text x=\"36\" y=\"35.5\" textAnchor=\"middle\" fontFamily=\"var(--font-display)\" fontWeight=\"800\" fontSize=\"11\" fill=\"#fff\">\u20ab<\/text>\n {\/* Down arrow indicating \"r\u00fat\" *\/}\n <path d=\"M 36 18 L 36 23 M 33 21 L 36 24 L 39 21\" stroke={GD} strokeWidth=\"1.6\" fill=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\" \/>\n <\/svg>);\n\n }\n return null;\n}\n\nfunction DashboardSection() {\n return (\n <section id=\"dashboard\" data-screen-label=\"07 Dashboard\" style={{\n background: 'linear-gradient(180deg, #FFFDF2 0%, #FFF8CC 100%)',\n padding: '96px 0', position: 'relative', overflow: 'hidden'\n }}>\n <C>\n <div style={{ textAlign: 'center', marginBottom: 16 }}>\n <h2 style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 52, lineHeight: 1.05, letterSpacing: '-0.03em',\n color: '#0E1F11', margin: 0, textWrap: 'balance'\n }} className=\"sp-dash-h2\">\n Qu\u1ea3n l\u00fd thu nh\u1eadp <span style={{ color: '#14C560' }}>trong t\u1ea7m tay<\/span>\n <\/h2>\n <\/div>\n <p className=\"sp-center-lead sp-dash-lead\" style={{ textAlign: 'center', marginTop: 16, marginBottom: 72, fontSize: 16, color: '#414941' }}>\n \u1ee8ng d\u1ee5ng th\u00f4ng minh gi\u00fap b\u1ea1n v\u1eadn h\u00e0nh v\u00e0 qu\u1ea3n l\u00fd c\u00f4ng vi\u1ec7c m\u1ecdi l\u00fac m\u1ecdi n\u01a1i.\n <\/p>\n\n <div className=\"sp-grid-dashboard\" style={{ display: 'grid', gridTemplateColumns: '420px 1fr', gap: 56, alignItems: 'center' }}>\n {\/* Phone *\/}\n <div className=\"sp-dash-phone\" style={{ display: 'grid', placeItems: 'center', position: 'relative' }}>\n <img decoding=\"async\"\n src=\"https:\/\/cdn-blog.saladin.vn\/pro-contents\/2026\/07\/22081941\/saladin-pro-dashboard-phone.png\"\n alt=\"\u1ee8ng d\u1ee5ng Saladin Pro qu\u1ea3n l\u00fd \u0111\u01a1n h\u00e0ng\"\n style={{\n width: '100%', maxWidth: 420, height: 'auto', display: 'block',\n filter: 'drop-shadow(0 24px 36px rgba(133,120,0,0.32))'\n }} \/>\n <\/div>\n\n {\/* Callouts grid *\/}\n <div className=\"sp-grid-2\" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>\n <DashCallout icon={<DashIcon kind=\"dashboard\" \/>} t=\"Qu\u1ea3n l\u00fd \u0111\u1ed9i ng\u0169 trong t\u1ea7m tay\" \/>\n <DashCallout icon={<DashIcon kind=\"marketing\" \/>} t=\"Th\u01b0 vi\u1ec7n Marketing c\u00e1 nh\u00e2n h\u00f3a\" \/>\n <DashCallout icon={<DashIcon kind=\"tasks\" \/>} t=\"Qu\u1ea3n l\u00fd c\u00f4ng vi\u1ec7c d\u1ec5 d\u00e0ng\" \/>\n <DashCallout icon={<DashIcon kind=\"catalog\" \/>} t=\"Catalog s\u1ea3n ph\u1ea9m \u0111\u1ea7y \u0111\u1ee7 t\u1eeb 15+ nh\u00e0 b\u1ea3o hi\u1ec3m\" \/>\n <DashCallout icon={<DashIcon kind=\"withdraw\" \/>} t=\"Nh\u1eadn th\u00f9 lao li\u1ec1n tay v\u1edbi ch\u1ec9 1 ch\u1ea1m\" \/>\n <DashCallout icon={<DashIcon kind=\"training\" \/>} t=\"\u0110\u00e0o t\u1ea1o v\u00e0 c\u1eadp nh\u1eadt th\u00f4ng tin s\u1ea3n ph\u1ea9m mi\u1ec5n ph\u00ed h\u00e0ng tu\u1ea7n\" \/>\n\n {\/* App store badges *\/}\n <div className=\"sp-app-badges\" style={{ gridColumn: '1 \/ -1', display: 'flex', justifyContent: 'center', gap: 16, marginTop: 12 }}>\n <a\n href=\"https:\/\/apps.apple.com\/us\/app\/saladin-pro-ctv-b%E1%BA%A3o-hi%E1%BB%83m\/id6454701055\"\n target=\"_blank\" rel=\"noopener\"\n aria-label=\"T\u1ea3i Saladin Pro tr\u00ean App Store\"\n style={{\n background: '#000', color: '#fff', borderRadius: 12,\n border: '1.5px solid #fff',\n outline: '1px solid #B7BAC3', outlineOffset: 0,\n padding: '12px 22px 12px 18px',\n display: 'inline-flex', alignItems: 'center', gap: 14,\n textDecoration: 'none', minWidth: 200,\n transition: 'transform 200ms var(--easing-standard), box-shadow 200ms',\n boxShadow: '0 10px 24px -8px rgba(0,0,0,0.35)'\n }}\n onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.boxShadow = '0 16px 28px -8px rgba(0,0,0,0.45)';}}\n onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = '0 10px 24px -8px rgba(0,0,0,0.35)';}}>\n \n {\/* Official Apple glyph *\/}\n <svg width=\"32\" height=\"38\" viewBox=\"0 0 24 28\" aria-hidden=\"true\">\n <path fill=\"#fff\" d=\"M17.05 14.86c-.03-3.04 2.48-4.5 2.6-4.57-1.42-2.07-3.62-2.36-4.4-2.39-1.87-.19-3.65 1.1-4.6 1.1-.96 0-2.42-1.08-3.98-1.05-2.05.03-3.94 1.19-5 3.02-2.13 3.69-.55 9.16 1.53 12.15 1.01 1.46 2.22 3.11 3.81 3.05 1.53-.06 2.11-.99 3.96-.99 1.84 0 2.37.99 3.99.95 1.65-.03 2.69-1.5 3.7-2.97 1.16-1.7 1.64-3.35 1.67-3.43-.04-.02-3.2-1.22-3.23-4.87Z\" \/>\n <path fill=\"#fff\" d=\"M14.6 5.95c.84-1.02 1.41-2.44 1.25-3.85-1.21.05-2.68.81-3.55 1.83-.78.9-1.46 2.34-1.28 3.73 1.35.1 2.74-.69 3.58-1.71Z\" \/>\n <\/svg>\n <div style={{ textAlign: 'left', lineHeight: 1.15 }}>\n <div style={{ fontSize: 12, opacity: 0.95, letterSpacing: '0.005em' }}>Download on the<\/div>\n <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, marginTop: 1, letterSpacing: '-0.01em' }}>App Store<\/div>\n <\/div>\n <\/a>\n\n <a\n href=\"https:\/\/play.google.com\/store\/apps\/details?id=vn.saladin.pro&hl=en\"\n target=\"_blank\" rel=\"noopener\"\n aria-label=\"T\u1ea3i Saladin Pro tr\u00ean Google Play\"\n style={{\n background: '#000', color: '#fff', borderRadius: 12,\n border: '1.5px solid #fff',\n outline: '1px solid #B7BAC3', outlineOffset: 0,\n padding: '12px 22px 12px 18px',\n display: 'inline-flex', alignItems: 'center', gap: 14,\n textDecoration: 'none', minWidth: 200,\n transition: 'transform 200ms var(--easing-standard), box-shadow 200ms',\n boxShadow: '0 10px 24px -8px rgba(0,0,0,0.35)'\n }}\n onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.boxShadow = '0 16px 28px -8px rgba(0,0,0,0.45)';}}\n onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = '0 10px 24px -8px rgba(0,0,0,0.35)';}}>\n \n {\/* Official Google Play multi-color triangle *\/}\n <svg width=\"32\" height=\"36\" viewBox=\"0 0 32 36\" aria-hidden=\"true\">\n <defs>\n <linearGradient id=\"gpBlue\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n <stop offset=\"0%\" stopColor=\"#00C8FF\" \/>\n <stop offset=\"100%\" stopColor=\"#1E88FF\" \/>\n <\/linearGradient>\n <linearGradient id=\"gpGreen\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n <stop offset=\"0%\" stopColor=\"#3FF9A1\" \/>\n <stop offset=\"100%\" stopColor=\"#00C266\" \/>\n <\/linearGradient>\n <linearGradient id=\"gpYellow\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor=\"#FFE600\" \/>\n <stop offset=\"100%\" stopColor=\"#FFAA00\" \/>\n <\/linearGradient>\n <linearGradient id=\"gpRed\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n <stop offset=\"0%\" stopColor=\"#FF5252\" \/>\n <stop offset=\"100%\" stopColor=\"#E10000\" \/>\n <\/linearGradient>\n <\/defs>\n {\/* Triangle: 4 facets meeting at the front-right point.\n Apex left-top -> right point -> bottom-left, split horizontally through the middle. *\/}\n <path d=\"M 4 3 L 19 17 L 4 17 Z\" fill=\"url(#gpGreen)\" \/>\n <path d=\"M 4 17 L 19 17 L 4 31 Z\" fill=\"url(#gpRed)\" \/>\n <path d=\"M 4 3 L 19 17 L 28 17 Q 30 17 28 18.2 L 22.5 21.3 Z\" fill=\"url(#gpYellow)\" opacity=\"0\" \/>\n {\/* Better: render with two left halves + the right point *\/}\n <path d=\"M 4 3 L 4 17 L 19 17 Z\" fill=\"url(#gpGreen)\" \/>\n <path d=\"M 4 17 L 4 31 L 19 17 Z\" fill=\"url(#gpRed)\" \/>\n <path d=\"M 4 3 L 19 17 L 28 11 Z\" fill=\"url(#gpBlue)\" \/>\n <path d=\"M 19 17 L 28 23 L 4 31 L 4 17 Z\" fill=\"url(#gpYellow)\" opacity=\"0\" \/>\n {\/* Yellow front quad *\/}\n <path d=\"M 19 17 L 28 11 L 28 23 Z\" fill=\"url(#gpYellow)\" \/>\n <\/svg>\n <div style={{ textAlign: 'left', lineHeight: 1.15 }}>\n <div style={{ fontSize: 12, opacity: 0.95, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Get it on<\/div>\n <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, marginTop: 1, letterSpacing: '-0.01em' }}>Google Play<\/div>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/C>\n <\/section>);\n\n}\n\n\/\/ \u2500\u2500\u2500 FAQ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction FaqItem({ idx, q, a, isOpen, onToggle }) {\n return (\n <div style={{\n position: 'relative',\n background: isOpen ? '#fff' : 'transparent',\n borderRadius: 16,\n transition: 'background 240ms var(--easing-standard), box-shadow 240ms var(--easing-standard)',\n boxShadow: isOpen ? '0 16px 32px -10px rgba(16,24,40,0.12), 0 4px 8px -2px rgba(16,24,40,0.04)' : 'none',\n overflow: 'hidden',\n borderBottom: isOpen ? 'none' : '1px solid rgba(26,28,30,0.08)'\n }}>\n {\/* Active accent bar *\/}\n {isOpen &&\n <span aria-hidden=\"true\" style={{\n position: 'absolute', left: 0, top: 16, bottom: 16, width: 4,\n background: 'linear-gradient(180deg, #14C560 0%, #008A40 100%)',\n borderRadius: '0 4px 4px 0'\n }} \/>\n }\n <button onClick={onToggle} className=\"sp-faq-btn\" style={{\n width: '100%', background: 'transparent', border: 'none',\n padding: '24px 24px 24px 28px',\n display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: 22,\n textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit'\n }}>\n {\/* Numbered chip *\/}\n <span style={{\n fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14,\n letterSpacing: '0.05em',\n color: isOpen ? '#14C560' : '#A6ADA3',\n transition: 'color 200ms'\n }}>{String(idx + 1).padStart(2, '0')}<\/span>\n {\/* Question *\/}\n <span style={{\n fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19,\n color: isOpen ? '#0E1F11' : '#1B1D20',\n letterSpacing: '-0.015em', lineHeight: 1.35\n }}>{q}<\/span>\n {\/* +\/- toggle *\/}\n <span style={{\n width: 40, height: 40, borderRadius: '50%',\n background: isOpen ?\n 'linear-gradient(135deg, #14C560 0%, #008A40 100%)' :\n '#fff',\n border: isOpen ? 'none' : '1.5px solid #DCDFE3',\n color: isOpen ? '#fff' : '#5C5F5F',\n display: 'grid', placeItems: 'center', flexShrink: 0,\n transition: 'all 200ms var(--easing-standard)',\n boxShadow: isOpen ? '0 6px 14px -3px rgba(0,138,64,0.45)' : 'none'\n }}>\n {\/* Custom +\/- so the rotation is intentional *\/}\n <span style={{ position: 'relative', width: 16, height: 16 }}>\n <span style={{\n position: 'absolute', left: 0, top: '50%', width: 16, height: 2,\n background: 'currentColor', borderRadius: 2,\n transform: 'translateY(-50%)'\n }} \/>\n <span style={{\n position: 'absolute', top: 0, left: '50%', width: 2, height: 16,\n background: 'currentColor', borderRadius: 2,\n transform: `translateX(-50%) rotate(${isOpen ? 90 : 0}deg)`,\n transformOrigin: 'center',\n transition: 'transform 240ms var(--easing-standard)'\n }} \/>\n <\/span>\n <\/span>\n <\/button>\n {\/* Answer *\/}\n <div style={{\n display: 'grid',\n gridTemplateRows: isOpen ? '1fr' : '0fr',\n transition: 'grid-template-rows 280ms var(--easing-standard)'\n }}>\n <div style={{ overflow: 'hidden' }}>\n <div style={{\n padding: '0 32px 26px 80px',\n fontSize: 15, color: '#414941', lineHeight: 1.65,\n maxWidth: 640\n }}>{a}<\/div>\n <\/div>\n <\/div>\n <\/div>);\n\n}\n\nfunction FaqSection() {\n const items = [\n { q: 'Tham gia Saladin c\u00f3 m\u1ea5t ph\u00ed kh\u00f4ng?', a: 'Ho\u00e0n to\u00e0n KH\u00d4NG. B\u1ea1n kh\u00f4ng ph\u1ea3i \u0111\u00f3ng b\u1ea5t k\u1ef3 kho\u1ea3n ph\u00ed tham gia, ph\u00ed duy tr\u00ec hay \u0111\u1eb7t c\u1ecdc n\u00e0o khi l\u00e0m CTV.' },\n { q: 'T\u00f4i kh\u00f4ng bi\u1ebft g\u00ec v\u1ec1 b\u1ea3o hi\u1ec3m c\u00f3 l\u00e0m \u0111\u01b0\u1ee3c kh\u00f4ng?', a: 'Ho\u00e0n to\u00e0n \u0111\u01b0\u1ee3c. Saladin c\u00f3 ch\u01b0\u01a1ng tr\u00ecnh \u0111\u00e0o t\u1ea1o mi\u1ec5n ph\u00ed v\u00e0 \u0111\u1ed9i ng\u0169 chuy\u00ean gia h\u1ed7 tr\u1ee3 7 ng\u00e0y\/tu\u1ea7n cho CTV m\u1edbi.' },\n { q: 'Th\u00f9 lao \u0111\u01b0\u1ee3c tr\u1ea3 nh\u01b0 th\u1ebf n\u00e0o?', a: 'Th\u00f9 lao \u0111\u01b0\u1ee3c tr\u1ea3 ngay sau khi h\u1ee3p \u0111\u1ed3ng b\u1ea3o hi\u1ec3m c\u00f3 hi\u1ec7u l\u1ef1c, chuy\u1ec3n kho\u1ea3n tr\u1ef1c ti\u1ebfp v\u1ec1 t\u00e0i kho\u1ea3n ng\u00e2n h\u00e0ng c\u1ee7a b\u1ea1n.' },\n { q: 'L\u00e0m CTV c\u00f3 b\u1ecb r\u00e0ng bu\u1ed9c th\u1eddi gian kh\u00f4ng?', a: 'Kh\u00f4ng. B\u1ea1n ho\u00e0n to\u00e0n ch\u1ee7 \u0111\u1ed9ng th\u1eddi gian. Saladin Pro kh\u00f4ng y\u00eau c\u1ea7u KPIs hay s\u1ed1 gi\u1edd l\u00e0m vi\u1ec7c c\u1ed1 \u0111\u1ecbnh.' },\n { q: 'T\u00f4i c\u1ea7n chu\u1ea9n b\u1ecb g\u00ec \u0111\u1ec3 \u0111\u0103ng k\u00fd?', a: 'B\u1ea1n ch\u1ec9 c\u1ea7n CMND\/CCCD, s\u1ed1 \u0111i\u1ec7n tho\u1ea1i v\u00e0 t\u00e0i kho\u1ea3n ng\u00e2n h\u00e0ng. To\u00e0n b\u1ed9 qu\u00e1 tr\u00ecnh \u0111\u0103ng k\u00fd di\u1ec5n ra online trong v\u00e0i ph\u00fat.' }];\n\n const [open, setOpen] = React.useState(0);\n return (\n <section id=\"faq\" data-screen-label=\"08 FAQ\" style={{\n background: 'linear-gradient(180deg, #FAFBF8 0%, #F2F8EE 100%)',\n padding: '104px 0 112px',\n position: 'relative', overflow: 'hidden'\n }}>\n {\/* Decorative ghosted leaf *\/}\n <img decoding=\"async\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzUgMjM2IiBmaWxsPSJub25lIj4KICAKICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCA0OCkiPgogICAgPHBhdGggZD0iTSA0Mi42NzYgMTQxLjkyMSBDIDM4LjgxMSAxMzcuNDM4IDM0Ljc5MiAxMzIuNDkgMzEuMDgxIDEyNy4zODkgQyAyMS44MDUgMTE0LjA5MyAxNS4xNTggODkuODIxIDExLjYwMiA1Ny4zNTYgQyA5LjkwMSA0MC42NTkgOS4yODMgMjUuNTA5IDkuMTI4IDE3LjMxNSBMIDI4LjE0NCAxMi4zNjggTCAzOS40MyA5LjU4NSBDIDM5LjI3NSA2LjMzOSAzOS43MzkgMy4yNDcgNDAuODIxIDAgTCAyOC40NTMgMi45MzcgTCAwLjAwNyAxMC4yMDMgQyAwLjAwNyAxMC4yMDMgLTEuMDc1IDk2LjYyNCAyMy42NiAxMzIuMzM2IEMgMzAuOTI2IDE0Mi44NDkgMzguOTY2IDE1MS42NjEgNDYuNjk2IDE1OC45MjcgQyA0NC45OTUgMTU0LjI4OSA0My4yOTQgMTQ4LjcyMyA0Mi42NzYgMTQxLjkyMSBaIiBmaWxsPSIjMUUzODg4Ij48L3BhdGg+CiAgPC9nPgogIAogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg3LjQyLCA1MS4xKSI+CiAgICA8cGF0aCBkPSJNIDg3LjQzNCA3LjExMSBMIDU5Ljc2MSAwIEMgNjEuMzA3IDIuNjI4IDYzLjQ3MiA5Ljc0IDYzLjQ3MiAxMC4yMDMgTCA3OC40NjggMTQuMDY4IEMgNzguMzEzIDIyLjI2MiA3Ny42OTUgMzcuMTA0IDc1Ljk5NCA1My45NTUgQyA3NS4wNjYgNjIuNjEyIDcxLjY2NSA4My40ODMgNzAuODkyIDg2LjExMSBDIDY3LjE4MiAxMDIuODA4IDYyLjM4OSAxMTUuNjM5IDU2LjUxNSAxMjQuMTQyIEMgNDIuMjkyIDE0NC43MDQgMjQuODIyIDE1OC43NzIgMTIuNDU0IDE2Ny4xMiBMIDIuMjUxIDE3NC4wNzcgQyAyLjA5NiAxNzYuMDg3IDEuOTQyIDE3Ny45NDIgMS4zMjMgMTc5Ljc5NyBDIDEuMTY5IDE4MC4yNjEgLTAuMzc3IDE4NC40MzUgMC4wODYgMTg0LjU5IEMgMC4wODYgMTg0LjU5IDQuMTA2IDE4Mi41OCAxMC43NTQgMTc4LjcxNSBDIDIzLjc0IDE3MC44MzEgNDYuMDAyIDE1NC45MDcgNjMuOTM1IDEyOS4wODkgQyA4OC41MTYgOTMuNTMyIDg3LjQzNCA3LjExMSA4Ny40MzQgNy4xMTEgWiIgZmlsbD0iIzFFMzg4OCI+PC9wYXRoPgogIDwvZz4KICAKICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNy4yNCwgMCkiPgogICAgPHBhdGggZD0iTSAxMDQuNTM3IDEwMy41ODEgQyAxMDEuMjkxIDk4LjAxNSA5OS43NDUgOTIuNjA0IDEwMC44MjcgODYuMTExIEMgMTAxLjYgODEuNjI4IDEwMy40NTUgNzcuNDU0IDEwNC42OTIgNzIuOTcgQyAxMDUuNjE5IDY5LjI2IDEwNS42MTkgNjUuMzk1IDEwNC42OTIgNjEuNTMgQyAxMDQuMzgzIDYwLjQ0OCAxMDMuOTE5IDU5LjIxMSAxMDMuNjEgNTguMTI5IEMgMTAyLjM3MyA1NS4wMzcgMTAwLjUxOCA1Mi4xIDk4LjM1MyA0OS45MzUgQyA5OC4zNTMgNDkuOTM1IDk4LjM1MyA0OS45MzUgOTguMTk5IDQ5Ljc4MSBDIDk4LjE5OSA0OS43ODEgOTYuODA3IDQ4LjA4IDkzLjU2MSA0Ni4zNzkgQyA5MS4yNDIgNDUuMTQzIDg4LjMwNCA0NC4wNiA4My45NzYgNDMuNTk3IEMgODMuMDQ4IDQzLjQ0MiA4Mi40MyA0My40NDIgODEuODExIDQzLjQ0MiBDIDc3Ljc5MiA0My4xMzMgNzUuNDczIDQyLjY2OSA3NC4zOTEgNDEuNDMyIEMgNzMuMzA4IDQwLjM1IDczLjE1NCAzOC4zNCA3My4xNTQgMzQuNjMgQyA3Mi45OTkgMjcuMjA5IDczLjQ2MyAxOS4wMTYgNjkuOTA3IDEyLjIxMyBDIDY3LjI3OSA3LjI2NiA2Mi4zMzIgMi43ODMgNTYuNzY2IDEuMDgyIEMgNTQuNDQ3IDAuMzA5IDUyLjEyOCAwIDQ5LjgwOSAwIEMgNDUuNzkgMCA0MS42MTYgMS4wODIgMzguMDYgMi43ODMgQyAzNC4xOTUgNC43OTMgMzEuMTAzIDcuODg0IDI5LjI0OCAxMS45MDQgQyAyNS44NDcgMTguNzA2IDI2LjQ2NSAyOS41MjggMTguMTE3IDMyLjc3NSBDIDEzLjAxNSAzNC43ODUgNy45MTMgMzcuNDEzIDQuNjY3IDQyLjA1MSBDIDMuMjc2IDQ0LjA2IDIuMTkzIDQ1LjkxNiAxLjQyIDQ4LjA4IEMgMC4zMzggNTEuMTcyIC0wLjEyNiA1NC4yNjQgMC4wMjkgNTcuNjY1IEMgMC4xODQgNjAuNDQ4IDAuODAyIDYzLjU0IDEuNzMgNjYuMTY4IEMgMy40MyA3MC45NiA2LjUyMiA3NS40NDQgOS43NjkgNzkuMzA5IEMgMTIuODYxIDgzLjAxOSAxNi44OCA4NS45NTYgMTkuMTk5IDkwLjEzMSBDIDIzLjA2NCA5Ny4wODggMTUuOTUyIDEwMi4wMzUgMTIuMDg4IDEwNi42NzMgQyA3LjYwNCAxMTIuMjM4IDQuODIyIDExOC41NzcgNC42NjcgMTI1LjY4OCBDIDQuNTEyIDEzMS41NjMgNS45MDQgMTM3LjQzOCA5LjE1IDE0Mi4zODUgQyAxMC4wNzggMTQzLjkzMSAxMS4xNiAxNDUuNDc3IDEyLjM5NyAxNDYuNzE0IEMgMTQuMDk3IDE0OC40MTQgMTYuODggMTQ5Ljk2IDE3Ljk2MiAxNTIuNDM0IEMgMTguMjcyIDE1My41MTYgMTguNDI2IDE1NC43NTMgMTguMTE3IDE1NS44MzUgQyAxNy4xODkgMTU5Ljg1NCAxNS42NDMgMTYzLjg3NCAxNS4wMjUgMTY4LjA0OCBDIDE0LjA5NyAxNzMuNjE0IDEzLjk0MyAxNzkuMTc5IDE0LjI1MiAxODQuNzQ1IEMgMTQuNzE2IDE5MS43MDIgMTUuNzk4IDE5Ni45NTggMTcuNDk4IDIwMS41OTYgQyAyMC4xMjcgMjA4Ljg2MiAyNC4xNDYgMjEzLjgwOSAyOC4wMTEgMjE4LjI5MiBDIDMwLjc5NCAyMjEuNTM5IDM3LjEzMiAyMjYuOTUgNDEuMzA3IDIyOS43MzMgQyA0NS42MzUgMjMyLjIwNiA1MC4xMTkgMjM1LjI5OCA1MC40MjggMjM1LjI5OCBDIDUwLjQyOCAyMzUuMTQ0IDUyLjkwMSAyMjkuNzMzIDUyLjkwMSAyMjUuMDk1IEMgNTMuMDU2IDIyMS42OTQgNTIuNzQ3IDIxOC4yOTIgNTIuNzQ3IDIxNS4yIEMgNTIuNzQ3IDIwOS42MzUgNTMuMDU2IDIwNC4wNjkgNTQuNDQ3IDE5OC42NTggQyA1Ni40NTcgMTkxLjIzOCA1OS41NDkgMTg0LjI4MSA2NC4zNDIgMTc4LjI1MiBDIDY1LjExNSAxNzcuMzI0IDY1LjczMyAxNzYuNTUxIDY2LjUwNiAxNzUuNjIzIEMgNzcuOTQ2IDE2Mi43OTIgOTYuMzQzIDE1OS4wODEgMTA3LjAxMSAxNDUuNzg2IEMgMTExLjMzOSAxNDAuNTMgMTE0LjI3NyAxMzMuNDE4IDExNC4yNzcgMTI2LjQ2MSBDIDExNC4xMjIgMTE3LjY0OSAxMDguNDAyIDExMC41MzggMTA0LjUzNyAxMDMuNTgxIFogTSA5OS43NDUgMTM5LjkxMSBDIDk1LjI2MSAxNDUuNjMxIDg4LjYxNCAxNDkuMzQyIDgxLjUwMiAxNTMuMzYxIEMgNzMuOTI3IDE1Ny44NDUgNjYuMDQyIDE2Mi4xNzMgNTkuNzA0IDE2OS4yODUgQyA1OC43NzYgMTcwLjM2NyA1OC4wMDMgMTcxLjI5NSA1Ny4yMyAxNzIuMzc3IEMgNTEuOTc0IDE3OS4xNzkgNDcuOTU0IDE4Ny4wNjQgNDUuNjM1IDE5Ni4xODUgQyA0My45MzUgMjAyLjk4NyA0My42MjYgMjA5LjYzNSA0My40NzEgMjE0Ljg5MSBDIDQzLjQ3MSAyMTYuMjgzIDQzLjQ3MSAyMTcuOTgzIDQzLjQ3MSAyMTkuMzc1IEMgNDMuNDcxIDIxOS44MzggNDMuNDcxIDIyMC40NTcgNDMuNDcxIDIyMC45MjEgQyA0MC4yMjQgMjE4LjYwMiAzNi4wNSAyMTQuODkxIDM0LjA0MSAyMTIuNTcyIEMgMjguMzIgMjA1LjkyNSAyMy41MjggMTk5LjQzMSAyMi40NDYgMTg0LjEyNiBDIDIyLjI5MSAxODEuNjUzIDIyLjI5MSAxNzkuMzM0IDIyLjI5MSAxNzcuMDE1IEMgMjIuNiAxNzIuMzc3IDI0LjQ1NSAxNjUuNDIgMjUuODQ3IDE2MC40NzMgQyAyNi45MjkgMTU4LjMwOCAyOC4xNjYgMTU1LjY4IDI5Ljg2NiAxNTQuNTk4IEMgMzAuOTQ4IDE1NC4xMzQgMzQuODEzIDE1NC4xMzQgMzYuODIzIDE1NC4xMzQgQyAzOC4wNiAxNTQuMTM0IDM5LjI5NyAxNTQuMTM0IDQwLjM3OSAxNTQuMTM0IEMgNTUuNTMgMTUzLjA1MiA2NS4yNjkgMTQ3LjQ4NyA3NS4zMTggMTM5LjYwMiBMIDY5Ljc1MyAxMzIuNjQ1IEMgNTguOTMxIDE0MS4zMDMgNTEuMDQ2IDE0NC41NDkgMzkuNzYxIDE0NS4zMjIgQyAzOC45ODggMTQ1LjMyMiAzOC4wNiAxNDUuMzIyIDM2Ljk3OCAxNDUuMzIyIEMgMzUuNDMyIDE0NS4zMjIgMzMuNzMxIDE0NS4zMjIgMzIuMTg1IDE0NS4zMjIgQyAzNS44OTYgMTM3LjI4MyAzOC45ODggMTMwLjYzNSA0MC45OTcgMTIzLjY3OCBDIDU5LjA4NSAxMTUuMTc2IDc0LjU0NSAxMDAuNzk4IDg0LjkwMyA4My4wMTkgTCA3Ny4zMjggNzguNTM2IEMgNjkuMjg5IDkyLjYwNCA1Ny44NDkgMTA0LjE5OSA0NC4wODkgMTExLjkyOSBDIDQ1LjAxNyAxMDcuNiA0NS40ODEgMTAzLjExNyA0NS43OSA5Ny43MDYgQyA0NS45NDUgOTYuMTYgNDUuOTQ1IDk0LjQ1OSA0NS45NDUgOTIuOTEzIEMgNDUuOTQ1IDkyLjc1OSA0NS45NDUgOTIuNjA0IDQ1Ljk0NSA5Mi42MDQgQyA0NS45NDUgOTIuMjk1IDQ1Ljk0NSA5MS42NzcgNDUuOTQ1IDkxLjM2NyBDIDQ1Ljk0NSA4Ny45NjYgNDYuMjU0IDg0LjI1NiA0OC4xMDkgODEuNzgyIEMgNDkuMTkxIDgwLjM5MSA1MC40MjggNzkgNTEuODE5IDc3LjQ1NCBDIDUyLjEyOSA3Ni45OSA1Mi43NDcgNzYuNTI2IDUzLjA1NiA3Ni4wNjIgQyA1OS4yNCA2OS43MjQgNjMuNTY5IDYyLjE0OCA2Ni41MDYgNTMuNDkxIEwgNTguMDAzIDUwLjcwOCBDIDU1LjUzIDU4LjEyOSA1MS44MTkgNjQuNDY3IDQ2LjU2MyA2OS44NzggQyA0Ni4yNTQgNzAuMTg3IDQ1LjYzNSA3MC44MDYgNDUuMzI2IDcxLjExNSBDIDQ0Ljg2MiA3MS41NzkgNDQuMzk5IDcyLjA0MyA0My45MzUgNzIuNTA2IEMgNDEuOTI1IDYwLjkxMiAzOS4xNDIgNTEuMTcyIDM3LjkwNiA0Ny42MTYgQyAzNy41OTYgNDYuNjg5IDM3LjQ0MiA0Ni4yMjUgMzcuNDQyIDQ2LjIyNSBMIDI5LjA5MyA0OS4wMDggQyAyOS4wOTMgNDkuMDA4IDI5LjI0OCA0OS4zMTcgMjkuNDAzIDQ5LjkzNSBDIDMwLjk0OSA1NC41NzMgMzguMDYgNzguMDcyIDM2LjgyMyA5Ny4yNDIgQyAzNS40MzIgMTE2LjU2NyAzMS4xMDMgMTI2LjQ2MSAyMi40NDYgMTQ0LjcwNCBDIDIxLjM2NCAxNDMuNDY3IDIwLjEyNyAxNDIuMzg1IDE5LjA0NCAxNDEuNjEyIEMgMTguNzM1IDE0MS4zMDMgMTguMTE3IDE0MC44MzkgMTcuOTYyIDE0MC42ODQgQyAxNy4xODkgMTM5Ljc1NyAxNi40MTYgMTM4Ljk4NCAxNS43OTggMTM3LjkwMSBDIDEzLjYzNCAxMzQuNSAxMi41NTEgMTMwLjQ4MSAxMi43MDYgMTI2LjE1MiBDIDEyLjg2MSAxMjEuMjA1IDE0LjcxNiAxMTYuNzIxIDE4LjI3MSAxMTIuMzkzIEMgMTguNzM1IDExMS42MiAxOS41MDggMTExLjAwMSAyMC40MzYgMTEwLjA3NCBDIDI0LjQ1NSAxMDUuNzQ1IDMyLjgwNCA5Ny4wODggMjYuNDY1IDg1LjY0NyBDIDI0LjMwMSA4MS45MzcgMjEuNjczIDc5LjMwOSAxOS4xOTkgNzYuOTkgQyAxNy45NjIgNzUuOTA4IDE2Ljg4IDc0LjY3MSAxNS45NTIgNzMuNzQzIEMgMTIuNzA2IDY5Ljg3OCAxMC42OTYgNjYuNDc3IDkuMzA1IDYzLjA3NiBDIDguMjIzIDYwLjQ0OCA3LjkxMyA1Ny44MiA4LjIyMyA1NS4xOTEgQyA4LjM3NyA1Mi40MDkgOS40NTkgNDkuNjI2IDExLjAwNSA0Ny4xNTIgQyAxMS43NzggNDYuMjI1IDEyLjU1MSA0NS40NTIgMTMuNDc5IDQ0LjUyNCBDIDE1LjE4IDQzLjEzMyAxNy40OTkgNDIuMDUxIDIwLjI4MSA0MC45NjggQyAzMC4xNzYgMzcuMjU4IDMyLjY0OSAyNy44MjggMzQuNTA0IDIxLjY0NCBDIDM0Ljk2OCAxOS40NzkgMzUuNTg3IDE3LjMxNSAzNi4yMDUgMTYuMDc4IEMgMzcuNDQyIDEzLjc1OSAzOC45ODggMTIuMDU5IDQxLjMwNyAxMC45NzYgQyA0My42MjYgOS43NCA0Ni40MDggOC45NjcgNDguODgyIDguOTY3IEMgNTAuMjczIDguOTY3IDUxLjY2NSA5LjEyMSA1Mi45MDEgOS43NCBDIDU2LjE0OCAxMC44MjIgNTkuNTQ5IDEzLjYwNSA2MS4wOTUgMTYuODUxIEMgNjMuMTA1IDIwLjU2MiA2My4yNiAyNi4xMjcgNjMuMjYgMzEuNTM4IEMgNjMuMjYgMzIuNzc1IDYzLjI2IDMzLjg1NyA2My4yNiAzNS4wOTQgQyA2My4yNiAzNi40ODUgNjMuNDE0IDM3LjcyMiA2My40MTQgMzguOTU5IEMgNjMuODc4IDQzLjkwNiA2NS41NzkgNDcuNDYyIDY5Ljc1MyA0OS42MjYgQyA3Mi4yMjYgNTAuODYzIDc1LjQ3MyA1MS43OSA3OS45NTYgNTIuMjU0IEMgNzkuOTU2IDUyLjI1NCA3OS45NTYgNTIuMjU0IDgwLjExMSA1Mi4yNTQgQyA4MC44ODQgNTIuMjU0IDgxLjUwMiA1Mi40MDkgODIuMjc1IDUyLjQwOSBDIDg1LjY3NiA1Mi43MTggODcuOTk1IDUzLjggODkuMjMyIDU0LjU3MyBDIDkwLjAwNSA1NC44ODIgOTAuMzE0IDU1LjM0NiA5MC42MjMgNTUuNTAxIEwgOTAuNjIzIDU1LjY1NSBMIDkxLjA4NyA1Ni4xMTkgQyA5My4wOTcgNTguMTI5IDk0LjQ4OCA2MC43NTcgOTUuMTA3IDYzLjU0IEMgOTUuNTcxIDY1Ljg1OSA5NS41NzEgNjguMzMyIDk1LjEwNyA3MC40OTcgQyA5NC43OTggNzEuODg4IDk0LjE3OSA3My41ODkgOTMuNzE1IDc1LjEzNSBDIDkyLjc4OCA3Ny45MTcgOTEuNzA2IDgxLjAwOSA5MS4yNDIgODQuNDExIEMgOTAuMDA1IDkyLjQ1IDkxLjM5NiA5OS44NyA5Ni4wMzQgMTA3Ljc1NSBDIDk2LjgwNyAxMDkuMTQ2IDk3LjU4IDExMC4zODMgOTguMzUzIDExMS42MiBDIDEwMS40NDUgMTE2LjU2NyAxMDQuMzgzIDEyMS4yMDUgMTA0LjIyOCAxMjUuNjg4IEMgMTA1LjE1NiAxMzAuNjM1IDEwMy4xNDYgMTM1Ljg5MiA5OS43NDUgMTM5LjkxMSBaIiBmaWxsPSIjMTRDNTYwIj48L3BhdGg+CiAgPC9nPgo8L3N2Zz4=\" alt=\"\" style={{\n position: 'absolute', left: '-4%', bottom: '-8%', width: 360, opacity: 0.05,\n pointerEvents: 'none'\n }} \/>\n\n <C>\n <div className=\"sp-grid-faq\" style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 64, alignItems: 'start' }}>\n {\/* Left rail *\/}\n <div className=\"sp-faq-rail\" style={{ position: 'sticky', top: 100 }}>\n <div style={{\n fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase',\n color: '#008A40', marginBottom: 12\n }}>FAQ<\/div>\n <h2 style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 44, lineHeight: 1.05, letterSpacing: '-0.03em',\n color: '#0E1F11', margin: 0, textWrap: 'balance'\n }}>\n C\u00e2u h\u1ecfi <span style={{ color: '#14C560' }}>th\u01b0\u1eddng g\u1eb7p<\/span>\n <\/h2>\n <p className=\"sp-faq-lead\" style={{\n marginTop: 28, marginBottom: 0, fontSize: 15, color: '#5C5F5F', lineHeight: 1.6,\n maxWidth: 320\n }}>\n M\u1ecdi \u0111i\u1ec1u b\u1ea1n c\u1ea7n bi\u1ebft tr\u01b0\u1edbc khi tr\u1edf th\u00e0nh C\u1ed9ng t\u00e1c vi\u00ean Saladin Pro.\n <\/p>\n\n {\/* Support card *\/}\n <div style={{\n marginTop: 28, padding: 24,\n borderRadius: 18,\n background: 'linear-gradient(135deg, #0A1530 0%, #1E3888 100%)',\n color: '#fff',\n position: 'relative', overflow: 'hidden',\n boxShadow: '0 16px 32px -10px rgba(10,21,48,0.4)'\n }}>\n <div style={{\n position: 'absolute', right: -20, top: -20,\n width: 100, height: 100, borderRadius: '50%',\n background: 'radial-gradient(circle, rgba(255,197,58,0.25) 0%, transparent 70%)'\n }} \/>\n <div style={{\n width: 64, height: 64, borderRadius: 16,\n background: 'rgba(255,197,58,0.14)',\n border: '1px solid rgba(255,197,58,0.3)',\n display: 'grid', placeItems: 'center', marginBottom: 16,\n boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.08)'\n }}>\n {\/* Custom headset + chat bubble icon *\/}\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 40 40\" aria-hidden=\"true\">\n {\/* Headset band *\/}\n <path d=\"M 8 22 Q 8 10 20 10 Q 32 10 32 22\" fill=\"none\" stroke=\"#FFC53A\" strokeWidth=\"2.4\" strokeLinecap=\"round\" \/>\n {\/* Left earcup *\/}\n <rect x=\"5\" y=\"22\" width=\"7\" height=\"11\" rx=\"2.4\" fill=\"#FFC53A\" \/>\n <rect x=\"7\" y=\"24\" width=\"3\" height=\"7\" rx=\"1\" fill=\"#1E3888\" opacity=\"0.85\" \/>\n {\/* Right earcup with mic stem *\/}\n <rect x=\"28\" y=\"22\" width=\"7\" height=\"11\" rx=\"2.4\" fill=\"#FFC53A\" \/>\n <rect x=\"30\" y=\"24\" width=\"3\" height=\"7\" rx=\"1\" fill=\"#1E3888\" opacity=\"0.85\" \/>\n {\/* Mic boom *\/}\n <path d=\"M 28 30 Q 22 30 22 35\" fill=\"none\" stroke=\"#FFC53A\" strokeWidth=\"2.2\" strokeLinecap=\"round\" \/>\n {\/* Mic tip *\/}\n <circle cx=\"22\" cy=\"35\" r=\"2\" fill=\"#FFC53A\" \/>\n {\/* Conversation dot accent *\/}\n <circle cx=\"20\" cy=\"20\" r=\"1.6\" fill=\"#FFC53A\" opacity=\"0.65\" \/>\n <\/svg>\n <\/div>\n <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.01em' }}>C\u00f2n c\u00e2u h\u1ecfi kh\u00e1c?<\/div>\n <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.72)', marginTop: 6, lineHeight: 1.55 }}>\n \u0110\u1ed9i ng\u0169 chuy\u00ean gia Saladin Pro s\u1eb5n s\u00e0ng h\u1ed7 tr\u1ee3 b\u1ea1n 7 ng\u00e0y\/tu\u1ea7n.\n <\/div>\n <a href=\"tel:1900638454\" style={{\n marginTop: 20, display: 'block', textDecoration: 'none'\n }}>\n <div style={{\n display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,\n marginBottom: 8\n }}>\n <div style={{\n fontSize: 10, fontWeight: 700, color: 'rgba(255,255,255,0.55)',\n letterSpacing: '0.16em', textTransform: 'uppercase'\n }}>Hotline \u00b7 7 ng\u00e0y\/tu\u1ea7n<\/div>\n <div style={{\n display: 'inline-flex', alignItems: 'center', gap: 6,\n fontSize: 12, fontWeight: 700, color: '#FFC53A'\n }}>\n G\u1ecdi ngay <i className=\"ri-arrow-right-line\" style={{ fontSize: 13 }}><\/i>\n <\/div>\n <\/div>\n <div style={{\n fontFamily: '\"SF Pro Display\", \"Noto Sans\", system-ui, sans-serif',\n fontWeight: 700, fontSize: 36, lineHeight: 1,\n letterSpacing: '0.08em',\n color: '#FFC53A',\n fontVariantNumeric: 'tabular-nums',\n textShadow: '0 1px 0 rgba(255,255,255,0.18), 0 2px 0 rgba(0,0,0,0.35), 0 4px 8px rgba(0,0,0,0.25)',\n display: 'inline-block'\n }}>1900 638 454<\/div>\n <\/a>\n <\/div>\n <\/div>\n\n {\/* Right: accordion *\/}\n <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>\n {items.map((it, i) =>\n <FaqItem key={i} idx={i} q={it.q} a={it.a}\n isOpen={open === i}\n onToggle={() => setOpen(open === i ? -1 : i)} \/>\n )}\n <\/div>\n <\/div>\n <\/C>\n <\/section>);\n\n}\n\n\/\/ \u2500\u2500\u2500 Final CTA \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction FinalCta() {\n const REG_URL = 'https:\/\/id.saladin.vn\/?callback_url=https%3A%2F%2Fpro.saladin.vn%2Flogin%2Fcallback%3Fredirect%3Dhttps%253A%252F%252Fpro.saladin.vn%252F%26channel%3Dpro&from=pro';\n return (\n <section data-screen-label=\"09 Final CTA\" style={{\n background: 'linear-gradient(135deg, #0A1530 0%, #1E3888 60%, #2A4DAE 100%)',\n padding: '88px 0',\n position: 'relative', overflow: 'hidden',\n color: '#fff'\n }}>\n {\/* Radial glow *\/}\n <div aria-hidden=\"true\" style={{\n position: 'absolute', right: '-10%', top: '-30%', width: 720, height: 720,\n background: 'radial-gradient(circle, rgba(20,197,96,0.22) 0%, transparent 60%)',\n pointerEvents: 'none'\n }} \/>\n <div aria-hidden=\"true\" style={{\n position: 'absolute', left: '-10%', bottom: '-40%', width: 600, height: 600,\n background: 'radial-gradient(circle, rgba(255,197,58,0.15) 0%, transparent 60%)',\n pointerEvents: 'none'\n }} \/>\n\n <C>\n <div className=\"sp-grid-finalcta\" style={{ position: 'relative', zIndex: 1, maxWidth: 780, margin: '0 auto', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>\n <div style={{\n display: 'inline-flex', alignItems: 'center', gap: 8,\n padding: '6px 14px 6px 10px',\n background: 'rgba(255,197,58,0.15)',\n border: '1px solid rgba(255,197,58,0.4)',\n borderRadius: 50,\n fontSize: 12, fontWeight: 700, color: '#FFC53A',\n letterSpacing: '0.08em', textTransform: 'uppercase'\n }}>\n <span style={{\n display: 'inline-block', width: 8, height: 8, borderRadius: '50%',\n background: '#FFC53A', boxShadow: '0 0 0 4px rgba(255,197,58,0.25)'\n }} \/>\n \u0110\u0103ng k\u00fd mi\u1ec5n ph\u00ed \u00b7 30 gi\u00e2y\n <\/div>\n <h2 className=\"sp-finalcta-h2\" style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 'clamp(30px, 3.4vw, 50px)', lineHeight: 1.12, letterSpacing: '-0.03em',\n margin: '22px 0 0', color: '#fff', textWrap: 'balance'\n }}>\n B\u1eaft \u0111\u1ea7u ki\u1ebfm th\u00eam thu nh\u1eadp c\u00f9ng <span style={{ color: '#44E178' }}>Saladin Pro<\/span> <span style={{ color: '#FFC53A' }}>ngay h\u00f4m nay<\/span>\n <\/h2>\n <p className=\"sp-cta-lead\" style={{ margin: '30px 0 14px', fontSize: 16, lineHeight: 1.6, color: 'rgba(255,255,255,0.72)', maxWidth: 560 }}>\n Kh\u00f4ng ph\u00ed tham gia, kh\u00f4ng r\u00e0ng bu\u1ed9c th\u1eddi gian. \u0110\u0103ng k\u00fd online v\u00e0 b\u1eaft \u0111\u1ea7u nh\u1eadn th\u00f9 lao ngay t\u1eeb \u0111\u01a1n \u0111\u1ea7u ti\u00ean.\n <\/p>\n\n <a href={REG_URL} target=\"_blank\" rel=\"noopener\" style={{\n marginTop: 30,\n background: 'var(--bg-primary-action)',\n color: 'var(--text-on-primary)',\n padding: '16px 34px', borderRadius: 'var(--radius-lg)', border: 'none',\n fontFamily: 'inherit', fontWeight: 700, fontSize: 16,\n boxShadow: 'var(--shadow-md)',\n display: 'inline-flex', alignItems: 'center', gap: 10,\n whiteSpace: 'nowrap', textDecoration: 'none',\n transition: 'background 150ms, transform 150ms'\n }}\n onMouseEnter={(e) => {e.currentTarget.style.background = 'var(--bg-primary-action-hover)';e.currentTarget.style.transform = 'translateY(-1px)';}}\n onMouseLeave={(e) => {e.currentTarget.style.background = 'var(--bg-primary-action)';e.currentTarget.style.transform = 'translateY(0)';}}>\n \n \u0110\u0103ng k\u00fd tr\u1edf th\u00e0nh CTV\n <i className=\"ri-arrow-right-line\" style={{ fontSize: 18 }}><\/i>\n <\/a>\n\n <div style={{ marginTop: 14, fontSize: 13, color: 'rgba(255,255,255,0.55)' }}>\n H\u1ed7 tr\u1ee3 7 ng\u00e0y\/tu\u1ea7n \u00b7 Hotline <a href=\"tel:1900638454\" style={{ color: '#FFC53A', textDecoration: 'none', fontWeight: 700 }}>1900 638 454<\/a>\n <\/div>\n\n <div className=\"sp-finalcta-stats\" style={{\n marginTop: 44, paddingTop: 28, width: '100%',\n borderTop: '1px solid rgba(255,255,255,0.12)',\n display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24\n }}>\n {[\n { v: '2.000+', l: 'CTV ho\u1ea1t \u0111\u1ed9ng' },\n { v: '65%', l: 'Th\u00f9 lao\/\u0111\u01a1n', accent: '#FFC53A', prefix: 'L\u00ean \u0111\u1ebfn' },\n { v: '15+', l: 'Nh\u00e0 b\u1ea3o hi\u1ec3m' },\n { v: '0\u20ab', l: 'Ph\u00ed tham gia', accent: '#44E178' }].\n map((s, i) =>\n <div key={i} style={{ textAlign: 'center' }}>\n <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 6, flexWrap: 'nowrap' }}>\n {s.prefix && <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', whiteSpace: 'nowrap' }}>{s.prefix}<\/span>}\n <span style={{\n fontFamily: 'var(--font-display)', fontWeight: 800,\n fontSize: 30, color: s.accent || '#fff',\n letterSpacing: '-0.025em', lineHeight: 1, whiteSpace: 'nowrap'\n }}>{s.v}<\/span>\n <\/div>\n <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.6)', marginTop: 8, letterSpacing: '0.04em' }}>{s.l}<\/div>\n <\/div>\n )}\n <\/div>\n <\/div>\n <\/C>\n <\/section>);\n\n}\n\nObject.assign(window, { PartnersStrip, AudiencePathSection, WhySection, IncomeSection, HowItWorks, AudienceSection, DashboardSection, FaqSection, FinalCta });\n\nfunction AppNoChrome() {\n React.useEffect(() => {\n const obs = new IntersectionObserver((entries) => {\n entries.forEach((e) => {if (e.isIntersecting) e.target.classList.add('in');});\n }, { threshold: 0.1 });\n document.querySelectorAll('.reveal').forEach((el) => obs.observe(el));\n return () => obs.disconnect();\n }, []);\n return (\n <div id=\"sp-wp-root\">\n <ProHero \/><PartnersStrip \/><AudiencePathSection \/><WhySection \/><IncomeSection \/>\n <HowItWorks \/><AudienceSection \/><DashboardSection \/><FaqSection \/><FinalCta \/>\n <\/div>);\n\n}\nReactDOM.createRoot(document.getElementById('root')).render(<AppNoChrome \/>);\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Saladin Pro (no header\/footer)<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/pro.saladin.vn\/cong-tac-vien\/wp-json\/wp\/v2\/pages\/41"}],"collection":[{"href":"https:\/\/pro.saladin.vn\/cong-tac-vien\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pro.saladin.vn\/cong-tac-vien\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pro.saladin.vn\/cong-tac-vien\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pro.saladin.vn\/cong-tac-vien\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":11,"href":"https:\/\/pro.saladin.vn\/cong-tac-vien\/wp-json\/wp\/v2\/pages\/41\/revisions"}],"predecessor-version":[{"id":1363,"href":"https:\/\/pro.saladin.vn\/cong-tac-vien\/wp-json\/wp\/v2\/pages\/41\/revisions\/1363"}],"wp:attachment":[{"href":"https:\/\/pro.saladin.vn\/cong-tac-vien\/wp-json\/wp\/v2\/media?parent=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}