/* =====================================================================
   THỊNH VƯỢNG CAPITAL — lớp giao diện nền tối

   Toàn trang nền chàm sâu, chỉ đổi sắc độ theo khối. File này nạp SAU
   site.css và chỉ ghi đè màu sắc; site.css vẫn giữ toàn bộ phần bố cục,
   khoảng cách và responsive. Tách hai tầng như vậy để sau này muốn làm
   thêm bản nền sáng thì chỉ cần thay file này.
   ===================================================================== */

:root {
    --vfn-bg: #110A44;          /* nền chính toàn trang */
    --vfn-bg-deep: #01013F;     /* khối đậm hơn: cảm nhận, số liệu, liên hệ */
    --vfn-bg-purple: #14056A;   /* khối tím sáng hơn: hỏi đáp, dải CTA */
    --vfn-ink: #FFFFFF;
    --vfn-muted: #B9B6D4;       /* 9,2:1 trên nền chàm — đạt AA */
    --vfn-line: rgba(31, 212, 230, .40);
    --vfn-line-soft: rgba(255, 255, 255, .12);

    /* Nút gradient. Bản gốc dùng #2CAAD3 → #A628EA, nhưng chữ trắng trên đầu
       cyan ấy chỉ đạt 2,7:1 trong khi chuẩn AA cần 4,5. Đã hạ độ sáng hai đầu
       để giữ đúng dải cyan → tím mà chữ vẫn đọc được: 5,9:1 và 6,5:1. */
    --vfn-grad: linear-gradient(90deg, #166B8E 0%, #8E22C9 100%);
    --vfn-grad-hover: linear-gradient(90deg, #1A7DA6 0%, #A129E0 100%);
}

.vfn { background: var(--vfn-bg); color: #fff; }
:where(.vfn) :where(h1, h2, h3) { color: #fff; }
:where(.vfn) :where(a) { color: var(--vfn-cyan); }

/* ---------- Nền từng khối ---------- */
.vfn-section { background: transparent; }
.vfn-section--soft { background: var(--vfn-bg-deep); }
.vfn-abfaq { background: var(--vfn-bg-purple); }
.vfn-works { background: var(--vfn-bg-deep); border-block-color: rgba(255, 255, 255, .10); }
.vfn-stats { background: var(--vfn-bg-deep); }
.vfn-contact { background: var(--vfn-bg-deep); }
.vfn-ctaband { background: var(--vfn-bg-purple); }

/* ---------- Tiêu đề khối ---------- */
.vfn-head h2 { color: #fff; }
.vfn-head__desc, .vfn-section .vfn-head p { color: var(--vfn-muted); }
.vfn-eyebrow { color: var(--vfn-cyan); }

/* ---------- Thẻ: nền gần trong suốt, viền cyan ---------- */
.vfn-card, .vfn-hl__item, .vfn-how__item, .vfn-commit__list li,
.vfn-abfaq__item, .vfn-formwrap {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--vfn-line);
    border-radius: 10px;
    box-shadow: none;
    color: #fff;
}
.vfn-card:hover, .vfn-hl__item:hover, .vfn-how__item:hover {
    border-color: var(--vfn-cyan);
    box-shadow: 0 0 0 1px rgba(31, 212, 230, .30), 0 18px 44px rgba(0, 0, 0, .38);
}
.vfn-card h3, .vfn-hl__item h3, .vfn-value h3, .vfn-pillar h3, .vfn-step h3 { color: #fff; }
.vfn-card p, .vfn-hl__item p, .vfn-value p, .vfn-pillar p, .vfn-step p,
.vfn-field__desc, .vfn-post__excerpt, .vfn-plan__desc { color: var(--vfn-muted); }
.vfn-pillar { background: rgba(255, 255, 255, .04); border-color: var(--vfn-line-soft); }

/* Khối nổi bật đè lên hero cần nền đặc để tách khỏi hero phía sau */
.vfn-hl__item { background: var(--vfn-bg-deep); }

/* ---------- Ô biểu tượng ---------- */
.vfn-ico {
    background: rgba(31, 212, 230, .10) !important;
    color: var(--vfn-cyan) !important;
    box-shadow: inset 0 0 0 1px rgba(31, 212, 230, .35);
}
.vfn-field__body .vfn-ico { background: var(--vfn-bg) !important; }

/* ---------- Nút viên thuốc, nền gradient ---------- */
.vfn-btn { border-radius: 999px; padding: 14px 32px; min-height: 50px; font-weight: 600; }
.vfn-btn--primary { background: var(--vfn-grad); color: #fff; border-color: transparent; }
.vfn-btn--primary:hover { background: var(--vfn-grad-hover); color: #fff; border-color: transparent; }
.vfn-btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.vfn-btn--outline:hover { border-color: var(--vfn-cyan); color: var(--vfn-cyan); }
.vfn-btn--light { background: #fff; color: #110A44; border-color: #fff; }
.vfn-btn--light:hover { background: #E9E6FA; color: #110A44; }
.vfn-textlink { color: var(--vfn-cyan); }

/* ---------- Đầu trang ---------- */
.vfn-header, .vfn-bar { background: var(--vfn-bg); }
.vfn-bar { border-bottom-color: rgba(255, 255, 255, .10); }
.vfn-topbar { background: var(--vfn-bg-deep); }
.vfn-menu__link { color: #fff; }
.vfn-menu__link:hover { color: var(--vfn-cyan); background: rgba(255, 255, 255, .06); }
.vfn-menu__item.current-menu-item > .vfn-menu__link { color: var(--vfn-cyan); }
.vfn-menu__item.current-menu-item > .vfn-menu__link::after,
.vfn-menu__link::before { background: var(--vfn-cyan); }
.vfn-burger { border-color: rgba(255, 255, 255, .35); }
.vfn-burger span { background: #fff; }
.vfn-header.is-stuck .vfn-bar { box-shadow: 0 2px 18px rgba(0, 0, 0, .45); }

/* Ngăn kéo menu */
.vfn-drawer__panel { background: var(--vfn-bg); }
.vfn-drawer__head, .vfn-drawer__foot { border-color: rgba(255, 255, 255, .12); }
.vfn-drawer__close { border-color: rgba(255, 255, 255, .35); color: #fff; }
.vfn-menu--mobile .vfn-menu__item { border-bottom-color: rgba(255, 255, 255, .10); }
.vfn-submenu { background: var(--vfn-bg-deep); border-color: var(--vfn-line); }

/* ---------- Gói dịch vụ ---------- */
.vfn-plan__price span { color: #fff; }
.vfn-plan__price { border-bottom-color: rgba(255, 255, 255, .14); }
.vfn-plan__price small, .vfn-plan__list li { color: var(--vfn-muted); }
.vfn-plan__list svg { color: var(--vfn-cyan); }
.vfn-plan--hot { border-color: var(--vfn-cyan); background: rgba(31, 212, 230, .07); }
.vfn-plan__tag { background: var(--vfn-grad); color: #fff; }

/* ---------- Cảm nhận khách hàng ---------- */
.vfn-tm__mark { color: var(--vfn-cyan); }
.vfn-tm__item blockquote, .vfn-tm__item figcaption b { color: #fff; }
.vfn-tm__item figcaption { border-top-color: rgba(255, 255, 255, .14); }
.vfn-tm__item figcaption span { color: var(--vfn-muted); }

/* ---------- Hỏi đáp ---------- */
.vfn-abfaq__item summary { color: #fff; }
.vfn-abfaq__item summary svg { color: var(--vfn-cyan); }
.vfn-abfaq__item[open] { border-color: var(--vfn-cyan); box-shadow: none; }
.vfn-abfaq__item[open] summary { color: var(--vfn-cyan); }
.vfn-abfaq__a p { color: var(--vfn-muted); }

/* ---------- Tin tức & lĩnh vực ---------- */
.vfn-post__title a, .vfn-field__title a { color: #fff; }
.vfn-post__title a:hover, .vfn-field__title a:hover { color: var(--vfn-cyan); }
.vfn-post__date { color: var(--vfn-muted); }

/* ---------- Dải cách làm việc ---------- */
.vfn-works__item { color: #fff; }
.vfn-works__item svg { color: var(--vfn-cyan); }

/* ---------- Biểu mẫu ---------- */
.vfn-contact__intro h2 { color: #fff; }
.vfn-contact__lead, .vfn-consent, .vfn-form__micro { color: var(--vfn-muted); }
.vfn-contact__lbl { color: var(--vfn-cyan); }
.vfn-contact__info a, .vfn-field label { color: #fff; }
.vfn-field input, .vfn-field select, .vfn-field textarea {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}
.vfn-field input::placeholder, .vfn-field textarea::placeholder { color: rgba(255, 255, 255, .48); }
.vfn-field input:hover, .vfn-field select:hover, .vfn-field textarea:hover { border-color: var(--vfn-cyan); }
.vfn-field select option { background: var(--vfn-bg); color: #fff; }
.vfn-req { color: #FF8FA3; }

/* ---------- Nút gọi nổi & thanh hành động ---------- */
.vfn-call__btn { background: var(--vfn-bg-deep); color: #fff; border-color: var(--vfn-line); }
.vfn-call__btn:hover { background: var(--vfn-cyan); color: var(--vfn-bg); }
.vfn-callbar { background: var(--vfn-bg-deep); border-top-color: rgba(255, 255, 255, .14); }
.vfn-callbar__btn { color: #fff; }
.vfn-callbar__btn--cta { color: var(--vfn-cyan); }
.vfn-callbar__btn + .vfn-callbar__btn { border-left-color: rgba(255, 255, 255, .12); }

/* ---------- Ghi chú dữ liệu mẫu ---------- */
.vfn-samplenote { background: rgba(0, 0, 0, .30); }

/* ---------- Trang con ---------- */
.vfn-story__lead, .vfn-story__text p, .vfn-commit__head p, .vfn-pagebody__wrap { color: var(--vfn-muted); }
.vfn-story__text h2, .vfn-commit__head h2 { color: #fff; }
.vfn-commit__tick { background: rgba(31, 212, 230, .14); color: var(--vfn-cyan); }
.vfn-how__no { color: var(--vfn-cyan); }
.vfn-empty { background: rgba(255, 255, 255, .04); border-color: var(--vfn-line); color: var(--vfn-muted); }
.vfn-crumb { color: rgba(255, 255, 255, .64); }
.vfn-crumb a { color: rgba(255, 255, 255, .86); }

/* Link trong thẻ Lĩnh vực có độ ưu tiên cao hơn quy tắc .vfn-textlink chung
   (2 lớp so với 1) nên phải khai báo lại ở đây, nếu không nó giữ màu xanh
   của bản nền sáng và chỉ đạt 3,5:1 trên nền tối. */
.vfn-field .vfn-textlink--sm { color: var(--vfn-cyan); }

/* Số thứ tự các bước quy trình vẫn giữ màu xanh của bản nền sáng (3,5:1) */
.vfn-step__no { color: var(--vfn-cyan); }