:root { --bg:#FFFAF6; --ink:#1C1730; --muted:#645F72; --line:#F1E6DD; --card:#fff; --peach:#FFEBDD; --o1:#FF7A1A; --o2:#FF3D6E; --ok:#16A34A; --bad:#E11D48; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--ink); }
a { color:var(--o1); }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
header.top { display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:10px; }
header.top img { height:34px; display:block; }
header.top nav { display:flex; gap:8px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px; padding:12px 22px; font:600 15px inherit; font-family:inherit; cursor:pointer; text-decoration:none; }
.btn:disabled { opacity:.6; cursor:wait; }
.grad { background:linear-gradient(90deg,var(--o1),var(--o2)); color:#fff; box-shadow:0 8px 24px -8px rgba(255,61,110,.55); }
.ghost { background:#fff; color:var(--ink); border:1px solid var(--line); }
.full { width:100%; }
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:40px 0 60px; }
.tag { display:inline-block; background:var(--peach); color:var(--o1); font-weight:700; font-size:12px; letter-spacing:.04em; padding:6px 12px; border-radius:999px; }
h1 { font-size:44px; line-height:1.15; margin:16px 0; letter-spacing:-.02em; }
h1 em, .hl { font-style:normal; background:linear-gradient(90deg,var(--o1),var(--o2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { color:var(--muted); font-size:17px; line-height:1.6; }
ul.checks { list-style:none; padding:0; margin:20px 0; color:var(--muted); }
ul.checks li { margin:8px 0; } ul.checks li::before { content:'✓'; color:var(--o1); font-weight:800; margin-right:10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:28px; box-shadow:0 20px 50px -30px rgba(28,23,48,.35); }
.card h2 { margin:0 0 6px; font-size:22px; }
label { display:block; font-size:13px; font-weight:600; margin:14px 0 6px; }
input { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font:inherit; background:#fff; }
input:focus { outline:2px solid var(--o1); border-color:transparent; }
.muted { color:var(--muted); font-size:14px; }
.center { text-align:center; }
.err { color:var(--bad); font-size:14px; min-height:20px; margin-top:10px; }
.okmsg { background:#DCFCE7; color:#166534; border-radius:12px; padding:12px 14px; font-size:14px; line-height:1.5; }
.status { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px dashed var(--line); font-size:15px; }
.pill { font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; }
.pill.active { background:#DCFCE7; color:var(--ok); } .pill.expired, .pill.suspended { background:#FFE4E6; color:var(--bad); }
section { padding:50px 0; }
section.alt { background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
h3.title { font-size:28px; text-align:center; margin:0 0 30px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.step h4 { margin:10px 0 6px; } .step p { color:var(--muted); margin:0; line-height:1.55; font-size:14.5px; white-space:pre-line; }
.num { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; background:linear-gradient(135deg,var(--o1),var(--o2)); }
.plan { text-align:center; position:relative; } .plan h4 { margin:0; } .plan .price { font-size:24px; font-weight:800; margin:10px 0 2px; } .plan .period { color:var(--o1); font-weight:700; font-size:14px; }
.plan.hot { border:2px solid var(--o1); } .plan .badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); }
.contact { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:18px; color:var(--muted); font-size:14.5px; }
.contact a { color:var(--ink); text-decoration:none; font-weight:600; }
code { background:var(--peach); padding:2px 6px; border-radius:6px; font-size:13px; }
footer { text-align:center; color:var(--muted); font-size:13px; padding:30px 0 40px; }
.narrow { max-width:460px; margin:30px auto 60px; }
.hidden { display:none !important; }
@media (max-width:860px) { .hero, .grid3 { grid-template-columns:1fr; } h1 { font-size:32px; } header.top img { height:28px; } .btn { padding:10px 16px; font-size:14px; } }
.small { font-size:13px; }
/* Bảng giá — giống fingmv.com */
.plans-sub { text-align:center; color:var(--muted); margin:-18px 0 40px; font-size:15.5px; }
.price-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; align-items:stretch; }
.price-card { border:1px solid var(--line); border-radius:18px; background:#fff; padding:28px 24px; display:flex; flex-direction:column; gap:14px; box-shadow:0 1px 2px rgba(40,20,10,.05), 0 8px 24px -12px rgba(40,20,10,.14); position:relative; transition:transform .18s ease, box-shadow .18s ease; }
.price-card:hover { transform:translateY(-3px); box-shadow:0 20px 36px -16px rgba(40,20,10,.28); }
.price-card.featured { border-color:var(--o1); box-shadow:0 0 0 2px #FFF0E2, 0 8px 24px -12px rgba(40,20,10,.14); }
.price-card h3 { margin:0; font-size:19px; } .price-card > p { margin:0; color:var(--muted); font-size:14.5px; line-height:1.55; }
.price-badge { position:absolute; top:-13px; left:24px; background:linear-gradient(90deg,var(--o1),var(--o2)); color:#fff; font-size:11.5px; font-weight:700; padding:4px 12px; border-radius:999px; }
.price-est { font-size:11.5px; font-weight:700; color:#96909F; background:#FFF3EA; padding:2px 9px; border-radius:999px; align-self:flex-start; }
.price-amount { display:flex; align-items:baseline; gap:6px; margin-top:4px; flex-wrap:wrap; }
.price-amount .amt { font-size:29px; font-weight:800; letter-spacing:-.01em; } .price-amount .per { font-size:13px; color:#96909F; font-weight:600; }
.price-list { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.price-list li { display:flex; gap:9px; font-size:13.5px; align-items:flex-start; line-height:1.45; }
.price-list li::before { content:"✓"; color:#D9490A; font-weight:800; flex-shrink:0; }
.price-card .btn { margin-top:auto; width:100%; }
.price-card .btn.ghost { border:1px solid var(--line); font-weight:700; }
.price-note { text-align:center; font-size:13px; color:#96909F; margin-top:26px; }
@media (max-width:900px) { .price-grid { grid-template-columns:1fr; max-width:400px; margin:0 auto; } }
/* Đầu mục + nút Theo tháng/Theo năm + hiệu ứng — giống fingmv.com */
.section-head { max-width:620px; margin:0 auto 8px; text-align:center; }
.section-head h2 { font-size:32px; margin:14px 0 0; letter-spacing:-.01em; }
.section-head p { margin:12px 0 0; color:var(--muted); font-size:15.5px; }
.eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#D9490A; background:#FFF0E2; padding:6px 13px; border-radius:999px; }
.price-toggle { display:flex; justify-content:center; margin:32px 0 44px; }
.price-toggle.off { margin:0 0 36px; }
.toggle-pill { display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:4px; background:#FFF3EA; }
.toggle-pill span { padding:9px 20px; border-radius:999px; font-size:13.5px; font-weight:700; color:var(--muted); cursor:pointer; user-select:none; transition:background .15s ease, color .15s ease; }
.toggle-pill span.active { background:linear-gradient(90deg,var(--o1),var(--o2)); color:#fff; }
.price-card { transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.price-card:hover { transform:translateY(-6px); box-shadow:0 20px 36px -16px rgba(40,20,10,.28); border-color:#FFC9A3; }
.price-card.featured:hover { border-color:var(--o1); }
.price-card .btn.ghost:hover { border-color:var(--o1); }
.reveal-ready .reveal { opacity:0; transform:translateY(26px); transition:opacity .65s cubic-bezier(.16,.8,.4,1), transform .65s cubic-bezier(.16,.8,.4,1); }
.reveal-ready .reveal.in-view { opacity:1; transform:translateY(0); }
.reveal-ready .reveal.in-view:hover { transform:translateY(-6px); }
.price-grid .reveal:nth-child(2) { transition-delay:.08s } .price-grid .reveal:nth-child(3) { transition-delay:.14s } .price-grid .reveal:nth-child(4) { transition-delay:.2s }
@media (max-width:860px) { .section-head h2 { font-size:25px; } }
@media (prefers-reduced-motion:reduce) { .reveal-ready .reveal { opacity:1; transform:none; transition:none; } }
.price-amount .save { display:inline-block; vertical-align:middle; margin-left:6px; font-size:12px; font-weight:800; letter-spacing:0; color:#fff; background:linear-gradient(90deg,var(--o1),var(--o2)); padding:3px 9px; border-radius:999px; position:relative; top:-4px; }
/* ---- Trang bán hàng dạng khối (thứ tự, bật/tắt và nội dung chỉnh ở /admin → Nội dung trang) ---- */
.blk-hero { padding:0; }
.blk { padding:64px 0; }
.blk.bg-white { background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.blk.bg-cream { background:var(--bg); }
.blk + .blk.bg-white, .blk.bg-white + .blk { border-top:0; }
.blk-contact { padding:0 0 40px; }
.blk-plans + .blk-contact { margin-top:-30px; }
.section-head { margin-bottom:34px; }
.section-head h2 em, .ft h2 em, .txt h2 em, .cta-band h2 em { font-style:normal; background:linear-gradient(90deg,var(--o1),var(--o2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Lưới trợ lý */
.mod-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.mod { background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px; display:flex; flex-direction:column; gap:12px; box-shadow:0 1px 2px rgba(40,20,10,.05), 0 8px 24px -12px rgba(40,20,10,.14); transition:transform .2s ease, box-shadow .2s ease; }
.mod:hover { transform:translateY(-4px); box-shadow:0 20px 36px -16px rgba(40,20,10,.28); }
.mod.soon { background:#FFF7F0; border-style:dashed; box-shadow:none; }
.mod-top { display:flex; justify-content:space-between; align-items:center; }
.mod-ic { width:48px; height:48px; border-radius:14px; background:#FFF0E2; color:#D9490A; display:grid; place-items:center; }
.mod-badge { font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; background:#DCFCE7; color:#166534; }
.mod-badge.s { background:#F1EEF6; color:#4C4466; }
.mod h3 { margin:0; font-size:21px; letter-spacing:-.01em; }
.mod > p { margin:0; color:var(--muted); line-height:1.6; font-size:14.5px; }
.mod ul.checks { margin:2px 0; font-size:14.5px; } .mod ul.checks li { margin:6px 0; }
.mod-foot { margin-top:auto; padding-top:10px; border-top:1px dashed var(--line); display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:13.5px; }
.mod-foot span { color:var(--muted); font-weight:700; } .mod-foot a { font-weight:700; text-decoration:none; }
/* Khối giới thiệu (chữ + ảnh) */
.ft { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.ft.rev .ft-text { order:2; }
.ft.solo { grid-template-columns:1fr; max-width:760px; }
.ft h2 { font-size:32px; line-height:1.2; letter-spacing:-.02em; margin:14px 0 12px; }
.ft .lead { margin:0 0 16px; }
.ft .btn { margin-top:8px; }
.ft-media img { width:100%; display:block; border-radius:20px; border:1px solid var(--line); box-shadow:0 20px 50px -30px rgba(28,23,48,.35); }
.ft-list { padding:26px 28px; } .ft-list ul.checks { margin:0; color:var(--ink); font-size:15.5px; } .ft-list ul.checks li { margin:12px 0; line-height:1.5; }
/* Khối chữ tự do */
.txt { max-width:780px; margin:0 auto; text-align:center; }
.txt h2 { font-size:32px; letter-spacing:-.02em; margin:14px 0 12px; }
.txt p { color:var(--muted); font-size:16px; line-height:1.75; margin:0 0 18px; }
.txt img { max-width:100%; border-radius:18px; margin:6px 0 18px; }
/* Dải kêu gọi */
.cta-band { background:var(--ink); color:#fff; border-radius:24px; padding:40px 44px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.cta-band h2 { margin:0 0 6px; font-size:28px; letter-spacing:-.02em; } .cta-band p { margin:0; color:#D6D3E0; }
/* Hỏi đáp */
.faq { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 20px; }
.faq summary { font-weight:700; cursor:pointer; }
.faq details p { color:var(--muted); line-height:1.7; margin:10px 0 0; }
@media (max-width:860px) { .ft { grid-template-columns:1fr; gap:24px; } .ft.rev .ft-text { order:0; } .blk { padding:44px 0; } .ft h2, .txt h2 { font-size:26px; } .cta-band { padding:28px; } }
/* Dải kêu gọi cuối trang (nền tối) */
.blk.bg-dark { background:radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255,122,26,.28), transparent 70%), linear-gradient(180deg,#2A1A2E,#21162A); color:#fff; padding:76px 0; }
.cta-in { text-align:center; max-width:760px; }
.cta-in h2 { font-size:36px; line-height:1.18; letter-spacing:-.02em; margin:0 0 14px; }
.cta-in h2 em { font-style:normal; background:linear-gradient(90deg,#FFB27A,#FF7A9C); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cta-sub { color:#E6E1EE; font-size:16.5px; margin:0 0 22px; }
.cta-list { list-style:none; padding:0; margin:0 auto 28px; width:fit-content; display:flex; flex-direction:column; gap:9px; text-align:left; color:#E6E1EE; font-size:15px; }
.cta-list li::before { content:'→'; color:var(--o1); font-weight:800; margin-right:10px; }
.cta-btn { background:#fff; color:#D9490A; font-weight:800; padding:14px 28px; }
.cta-btn:hover { background:#FFF3EA; }
/* Chân trang nhiều cột */
footer#cFooter { text-align:left; padding:52px 0 28px; color:var(--muted); }
.ftop { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:30px; border-bottom:1px solid var(--line); }
.fbrand img { height:32px; display:block; } .fbrand p { margin:10px 0 0; font-size:14.5px; max-width:340px; line-height:1.55; }
.fcols { display:flex; gap:56px; flex-wrap:wrap; }
.fcol { display:flex; flex-direction:column; gap:10px; min-width:120px; }
.fcol b { font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:#96909F; margin-bottom:4px; }
.fcol a, .fcol span { color:var(--ink); text-decoration:none; font-size:15px; } .fcol a:hover { color:var(--o1); }
.fbottom { padding-top:20px; font-size:13.5px; }
.fbottom em { color:#D9490A; }
@media (max-width:760px) { .cta-in h2 { font-size:27px; } .fcols { gap:32px; } }