/* SafeOffice (cho doanh nghiệp). Nạp SAU style.css + pages.css — chỉ bổ sung bố cục riêng,
   dùng lại token màu, .hero, .section, .steps, .fcard, .plan, .promises, .final của trang chủ. */

/* ---------- Hero ---------- */
.so-hero-grid {
  display: grid;
  gap: 20px;
  grid-template-areas: "head" "card" "foot";
}
.so-hero-head { grid-area: head; display: flex; flex-direction: column; gap: 14px; }
.so-hero-card { grid-area: card; }
.so-hero-foot { grid-area: foot; display: flex; flex-direction: column; gap: 18px; }

.so-hero-card {
  background: var(--navy-800);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 20px 16px;
}
.so-hero-lead { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.so-hero-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.so-hero-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--on-dark-strong); }
.so-hero-list b { color: #fff; font-weight: 700; }
.so-hero-list a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.so-hero-list a:hover { color: var(--gold); }
.so-hero-list .hf-ic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: #2541c4;
  align-items: center;
  justify-content: center;
}
.so-hero-list .hf-ic svg { width: 18px; height: 18px; }

.so-hero-actions { display: flex; align-items: stretch; gap: 10px; }
.so-hero-actions > .btn { flex: 1 1 0; padding: 0 12px; }
.so-hero .trust { justify-content: center; }

@media (max-width: 899px) {
  .so-hero-actions .btn .ic { display: none; }
}

@media (min-width: 900px) {
  .so-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "head card" "foot card";
    column-gap: 56px;
    row-gap: 32px;
    align-items: center;
  }
  .so-hero-head { gap: 22px; align-self: end; }
  .so-hero-foot { align-self: start; gap: 24px; }
  .so-hero-card { padding: 28px; }
  .so-hero-lead { font-size: 18px; margin-bottom: 18px; }
  .so-hero-list { gap: 14px; }
  .so-hero-list li { font-size: 16px; }
  .so-hero-list .hf-ic { width: 36px; height: 36px; }
  .so-hero-list .hf-ic svg { width: 20px; height: 20px; }
  .so-hero-actions { flex-wrap: wrap; gap: 12px; }
  .so-hero-actions > .btn { flex: 0 0 auto; padding: 0 28px; min-height: 58px; }
  .so-hero .trust { justify-content: flex-start; }
}

/* ---------- 3 bước ---------- */
.so-step-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  background: #fff;
}
.so-steps .step-top h3 { flex: 1 1 auto; }
.so-steps .btn-row .ic:first-child { color: inherit; }

/* ---------- Tính năng: danh sách ý trong thẻ ---------- */
.so-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.so-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--body); }
.so-points .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--green); }

/* ---------- Bảng giá: 2 gói ---------- */
.so-plans { max-width: 920px; margin: 0 auto; }
@media (min-width: 760px) { .so-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.so-plan-free .price-unit { color: var(--body); }
.so-plan-free .checklist { color: var(--body); }
.so-plan-free .checklist .ic { color: var(--green); background: #e3f6ea; }
.so-price-note { margin: 28px auto 0; max-width: 760px; text-align: center; font-size: 16px; color: var(--body); }
.so-promises { margin-top: 16px; }
@media (min-width: 1000px) { .so-promises { margin-top: 20px; } }