/* =====================================================
   FAQ ACCORDION (<section class="faq"> > <details>, có hoặc không class="faq-item")
   Dùng chung: nội dung bài viết + mô tả danh mục sản phẩm/blog (enqueue ở inc/enqueue.php §11).
   Giao diện đồng bộ với FAQ trang sản phẩm (pdp-body.css): thẻ trắng viền mảnh,
   câu hỏi in đậm, dấu "+" đỏ bên phải xoay 45° thành "×" khi mở, câu hỏi đang mở
   chuyển đỏ. Dùng <details>/<summary> gốc nên không cần JS; chỉ ẩn marker mặc định.
   HTML do editor/AI sinh hay kèm <br> cuối <summary> và <p></p> rỗng cuối .answer
   → ẩn để không tạo khoảng trống thừa.
===================================================== */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--s-3, 12px);
  margin: var(--s-6, 24px) 0;
}

.faq > h2,
.faq > h3 {
  margin: 0 0 var(--s-1, 4px);
}

.faq details {
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--color-border-subtle, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
}

.faq details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4, 16px);
  padding: 14px 20px;
  margin: 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-base, 16px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-primary, #111);
  user-select: none;
}

.faq details > summary::-webkit-details-marker { display: none; }
.faq details > summary > br { display: none; }

.faq details > summary strong {
  font-weight: 700;
  flex: 1 1 auto;
}

/* Dấu "+" đỏ — vẽ bằng 2 gạch để không phụ thuộc font icon */
.faq details > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--color-brand-primary, #dd3333), var(--color-brand-primary, #dd3333)) center / 14px 2px no-repeat,
    linear-gradient(var(--color-brand-primary, #dd3333), var(--color-brand-primary, #dd3333)) center / 2px 14px no-repeat;
  transition: transform .2s ease;
}

.faq details > summary:hover,
.faq details[open] > summary {
  color: var(--color-brand-primary, #dd3333);
}

.faq details[open] > summary::after {
  transform: rotate(45deg);
}

.faq details .answer {
  padding: 0 20px 16px;
  font-size: var(--fs-sm, 15px);
  line-height: 1.7;
  color: var(--color-text-muted, #4b5563);
}

.faq details .answer p,
.faq details .answer ul {
  margin: 0 0 var(--s-3, 12px);
}

.faq details .answer p:last-child,
.faq details .answer ul:last-child { margin-bottom: 0; }
.faq details .answer p:empty { display: none; }

.faq details .answer ul {
  padding-left: 1.25em;
}

@media (max-width: 549px) {
  .faq details > summary { padding: 12px 14px; font-size: var(--fs-sm, 15px); }
  .faq details .answer { padding: 0 14px 14px; }
}