/* =========================================================================
* Đồng bộ giao diện Flatsome cho GIỐNG theme VinFast cũ
* (font Be Vietnam Pro, màu #1464f4, cỡ chữ, kiểu menu). Nạp SAU CSS Flatsome.
* ========================================================================= */
:root {
--vfm-primary: #1464f4;
--vfm-ink: #141a26;
}
/* ---- Font Be Vietnam Pro cho TOÀN web (đè Lato/Dancing Script mặc định Flatsome) ---- */
/* Phải liệt kê đúng selector Flatsome (.nav > li > a, h1..h6,.heading-font) + !important
vì chúng đậm đặc/nạp sau hơn. Không đụng tới icon nên icon không vỡ. */
body,
.nav > li > a, .nav a, .header-nav a,
.mobile-sidebar-levels-2 .nav > li > ul > li > a,
.off-canvas-center .nav-sidebar.nav-vertical > li > a,
h1, h2, h3, h4, h5, h6, .heading-font, .alt-font, .uppercase, .entry-title,
button, input, select, textarea, .button, .btn {
font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
body {
color: #141a26;
font-size: 16px;
line-height: 1.65;
}
h1, h2, h3, h4, h5, h6,
.uppercase, .entry-title {
font-family: 'Be Vietnam Pro', sans-serif;
color: #141a26;
line-height: 1.25;
}
h1, h2, h3 { font-weight: 800; }
a { color: #1e6bff; }
a:hover { color: #00a651; }
/* ---- MENU header: title-case, đậm vừa, hover xanh (giống cũ) ---- */
.header-nav a,
.header-nav-main > li > a,
#masthead .nav > li > a,
.nav-line > li > a {
text-transform: none !important;
font-weight: 600 !important;
font-size: 16px !important;
letter-spacing: 0 !important;
color: #141a26;
}
.header-nav a:hover,
.header-nav-main > li:hover > a,
.header-nav-main > li.current-menu-item > a,
#masthead .nav > li.active > a,
#masthead .nav > li > a:hover {
color: #1464f4;
}
/* ---- Nút & màu nhấn ---- */
.button.primary,
.primary.button,
button[type="submit"].primary {
background-color: #1464f4;
border-color: #1464f4;
}
.button.primary:hover { background-color: #1e6bff; border-color: #1e6bff; }
/* ---- Header: khoảng cách menu + màu/nút GIỐNG HỆT bản cũ ---- */
/* menu: mỗi item padding 14px 2 bên + cách nhau ~34px (bản cũ) */
.header-nav-main > li { margin-left: 3px !important; margin-right: 3px !important; }
.header-nav-main > li > a { padding-left: 14px !important; padding-right: 14px !important; }
/* chỉ hover mới đổi màu (giống production: item hiện tại vẫn chữ đen thường) */
.header-nav-main > li > a:hover { color: #1464f4 !important; background: #f4f7fb !important; border-radius: 8px !important; }
.header-nav-main > li.active > a,
.header-nav-main > li.current-menu-item > a { color: #141a26 !important; background: none !important; }
/* nút "Nhận báo giá": nền #1464f4 + CHỮ TRẮNG, viên thuốc, cỡ 15px (bản cũ) */
.header-button .button.primary,
.header-button-1 .button.primary,
li.header-button-1 a.button {
color: #fff !important;
font-size: 15px !important;
font-weight: 600 !important;
padding: 11px 22px !important;
min-height: 0 !important;
line-height: 1.2 !important;
border-radius: 999px !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.header-button .button.primary:hover,
.header-button-1 .button.primary:hover,
li.header-button-1 a.button:hover { background-color: #1e6bff !important; color: #fff !important; }
/* ---- Topbar: chữ SÁNG dễ đọc + gradient xanh + cỡ 13.5px, cao 40px (giống bản cũ) ---- */
#top-bar, .header-top {
background: linear-gradient(90deg, #3d82ff 0%, #1464f4 100%) !important;
min-height: 40px !important;
}
#top-bar .flex-row, .header-top .flex-row { min-height: 40px !important; }
#top-bar, .header-top,
#top-bar .html, .header-top .html,
#top-bar .html *, .header-top .html *,
#top-bar span, #top-bar p, #top-bar li {
color: #e6edfb !important;
font-size: 13.5px !important;
}
#top-bar a, .header-top a { color: #fff !important; }
#top-bar a:hover, .header-top a:hover { color: #cfe0ff !important; }
/* ---- Tiêu đề mục (title) giống cũ: đậm, hoa ---- */
.is-b-center .title-inner,
.section-title-inner {
color: #141a26;
font-weight: 800;
}
/* ---- Banner hero full-width, không bo, sát mép ---- */
.vfm-single-xe { overflow-x: clip; }
/* ---- Hero trang chủ: ảnh banner TRÀN FULL-WIDTH 100vw (giống bản gốc) ---- */
/* bỏ khoảng trắng 30px giữa header và banner (padding-top mặc định của #content) */
.home #content.page-wrapper, .home #content { padding-top: 0 !important; }
.home #content .row-main,
.home #content .row-main > .col,
.home #content .row-main > .col > .col-inner { overflow: visible !important; }
.home #content .col-inner > .banner:first-child {
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
width: 100vw !important; max-width: 100vw !important;
/* cao hơn tỷ lệ ảnh 1 chút -> cover scale theo chiều cao -> hiện đủ BÁNH XE (không cắt đáy) */
height: 58vw !important;
padding-top: 0 !important;
min-height: 0 !important;
}
.home #content .col-inner > .banner:first-child .banner-inner,
.home #content .col-inner > .banner:first-child .banner-bg { height: 58vw !important; }
/* phủ kín khung, neo ảnh về ĐÁY -> nếu có cắt thì cắt phần trời phía trên, giữ nguyên xe/bánh */
.home #content .col-inner > .banner:first-child .banner-bg .bg {
background-size: cover !important;
background-position: 50% 100% !important;
}
/* ---- Logo header: hiện rõ, cao vừa phải ---- */
#logo img, .header-main #logo img { max-height: 50px !important; width: auto !important; }
/* ---- Footer: ẩn thanh "Absolute Footer" mặc định của Flatsome (trùng lặp) ---- */
.absolute-footer, #footer .absolute-footer { display: none !important; }
/* Footer VinFast tràn full-width, dòng bản quyền */
.footer-1 .vfm-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.vfm-footer__copy { border-top: 1px solid rgba(255,255,255,.14); margin-top: 26px; padding-top: 18px; color: #9fb0d0; font-size: 13.5px; text-align: center; }
@media (max-width: 850px){ .footer-1 .vfm-footer__cols { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .footer-1 .vfm-footer__cols { grid-template-columns: 1fr; } }
/* ---- Trang XE (Page): ẩn tiêu đề/excerpt Flatsome tự thêm + content full-width ---- */
.vfm-car-page .page-header,
.vfm-car-page .page-header-wrapper,
.vfm-car-page .page-header-excerpt,
.vfm-car-page .page-title,
.vfm-car-page .entry-summary { display: none !important; }
.vfm-car-page #content .page-wrapper,
.vfm-car-page #content { padding-top: 0 !important; }
.vfm-car-page .vfm-single-xe { width: 100%; }
/* ---- Footer VinFast: nền xanh TRÀN SÁT 2 MÉP màn hình (full-bleed 100vw) ---- */
#footer, #footer .footer-1, #footer .footer-1 .row,
#footer .footer-1 .col, #footer .footer-1 .col-inner,
#footer .footer-1 .textwidget { max-width: 100% !important; overflow: visible !important; }
#footer .footer-1 .section {
width: 100vw !important; max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
/* nội dung bên trong footer rộng, cách mép ~4% */
#footer .footer-1 .section .row { max-width: 100% !important; padding-left: 4vw !important; padding-right: 4vw !important; }
@media (max-width: 640px){ #footer .footer-1 .section .row { padding-left: 20px !important; padding-right: 20px !important; } }
/* ---- Content rộng đúng bằng bản cũ (~1470) thay vì bị Flatsome bó hẹp (~1350) ---- */
.home #content .row-main,
.home #content .row-main > .col { max-width: 1490px !important; }
.home #content .col-inner > .section > .section-content { max-width: 1470px !important; }
.home #content .col-inner > .section > .section-content > .row { max-width: 100% !important; }
/* ---- Thanh "Trả góp" (finance) tràn full-width như bản gốc ---- */
.vfm-finance {
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
width: 100vw !important; max-width: 100vw !important;
}
/* ---- Khối CTA "Đăng ký": nền xanh TRÀN FULL-WIDTH + nội dung rộng ---- */
.section:has(.vfm-cta__form) {
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
width: 100vw !important; max-width: 100vw !important;
}
.section:has(.vfm-cta__form) > .section-content { max-width: 1470px !important; margin: 0 auto !important; }
.section:has(.vfm-cta__form) .vfm-lead-form__row { grid-template-columns: 1fr 1fr !important; }
/* wpautop chèn
giữa 2 input -> ẩn đi để name/phone thẳng hàng 2 cột */
.vfm-lead-form__row br { display: none !important; }
/* ---- Footer: font ~14px + khung trắng cao đầy cột (nút nằm trong, đáy khung) ---- */
#footer .footer-1 { font-size: 14px !important; }
#footer .footer-1 .col:first-child > .col-inner,
#footer .footer-1 .col:first-child .ux-text { height: 100% !important; display: flex; flex-direction: column; }
#footer .footer-1 .vfm-footer__about { height: 100%; margin: 0 !important; }
#footer .footer-1 > .row { align-items: stretch !important; }
/* ---- Footer: form GỌN (SĐT + nút) giống bản gốc ---- */
.vfm-footer__lead { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; max-width: 560px; margin-top: 14px; }
.vfm-footer__lead input[type="tel"],
.vfm-footer__lead .vfm-btn { height: 52px; min-height: 52px; box-sizing: border-box; border: 0; border-radius: 10px; margin: 0; line-height: 1; }
.vfm-footer__lead input[type="tel"] { flex: 1 1 260px; padding: 0 16px; font-size: 15px; color: #141a26; }
.vfm-footer__lead .vfm-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; background: #0f1b34; color: #fff; padding: 0 26px; }
.vfm-footer__lead .vfm-btn:hover { background: #0a1226; color: #fff; }
.vfm-footer__lead .vfm-lead-form__msg { flex-basis: 100%; font-size: 13.5px; margin: 4px 0 0; }
/* ---- Footer: nút "Nhận báo giá" trong card = NỀN TRẮNG, chữ + viền xanh ---- */
#footer .footer-1 .vfm-footer__about .vfm-btn {
background: #fff !important;
color: #1464f4 !important;
border: 2px solid #1464f4 !important;
}
#footer .footer-1 .vfm-footer__about .vfm-btn:hover {
background: #1464f4 !important;
color: #fff !important;
border-color: #1464f4 !important;
}
/* các section chứa khối full-bleed không được cắt */
#content .row-main .col-inner > .section .section-content > .row { overflow: visible !important; }
/* ---- Mobile: giảm padding 2 bên (section 30px + col 15px = 45px thừa) để content rộng hơn ---- */
@media (max-width: 549px) {
.home #content .col-inner > .section { padding-left: 12px !important; padding-right: 12px !important; }
.home #content .row-main > .col { padding-left: 0 !important; padding-right: 0 !important; }
/* Footer: section 0, row.row-full-width bị margin âm + padding 20px (rule ≤640 đè) -> ép full-width căn giữa 12px */
#footer .footer-1 .section { padding-left: 0 !important; padding-right: 0 !important; }
#footer .footer-1 .section .row,
#footer .footer-1 .row { margin-left: 0 !important; margin-right: 0 !important; padding-left: 12px !important; padding-right: 12px !important; max-width: 100% !important; width: 100% !important; }
#footer .footer-1 .col { padding-left: 0 !important; padding-right: 0 !important; }
/* Trang CHI TIẾT XE: bỏ padding thừa (page-col 15 + section 30 = 45px) đẩy content lệch phải */
.vfm-car-page #content .row-main > .col { padding-left: 0 !important; padding-right: 0 !important; }
.vfm-car-page #content .col-inner > .section { padding-left: 12px !important; padding-right: 12px !important; }
/* các wrapper .vfm-detail__* tự có padding ngang 20px (cộng dồn với section 12px) -> bỏ trên mobile */
.vfm-car-page .vfm-detail__top,
.vfm-car-page .vfm-detail__section,
.vfm-car-page .vfm-detail__overview { padding-left: 0 !important; padding-right: 0 !important; }
/* bảng rộng -> cuộn ngang trong khung thay vì tràn/cắt */
.vfm-car-page .vfm-versions-wrap { overflow-x: auto; max-width: 100%; }
.vfm-car-page .vfm-onroad__table,
.vfm-car-page .vfm-spec-table { display: block; overflow-x: auto; max-width: 100%; }
/* chống mọi tràn ngang trên trang xe */
.vfm-car-page #content { overflow-x: clip; }
}
/* ---- Nút gọi/Zalo nổi: thu gọn + giảm quầng nhấp nháy để bớt che ảnh xe ---- */
.vfm-fab { right: 16px !important; bottom: 16px !important; gap: 12px !important; }
.vfm-fab__btn { width: 50px !important; height: 50px !important; }
.vfm-fab__btn svg { width: 30px !important; height: 30px !important; }
/* redefine keyframe (nạp sau vinfast.css nên đè): quầng nhỏ hơn 1.85 -> 1.35 */
@keyframes vfm-ring { 0% { transform: scale(1); opacity: .35; } 100% { transform: scale(1.35); opacity: 0; } }
/* ---- Máy tính lăn bánh: Flatsome ép height 2.5em (~37px) < line-height+padding -> cắt chữ. Cho cao đủ ---- */
.vfm-loan__field input[type="text"],
.vfm-loan__field input[type="number"],
.vfm-loan__field select,
.vfm-onroad__controls input,
.vfm-onroad__controls select,
.vfm-calc-card input[type="text"],
.vfm-calc-card select {
height: auto !important;
min-height: 46px !important;
line-height: 1.4 !important;
}
/* ---- Ảnh xe: object-fit CONTAIN (hiện đủ xe) + ép luôn nằm gọn trong khung (không tràn che tiêu đề) ---- */
.vfm-card__media, .vfm-post-card__media, .vfm-gallery__item { overflow: hidden !important; }
.vfm-card__media img,
.vfm-gallery__item img,
.vfm-post-card__media img {
object-fit: contain !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
}
/* ---- Bảng thông số: Flatsome đè padding cell về 0 -> ép lại cho chữ cách lề ---- */
.vfm-spec-table th, .vfm-spec-table td,
.vfm-spec-table__group th { padding-left: 16px !important; padding-right: 16px !important; }
.vfm-onroad__table th, .vfm-onroad__table td,
.vfm-versions th, .vfm-versions td { padding-left: 14px !important; padding-right: 14px !important; }
/* ---- Content trang CHI TIẾT XE rộng hơn (1350 -> 1470 như trang chủ) ---- */
.vfm-car-page #content .row-main,
.vfm-car-page #content .row-main > .col { max-width: 1490px !important; }
.vfm-car-page #content .col-inner > .section > .section-content { max-width: 1470px !important; }
/* ---- Swatch chọn màu xe: Flatsome ép min-height lên