/* ==========================================================================
   VinFastNT - assets/css/vfnt-style.css
   Class prefix: vfnt-
   ========================================================================== */

:root{
	--vfnt-primary:#0a5fd1;
	--vfnt-primary-dark:#063f8c;
	--vfnt-blue-bg:#eef4ff;
	--vfnt-dark:#0b1e3d;
	--vfnt-text:#1c2b3a;
	--vfnt-muted:#5c6b7a;
	--vfnt-border:#e3e8f0;
	--vfnt-red:#e0332f;
	--vfnt-radius:12px;
	--vfnt-shadow:0 6px 24px rgba(10,40,90,.08);
	--vfnt-container:1200px;
	font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
body.vfnt-body{margin:0;color:var(--vfnt-text);line-height:1.55;background:#fff;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
.vfnt-container{max-width:var(--vfnt-container);margin:0 auto;padding:0 20px;}
.vfnt-center{text-align:center;}
.vfnt-empty{color:var(--vfnt-muted);}

/* Buttons ---------------------------------------------------------------- */
.vfnt-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 20px;border-radius:8px;border:2px solid transparent;font-weight:600;font-size:15px;cursor:pointer;transition:.2s;}
.vfnt-btn-primary{background:var(--vfnt-primary);color:#fff;}
.vfnt-btn-primary:hover{background:var(--vfnt-primary-dark);}
.vfnt-btn-outline{background:#fff;border-color:var(--vfnt-primary);color:var(--vfnt-primary);}
.vfnt-btn-outline:hover{background:var(--vfnt-blue-bg);}
.vfnt-btn-ghost{background:transparent;border-color:var(--vfnt-border);color:var(--vfnt-text);}
.vfnt-btn-block{width:100%;margin-bottom:10px;}

/* Header ------------------------------------------------------------------ */
.vfnt-header{border-bottom:1px solid var(--vfnt-border);position:sticky;top:0;background:#fff;z-index:100;}
.vfnt-header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px;}
.vfnt-logo-text{font-size:22px;font-weight:800;color:var(--vfnt-primary);}
.vfnt-logo-text em{font-style:normal;color:var(--vfnt-dark);}
.vfnt-menu{display:flex;gap:28px;}
.vfnt-menu a{font-weight:600;font-size:15px;color:var(--vfnt-text);padding:6px 0;border-bottom:2px solid transparent;}
.vfnt-menu li.current-menu-item>a,.vfnt-menu a:hover{color:var(--vfnt-primary);border-color:var(--vfnt-primary);}
.vfnt-header-actions{display:flex;align-items:center;gap:14px;}
.vfnt-btn-hotline{white-space:nowrap;}
.vfnt-burger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;}
.vfnt-burger span{width:24px;height:2px;background:var(--vfnt-dark);}

@media(max-width:900px){
	.vfnt-nav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--vfnt-border);}
	.vfnt-nav.is-open{display:block;}
	.vfnt-menu{flex-direction:column;padding:14px 20px;gap:14px;}
	.vfnt-burger{display:flex;}
	.vfnt-btn-hotline span,.vfnt-btn-hotline{font-size:13px;padding:9px 12px;}
}

/* Hero --------------------------------------------------------------------*/
.vfnt-hero{background:linear-gradient(135deg,#eaf1ff 0%,#fff 60%);padding:60px 0;overflow:hidden;}
.vfnt-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.vfnt-hero-text h1{font-size:40px;line-height:1.15;font-weight:900;color:var(--vfnt-dark);margin:0 0 18px;}
.vfnt-hero-text h1 span{display:block;color:var(--vfnt-primary);}
.vfnt-hero-voucher{font-size:18px;font-weight:700;margin:0 0 4px;}
.vfnt-hero-voucher strong{font-size:40px;color:var(--vfnt-primary);margin:0 6px;}
.vfnt-hero-note{color:var(--vfnt-muted);font-size:13px;margin-bottom:22px;}
.vfnt-hero-actions{display:flex;flex-wrap:wrap;gap:12px;}
.vfnt-hero-img img{border-radius:var(--vfnt-radius);}
@media(max-width:900px){.vfnt-hero-inner{grid-template-columns:1fr;}.vfnt-hero-text h1{font-size:30px;}}

/* Sections ------------------------------------------------------------- */
.vfnt-section{padding:60px 0;}
.vfnt-section-alt{background:var(--vfnt-blue-bg);}
.vfnt-section-title{font-size:28px;font-weight:800;color:var(--vfnt-dark);margin:0 0 30px;}
.vfnt-section-sub{color:var(--vfnt-muted);margin-top:-20px;margin-bottom:30px;}
.vfnt-eyebrow{display:inline-block;color:var(--vfnt-primary);font-weight:700;letter-spacing:.06em;font-size:13px;margin-bottom:8px;}

/* Product grid & cards ---------------------------------------------------*/
.vfnt-product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.vfnt-product-grid-service{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.vfnt-product-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.vfnt-product-grid{grid-template-columns:1fr 1fr;gap:12px;}}

.vfnt-product-card{position:relative;background:#fff;border:1px solid var(--vfnt-border);border-radius:var(--vfnt-radius);padding:18px;text-align:center;transition:.2s;display:block;}
.vfnt-product-card:hover{box-shadow:var(--vfnt-shadow);transform:translateY(-3px);}
.vfnt-product-thumb img{margin:0 auto 12px;max-height:110px;object-fit:contain;}
.vfnt-product-name{font-size:16px;font-weight:700;margin:0 0 6px;}
.vfnt-product-price{font-size:13px;color:var(--vfnt-muted);margin:0;}
.vfnt-product-price strong{color:var(--vfnt-primary);}
.vfnt-badge-new{position:absolute;top:10px;right:10px;background:var(--vfnt-primary);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;}

/* Intro block --------------------------------------------------------------*/
.vfnt-intro-block{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;background:#fff;border:1px solid var(--vfnt-border);border-radius:var(--vfnt-radius);padding:36px;box-shadow:var(--vfnt-shadow);}
.vfnt-intro-text h2{font-size:26px;font-weight:800;margin:6px 0 14px;}
.vfnt-intro-text h2 strong{color:var(--vfnt-primary);}
.vfnt-intro-features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0;font-weight:600;font-size:14px;}
.vfnt-intro-img img{border-radius:var(--vfnt-radius);}
@media(max-width:900px){.vfnt-intro-block{grid-template-columns:1fr;padding:22px;}}

/* Why block ----------------------------------------------------------------*/
.vfnt-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:26px 0 30px;}
.vfnt-why-item{background:#fff;border-radius:var(--vfnt-radius);padding:22px;border:1px solid var(--vfnt-border);}
.vfnt-why-item h4{margin:0 0 8px;font-size:16px;}
.vfnt-why-item p{margin:0;color:var(--vfnt-muted);font-size:14px;}
@media(max-width:900px){.vfnt-why-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.vfnt-why-grid{grid-template-columns:1fr;}}

/* News ----------------------------------------------------------------------*/
.vfnt-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:26px;}
.vfnt-news-card{background:#fff;border:1px solid var(--vfnt-border);border-radius:var(--vfnt-radius);overflow:hidden;display:block;}
.vfnt-news-thumb img{width:100%;height:170px;object-fit:cover;}
.vfnt-news-card h3{font-size:16px;padding:0 16px;margin:10px 0 6px;}
.vfnt-news-card p{padding:0 16px;color:var(--vfnt-muted);font-size:13px;margin:0 0 10px;}
.vfnt-news-date{padding:0 16px;color:var(--vfnt-primary);font-size:12px;font-weight:700;display:block;margin-top:12px;}
.vfnt-news-more{padding:0 16px 16px;display:block;color:var(--vfnt-primary);font-weight:700;font-size:13px;}
@media(max-width:900px){.vfnt-news-grid{grid-template-columns:1fr;}}

/* Contact card ----------------------------------------------------------- */
.vfnt-contact-card{display:inline-flex;gap:24px;align-items:center;background:#fff;border:1px solid var(--vfnt-border);border-radius:var(--vfnt-radius);padding:28px 36px;box-shadow:var(--vfnt-shadow);text-align:left;}
.vfnt-contact-avatar img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--vfnt-blue-bg);}
.vfnt-avatar-placeholder{width:96px;height:96px;border-radius:50%;background:var(--vfnt-blue-bg);display:flex;align-items:center;justify-content:center;font-size:38px;}
.vfnt-contact-tag{color:var(--vfnt-primary);font-weight:700;font-size:12px;letter-spacing:.03em;}
.vfnt-contact-info h4{margin:4px 0;font-size:21px;}
.vfnt-contact-info p{margin:0 0 14px;color:var(--vfnt-muted);}
.vfnt-contact-actions{display:flex;gap:10px;flex-wrap:wrap;}
@media(max-width:600px){.vfnt-contact-card{flex-direction:column;text-align:center;padding:26px 20px;width:100%;}}

/* Footer ------------------------------------------------------------------*/
.vfnt-footer{background:linear-gradient(180deg,var(--vfnt-dark) 0%,#081733 100%);color:#c9d6e8;padding:56px 0 0;margin-top:20px;}
.vfnt-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;}
.vfnt-footer-col p{font-size:13.5px;line-height:1.7;color:#a9bad4;}
.vfnt-footer-logo{display:block;margin-bottom:14px;font-size:24px;}
.vfnt-footer-col h4{color:#fff;margin:0 0 16px;font-size:15px;position:relative;padding-bottom:10px;}
.vfnt-footer-col h4::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;background:var(--vfnt-primary);border-radius:2px;}
.vfnt-footer-menu li,.vfnt-footer-contact li{margin-bottom:12px;font-size:14px;}
.vfnt-footer-contact li strong{color:#fff;}
.vfnt-footer-menu a,.vfnt-footer-contact a{color:#c9d6e8;transition:.2s;}
.vfnt-footer-menu a:hover,.vfnt-footer-contact a:hover{color:#fff;padding-left:3px;}
.vfnt-footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;font-size:13px;color:#8fa2bd;text-align:center;}
@media(max-width:800px){.vfnt-footer-grid{grid-template-columns:1fr;gap:30px;text-align:left;}}

/* Sticky icons --------------------------------------------------------------*/
.vfnt-sticky-icons{position:fixed;right:16px;bottom:90px;display:flex;flex-direction:column;gap:10px;z-index:200;}
.vfnt-sticky-item{background:#fff;border:1px solid var(--vfnt-border);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;align-items:center;font-size:11px;box-shadow:var(--vfnt-shadow);cursor:pointer;width:64px;}
.vfnt-sticky-ico{font-size:18px;}

/* Popup / Modal (Contact Form 7) --------------------------------------------*/
.vfnt-popup-overlay{position:fixed;inset:0;background:rgba(11,30,61,.55);display:none;align-items:center;justify-content:center;z-index:999;padding:16px;}
.vfnt-popup-overlay.is-open{display:flex;}
.vfnt-popup-box{background:#fff;border-radius:var(--vfnt-radius);padding:32px;max-width:460px;width:100%;position:relative;max-height:90vh;overflow:auto;}
.vfnt-popup-close{position:absolute;top:12px;right:14px;border:0;background:none;font-size:26px;cursor:pointer;line-height:1;color:var(--vfnt-muted);}
.vfnt-popup-title{margin:0 0 6px;font-size:20px;}
.vfnt-popup-sub{color:var(--vfnt-muted);font-size:14px;margin:0 0 18px;}
.vfnt-popup-form .wpcf7-form-control{width:100%;padding:11px 12px;border:1px solid var(--vfnt-border);border-radius:8px;margin-bottom:12px;font-size:14px;}
.vfnt-popup-form .wpcf7-form-control.wpcf7-submit{background:var(--vfnt-primary);color:#fff;border:none;font-weight:700;cursor:pointer;}
.vfnt-popup-form .wpcf7-form-control.wpcf7-submit:hover{background:var(--vfnt-primary-dark);}

/* Page hero (trang sản phẩm) ------------------------------------------------*/
.vfnt-page-hero{background:var(--vfnt-blue-bg);padding:50px 0 40px;}
.vfnt-page-hero h1{font-size:32px;font-weight:800;margin:6px 0 12px;}
.vfnt-page-hero p{color:var(--vfnt-muted);max-width:600px;margin:0 auto;}
.vfnt-page-title{font-size:30px;font-weight:800;margin:0 0 18px;}

/* ==========================================================================
   TRANG TÍNH GIÁ / BẢNG GIÁ CHI TIẾT (single-vfnt_sanpham.php)
   ========================================================================== */
.vfnt-calc-page{padding:36px 0 70px;background:#f6f8fb;}
.vfnt-calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
@media(max-width:960px){.vfnt-calc-grid{grid-template-columns:1fr;}}

.vfnt-card{background:#fff;border:1px solid var(--vfnt-border);border-radius:var(--vfnt-radius);padding:22px;margin-bottom:22px;}
.vfnt-card-title{font-size:17px;font-weight:800;margin:0 0 16px;color:var(--vfnt-dark);}
.vfnt-field-label{display:block;font-size:13px;font-weight:700;color:var(--vfnt-muted);margin:14px 0 6px;}
.vfnt-field-label:first-of-type{margin-top:0;}
.vfnt-select{width:100%;padding:11px 12px;border:1px solid var(--vfnt-border);border-radius:8px;font-size:14px;background:#fff;}
.vfnt-slider{width:100%;}

.vfnt-calc-car-image{margin:18px 0;background:var(--vfnt-blue-bg);border-radius:var(--vfnt-radius);padding:16px;}
.vfnt-color-swatches{display:flex;gap:10px;margin:6px 0;}
.vfnt-swatch{width:30px;height:30px;border-radius:50%;border:2px solid var(--vfnt-border);cursor:pointer;}
.vfnt-swatch.is-active{border-color:var(--vfnt-primary);}
.vfnt-color-name{font-size:13px;color:var(--vfnt-muted);margin:6px 0 0;}

.vfnt-spec-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--vfnt-border);}
.vfnt-spec-row span{display:block;font-size:12px;color:var(--vfnt-muted);}
.vfnt-spec-row strong{font-size:15px;}

.vfnt-checklist{display:flex;flex-direction:column;gap:2px;}
.vfnt-checkbox-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #f0f2f6;font-size:14px;}
.vfnt-checkbox-row:last-child{border-bottom:none;}
.vfnt-checkbox-row input{margin-right:8px;}
.vfnt-checkbox-row span{flex:1;}
.vfnt-checkbox-row em{color:var(--vfnt-primary);font-style:normal;font-weight:700;}
.vfnt-fee-value{font-weight:700;white-space:nowrap;}
.vfnt-uudai-note{font-size:12px;color:var(--vfnt-muted);margin:-4px 0 6px 26px;}
.vfnt-uudai-note-list{margin:-2px 0 10px 26px;padding-left:16px;}
.vfnt-uudai-note-list li{font-size:12.5px;color:var(--vfnt-muted);list-style:disc;margin-bottom:2px;}
.vfnt-uudai-note-list.vfnt-note-red li{color:var(--vfnt-red);font-weight:600;}

/* Chi phí khác tuỳ chọn (CPT vfnt_phikhac) */
.vfnt-fee-optional-tag{font-size:10px;font-weight:700;color:var(--vfnt-primary);background:var(--vfnt-blue-bg);padding:2px 7px;border-radius:999px;margin-left:6px;}

/* Loan callout - trả hàng tháng nổi bật */
.vfnt-loan-callout{background:var(--vfnt-blue-bg);border:2px solid var(--vfnt-primary);border-radius:var(--vfnt-radius);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;margin:14px 0;}
.vfnt-loan-callout span{font-weight:700;font-size:14px;color:var(--vfnt-dark);}
.vfnt-loan-callout strong{font-size:26px;color:var(--vfnt-primary);}
.vfnt-loan-callout em{display:block;font-style:normal;font-size:11px;color:var(--vfnt-muted);font-weight:400;margin-top:2px;}
.vfnt-summary-row.vfnt-row-emphasis strong{font-size:18px;}
.vfnt-loan-table td.vfnt-cell-red,.vfnt-loan-table th.vfnt-cell-red{color:var(--vfnt-red);}
#vfnt-loan-tonglai{color:var(--vfnt-red);font-size:17px;}
#vfnt-sum-tong{font-size:22px;}
.vfnt-loan-warning{background:#fff6f6;border:1px solid #ffd8d8;color:var(--vfnt-red);font-size:12.5px;padding:10px 12px;border-radius:8px;margin:10px 0 16px;}

.vfnt-toggle-group{display:flex;gap:10px;}
.vfnt-toggle-btn{flex:1;padding:12px;border:2px solid var(--vfnt-border);border-radius:8px;background:#fff;font-weight:700;cursor:pointer;font-size:14px;}
.vfnt-toggle-btn.is-active{border-color:var(--vfnt-primary);background:var(--vfnt-blue-bg);color:var(--vfnt-primary);}

.vfnt-summary-card{border-top:4px solid var(--vfnt-primary);}
.vfnt-summary-carname{font-weight:700;color:var(--vfnt-muted);margin:-8px 0 14px;}
.vfnt-summary-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f0f2f6;font-size:14px;gap:10px;}
.vfnt-summary-row em{font-style:normal;font-size:11px;color:var(--vfnt-muted);display:block;}
.vfnt-summary-total{border-top:2px solid var(--vfnt-dark);border-bottom:none;margin-top:6px;padding-top:14px;font-size:16px;}
.vfnt-summary-total strong{font-size:20px;}
.vfnt-text-red{color:var(--vfnt-red);}
.vfnt-text-primary{color:var(--vfnt-primary);}
.vfnt-summary-actions{margin-top:18px;}

.vfnt-loan-result{margin-top:8px;}
.vfnt-loan-disclaimer{font-size:12px;color:var(--vfnt-muted);margin:12px 0;}
.vfnt-table-wrap{max-height:320px;overflow:auto;border:1px solid var(--vfnt-border);border-radius:8px;}
.vfnt-loan-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.vfnt-loan-table th{position:sticky;top:0;background:var(--vfnt-blue-bg);padding:9px 8px;text-align:right;font-weight:700;}
.vfnt-loan-table th:first-child,.vfnt-loan-table td:first-child{text-align:center;}
.vfnt-loan-table td{padding:8px;text-align:right;border-top:1px solid #f0f2f6;}

/* ==========================================================================
   RESPONSIVE BỔ SUNG (tablet & mobile nhỏ)
   ========================================================================== */
@media(max-width:1024px){
	.vfnt-hero-text h1{font-size:34px;}
	.vfnt-why-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
	.vfnt-hero{padding:36px 0;text-align:center;}
	.vfnt-hero-inner{grid-template-columns:1fr;gap:24px;}
	.vfnt-hero-img{order:-1;}
	.vfnt-hero-text h1{font-size:28px;}
	.vfnt-hero-voucher{font-size:15px;}
	.vfnt-hero-voucher strong{font-size:30px;}
	.vfnt-hero-actions{justify-content:center;}
	.vfnt-section{padding:40px 0;}
	.vfnt-section-title{font-size:22px;margin-bottom:20px;}
	.vfnt-intro-features{grid-template-columns:1fr;}
	.vfnt-news-grid{grid-template-columns:1fr;}
	.vfnt-calc-grid{grid-template-columns:1fr;}
}
@media(max-width:560px){
	.vfnt-container{padding:0 14px;}
	.vfnt-header-inner{height:60px;}
	.vfnt-logo-text{font-size:18px;}
	.vfnt-btn-hotline{display:none;}
	.vfnt-hero-text h1{font-size:23px;}
	.vfnt-hero-voucher strong{font-size:26px;}
	.vfnt-hero-actions .vfnt-btn{flex:1 1 100%;font-size:13px;padding:11px 14px;}
	.vfnt-product-grid,.vfnt-product-grid-service{grid-template-columns:1fr 1fr;gap:12px;}
	.vfnt-product-card{padding:12px;}
	.vfnt-product-thumb img{max-height:80px;}
	.vfnt-why-grid{grid-template-columns:1fr;}
	.vfnt-card{padding:16px;}
	.vfnt-loan-callout{flex-direction:column;align-items:flex-start;gap:6px;}
	.vfnt-loan-callout strong{font-size:22px;}
	.vfnt-sticky-icons{bottom:70px;right:10px;}
	.vfnt-sticky-item{width:56px;padding:6px 8px;}
}