/* Giao diện các trang công khai: giới thiệu, chính sách bảo mật, điều khoản.
 *
 * Các trang này KHÔNG nạp js/auth.js nên không bao giờ bị màn đăng nhập che,
 * đúng yêu cầu của Google khi duyệt OAuth consent screen.
 *
 * Mọi thứ ở đây bọc trong body.lpage để không ảnh hưởng các trang trong app.
 * Bảng màu lấy từ logo: cam ấm của huy hiệu, xanh của bạn sao, nền kem.
 */

body.lpage {
  --l-cream: #fff8ee;
  --l-orange: #f2941f;
  --l-orange-ink: #a55a06;
  --l-orange-soft: #fdeed6;
  --l-sky: #4a9ee8;
  --l-sky-soft: #e4f1fd;
  --l-mint-soft: #e2f5ec;
  --l-grape-soft: #eeeafd;
  --l-rose-soft: #fdeaef;
  --l-lemon-soft: #fdf4d6;
  background: linear-gradient(180deg, var(--l-cream) 0%, #fdfaf5 320px, var(--bg) 900px);
}

/* ---------- Thanh trên ---------- */
body.lpage .topbar {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid #f0e4d2;
}

/* ---------- Bố cục ---------- */
.landing { max-width: 980px; }

/* ---------- Phần mở đầu ---------- */
.lhero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 100% 0%, #fff4e2 0%, rgba(255, 244, 226, 0) 58%),
    var(--card);
  border: 1px solid #f2e5d3; border-radius: 22px;
  box-shadow: 0 10px 34px rgba(120, 80, 20, .07);
  padding: 40px 36px; margin-bottom: 26px;
}
/* Trang chủ: chữ bên trái, mascot bên phải */
.lhero.with-art {
  display: grid; grid-template-columns: minmax(0, 1fr) 208px;
  gap: 30px; align-items: center;
}
.lhero-art { justify-self: center; }
.lhero-art img {
  width: 200px; height: 200px; display: block;
  filter: drop-shadow(0 12px 26px rgba(180, 110, 20, .26));
}

.leyebrow {
  display: inline-block; margin: 0 0 12px;
  background: var(--l-orange-soft); color: var(--l-orange-ink);
  font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.lhero h1 {
  margin: 0 0 14px; font-size: clamp(2rem, 4.6vw, 2.85rem);
  line-height: 1.12; letter-spacing: -.5px;
}
.lhero h1 .accent { color: var(--l-orange); }
/* Đoạn dẫn: chữ thường, cỡ lớn. Không dùng class .tag của style.css vì class đó
   in hoa toàn bộ. */
.lhero .ltag {
  margin: 0 0 24px; color: #55606f;
  font-size: 1.08rem; line-height: 1.65; max-width: 54ch;
}
.lhero .cta { display: flex; flex-wrap: wrap; gap: 10px; }
.lhero .cta .btn { padding: 11px 20px; border-radius: 12px; }
.lhero .cta .btn.primary {
  background: var(--l-orange); border-color: var(--l-orange);
  box-shadow: 0 6px 16px rgba(242, 148, 31, .32);
}
.lhero .cta .btn.primary:hover { background: #dd8112; border-color: #dd8112; }

/* Trang pháp lý: hero gọn, không có mascot */
.lhero.plain { padding: 34px 36px; }
.lhero.plain h1 { font-size: clamp(1.7rem, 3.6vw, 2.2rem); }

/* ---------- Khối nội dung ---------- */
.lsec {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 3px 14px rgba(24, 34, 64, .05);
  padding: 28px 32px; margin-bottom: 18px;
}
.lsec > h2 {
  margin: 0 0 18px; font-size: 1.3rem; letter-spacing: -.2px;
  display: flex; align-items: center; gap: 10px;
}
/* Vạch cam nhỏ trước mỗi tiêu đề, cho đỡ trơ */
.lsec > h2::before {
  content: ''; flex: none; width: 4px; height: 1.05em;
  background: var(--l-orange); border-radius: 999px;
}
.lsec h3 { margin: 22px 0 8px; font-size: 1.02rem; }
.lsec p { margin: 0 0 13px; }
.lsec p:last-child { margin-bottom: 0; }
.lsec ul { margin: 0 0 13px; padding-left: 20px; }
.lsec li { margin-bottom: 8px; }
.lsec li:last-child { margin-bottom: 0; }
.lsec a { color: var(--brand); text-underline-offset: 2px; }
.lsec code {
  background: var(--l-sky-soft); color: #17558c;
  font-weight: 600; padding: 2px 7px; border-radius: 6px;
}

/* ---------- Lưới tính năng ---------- */
.lgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; }
.lcard {
  --t: var(--l-orange-soft);
  border: 1px solid var(--line); border-radius: 15px;
  padding: 20px 20px 18px; background: var(--card);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.lcard:hover {
  transform: translateY(-2px); border-color: #dfe4f0;
  box-shadow: 0 10px 24px rgba(24, 34, 64, .08);
}
.lcard .ico {
  width: 44px; height: 44px; border-radius: 13px; background: var(--t);
  display: grid; place-items: center; font-size: 1.35rem; margin-bottom: 13px;
}
.lcard h3 { margin: 0 0 6px; font-size: 1.02rem; }
.lcard p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.6; }
.lcard.t1 { --t: var(--l-orange-soft); }
.lcard.t2 { --t: var(--l-lemon-soft); }
.lcard.t3 { --t: var(--l-mint-soft); }
.lcard.t4 { --t: var(--l-sky-soft); }
.lcard.t5 { --t: var(--l-grape-soft); }
.lcard.t6 { --t: var(--l-rose-soft); }

/* ---------- Các bước sử dụng ---------- */
.lsteps { list-style: none; margin: 0 0 18px; padding: 0; counter-reset: step; }
.lsteps li {
  counter-increment: step; position: relative;
  padding-left: 50px; margin-bottom: 18px; min-height: 34px;
}
.lsteps li:last-child { margin-bottom: 0; }
.lsteps li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--l-orange-soft); color: var(--l-orange-ink);
  font-weight: 800; font-size: .98rem; display: grid; place-items: center;
}
.lsteps strong { color: var(--ink); }

/* ---------- Danh sách quyền truy cập Google ---------- */
.lscopes { list-style: none; margin: 0 0 14px; padding: 0; }
.lscopes li {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  padding: 11px 14px; margin-bottom: 8px;
  background: #fafbff; border: 1px solid var(--line); border-radius: 12px;
}
.lscopes li:last-child { margin-bottom: 0; }
.lscopes .sname { font-weight: 700; }
.lscopes .sdesc { color: var(--muted); font-size: .93rem; flex: 1 1 260px; }

/* ---------- Bảng dữ liệu thu thập ---------- */
.ltable-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); margin: 4px 0 16px; }
.ltable { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 620px; }
.ltable th, .ltable td { padding: 11px 14px; text-align: left; vertical-align: top; }
.ltable thead th {
  background: #f7f4ee; font-weight: 800; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em; color: #6a5c46;
  border-bottom: 1px solid var(--line);
}
.ltable tbody tr + tr td { border-top: 1px solid var(--line); }
.ltable tbody td:first-child { font-weight: 700; }

/* ---------- Ghi chú nổi bật ---------- */
.lnote {
  border-left: 4px solid var(--l-orange); background: #fff7ea;
  padding: 14px 18px; border-radius: 0 12px 12px 0; margin: 16px 0 0;
  font-size: .95rem; line-height: 1.6;
}
.lmeta { color: var(--muted); font-size: .88rem; margin: 0; }

/* ---------- Khối tiếng Anh cho người duyệt của Google ---------- */
.lsec.en { background: #fbfcff; border-color: #e0e6f5; }
.lsec.en > h2::before { background: var(--l-sky); }

/* ---------- Chân trang ---------- */
.lfoot {
  border-top: 1px solid #f0e4d2; background: rgba(255, 255, 255, .7);
  padding: 26px 22px; text-align: center; color: var(--muted); font-size: .9rem;
}
.lfoot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin-bottom: 12px; }
.lfoot a { color: var(--brand); text-decoration: none; font-weight: 600; }
.lfoot a:hover { text-decoration: underline; }

/* ---------- Màn hình nhỏ ---------- */
@media (max-width: 780px) {
  .lhero.with-art { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .lhero.with-art .ltag { max-width: none; }
  .lhero.with-art .cta { justify-content: center; }
  .lhero.with-art .lhero-art { grid-row: 1; }
  .lhero-art img { width: 132px; height: 132px; }
}
@media (max-width: 640px) {
  .lhero { padding: 26px 20px; border-radius: 18px; }
  .lhero.plain { padding: 24px 20px; }
  .lsec { padding: 22px 20px; border-radius: 15px; }
  .lhero .cta .btn { width: 100%; text-align: center; }
  .lsteps li { padding-left: 42px; }
  .lsteps li::before { width: 29px; height: 29px; font-size: .9rem; }
}