/* ============================================================
   LEGAL PAGES — Điều khoản / Quyền riêng tư / Hoàn tiền
   Dùng chung cho terms.html, privacy.html, refund.html.

   Các trang này CỐ TÌNH đứng độc lập với style.css và app.js:
   người duyệt hồ sơ của Paddle (và bot thu thập dữ liệu) phải đọc
   được nội dung mà không cần đăng nhập, không cần Firebase, không
   phụ thuộc theme người dùng đang chọn. Vì vậy chỉ nạp đúng file
   này, không nạp gì thêm.
   ============================================================ */

:root {
    --lg-bg: #f4f6f9;
    --lg-card: #ffffff;
    --lg-border: #e2e8f0;
    --lg-text: #334155;
    --lg-heading: #0f172a;
    --lg-muted: #64748b;
    --lg-accent: #047857;
    --lg-accent-soft: #ecfdf5;
    --lg-warn-bg: #fffbeb;
    --lg-warn-border: #f59e0b;
    --lg-warn-text: #92400e;
    --lg-info-bg: #eff6ff;
    --lg-info-border: #3b82f6;
    --lg-info-text: #1e40af;
}

@media (prefers-color-scheme: dark) {
    :root {
        --lg-bg: #0b1220;
        --lg-card: #111c2e;
        --lg-border: #1e2d45;
        --lg-text: #cbd5e1;
        --lg-heading: #f1f5f9;
        --lg-muted: #94a3b8;
        --lg-accent: #34d399;
        --lg-accent-soft: #0c2a20;
        --lg-warn-bg: #2a1f06;
        --lg-warn-border: #f59e0b;
        --lg-warn-text: #fcd34d;
        --lg-info-bg: #0d1c33;
        --lg-info-border: #3b82f6;
        --lg-info-text: #93c5fd;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--lg-bg);
    color: var(--lg-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

.lg-wrap { max-width: 860px; margin: 0 auto; padding: 0 20px 80px; }

/* ===== Thanh điều hướng ===== */
.lg-topbar {
    background: var(--lg-card);
    border-bottom: 1px solid var(--lg-border);
    padding: 14px 20px;
    margin-bottom: 36px;
}
.lg-topbar-inner {
    max-width: 860px; margin: 0 auto;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.lg-brand {
    font-weight: 800; font-size: 16px; color: var(--lg-heading);
    text-decoration: none; letter-spacing: -0.3px; margin-right: auto;
}
.lg-brand span { color: var(--lg-accent); }

.lg-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.lg-nav a {
    font-size: 13.5px; font-weight: 600; text-decoration: none;
    color: var(--lg-muted); padding: 6px 11px; border-radius: 7px;
}
.lg-nav a:hover { background: var(--lg-accent-soft); color: var(--lg-accent); }
.lg-nav a.active { background: var(--lg-accent-soft); color: var(--lg-accent); }

/* ===== Bộ chọn ngôn ngữ ===== */
.lg-langs { display: flex; gap: 4px; }
.lg-langs button {
    font: inherit; font-size: 12.5px; font-weight: 700;
    padding: 5px 10px; border-radius: 6px; cursor: pointer;
    background: transparent; color: var(--lg-muted);
    border: 1px solid var(--lg-border);
}
.lg-langs button:hover { color: var(--lg-accent); border-color: var(--lg-accent); }
.lg-langs button[aria-pressed="true"] {
    background: var(--lg-accent); color: #fff; border-color: var(--lg-accent);
}

/* ===== Nội dung ===== */
h1 {
    font-size: 30px; line-height: 1.3; color: var(--lg-heading);
    margin: 0 0 8px; letter-spacing: -0.6px;
}
.lg-updated { color: var(--lg-muted); font-size: 14px; margin: 0 0 28px; }

h2 {
    font-size: 20px; color: var(--lg-heading); margin: 38px 0 12px;
    padding-top: 20px; border-top: 1px solid var(--lg-border);
    letter-spacing: -0.3px;
}
h2:first-of-type { border-top: none; padding-top: 0; }
h3 { font-size: 16.5px; color: var(--lg-heading); margin: 22px 0 8px; }

p { margin: 0 0 14px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 7px; }
strong { color: var(--lg-heading); }
a { color: var(--lg-accent); }

table {
    width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px;
}
th, td { border: 1px solid var(--lg-border); padding: 9px 12px; text-align: left; }
th { background: var(--lg-accent-soft); color: var(--lg-heading); font-weight: 700; }

.lg-box {
    border-left: 4px solid var(--lg-info-border);
    background: var(--lg-info-bg); color: var(--lg-info-text);
    padding: 14px 18px; border-radius: 0 9px 9px 0; margin: 18px 0;
    font-size: 15px;
}
.lg-box.warn {
    border-left-color: var(--lg-warn-border);
    background: var(--lg-warn-bg); color: var(--lg-warn-text);
}
.lg-box p:last-child { margin-bottom: 0; }

.lg-footer {
    margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--lg-border);
    color: var(--lg-muted); font-size: 14px;
}

/* ===== Chuyển ngôn ngữ =====
   Khi JS chưa chạy (hoặc bị chặn) thì KHÔNG có thuộc tính data-lang trên
   <html>, và lúc đó cả 3 ngôn ngữ cùng hiện. Xấu nhưng an toàn: người
   duyệt hồ sơ vẫn đọc được đầy đủ, không bao giờ gặp trang trắng. */
html[data-lang="vi"] [data-lang]:not([data-lang="vi"]),
html[data-lang="en"] [data-lang]:not([data-lang="en"]),
html[data-lang="zh"] [data-lang]:not([data-lang="zh"]) { display: none; }

@media (max-width: 600px) {
    body { font-size: 15.5px; }
    h1 { font-size: 25px; }
    .lg-brand { margin-right: 0; width: 100%; }
    table { display: block; overflow-x: auto; }
}