@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=Barlow+Condensed:wght@700;800&display=swap');
:root{--gas:#f97316;--ev:#10b981;--blue:#3b82f6;--dark:#0f172a;--gray:#64748b;--light:#f8fafc;--border:#e2e8f0;--white:#fff;--r:16px;--rs:8px;--ff:'Be Vietnam Pro',sans-serif;--ffh:'Barlow Condensed',sans-serif}
.xeviet-wrap *{box-sizing:border-box;margin:0;padding:0}
.xeviet-wrap{font-family:var(--ff);color:var(--dark);line-height:1.6;max-width:1400px;width:100%;margin-left:auto;margin-right:auto}

/* Hero */
.xv-hero{background:linear-gradient(135deg,#0f172a,#1e3a5f 60%,#0f3460);padding:50px 24px;text-align:center;border-radius:var(--r);margin-bottom:36px;position:relative;overflow:hidden}
.xv-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(16,185,129,.18),transparent 60%),radial-gradient(ellipse at 25% 50%,rgba(249,115,22,.15),transparent 60%)}
.xv-hero-content{position:relative;z-index:1}
.xv-hero h1{font-family:var(--ffh);font-size:clamp(24px,5vw,50px);font-weight:800;color:#fff;letter-spacing:1px;line-height:1.1;margin-bottom:10px}
.xv-hero p{color:rgba(255,255,255,.75);font-size:16px}

/* Section */
.xv-section{margin-bottom:44px}
.xv-section-header{margin-bottom:18px}
.xv-section-header h2{font-family:var(--ffh);font-size:26px;font-weight:700}
.xv-section-header p{font-size:14px;color:var(--gray);margin-top:4px}
.xv-fuel-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.xv-update-info{font-size:13px;color:var(--gray)}
.xv-source-tag{background:#eff6ff;color:#3b82f6;font-size:12px;padding:2px 10px;border-radius:20px;font-weight:600}

/* Fuel grid */
.xv-fuel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.xv-fuel-card{background:var(--white);border:2px solid var(--border);border-radius:var(--r);padding:15px 12px;text-align:center;transition:all .2s;position:relative;overflow:hidden}
.xv-fuel-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
.xv-fc-primary::before{background:#ef4444}.xv-fc-secondary::before{background:#f97316}
.xv-fc-eco::before{background:#22c55e}.xv-fc-basic::before{background:#84cc16}
.xv-fc-diesel::before{background:#475569}.xv-fc-diesel2::before{background:#94a3b8}
.xv-fc-kerosene::before{background:#a855f7}.xv-fc-electric::before{background:#f59e0b}
.xv-fuel-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.09)}
.xv-fc-icon{font-size:22px;margin-bottom:4px}.xv-fc-label{font-weight:700;font-size:11px;color:var(--dark);margin-bottom:2px;line-height:1.3}
.xv-fc-price{font-family:var(--ffh);font-size:18px;font-weight:800;color:var(--dark);margin:5px 0 2px}
.xv-fc-unit{font-size:11px;color:var(--gray)}

/* ===== CALCULATOR ===== */
.xv-calc-wrap{background:var(--white);border:2px solid var(--border);border-radius:var(--r);overflow:hidden}
.xv-calc-inner{padding:24px}
.xv-calc-tabs-ui{display:flex;gap:4px;background:var(--light);padding:4px;border-radius:var(--rs);margin-bottom:20px}
.xv-ctab{flex:1;padding:10px;border:none;background:none;border-radius:6px;font-family:var(--ff);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.xv-ctab.active{background:var(--dark);color:#fff}
.xv-compare-row{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start}
.xv-vs-badge{width:40px;height:40px;border-radius:50%;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--ffh);font-size:14px;font-weight:800;margin-top:28px;flex-shrink:0}

/* Searchable vehicle select */
.xv-vsearch{position:relative;margin-bottom:0}
.xv-vsearch-input-wrap{display:flex;align-items:center;border:2px solid var(--border);border-radius:var(--rs);background:#fff;transition:border-color .2s;overflow:hidden}
.xv-vsearch-input-wrap:focus-within{border-color:var(--blue)}
.xv-vsearch-input{flex:1;padding:11px 14px;border:none;font-family:var(--ff);font-size:14px;outline:none;background:transparent;color:var(--dark)}
.xv-vsearch-input::placeholder{color:#94a3b8}
.xv-vsearch-clear{padding:0 12px;cursor:pointer;color:var(--gray);font-size:16px;line-height:1;transition:color .15s}
.xv-vsearch-clear:hover{color:var(--dark)}
.xv-vsearch-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:2px solid var(--border);border-radius:var(--rs);max-height:300px;overflow-y:auto;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.xv-vsd-group{padding:6px 12px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gray);background:#f8fafc;border-bottom:1px solid var(--border)}
.xv-vsd-item{padding:12px 16px;cursor:pointer;border-bottom:1px solid #f1f5f9;transition:background .12s}
.xv-vsd-item:hover,.xv-vsd-item.focused{background:#f0f9ff}
.xv-vsd-item:last-child{border-bottom:none}
.xv-vsd-name{font-size:14px;font-weight:700;color:var(--dark);margin-bottom:4px}
.xv-vsd-row2{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.xv-vsd-brand{font-size:12px;font-weight:700;color:var(--blue)}
.xv-vsd-sep{color:#cbd5e1;font-size:12px}
.xv-vsd-price-hi{font-size:13px;font-weight:700;color:var(--dark)}
.xv-vsd-tags{display:flex;gap:5px;flex-wrap:wrap}
.xv-vsd-tag{font-size:11px;padding:2px 8px;border-radius:5px;font-weight:600;white-space:nowrap}
.xv-vsd-tag.gas{background:#fff7ed;color:#c2410c}.xv-vsd-tag.ev{background:#ecfdf5;color:#065f46}
.xv-vsd-tag.bat{background:#fef3c7;color:#92400e}
.xv-vsd-tag.eng{background:#f0f9ff;color:#0369a1}
.xv-vsd-tag.pwr{background:#fdf4ff;color:#7e22ce}
.xv-vsd-empty{padding:16px;text-align:center;color:var(--gray);font-size:14px}

/* Vehicle preview card */
.xv-vpreview{background:var(--light);border:2px solid var(--border);border-radius:var(--rs);padding:14px 16px;margin-top:10px;animation:xv-fi .2s ease}
@keyframes xv-fi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.xv-vp-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.xv-vp-img{width:100px;height:70px;object-fit:contain;border-radius:6px;background:#fff;border:1px solid var(--border);flex-shrink:0}
.xv-vp-img-ph{width:100px;height:70px;background:#fff;border-radius:6px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:36px;flex-shrink:0}
.xv-vp-info{flex:1;min-width:160px}
.xv-vp-name{font-family:var(--ffh);font-size:18px;font-weight:700;margin-bottom:6px}
.xv-vp-specs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.xv-spec-tag{font-size:11px;font-weight:600;padding:3px 8px;border-radius:5px;white-space:nowrap}
.xv-spec-tag.gas{background:#fff7ed;color:#c2410c}.xv-spec-tag.ev{background:#ecfdf5;color:#065f46}
.xv-spec-tag.bat{background:#fef3c7;color:#92400e}.xv-spec-tag.eng{background:#f0f9ff;color:#0369a1}
.xv-spec-tag.pwr{background:#fdf4ff;color:#7e22ce}.xv-spec-tag.rng{background:#ecfdf5;color:#065f46}
.xv-vp-price{font-family:var(--ffh);font-size:18px;font-weight:800;color:var(--dark)}
.xv-type-tag{padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700}
.xv-type-tag.gas{background:#fff7ed;color:#c2410c}.xv-type-tag.ev{background:#ecfdf5;color:#065f46}

/* Params */
.xv-calc-params{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 20px}
.xv-cfield{margin-bottom:18px}
.xv-cfield label{display:block;font-size:12px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.xv-range-wrap{display:flex;align-items:center;gap:12px}
.xv-range{flex:1;accent-color:var(--blue)}
.xv-range-val{font-size:14px;font-weight:700;white-space:nowrap;min-width:65px}
.xv-select{width:100%;padding:11px 14px;border:2px solid var(--border);border-radius:var(--rs);font-family:var(--ff);font-size:14px;background:#fff;cursor:pointer;transition:border-color .2s;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%2364748b'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.xv-select:focus{outline:none;border-color:var(--blue)}
.xv-input-sm{padding:10px 14px;border:2px solid var(--border);border-radius:var(--rs);font-family:var(--ff);font-size:14px;transition:border-color .2s}
.xv-input-sm:focus{outline:none;border-color:var(--blue)}

/* Maintenance */
.xv-maint-section{border:2px solid var(--border);border-radius:var(--rs);overflow:hidden;margin:16px 0}
.xv-maint-title{padding:12px 16px;background:var(--light);cursor:pointer;font-weight:700;font-size:13px;display:flex;justify-content:space-between;user-select:none}
.xv-maint-title:hover{background:#f1f5f9}
.xv-maint-body{padding:12px 16px}
.xv-maint-note{font-size:12px;color:var(--gray);background:#fffbeb;padding:8px 12px;border-radius:6px;border-left:3px solid #fbbf24;margin-bottom:12px}
.xv-maint-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:7px 0;border-bottom:1px solid #f1f5f9}
.xv-maint-row:last-child{border:none}
.xv-maint-label-text{flex:1;font-size:13px;min-width:200px}
.xv-maint-input-wrap{display:flex;align-items:center;gap:6px}
.xv-maint-input{width:160px!important;padding:7px 10px!important;font-size:13px!important}
.xv-maint-unit{font-size:12px;color:var(--gray);white-space:nowrap}

.xv-submit-btn{width:100%;padding:15px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:var(--rs);font-family:var(--ff);font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;margin-top:8px}
.xv-submit-btn:hover{box-shadow:0 6px 20px rgba(16,185,129,.4);transform:translateY(-1px)}
.xv-submit-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}

/* Results */
.xv-result-area{border-top:3px solid var(--border);background:var(--light)}
.xv-result-placeholder{text-align:center;padding:60px 20px;color:var(--gray)}
.xv-placeholder-icon{font-size:60px;margin-bottom:16px}
.xv-loading{text-align:center;padding:60px 20px;color:var(--gray)}
.xv-spinner{width:40px;height:40px;border:4px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}

.xv-result-inner{padding:28px}
.xv-result-title{font-family:var(--ffh);font-size:24px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Period tabs */
.xv-period-tabs{display:flex;gap:4px;background:#e2e8f0;padding:4px;border-radius:var(--rs);margin-bottom:24px;width:fit-content}
.xv-ptab{padding:8px 20px;border:none;background:none;border-radius:6px;font-family:var(--ff);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.xv-ptab.active{background:var(--dark);color:#fff}

/* Summary cards */
.xv-summary-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px;margin-bottom:28px}
.xv-sum-card{border-radius:var(--rs);padding:18px;border:2px solid var(--border);background:var(--white)}
.xv-sum-card.hl-green{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border-color:#6ee7b7}
.xv-sum-card.hl-blue{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-color:#93c5fd}
.xv-sum-label{font-size:12px;color:var(--gray);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.xv-sum-value{font-family:var(--ffh);font-size:22px;font-weight:800}

/* Breakdown table */
.xv-breakdown-title{font-weight:700;font-size:15px;margin-bottom:12px}
.xv-breakdown-table{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--rs);overflow:hidden;border:2px solid var(--border);margin-bottom:24px}
.xv-breakdown-table th{background:#f1f5f9;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gray);padding:10px 14px;text-align:left}
.xv-breakdown-table th:last-child{text-align:right}
.xv-breakdown-table td{padding:10px 14px;font-size:14px;border-bottom:1px solid #f1f5f9}
.xv-breakdown-table tr:last-of-type td{border-bottom:none}
.xv-td-amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.xv-bar-cell{padding:10px 14px;width:30%}
.xv-bar{height:8px;border-radius:4px;background:var(--blue);transition:width .5s ease;min-width:2px}
.xv-total-row td{font-weight:800;font-size:15px;background:#f8fafc;border-top:2px solid var(--border)!important}

/* ===== VERTICAL BAR CHART for compare ===== */
.xv-vchart-section{margin-bottom:28px}
.xv-vchart-title{font-weight:700;font-size:15px;margin-bottom:16px}
.xv-vchart-wrap{background:var(--white);border:2px solid var(--border);border-radius:var(--rs);padding:24px;overflow:hidden}
.xv-vchart-legend{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.xv-vchart-leg{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.xv-vchart-dot{width:14px;height:14px;border-radius:3px;flex-shrink:0}
.xv-vchart-bars{display:flex;align-items:flex-end;justify-content:center;gap:24px;height:240px;position:relative}
.xv-vchart-bars::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--border)}
.xv-vbar-group{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:140px}
.xv-vbar-value{font-family:var(--ffh);font-size:16px;font-weight:800;text-align:center;line-height:1.2}
.xv-vbar-fill{width:80px;border-radius:6px 6px 0 0;transition:height .6s ease;position:relative;min-height:4px}
.xv-vbar-fill.c1{background:linear-gradient(to top,#2563eb,#60a5fa)}
.xv-vbar-fill.c2{background:linear-gradient(to top,#ea580c,#fb923c)}
.xv-vbar-label{font-size:13px;font-weight:600;text-align:center;color:var(--gray);max-width:140px;word-break:break-word;line-height:1.3}

/* Compare layout */
.xv-cmp-summary{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch;margin-bottom:20px}
.xv-cmp-box{padding:18px;border:2px solid var(--border);border-radius:var(--rs);background:var(--white);text-align:center}
.xv-cmp-box.winner{border-color:#10b981;background:linear-gradient(135deg,#ecfdf5,#d1fae5)}
.xv-cmp-name{font-weight:700;font-size:15px;margin-bottom:8px}
.xv-cmp-annual{font-family:var(--ffh);font-size:26px;font-weight:800}
.xv-cmp-annual small{font-size:14px;font-family:var(--ff);color:var(--gray)}
.xv-winner-badge{margin-top:8px;background:#10b981;color:#fff;font-size:12px;font-weight:700;padding:4px 14px;border-radius:20px;display:inline-block}
.xv-vs-mid{display:flex;align-items:center;justify-content:center;font-family:var(--ffh);font-size:18px;font-weight:800;color:var(--gray)}
.xv-diff-note{background:#f0fdf4;border:2px solid #86efac;border-radius:var(--rs);padding:14px 18px;margin:16px 0;font-size:14px}
.xv-green{color:#16a34a}
.xv-breakeven{background:linear-gradient(135deg,#eff6ff,#dbeafe);border:2px solid #93c5fd;border-radius:var(--rs);padding:18px;text-align:center;margin-bottom:20px}
.xv-breakeven-num{font-family:var(--ffh);font-size:42px;font-weight:800;color:#1d4ed8}
.xv-breakeven-label{font-size:13px;color:#1e40af;margin-top:4px}
.xv-cmp-tables{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.xv-cmp-tbl-title{font-weight:700;font-size:13px;color:var(--gray);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}

@media(max-width:768px){
  .xv-fuel-grid{grid-template-columns:repeat(3,1fr)}
  .xv-compare-row,.xv-cmp-summary{grid-template-columns:1fr;gap:12px}
  .xv-vs-badge,.xv-vs-mid{margin:0 auto}
  .xv-cmp-tables{grid-template-columns:1fr}
  .xv-vchart-bars{gap:12px}
  .xv-vbar-fill{width:60px}
  .xv-vbar-group{min-width:100px}
}
@media(max-width:480px){
  .xv-fuel-grid{grid-template-columns:repeat(2,1fr)}
  .xv-summary-cards{grid-template-columns:1fr}
}

/* Preview card row 2 */
.xv-vp-row2 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.xv-vp-brand { font-size:13px; font-weight:700; color:var(--blue); }
.xv-vp-price-val { font-size:14px; font-weight:800; color:var(--dark); }
.xv-vp-name { font-family:var(--ffh); font-size:20px; font-weight:700; margin-bottom:4px; }

/* Dropdown max height and scroll */
.xv-vsearch-dropdown { max-height:360px; }