/* =====================================================================
   v2.58 · 10/10/2026 — TRANG CHỦ · SECTION "GIÚP DOANH NGHIỆP TỰ ĐÁNH GIÁ MỨC ĐỘ PHÙ HỢP" (FAQ + hỏi AI)
   Desktop (≥1200px), lưới 12 cột:
   - Cột 1–4: tagline "FAQs" (trên) · cụm 3 icon AI (dưới, căn trái + đáy, sticky bottom → hết section thì trôi lên cùng section).
   - Cột 5–12: heading (tối đa 6 cột) + danh sách câu hỏi/trả lời (8 cột) chung 1 cụm.
   Danh sách FAQ dùng ĐÚNG style FAQ của template chi tiết sản phẩm phần mềm (.sol-faq-* trong blog.css) — chép nguyên thông số
   để trang chủ không phải nạp blog.css. Sửa style FAQ thì sửa cả 2 nơi.
   Mobile/tablet (<1200px): 1 cột — tagline → heading → FAQ → cụm icon AI ở cuối.
   ===================================================================== */
.aif { position: relative; background: #fff; color: var(--fg); padding: var(--v2-sec, 16rem) 0; }
.aif::before { content: ''; position: absolute; top: 0; left: var(--grid-margin); right: var(--grid-margin); height: 1px; background: var(--v2-line, rgba(15, 27, 45, .1)); }   /* tách với section trắng phía trên */
.aif-grid { grid-template-rows: auto 1fr; }
.aif-label { grid-column: 1 / 5; grid-row: 1; padding-top: 1.6rem; }
.aif-main { grid-column: 5 / 13; grid-row: 1 / 3; }
.aif-main .ai-title { max-width: calc(6 * (100vw - 2 * var(--grid-margin) - 11 * var(--grid-gutter)) / 12 + 5 * var(--grid-gutter)); }
.aif-ai { grid-column: 1 / 5; grid-row: 2; align-self: end; position: sticky; bottom: 4rem; }
.aif-ai-cap { font-size: 1.4rem; line-height: 1.5; color: var(--fg-muted); margin-bottom: 1.6rem; }
.aif .ai-sources { display: flex; gap: 1.6rem; justify-content: flex-start; }
.aif .ai-source { color: var(--fg); gap: 1rem; }
.aif .ai-source svg { background: var(--v2-smoke, #F3F3F3); color: var(--fg); }
.aif .ai-source-label { color: var(--fg-muted); }
@media (min-width: 1200px) and (hover: hover) {
  .aif .ai-source:hover svg { background: var(--primary); color: #fff; }
  .aif .ai-source:hover .ai-source-label { color: var(--fg); }
}

/* ---- FAQ (= .sol-faq-* của trang chi tiết sản phẩm) ---- */
.aif .sol-faq-list { margin-top: 7.2rem; border-top: 1px solid var(--border); }
.aif .sol-faq-item { border-bottom: 1px solid var(--border); }
.aif .sol-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 2rem; align-items: center; padding: 2.6rem 0; font-size: 2rem; font-weight: 500; transition: color .2s var(--ease); }
.aif .sol-faq-item summary::-webkit-details-marker { display: none; }
.aif .sol-faq-item summary::after { content: '+'; flex: none; font-size: 2.6rem; font-weight: 300; line-height: 1; color: var(--fg-muted); }
.aif .sol-faq-item[open] summary::after { content: '−'; }
.aif .sol-faq-item p { padding: 0 6rem 2.8rem 0; font-size: 1.7rem; line-height: 1.7; color: var(--fg-muted); }
@media (min-width: 1200px) and (hover: hover) { .aif .sol-faq-item summary:hover { color: var(--primary); } }

/* ---- mobile + tablet ---- */
@media (max-width: 1199px) {
  .aif-grid { grid-template-rows: none; }
  .aif-label, .aif-main, .aif-ai { grid-column: 1 / -1; grid-row: auto; }
  .aif-label { padding-top: 0; margin-bottom: 1.6rem; }
  .aif-main .ai-title { max-width: none; }
  .aif-main .ai-title br { display: none; }
  .aif-ai { position: static; align-self: auto; margin-top: 5.6rem; }
  .aif .sol-faq-list { margin-top: 3rem; }
  .aif .sol-faq-item summary { font-size: 1.8rem; padding: 2.2rem 0; }
  .aif .sol-faq-item p { padding-right: 0; font-size: 1.6rem; }
}
.aif-s { text-transform: lowercase; }   /* giữ chữ "FAQs" khi tagline viết hoa */