/* ================= Chat Auto — Trang giới thiệu bản "Học cách trả lời khách" =================
 * Chỉ chứa các khối RIÊNG của index-hoc-tra-loi.html. Màu, nút, thẻ, lưới, header, footer, khung
 * chat, QR… dùng chung css/styles.css — sửa ở đó thì cả hai trang cùng đổi.
 * Không viết style="…" trong HTML: CSP của web chặn (xem doc/Caddyfile.bao-mat).
 */

/* ---------- Khung chat đầu trang: tiêu đề là nghề đang học ---------- */
.chat-head .nghe-ic { font-size: 22px; line-height: 1; }

/* ---------- Cùng một câu hỏi, hai cách trả lời ---------- */
.hai-cach {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  max-width: 900px; margin: 34px auto 0;
}
.cach {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm);
}
.cach h3 { font-size: 17px; margin: 0; }
.cach.thuong { background: #fdf7f7; border-color: #f0dcdb; }
.cach.thuong h3 { color: #b8514d; }
.cach.giu-khach { background: rgba(10, 114, 173, .05); border-color: var(--brand); }
.cach.giu-khach h3 { color: #06669d; }
.doan-chat { display: flex; flex-direction: column; gap: 10px; }
/* Câu trả lời "cho xong": cùng hình bong bóng nhưng nhạt màu — đúng, mà không giữ được ai */
.bubble.out.nhat { background: #e3eaef; color: var(--text); }
.meo { margin: 0; padding-top: 12px; border-top: 1px dashed #c9dbe6; font-size: 14.5px; color: var(--muted); }
.meo strong { color: var(--text); }

/* ---------- Ba nguyên tắc ---------- */
.nguyen-tac { grid-template-columns: repeat(3, 1fr); }
.nguyen-tac .card { display: flex; flex-direction: column; }
.nguyen-tac .step-no { margin-bottom: 14px; }
.vi-du {
  margin: auto 0 0; padding: 10px 14px;
  background: var(--bg-alt); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14.5px; font-style: italic; color: var(--text);
}
/* margin-top:auto đẩy ví dụ xuống đáy thẻ để ba thẻ thẳng hàng; vẫn chừa khoảng với đoạn trên */
.nguyen-tac .card p { margin-bottom: 16px; }

/* ---------- 14 nghề ---------- */
/* Flex + căn giữa, không dùng grid: 14 nghề không chia đều cho hàng nào, grid để hàng cuối lẻ
   loi choi bên trái. Máy tính 5-5-4, điện thoại 2 cột. */
.cac-nghe {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1080px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.nghe {
  flex: 0 1 200px;
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; box-shadow: var(--shadow-sm);
}
.nghe-ic { font-size: 24px; line-height: 1; flex: none; }
.nghe b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.nghe small { color: var(--muted); font-size: 13px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nguyen-tac { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .hai-cach { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .nghe { flex-basis: calc(50% - 6px); padding: 12px; gap: 10px; }
}

/* Link trong câu trả lời hỏi đáp — styles.css bỏ gạch chân mọi thẻ a, ở đây phải nhìn ra là link */
.faq a.inline-link { color: var(--brand); text-decoration: underline; }