.elementor-11205 .elementor-element.elementor-element-5dad6ec{--display:flex;}/* Start custom CSS for html, class: .elementor-element-a960039 */.fxvn-wrap { --navy: #0a1628; --navy-mid: #152342; --navy-light: #1e3560; --accent: #e8490a; --accent-warm: #f05c20; --accent-pale: #fff1ec; --gold: #c8941a; --gold-pale: #fef8e8; --teal: #0b6e5e; --teal-pale: #e5f4f1; --text-primary: #0e1c2f; --text-secondary: #4a5568; --text-muted: #718096; --border: #e2e8f0; --border-strong: #cbd5e0; --bg-page: #f7f8fa; --bg-card: #ffffff; --bg-surface: #f0f4f8; --font-body: 'IBM Plex Sans', sans-serif; --font-serif: 'IBM Plex Serif', serif; --max-w: 820px; --radius: 6px; --radius-lg: 10px; font-family: var(--font-body); font-size: 16px; line-height: 1.75; color: var(--text-primary); background: var(--bg-page); box-sizing: border-box; } .fxvn-wrap *, .fxvn-wrap *::before, .fxvn-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── GOOGLE FONTS ── */ /* Nhớ thêm vào của WP (qua theme hoặc plugin): */ /* ── TOP STRIP ── */ .fxvn-wrap .fxvn-topbar { background: var(--navy); color: #a8c0e0; font-size: 13px; padding: 8px 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .fxvn-wrap .fxvn-topbar a { color: #e8edf5; text-decoration: none; } .fxvn-wrap .fxvn-topbar-cta { background: var(--accent); color: #fff !important; padding: 4px 14px; border-radius: 4px; font-weight: 500; letter-spacing: 0.02em; transition: background 0.2s; } .fxvn-wrap .fxvn-topbar-cta:hover { background: var(--accent-warm); } /* ── HERO ── */ .fxvn-wrap .fxvn-hero { background: var(--navy); color: #fff; padding: 64px 24px 56px; position: relative; overflow: hidden; } .fxvn-wrap .fxvn-hero::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, transparent, transparent 60px, rgba(255,255,255,0.02) 60px, rgba(255,255,255,0.02) 61px ); } .fxvn-wrap .fxvn-hero-inner { max-width: var(--max-w); margin: 0 auto; position: relative; } .fxvn-wrap .fxvn-hero-tag { display: inline-block; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 10px; border-radius: 3px; margin-bottom: 20px; } .fxvn-wrap .fxvn-hero h1 { font-family: var(--font-serif); font-size: clamp(26px, 4vw, 38px); font-weight: 500; line-height: 1.3; color: #fff !important; margin-bottom: 20px; max-width: 700px; padding: 0; border: none; } .fxvn-wrap .fxvn-hero-lead { font-size: 17px; color: #94aec8; line-height: 1.7; max-width: 620px; margin-bottom: 32px; } .fxvn-wrap .fxvn-hero-meta { font-size: 13px; color: #64839f; display: flex; gap: 24px; flex-wrap: wrap; align-items: center; } .fxvn-wrap .fxvn-hero-meta span { display: flex; align-items: center; gap: 6px; } /* ── TOC ── */ .fxvn-wrap .fxvn-toc-box { background: var(--navy-mid); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 24px 28px; margin: 40px 0 0; color: #c5d5e8; } .fxvn-wrap .fxvn-toc-box h3 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #64839f; margin-bottom: 14px; padding: 0; border: none; background: none; } .fxvn-wrap .fxvn-toc-box ol { list-style: none; counter-reset: toc; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; padding: 0; margin: 0; } .fxvn-wrap .fxvn-toc-box li { counter-increment: toc; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; } .fxvn-wrap .fxvn-toc-box li::before { content: counter(toc) '.'; color: var(--accent); font-weight: 600; margin-right: 7px; font-size: 12px; } .fxvn-wrap .fxvn-toc-box a { color: #c5d5e8; text-decoration: none; } .fxvn-wrap .fxvn-toc-box a:hover { color: #fff; } /* ── MAIN CONTENT ── */ .fxvn-wrap .fxvn-main { padding: 56px 24px 80px; } .fxvn-wrap .fxvn-article { max-width: var(--max-w); margin: 0 auto; } /* Section header */ .fxvn-wrap .fxvn-sec-header { margin: 60px 0 24px; padding-top: 16px; border-top: 1px solid var(--border); } .fxvn-wrap .fxvn-sec-num { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); display: block; margin-bottom: 8px; } .fxvn-wrap .fxvn-sec-header h2 { font-family: var(--font-serif); font-size: clamp(20px, 3vw, 26px); font-weight: 500; line-height: 1.35; color: var(--navy); margin: 0; padding: 0; border: none; background: none; } /* Paragraphs */ .fxvn-wrap p { margin-bottom: 18px; color: var(--text-primary); } .fxvn-wrap p:last-child { margin-bottom: 0; } .fxvn-wrap strong { font-weight: 600; } /* Intro para */ .fxvn-wrap .fxvn-intro-text { font-size: 17px; line-height: 1.8; color: var(--text-primary); border-left: 3px solid var(--accent); padding-left: 20px; margin-bottom: 32px; margin-top: 40px; } /* Pull quote */ .fxvn-wrap .fxvn-pullquote { font-family: var(--font-serif); font-size: 19px; line-height: 1.6; color: var(--navy-mid); padding: 24px 28px; border-left: 3px solid var(--gold); background: var(--gold-pale); border-radius: 0 var(--radius) var(--radius) 0; margin: 32px 0; } /* Cards grid */ .fxvn-wrap .fxvn-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 28px 0; } .fxvn-wrap .fxvn-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; } .fxvn-wrap .fxvn-card-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 12px; } .fxvn-wrap .fxvn-card-icon.orange { background: var(--accent-pale); color: var(--accent); } .fxvn-wrap .fxvn-card-icon.teal { background: var(--teal-pale); color: var(--teal); } .fxvn-wrap .fxvn-card-icon.gold { background: var(--gold-pale); color: var(--gold); } .fxvn-wrap .fxvn-card-icon.navy { background: #e8edf5; color: var(--navy); } .fxvn-wrap .fxvn-card h4 { font-size: 14px; font-weight: 600; margin-bottom: 6px; padding: 0; border: none; } .fxvn-wrap .fxvn-card p { font-size: 14px; color: var(--text-secondary); margin: 0; line-height: 1.6; } /* Alert / note box */ .fxvn-wrap .fxvn-alert { border-radius: var(--radius); padding: 16px 20px; margin: 24px 0; font-size: 14.5px; line-height: 1.65; } .fxvn-wrap .fxvn-alert-warn { background: #fff8e6; border-left: 3px solid var(--gold); color: #5a3e0a; } .fxvn-wrap .fxvn-alert-danger { background: #fff0ee; border-left: 3px solid var(--accent); color: #6b1f0a; } .fxvn-wrap .fxvn-alert-info { background: var(--teal-pale); border-left: 3px solid var(--teal); color: #0a3d35; } .fxvn-wrap .fxvn-alert strong { font-weight: 600; } /* Checklist */ .fxvn-wrap .fxvn-checklist { list-style: none; margin: 20px 0; padding: 0; } .fxvn-wrap .fxvn-checklist li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.6; margin: 0; } .fxvn-wrap .fxvn-checklist li:last-child { border-bottom: none; } .fxvn-wrap .fxvn-checklist-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--teal-pale); color: var(--teal); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } /* Timeline */ .fxvn-wrap .fxvn-timeline { position: relative; padding-left: 24px; margin: 28px 0; } .fxvn-wrap .fxvn-timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border-strong); } .fxvn-wrap .fxvn-timeline-item { position: relative; padding: 0 0 28px 20px; } .fxvn-wrap .fxvn-timeline-item::before { content: ''; position: absolute; left: -17px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-page); } .fxvn-wrap .fxvn-tl-time { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 4px; } .fxvn-wrap .fxvn-tl-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .fxvn-wrap .fxvn-tl-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; } /* Compare table */ .fxvn-wrap .fxvn-compare-wrap { overflow-x: auto; margin: 28px 0; } .fxvn-wrap table.fxvn-compare { width: 100%; border-collapse: collapse; font-size: 14px; } .fxvn-wrap table.fxvn-compare th { background: var(--navy); color: #c5d5e8; padding: 12px 16px; text-align: left; font-weight: 500; font-size: 13px; letter-spacing: 0.03em; border: none; } .fxvn-wrap table.fxvn-compare th:first-child { border-radius: var(--radius) 0 0 0; } .fxvn-wrap table.fxvn-compare th:last-child { border-radius: 0 var(--radius) 0 0; } .fxvn-wrap table.fxvn-compare td { padding: 11px 16px; border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: top; line-height: 1.55; background: none; } .fxvn-wrap table.fxvn-compare tr:hover td { background: #f8fafc; } .fxvn-wrap .fxvn-badge { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 3px; } .fxvn-wrap .fxvn-badge-green { background: #e5f4ec; color: #166534; } .fxvn-wrap .fxvn-badge-orange { background: var(--accent-pale); color: var(--accent); } .fxvn-wrap .fxvn-badge-gray { background: #f0f0f0; color: #555; } /* Error list */ .fxvn-wrap .fxvn-error-list { margin: 20px 0; display: grid; gap: 12px; } .fxvn-wrap .fxvn-error-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; gap: 14px; align-items: flex-start; } .fxvn-wrap .fxvn-error-num { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-pale); border-radius: 3px; padding: 2px 7px; flex-shrink: 0; margin-top: 2px; letter-spacing: 0.04em; } .fxvn-wrap .fxvn-error-item-body h5 { font-size: 14px; font-weight: 600; margin-bottom: 3px; padding: 0; } .fxvn-wrap .fxvn-error-item-body p { font-size: 13.5px; color: var(--text-secondary); margin: 0; } /* Tips strip */ .fxvn-wrap .fxvn-tips-strip { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 28px; margin: 28px 0; } .fxvn-wrap .fxvn-tips-strip h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--text-muted); margin-bottom: 16px; padding: 0; border: none; } .fxvn-wrap .fxvn-tips-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .fxvn-wrap .fxvn-tip-item { border-left: 2px solid var(--accent); padding-left: 12px; font-size: 14px; line-height: 1.55; } .fxvn-wrap .fxvn-tip-item strong { display: block; font-weight: 600; font-size: 13px; margin-bottom: 2px; } /* FAQ */ .fxvn-wrap .fxvn-faq-list { margin-top: 16px; } .fxvn-wrap .fxvn-faq-item { border-bottom: 1px solid var(--border); } .fxvn-wrap .fxvn-faq-q { width: 100%; text-align: left; background: none; border: none; padding: 18px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--text-primary); line-height: 1.5; box-shadow: none; border-radius: 0; } .fxvn-wrap .fxvn-faq-q:hover { color: var(--accent); background: none; } .fxvn-wrap .fxvn-faq-arrow { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-surface); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: transform 0.2s, background 0.2s; color: var(--text-muted); margin-top: 2px; } .fxvn-wrap .fxvn-faq-item.open .fxvn-faq-arrow { transform: rotate(45deg); background: var(--accent-pale); color: var(--accent); } .fxvn-wrap .fxvn-faq-a { display: none; padding: 0 0 20px; font-size: 15px; color: var(--text-secondary); line-height: 1.75; } .fxvn-wrap .fxvn-faq-item.open .fxvn-faq-a { display: block; } /* CTA Block */ .fxvn-wrap .fxvn-cta-block { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 40px 36px; margin: 56px 0 0; display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; } .fxvn-wrap .fxvn-cta-text { flex: 1; min-width: 240px; } .fxvn-wrap .fxvn-cta-text h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: #fff !important; margin-bottom: 10px; line-height: 1.4; padding: 0; border: none; background: none; } .fxvn-wrap .fxvn-cta-text p { font-size: 15px; color: #94aec8; margin: 0; line-height: 1.7; } .fxvn-wrap .fxvn-cta-actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; } /* Buttons */ .fxvn-wrap .fxvn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius); font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none !important; transition: all 0.2s; white-space: nowrap; border: none; line-height: 1; } .fxvn-wrap .fxvn-btn-primary { background: var(--accent) !important; color: #fff !important; } .fxvn-wrap .fxvn-btn-primary:hover { background: var(--accent-warm) !important; transform: translateY(-1px); } .fxvn-wrap .fxvn-btn-outline { background: transparent !important; color: #c5d5e8 !important; border: 1px solid rgba(255,255,255,0.2) !important; } .fxvn-wrap .fxvn-btn-outline:hover { background: rgba(255,255,255,0.07) !important; } /* Sticky CTA bar */ .fxvn-sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--navy, #0a1628); border-top: 1px solid rgba(255,255,255,0.08); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; z-index: 9999; transform: translateY(100%); transition: transform 0.35s ease; font-family: 'IBM Plex Sans', sans-serif; } .fxvn-sticky-bar.visible { transform: translateY(0); } .fxvn-sticky-bar .fxvn-sticky-label { font-size: 14px; color: #94aec8; } .fxvn-sticky-bar .fxvn-sticky-label strong { color: #fff; } .fxvn-sticky-bar .fxvn-sticky-actions { display: flex; gap: 10px; flex-shrink: 0; } /* Footer */ .fxvn-wrap .fxvn-footer { background: var(--navy); color: #64839f; text-align: center; padding: 24px; font-size: 13px; } .fxvn-wrap .fxvn-footer a { color: #94aec8; } .fxvn-wrap .fxvn-footer p { margin-bottom: 8px; color: #64839f; } /* Final mini CTA */ .fxvn-wrap .fxvn-mini-cta { background: var(--accent-pale); border: 1px solid #f0c4b0; border-radius: var(--radius-lg); padding: 28px 32px; margin: 48px 0 0; display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; } .fxvn-wrap .fxvn-mini-cta-text { flex: 1; min-width: 220px; } .fxvn-wrap .fxvn-mini-cta-text p:first-child { font-weight: 600; font-size: 16px; color: var(--navy); margin-bottom: 6px; } .fxvn-wrap .fxvn-mini-cta-text p:last-child { font-size: 14.5px; color: var(--text-secondary); margin: 0; line-height: 1.65; } .fxvn-wrap .fxvn-mini-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } /* Responsive */ @media (max-width: 600px) { .fxvn-wrap .fxvn-cta-block { padding: 28px 22px; gap: 24px; } .fxvn-wrap .fxvn-cta-actions { flex-direction: row; flex-wrap: wrap; } .fxvn-wrap .fxvn-topbar { font-size: 12px; } .fxvn-sticky-bar { padding: 12px 16px; } .fxvn-sticky-bar .fxvn-sticky-label { font-size: 13px; } .fxvn-wrap .fxvn-toc-box ol { grid-template-columns: 1fr; } }/* End custom CSS */