/* AI Video Studio — trang giới thiệu + hướng dẫn (/tool/ai-video-studio.php).
   Chỉ dùng biến theme trong site-theme.css để trang chạy đúng cả sáng/tối. */

.avs-hero {
  background: linear-gradient(140deg, var(--color-accent-dim) 0%, var(--color-bg-card) 60%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  margin-bottom: 1.25rem;
}
.avs-hero h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1.22;
  margin-bottom: .6rem;
}
.avs-hero .avs-lead {
  color: var(--color-soft);
  font-size: .95rem;
  max-width: 720px;
  margin-bottom: 1rem;
}
.avs-kicker {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .25rem .7rem;
  margin-bottom: .7rem;
}

/* Danh sách gạch đầu dòng "điểm bán" ngay dưới nút CTA */
.avs-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin: .85rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-soft);
  font-size: .85rem;
}
.avs-hero-points i { color: var(--color-success); margin-right: .3rem; }

/* --- Video demo --- */
.avs-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: .95rem;
}
.avs-demo-video {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: #000;
  margin: 0 auto;
}
.avs-demo-note { flex: 1 1 320px; color: var(--color-soft); font-size: .88rem; line-height: 1.6; }
.avs-demo-note ul { padding-left: 1.1rem; margin: .5rem 0 0; }
.avs-demo-note li { margin-bottom: .25rem; }

.avs-section-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 1.5rem 0 .75rem;
}
.avs-section-title i { color: var(--color-accent); margin-right: .45rem; }

.avs-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: .9rem .95rem;
  height: 100%;
}
.avs-card h3 {
  font-size: .95rem;
  font-weight: 700;
  margin: .55rem 0 .3rem;
}
.avs-card p {
  color: var(--color-soft);
  font-size: .85rem;
  line-height: 1.55;
  margin: 0;
}
.avs-card-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-dim);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

/* --- Các bước hướng dẫn --- */
.avs-step {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: .95rem;
  margin-bottom: .75rem;
}
.avs-step-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .6rem;
}
.avs-step-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avs-step-head h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.avs-step-body { color: var(--color-soft); font-size: .88rem; line-height: 1.6; }
.avs-step-body ul { padding-left: 1.1rem; margin: .5rem 0 0; }
.avs-step-body li { margin-bottom: .25rem; }
.avs-shot {
  display: block;
  margin-top: .9rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.avs-shot img { width: 100%; height: auto; display: block; }
/* Ảnh dọc (khung xem trước kết quả) — giới hạn bề ngang cho khỏi chiếm hết trang. */
.avs-shot.is-portrait { max-width: 300px; }
.avs-shot-cap {
  color: var(--color-muted);
  font-size: .75rem;
  margin-top: .35rem;
}

/* --- FAQ --- */
.avs-faq { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.avs-faq details { border-bottom: 1px solid var(--color-border); padding: .75rem .95rem; }
.avs-faq details:last-child { border-bottom: none; }
.avs-faq summary { cursor: pointer; font-weight: 600; font-size: .92rem; list-style: none; }
.avs-faq summary::-webkit-details-marker { display: none; }
.avs-faq summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; float: right; font-size: .7rem; color: var(--color-muted); }
.avs-faq details[open] summary::after { content: "\f077"; }
.avs-faq p { color: var(--color-soft); font-size: .86rem; line-height: 1.6; margin: .6rem 0 0; }

/* --- Dải CTA cuối trang --- */
.avs-cta-strip {
  background: var(--color-bg-card);
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  text-align: center;
  margin: 1.5rem 0 1rem;
}
.avs-note { color: var(--color-muted); font-size: .78rem; margin-top: .6rem; }

/* --- Mobile: bóp padding và thu nhỏ media cho vừa màn hình nhỏ --- */
@media (max-width: 575.98px) {
  .avs-hero { padding: 1.15rem 1rem; border-radius: var(--radius-md); }
  .avs-hero .avs-lead { font-size: .9rem; }
  .avs-hero .btn { width: 100%; }
  .avs-hero-points { gap: .35rem .8rem; font-size: .8rem; }
  .avs-section-title { font-size: 1.02rem; margin: 1.25rem 0 .6rem; }
  .avs-demo { padding: .8rem; gap: .9rem; }
  .avs-demo-video { max-width: 200px; }
  .avs-demo-note { font-size: .85rem; }
  .avs-demo-note .btn { width: 100%; }
  .avs-step { padding: .8rem; }
  .avs-step-body { font-size: .85rem; }
  .avs-shot.is-portrait { max-width: 210px; }
  .avs-cta-strip { padding: 1rem .85rem; }
  .avs-cta-strip .btn { width: 100%; white-space: normal; }
}