/* =====================================================================
   TRANG GIỚI THIỆU (gioi-thieu.html)
   Dùng lại khung hero, partner-stats, benefit-icon, partner-steps, faq, partner-final của styles.css
   ===================================================================== */

/* Vì sao có Trạm Hỷ: 4 thẻ vấn đề */
.about-pains { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.about-pains .card h3, .about-features .card h3 { margin: 10px 0 4px; }
.about-pains .card p, .about-features .card p { margin: 0; }

/* Trạm Hỷ có gì: thẻ bấm được, dẫn tới đúng trang */
.about-features a.card { display: flex; flex-direction: column; color: inherit; text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.about-features a.card:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 10px 28px rgba(42, 36, 33, .1); }
.about-features .muted { flex: 1; }
.about-link { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--brand-dark); }

/* Giữ cọc 3 đợt: danh sách cam kết + dòng thời gian */
.about-escrow { align-items: center; }
.about-escrow h2 { margin-bottom: 14px; }
.about-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.about-checks li { position: relative; padding-left: 32px; line-height: 1.55; }
.about-checks li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 13px; font-weight: 800; }
.escrow-flow { padding: 22px; }
.escrow-step { position: relative; display: flex; align-items: center; gap: 14px; padding-bottom: 20px; }
.escrow-step:not(:last-of-type)::after { content: ''; position: absolute; left: 27px; top: 58px; bottom: 2px; width: 2px; background: var(--line); }
.escrow-pct { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-light), var(--brand-dark)); color: #fff; font: 700 18px var(--font-title); }
.escrow-step strong { display: block; }
.escrow-step small { color: var(--muted); font-size: 13px; }
.escrow-flow p { margin: 0; }

/* Đội ngũ */
.about-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.about-member { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 14px; text-align: center; }
.about-member img, .about-member .avatar { width: 84px; height: 84px; margin-bottom: 6px; border-radius: 50%; object-fit: cover; font-size: 26px; }

/* Liên hệ ở thẻ cuối */
.about-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 8px; font-size: 14px; }

@media (max-width: 900px) {
  .about-pains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .about-pains { grid-template-columns: minmax(0, 1fr); }
  .escrow-flow { padding: 16px; }
}

/* Tiêu đề chia dòng cân đối – tránh rớt 1 chữ xuống dòng cuối */
.about-page h1, .about-page h2 { text-wrap: balance; }