/* =====================================================================
   Chankhoa.Pro — Base layer (elements + typography + helpers)
   Dùng sau tokens.css. Không hardcode màu — chỉ dùng var(--token).
   ===================================================================== */

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

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  color:var(--body);
  background-color:var(--bg);
  background-image:
    radial-gradient(52% 42% at 10% -5%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 58%),
    radial-gradient(40% 36% at 92% 0%, color-mix(in srgb, var(--violet) 8%, transparent), transparent 55%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background-color var(--t), color var(--t);
}

h1,h2,h3,h4,h5,h6 {
  margin:0;
  color:var(--heading);
  font-weight:800;
  line-height:var(--lh-snug);
  letter-spacing:var(--tracking-tight);
}

p { margin:0; }

a { color:var(--primary); text-decoration:none; transition:color var(--t-fast); }
a:hover { color:var(--primary-hover); }

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

ul,ol { margin:0; padding:0; }

strong,b { color:var(--heading); font-weight:700; }

hr { border:0; border-top:1px solid var(--border); margin:var(--sp-6) 0; }

:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

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

/* ---- Layout helpers ---- */
.ck-container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-5); }
.ck-narrow { max-width:820px; }

/* ---- Text utilities ---- */
.ck-gradient-text {
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.ck-muted { color:var(--muted); }
.ck-body  { color:var(--body); }
.ck-center { text-align:center; }

/* ---- Reveal on scroll (kích hoạt bằng JS thêm .is-in) ---- */
.ck-reveal { opacity:0; transform:translateY(18px); transition:opacity var(--t-slow), transform var(--t-slow); }
.ck-reveal.is-in { opacity:1; transform:none; }

/* ---- A11y ---- */
.ck-visually-hidden {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .ck-reveal { opacity:1; transform:none; transition:none; }
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---- Page shells (auth, admin lists, dashboard) ---- */
.page-surface {
  background: var(--bg);
}
/* Auth card nằm trong navbar/footer — không chiếm full viewport */
.ck-main > section.page-surface {
  min-height: auto;
}
@media (max-width: 991px) {
  .login-section,
  .ck-main > section.page-surface {
    min-height: auto !important;
  }
  .ck-main > section.page-surface {
    padding-top: var(--sp-4) !important;
    padding-bottom: var(--sp-4) !important;
  }
  .login-section {
    padding-bottom: 0 !important;
  }
}