/* ============================================================
   SALEXE – BMW Luxury  |  style.css
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --blue:        #1c69d4;
  --blue-dark:   #0d47a1;
  --blue-light:  #4da3ff;
  --dark:        #080808;
  --dark2:       #111;
  --dark3:       #1a1a1a;
  --gray:        #6c757d;
  --silver:      #a8a9ad;
  --gold:        #c9a84c;
  --white:       #ffffff;
  --off-white:   #f8f9fa;
  --border:      rgba(255,255,255,0.08);
  --gradient-blue: linear-gradient(135deg,#1c69d4 0%,#0d47a1 100%);
  --gradient-dark: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.88) 100%);
  --r: 14px;
  --r-lg: 20px;
  --t: all .3s cubic-bezier(.4,0,.2,1);
  --shadow: 0 4px 24px rgba(0,0,0,.12);
  --shadow-lg: 0 12px 50px rgba(0,0,0,.18);
  --shadow-blue: 0 8px 32px rgba(28,105,212,.4);
}

/* ── Reset ──────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Barlow','Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#1a1a1a;background:#fff;overflow-x:hidden;line-height:1.7;font-weight:400}
img{max-width:100%;display:block}
a{text-decoration:none;transition:var(--t)}

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar{background:var(--blue-dark);padding:8px 0;font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.12)}
.topbar a{color:rgba(255,255,255,.8);text-decoration:none;margin-right:18px;transition:var(--t)}
.topbar a:hover{color:#fff}
.topbar a i{margin-right:5px;font-size:11px}
.topbar-right a{color:rgba(255,255,255,.8);font-size:13px}
.topbar-right a:hover{color:#fff}

/* ── Navbar ─────────────────────────────────────────────────── */
.main-navbar{
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  padding:10px 0;
  border-bottom:1px solid rgba(28,105,212,.12);
  box-shadow:0 2px 20px rgba(28,105,212,.08);
  transition:var(--t);
}
.main-navbar.scrolled{padding:6px 0;background:rgba(255,255,255,.99);box-shadow:0 4px 30px rgba(28,105,212,.12)}
.brand-logo{display:flex;align-items:center;gap:10px}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-size:17px;font-weight:800;color:#1c69d4;letter-spacing:2.5px}
.brand-sub{font-size:9.5px;color:rgba(28,105,212,.65);letter-spacing:1.2px;text-transform:uppercase}

.nav-link{color:#1a2340!important;font-size:13.5px;font-weight:600;padding:7px 11px!important;border-radius:7px;transition:var(--t);letter-spacing:.3px}
.nav-link:hover,.nav-link.active{color:#1c69d4!important;background:rgba(28,105,212,.08)}
.nav-link.active{color:#1c69d4!important}
.dropdown-menu.dropdown-menu-dark{background:#fff!important;border:1px solid rgba(28,105,212,.12)!important;border-radius:10px;box-shadow:0 20px 60px rgba(28,105,212,.12);padding:8px}
.dropdown-item{color:#1a2340!important;border-radius:7px;padding:8px 14px;font-size:13.5px;transition:var(--t)}
.dropdown-item:hover{background:var(--blue)!important;color:#fff!important}
.btn-hotline{color:#fff;background:var(--gradient-blue);border:none;padding:7px 14px;border-radius:8px;font-size:13.5px;font-weight:600;transition:var(--t);box-shadow:0 4px 14px rgba(28,105,212,.3)}
.btn-hotline:hover{box-shadow:0 6px 20px rgba(28,105,212,.45);transform:translateY(-1px);color:#fff}

/* ── Global Buttons ─────────────────────────────────────────── */
.btn-bmw-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gradient-blue);
  color:#fff;
  padding:11px 26px;
  border-radius:8px;
  font-weight:600;
  font-size:14px;
  border:none;
  cursor:pointer;
  transition:var(--t);
  box-shadow:var(--shadow-blue);
  white-space:nowrap;
}
.btn-bmw-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(28,105,212,.5);color:#fff}
.btn-bmw-outline{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;
  color:#fff;
  padding:11px 26px;
  border-radius:8px;
  font-weight:600;
  font-size:14px;
  border:2px solid rgba(255,255,255,.4);
  transition:var(--t);
  white-space:nowrap;
}
.btn-bmw-outline:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff;transform:translateY(-2px)}

/* ── Section Utilities ──────────────────────────────────────── */
.section-label{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.section-label span{flex:1;max-width:40px;height:2px;background:var(--blue);display:inline-block;border-radius:2px}
.section-title{font-size:clamp(26px,4vw,40px);font-weight:800;color:var(--dark3);line-height:1.2;margin-bottom:16px}
.section-title-white{color:#fff}
.section-desc{font-size:15px;color:var(--gray);max-width:620px;line-height:1.8}
.section-header{margin-bottom:48px}

/* ── Fade Animations ────────────────────────────────────────── */
.fade-up{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* ═══════════════════════════════════════════════════════════
   1. HERO
══════════════════════════════════════════════════════════════ */
.hero-section{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#080808;
}
.hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 60% 50%,rgba(28,105,212,.18) 0%,transparent 65%),
             radial-gradient(ellipse at 10% 80%,rgba(28,105,212,.10) 0%,transparent 50%),
             #080808;
  z-index:1;
}
.hero-bg-car{
  position:absolute;right:-5%;top:50%;transform:translateY(-50%);
  width:58%;max-width:800px;
  z-index:2;
  filter:drop-shadow(0 20px 80px rgba(28,105,212,.3));
  animation:heroCarFloat 6s ease-in-out infinite;
}
@keyframes heroCarFloat{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-52%) translateX(-8px)}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,8,.9) 0%,rgba(8,8,8,.6) 50%,rgba(8,8,8,.15) 100%);z-index:2}
.hero-content{position:relative;z-index:3;padding:60px 0}
.hero-tagline{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--blue-light);margin-bottom:20px}
.hero-tagline::before{content:'';width:30px;height:2px;background:var(--blue-light);display:inline-block}
.hero-title{font-size:clamp(42px,6vw,76px);font-weight:900;color:#fff;line-height:1.08;margin-bottom:20px}
.hero-title span{color:var(--blue-light);display:block}
.hero-subtitle{font-size:16px;color:rgba(255,255,255,.65);line-height:1.8;margin-bottom:36px;max-width:480px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:50px}
.hero-stats{display:flex;gap:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.hero-stat-value{font-size:28px;font-weight:800;color:#fff;line-height:1}
.hero-stat-label{font-size:12px;color:rgba(255,255,255,.5);margin-top:4px;letter-spacing:.5px}

/* ═══════════════════════════════════════════════════════════
   2. CATEGORIES
══════════════════════════════════════════════════════════════ */
.categories-section{padding:72px 0;background:#f8f9fb}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}
@media(min-width:768px){.cat-grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:992px){.cat-grid{grid-template-columns:repeat(9,1fr)}}
.cat-card{
  background:#fff;border-radius:var(--r);padding:20px 10px;
  text-align:center;cursor:pointer;
  border:2px solid transparent;
  transition:var(--t);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.cat-card:hover,.cat-card.active{border-color:var(--blue);box-shadow:var(--shadow-blue);transform:translateY(-4px)}
.cat-icon{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#e8f0fe,#c5d8ff);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:22px;color:var(--blue);transition:var(--t)}
.cat-card:hover .cat-icon,.cat-card.active .cat-icon{background:var(--gradient-blue);color:#fff}
.cat-name{font-size:12.5px;font-weight:700;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-count{font-size:11px;color:var(--gray);margin-top:3px}

/* ═══════════════════════════════════════════════════════════
   3. CAR CARDS (shared)
══════════════════════════════════════════════════════════════ */
.cars-section{padding:80px 0}
.cars-section.bg-gray{background:#f8f9fb}
.car-card{
  background:#fff;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 2px 16px rgba(0,0,0,.07);
  transition:var(--t);cursor:pointer;
  border:1px solid rgba(0,0,0,.05);
  height:100%;display:flex;flex-direction:column;
}
.car-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,.14)}
.car-card-img{position:relative;overflow:hidden;aspect-ratio:16/9;background:#f0f0f0}
.car-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.car-card:hover .car-card-img img{transform:scale(1.06)}
.car-badge{
  position:absolute;top:12px;left:12px;
  padding:4px 10px;border-radius:20px;
  font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  z-index:2;
}
.badge-hot{background:#ef4444;color:#fff}
.badge-new{background:var(--blue);color:#fff}
.badge-sale{background:#f59e0b;color:#fff}
.badge-ev{background:#10b981;color:#fff}
.badge-m{background:#0a0a0a;color:#fff;border:1px solid rgba(255,255,255,.2)}
.badge-certified{background:#7c3aed;color:#fff}

.car-card-body{padding:18px 18px 10px;flex:1}
.car-card-series{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.car-card-name{font-size:15.5px;font-weight:700;color:#111;line-height:1.35;margin-bottom:10px}
.car-card-specs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.car-spec-item{font-size:11.5px;color:var(--gray);background:#f4f4f4;padding:3px 8px;border-radius:20px;display:flex;align-items:center;gap:4px}
.car-card-price{font-size:22px;font-weight:800;color:var(--blue);line-height:1}
.car-card-price-sale{font-size:13px;color:#999;text-decoration:line-through;margin-left:6px}
.car-card-price-label{font-size:11px;color:var(--gray);display:block;margin-top:3px;font-weight:400}
.car-card-footer{padding:14px 18px;border-top:1px solid #f0f0f0;display:flex;gap:8px}
.btn-card-detail,.btn-card-test{flex:1;padding:9px 0;border-radius:8px;font-size:13px;font-weight:600;text-align:center;transition:var(--t);cursor:pointer;border:none}
.btn-card-detail{background:#f4f6fa;color:#333}
.btn-card-detail:hover{background:var(--dark);color:#fff}
.btn-card-test{background:var(--gradient-blue);color:#fff}
.btn-card-test:hover{box-shadow:var(--shadow-blue)}

/* ── Cars Tabs ──────────────────────────────────────────────── */
.cars-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px}
.cars-tab-btn{padding:8px 22px;border-radius:30px;font-size:13.5px;font-weight:600;border:2px solid #e5e7eb;background:#fff;color:#666;cursor:pointer;transition:var(--t)}
.cars-tab-btn.active,.cars-tab-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--shadow-blue)}
.cars-tab-content{display:none}
.cars-tab-content.active{display:block}

/* ═══════════════════════════════════════════════════════════
   4. WHY BMW
══════════════════════════════════════════════════════════════ */
.why-section{padding:80px 0;background:linear-gradient(160deg,#f0f5ff 0%,#e8f0fe 50%,#f4f8ff 100%);position:relative;overflow:hidden}
.why-section::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(28,105,212,.1) 0%,transparent 70%);pointer-events:none}
.why-card{
  background:#fff;border:1.5px solid rgba(28,105,212,.1);
  border-radius:var(--r-lg);padding:32px 24px;
  transition:var(--t);height:100%;
  box-shadow:0 4px 20px rgba(28,105,212,.06);
}
.why-card:hover{background:linear-gradient(160deg,#f0f6ff,#fff);border-color:rgba(28,105,212,.3);transform:translateY(-6px);box-shadow:0 16px 40px rgba(28,105,212,.15)}
.why-icon{width:56px;height:56px;border-radius:14px;background:var(--gradient-blue);display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;margin-bottom:20px;box-shadow:0 6px 20px rgba(28,105,212,.35)}
.why-title{font-size:17px;font-weight:700;color:#0d1f3c;margin-bottom:10px}
.why-desc{font-size:14px;color:#4a5680;line-height:1.75}

/* ═══════════════════════════════════════════════════════════
   5. PROCESS
══════════════════════════════════════════════════════════════ */
.process-section{padding:80px 0;background:#fff}
.process-steps{position:relative;display:flex;flex-wrap:wrap;gap:0;justify-content:center}
.process-step{flex:1;min-width:180px;max-width:220px;text-align:center;padding:0 20px;position:relative}
.process-step::after{
  content:'';position:absolute;top:30px;right:-30px;
  width:60px;height:2px;
  background:linear-gradient(90deg,var(--blue),rgba(28,105,212,.2));
}
.process-step:last-child::after{display:none}
@media(max-width:767px){.process-step::after{display:none}}
.process-num{
  width:60px;height:60px;border-radius:50%;
  background:var(--gradient-blue);
  color:#fff;font-size:22px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
  box-shadow:var(--shadow-blue);
  position:relative;z-index:1;
}
.process-icon{font-size:22px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.process-title{font-size:15px;font-weight:700;color:#111;margin-bottom:8px}
.process-desc{font-size:13px;color:var(--gray);line-height:1.7}

/* ═══════════════════════════════════════════════════════════
   6. FINANCING
══════════════════════════════════════════════════════════════ */
.financing-section{padding:80px 0;background:linear-gradient(160deg,#1c69d4 0%,#1255b0 40%,#0d47a1 100%);position:relative;overflow:hidden}
.financing-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');z-index:0}
.financing-section .container{position:relative;z-index:1}
.financing-stat-card{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:var(--r);padding:18px 16px;text-align:center;transition:var(--t)}
.financing-stat-card:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);transform:translateY(-4px)}
.financing-stat-value{font-size:32px;font-weight:800;color:#fff;line-height:1}
.financing-stat-label{font-size:12px;color:rgba(255,255,255,.7);margin-top:6px;letter-spacing:.5px}
.financing-car-img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:rgba(255,255,255,.1)}
.financing-car-img img{width:100%;height:100%;object-fit:cover}
.calculator-card{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-lg);padding:28px;margin-top:24px}
.calculator-card label{color:rgba(255,255,255,.85);font-size:13px;margin-bottom:5px;display:block}
.calculator-card input[type=range]{accent-color:#fff;width:100%}
.calculator-result{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:16px;text-align:center}
.calculator-result-value{font-size:28px;font-weight:800;color:#fff}
.calculator-result-label{font-size:12px;color:rgba(255,255,255,.7);margin-top:4px}

/* ═══════════════════════════════════════════════════════════
   7. TEST DRIVE
══════════════════════════════════════════════════════════════ */
.testdrive-section{padding:80px 0;background:#f8f9fb}
.testdrive-card{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.testdrive-left{background:linear-gradient(160deg,#0d47a1 0%,#1c69d4 100%);padding:40px 36px;height:100%;position:relative;overflow:hidden}
.testdrive-left::after{content:'';position:absolute;bottom:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.06)}
.testdrive-left-title{font-size:22px;font-weight:800;color:#fff;margin-bottom:12px;line-height:1.3}
.testdrive-left-desc{font-size:13.5px;color:rgba(255,255,255,.75);line-height:1.7;margin-bottom:24px}
.testdrive-advisor-card{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.1);border-radius:12px;padding:14px;margin-bottom:24px}
.testdrive-advisor-avatar{width:52px;height:52px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.2);flex-shrink:0}
.testdrive-advisor-avatar img{width:100%;height:100%;object-fit:cover}
.advisor-name{font-size:14.5px;font-weight:700;color:#fff}
.advisor-title{font-size:11.5px;color:rgba(255,255,255,.7)}
.advisor-phone{font-size:12.5px;color:rgba(255,255,255,.85);margin-top:3px}
.testdrive-benefits{list-style:none;padding:0;margin:0}
.testdrive-benefits li{font-size:13px;color:rgba(255,255,255,.8);padding:6px 0;padding-left:20px;position:relative}
.testdrive-benefits li::before{content:'✓';position:absolute;left:0;color:#7dd3fc;font-weight:700}
.testdrive-sale-img{position:absolute;bottom:0;right:0;width:160px;max-height:260px;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 4px 16px rgba(0,0,0,.35));z-index:2;pointer-events:none}
.testdrive-right{padding:36px}
.testdrive-right .form-label{font-weight:600;font-size:13.5px;color:#444;margin-bottom:5px}
.testdrive-right .form-control,.testdrive-right .form-select{border:1.5px solid #e5e7eb;border-radius:9px;padding:11px 14px;font-size:14px;transition:var(--t)}
.testdrive-right .form-control:focus,.testdrive-right .form-select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(28,105,212,.12)}

/* ═══════════════════════════════════════════════════════════
   8. CONSULTANTS
══════════════════════════════════════════════════════════════ */
.consultants-section{padding:80px 0;background:#fff}
.consultant-card{
  background:#fff;border-radius:var(--r-lg);
  box-shadow:0 4px 24px rgba(0,0,0,.08);
  overflow:hidden;transition:var(--t);
  border:1px solid rgba(0,0,0,.05);
}
.consultant-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,.14)}
.consultant-avatar{position:relative;aspect-ratio:3/4;overflow:hidden;background:#f0f0f0;max-height:280px}
.consultant-avatar img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.consultant-card:hover .consultant-avatar img{transform:scale(1.04)}
.consultant-badge{position:absolute;bottom:12px;left:12px;background:var(--gradient-blue);color:#fff;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700}
.consultant-body{padding:20px}
.consultant-name{font-size:17px;font-weight:700;color:#111;margin-bottom:4px}
.consultant-title{font-size:12.5px;color:var(--blue);font-weight:600;margin-bottom:10px;letter-spacing:.5px}
.consultant-stats{display:flex;gap:16px;margin-bottom:14px}
.consultant-stat{text-align:center;flex:1}
.consultant-stat-val{font-size:18px;font-weight:800;color:#111}
.consultant-stat-lbl{font-size:10.5px;color:var(--gray)}
.consultant-rating{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:#f59e0b;margin-bottom:14px}
.consultant-actions{display:flex;gap:8px}
.btn-consultant{flex:1;padding:9px;border-radius:8px;font-size:12.5px;font-weight:600;text-align:center;transition:var(--t);cursor:pointer;border:none}
.btn-consultant-call{background:var(--gradient-blue);color:#fff}
.btn-consultant-call:hover{box-shadow:var(--shadow-blue);color:#fff}
.btn-consultant-zalo{background:#06d6a0;color:#fff}
.btn-consultant-zalo:hover{background:#05c492;color:#fff}

/* ═══════════════════════════════════════════════════════════
   9. TESTIMONIALS
══════════════════════════════════════════════════════════════ */
.testimonials-section{padding:80px 0;background:#f8f9fb}
.testimonial-card{
  background:#fff;border-radius:var(--r-lg);padding:30px;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
  transition:var(--t);height:100%;position:relative;
  border:1px solid rgba(0,0,0,.04);
}
.testimonial-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.testimonial-quote{font-size:80px;color:var(--blue);opacity:.12;position:absolute;top:10px;left:20px;font-family:Georgia,serif;line-height:1}
.testimonial-stars{color:#f59e0b;font-size:16px;letter-spacing:2px;margin-bottom:12px}
.testimonial-text{font-size:14.5px;color:#444;line-height:1.8;font-style:italic;margin-bottom:20px;position:relative;z-index:1}
.testimonial-author{display:flex;align-items:center;gap:14px}
.testimonial-avatar{width:48px;height:48px;border-radius:50%;background:var(--gradient-blue);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;flex-shrink:0}
.testimonial-name{font-size:15px;font-weight:700;color:#111}
.testimonial-car{font-size:12.5px;color:var(--blue);font-weight:500}

/* ═══════════════════════════════════════════════════════════
   10. NEWS
══════════════════════════════════════════════════════════════ */
.news-section{padding:80px 0;background:#fff}
.news-card{
  background:#fff;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.07);
  transition:var(--t);height:100%;display:flex;flex-direction:column;
  border:1px solid rgba(0,0,0,.05);
}
.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.news-card-img{aspect-ratio:16/9;overflow:hidden;background:#f0f0f0}
.news-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.news-card:hover .news-card-img img{transform:scale(1.06)}
.news-cat-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.5px;background:rgba(28,105,212,.1);color:var(--blue);margin-bottom:10px}
.news-card-body{padding:20px;flex:1;display:flex;flex-direction:column}
.news-card-title{font-size:16px;font-weight:700;color:#111;line-height:1.4;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-card-title a{color:inherit}
.news-card-title a:hover{color:var(--blue)}
.news-card-excerpt{font-size:13.5px;color:var(--gray);line-height:1.7;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-card-meta{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid #f0f0f0;font-size:12px;color:#999}
.news-card-meta i{font-size:11px}
.news-featured{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:767px){.news-featured{grid-template-columns:1fr}}
.news-featured-main{grid-row:1/3}
.news-featured-main .news-card-img{aspect-ratio:4/3}
.news-featured-main .news-card-title{font-size:20px}

/* ═══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
.site-footer{background:linear-gradient(180deg,#0d2b6e 0%,#09205a 60%,#071848 100%);border-top:3px solid rgba(28,105,212,.4)}
.footer-top{padding:60px 0 40px}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand-name{font-size:18px;font-weight:800;color:#fff;letter-spacing:2px}
.footer-brand-sub{font-size:10px;color:rgba(255,255,255,.6);letter-spacing:1px}
.footer-desc{font-size:14px;color:rgba(255,255,255,.6);line-height:1.8;margin:16px 0 20px}
.footer-socials{display:flex;gap:10px}
.footer-socials a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);font-size:15px;transition:var(--t)}
.footer-socials a:hover{background:#fff;border-color:#fff;color:var(--blue);transform:translateY(-2px)}
.footer-title{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;margin-bottom:16px}
.footer-list{list-style:none;padding:0}
.footer-list li{font-size:13.5px;color:rgba(255,255,255,.65);line-height:1.7}
.footer-list li i{color:rgba(255,255,255,.7);margin-right:6px;font-size:12px}
.footer-nav-list{list-style:none;padding:0}
.footer-nav-list li{margin-bottom:8px}
.footer-nav-list a{font-size:13.5px;color:rgba(255,255,255,.6);transition:var(--t)}
.footer-nav-list a:hover{color:#fff;padding-left:4px}
.footer-contact-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:18px}
.contact-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.contact-item i{font-size:16px;color:rgba(255,255,255,.8);margin-top:2px}
.contact-label{font-size:11px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px}
.contact-value{font-size:15px;font-weight:600;color:#fff}
.contact-value:hover{color:rgba(255,255,255,.8)}
.footer-bottom{padding:18px 0;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.45)}
.footer-bottom-links{display:flex;gap:20px}
.footer-bottom-links a{color:rgba(255,255,255,.45);transition:var(--t)}
.footer-bottom-links a:hover{color:#fff}

/* ── Float Buttons ──────────────────────────────────────────── */
.zalo-float,.phone-float{
  position:fixed;z-index:9999;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,.3);cursor:pointer;
  transition:var(--t);
}
.zalo-float{right:20px;bottom:90px;background:#06c8ff;overflow:hidden}
.zalo-float img{width:70%;height:70%;object-fit:contain}
.zalo-float:hover,.phone-float:hover{transform:scale(1.1)}
.phone-float{right:20px;bottom:28px;background:var(--gradient-blue);color:#fff;font-size:20px;animation:ring 2.5s ease-in-out infinite}
@keyframes ring{0%,100%{box-shadow:0 0 0 0 rgba(28,105,212,.5)}50%{box-shadow:0 0 0 12px rgba(28,105,212,0)}}

/* ── Scroll Top ─────────────────────────────────────────────── */
#scrollTop{
  position:fixed;right:20px;bottom:152px;
  width:42px;height:42px;border-radius:50%;
  background:rgba(28,105,212,.12);color:var(--blue);border:1px solid rgba(28,105,212,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;cursor:pointer;z-index:9990;
  opacity:0;visibility:hidden;transition:var(--t);
}
#scrollTop.show{opacity:1;visibility:visible}
#scrollTop:hover{background:var(--blue)}

/* ── Toast Notification ─────────────────────────────────────── */
.toast-bmw{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);
  background:#111;color:#fff;padding:14px 24px;border-radius:10px;
  font-size:14px;font-weight:500;z-index:99999;
  transition:transform .4s ease;pointer-events:none;
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  min-width:280px;text-align:center;
}
.toast-bmw.show{transform:translateX(-50%) translateY(0)}
.toast-bmw.success::before{content:'✓ ';color:#10b981}
.toast-bmw.error::before{content:'✗ ';color:#ef4444}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:991px){
  .hero-bg-car{width:70%;right:-10%}
  .process-steps{gap:24px}
  .process-step{min-width:140px;max-width:160px}
}
@media(max-width:767px){
  .hero-section{min-height:auto;padding:80px 0 60px}
  .hero-bg-car{display:none}
  .hero-overlay{background:rgba(8,8,8,.75)}
  .hero-title{font-size:38px}
  .hero-stats{gap:20px}
  .hero-stat-value{font-size:22px}
  .testdrive-left{padding:28px 24px}
  .testdrive-right{padding:24px}
  .section-header{margin-bottom:32px}
  .section-title{font-size:26px}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:480px){
  .hero-actions{flex-direction:column;align-items:flex-start}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .cars-tabs{gap:6px}
  .cars-tab-btn{padding:7px 14px;font-size:12.5px}
}

/* ============================================================
   PREMIUM DESIGN REFRESH — thêm màu sắc chuyên nghiệp
   ============================================================ */

:root {
  --amber:        #f59e0b;
  --amber-light:  #fbbf24;
  --amber-dark:   #d97706;
  --navy:         #0a0f1e;
  --navy2:        #0d1520;
  --navy3:        #111827;
  --teal:         #0ea5e9;
  --gradient-gold:  linear-gradient(135deg,#c9a84c 0%,#f59e0b 50%,#fbbf24 100%);
  --gradient-navy:  linear-gradient(180deg,#0a0f1e 0%,#111827 100%);
  --gradient-hero:  linear-gradient(135deg,#1c69d4 0%,#0ea5e9 50%,#06b6d4 100%);
  --shadow-gold:    0 8px 32px rgba(245,158,11,.35);
  --shadow-dark:    0 12px 40px rgba(0,0,0,.5);
}

/* ── Topbar premium ─────────────────────────────────────────── */
.topbar {
  background: linear-gradient(90deg,var(--blue-dark) 0%,#1255b0 50%,var(--blue-dark) 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

/* ── Hero stats bar (nếu có) ────────────────────────────────── */
.hero-stats-bar {
  background: linear-gradient(90deg,#060a14 0%,#0b1526 50%,#060a14 100%);
  border-top: 1px solid rgba(28,105,212,.25);
  border-bottom: 1px solid rgba(28,105,212,.1);
  padding: 22px 0 !important;
}
.hero-stats-bar .hero-stats {
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
}
.hero-stats-bar .hero-stats > div {
  text-align: center;
  padding: 0 28px;
  position: relative;
}
.hero-stats-bar .hero-stat-value { color: var(--blue-light) !important; -webkit-text-fill-color: var(--blue-light) !important; background: none !important; }
.hero-stats-bar .hero-stat-label { color: rgba(255,255,255,.5) !important; }
.hero-stats-bar .hero-stats > div { border-right: 1px solid rgba(255,255,255,.07); }
.hero-stats-bar .hero-stats > div:last-child { border-right: none; }

/* ── Categories section ─────────────────────────────────────── */
.categories-section {
  background: linear-gradient(180deg,#f0f4ff 0%,#e8f0fe 50%,#f4f6fb 100%) !important;
  position: relative;
}
.categories-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,var(--blue),var(--teal),var(--blue));
}
.cat-card {
  background: #fff !important;
  border: 1.5px solid rgba(28,105,212,.1) !important;
  box-shadow: 0 2px 12px rgba(28,105,212,.08) !important;
}
.cat-card:hover, .cat-card.active {
  border-color: var(--blue) !important;
  background: linear-gradient(160deg,#f0f6ff,#fff) !important;
  box-shadow: 0 8px 28px rgba(28,105,212,.22) !important;
}
.cat-icon {
  background: linear-gradient(135deg,#dbeafe,#bfdbfe) !important;
  box-shadow: 0 3px 12px rgba(28,105,212,.15);
}
.cat-card:hover .cat-icon, .cat-card.active .cat-icon {
  background: var(--gradient-blue) !important;
  box-shadow: var(--shadow-blue);
}
.cat-name { color: #1a2340 !important; font-weight: 700 !important; }

/* ── Section labels — enhanced ──────────────────────────────── */
.section-label {
  color: var(--blue) !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
}
.section-label span { background: linear-gradient(90deg,var(--blue),var(--teal)) !important; height: 2px !important; }

/* ── Section title gradient ─────────────────────────────────── */
.section-header .section-title strong,
.section-header .section-title em {
  color: var(--blue);
}

/* ── Cars section ────────────────────────────────────────────── */
.cars-section { background: #fff !important; position: relative; }
.cars-section.bg-gray { background: #f4f7fc !important; }
.car-card {
  border: 1.5px solid rgba(28,105,212,.08) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.06) !important;
  position: relative;
  overflow: hidden;
}
.car-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,var(--blue) 0%,var(--teal) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  z-index: 1;
}
.car-card:hover::before { transform: scaleX(1); }
.car-card:hover {
  border-color: rgba(28,105,212,.25) !important;
  box-shadow: 0 20px 50px rgba(28,105,212,.15) !important;
}
.car-card-series { color: var(--blue) !important; }
.car-card-price { color: var(--blue) !important; }
.btn-card-detail {
  background: #f0f4ff !important;
  color: var(--blue) !important;
  font-weight: 600 !important;
}
.btn-card-detail:hover { background: var(--navy) !important; color: #fff !important; }
.btn-card-test {
  background: linear-gradient(135deg,var(--blue) 0%,var(--teal) 100%) !important;
  box-shadow: 0 4px 16px rgba(28,105,212,.3) !important;
}
.btn-card-test:hover { box-shadow: 0 8px 24px rgba(28,105,212,.5) !important; }

/* Cars tabs */
.cars-tab-btn {
  border: 1.5px solid #dde5f5 !important;
  color: #4a5680 !important;
  background: #f4f7ff !important;
}
.cars-tab-btn.active, .cars-tab-btn:hover {
  background: linear-gradient(135deg,var(--blue),var(--teal)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(28,105,212,.35) !important;
}

/* ── Why BMW section — enhanced ─────────────────────────────── */
.why-section {
  background: linear-gradient(160deg,#f0f5ff 0%,#e8f0fe 50%,#f4f8ff 100%) !important;
}
.why-section::before {
  background: radial-gradient(circle,rgba(28,105,212,.08) 0%,transparent 70%) !important;
}
.why-section::after {
  content: '';
  position: absolute; bottom: -100px; left: -100px; width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(28,105,212,.06) 0%,transparent 70%);
  pointer-events: none;
}
.why-card:hover {
  background: linear-gradient(160deg,#f0f6ff,#fff) !important;
  border-color: rgba(28,105,212,.3) !important;
  box-shadow: 0 16px 40px rgba(28,105,212,.15) !important;
}
.why-icon {
  background: linear-gradient(135deg,var(--blue) 0%,var(--teal) 100%) !important;
  box-shadow: 0 6px 20px rgba(28,105,212,.4) !important;
}
.why-title { color: #0d1f3c !important; }

/* ── Process section ────────────────────────────────────────── */
.process-section {
  background: linear-gradient(180deg,#f8faff 0%,#eef3fd 50%,#f5f8ff 100%) !important;
  position: relative;
}
.process-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(28,105,212,.06) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
}
.process-num {
  background: linear-gradient(135deg,var(--blue) 0%,var(--teal) 100%) !important;
  box-shadow: 0 6px 24px rgba(28,105,212,.4) !important;
}
.process-title { color: #0f1b2d !important; font-weight: 700 !important; }
.process-step::after { background: linear-gradient(90deg,var(--blue),rgba(14,165,233,.15)) !important; }

/* ── Financing section — enhanced ──────────────────────────── */
.financing-section {
  background: linear-gradient(160deg,#1c69d4 0%,#1255b0 40%,#0d47a1 100%) !important;
}
.financing-stat-card:hover {
  background: rgba(255,255,255,.2) !important;
  border-color: rgba(255,255,255,.4) !important;
  box-shadow: 0 8px 24px rgba(0,0,30,.2) !important;
}
.financing-stat-value { color: #fff !important; }
.calculator-card {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
}
.calculator-result {
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
}
.calculator-result-value {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  font-size: 32px !important;
}

/* ── Test drive section ─────────────────────────────────────── */
.testdrive-section { background: #f0f5ff !important; }
.testdrive-left {
  background: linear-gradient(160deg,#0d47a1 0%,#1c69d4 60%,#0ea5e9 100%) !important;
  position: relative;
}
.testdrive-left::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='38' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}
.testdrive-benefits li::before { color: var(--amber-light) !important; font-weight: 900 !important; }
.testdrive-right { background: #fff !important; }
.testdrive-right .form-control:focus,
.testdrive-right .form-select:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(28,105,212,.12) !important;
}

/* ── Testimonials ───────────────────────────────────────────── */
.testimonials-section { background: linear-gradient(180deg,#f0f5ff 0%,#f8f9fb 100%) !important; }
.testimonial-card {
  border: 1.5px solid rgba(28,105,212,.08) !important;
  background: #fff !important;
}
.testimonial-card:hover {
  border-color: rgba(28,105,212,.2) !important;
  box-shadow: 0 20px 50px rgba(28,105,212,.12) !important;
}
.testimonial-quote { color: var(--blue) !important; opacity: .08 !important; }
.testimonial-car { color: var(--blue) !important; }
.testimonial-avatar {
  background: linear-gradient(135deg,var(--blue),var(--teal)) !important;
  box-shadow: 0 4px 14px rgba(28,105,212,.35) !important;
}

/* ── News section ───────────────────────────────────────────── */
.news-section { background: #fff !important; }
.news-card {
  border: 1.5px solid rgba(28,105,212,.07) !important;
  border-top: 3px solid transparent !important;
  background-image: linear-gradient(white,white), linear-gradient(90deg,var(--blue),var(--teal)) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  transition: var(--t), border-color .2s !important;
}
.news-card:hover {
  box-shadow: 0 16px 44px rgba(28,105,212,.14) !important;
}
.news-cat-badge {
  background: linear-gradient(135deg,rgba(28,105,212,.12),rgba(14,165,233,.1)) !important;
  color: var(--blue) !important;
  border: 1px solid rgba(28,105,212,.15) !important;
}
.news-card-title a:hover { color: var(--blue) !important; }

/* ── Footer — BMW navy ─────────────────────────────────────── */
.site-footer {
  background: linear-gradient(180deg,#0d2b6e 0%,#09205a 60%,#071848 100%) !important;
  border-top: 3px solid rgba(28,105,212,.4) !important;
}
.footer-socials a:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--blue) !important;
}

/* ── Scroll progress bar ────────────────────────────────────── */
#scrollProgressBar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg,var(--blue),var(--teal),var(--amber));
  z-index: 99999;
  transition: width .12s linear;
}

/* ── Section divider accent ─────────────────────────────────── */
.section-divider-accent {
  height: 2px;
  background: linear-gradient(90deg,transparent,var(--blue),var(--teal),transparent);
  margin: 0;
  border: none;
  opacity: .35;
}

/* ── Global btn improvements ────────────────────────────────── */
.btn-bmw-primary {
  background: linear-gradient(135deg,var(--blue) 0%,var(--teal) 100%) !important;
  box-shadow: 0 6px 24px rgba(28,105,212,.38) !important;
}
.btn-bmw-primary:hover {
  box-shadow: 0 12px 36px rgba(28,105,212,.55) !important;
  transform: translateY(-2px) !important;
}

/* ── Spec badge ─────────────────────────────────────────────── */
.car-spec-item {
  background: #eff4ff !important;
  color: #3b5fa0 !important;
  border: 1px solid rgba(28,105,212,.1) !important;
}

/* ── Hero carousel caption enhancements ─────────────────────── */
.hero-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--amber-light);
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 16px;
  backdrop-filter: blur(6px);
}

/* ============================================================
   CARS PAGE — pages/cars.php
   ============================================================ */

/* Page Hero */
.page-hero{background:linear-gradient(135deg,#f0f5ff 0%,#e4edfe 50%,#eef4ff 100%);padding:60px 0 40px;border-bottom:2px solid rgba(28,105,212,.1)}
.page-hero .breadcrumb{margin-bottom:16px}
.page-hero .breadcrumb-item a{color:#4a5680;text-decoration:none;font-size:13px}
.page-hero .breadcrumb-item a:hover{color:var(--blue)}
.page-hero .breadcrumb-item.active{color:#8895b0;font-size:13px}
.page-hero .breadcrumb-divider,.page-hero .breadcrumb-item+.breadcrumb-item::before{color:#b0bcd4}
.page-hero-title{font-size:38px;font-weight:800;color:#0d1f3c;letter-spacing:-1px;margin-bottom:8px}
.page-hero-sub{color:#4a5680;font-size:16px;margin:0}
.page-hero-sub strong{color:var(--blue)}

/* Sticky filter sidebar */
.sticky-filter{position:sticky;top:80px}
.filter-sidebar{background:#fff;border:1.5px solid rgba(28,105,212,.1);border-radius:var(--r-lg);padding:24px;overflow:hidden;box-shadow:0 4px 20px rgba(28,105,212,.07)}
.filter-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(28,105,212,.1)}
.filter-header h5{color:#0d1f3c;font-size:15px;font-weight:700;margin:0}
.filter-reset-link{color:var(--blue);font-size:12px;text-decoration:none;transition:color .2s}
.filter-reset-link:hover{color:#e74c3c}
.filter-group{margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid rgba(28,105,212,.07)}
.filter-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.filter-label{display:block;color:#4a5680;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
.filter-select,.form-select{background-color:#fff;border-color:rgba(28,105,212,.2);color:#1a2340;font-size:13.5px}
.filter-select:focus,.form-select:focus{background-color:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(28,105,212,.12);color:#1a2340}
.filter-select option,.form-select option{background:#fff;color:#1a2340}
.form-control{background:#fff;border-color:rgba(28,105,212,.2);color:#1a2340;font-size:13.5px}
.form-control:focus{background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(28,105,212,.12);color:#1a2340}
.form-control::placeholder{color:#9aa5c0}
.input-group-text{background:#f0f4ff;border-color:rgba(28,105,212,.2);color:#4a5680}

/* Filter checkboxes & radios */
.filter-check{display:flex;align-items:center;gap:10px;cursor:pointer;padding:5px 0}
.filter-check input[type=radio],.filter-check input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue);cursor:pointer;flex-shrink:0}
.filter-check span{color:rgba(255,255,255,.75);font-size:13.5px;transition:color .2s}
.filter-check:hover span{color:#fff}
.filter-check input:checked + span{color:#fff;font-weight:500}

/* Quick price buttons */
.price-quick-btns{gap:4px}
.btn-price-quick{background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--silver);border-radius:20px;padding:4px 10px;font-size:11.5px;cursor:pointer;transition:var(--t);white-space:nowrap}
.btn-price-quick:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* Toolbar */
.cars-toolbar{background:#111;border:1px solid rgba(255,255,255,.07);border-radius:var(--r);padding:14px 18px;margin-bottom:4px}
.cars-count{font-size:14px}
.sort-select{background:#1a1a1a;border-color:rgba(255,255,255,.1);color:#fff;font-size:13px}
.sort-select:focus{background:#1a1a1a;border-color:var(--blue);color:#fff;box-shadow:none}

/* View toggle */
.view-toggle{display:flex;border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden}
.view-btn{background:transparent;border:none;color:var(--silver);padding:7px 11px;cursor:pointer;font-size:15px;transition:var(--t)}
.view-btn.active,.view-btn:hover{background:var(--blue);color:#fff}

/* Active filter pills */
.active-filters{margin-bottom:4px}
.filter-pill{display:inline-flex;align-items:center;gap:5px;background:rgba(28,105,212,.15);border:1px solid rgba(28,105,212,.3);color:var(--blue-light);border-radius:20px;padding:4px 12px;font-size:12px;text-decoration:none;transition:var(--t)}
.filter-pill:hover{background:rgba(231,76,60,.15);border-color:rgba(231,76,60,.4);color:#e74c3c}
.filter-pill-clear{background:rgba(231,76,60,.12);border-color:rgba(231,76,60,.3);color:#e74c3c}
.filter-pill-clear:hover{background:rgba(231,76,60,.25)}

/* ── Car Card ─────────────────────────────────────────────── */
.car-card{background:#111;border:1px solid rgba(255,255,255,.07);border-radius:var(--r-lg);overflow:hidden;transition:var(--t);height:100%;display:flex;flex-direction:column}
.car-card:hover{border-color:rgba(28,105,212,.4);box-shadow:0 8px 40px rgba(0,0,0,.4),0 0 0 1px rgba(28,105,212,.2);transform:translateY(-4px)}
.car-card-img-wrap{position:relative;overflow:hidden;aspect-ratio:16/10;background:#0a0a0a}
.car-card-img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.car-card:hover .car-card-img{transform:scale(1.06)}

/* Card overlay */
.car-card-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.car-card:hover .car-card-overlay{opacity:1}
.car-overlay-btn{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:9px 20px;font-size:13.5px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:var(--t)}
.car-overlay-btn:hover{background:var(--blue-dark);color:#fff;transform:scale(1.04)}

/* Badges on image */
.car-badge{position:absolute;top:12px;left:12px;padding:4px 11px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;z-index:2}
.car-badge-sale{position:absolute;top:12px;right:12px;background:#e74c3c;color:#fff;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;z-index:2}
.badge-hot{background:#e74c3c;color:#fff}
.badge-new{background:var(--blue);color:#fff}
.badge-sale{background:#f39c12;color:#fff}
.badge-ev{background:#2ecc71;color:#fff}
.badge-m{background:#1a1a2e;color:#4da3ff;border:1px solid #4da3ff}
.badge-certified{background:#8e44ad;color:#fff}

/* Card body */
.car-card-body{padding:18px 20px 12px;flex:1;display:flex;flex-direction:column;gap:8px}
.car-category-tag{color:var(--blue-light);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px}
.car-card-title{font-size:15px;font-weight:700;line-height:1.35;margin:0}
.car-card-title a{color:#fff;text-decoration:none;transition:color .2s}
.car-card-title a:hover{color:var(--blue-light)}

/* Specs row */
.car-specs{display:flex;flex-wrap:wrap;gap:8px 14px;margin:4px 0}
.car-spec{color:var(--silver);font-size:12.5px;display:inline-flex;align-items:center;gap:5px}
.car-spec i{color:var(--blue-light);font-size:12px}

/* Price */
.car-card-price{display:flex;align-items:baseline;gap:10px;margin-top:auto;padding-top:6px}
.price-main{font-size:19px;font-weight:800;color:var(--blue-light)}
.price-old{font-size:13px;color:var(--silver);text-decoration:line-through}

/* Condition tag */
.car-condition-tag{font-size:11px;font-weight:600;border-radius:4px;padding:3px 9px;display:inline-block;align-self:flex-start}
.condition-new{background:rgba(28,105,212,.2);color:var(--blue-light)}
.condition-used{background:rgba(168,169,173,.15);color:var(--silver)}
.condition-certified{background:rgba(142,68,173,.2);color:#c39bd3}

/* Card actions */
.car-card-actions{display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.06);padding:12px 16px;gap:8px}
.btn-car-detail{flex:1;background:var(--blue);color:#fff;border:none;border-radius:8px;padding:9px 14px;font-size:13px;font-weight:600;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;transition:var(--t)}
.btn-car-detail:hover{background:var(--blue-dark);color:#fff}
.btn-car-contact{width:40px;height:40px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--silver);display:flex;align-items:center;justify-content:center;text-decoration:none;flex-shrink:0;transition:var(--t)}
.btn-car-contact:hover{background:rgba(46,204,113,.15);border-color:#2ecc71;color:#2ecc71}

/* List view */
.car-card-list{flex-direction:row}
.car-card-list .car-card-img-wrap{width:220px;flex-shrink:0;aspect-ratio:auto;min-height:160px}
.car-card-list .car-card-body{flex-direction:row;flex-wrap:wrap;align-content:flex-start}
.car-card-list .car-card-title{width:100%}

/* Empty state */
.empty-state{padding:80px 20px}
.empty-icon{font-size:80px;color:rgba(255,255,255,.1);line-height:1}
.empty-title{color:#fff;font-size:24px;font-weight:700;margin-bottom:10px}
.empty-sub{color:var(--silver);font-size:15px}

/* Pagination */
.cars-pagination .pagination{gap:4px}
.cars-pagination .page-link{background:#111;border:1px solid rgba(255,255,255,.1);color:var(--silver);border-radius:8px!important;padding:9px 14px;font-size:13px;transition:var(--t)}
.cars-pagination .page-link:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.cars-pagination .page-item.active .page-link{background:var(--blue);border-color:var(--blue);color:#fff}
.cars-pagination .page-item.disabled .page-link{opacity:.35;pointer-events:none}

/* Filter offcanvas */
.filter-offcanvas{background:#111;max-width:340px}
.filter-offcanvas .offcanvas-header{background:#0d0d0d;border-bottom:1px solid rgba(255,255,255,.07);padding:20px 24px}
.filter-offcanvas .offcanvas-title{color:#fff;font-weight:700}
.filter-offcanvas .offcanvas-body{padding:20px 24px;overflow-y:auto}
.filter-offcanvas .filter-group{border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:18px;margin-bottom:16px}

/* Responsive cars page */
@media(max-width:991px){
  .page-hero-title{font-size:28px}
  .cars-toolbar{padding:10px 14px}
}
@media(max-width:575px){
  .car-card-img-wrap{aspect-ratio:16/9}
  .page-hero{padding:40px 0 28px}
  .car-card-list{flex-direction:column}
  .car-card-list .car-card-img-wrap{width:100%;min-height:auto;aspect-ratio:16/10}
}

/* ============================================================
   MOBILE OFFCANVAS NAV
   ============================================================ */
.mobile-nav-offcanvas{background:#fff;border-left:1px solid #e2e8f0;width:min(300px,85vw)!important}
.mobile-nav-offcanvas .offcanvas-header{background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:16px 20px}
.mobile-nav-offcanvas .offcanvas-body{padding:0;display:flex;flex-direction:column}

.mobile-nav{padding:12px 0}
.mobile-nav-group{margin-bottom:4px}
.mobile-nav-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#94a3b8;padding:10px 20px 4px}
.mobile-nav-link{display:flex;align-items:center;gap:10px;padding:12px 20px;color:#1a2340;font-size:14px;font-weight:500;text-decoration:none;border-left:3px solid transparent;transition:all .2s}
.mobile-nav-link i{width:18px;text-align:center;font-size:15px;flex-shrink:0;color:#94a3b8}
.mobile-nav-link:hover,.mobile-nav-link.active{color:#1c69d4;background:rgba(28,105,212,.07);border-left-color:#1c69d4}
.mobile-nav-link.active{color:#1c69d4}

.mobile-nav-footer{padding:16px 20px;border-top:1px solid #e2e8f0}
.mobile-nav-socials{display:flex;gap:12px;justify-content:center}
.mobile-nav-socials a{width:36px;height:36px;border-radius:50%;background:#f1f5f9;border:1px solid #e2e8f0;color:#64748b;display:flex;align-items:center;justify-content:center;font-size:15px;text-decoration:none;transition:all .2s}
.mobile-nav-socials a:hover{background:rgba(28,105,212,.1);border-color:#1c69d4;color:#1c69d4}

/* Hotline pill on mobile navbar */
.btn-hotline-mobile{width:38px;height:38px;border-radius:50%;background:rgba(28,105,212,.1);border:1px solid rgba(28,105,212,.25);color:#1c69d4;display:flex;align-items:center;justify-content:center;font-size:17px;text-decoration:none;transition:all .2s;flex-shrink:0}
.btn-hotline-mobile:hover{background:#1c69d4;color:#fff;border-color:#1c69d4}

/* Float buttons — larger on mobile */
@media(max-width:767px){
  .zalo-float,.phone-float{width:58px;height:58px}
  .phone-float{font-size:22px;bottom:24px;right:16px}
  .zalo-float{bottom:92px;right:16px}
  #scrollTop{right:16px}
}

/* ── Form Loading Spinner ──────────────────────────────── */
.btn-loading{pointer-events:none;opacity:.75}
.btn-loading .btn-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;margin-right:6px;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Admin table mobile ───────────────────────────────── */
@media(max-width:767px){
  .table-responsive-stack thead{display:none}
  .table-responsive-stack tr{display:block;border:1px solid rgba(255,255,255,.08);border-radius:8px;margin-bottom:12px;padding:8px 12px;background:#1a1a1a}
  .table-responsive-stack td{display:flex;justify-content:space-between;align-items:center;border:none;padding:6px 0;font-size:13px}
  .table-responsive-stack td::before{content:attr(data-label);color:#888;font-weight:600;font-size:12px;flex-shrink:0;margin-right:8px}
}

/* ── Confirm Modal (custom) ───────────────────────────── */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:99998;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .25s}
.confirm-overlay.show{opacity:1;visibility:visible}
.confirm-box{background:#1a1a1a;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:28px 32px;max-width:380px;width:90%;text-align:center;transform:scale(.9);transition:transform .25s}
.confirm-overlay.show .confirm-box{transform:scale(1)}
.confirm-icon{font-size:42px;margin-bottom:12px}
.confirm-title{color:#fff;font-size:18px;font-weight:700;margin-bottom:8px}
.confirm-msg{color:#999;font-size:14px;margin-bottom:24px}
.confirm-actions{display:flex;gap:10px;justify-content:center}
.confirm-btn-cancel{background:rgba(255,255,255,.07);color:#ccc;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:10px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.confirm-btn-cancel:hover{background:rgba(255,255,255,.12);color:#fff}
.confirm-btn-ok{background:#dc2626;color:#fff;border:none;border-radius:8px;padding:10px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.confirm-btn-ok:hover{background:#b91c1c}
.confirm-btn-ok.blue{background:#1c69d4}
.confirm-btn-ok.blue:hover{background:#0d47a1}

/* ============================================================
   PREMIUM LUXURY UPGRADE — v2
   ============================================================ */

/* ── Enhanced Variables ────────────────────────────────────── */
:root {
  --gold:          #c9a84c;
  --gold-light:    #e8c96d;
  --gradient-gold: linear-gradient(135deg,#c9a84c 0%,#e8c96d 100%);
  --glass-bg:      rgba(255,255,255,0.04);
  --glass-border:  rgba(255,255,255,0.09);
  --hero-min-h:    100svh;
  --shadow-gold:   0 8px 32px rgba(201,168,76,.35);
}

/* Barlow – closest open-source match to BMW Type Next */
h1,h2,h3,h4,h5,h6,
.hero-title,.section-title,.page-hero-title,.car-title,
.navbar-brand span,.footer-brand,.card-title,.section-label{
  font-family:'Barlow','Be Vietnam Pro',sans-serif;
  letter-spacing:.02em;
  font-weight:700
}
.navbar,.nav-link,.btn,.badge,.price,.form-control,
.topbar,.footer-link,.car-meta,.section-sublabel{
  font-family:'Barlow','Be Vietnam Pro',sans-serif;
  font-weight:500
}

/* ── HERO – Cinematic Upgrades ─────────────────────────────── */
.hero-section{min-height:var(--hero-min-h);background:#040408}

/* Noise grain overlay for premium film texture */
.hero-section::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:200px 200px;opacity:.55;mix-blend-mode:overlay;
}

/* Animated radial gradient breathe */
.hero-bg{
  animation:heroBreathe 8s ease-in-out infinite;
}
@keyframes heroBreathe{
  0%,100%{background:radial-gradient(ellipse at 65% 50%,rgba(28,105,212,.22) 0%,transparent 65%),radial-gradient(ellipse at 10% 80%,rgba(28,105,212,.12) 0%,transparent 50%),#040408}
  50%{background:radial-gradient(ellipse at 60% 45%,rgba(28,105,212,.30) 0%,transparent 60%),radial-gradient(ellipse at 15% 75%,rgba(28,105,212,.18) 0%,transparent 55%),#040408}
}

/* Hero tagline gold accent */
.hero-tagline{color:var(--gold-light)}
.hero-tagline::before{background:var(--gold-light)}

/* Bigger hero typography */
.hero-title{font-size:clamp(46px,7vw,84px);letter-spacing:-2px;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.hero-title span{background:linear-gradient(90deg,var(--blue-light),#74b9ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Hero stats — refined dividers */
.hero-stats{border-top:1px solid rgba(255,255,255,.08);gap:40px}
.hero-stat-value{font-size:32px;font-weight:900;background:linear-gradient(180deg,#fff 60%,rgba(255,255,255,.5));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Carousel Ken Burns on banner images */
.hero-img{height:100vh;object-fit:cover;animation:kenBurns 12s ease-in-out infinite alternate}
@keyframes kenBurns{from{transform:scale(1.04) translateX(-10px)}to{transform:scale(1.10) translateX(10px)}}
.carousel-fade .carousel-item{transition:opacity .9s ease!important}

/* Hero overlay — darker at bottom */
.hero-overlay{background:linear-gradient(90deg,rgba(4,4,8,.92) 0%,rgba(4,4,8,.65) 45%,rgba(4,4,8,.10) 100%),linear-gradient(180deg,transparent 50%,rgba(4,4,8,.7) 100%)}

/* Hero caption */
.hero-eyebrow{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold-light);margin-bottom:14px;display:block}
.hero-caption-inner .hero-title{font-size:clamp(40px,6vw,72px);text-shadow:0 4px 60px rgba(0,0,0,.6)}

/* ── Navbar — Premium Glass ─────────────────────────────────── */
.main-navbar{
  background:rgba(4,4,8,.0);
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  transition:background .5s ease,backdrop-filter .5s ease,padding .3s ease,box-shadow .4s ease;
  border-bottom:1px solid transparent;
}
.main-navbar.scrolled{
  background:rgba(4,4,8,.88);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  border-bottom-color:rgba(255,255,255,.06);
  box-shadow:0 2px 30px rgba(0,0,0,.4);
}
/* Topbar enhanced */
.topbar{background:rgba(4,4,8,.95);border-bottom:1px solid rgba(201,168,76,.18)}
.topbar a:first-child{color:var(--gold-light)!important}

/* ── Section Titles — Gold Accent ───────────────────────────── */
.section-label{color:var(--gold)}
.section-label span{background:var(--gold)}
.section-title{font-size:clamp(28px,4.5vw,44px);letter-spacing:-1px}

/* ── Car Cards — Premium Dark ───────────────────────────────── */
.car-card{
  background:#0d0d12;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94),box-shadow .4s ease,border-color .3s;
}
.car-card:hover{
  transform:translateY(-10px) scale(1.01);
  box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(28,105,212,.3),inset 0 1px 0 rgba(255,255,255,.06);
  border-color:rgba(28,105,212,.4);
}

/* Card image — stronger overlay gradient on hover */
.car-card-img-wrap::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.7) 100%);
  z-index:1;pointer-events:none;
  opacity:.6;transition:opacity .4s;
}
.car-card:hover .car-card-img-wrap::after{opacity:.8}

/* Card body */
.car-card-body{background:#0d0d12}
.car-category-tag{color:var(--gold-light);font-size:10.5px;letter-spacing:1.5px}
.car-card-title a{color:#f0f0f0}
.car-card-title a:hover{color:var(--blue-light)}

/* Price — highlight */
.price-main{font-size:21px;font-weight:900;color:#fff;background:linear-gradient(90deg,var(--blue-light),#74b9ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Card footer */
.car-card-actions{background:#0a0a0f;border-top:1px solid rgba(255,255,255,.05)}
.btn-car-detail{background:var(--gradient-blue);letter-spacing:.3px;font-size:12.5px}
.btn-car-detail:hover{background:linear-gradient(135deg,#2575d9,#1c69d4);box-shadow:var(--shadow-blue)}

/* ── Homepage car sections — light to dark ──────────────────── */
.cars-section.bg-gray{background:#f4f5f8}
.cars-section.bg-gray .car-card{background:#fff;border-color:rgba(0,0,0,.07)}
.cars-section.bg-gray .car-card:hover{box-shadow:0 20px 50px rgba(0,0,0,.15);border-color:rgba(28,105,212,.35)}
.cars-section.bg-gray .car-card-body{background:#fff}
.cars-section.bg-gray .car-card-actions{background:#f9f9fb}
.cars-section.bg-gray .car-category-tag{color:var(--blue)}
.cars-section.bg-gray .car-card-title a{color:#111}
.cars-section.bg-gray .car-card-title a:hover{color:var(--blue)}
.cars-section.bg-gray .price-main{color:var(--blue);-webkit-text-fill-color:var(--blue);background:none}
.cars-section.bg-gray .car-spec{color:#555}
.cars-section.bg-gray .car-spec i{color:var(--blue)}
.cars-section.bg-gray .car-card-img-wrap::after{opacity:.2}
.cars-section.bg-gray .car-card:hover .car-card-img-wrap::after{opacity:.35}

/* ── Category Cards ─────────────────────────────────────────── */
.cat-card{
  background:#fff;border-radius:16px;padding:22px 12px;
  border:1.5px solid transparent;
  transition:var(--t);
  box-shadow:0 2px 16px rgba(0,0,0,.06);
}
.cat-card:hover,.cat-card.active{border-color:var(--blue);box-shadow:0 8px 30px rgba(28,105,212,.2);transform:translateY(-5px)}
.cat-icon{width:56px;height:56px;font-size:24px;border-radius:14px;background:linear-gradient(135deg,#e8f0fe,#c5d8ff);color:var(--blue)}
.cat-card:hover .cat-icon,.cat-card.active .cat-icon{background:var(--gradient-blue);color:#fff;box-shadow:var(--shadow-blue)}
.cat-name{font-size:13px;font-weight:700;color:#222}
.cat-count{font-size:11.5px;color:#888}

/* ── WHY Section ────────────────────────────────────────────── */
.why-section{background:#040408}
.why-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;padding:34px 26px;
  transition:var(--t);height:100%;
  position:relative;overflow:hidden;
}
.why-card::before{content:'';position:absolute;top:-40%;left:-20%;width:200%;height:200%;background:radial-gradient(circle at center,rgba(28,105,212,.08),transparent 65%);opacity:0;transition:opacity .4s;pointer-events:none}
.why-card:hover::before{opacity:1}
.why-card:hover{background:rgba(28,105,212,.07);border-color:rgba(28,105,212,.25);transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.why-icon{width:60px;height:60px;border-radius:16px;font-size:26px;box-shadow:var(--shadow-blue)}
.why-title{font-size:18px;font-weight:800;color:#fff}
.why-desc{color:rgba(255,255,255,.5);line-height:1.8}

/* ── Process section ────────────────────────────────────────── */
.process-num{background:var(--gradient-gold);box-shadow:var(--shadow-gold)}

/* ── Financing section ──────────────────────────────────────── */
.financing-section{background:#040408}
.financing-stat-value{font-size:34px;font-weight:900;color:var(--gold-light)}

/* ── Testimonials ───────────────────────────────────────────── */
.testimonial-quote{color:var(--gold);opacity:.15;font-size:90px}
.testimonial-stars{color:var(--gold)}

/* ── Premium Page Hero ──────────────────────────────────────── */
.page-hero{
  background:linear-gradient(135deg,#040408 0%,#0d0d20 50%,#051230 100%);
  padding:64px 0 44px;
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;top:-60%;right:-10%;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(28,105,212,.15) 0%,transparent 65%);
  pointer-events:none;
}
.page-hero-title{font-size:42px;font-weight:900;letter-spacing:-1px;background:linear-gradient(180deg,#fff 60%,rgba(255,255,255,.6));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
@media(max-width:767px){.page-hero-title{font-size:28px}}

/* ── Filter Sidebar ─────────────────────────────────────────── */
.filter-sidebar{background:#0a0a10;border:1px solid rgba(255,255,255,.07);border-radius:18px}
.filter-header h5{color:#fff;font-weight:800}
.filter-group{border-bottom-color:rgba(255,255,255,.05)}

/* ── Cars Toolbar ───────────────────────────────────────────── */
.cars-toolbar{background:#0a0a10;border:1px solid rgba(255,255,255,.07);border-radius:14px}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer{background:#040408;border-top:1px solid rgba(201,168,76,.12)}
.footer-bottom{border-top-color:rgba(201,168,76,.1)}
.footer-nav-list a:hover{color:var(--gold-light)}
.footer-socials a:hover{background:var(--gradient-gold);border-color:var(--gold);color:#111}

/* ── Float Buttons — Upgraded ───────────────────────────────── */
.phone-float{background:linear-gradient(135deg,#1c69d4,#0d47a1)}
.zalo-float{background:#0068FF}
@keyframes ring{
  0%,100%{box-shadow:0 0 0 0 rgba(28,105,212,.6),0 4px 20px rgba(0,0,0,.3)}
  50%{box-shadow:0 0 0 14px rgba(28,105,212,0),0 4px 20px rgba(0,0,0,.3)}
}
.phone-float{animation:ring 2.8s ease-in-out infinite}

/* ── Consultants ─────────────────────────────────────────────── */
.consultant-card{border-radius:20px;overflow:hidden}
.consultant-badge{background:var(--gradient-gold);color:#111;font-weight:800}

/* ── News ────────────────────────────────────────────────────── */
.news-cat-badge{background:rgba(201,168,76,.15);color:var(--gold);border:1px solid rgba(201,168,76,.2)}
.news-card:hover{border-color:rgba(28,105,212,.2)}

/* ══════════════════════════════════════════════════════════
   MOBILE STICKY BOTTOM ACTION BAR
═══════════════════════════════════════════════════════════ */
/* Mobile FAB — vertical circular buttons on the right */
.mobile-action-bar{
  display:none;
  position:fixed;right:14px;bottom:16px;z-index:9995;
  flex-direction:column;align-items:center;gap:12px;
}
@media(max-width:767px){
  .mobile-action-bar{display:flex}
}
.mob-act-btn{
  width:52px;height:52px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-decoration:none;color:#fff;border:none;cursor:pointer;
  transition:transform .25s,box-shadow .25s;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  position:relative;
}
.mob-act-btn i{font-size:20px;line-height:1}
.mob-act-btn .mob-label{
  position:absolute;right:60px;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.75);color:#fff;font-size:11px;font-weight:600;
  padding:3px 8px;border-radius:20px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.mob-act-btn:hover .mob-label{opacity:1}
.mob-act-btn.call{background:linear-gradient(135deg,#1c69d4,#0d47a1);animation:ring 2.5s ease-in-out infinite}
.mob-act-btn.email{background:linear-gradient(135deg,#059669,#047857)}
.mob-act-btn.test-drive{background:linear-gradient(135deg,#c9a84c,#a07c2a);color:#fff}
.mob-act-btn:hover{transform:scale(1.12);box-shadow:0 6px 22px rgba(0,0,0,.35)}
/* hide desktop float buttons on mobile */
@media(max-width:767px){.zalo-float,.phone-float,#scrollTop{display:none!important}}

/* ══════════════════════════════════════════════════════════
   CAR DETAIL PAGE — PREMIUM GALLERY
═══════════════════════════════════════════════════════════ */
.gallery-section{background:#040408;padding:0}
.gallery-fullwidth{position:relative;width:100%}
.main-photo-wrap{
  border-radius:0;aspect-ratio:21/9;
  background:#0a0a0a;cursor:zoom-in;
}
@media(max-width:767px){.main-photo-wrap{aspect-ratio:16/9}}
.main-photo-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.main-photo-wrap:hover img{transform:scale(1.02)}

/* Thumbnail strip */
.thumbs-wrap{display:flex;gap:8px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
.thumbs-wrap::-webkit-scrollbar{display:none}
.thumb-item{width:100px;height:64px;flex-shrink:0;border-radius:8px;border:2px solid rgba(255,255,255,.08)}
.thumb-item.active,.thumb-item:hover{border-color:var(--blue);opacity:1;box-shadow:0 0 0 1px var(--blue)}

/* Photo nav arrows */
.photo-nav{background:rgba(0,0,0,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);width:48px;height:48px;font-size:1.2rem}
.photo-nav:hover{background:var(--blue);border-color:var(--blue)}

/* ── Detail Section Layout ─────────────────────────────────── */
.detail-section{padding:48px 0 80px;background:#080810}
.car-title{font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:900;color:#fff;letter-spacing:-1px}

/* Sticky price sidebar */
.detail-sidebar-sticky{position:sticky;top:90px}
.price-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;padding:28px;
  backdrop-filter:blur(20px);
}
.price-card .price-main{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;color:var(--blue-light);background:linear-gradient(90deg,var(--blue-light),#74b9ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.price-card .price-original{font-size:1rem;color:#666;text-decoration:line-through}
.price-card .price-save{background:rgba(220,38,38,.2);color:#f87171;border-radius:6px;padding:2px 8px;font-size:.8rem;font-weight:700}

/* Quick specs — premium */
.quick-specs{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:20px 24px}
.spec-icon{background:rgba(28,105,212,.15);border-radius:10px;color:var(--blue-light)}

/* Tabs */
.nav-tabs-dark .nav-link.active{color:var(--blue-light);border-bottom-color:var(--blue-light)}

/* Features grid */
.feature-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;transition:border-color .2s}
.feature-item:hover{border-color:rgba(28,105,212,.3)}
.feature-item i{color:var(--blue-light)}

/* CTA buttons */
.btn-consult{background:linear-gradient(135deg,var(--blue-light),var(--blue));box-shadow:var(--shadow-blue);border-radius:12px;font-size:1rem;letter-spacing:.5px}
.btn-consult:hover{box-shadow:0 12px 32px rgba(28,105,212,.55);transform:translateY(-2px)}
.btn-testdrive{border-color:rgba(255,255,255,.2);color:#ccc;border-radius:12px}
.btn-testdrive:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);color:#fff}

/* ── Related Cars ──────────────────────────────────────────── */
.related-section{background:#040408}
.car-card-sm{background:#111;border:1px solid rgba(255,255,255,.06);border-radius:16px}
.car-card-sm:hover{border-color:rgba(28,105,212,.35);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.car-card-sm .car-name{color:#f0f0f0}
.car-card-sm .car-price{background:linear-gradient(90deg,var(--blue-light),#74b9ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE REFINEMENTS
═══════════════════════════════════════════════════════════ */
@media(max-width:991px){
  .hero-title{font-size:clamp(36px,8vw,56px)}
  .detail-sidebar-sticky{position:static}
}
@media(max-width:767px){
  .hero-section{min-height:100svh}
  .hero-stats{gap:22px}
  .hero-stat-value{font-size:26px}
  .hero-actions{flex-direction:column;gap:10px}
  .hero-actions .btn-bmw-primary,.hero-actions .btn-bmw-outline{width:100%;justify-content:center}
  .quick-specs{padding:16px}
  .price-card{padding:20px}
  .main-photo-wrap{aspect-ratio:16/9;border-radius:0}
  .thumbs-wrap{padding:8px 16px}
  .thumb-item{width:72px;height:48px}
}
@media(max-width:480px){
  .hero-title{font-size:32px;letter-spacing:-1px}
  .hero-subtitle{font-size:14px}
  .section-title{font-size:24px}
}

/* ══════════════════════════════════════════════════════════════
   BRIGHT LUXURY THEME — Giao diện sáng sang trọng
   ══════════════════════════════════════════════════════════════ */

/* ── Missing btn-bmw alias ──────────────────────────────────── */
.btn-bmw{display:inline-flex;align-items:center;gap:8px;background:var(--gradient-blue);color:#fff!important;padding:11px 26px;border-radius:8px;font-weight:600;font-size:14px;border:none;cursor:pointer;transition:var(--t);box-shadow:var(--shadow-blue);white-space:nowrap;text-decoration:none!important}
.btn-bmw:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(28,105,212,.45);color:#fff!important}
.btn-bmw.btn-sm{padding:8px 16px;font-size:13px}
.btn-bmw.btn-lg{padding:14px 34px;font-size:15px}

/* ── Search bar section ─────────────────────────────────────── */
.search-bar-section{background:#fff;padding:0;position:relative;z-index:10;margin-top:-36px}
.search-bar-card{background:#fff;border-radius:16px;padding:24px 28px;box-shadow:0 8px 40px rgba(0,0,0,.12);border:1px solid #e2e8f0;margin-bottom:0}
.search-bar-title{font-size:15px;font-weight:700;color:#0f1b2d;margin-bottom:16px}
.form-label-sm{font-size:12px;font-weight:600;color:#64748b;margin-bottom:4px;display:block}
.search-bar-form .form-select,.search-bar-form .form-control{background:#f8fafc;border-color:#e2e8f0;color:#0f1b2d}
.search-bar-form .form-select:focus,.search-bar-form .form-control:focus{background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(28,105,212,.1)}

/* ── Hero default / placeholder ─────────────────────────────── */
.hero-default{min-height:100vh;background:linear-gradient(135deg,#0a0f1e 0%,#1b2d4f 50%,#0d2040 100%);position:relative;display:flex;align-items:center;justify-content:center}
.hero-bg-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,30,.2) 0%,rgba(10,15,30,.75) 100%)}
.hero-placeholder{min-height:100vh;background:#0a0f1e}

/* ── Topbar → light ─────────────────────────────────────────── */
.topbar{background:#f1f5f9!important;border-bottom:1px solid #e2e8f0!important}
.topbar a{color:#64748b!important}
.topbar a:first-child{color:var(--blue)!important}
.topbar a:hover{color:var(--blue)!important}
.topbar a i{color:var(--blue)!important}
.topbar-right a{color:#64748b!important}
.topbar-right a:hover{color:var(--blue)!important}

/* ── Navbar → white when scrolled ──────────────────────────── */
.main-navbar.scrolled{background:rgba(255,255,255,.97)!important;backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;border-bottom:1px solid rgba(0,0,0,.07)!important;box-shadow:0 2px 24px rgba(0,0,0,.08)!important}
.main-navbar.scrolled .nav-link{color:#111!important}
.main-navbar.scrolled .nav-link:hover,.main-navbar.scrolled .nav-link.active{color:var(--blue)!important;background:rgba(28,105,212,.07)!important}
.main-navbar.scrolled .brand-name{color:#1c69d4!important}
.main-navbar.scrolled .dropdown-menu{background:#fff!important;border-color:#e2e8f0!important}
.main-navbar.scrolled .dropdown-item{color:#4a5568!important}
.main-navbar.scrolled .dropdown-item:hover{background:#eef2ff!important;color:var(--blue)!important}
.main-navbar.scrolled .btn-hotline{color:var(--blue)!important;background:rgba(28,105,212,.08)!important;border-color:rgba(28,105,212,.25)!important}
.main-navbar.scrolled .btn-hotline:hover{background:var(--blue)!important;color:#fff!important}
.main-navbar.scrolled .btn-hotline-mobile{background:rgba(28,105,212,.1)!important;border-color:rgba(28,105,212,.3)!important;color:var(--blue)!important}

/* ── Section titles / labels → dark text on light bg ────────── */
.section-title{color:#0f1b2d}
.section-desc{color:#64748b}

/* ── Why BMW → light card ───────────────────────────────────── */
.why-section{background:#f8fafc!important}
.why-card{background:#fff!important;border-color:#e2e8f0!important}
.why-card::before{display:none}
.why-card:hover{background:#fff!important;border-color:rgba(28,105,212,.2)!important;box-shadow:0 16px 48px rgba(0,0,0,.10)!important;transform:translateY(-6px)!important}
.why-icon{background:#eef2ff!important;color:var(--blue)!important;box-shadow:none!important}
.why-card:hover .why-icon{background:var(--gradient-blue)!important;color:#fff!important}
.why-title{color:#0f1b2d!important}
.why-desc{color:#64748b!important}
.why-section .section-label{color:var(--blue)!important}
.why-section .section-label span{background:var(--blue)!important}
.why-section .section-title{color:#0f1b2d!important}

/* ── Process → white ────────────────────────────────────────── */
.process-section{background:#fff}
.process-title{color:#0f1b2d}
.process-desc{color:#64748b}

/* ── Financing section → white/light ───────────────────────── */
.financing-section{background:#fff!important}
.financing-section::before{height:4px;bottom:auto}
.financing-bg-shape{display:block}
.financing-stat-card{background:#f1f5f9!important;border-color:#e2e8f0!important}
.financing-stat-card:hover{background:#eef2ff!important;border-color:rgba(28,105,212,.3)!important}
.financing-stat-value{color:var(--blue)!important;-webkit-text-fill-color:var(--blue)!important;background:none!important}
.financing-stat-label{color:#64748b!important}
.calculator-card{background:#f8fafc!important;border-color:#e2e8f0!important}
.calculator-card label{color:#4a5568!important}
.calculator-card label[style]{color:#4a5568!important}
.calculator-card .d-flex span[style]{color:#64748b!important}
.calculator-card .form-control,.calculator-card .form-select{background:#fff!important;border:1px solid #d1d5db!important;color:#0f1b2d!important}
.calculator-result{background:#eef2ff!important;border-color:rgba(28,105,212,.2)!important}
.calculator-result [style*="rgba(255,255,255"]{color:#64748b!important}
.calculator-result-value{color:var(--blue)!important}
.calculator-result-label{color:#64748b!important}
.financing-section .section-label{color:var(--blue)!important}
.financing-section .section-label span{background:var(--blue)!important}
.financing-section .section-title{color:#0f1b2d!important}
.financing-section .section-desc{color:#64748b!important}

/* ── Section labels → blue on all light-bg sections ────────── */
.categories-section .section-label,
.cars-section .section-label,
.process-section .section-label,
.testdrive-section .section-label,
.testimonials-section .section-label,
.news-section .section-label,
.consultants-section .section-label{color:var(--blue)!important}
.categories-section .section-label span,
.cars-section .section-label span,
.process-section .section-label span,
.testdrive-section .section-label span,
.testimonials-section .section-label span,
.news-section .section-label span,
.consultants-section .section-label span{background:var(--blue)!important}

/* ── Page hero (cars/news listing) → white ──────────────────── */
.page-hero{background:#fff!important;border-bottom:1px solid #e2e8f0!important;padding:48px 0 36px!important}
.page-hero::before{display:none!important}
.page-hero-title{font-size:36px!important;font-weight:800!important;color:#0f1b2d!important;-webkit-text-fill-color:#0f1b2d!important;background:none!important;letter-spacing:-.5px!important}
.page-hero .breadcrumb-item a{color:var(--blue)!important}
.page-hero .breadcrumb-item.active{color:#94a3b8!important}
.page-hero .breadcrumb-item+.breadcrumb-item::before{color:#cbd5e1!important}
.page-hero-sub{color:#64748b!important}
.page-hero-sub strong{color:var(--blue)!important}
@media(max-width:767px){.page-hero-title{font-size:24px!important}}

/* ── Filter sidebar → white ─────────────────────────────────── */
.filter-sidebar{background:#fff!important;border:1px solid #e2e8f0!important;border-radius:16px!important}
.filter-header{border-bottom-color:#e2e8f0!important}
.filter-header h5{color:#0f1b2d!important}
.filter-reset-link{color:#94a3b8!important}
.filter-group{border-bottom-color:#f1f5f9!important}
.filter-label{color:#64748b!important}
.filter-check span{color:#4a5568!important}
.filter-check:hover span{color:#0f1b2d!important}
.filter-check input:checked + span{color:#0f1b2d!important}
.btn-price-quick{background:#fff!important;border-color:#e2e8f0!important;color:#64748b!important}
.btn-price-quick:hover{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
.filter-offcanvas{background:#fff!important}
.filter-offcanvas .offcanvas-header{background:#f8fafc!important;border-bottom-color:#e2e8f0!important}
.filter-offcanvas .offcanvas-title{color:#0f1b2d!important}
.filter-offcanvas .filter-group{border-bottom-color:#f1f5f9!important}

/* ── Form controls → white/light ───────────────────────────── */
.form-select,.filter-select{background:#fff!important;border-color:#e2e8f0!important;color:#0f1b2d!important}
.form-select:focus,.filter-select:focus{background:#fff!important;border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(28,105,212,.1)!important;color:#0f1b2d!important}
.form-select option,.filter-select option{background:#fff!important;color:#0f1b2d!important}
.form-control{background:#fff!important;border-color:#e2e8f0!important;color:#0f1b2d!important}
.form-control:focus{background:#fff!important;border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(28,105,212,.1)!important;color:#0f1b2d!important}
.form-control::placeholder{color:#94a3b8!important}
.input-group-text{background:#f8fafc!important;border-color:#e2e8f0!important;color:#94a3b8!important}

/* ── Cars toolbar → white ───────────────────────────────────── */
.cars-toolbar{background:#fff!important;border:1px solid #e2e8f0!important}
.cars-count{color:#64748b}
.sort-select{background:#fff!important;border-color:#e2e8f0!important;color:#0f1b2d!important}
.sort-select:focus{background:#fff!important;border-color:var(--blue)!important}
.view-btn{color:#94a3b8}
.view-toggle{border-color:#e2e8f0}

/* ── Car cards (listing) → white clean ─────────────────────── */
.car-card{background:#fff!important;border-color:#e2e8f0!important}
.car-card:hover{background:#fff!important;border-color:rgba(28,105,212,.2)!important;box-shadow:0 12px 40px rgba(0,0,0,.10)!important;transform:translateY(-6px) scale(1)!important}
.car-card-img-wrap::after{opacity:0!important}
.car-card:hover .car-card-img-wrap::after{opacity:.15!important}
.car-card-body{background:#fff!important}
.car-category-tag{color:var(--blue)!important;letter-spacing:.5px}
.car-card-title a{color:#0f1b2d!important}
.car-card-title a:hover{color:var(--blue)!important}
.car-spec{color:#64748b!important}
.car-spec i{color:var(--blue)!important}
.price-main{font-size:19px!important;font-weight:800!important;color:var(--blue)!important;background:none!important;-webkit-text-fill-color:var(--blue)!important}
.price-old{color:#94a3b8!important}
.car-card-actions{background:#f8fafc!important;border-top-color:#f0f4f8!important}
.btn-car-contact:hover{background:rgba(28,105,212,.08)!important;border-color:var(--blue)!important;color:var(--blue)!important}

/* Empty state light */
.empty-icon{color:#e2e8f0!important}
.empty-title{color:#0f1b2d!important}
.empty-sub{color:#94a3b8!important}

/* Active filter pills */
.filter-pill{background:#eef2ff!important;border-color:rgba(28,105,212,.2)!important;color:var(--blue)!important}

/* ── Car detail page → white/light ─────────────────────────── */
.gallery-section{background:#f8fafc!important}
.main-photo-wrap{background:#f0f4f8!important}
.thumb-item{border-color:#e2e8f0!important}
.thumb-item.active,.thumb-item:hover{border-color:var(--blue)!important}
.detail-section{background:#fff!important}
.car-title{color:#0f1b2d!important;-webkit-text-fill-color:#0f1b2d!important;background:none!important}
.price-card{background:#fff!important;border:1px solid #e2e8f0!important;box-shadow:0 4px 20px rgba(0,0,0,.08)!important}
.price-card .price-main{color:var(--blue)!important;background:none!important;-webkit-text-fill-color:var(--blue)!important}
.price-card .price-original{color:#94a3b8!important}
.price-card .price-save{background:#fef2f2!important;color:#ef4444!important}
.quick-specs{background:#f8fafc!important;border-color:#e2e8f0!important}
.spec-icon{background:#eef2ff!important;color:var(--blue)!important}
.nav-tabs-dark .nav-link{color:#64748b!important}
.nav-tabs-dark .nav-link.active{color:var(--blue)!important;border-bottom-color:var(--blue)!important}
.feature-item{background:#f8fafc!important;border-color:#e2e8f0!important}
.feature-item:hover{background:#eef2ff!important;border-color:rgba(28,105,212,.3)!important}
.feature-item i{color:var(--blue)!important}
.btn-testdrive{border-color:#e2e8f0!important;color:#4a5568!important}
.btn-testdrive:hover{background:#f1f5f9!important;border-color:var(--blue)!important;color:var(--blue)!important}
.related-section{background:#f8fafc!important}
.car-card-sm{background:#fff!important;border-color:#e2e8f0!important}
.car-card-sm:hover{border-color:rgba(28,105,212,.3)!important;box-shadow:0 12px 40px rgba(0,0,0,.10)!important}
.car-card-sm .car-name{color:#0f1b2d!important}
.car-card-sm .car-price{color:var(--blue)!important;background:none!important;-webkit-text-fill-color:var(--blue)!important}

/* ── Confirm dialog → white ─────────────────────────────────── */
.confirm-box{background:#fff!important;border-color:#e2e8f0!important}
.confirm-title{color:#0f1b2d!important}
.confirm-msg{color:#64748b!important}
.confirm-btn-cancel{background:#f1f5f9!important;color:#4a5568!important;border-color:#e2e8f0!important}
.confirm-btn-cancel:hover{background:#e2e8f0!important}

/* ── Mobile table → white ───────────────────────────────────── */
@media(max-width:767px){
  .table-responsive-stack tr{background:#fff!important;border-color:#e2e8f0!important}
  .table-responsive-stack td::before{color:#94a3b8!important}
}

/* ── Home section backgrounds ───────────────────────────────── */
.categories-section{background:#fff}
.cars-section{background:#fff}
.cars-section.bg-gray{background:#f8fafc}
.cars-section.bg-gray .car-card{background:#fff!important;border-color:#e2e8f0!important}
.cars-section.bg-gray .car-card-body{background:#fff!important}
.cars-section.bg-gray .car-card-actions{background:#f8fafc!important}
.cars-section.bg-gray .car-card-img-wrap::after{opacity:0!important}
.testdrive-section{background:#f8fafc}
.consultants-section{background:#fff}
.testimonials-section{background:#f8fafc}
.news-section{background:#fff}

/* ── Footer → keep dark navy (luxury feel) ──────────────────── */
.site-footer{background:#0f1b2d!important;border-top:4px solid var(--blue)!important}
.footer-bottom{border-top-color:rgba(255,255,255,.07)!important}

/* ── Toast → dark on light page ────────────────────────────── */
.toast-bmw{background:#0f1b2d!important;color:#fff!important}

/* ── Admin table mobile override already white (see above) ─── */

/* ── Hero stats gradient fix (keep white) ───────────────────── */
.hero-stat-value{background:linear-gradient(180deg,#fff 60%,rgba(255,255,255,.6));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── Misc. legacy dark overrides ─────────────────────────────── */
.condition-new{background:rgba(28,105,212,.12)!important;color:var(--blue)!important}
.condition-used{background:#f1f5f9!important;color:#64748b!important}
.condition-certified{background:rgba(124,58,237,.1)!important;color:#7c3aed!important}
.car-condition-tag{font-size:11.5px!important}

/* ── Specs table (detail) ───────────────────────────────────── */
.specs-table td:first-child,.specs-table tr:nth-child(even) td{background:#f8fafc!important}
.specs-table td{color:#0f1b2d!important;border-bottom-color:#e2e8f0!important}

/* ── Section label gold on dark sections only ───────────────── */
.hero-section .section-label{color:var(--gold-light)}
.hero-section .section-label span{background:var(--gold-light)}

/* ── Hero Carousel (Banner từ DB) ───────────────────────────── */
.hero-carousel-section{
  display:block!important;
  min-height:0!important;
  padding:0!important;
  background:none!important;
  overflow:hidden;
}
.hero-carousel-section::after{display:none!important}
.hero-carousel-section .hero-bg,
.hero-carousel-section .hero-bg-car,
.hero-carousel-section .hero-overlay{display:none!important}
.hero-carousel-section #heroCarousel,
.hero-carousel-section .carousel-inner,
.hero-carousel-section .carousel-item{
  width:100%;
  max-width:100%;
}

.hero-banner-img{
  width:100%;
  height:620px;
  object-fit:cover;
  object-position:center center;
  filter:brightness(.65);
  display:block;
  max-width:100%;
}
@media(max-width:768px){.hero-banner-img{height:380px}}

.hero-carousel-caption{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0 5%;
  text-align:left;
  bottom:0!important;
  top:0!important;
  left:0!important;
  right:0!important;
  transform:none!important;
}
.hero-caption-inner{max-width:640px}
.hero-eyebrow-badge{
  display:inline-block;
  font-size:.7rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
  margin-bottom:.6rem;
  font-weight:600;
}
.hero-banner-title{
  font-size:clamp(1.8rem,5vw,3.5rem);
  font-weight:900;
  line-height:1.1;
  color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.5);
  margin-bottom:.75rem;
}
.hero-banner-subtitle{
  font-size:clamp(.9rem,2vw,1.1rem);
  color:rgba(255,255,255,.85);
  margin-bottom:0;
  line-height:1.6;
}
.hero-banner-actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero-banner-actions .btn-bmw-primary{
  padding:12px 28px;
  font-size:15px;
}
.hero-banner-actions .btn-bmw-outline{
  color:#fff!important;
  border-color:rgba(255,255,255,.6)!important;
  padding:12px 28px;
  font-size:15px;
}
.hero-banner-actions .btn-bmw-outline:hover{
  background:rgba(255,255,255,.15)!important;
  color:#fff!important;
}
#heroCarousel .carousel-indicators button{
  width:32px;height:4px;border-radius:2px;
  border:none;background:rgba(255,255,255,.4);
  transition:.3s;
}
#heroCarousel .carousel-indicators button.active{
  background:#fff;width:48px;
}
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next{
  width:48px;opacity:.6;transition:.2s;
}
#heroCarousel .carousel-control-prev:hover,
#heroCarousel .carousel-control-next:hover{opacity:1}

/* Stats bar below carousel */
.hero-stats-bar{
  background:#fff;
  border-bottom:1px solid #eee;
  box-shadow:0 2px 16px rgba(0,0,0,.06);
  padding:20px 0;
}
.hero-stats-bar .hero-stats{
  display:flex;
  justify-content:space-around;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  background:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  border:none!important;
}
.hero-stats-bar .hero-stat-value{
  font-size:1.6rem;
  font-weight:900;
  color:var(--blue)!important;
  -webkit-text-fill-color:var(--blue)!important;
  background:none!important;
  line-height:1;
}
.hero-stats-bar .hero-stat-label{
  font-size:.75rem;
  color:#666;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-top:2px;
}
.hero-stats-bar > .container > .hero-stats > div{
  text-align:center;
}
@media(max-width:576px){
  .hero-stats-bar .hero-stats{gap:12px}
  .hero-stats-bar .hero-stat-value{font-size:1.3rem}
}

/* ══════════════════════════════════════════════════════════════
   WHITE + BMW BLUE THEME — Final overrides
   Màu chủ đạo: TRẮNG  |  Accent: BMW Blue #1c69d4
   ══════════════════════════════════════════════════════════════ */

/* ── Topbar: BMW Blue ───────────────────────────────────────── */
.topbar{background:linear-gradient(90deg,#0d47a1 0%,#1c69d4 50%,#0d47a1 100%)!important;border-bottom:1px solid rgba(255,255,255,.12)!important}
.topbar a{color:rgba(255,255,255,.85)!important}
.topbar a:first-child{color:#fff!important}
.topbar a:hover{color:#fff!important;opacity:1!important}
.topbar a i{color:rgba(255,255,255,.7)!important}
.topbar-right a{color:rgba(255,255,255,.85)!important}
.topbar-right a:hover{color:#fff!important}

/* ── Navbar: Always white (không transparent khi ở đầu trang) ─ */
.main-navbar{
  background:rgba(255,255,255,.98)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
  border-bottom:1px solid rgba(28,105,212,.1)!important;
  box-shadow:0 2px 20px rgba(28,105,212,.08)!important;
}
.main-navbar.scrolled{
  background:rgba(255,255,255,.99)!important;
  box-shadow:0 4px 30px rgba(28,105,212,.12)!important;
  border-bottom-color:rgba(28,105,212,.14)!important;
}
.main-navbar .nav-link{color:#1a2340!important;font-weight:600!important}
.main-navbar .nav-link:hover,.main-navbar .nav-link.active{color:#1c69d4!important;background:rgba(28,105,212,.08)!important}
.main-navbar .brand-name{color:#1c69d4!important}
.main-navbar .brand-sub{color:rgba(28,105,212,.65)!important}
.main-navbar .dropdown-menu{background:#fff!important;border:1px solid rgba(28,105,212,.12)!important;box-shadow:0 20px 60px rgba(28,105,212,.12)!important}
.main-navbar .dropdown-item{color:#1a2340!important}
.main-navbar .dropdown-item:hover{background:var(--blue)!important;color:#fff!important}
.main-navbar .btn-hotline{background:var(--gradient-blue)!important;color:#fff!important;border:none!important;box-shadow:0 4px 14px rgba(28,105,212,.3)!important}
.main-navbar .btn-hotline:hover{box-shadow:0 6px 20px rgba(28,105,212,.45)!important;transform:translateY(-1px)!important}

/* ── Mobile nav offcanvas: white ───────────────────────────── */
.mobile-nav-offcanvas{background:#fff!important;border-left:1px solid rgba(28,105,212,.1)!important}
.mobile-nav-offcanvas .offcanvas-header{background:#f0f5ff!important;border-bottom:1px solid rgba(28,105,212,.1)!important}
.mobile-nav-label{color:#7a8ab0!important}
.mobile-nav-link{color:#1a2340!important}
.mobile-nav-link:hover,.mobile-nav-link.active{color:var(--blue)!important;background:rgba(28,105,212,.07)!important;border-left-color:var(--blue)!important}
.mobile-nav-footer{border-top:1px solid rgba(28,105,212,.1)!important}
.mobile-nav-socials a{background:rgba(28,105,212,.08)!important;border:1px solid rgba(28,105,212,.15)!important;color:var(--blue)!important}
.mobile-nav-socials a:hover{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}

/* ── Why BMW section: white cards on light blue bg ─────────── */
.why-section{background:linear-gradient(160deg,#f0f5ff 0%,#e8effd 50%,#f4f8ff 100%)!important}
.why-card{background:#fff!important;border:1.5px solid rgba(28,105,212,.1)!important;box-shadow:0 4px 20px rgba(28,105,212,.07)!important}
.why-card::before{display:none!important}
.why-card:hover{background:#fff!important;border-color:rgba(28,105,212,.3)!important;box-shadow:0 16px 40px rgba(28,105,212,.14)!important;transform:translateY(-6px)!important}
.why-icon{background:linear-gradient(135deg,#dbeafe,#bfdbfe)!important;color:var(--blue)!important;box-shadow:0 4px 14px rgba(28,105,212,.15)!important}
.why-card:hover .why-icon{background:var(--gradient-blue)!important;color:#fff!important;box-shadow:0 6px 20px rgba(28,105,212,.35)!important}
.why-title{color:#0d1f3c!important}
.why-desc{color:#4a5680!important}
.why-section .section-title{color:#0d1f3c!important}

/* ── Financing section: White bg ───────────────────────────── */
.financing-section{background:#f8fafc!important}
.financing-section::before{display:none!important}
.financing-stat-card{background:#ffffff!important;border:1px solid #e2e8f0!important;box-shadow:0 4px 16px rgba(28,105,212,.08)!important}
.financing-stat-card:hover{background:#f0f6ff!important;border-color:rgba(28,105,212,.4)!important;transform:translateY(-4px)!important;box-shadow:0 8px 24px rgba(28,105,212,.15)!important}
.financing-stat-value{color:#1c69d4!important;-webkit-text-fill-color:#1c69d4!important;background:none!important}
.financing-stat-label{color:#4a5568!important}
.calculator-card{background:#ffffff!important;border:1px solid #e2e8f0!important;box-shadow:0 4px 20px rgba(28,105,212,.08)!important}
.calculator-card label{color:#374151!important}
.calculator-card .d-flex span{color:#64748b!important}
.calculator-card .form-control,.calculator-card .form-select{background:#f8fafc!important;border:1px solid #d1d5db!important;color:#0f1b2d!important}
.calculator-card .form-control::placeholder{color:#9ca3af!important}
.calculator-card input[type=range]{accent-color:#1c69d4!important}
.calculator-result{background:#eef2ff!important;border:1px solid rgba(28,105,212,.2)!important}
.calculator-result-value{color:#1c69d4!important;-webkit-text-fill-color:#1c69d4!important;background:none!important}
.calculator-result-label{color:#374151!important}
.calculator-result [style*="rgba(255,255,255"]{color:#64748b!important}
.financing-section .section-title{color:#0f1b2d!important}
.financing-section .section-desc{color:#4a5568!important}
.financing-section .section-label{color:var(--blue)!important}
.financing-section .section-label span{background:var(--blue)!important}
.financing-section .section-title-white{color:#0f1b2d!important}

/* ── Footer: BMW Navy Blue ──────────────────────────────────── */
.site-footer{background:linear-gradient(180deg,#0d2b6e 0%,#09205a 60%,#071848 100%)!important;border-top:3px solid rgba(28,105,212,.5)!important}
.footer-brand-name{color:#fff!important}
.footer-brand-sub{color:rgba(255,255,255,.6)!important}
.footer-desc{color:rgba(255,255,255,.65)!important}
.footer-title{color:#fff!important}
.footer-list li{color:rgba(255,255,255,.65)!important}
.footer-list li i{color:rgba(255,255,255,.75)!important}
.footer-nav-list a{color:rgba(255,255,255,.6)!important}
.footer-nav-list a:hover{color:#fff!important}
.footer-socials a{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.2)!important;color:rgba(255,255,255,.7)!important}
.footer-socials a:hover{background:#fff!important;border-color:#fff!important;color:var(--blue)!important}
.footer-contact-card{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.15)!important}
.contact-item i{color:rgba(255,255,255,.8)!important}
.contact-label{color:rgba(255,255,255,.5)!important}
.contact-value{color:#fff!important}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12)!important;color:rgba(255,255,255,.45)!important}
.footer-bottom-links a{color:rgba(255,255,255,.45)!important}
.footer-bottom-links a:hover{color:#fff!important}

/* ── Mobile FAB overrides ───────────────────────────────────── */
.mob-act-btn.call{background:var(--gradient-blue)!important}
.mob-act-btn.email{background:linear-gradient(135deg,#059669,#047857)!important}
.mob-act-btn.test-drive{background:linear-gradient(135deg,#c9a84c,#a07c2a)!important;color:#fff!important}

/* ── Section titles on white bg ────────────────────────────── */
.section-label{color:var(--blue)!important}
.section-label span{background:var(--blue)!important}
.section-title{color:#0d1f3c!important}
.section-desc{color:#4a5680!important}

/* ══════════════════════════════════════════════════════════════
   LUXURY WHITE PREMIUM — Đỉnh cao sang trọng  v4
   Palette: Trắng tinh #fff / Pearl #fafafa — BMW Blue — Navy footer
   Typography: Barlow (body/headings) + Barlow Condensed (labels/hero) — BMW Type Next closest match
   ══════════════════════════════════════════════════════════════ */

/* Barlow Condensed cho hero title và section label — đúng phong cách BMW */
.hero-banner-title,
.hero-title,
.page-hero-title,
.testdrive-left-title{
  font-family:'Barlow Condensed','Barlow','Be Vietnam Pro',sans-serif!important;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.section-title,
.why-title,
.car-card-name,
.car-title{
  font-family:'Barlow','Be Vietnam Pro',sans-serif!important;
  letter-spacing:.03em;
  font-weight:700;
}
.section-label{
  font-family:'Barlow Condensed','Barlow','Be Vietnam Pro',sans-serif!important;
  letter-spacing:.12em;
  font-weight:600;
  text-transform:uppercase;
}

/* ── Design tokens ─────────────────────────────────────────────── */
:root{
  --lux-white:#ffffff;
  --lux-pearl:#fafafa;
  --lux-silver:#f4f6f9;
  --lux-border:rgba(0,0,0,.055);
  --lux-border-blue:rgba(28,105,212,.13);
  --lux-shadow:0 2px 18px rgba(0,0,0,.055);
  --lux-shadow-h:0 20px 56px rgba(0,0,0,.11);
  --lux-gold:#c9a84c;
  --lux-text:#09101f;
  --lux-muted:#6b7280;
}

/* ── Section labels — thin gradient accent ─────────────────────── */
.section-label{
  color:var(--blue)!important;
  letter-spacing:3px!important;
  font-size:11px!important;
  font-weight:800!important;
}
.section-label span{
  background:linear-gradient(90deg,var(--blue),var(--lux-gold))!important;
  height:1.5px!important;
  max-width:36px!important;
}

/* ── Section headings — serif refinement ──────────────────────── */
.section-title{
  font-size:clamp(28px,4.5vw,46px)!important;
  font-weight:700!important;
  letter-spacing:-0.025em!important;
  line-height:1.13!important;
  color:var(--lux-text)!important;
}
.section-desc{color:var(--lux-muted)!important;line-height:1.85!important}

/* ── Hero stats bar — white ────────────────────────────────────── */
.hero-stats-bar{
  background:#fff!important;
  border-bottom:1px solid var(--lux-border)!important;
  box-shadow:0 2px 16px rgba(0,0,0,.05)!important;
}
.hero-stats-bar .hero-stat-value{
  color:var(--blue)!important;
  -webkit-text-fill-color:var(--blue)!important;
  background:none!important;
  font-size:1.6rem!important;
}
.hero-stats-bar .hero-stat-label{color:var(--lux-muted)!important}

/* ── Categories — pure white ───────────────────────────────────── */
.categories-section{background:var(--lux-white)!important;border-bottom:1px solid var(--lux-border)!important}
.categories-section::before{display:none!important}
.cat-card{
  background:var(--lux-white)!important;
  border:1px solid var(--lux-border)!important;
  box-shadow:var(--lux-shadow)!important;
  border-radius:14px!important;
  transition:all .3s ease!important;
}
.cat-card:hover,.cat-card.active{
  border-color:rgba(28,105,212,.3)!important;
  box-shadow:0 10px 36px rgba(28,105,212,.16)!important;
  transform:translateY(-5px)!important;
}
.cat-icon{background:#f0f5ff!important;color:var(--blue)!important;border-radius:14px!important}
.cat-card:hover .cat-icon,.cat-card.active .cat-icon{
  background:var(--gradient-blue)!important;color:#fff!important;
  box-shadow:0 4px 16px rgba(28,105,212,.3)!important;
}
.cat-name{color:var(--lux-text)!important}
.cat-count{color:#9ca3af!important}

/* ── Cars sections — white/pearl alternating ──────────────────── */
.cars-section{background:var(--lux-pearl)!important}
.cars-section.bg-gray{background:var(--lux-silver)!important}

/* Car cards — pristine luxury ──────────────────────────────────── */
.car-card{
  background:var(--lux-white)!important;
  border:1px solid var(--lux-border)!important;
  border-radius:16px!important;
  box-shadow:var(--lux-shadow)!important;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94),box-shadow .4s ease,border-color .3s!important;
}
.car-card::before{
  height:2px!important;
  background:linear-gradient(90deg,var(--blue),var(--lux-gold))!important;
}
.car-card:hover{
  transform:translateY(-8px)!important;
  box-shadow:var(--lux-shadow-h)!important;
  border-color:var(--lux-border-blue)!important;
}
.car-card-img-wrap::after{opacity:0!important}
.car-card-body,.car-card-actions{background:var(--lux-white)!important}
.car-category-tag{color:var(--blue)!important}
.car-card-title a{color:var(--lux-text)!important}
.car-card-title a:hover{color:var(--blue)!important}
.car-spec{color:var(--lux-muted)!important}
.car-spec i{color:var(--blue)!important}
.price-main{
  font-size:20px!important;font-weight:900!important;
  color:var(--blue)!important;background:none!important;
  -webkit-text-fill-color:var(--blue)!important;
}
.price-old{color:#9ca3af!important}
.car-card-actions{
  background:var(--lux-pearl)!important;
  border-top:1px solid var(--lux-border)!important;
}
.btn-car-contact:hover{
  background:rgba(28,105,212,.07)!important;
  border-color:var(--blue)!important;
  color:var(--blue)!important;
}
.cars-section.bg-gray .car-card-actions{background:var(--lux-silver)!important}

/* ── Cars tab buttons — refined ───────────────────────────────── */
.cars-tab-btn{
  background:var(--lux-white)!important;
  border:1.5px solid var(--lux-border)!important;
  color:#4a5568!important;
  border-radius:30px!important;
}
.cars-tab-btn.active,.cars-tab-btn:hover{
  background:var(--gradient-blue)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 4px 16px rgba(28,105,212,.3)!important;
}

/* ── Why BMW — pure white ──────────────────────────────────────── */
.why-section{
  background:var(--lux-white)!important;
  border-top:1px solid var(--lux-border)!important;
  border-bottom:1px solid var(--lux-border)!important;
}
.why-section::before,.why-section::after{display:none!important}
.why-card{
  background:var(--lux-white)!important;
  border:1px solid var(--lux-border)!important;
  box-shadow:var(--lux-shadow)!important;
  border-radius:18px!important;
}
.why-card::before{display:none!important}
.why-card:hover{
  border-color:var(--lux-border-blue)!important;
  box-shadow:var(--lux-shadow-h)!important;
  transform:translateY(-7px)!important;
}
.why-icon{
  background:#f0f5ff!important;color:var(--blue)!important;
  box-shadow:none!important;border-radius:14px!important;
}
.why-card:hover .why-icon{
  background:var(--gradient-blue)!important;color:#fff!important;
  box-shadow:0 6px 20px rgba(28,105,212,.3)!important;
}
.why-title{color:var(--lux-text)!important;font-size:17px!important}
.why-desc{color:var(--lux-muted)!important}
.why-section .section-title{color:var(--lux-text)!important}

/* ── Process — pearl ──────────────────────────────────────────── */
.process-section{background:var(--lux-pearl)!important}
.process-section::before{display:none!important}
.process-num{background:var(--gradient-blue)!important;box-shadow:0 6px 24px rgba(28,105,212,.3)!important}
.process-title{color:var(--lux-text)!important}
.process-desc{color:var(--lux-muted)!important}
.process-step::after{background:linear-gradient(90deg,rgba(28,105,212,.3),rgba(28,105,212,.04))!important}

/* ── Financing — white bg ─────────────────────────────────────── */
.financing-section{background:#f8fafc!important}
.financing-stat-value{font-size:34px!important;font-weight:900!important;color:#1c69d4!important;-webkit-text-fill-color:#1c69d4!important;background:none!important}

/* ── Test drive — white ───────────────────────────────────────── */
.testdrive-section{background:var(--lux-pearl)!important}
.testdrive-right{background:var(--lux-white)!important}
.testdrive-card{box-shadow:0 8px 48px rgba(0,0,0,.09)!important}

/* ── Testimonials — white ─────────────────────────────────────── */
.testimonials-section{background:var(--lux-white)!important}
.testimonial-card{
  background:var(--lux-white)!important;
  border:1px solid var(--lux-border)!important;
  box-shadow:var(--lux-shadow)!important;
}
.testimonial-card:hover{
  box-shadow:var(--lux-shadow-h)!important;
  border-color:var(--lux-border-blue)!important;
}
.testimonial-stars{color:var(--lux-gold)!important}
.testimonial-quote{color:var(--blue)!important;opacity:.06!important}
.testimonial-text{color:#374151!important}
.testimonial-name{color:var(--lux-text)!important}
.testimonial-car{color:var(--blue)!important}

/* ── Consultants — pearl ──────────────────────────────────────── */
.consultants-section{background:var(--lux-pearl)!important}
.consultant-card{
  background:var(--lux-white)!important;
  border:1px solid var(--lux-border)!important;
  box-shadow:var(--lux-shadow)!important;
}
.consultant-card:hover{
  transform:translateY(-8px)!important;
  box-shadow:var(--lux-shadow-h)!important;
}
.consultant-badge{background:var(--gradient-blue)!important;color:#fff!important}

/* ── News — white ─────────────────────────────────────────────── */
.news-section{background:var(--lux-white)!important}
.news-card{
  background:var(--lux-white)!important;
  border:1px solid var(--lux-border)!important;
  background-image:none!important;
  border-top:2px solid var(--lux-border)!important;
}
.news-card:hover{
  box-shadow:var(--lux-shadow-h)!important;
  border-top-color:var(--blue)!important;
}
.news-cat-badge{
  background:rgba(28,105,212,.08)!important;
  color:var(--blue)!important;
  border:1px solid rgba(28,105,212,.12)!important;
}
.news-card-title a{color:var(--lux-text)!important}
.news-card-title a:hover{color:var(--blue)!important}
.news-card-excerpt{color:var(--lux-muted)!important}
.news-card-meta{color:#9ca3af!important}

/* ── Page hero (listing pages) — pristine ────────────────────── */
.page-hero{
  background:var(--lux-white)!important;
  border-bottom:1px solid var(--lux-border)!important;
  padding:52px 0 38px!important;
}
.page-hero::before{display:none!important}
.page-hero-title{
  font-weight:700!important;
  color:var(--lux-text)!important;
  -webkit-text-fill-color:var(--lux-text)!important;
  background:none!important;
  letter-spacing:-0.025em!important;
}

/* ── Filter sidebar — white ────────────────────────────────────── */
.filter-sidebar{
  background:var(--lux-white)!important;
  border:1px solid var(--lux-border)!important;
  box-shadow:var(--lux-shadow)!important;
}
.filter-header h5{color:var(--lux-text)!important}
.filter-label{color:var(--lux-muted)!important}
.filter-check span{color:#4a5568!important}
.filter-check:hover span{color:var(--lux-text)!important}
.btn-price-quick{background:var(--lux-white)!important;border-color:var(--lux-border)!important;color:var(--lux-muted)!important}
.btn-price-quick:hover{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}

/* ── Cars toolbar — white ──────────────────────────────────────── */
.cars-toolbar{background:var(--lux-white)!important;border:1px solid var(--lux-border)!important}
.cars-count{color:var(--lux-muted)!important}

/* ── Car detail page ───────────────────────────────────────────── */
.gallery-section{background:var(--lux-silver)!important}
.main-photo-wrap{background:var(--lux-silver)!important}
.thumb-item{border-color:var(--lux-border)!important}
.thumb-item.active,.thumb-item:hover{border-color:var(--blue)!important}
.detail-section{background:var(--lux-white)!important}
.car-title{color:var(--lux-text)!important;-webkit-text-fill-color:var(--lux-text)!important;background:none!important}
.price-card{
  background:var(--lux-white)!important;
  border:1px solid var(--lux-border)!important;
  box-shadow:0 4px 24px rgba(0,0,0,.07)!important;
}
.price-card .price-main{color:var(--blue)!important;background:none!important;-webkit-text-fill-color:var(--blue)!important}
.price-card .price-original{color:#9ca3af!important}
.price-card .price-save{background:#fef2f2!important;color:#ef4444!important}
.quick-specs{background:var(--lux-pearl)!important;border:1px solid var(--lux-border)!important}
.spec-icon{background:#f0f5ff!important;color:var(--blue)!important}
.feature-item{background:var(--lux-pearl)!important;border:1px solid var(--lux-border)!important}
.feature-item:hover{background:#f0f5ff!important;border-color:rgba(28,105,212,.2)!important}
.feature-item i{color:var(--blue)!important}
.nav-tabs-dark .nav-link{color:var(--lux-muted)!important}
.nav-tabs-dark .nav-link.active{color:var(--blue)!important;border-bottom-color:var(--blue)!important}
.btn-testdrive{border-color:var(--lux-border)!important;color:#4a5568!important}
.btn-testdrive:hover{background:var(--lux-pearl)!important;border-color:var(--blue)!important;color:var(--blue)!important}
.related-section{background:var(--lux-pearl)!important}
.car-card-sm{background:var(--lux-white)!important;border:1px solid var(--lux-border)!important}
.car-card-sm:hover{box-shadow:var(--lux-shadow-h)!important;border-color:var(--lux-border-blue)!important}
.car-card-sm .car-name{color:var(--lux-text)!important}
.car-card-sm .car-price{color:var(--blue)!important;-webkit-text-fill-color:var(--blue)!important;background:none!important}
.specs-table td{color:var(--lux-text)!important;border-bottom-color:var(--lux-border)!important}
.specs-table td:first-child,.specs-table tr:nth-child(even) td{background:var(--lux-pearl)!important}

/* ── Mobile nav — white ─────────────────────────────────────────── */
.mobile-nav-offcanvas{background:var(--lux-white)!important;border-left:1px solid var(--lux-border)!important}
.mobile-nav-offcanvas .offcanvas-header{background:var(--lux-pearl)!important;border-bottom:1px solid var(--lux-border)!important}
.mobile-nav-link{color:#1a2340!important}
.mobile-nav-link:hover,.mobile-nav-link.active{color:var(--blue)!important;background:rgba(28,105,212,.07)!important;border-left-color:var(--blue)!important}

/* ── Forms — refined ────────────────────────────────────────────── */
.form-control,.form-select{
  background:var(--lux-white)!important;
  border:1.5px solid rgba(0,0,0,.1)!important;
  color:var(--lux-text)!important;
  border-radius:9px!important;
}
.form-control:focus,.form-select:focus{
  border-color:var(--blue)!important;
  box-shadow:0 0 0 3px rgba(28,105,212,.1)!important;
}
.form-control::placeholder{color:#9ca3af!important}

/* ── Confirm dialog — white ─────────────────────────────────────── */
.confirm-box{background:var(--lux-white)!important;border-color:var(--lux-border)!important}
.confirm-title{color:var(--lux-text)!important}
.confirm-msg{color:var(--lux-muted)!important}
.confirm-btn-cancel{background:var(--lux-pearl)!important;color:#4a5568!important;border-color:var(--lux-border)!important}

/* ── Scroll progress bar — blue→gold ───────────────────────────── */
#scrollProgressBar{background:linear-gradient(90deg,var(--blue),var(--lux-gold))!important}

/* ── Section divider ────────────────────────────────────────────── */
.section-divider-accent{background:linear-gradient(90deg,transparent,rgba(28,105,212,.18),transparent)!important;opacity:1!important}

/* ── Footer — elegant navy ──────────────────────────────────────── */
.site-footer{
  background:linear-gradient(180deg,#0b1f4d 0%,#081540 60%,#050e2d 100%)!important;
  border-top:3px solid rgba(28,105,212,.55)!important;
}

/* ── Mobile action bar (FAB overrides) ─────────────────────────── */
.mob-act-btn.call{background:linear-gradient(135deg,#1c69d4,#0d47a1)!important}
.mob-act-btn.email{background:linear-gradient(135deg,#059669,#047857)!important}
.mob-act-btn.test-drive{background:linear-gradient(135deg,#c9a84c,#a07c2a)!important;color:#fff!important}

/* ── Condition tags — refined ──────────────────────────────────── */
.condition-new{background:rgba(28,105,212,.1)!important;color:var(--blue)!important}
.condition-used{background:var(--lux-pearl)!important;color:var(--lux-muted)!important}
.condition-certified{background:rgba(124,58,237,.1)!important;color:#7c3aed!important}

/* ── Empty state — light ───────────────────────────────────────── */
.empty-icon{color:#e2e8f0!important}
.empty-title{color:var(--lux-text)!important}
.empty-sub{color:#94a3b8!important}

/* ── Pagination ─────────────────────────────────────────────────── */
.cars-pagination .page-link{
  background:var(--lux-white)!important;
  border:1px solid var(--lux-border)!important;
  color:var(--lux-muted)!important;
}
.cars-pagination .page-link:hover{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
.cars-pagination .page-item.active .page-link{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}

/* ── Filter offcanvas ──────────────────────────────────────────── */
.filter-offcanvas{background:var(--lux-white)!important}
.filter-offcanvas .offcanvas-header{background:var(--lux-pearl)!important;border-bottom:1px solid var(--lux-border)!important}
.filter-offcanvas .offcanvas-title{color:var(--lux-text)!important}

/* ── Filter pills ───────────────────────────────────────────────── */
.filter-pill{background:#eef2ff!important;border-color:rgba(28,105,212,.2)!important;color:var(--blue)!important}

/* ── Admin mobile table ─────────────────────────────────────────── */
@media(max-width:767px){
  .table-responsive-stack tr{background:var(--lux-white)!important;border-color:var(--lux-border)!important}
  .table-responsive-stack td::before{color:#9ca3af!important}
}

/* ── Toast — dark on white page ─────────────────────────────────── */
.toast-bmw{background:#0f1b2d!important;color:#fff!important}

/* ── Car card spec badge ─────────────────────────────────────────── */
.car-spec-item{background:var(--lux-pearl)!important;color:#4a5568!important;border:1px solid var(--lux-border)!important}

/* ── Buttons global ──────────────────────────────────────────────── */
.btn-bmw-primary{background:var(--gradient-blue)!important;box-shadow:0 6px 24px rgba(28,105,212,.35)!important}
.btn-bmw-primary:hover{box-shadow:0 12px 36px rgba(28,105,212,.5)!important;transform:translateY(-2px)!important}

/* ── Search bar ──────────────────────────────────────────────────── */
.search-bar-section{background:var(--lux-white)!important}
.search-bar-card{
  background:var(--lux-white)!important;
  border:1px solid var(--lux-border)!important;
  box-shadow:0 8px 40px rgba(0,0,0,.09)!important;
  border-radius:16px!important;
}
.search-bar-title{color:var(--lux-text)!important}