/* ============================================================================
   site.css — KHUNG DÙNG CHUNG cho MỌI trang công khai
   (/, /tai-khoan, /huong-dan, /prompts, /bang-gia)

   ⚠️ ĐÂY LÀ NGUỒN SỰ THẬT DUY NHẤT cho nav + brand + footer + nút đổi ngôn ngữ.
   Trước 2026-07-20 mỗi trang tự chép một bản riêng (~21 rule) nên giá trị trôi
   mỗi nơi một kiểu (vd font link nav: 2 trang 14px, 3 trang thừa hưởng 16px)
   => nav trông khác nhau giữa các trang. ĐỪNG khai lại các rule này trong
   <style> của từng trang; sửa ở đây là cả 5 trang đổi theo.
   ============================================================================ */

:root {
  --bg: #f4f5f2;
  --panel: #ffffff;
  --ink: #101513;
  --muted: #65716b;
  --line: #dfe6df;
  --green: #0c725f;
  --green-soft: #eaf6f1;
  --gold: #d99b1c;
  --gold-soft: #fff4d8;
  --nav-h: 74px;
}

/* ---------------------------------------------------------------- layout nền */
/* Footer luôn nằm đáy màn hình kể cả trang ngắn. Hỗ trợ CẢ 2 kiểu cấu trúc:
   footer là anh em của main (/huong-dan, /prompts, /bang-gia) và footer lồng
   trong main > .container (/, /tai-khoan). */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main, .page { flex: 1 0 auto; }
main > .container { flex: 1 0 auto; display: flex; flex-direction: column; }
main > .container > .footer { margin-top: auto; }

/* ----------------------------------------------------------------------- nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(244, 245, 242, 0.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(223, 230, 223, 0.82);
}
.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  min-height: var(--nav-h);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* brand: logo PNG có nền TRONG SUỐT -> tuyệt đối không đặt background trắng
   (sẽ thành ô trắng bao quanh logo). Tên không được xuống dòng. */
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.brand img {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: none;
  box-shadow: none;
  object-fit: contain;
}
.brand strong { display: block; font-size: 16px; line-height: 1.15; white-space: nowrap; }
.brand span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; white-space: nowrap; }

.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-links {
  display: flex; align-items: center;
  gap: 2px; flex-wrap: nowrap; justify-content: flex-end;
}
.nav-links a {
  text-decoration: none;
  color: #2e3934;
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
  padding: 10px 12px;
  border-radius: 10px;
  white-space: nowrap;
}
.nav-links a:hover { background: #e9eee9; }
.nav-links a.active { color: var(--green); background: var(--green-soft); }

/* Nút CTA: tạo thứ bậc thị giác để nav không phẳng */
.nav-links a.nav-cta {
  background: var(--gold);
  color: #241a02;
  font-weight: 850;
  padding: 10px 17px;
  border-radius: 999px;
  margin-left: 6px;
  box-shadow: 0 6px 16px rgba(217, 155, 28, 0.26);
}
.nav-links a.nav-cta:hover { background: var(--gold); filter: brightness(1.06); }

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
/* ⚠️ Mỗi trang có rule `button` toàn cục RIÊNG rất khác nhau (customer/tai-khoan:
   min-height 44px + padding 11px; huong-dan: padding 13px 24px; prompts: flex 1
   + font 13px). Nút VI/EN thừa hưởng chúng nên cao thấp & giãn cách mỗi trang một
   kiểu. Vì vậy phải RESET tường minh mọi thuộc tính có thể bị thừa hưởng — đây là
   lý do dùng !important, không phải tiện tay. */
.lang-toggle button {
  border: 0 !important;
  background: #fff;
  color: #2e3934;
  font-family: inherit;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  padding: 9px 11px !important;
  min-height: 0 !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  flex: none !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lang-toggle button.active { background: var(--green); color: #fff; }

/* Link nav cũng phải miễn nhiễm với CSS `a` toàn cục của từng trang */
.nav-links a, .nav-links a.nav-cta {
  letter-spacing: normal;
  text-transform: none;
  min-height: 0;
}

/* -------------------------------------------------------------------- footer */
.footer {
  border-top: 1px solid var(--line);
  padding: 26px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .nav-inner { gap: 16px; }
  .nav-links { flex-wrap: wrap; }
  .nav-links a { padding: 9px 9px; font-size: 13.5px; }
}
@media (max-width: 720px) {
  .nav-inner { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .nav-links { justify-content: flex-start; }
  .brand span { display: none; }
}