/* =====================
   EV365 Investment Package Theme
   ===================== */

/* Token màu thương hiệu */
:root {
  --ev-navy:#0E1220;
  --ev-blue:#2B2C9F;
  --ev-sky:#3AA8FF;
  --ev-green:#22C55E;
  --ev-surface:#F7FAFC;
  --ev-text:#0F172A;
  --ev-muted:#475569;
  --ev-stroke:#E2E8F0;
  --radius:16px;
  --shadow:0 2px 8px rgba(0,0,0,.06);
}

/* Reset */
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ev-text);background:#fff}
img{max-width:100%;display:block}
a{text-decoration:none;color:var(--ev-blue)}
a:hover{color:var(--ev-sky)}
.container{max-width:1180px;margin:auto;padding:24px}

/* Topbar */
.topbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--ev-stroke)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between}
.brand img{height:36px}
.nav a{margin-left:20px;font-weight:600;color:var(--ev-muted);border-bottom:2px solid transparent;padding-bottom:10px}
.nav a:hover{color:var(--ev-blue);border-bottom-color:var(--ev-sky)}

/* Hero */
.hero{background:radial-gradient(90% 100% at 10% 0%, rgba(58,168,255,.25), transparent),linear-gradient(90deg,var(--ev-navy),#182045 55%, var(--ev-blue));color:#EAF2FF;padding:80px 0}
.hero .wrap{display:grid;grid-template-columns:1.1fr 0.9fr;gap:32px;align-items:center}
h1{font-size:44px;line-height:1.15;margin:8px 0 12px}
.lead{color:#CFE0FF;max-width:720px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
.hero-cta{display:flex;gap:12px;margin-top:18px}
.hero-visual .media-box{width:100%;aspect-ratio:16/9;border:2px dashed rgba(255,255,255,.4);border-radius:18px;display:flex;align-items:center;justify-content:center;color:#DAE8FF}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-radius:12px;padding:12px 20px;border:2px solid transparent;transition:.2s ease}
.btn.primary{background:var(--ev-green);color:#fff;box-shadow:0 8px 20px rgba(34,197,94,.35)}
.btn.primary:hover{background:#16a34a}
.btn.secondary{background:#fff;color:var(--ev-blue);border-color:var(--ev-sky)}
.btn.ghost{background:transparent;color:#fff;border-color:#fff}

/* Sections */
section{padding:60px 0;border-top:1px solid var(--ev-stroke)}
section.light{background:var(--ev-surface)}
h2{font-size:30px;line-height:1.2;margin:0 0 12px}
.sub{color:var(--ev-muted);margin-bottom:18px}

/* Grid & Cards */
.grid{display:grid;gap:20px}
@media(min-width:900px){
  .cols-2{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:repeat(3,1fr)}
  .cols-4{grid-template-columns:repeat(4,1fr)}
}
.card{background:#fff;border:1px solid var(--ev-stroke);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card strong{display:block;margin-bottom:8px;color:var(--ev-blue)}
.card p.sub{margin:0;color:var(--ev-muted)}

/* Bảng cấu hình */
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:12px 14px;border-bottom:1px solid var(--ev-stroke);vertical-align:top}
th{background:#F7FAFC;color:var(--ev-muted);font-weight:600}
tr:first-child th,tr:first-child td{border-top:1px solid var(--ev-stroke)}
tr:nth-child(even){background:#FAFAFA}

/* Switch actions (cho hiệu quả tài chính) */
.spec-actions{display:flex;gap:10px;margin:12px 0 18px}
.switch{display:inline-flex;border:1px solid var(--ev-stroke);border-radius:10px;overflow:hidden}
.switch button{padding:8px 12px;border:0;background:#fff;color:var(--ev-muted);font-weight:600}
.switch button.active{background:var(--ev-blue);color:#fff}

/* Floating CTA */
.floating-cta{position:fixed;right:18px;bottom:18px;z-index:50}
.floating-cta .btn{box-shadow:0 10px 30px rgba(16,185,129,.35)}

/* FAQ */
#faq .grid .card strong{font-size:16px;color:var(--ev-blue)}
#faq .grid .card p.sub{font-size:14px;color:var(--ev-muted)}

/* Hiệu quả tài chính */
#tai-chinh .spec-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.hidden { display: none; }


#tai-chinh .switch {
  display: inline-flex;
  border: 1px solid var(--ev-stroke);
  border-radius: 10px;
  overflow: hidden;
}

#tai-chinh .switch button {
  padding: 8px 16px;
  border: 0;
  background: #fff;
  color: var(--ev-muted);
  font-weight: 600;
  cursor: pointer;
}

#tai-chinh .switch button.active {
  background: var(--ev-blue);
  color: #fff;
}

.fin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.fin-table th,
.fin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ev-stroke);
  text-align: left;
  vertical-align: top;
}

.fin-table th {
  width: 220px;
  background: var(--ev-surface);
  font-weight: 600;
  color: var(--ev-muted);
}

.fin-table td b,
.fin-table td .highlight {
  color: var(--ev-blue);
  font-weight: 700;
}

.fin-note {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ev-muted);
}