:root {
    --ground:      #F4F5FA;
    --surface:     #FFFFFF;
    --surface-alt: #ECEDF6;
    --ink:         #1E2230;
    --ink-soft:    #4A5166;
    --muted:       #6E7690;
    --line:        #DCDFEC;
    --line-soft:   #E7E9F3;
    --violet:      #6D3FE0;
    --violet-soft: #F0EAFE;
    --magenta:     #C4468F;
    --amber:       #B85F2E;
    --amber-soft:  #FBEDE4;
    --shadow:      0 1px 2px rgba(30,34,48,.05), 0 8px 24px -12px rgba(30,34,48,.14);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground:      #0F1119;
      --surface:     #171A26;
      --surface-alt: #1F2331;
      --ink:         #ECEEF6;
      --ink-soft:    #BCC2D4;
      --muted:       #8A92AA;
      --line:        #2A2F40;
      --line-soft:   #232735;
      --violet:      #B49BFF;
      --violet-soft: #221D3B;
      --magenta:     #F09BCB;
      --amber:       #E8A177;
      --amber-soft:  #2C2119;
      --shadow:      0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
    }
  }

  :root[data-theme="dark"] {
    --ground:      #0F1119;
    --surface:     #171A26;
    --surface-alt: #1F2331;
    --ink:         #ECEEF6;
    --ink-soft:    #BCC2D4;
    --muted:       #8A92AA;
    --line:        #2A2F40;
    --line-soft:   #232735;
    --violet:      #B49BFF;
    --violet-soft: #221D3B;
    --magenta:     #F09BCB;
    --amber:       #E8A177;
    --amber-soft:  #2C2119;
    --shadow:      0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }

  * { box-sizing: border-box; }

  body {
    background: var(--ground);
    color: var(--ink);
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  .wrap {
    max-width: 47rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 5rem;
  }

  /* ---------- masthead ---------- */

  .masthead {
    display: flex;
    gap: 1.15rem;
    align-items: center;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--line);
  }

  .mark {
    flex: 0 0 auto;
    width: 60px; height: 60px;
    border-radius: 15px;
    background: linear-gradient(150deg, #232A47 0%, #131829 100%);
    display: grid;
    place-items: center;
    box-shadow: var(--shadow);
  }

  .masthead h1 {
    font-family: Outfit, "IBM Plex Sans", sans-serif;
    font-weight: 700;
    font-size: 1.65rem;
    line-height: 1.15;
    letter-spacing: -.015em;
    margin: 0 0 .3rem;
    text-wrap: balance;
  }

  .masthead p {
    margin: 0;
    color: var(--muted);
    font-size: .93rem;
  }

  .meta {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .78rem;
    color: var(--muted);
    letter-spacing: .01em;
  }

  /* ---------- language jump ---------- */

  .langbar {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    margin: 1.25rem 0 0;
    font-size: .84rem;
    color: var(--muted);
  }

  .langbar a {
    color: var(--violet);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
  }

  .langbar a:hover { border-bottom-color: currentColor; }

  /* ---------- sections ---------- */

  section { margin-top: 3.25rem; }

  .eyebrow {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--muted);
    margin: 0 0 .55rem;
  }

  h2 {
    font-family: Outfit, sans-serif;
    font-weight: 600;
    font-size: 1.32rem;
    letter-spacing: -.01em;
    margin: 0 0 1.15rem;
    text-wrap: balance;
  }

  h3 {
    font-family: Outfit, sans-serif;
    font-weight: 600;
    font-size: 1.02rem;
    margin: 0 0 .35rem;
    text-wrap: balance;
  }

  p { margin: 0 0 1rem; color: var(--ink-soft); }
  p:last-child { margin-bottom: 0; }

  a { color: var(--violet); }

  /* ---------- contact ---------- */

  .contact {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.5rem 1.6rem;
    box-shadow: var(--shadow);
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
    align-items: flex-start;
  }

  .contact > div { flex: 1 1 14rem; }

  .contact .mail {
    font-family: Outfit, sans-serif;
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: -.01em;
    word-break: break-word;
  }

  .contact .note {
    font-size: .88rem;
    color: var(--muted);
    margin: .3rem 0 0;
  }

  /* ---------- task grid ---------- */

  .tasks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: 1.4rem 2rem;
  }

  .task p {
    margin: 0;
    font-size: .93rem;
    color: var(--ink-soft);
  }

  .path {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .82rem;
    color: var(--amber);
    background: var(--amber-soft);
    padding: .08em .4em;
    border-radius: 4px;
    white-space: nowrap;
  }

  /* ---------- faq ---------- */

  .faq { border-top: 1px solid var(--line-soft); }

  .faq .qa {
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .faq .qa p { margin: 0; font-size: .95rem; }

  /* ---------- feelings strip (app vocabulary) ---------- */

  .feelings {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: .85rem 0 0;
  }

  .chip {
    font-size: .82rem;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .18rem .7rem;
    background: var(--surface);
  }

  /* ---------- callout ---------- */

  .callout {
    background: var(--violet-soft);
    border-left: 2px solid var(--violet);
    border-radius: 0 10px 10px 0;
    padding: 1rem 1.2rem;
    margin: 1.5rem 0 0;
  }

  .callout p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
  .callout strong { color: var(--ink); }

  /* ---------- footer ---------- */

  footer {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .86rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.5rem;
    justify-content: space-between;
  }

  .divider-rule {
    margin-top: 4.5rem;
    border: 0;
    border-top: 1px solid var(--line);
  }

  a:focus-visible, .langbar a:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 3px;
    border-radius: 3px;
  }

  html { color-scheme: light dark; }
  body { margin: 0; }
  img { max-width: 100%; }

  /* trang chính sách */
  .policy h2 { margin-top: 2.4rem; }
  .policy h2:first-of-type { margin-top: 0; }
  .policy ul { padding-left: 1.2rem; margin: 0 0 1rem; color: var(--ink-soft); }
  .policy li { margin-bottom: .45rem; }
  .policy strong { color: var(--ink); }
  .dates {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .78rem; color: var(--muted); letter-spacing: .01em;
    margin: 0 0 2rem;
  }