/* public/assets/css/faq.css — trang Câu hỏi thường gặp (/cau-hoi-thuong-gap). Chép khung NAVSEnglish 20/10/2026.
   Chỉ dùng token (design-tokens.css) — không hex, không font riêng. */
.fq { padding-block: var(--space-6) var(--space-16); }
.fq-head h1 { font-size: var(--fs-h1-desktop); font-weight: var(--fw-extrabold); color: var(--color-ink); margin: 0 0 var(--space-2); }
.fq-head p { color: var(--color-muted); margin: 0; }
@media (max-width: 768px) { .fq-head h1 { font-size: var(--fs-h1-mobile); } }

.fq-sum { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); }
.fq-sum b { display: block; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-primary); margin-bottom: var(--space-1); }
.fq-sum p { margin: 0; color: var(--color-text); line-height: var(--lh-body); }

.fq-h2 { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--color-ink); margin: var(--space-8) 0 var(--space-3); }

.fq-tbl-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.fq-tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.fq-tbl th { background: var(--color-soft); color: var(--color-mute2); text-align: left; padding: 11px 14px; font-size: var(--fs-micro);
  font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.fq-tbl td { padding: 11px 14px; border-top: 1px solid var(--color-line); color: var(--color-text); }
.fq-tbl td a { color: var(--color-ink); font-weight: var(--fw-semibold); text-decoration: none; }
.fq-tbl td a:hover { color: var(--color-primary); text-decoration: underline; }
.fq-tbl .is-num { text-align: right; white-space: nowrap; font-weight: var(--fw-bold); color: var(--color-primary); }
.fq-tbl tr.is-soon td { color: var(--color-muted); }
.fq-soon { display: inline-block; padding: 2px 9px; border-radius: var(--radius-pill, 999px); background: var(--color-locked-soft);
  color: var(--color-locked-deep); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.fq-note { margin: var(--space-2) 0 0; font-size: var(--fs-small); color: var(--color-muted); }

.fq-help { margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  background: var(--color-primary-soft); color: var(--color-text); }
.fq-help a { color: var(--color-primary-hover); font-weight: var(--fw-bold); }

.fq__list { display: flex; flex-direction: column; gap: 10px; }
.fq__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color var(--dur-fast, .15s) var(--ease, ease), box-shadow var(--dur-fast, .15s) var(--ease, ease); }
.fq__item[open] { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); box-shadow: var(--shadow-sm); }
.fq__item > summary { list-style: none; cursor: pointer; padding: 16px 18px; display: flex; align-items: center; gap: 12px;
  font-size: 15.5px; font-weight: var(--fw-bold); color: var(--color-ink); }
.fq__item > summary::-webkit-details-marker { display: none; }
.fq__item > summary::after { content: ""; margin-left: auto; flex-shrink: 0; width: 9px; height: 9px;
  border-right: 2px solid var(--color-mute2); border-bottom: 2px solid var(--color-mute2); transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur-fast, .15s) var(--ease, ease); }
.fq__item[open] > summary::after { transform: rotate(-135deg) translateY(-2px); border-color: var(--color-primary); }
.fq__body { padding: 0 18px 18px; font-size: 14.5px; color: var(--color-text); line-height: var(--lh-body); }
.fq__body strong { color: var(--color-ink); }
.fq__body a { color: var(--color-primary); font-weight: var(--fw-semibold); }

.fq-cta { margin-top: var(--space-8); text-align: center; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl, 16px); padding: var(--space-8) var(--space-5); }
.fq-cta h2 { font-size: 20px; font-weight: var(--fw-extrabold); color: var(--color-ink); margin: 0 0 8px; }
.fq-cta p { color: var(--color-muted); margin: 0 0 var(--space-5); }
.fq-cta__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }