/* ==========================================================================
   FAQ — /cau-hoi-thuong-gap.html (#150). Port designs/redesign/mockup-faq.html.
   Dùng BIẾN THẬT trong home-pne.css (đã đối chiếu 10/08: --red/--gold-soft/--gold-deep/
   --bg-alt/--border/--border-s/--text-2/--text-3/--r-m/--sh-xs/--sh-red/--ff khớp mockup).
   Prefix class .faq- (grep public/css 10/08: trống, không đụng độ). Reset chung (*,a,h1,p)
   đã có ở home-pne.css → KHÔNG lặp lại.
   ========================================================================== */

.faq-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ── Breadcrumb — theo .crumb khoa-hoc.css ── */
.faq-crumb { font-size: 12.5px; color: var(--text-3); padding: 22px 0 0; }
.faq-crumb a { color: var(--text-2); font-weight: 600; }
.faq-crumb a:hover { color: var(--red); }

/* ── Hero — theo .vp-hero ── */
.faq-hero { padding: 44px 0 38px; max-width: 640px; }
.faq-hero .faq-eyebrow { font: 700 12px var(--ff); text-transform: uppercase; letter-spacing: .14em; color: var(--red); }
.faq-hero h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.18; margin-top: 14px; }
.faq-hero h1 em { font-style: normal; color: var(--red); }
.faq-hero p.d { font-size: 15px; color: var(--text); line-height: 1.7; margin-top: 16px; max-width: 520px; }
.faq-hero p.d a { color: var(--red); font-weight: 700; }

/* ── Tab nhóm — theo .rtab / .rtab.active ── */
/* #161 (7.2): <nav> bị rule global `nav{display:flex}` biến .faq-tabs thành flex → .faq-wrap con
   (flex item, min-width:auto) NỞ theo dải tab (scrollWidth 673 @390 → tràn ngang cả trang). Ép về
   block để .faq-wrap giữ đúng bề rộng viewport, còn .faq-tabs-in tự cuộn ngang. */
.faq-tabs { display: block; position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); padding: 12px 0; }
.faq-tabs-in { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.faq-tabs-in::-webkit-scrollbar { display: none; }
.faq-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 41px; padding: 0 18px;
  border: 1.5px solid var(--border-s); border-radius: 99px; background: var(--bg);
  font: 700 13.5px var(--ff); color: var(--text-2); white-space: nowrap; transition: .15s; }
.faq-tab i { font-size: 16px; }
.faq-tab:hover { border-color: var(--red-border); color: var(--red); }
.faq-tab.is-on { background: var(--red); border-color: var(--red); color: #fff; box-shadow: var(--sh-red); }

/* ── Nhóm + accordion ── */
.faq-body { padding: 38px 0 26px; max-width: 760px; }
.faq-group { margin-bottom: 44px; }
.faq-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.faq-group-head i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  background: var(--red-light); color: var(--red); font-size: 18px; }
.faq-group-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; scroll-margin-top: 80px; }
.faq-item { border: 1px solid var(--border-s); border-radius: var(--r-m); background: var(--bg); margin-bottom: 10px; overflow: hidden; }
.faq-item[open] { border-color: var(--red-border); box-shadow: var(--sh-xs); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px;
  padding: 15px 18px; cursor: pointer; font-size: 15.5px; font-weight: 700; line-height: 1.45; list-style: none; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q i { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-alt); color: var(--text-2); font-size: 16px; transition: .15s; }
.faq-item[open] .faq-q i { background: var(--red-light); color: var(--red); transform: rotate(45deg); }
.faq-a { padding: 0 18px 16px; font-size: 15px; color: var(--text-2); line-height: 1.7; }
.faq-a p { margin: 0 0 8px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--red); font-weight: 700; }
.faq-a ul { margin: 8px 0 0 18px; }

/* Chip khảo thí ÖSD — vàng dịch vụ tiếng Đức (≤15%), theo .tag */
.faq-osd { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 6px 14px; border-radius: 99px;
  background: var(--gold-soft); color: var(--gold-deep); margin-bottom: 10px; }
.faq-osd i { font-size: 14px; }

/* ── CTA cuối — theo .vp-end-cta + .vp-btn-go/.vp-btn-line ── */
.faq-end-cta { margin: 10px 0 70px; background: #F7F7F8; border: 1px solid var(--border-s);
  border-left: 4px solid var(--red); border-radius: var(--r-m); padding: 18px 22px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.faq-end-cta i.lead { font-size: 26px; color: var(--red); }
.faq-end-cta .tx { flex: 1; min-width: 240px; font-size: 13.5px; line-height: 1.55; }
.faq-end-cta .tx b { color: var(--red); }
.faq-btn-go { font-size: 13.5px; font-weight: 700; color: #fff; background: var(--red);
  display: inline-flex; align-items: center; gap: 7px; padding: 12px 18px; border-radius: 10px;
  box-shadow: var(--sh-red); transition: .15s; }
.faq-btn-go:hover { background: var(--red-deep); }
.faq-btn-line { font-size: 13.5px; font-weight: 700; color: var(--red); background: #fff;
  border: 1px solid var(--red-border); display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 16px; border-radius: 10px; }

@media (max-width: 640px) {
  .faq-wrap { padding: 0 18px; }
  .faq-hero { padding: 34px 0 28px; }
  .faq-q { font-size: 15px; }
}