/* =============================================================
   IDATA Elementor Widgets – FAQ
   Phụ thuộc: idata-core
============================================================= */

/* =========================================================
   2. FAQ ACCORDION
========================================================= */
.idata-faq__inner {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: var(--idata-space-9);
  align-items: start;
}

.idata-faq__aside { position: sticky; top: 120px; }
.idata-faq__aside-desc {
  margin-top: var(--idata-space-4);
  color: var(--idata-muted);
  font-size: var(--idata-fs-sm);
}
.idata-faq__contact { margin-top: var(--idata-space-6); max-width: 320px; }
.idata-faq__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: var(--idata-space-4);
  font-size: var(--idata-fs-sm);
  font-weight: var(--idata-font-weight-semibold);
  color: var(--idata-heading);
}
.idata-faq__phone svg { color: var(--idata-primary); }
.idata-faq__phone:hover { color: var(--idata-primary); }

.idata-faq__list {
  background: var(--idata-surface);
  border: 1px solid var(--idata-border);
  border-radius: var(--idata-radius-lg);
  overflow: hidden;
}
.idata-faq__item + .idata-faq__item { border-top: 1px solid var(--idata-border); }

.idata-faq__question { margin: 0; }
.idata-faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--idata-space-4);
  padding: var(--idata-space-5) var(--idata-space-6);
  text-align: left;
  font-size: var(--idata-fs-body);
  font-weight: var(--idata-font-weight-semibold);
  color: var(--idata-heading);
  transition: color var(--idata-transition-fast), background-color var(--idata-transition-fast);
}
.idata-faq__trigger:hover { color: var(--idata-primary); background: var(--idata-bg); }

.idata-faq__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--idata-primary-light);
  color: var(--idata-primary);
  transition: transform var(--idata-transition), background-color var(--idata-transition-fast),
              color var(--idata-transition-fast);
}
.idata-faq__item.is-open .idata-faq__icon {
  transform: rotate(180deg);
  background: var(--idata-primary);
  color: #fff;
}

/* Mở/đóng bằng max-height.
   Trước đây dùng kỹ thuật grid 0fr -> 1fr: gọn hơn nhưng phụ thuộc Chrome 107+,
   Safari 16+ và dễ bị CSS của theme/page builder can thiệp. Cách dưới đây chạy
   trên mọi trình duyệt và không có điều kiện ẩn nào khác ngoài class .is-open.
   JavaScript gán max-height chính xác theo nội dung để hiệu ứng mượt; giá trị
   2000px chỉ là dự phòng khi JavaScript chưa kịp gán. */
.idata-faq__panel {
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  transition: max-height var(--idata-transition), visibility var(--idata-transition);
}
.idata-faq__item.is-open .idata-faq__panel {
  max-height: 2000px;
  visibility: visible;
}
.idata-faq__answer p {
  padding: 0 var(--idata-space-6) var(--idata-space-5);
  font-size: var(--idata-fs-sm);
  color: var(--idata-muted);
}


/* ============ RESPONSIVE ============ */

@media (max-width: 1024px) {
  .idata-faq__inner { grid-template-columns: 1fr; gap: var(--idata-space-8); }
  .idata-faq__aside { position: static; }
}

@media (max-width: 480px) {
  .idata-faq__trigger { padding: var(--idata-space-4); font-size: var(--idata-fs-sm); }
  .idata-faq__answer p { padding: 0 var(--idata-space-4) var(--idata-space-4); }
}

/* ============ CHẾ ĐỘ 1 CỘT (tắt cột trái) ============ */
.idata-faq--full .idata-faq__inner { grid-template-columns: 1fr; }
.idata-faq--full .idata-faq__list { max-width: 900px; margin-inline: auto; }