/* ===== IW — Q&A (FAQ Accordion) ==========================================
 *
 * Design source: Figma 4420:144323.
 *
 * Container: bg white, radius 12px, padding 24px, gap 16px vertical.
 * Item gap: 24px. Top border (#e7e7e7) giữa các item (trừ item đầu).
 * Question row: flex space-between (text + icon 24px).
 * Plus/minus icon toggle qua [aria-expanded].
 */

/* Outer: full-bleed wrapper (100vw breakout) match pattern news-home /
   pdh-grid. Không có visual riêng — card visual nằm trong __inner. */
.iw-qa {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  font-family: inherit;
  color: #3d3d3d;
}

/* Inner: container max-width + card visual (white bg, radius, padding).
   `max-width` default qua var (1200px); admin override qua inline style
   từ UX Builder option `max_width`. */
.iw-qa__inner {
  max-width: var(--iw-container-max);
  margin: 0 auto;
  padding: 60px 24px 40px;
  box-sizing: border-box;
  /* background: #ffffff; */
  /* border-radius: 12px; */
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Heading group: title + subtitle, gap 8 dọc. Padding-right 60 ở title
   chỉ apply ở alignment=left để chừa khoảng cho icon trục bên phải. */
.iw-qa__heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.iw-qa__heading--left   { align-items: flex-start; }
.iw-qa__heading--center { align-items: center; }
.iw-qa__heading--right  { align-items: flex-end; }

/* Font set unified với các IW section khác (features-row, news-home, hero).
   Override Figma 4420:144323 (28/40) để giữ visual consistency cross-section. */
.iw-qa__title {
  margin: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #3d3d3d;
}
.iw-qa__title--left   { text-align: left;  padding-right: 60px; }
.iw-qa__title--center { text-align: center; }
.iw-qa__title--right  { text-align: right; }

.iw-qa__subtitle {
  margin: 0;
  font-family: inherit;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: #3d3d3d;
}
.iw-qa__subtitle--left   { text-align: left; }
.iw-qa__subtitle--center { text-align: center; }
.iw-qa__subtitle--right  { text-align: right; }

.iw-qa__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.iw-qa__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid #e7e7e7;
}
/* Item đầu KHÔNG có border-top (Figma: item 1 flush với title). */
.iw-qa__item:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Question button reset — full-width row. */
.iw-qa__question {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.iw-qa__question-text {
  flex: 1 0 0;
  min-width: 0;
  font-family: inherit;
  font-weight: 510;
  font-size: 20px;
  line-height: 28px;
  color: #3d3d3d;
  text-transform: none;
}

.iw-qa__toggle {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #3d3d3d;
  /* Smooth rotation khi đổi trạng thái — bổ sung visual feedback ngoài
     swap icon (plus → minus). */
  transition: transform 0.3s ease;
}
.iw-qa__question[aria-expanded="true"] .iw-qa__toggle {
  transform: rotate(180deg);
}

.iw-qa__icon {
  display: block;
  width: 24px;
  height: 24px;
}

/* Default state (collapsed): show plus, hide minus. */
.iw-qa__icon--minus { display: none; }

/* Expanded: swap icons. */
.iw-qa__question[aria-expanded="true"] .iw-qa__icon--plus  { display: none; }
.iw-qa__question[aria-expanded="true"] .iw-qa__icon--minus { display: block; }

/* ----- Smooth expand/collapse -------------------------------------------
 * Dùng grid-template-rows trick: 0fr → 1fr animate qua transition mà KHÔNG
 * cần JS đo scrollHeight. Inner wrapper `.iw-qa__answer-inner` cần
 * `min-height: 0` + `overflow: hidden` để clip content khi rows = 0fr.
 *
 * KHÔNG dùng `hidden` attr trên panel (sẽ skip transition). Visibility
 * dựa vào `.is-open` class trên `.iw-qa__item`.
 */
.iw-qa__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease, margin-top 0.35s ease, opacity 0.25s ease;
  opacity: 0;
  /* `gap: 8px` trên `.iw-qa__item` cộng vào height — khi collapse muốn nó
     biến mất luôn để không để lại khoảng trắng. Override gap bằng
     margin-top âm khi đóng. */
  margin-top: -8px;
}
.iw-qa__answer-inner {
  min-height: 0;
  overflow: hidden;
}
.iw-qa__item.is-open .iw-qa__answer {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 0;
}

/* Answer panel — color secondary, line-height 24.
 *
 * Font-size LOCK 16/24 theo Figma. Admin có thể paste inline style
 * `font-size:...` từ Word/Google Doc — force inherit để giữ design
 * uniform. `!important` cần thiết vì inline style win specificity.
 * Heading H1-H6 trong format dropdown vẫn flatten về cùng size, chỉ
 * khác weight (bold) — match Figma không có heading variants trong
 * answer body.
 */
.iw-qa__answer {
  font-family: inherit;
  font-weight: 400;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #888888;
}
.iw-qa__answer *:not(.iw-qa__icon):not(svg):not(path):not(circle):not(line) {
  font-size: inherit !important;
  line-height: inherit !important;
}
/* Heading + bold: chỉ enforce font-size/weight, KHÔNG hardcode color.
   Figma 4420:144328 cho thấy "Chi tiết thủ tục" bold vẫn giữ #888 cùng
   body — bold không auto-đậm màu. Để inherit color từ .iw-qa__answer
   (default #888); admin set màu trong editor (forecolor button) thì
   inline `<span style="color:...">` win specificity. */
.iw-qa__answer h1,
.iw-qa__answer h2,
.iw-qa__answer h3,
.iw-qa__answer h4,
.iw-qa__answer h5,
.iw-qa__answer h6 {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 700;
  margin: 8px 0;
}
.iw-qa__answer > *:first-child { margin-top: 0; }
.iw-qa__answer > *:last-child  { margin-bottom: 0; }

.iw-qa__answer p {
  margin: 0 0 12px;
}
.iw-qa__answer p:last-child { margin-bottom: 0; }

.iw-qa__answer strong,
.iw-qa__answer b { font-weight: 700; }

.iw-qa__answer ol,
.iw-qa__answer ul {
  margin: 8px 0 12px;
  padding-left: 24px;
}
.iw-qa__answer li { margin-bottom: 4px; }

.iw-qa__answer a {
  color: var(--iw-accent, #4564ed);
  text-decoration: underline;
}

/* Mobile: scale down container padding + title. */
@media (max-width: 540px) {
  .iw-qa__inner {
    padding: 16px;
    gap: 24px;
  }
  .iw-qa__title {
    font-size: 24px;
    line-height: 32px;
  }
  .iw-qa__title--left { padding-right: 32px; }
  .iw-qa__subtitle {
    font-size: 16px;
    line-height: 22px;
  }
  .iw-qa__list { gap: 16px; }
  .iw-qa__item { padding-top: 16px; }
  .iw-qa__question-text {
    font-size: 16px;
    line-height: 22px;
  }
}