/* Trang câu hỏi thường gặp. Dùng chung nền và bảng màu với trang giới thiệu, nhưng
   dày chữ hơn và không có hoạt ảnh cuộn — người vào đây đang đi tìm một câu trả lời
   cụ thể, mọi thứ hiện dần chỉ làm họ phải chờ. */

[hidden] { display: none !important; }

.trang-hoi .khoi-hoi-dau { min-height: auto; padding: 4.5rem 1.5rem 2rem; }
.khung-hoi { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem 4rem; }

.nhom-hoi { margin-bottom: 3rem; }
.nhom-hoi > h2 {
  font-size: .78rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--vang-toi); margin: 0 0 1rem;
  padding-bottom: .6rem; border-bottom: 1px solid rgba(216,180,92,.2);
}

/* <details> gốc của trình duyệt: mở/đóng chạy sẵn, không cần một dòng JS nào, và
   Ctrl+F của trình duyệt vẫn tìm được chữ bên trong ở các trình duyệt mới. */
.nhom-hoi details {
  border-bottom: 1px solid rgba(240,231,212,.08);
}
.nhom-hoi summary {
  cursor: pointer; padding: .95rem 2rem .95rem 0; position: relative;
  font-size: 1.05rem; color: var(--giay-mo);
  transition: color .3s;
  list-style: none;
}
.nhom-hoi summary::-webkit-details-marker { display: none; }
.nhom-hoi summary:hover { color: var(--giay); }
.nhom-hoi details[open] summary { color: var(--vang-sang); }

/* Dấu cộng tự vẽ, xoay thành dấu trừ khi mở — không dùng ký tự hay ảnh. */
.nhom-hoi summary::after {
  content: ""; position: absolute; right: .3rem; top: 50%;
  width: .7rem; height: 1px; background: var(--vang);
  transition: transform .3s var(--nhip);
}
.nhom-hoi summary::before {
  content: ""; position: absolute; right: .65rem; top: 50%;
  width: 1px; height: .7rem; margin-top: -.35rem; background: var(--vang);
  transition: transform .3s var(--nhip), opacity .3s;
}
.nhom-hoi details[open] summary::before { opacity: 0; transform: rotate(90deg); }

.nhom-hoi details p {
  margin: 0 0 1rem; padding-left: 1.1rem;
  font-size: .98rem; line-height: 1.75; color: var(--giay-mo);
  border-left: 1px solid rgba(216,180,92,.22);
}
.nhom-hoi details p:last-child { margin-bottom: 1.2rem; }
.nhom-hoi details b { color: var(--giay); font-weight: 500; }
.nhom-hoi details code {
  font-size: .9rem; color: var(--vang); letter-spacing: .06em;
}

/* Nhóm về chuyện nặng — nhìn phải khác hẳn mấy câu kỹ thuật phía trên. */
.nhom-nang > h2 { color: #C4A8E0; border-bottom-color: rgba(139,111,176,.35); }
.nhom-nang details { border-bottom-color: rgba(139,111,176,.2); }
.nhom-nang details[open] summary { color: #C4A8E0; }
.nhom-nang summary::after, .nhom-nang summary::before { background: #8B6FB0; }
.nhom-nang details p { border-left-color: rgba(139,111,176,.4); }

.nhom-cuoi .phu { max-width: none; margin-bottom: 1.2rem; }
.nhom-cuoi .hang-nut { justify-content: flex-start; }

/* ── Ô nhắn, KHÔNG cần đăng nhập ─────────────────────────────────────
   Đường thoát cho người bị khoá ngoài tài khoản, nên nó phải là thứ nổi bật ở cuối
   trang chứ không phải một dòng chữ nhỏ. */
.mau-nhan {
  display: flex; flex-direction: column; gap: 1.1rem;
  max-width: 34rem; margin: 0 0 1.6rem;
}
.mau-nhan label {
  display: flex; flex-direction: column; gap: .45rem;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vang);
}
.mau-nhan label i {
  font-style: normal; text-transform: none; letter-spacing: .04em;
  color: var(--giay-chim);
}
.mau-nhan input, .mau-nhan textarea {
  font: inherit; font-size: .98rem; letter-spacing: normal; text-transform: none;
  color: var(--giay); background: rgba(8,11,20,.55);
  border: 1px solid rgba(216,180,92,.25); padding: .7rem .85rem;
  transition: border-color .3s;
}
.mau-nhan textarea { resize: vertical; line-height: 1.6; }
.mau-nhan input:focus, .mau-nhan textarea:focus {
  outline: none; border-color: var(--vang);
}
.mau-nhan input::placeholder, .mau-nhan textarea::placeholder {
  color: rgba(240,231,212,.3);
}
.mau-nhan .goi-y {
  font-size: .78rem; letter-spacing: .02em; text-transform: none;
  color: var(--giay-chim); line-height: 1.5;
}
.mau-nhan .nut-chinh { align-self: flex-start; }
.mau-nhan button[disabled] { opacity: .5; cursor: default; }
.loi-nhan {
  margin: 0; font-size: .92rem; line-height: 1.6; color: #E8A0A0;
  border-left: 2px solid #E8A0A0; padding-left: .8rem;
}
.da-gui {
  margin: 0 0 1.6rem; max-width: 34rem;
  font-size: 1rem; line-height: 1.7; color: var(--giay);
  border-left: 2px solid var(--vang); padding-left: .9rem;
}

/* Nút về trang chủ — to, bấm được bằng ngón cái. Dòng link nhỏ bên dưới vẫn giữ, nhưng
   nó là chân trang, không phải nút. */
.chan-nut { margin: 0 0 1.4rem; }
.chan-nut .nut-phu { display: inline-block; }

footer a { color: var(--giay-mo); }
footer a:hover { color: var(--vang); }
.chan-nut a { color: var(--giay); }