/* =========================================================================
   features.css — KHOI TINH NANG + KHOI QUY TRINH 3 BUOC
   ========================================================================= */

/* ── The tinh nang ──────────────────────────────────────── */
.feature { display: grid; gap: 14px; align-content: start; }

.feature__ico {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  transition: transform var(--dur) var(--ease-spring), background-color var(--dur) var(--ease);
}
.card--hover:hover .feature__ico { transform: rotate(-6deg) scale(1.08); }

.feature h3 { margin: 0; font-size: 1.1rem; }
.feature p  { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }

.feature__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

/* The dau to gap doi tren man hinh rong — dat class .feature--wide.
   ⚠️ Chi co nghia trong mot LUOI. Trong bang chuyen (.fcar__rail) cac o
   xep theo cot tu sinh, "span 2" o do lam the nuot cho cua the ke tiep va
   scroll-snap dung sai mep — nen tra ve binh thuong. */
@media (min-width: 900px) {
  .feature--wide { grid-column: span 2; }
  .fcar__rail .feature--wide { grid-column: auto; }
}

/* ── Quy trinh 3 buoc ───────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 36px);
  counter-reset: step;
}
.step { position: relative; counter-increment: step; padding-top: 8px; }

.step__num {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--accent);
  font-weight: 750;
  font-size: 1.05rem;
  box-shadow: var(--sh-sm);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.step__num::before { content: counter(step, decimal-leading-zero); }

/* Duong noi giua cac buoc — an o cot cuoi va tren dien thoai. */
.step::after {
  content: "";
  position: absolute;
  top: 31px; left: 58px; right: -18px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 12px);
}
.step:last-child::after { display: none; }
@media (max-width: 780px) {
  .step::after { display: none; }
}

.step h3 { font-size: 1.06rem; margin-bottom: .3em; }
.step p  { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

/* ── Bang so sanh truoc / sau ───────────────────────────── */
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap);
}
.compare__col { padding: 24px; border-radius: var(--radius); border: 1px solid var(--border); }
.compare__col--before { background: var(--surface-2); }
.compare__col--after {
  background: var(--card);
  border-color: var(--accent);
  box-shadow: var(--sh-glow);
}
.compare__col h3 { display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.compare__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.compare__col li {
  display: flex;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}
.compare__col li svg { flex: none; margin-top: 3px; }
.compare__col--before li svg { color: var(--danger); }
.compare__col--after  li svg { color: var(--ok); }