/* policy.css — Trang pháp lý dùng chung (round 477). Token màu theo 27Big Code: tím #5b3fd6 · xanh #1d6fd8 · hồng #c2318f,
   tông SÁNG phẳng (không bóng) và tông TỐI (#0a0b16). Icon là Lucide (pol_icon() trong policy/_ui.php), không emoji.
   Tên lớp giữ như các trang cũ (.hero, .policy-section, .alert…) để nội dung không phải viết lại. */
:root, html[data-theme="light"] {
  --bg: #f4f6fb; --card: #ffffff; --card-2: #f7f8fc; --ink: #1a1f2b; --ink-2: #3b4252; --soft: #5b6472; --border: #e2e6f0;
  --accent: #5b3fd6; --accent-2: #1d6fd8; --pink: #c2318f; --accent-bg: #efeaff;
  --blue-bg: #eef4ff; --blue-bd: #c9dbff; --blue-ink: #1d4ed8;
  --green-bg: #ecfdf3; --green-bd: #bbf0cf; --green-ink: #15803d;
  --yellow-bg: #fff8e6; --yellow-bd: #f5d78a; --yellow-ink: #92400e;
  --red-bg: #fff1f2; --red-bd: #fecdd3; --red-ink: #be123c;
  --nav-bg: rgba(255, 255, 255, .86);
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #0a0b16; --card: #12131f; --card-2: #181a29; --ink: #f3f4fb; --ink-2: #d4d7e6; --soft: #a3a8c9; --border: rgba(255, 255, 255, .1);
  --accent: #a48dff; --accent-2: #5ea8ff; --pink: #ff7fd0; --accent-bg: rgba(124, 92, 255, .18);
  --blue-bg: rgba(59, 130, 246, .12); --blue-bd: rgba(59, 130, 246, .32); --blue-ink: #9cc2ff;
  --green-bg: rgba(34, 197, 94, .1); --green-bd: rgba(34, 197, 94, .3); --green-ink: #7ee2a8;
  --yellow-bg: rgba(245, 158, 11, .1); --yellow-bd: rgba(245, 158, 11, .32); --yellow-ink: #fcd27a;
  --red-bg: rgba(244, 63, 94, .1); --red-bd: rgba(244, 63, 94, .32); --red-ink: #ff9aae;
  --nav-bg: rgba(10, 11, 22, .82);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 84px; scroll-behavior: smooth; }
body { font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; background: var(--bg); color: var(--ink-2); line-height: 1.75; font-size: 15px; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
strong { color: var(--ink); font-weight: 700; }
.pol-ico { width: 1em; height: 1em; flex: none; vertical-align: -.14em; }

/* ── Thanh trên cùng ── */
.top-nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: var(--nav-bg); border-bottom: 1px solid var(--border); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.top-nav .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 16px; font-weight: 800; letter-spacing: -.01em; text-decoration: none; }
.top-nav .brand img { width: 30px; height: 30px; display: block; }
.top-nav .sep { color: var(--soft); opacity: .6; display: inline-flex; }
.top-nav .nav-label { font-size: 13.5px; font-weight: 600; color: var(--soft); white-space: nowrap; }
.policy-tabs { display: flex; gap: 4px; margin-left: auto; padding: 4px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--border); }
.policy-tabs a { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--soft); text-decoration: none; white-space: nowrap; }
.policy-tabs a .pol-ico { width: 15px; height: 15px; }
.policy-tabs a:hover { color: var(--ink); text-decoration: none; }
.policy-tabs a.active { background: var(--card); color: var(--accent); box-shadow: 0 0 0 1px var(--border); }
html[data-theme="dark"] .policy-tabs a.active { background: var(--accent-bg); box-shadow: none; }
.nav-tools { display: flex; gap: 6px; }
.nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--border); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; }
.nav-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.nav-btn .pol-ico { width: 17px; height: 17px; }
.nav-btn.theme { padding: 0; }
.nav-btn.theme .moon, html[data-theme="dark"] .nav-btn.theme .sun { display: none; }
html[data-theme="dark"] .nav-btn.theme .moon { display: inline-flex; }

/* ── Đầu trang ── */
.hero { position: relative; overflow: hidden; padding: 64px 24px 52px; text-align: center; border-bottom: 1px solid var(--border);
  background: radial-gradient(60% 120% at 15% 0%, rgba(91, 63, 214, .12), transparent 60%), radial-gradient(50% 110% at 90% 10%, rgba(29, 111, 216, .1), transparent 60%), var(--bg); }
html[data-theme="dark"] .hero { background: radial-gradient(60% 120% at 15% 0%, rgba(124, 92, 255, .22), transparent 60%), radial-gradient(50% 110% at 90% 10%, rgba(34, 211, 238, .12), transparent 60%), var(--bg); }
.hero .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; margin-bottom: 18px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hero h1 { margin-bottom: 12px; font-size: clamp(28px, 4.6vw, 46px); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; color: var(--ink);
  background: linear-gradient(100deg, var(--ink) 30%, var(--accent) 70%, var(--pink) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero p { max-width: 600px; margin: 0 auto; font-size: 15.5px; color: var(--soft); text-wrap: balance; }
.hero .updated { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 12.5px; color: var(--soft); }

/* ── Bố cục: mục lục trái (policy.js dựng) + nội dung ── */
.container { max-width: 880px; margin: 0 auto; padding: 36px 20px 72px; }
.container.has-side { max-width: 1180px; display: grid; grid-template-columns: 236px minmax(0, 1fr); column-gap: 40px; }
.container.has-side > * { grid-column: 2; min-width: 0; }
.container.has-side > .pol-side { grid-column: 1; grid-row: 1 / span 400; }
.pol-side { position: sticky; top: 86px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; padding: 4px 4px 12px 0; }
.pol-side-h { margin: 0 0 10px 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.pol-side ol { list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--border); }
.pol-side a { display: flex; gap: 10px; margin-left: -1px; padding: 6px 10px; border-left: 2px solid transparent; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--soft); text-decoration: none; }
.pol-side a .n { flex: none; min-width: 16px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .7; }
.pol-side a:hover { color: var(--ink); text-decoration: none; }
.pol-side a.is-on { color: var(--accent); border-left-color: var(--accent); font-weight: 700; }
.container.has-side > .toc { display: none; }

/* Mục lục trong nội dung (trang có sẵn .toc) */
.toc { margin-bottom: 28px; padding: 20px 24px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); }
.toc h3 { margin-bottom: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.toc ol { padding-left: 20px; columns: 2; column-gap: 28px; }
.toc li { margin: 4px 0; break-inside: avoid; font-size: 14px; }
.toc a { color: var(--ink-2); font-weight: 500; }
.toc a:hover { color: var(--accent); }

/* ── Mục ── */
.policy-section { margin-bottom: 18px; padding: 28px 30px 26px; border-radius: 18px; background: var(--card); border: 1px solid var(--border); }
.policy-section:target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91, 63, 214, .14); }
.section-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.section-num { flex: none; display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 11px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.section-num .pol-ico { width: 18px; height: 18px; }
.section-title { font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.section-title small { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--soft); }
.policy-section p { margin-bottom: 12px; font-size: 14.5px; color: var(--ink-2); }
.policy-section p:last-child { margin-bottom: 0; }
.policy-section h4, .pol-sub { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.pol-sub .pol-ico { width: 17px; height: 17px; color: var(--accent); }
.pol-note { margin-top: 10px; font-size: 13px; color: var(--soft); font-style: italic; }
.pol-muted { color: var(--soft); }
.pol-code { padding: 2px 7px; border-radius: 6px; background: var(--accent-bg); color: var(--accent); font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }

/* ── Hộp nhắc ── */
.alert { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0; padding: 14px 16px; border-radius: 13px; border: 1px solid; font-size: 14px; line-height: 1.65; }
.alert-icon { flex: none; display: grid; place-items: center; width: 22px; height: 24px; }
.alert-icon .pol-ico { width: 19px; height: 19px; }
.alert strong { color: inherit; }
.alert a { color: inherit; text-decoration: underline; }
.alert :last-child { margin-bottom: 0; }
.alert-blue { background: var(--blue-bg); border-color: var(--blue-bd); color: var(--blue-ink); }
.alert-green { background: var(--green-bg); border-color: var(--green-bd); color: var(--green-ink); }
.alert-yellow { background: var(--yellow-bg); border-color: var(--yellow-bd); color: var(--yellow-ink); }
.alert-red { background: var(--red-bg); border-color: var(--red-bd); color: var(--red-ink); }
.container > .alert:first-child, .container.has-side > .pol-side + .alert { margin-top: 0; }

.highlight-box { margin: 16px 0; padding: 18px 20px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--border); border-left: 4px solid var(--accent); font-size: 14.5px; color: var(--ink-2); }
.highlight-box strong { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 15px; color: var(--ink); }
.highlight-box strong .pol-ico { width: 18px; height: 18px; color: var(--accent); }

/* ── Danh sách ── */
ul.dot-list { padding-left: 20px; }
ul.dot-list li { margin: 7px 0; font-size: 14.5px; color: var(--ink-2); }
ul.dot-list li::marker { color: var(--accent); }
ul.check-list, ul.cross-list { list-style: none; }
ul.check-list li, ul.cross-list li { position: relative; margin: 8px 0; padding-left: 28px; font-size: 14.5px; color: var(--ink-2); }
ul.check-list li::before, ul.cross-list li::before { content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 6px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 14px; mask-size: 14px; }
ul.check-list li::before { background: var(--green-ink); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
ul.cross-list li::before { background: var(--red-ink); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }

/* ── Bảng ── */
.policy-table { width: 100%; margin: 14px 0; border-collapse: separate; border-spacing: 0; font-size: 14px; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; }
.policy-table th, .policy-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.policy-table tr:last-child th, .policy-table tr:last-child td { border-bottom: 0; }
.policy-table th { background: var(--card-2); font-size: 13px; font-weight: 700; color: var(--ink); }
.policy-table td { color: var(--ink-2); }
.policy-table td + td, .policy-table th + th, .policy-table th + td { border-left: 1px solid var(--border); }

/* ── Ô thẻ (dữ liệu thu thập / quyền lợi đại lý / liên hệ) ── */
.data-card, .benefit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 14px 0; }
.data-card-item, .benefit-item { padding: 16px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--border); }
.dc-icon, .bi-icon, .contact-card .ico { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 10px; border-radius: 11px; background: var(--accent-bg); color: var(--accent); }
.dc-icon .pol-ico, .bi-icon .pol-ico, .contact-card .ico .pol-ico { width: 19px; height: 19px; }
.dc-title, .bi-title { margin-bottom: 4px; font-size: 14px; font-weight: 700; color: var(--ink); }
.dc-desc, .bi-desc { font-size: 13px; line-height: 1.55; color: var(--soft); }
.contact-card { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; padding: 18px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); }
.contact-card .ico { margin-bottom: 0; }
.contact-card h3 { margin-bottom: 4px; font-size: 15px; font-weight: 700; color: var(--ink); }
.contact-card p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ── Form liên hệ (en/contact.php → php/support_submit.php) ── */
.sup-form { display: grid; gap: 14px; }
.sup-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; align-items: start; }
.sup-field { display: grid; gap: 6px; }
.sup-field label { font-size: 13px; font-weight: 700; color: var(--ink); }
.sup-field input, .sup-field select, .sup-field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--card-2); color: var(--ink); font: inherit; font-size: 14px; }
.sup-field textarea { min-height: 150px; resize: vertical; }
.sup-field input:focus, .sup-field select:focus, .sup-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91, 63, 214, .16); }
.sup-field small { font-size: 12px; color: var(--soft); }
.sup-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sup-submit { justify-self: start; padding: 12px 26px; border: 0; border-radius: 11px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.sup-submit:hover { filter: brightness(1.06); }

/* ── Chân ── */
.policy-footer { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); text-align: center; font-size: 13px; color: var(--soft); }
.policy-footer p { margin: 0; }
.policy-footer p + p { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.policy-footer a { margin: 0; color: var(--soft); font-weight: 600; }
.policy-footer a:hover { color: var(--accent); }

@media (max-width: 1023px) {
  .container.has-side { display: block; max-width: 880px; }
  .pol-side { display: none; }
  .container.has-side > .toc { display: block; }
}
@media (max-width: 760px) {
  .top-nav { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .top-nav .sep, .top-nav .nav-label { display: none; }
  .nav-tools { margin-left: auto; }
  .nav-btn.lang span { display: none; }
  .nav-btn.lang { padding: 0; }
  .policy-tabs { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
  .policy-tabs a { flex: 1 0 auto; justify-content: center; }
  .hero { padding: 44px 16px 36px; }
  .container { padding: 24px 16px 56px; }
  .policy-section { padding: 22px 18px; border-radius: 16px; }
  .section-title { font-size: 17px; }
  .toc ol { columns: 1; }
  .sup-row { grid-template-columns: 1fr; }
  .policy-table { display: block; overflow-x: auto; }
}