/* Dukian — Trang pháp lý. Dùng LẠI đúng biến màu/font của trang chủ
   (index.html) để ba trang này trông như cùng một website, không phải trang lạ
   ghép vào. Đổi màu thương hiệu thì sửa ở đây và index.html cùng lúc. */

:root {
  --bg: #F4F8F4;
  --panel: #FFFFFF;
  --ink: #13211B;
  --ink-soft: #4C5B53;
  --green: #34A853;
  --green-dk: #006E2C;
  --line: #D8E4DB;
  --display: "Fraunces", Georgia, serif;
  --sans: "Noto Sans KR", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 28px; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--green-dk); outline-offset: 3px; border-radius: 2px; }

header {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(244, 248, 244, 0.86);
}
header .wrap { display: flex; align-items: center; justify-content: space-between; }
.mark {
  font-family: var(--sans); font-weight: 700; letter-spacing: 0.14em;
  font-size: 1.05rem; color: var(--green-dk); text-decoration: none;
}
.mark span { color: var(--green); }
.nav-link {
  font-size: 0.86rem; font-weight: 500; text-decoration: none;
  color: var(--ink-soft); letter-spacing: 0.02em;
  padding-bottom: 3px; border-bottom: 1.5px solid transparent;
}
.nav-link:hover { color: var(--green-dk); border-color: var(--green); }

main { padding: 56px 0 72px; }

h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.01em;
}

.meta { margin-top: 10px; font-size: 0.86rem; color: var(--ink-soft); }

/* Chuyển ngôn ngữ — chỉ hiện khi thật sự có nhiều bản. */
#doi-ngon-ngu { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.lang-link {
  font-size: 0.84rem; text-decoration: none; color: var(--ink-soft);
  padding-bottom: 2px; border-bottom: 1.5px solid transparent;
}
.lang-link:hover { color: var(--green-dk); border-color: var(--green); }
.lang-link.dang-xem { color: var(--green-dk); font-weight: 700; border-color: var(--green); }

/* Băng báo LÙI ngôn ngữ: "trang này chưa có bản tiếng Việt…".
   Đủ nổi để không bị đọc lướt qua (người đọc phải biết mình đang đọc bản KHÁC
   thứ tiếng mình chọn), nhưng KHÔNG đỏ như báo lỗi — đây không phải hỏng hóc. */
.bao-lui {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* ---- Thân bài: chữ THUẦN do founder dán ----
   Văn bản pháp lý dài và người ta ĐỌC THẬT (kể cả người duyệt store), nên phải
   có phân cấp và bề rộng dòng dễ đọc, không phải một khối chữ đều tăm tắp. */
#than-bai { margin-top: 38px; }

/* Tiêu đề mục ("1. Eligibility & age") — nhận dạng ở legal_pick.js. */
#than-bai h2 {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 34px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
/* Mục ĐẦU TIÊN không cần vạch kẻ trên (đã có khoảng trắng dưới phần đầu trang). */
#than-bai h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* Mục CON ("a. Thông tin tài khoản") — nhỏ hơn mục chính, không vạch kẻ, để
   thấy rõ nó nằm TRONG mục chính chứ không ngang hàng. */
#than-bai h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 22px 0 6px;
  color: var(--ink);
}

#than-bai p {
  margin-bottom: 16px;
  /* pre-wrap: giữ nguyên xuống dòng người ta gõ (mục a) b) c) hay xuống dòng
     liền nhau); break-word: chữ/URL dài không tràn ra ngoài khung. */
  white-space: pre-wrap;
  word-break: break-word;
  /* Dòng vừa tay mắt: quá dài thì mắt mất dòng khi xuống hàng. */
  max-width: 68ch;
}
#than-bai p:last-child { margin-bottom: 0; }

/* Ba trạng thái không-có-nội-dung. Không bao giờ để trang TRẮNG: người đọc phải
   biết trang có tồn tại và liên hệ ở đâu. */
.hop-bao {
  margin-top: 30px; padding: 22px 24px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.hop-bao p + p { margin-top: 10px; }
.hop-bao a { color: var(--green-dk); font-weight: 700; }

/* ---- Chân trang ----
   Ba phần: bản quyền · lối sang hai trang kia · email. Trang con hẹp hơn trang
   chủ (760px) nên xếp NGANG ba phần là dồn cục — xếp DỌC, canh giữa, cho thoáng. */
footer { border-top: 1px solid var(--line); margin-top: 56px; padding: 32px 0 48px; }
footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* Lối sang hai trang pháp lý còn lại: vào được một trang thì phải đi tiếp được,
   không phải quay ra trang chủ rồi vào lại. */
.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* PHẢI có: chân trang xếp cột + canh giữa nên khối này bị co về bề rộng nhỏ
     nhất, ba nhãn rơi xuống ba dòng. Cho chiếm trọn bề ngang rồi tự canh giữa —
     hẹp quá mới xuống dòng. */
  width: 100%;
  /* Khoảng cách RỘNG: ba nhãn cạnh nhau mà sát quá thì đọc ra một cục chữ, và
     vùng bấm cũng dính nhau. */
  gap: 10px 26px;
  font-size: 0.86rem;
}
.foot-links a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: color .18s, border-color .18s;
}
.foot-links a:hover { color: var(--green-dk); border-color: var(--green); }
.foot-links a[aria-current="page"] {
  color: var(--green-dk);
  font-weight: 700;
  border-color: var(--green);
}

.foot-l { font-size: 0.84rem; color: var(--ink-soft); }
.foot-l b { color: var(--ink); font-weight: 700; }
.foot-r { font-size: 0.82rem; color: var(--ink-soft); }

@media (max-width: 720px) {
  main { padding: 40px 0 56px; }
}