/* Câu hỏi thường gặp — tự viết CSS tại đây (khung trống, không có class chuẩn). */


/* =========================================================
   HCD FAQ
   Scope: .hcd-faq
========================================================= */

.hcd-faq {
  width: 100%;
  background: var(--hcd-color-bg, #f3f4f6);
  color: var(--hcd-color-text, #111827);
  padding: 80px 0;
}

.hcd-faq,
.hcd-faq * {
  box-sizing: border-box;
}

.hcd-faq .hcd-faq__container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}


/* =========================================================
   HEADER
========================================================= */

.hcd-faq .hcd-faq__header {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.hcd-faq .hcd-faq__eyebrow {
  margin: 0 0 12px;
  color: var(--hcd-color-primary, #16a34a);
  font-size: var(--hcd-fs-xs, 13px);
  line-height: var(--hcd-lh-normal, 1.5);
  font-weight: var(--hcd-fw-bold, 700);
  letter-spacing: .08em;
}

.hcd-faq .hcd-faq__title {
  margin: 0;
  color: var(--hcd-color-text, #111827);
  font-size: var(--hcd-fs-h2, 32px);
  line-height: var(--hcd-lh-tight, 1.2);
  font-weight: var(--hcd-fw-bold, 700);
}

.hcd-faq .hcd-faq__lead {
  max-width: 640px;
  margin: 16px auto 0;
  color: var(--hcd-color-muted, #6b7280);
  font-size: var(--hcd-fs-lg, 18px);
  line-height: var(--hcd-lh-loose, 1.7);
  font-weight: var(--hcd-fw-regular, 400);
}


/* =========================================================
   FAQ LIST
========================================================= */

.hcd-faq .hcd-faq__list {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* =========================================================
   FAQ ITEM
========================================================= */

.hcd-faq .hcd-faq__item {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--hcd-color-surface, #ffffff);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .06);
  transition:
    box-shadow .25s ease,
    transform .25s ease;
}

.hcd-faq .hcd-faq__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(17, 24, 39, .09);
}

.hcd-faq .hcd-faq__item[open] {
  box-shadow: 0 12px 32px rgba(17, 24, 39, .08);
}


/* =========================================================
   QUESTION
========================================================= */

.hcd-faq .hcd-faq__question {
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 20px 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  color: var(--hcd-color-text, #111827);
  font-size: var(--hcd-fs-md, 15px);
  line-height: var(--hcd-lh-snug, 1.35);
  font-weight: var(--hcd-fw-semibold, 600);

  cursor: pointer;
  list-style: none;
}

.hcd-faq .hcd-faq__question::-webkit-details-marker {
  display: none;
}

.hcd-faq .hcd-faq__question::marker {
  display: none;
}

.hcd-faq .hcd-faq__question:hover {
  color: var(--hcd-color-primary, #16a34a);
}


/* =========================================================
   ICON
========================================================= */

.hcd-faq .hcd-faq__icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  background: var(--hcd-color-bg, #f3f4f6);
  color: var(--hcd-color-primary, #16a34a);

  transition:
    transform .25s ease,
    background-color .25s ease,
    color .25s ease;
}

.hcd-faq .hcd-faq__icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hcd-faq .hcd-faq__item[open] .hcd-faq__icon {
  transform: rotate(180deg);
  background: var(--hcd-color-primary, #16a34a);
  color: var(--hcd-color-on-primary, #ffffff);
}


/* =========================================================
   ANSWER
========================================================= */

.hcd-faq .hcd-faq__answer {
  padding: 0 72px 24px 24px;
}

.hcd-faq .hcd-faq__answer p {
  max-width: 720px;
  margin: 0;
  color: var(--hcd-color-muted, #6b7280);
  font-size: var(--hcd-fs-body, 16px);
  line-height: var(--hcd-lh-loose, 1.7);
  font-weight: var(--hcd-fw-regular, 400);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 849px) {

  .hcd-faq {
    padding: 64px 0;
  }

  .hcd-faq .hcd-faq__container {
    padding: 0 24px;
  }

  .hcd-faq .hcd-faq__header {
    margin-bottom: 40px;
  }

  .hcd-faq .hcd-faq__question {
    padding: 20px 24px;
  }

  .hcd-faq .hcd-faq__answer {
    padding: 0 72px 24px 24px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 549px) {

  .hcd-faq {
    padding: 48px 0;
  }

  .hcd-faq .hcd-faq__container {
    padding: 0 16px;
  }

  .hcd-faq .hcd-faq__header {
    margin-bottom: 32px;
  }

  .hcd-faq .hcd-faq__lead {
    margin-top: 12px;
  }

  .hcd-faq .hcd-faq__list {
    gap: 12px;
  }

  .hcd-faq .hcd-faq__item {
    border-radius: 12px;
  }

  .hcd-faq .hcd-faq__question {
    min-height: 64px;
    padding: 16px;
    gap: 16px;
  }

  .hcd-faq .hcd-faq__icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 12px;
  }

  .hcd-faq .hcd-faq__answer {
    padding: 0 64px 20px 16px;
  }
}