/* ================================
   TSG Deep Blue Theme (Full)
   ================================ */
:root{
  --brand:#1e40af;
  --brand-2:#0ea5e9;
  --ink:#111827;
  --muted:#6b7280;
  --bg:#0a1020;
  --card:#ffffff;
  --ring:rgba(30,64,175,.30);
  --shadow:0 10px 30px rgba(2,6,23,.15);
}

*{box-sizing:border-box}
body{
  font-family:"Microsoft YaHei","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,"Noto Sans TC",sans-serif;
  color:var(--ink);
  margin:0;
  padding:0;
  background:#fff;
}

/* ================================
   Collapsible Navbar
   ================================ */
.navbar-tien{
  position:sticky;
  top:0;
  z-index:1030;
  background:#0b3b73;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 20px rgba(2,6,23,.15);
}
.navbar-tien .navbar-brand{
  color:#fff;
  font-weight:900;
  letter-spacing:.4px;
  text-decoration:none;
}
.navbar-tien .navbar-brand img{
  height:28px;
}
.navbar-tien .nav-link{
  color:#dbeafe;
  text-decoration:none;
  font-weight:700;
  padding:.5rem .8rem;
  border-radius:10px;
}
.navbar-tien .nav-link:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}
.navbar-tien .cta{
  background:linear-gradient(135deg,#1e40af,#0ea5e9);
  color:#fff!important;
  border:none;
  border-radius:12px;
  padding:.5rem .95rem;
  text-decoration:none;
  font-weight:800;
  display:inline-block;
}
.navbar-tien .navbar-toggler{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
}
.navbar-tien .toggler-icon{
  display:inline-block;
  line-height:1;
  font-weight:900;
  font-size:1.1rem;
}
@media (max-width:767.98px){
  .navbar-tien .nav-link{
    display:block;
    width:100%;
  }
  .navbar-tien .cta{
    width:100%;
    text-align:center;
  }
  .navbar-tien .navbar-collapse{
    padding-top:.25rem;
    padding-bottom:.5rem;
  }
}

/* ================================
   Hero Section
   ================================ */
.hero{
  background:linear-gradient(180deg,#0a1020 0%,#0b1530 40%,#0f1e52 100%);
  color:#fff;
  padding-top:3rem;
  padding-bottom:3rem;
}
.hero h1{
  font-weight:900;
  letter-spacing:.5px;
}
.hero .tag{
  display:inline-block;
  font-size:.8rem;
  color:#fff;
  opacity:.85;
  border:1px solid rgba(255,255,255,.2);
  border-radius:9999px;
  padding:.25rem .6rem;
  margin-right:.4rem;
}
.hero .hero-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:16px;
  padding:1.25rem;
  backdrop-filter:blur(8px);
}

/* ================================
   Filters
   ================================ */
.filters{
  background:#fff;
  border-radius:14px;
  padding:.75rem;
  box-shadow:var(--shadow);
}
.filters .chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border:1px solid #e5e7eb;
  border-radius:9999px;
  padding:.45rem .85rem;
  background:#fff;
  color:#111827;
  cursor:pointer;
  font-weight:600;
  font-size:.9rem;
}
.filters .chip.active{
  border-color:var(--brand);
  box-shadow:0 0 0 4px var(--ring);
}
.filters .search{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:.6rem .9rem;
  width:100%;
}

/* ================================
   Vehicle Cards
   ================================ */
.card-vehicle{
  background:var(--card);
  border:1px solid #eef2f7;
  border-radius:16px;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-vehicle:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  border-color:#e5e7eb;
}
.card-vehicle .thumb{
  aspect-ratio:16/9;
  width:100%;
  object-fit:cover;
  background:#0b0f14;
}
.card-vehicle .body{
  padding:14px 14px 12px 14px;
}
.card-vehicle .title{
  font-weight:800;
  margin:0;
  font-size:1.05rem;
}
.card-vehicle .meta{
  color:var(--muted);
  font-size:.9rem;
}
.badges{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  margin-bottom:.35rem;
}
.badge-hot{
  background:linear-gradient(135deg,#ef4444,#f59e0b);
  color:#fff;
  border-radius:9999px;
  padding:.2rem .55rem;
  font-size:.75rem;
  font-weight:700;
}
.badge-new{
  background:#e0f2fe;
  color:#0369a1;
  border-radius:9999px;
  padding:.2rem .55rem;
  font-size:.75rem;
  font-weight:700;
}

/* ================================
   Buttons
   ================================ */
.btn-cta{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:linear-gradient(135deg,#1e40af,#0ea5e9);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:.6rem .9rem;
  text-decoration:none;
  font-weight:800;
  transition:opacity .2s;
}
.btn-cta:hover{
  opacity:.9;
}
.btn-ghost{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:.55rem .85rem;
  font-weight:700;
  text-decoration:none;
  color:#111827;
  background:#fff;
  transition:all .2s;
}
.btn-ghost:hover{
  background:#f9fafb;
}

/* ================================
   Mobile Quick Bar
   ================================ */
.sticky-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1020;
  display:flex;
  gap:.65rem;
  padding:.6rem;
  background:#ffffffeb;
  backdrop-filter:blur(6px);
  border-top:1px solid #e5e7eb;
}
.sticky-bar a{
  flex:1;
  text-align:center;
  border-radius:12px;
  padding:.7rem .9rem;
  text-decoration:none;
  font-weight:800;
}
.sticky-call{
  background:linear-gradient(135deg,#10b981,#34d399);
  color:#fff;
}
.sticky-line{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
}

/* ================================
   Misc Utilities
   ================================ */
.object-cover-16x9{aspect-ratio:16/9;object-fit:cover}
.thumb-64{width:64px;height:64px;object-fit:cover}