/* ==========================================================================
   base.css — token, reset, kiểu chữ, nút.
   Giá trị dưới đây chỉ là mặc định dự phòng. Giá trị thật đến từ
   data.theme trong JSON, core.js ghi đè vào <style id="wl-theme">.
   ========================================================================== */

:root {
  /* Màu */
  --c-primary: #3346f0;
  /* màu thương hiệu: nút, liên kết, điểm nhấn */
  --c-on-primary: #ffffff;
  /* chữ đặt trên nền primary */
  --c-accent: #ffb224;
  /* màu phụ: dấu nhấn nhỏ, kết quả dự án */
  --c-bg: #f6f7fb;
  /* nền trang */
  --c-surface: #ffffff;
  /* nền khối nổi: thẻ, form */
  --c-text: #12142a;
  /* chữ chính */
  --c-muted: #5a5f7a;
  /* chữ phụ */
  --c-border: #e2e4ee;
  /* đường viền */

  /* Màu suy ra, tự đổi theo thương hiệu */
  --c-primary-soft: color-mix(in srgb, var(--c-primary) 12%, var(--c-bg));
  --c-surface-2: color-mix(in srgb, var(--c-text) 4%, var(--c-bg));
  /* Bản sao cố định của màu gốc, để tham số tone="…" đảo màu mà không tự tham chiếu vòng */
  --c-brand: var(--c-primary);
  --c-brand-on: var(--c-on-primary);
  --c-ink: var(--c-text);
  --c-paper: var(--c-bg);

  /* Font */
  --f-heading: system-ui, sans-serif;
  --f-body: system-ui, sans-serif;

  /* Bo góc: nhỏ (nút, ô nhập), vừa (thẻ), lớn (ảnh lớn) */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;

  /* Khoảng cách và bố cục */
  --gutter: 16px;
  --max: 1200px;
  --sec-y: clamp(40px, 6vw, 70px);
  --header-h: 72px;

  /* Thang chữ (tỉ lệ ~1.25) */
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --t-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --t-3xl: clamp(2.5rem, 1.5rem + 4.4vw, 5.25rem);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --c-primary: #8792ff;
  --c-on-primary: #0e1022;
  --c-bg: #0e1022;
  --c-surface: #171a33;
  --c-text: #eef0fa;
  --c-muted: #a3a8c7;
  --c-border: #2a2e4d;
  color-scheme: dark;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --header-h: 84px;
  }
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s, color .3s;
  padding-top: var(--header-h);
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  background: var(--c-surface-2);
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3 {
  font-size: var(--t-2xl);
  font-family: var(--f-heading);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
  margin: 0 0.5rem 1rem 0.5rem;
}

h3 {
  font-size: var(--t-xl);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0.5rem 1rem 0rem;
}

:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--c-primary);
  color: var(--c-on-primary);
}

/* Ẩn trang tới khi theme đã áp, tránh nháy màu mặc định */
html:not(.wl-ready) body {
  opacity: 0;
}

html.wl-ready body {
  opacity: 1;
  transition: opacity .25s;
}

/* Thẻ thành phần là khối (core.js gắn class .wl-host cho mọi thẻ <wl-*>) */
.wl-host {
  display: block;
}

/* Chuyển trang mượt giữa các file HTML (trình duyệt hỗ trợ View Transitions) */
@view-transition {
  navigation: auto;
}

/* ---------- Bố cục ---------- */
.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(820px + var(--gutter) * 2);
}

.sec {
  padding-block: var(--sec-y);
}

.sec--tight-top {
  padding-top: 24px;
}

.sec--surface {
  background: var(--c-surface-2);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  border-radius: var(--r-sm);
}

.skip:focus {
  top: 16px;
}

.plain-list {
  display: grid;
  gap: 10px;
}

.no-scroll {
  overflow: hidden;
}

/* ---------- Tham số bố cục dùng chung cho mọi thẻ <wl-*> ----------
   <wl-faq align="center" width="narrow" tone="surface" space="tight">
   align : start | center | end          căn tiêu đề khối và nội dung chữ
   width : narrow | wide | full          độ rộng khung .container (mặc định 1200px)
   tone  : none | surface | primary | inverse   nền + bộ màu của khối
   space : none | tight | loose          khoảng cách trên dưới của khối
   Chỉ tác động tới <section> gốc mà thành phần render ra. */
.wl-host[width="narrow"] .container {
  --max: 820px;
}

.wl-host[width="wide"] .container {
  --max: 1440px;
}

.wl-host[width="full"] .container {
  --max: 100vw;
}

.wl-host[space="none"]>section {
  padding-block: 0;
}

.wl-host[space="tight"]>section {
  padding-block: calc(var(--sec-y) * .5);
}

.wl-host[space="loose"]>section {
  padding-block: calc(var(--sec-y) * 1.4);
}

.wl-host[tone]>section {
  background: var(--c-bg);
  color: var(--c-text);
}

.wl-host[tone="none"]>section {
  background: transparent;
}

.wl-host[tone="surface"]>section {
  background: var(--c-surface-2);
}

.wl-host[tone="primary"]>section {
  --c-bg: var(--c-brand);
  --c-text: var(--c-brand-on);
  --c-primary: var(--c-brand-on);
  --c-on-primary: var(--c-brand);
  --c-muted: color-mix(in srgb, var(--c-brand-on) 78%, var(--c-brand));
  --c-border: color-mix(in srgb, var(--c-brand-on) 24%, var(--c-brand));
  --c-surface: color-mix(in srgb, var(--c-brand-on) 10%, var(--c-brand));
  --c-surface-2: color-mix(in srgb, var(--c-brand-on) 6%, var(--c-brand));
  --c-primary-soft: color-mix(in srgb, var(--c-brand-on) 16%, var(--c-brand));
}

.wl-host[tone="inverse"]>section {
  --c-bg: var(--c-ink);
  --c-text: var(--c-paper);
  --c-muted: color-mix(in srgb, var(--c-paper) 70%, var(--c-ink));
  --c-border: color-mix(in srgb, var(--c-paper) 18%, var(--c-ink));
  --c-surface: color-mix(in srgb, var(--c-paper) 8%, var(--c-ink));
  --c-surface-2: color-mix(in srgb, var(--c-paper) 5%, var(--c-ink));
  --c-primary-soft: color-mix(in srgb, var(--c-primary) 22%, var(--c-ink));
}

.wl-host[align="center"] {
  text-align: center;
}

.wl-host[align="end"] {
  text-align: end;
}

.wl-host[align="center"] :is(.sec-head__title, .sec-head__text, .hero__title, .hero__lead, .lp-hero__title, .lp-hero__lead, .page-head__title, .page-head__lead, .cta-band h2, .cta-band p) {
  margin-inline: auto;
}

.wl-host[align="end"] :is(.sec-head__title, .sec-head__text) {
  margin-inline-start: auto;
}

.wl-host[align="center"] :is(.hero__actions, .lp-hero__actions, .lp-hero__badge, .crumbs, .chips, .filters, .testi__people) {
  justify-content: center;
}

.wl-host[align="end"] :is(.hero__actions, .lp-hero__actions, .crumbs) {
  justify-content: flex-end;
}

/* thẻ, form, bảng bên trong vẫn căn trái cho dễ đọc */
.wl-host[align] :is(.form, .faq__item, .review, .plan, .pcard, .compare, .tl, .checklist, .facts) {
  text-align: start;
}

/* ---------- Nút & liên kết ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  border: 2px solid var(--c-primary);
  border-radius: var(--r-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: transform .15s, background-color .2s, color .2s;
}

.btn:hover {
  background: color-mix(in srgb, var(--c-primary) 86%, var(--c-text));
}

.btn:active {
  transform: translateY(1px);
}

.btn--sm {
  min-height: 42px;
  padding: 8px 16px;
  font-size: var(--t-sm);
}

.btn--lg {
  min-height: 56px;
  padding: 14px 28px;
  font-size: 1.0625rem;
}

.btn--block {
  width: 100%;
}

.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-border);
}

.btn--ghost:hover {
  background: transparent;
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.btn--inverse {
  background: var(--c-on-primary);
  color: var(--c-primary);
  border-color: var(--c-on-primary);
}

.btn--inverse:hover {
  background: transparent;
  color: var(--c-on-primary);
}

.link-under {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: color-mix(in srgb, var(--c-primary) 45%, transparent);
  transition: text-decoration-color .2s, color .2s;
}

.link-under:hover {
  color: var(--c-primary);
  text-decoration-color: var(--c-primary);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}

.icon-btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.ico {
  width: 20px;
  height: 20px;
  flex: none;
  stroke-width: 1.75;
}

:root[data-theme="dark"] .only-light,
:root:not([data-theme="dark"]) .only-dark {
  display: none;
}

/* Báo lỗi khi không đọc được JSON */
.wl-fatal {
  max-width: 640px;
  margin: 64px auto;
  padding: 24px;
  border: 2px solid #c0392b;
  border-radius: 12px;
  background: #fff;
  color: #222;
  font-family: system-ui, sans-serif;
}

.wl-fatal p {
  margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --- 1. BACKGROUND COLORS (.bg-*) --- */
.bg-primary {
  background-color: var(--c-primary);
}

.bg-on-primary {
  background-color: var(--c-on-primary);
}

.bg-accent {
  background-color: var(--c-accent);
}

.bg-page {
  background-color: var(--c-bg);
}

.bg-surface {
  background-color: var(--c-surface);
}

.bg-surface-2 {
  background-color: var(--c-surface-2);
}

.bg-primary-soft {
  background-color: var(--c-primary-soft);
}

.bg-paper {
  background-color: var(--c-paper);
}

.bg-brand {
  background-color: var(--c-brand);
}

.bg-ink {
  background-color: var(--c-ink);
}

/* --- 2. TEXT COLORS (.text-*) --- */
.text-primary {
  color: var(--c-primary);
}

.text-on-primary {
  color: var(--c-on-primary);
}

.text-accent {
  color: var(--c-accent);
}

.text-main {
  color: var(--c-text);
}

.text-muted {
  color: var(--c-muted);
}

.text-ink {
  color: var(--c-ink);
}

.text-brand {
  color: var(--c-brand);
}

/* --- 3. BORDER COLORS (.border-*) --- */
.border-default {
  border-color: var(--c-border);
}

.border-primary {
  border-color: var(--c-primary);
}

.border-accent {
  border-color: var(--c-accent);
}

.border-brand {
  border-color: var(--c-brand);
}

/* --- 4. BORDER RADIUS (.rounded-*) --- */
.rounded-sm {
  border-radius: var(--r-sm);
}

.rounded-md {
  border-radius: var(--r-md);
}

.rounded-lg {
  border-radius: var(--r-lg);
}

p {
  font-size: var(--t-lg);
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--c-muted);
}

.title-with-icon {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--r-sm);
    background-color: var(--c-primary-soft);
    color: var(--c-primary);
    flex-shrink: 0;
    margin-right: 0.5rem;
}