/**
 * Lớp V8: mỗi website ghi đè :root qua atseo-v8-tokens (màu/bán kính/bóng từ DB + seed).
 * Các class v8-skin-0..3 và v8-font-0..3 tạo bố cục/typography khác biệt rõ giữa các domain.
 */

html.atseo-v8,
body.render-v8 {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.render-v8 {
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom, 0);
  color: var(--text);
  background:
    radial-gradient(1000px 480px at 8% -12%, hsla(var(--v8-dna-hue, 220), 68%, 56%, var(--v8-orb-a, 0.09)), transparent 55%),
    radial-gradient(780px 400px at 100% 4%, hsla(calc(var(--v8-dna-hue, 220) + 32), 62%, 50%, var(--v8-orb-b, 0.06)), transparent 50%),
    linear-gradient(180deg, #fafcfe 0%, var(--bg) 40%, #f0f2f7 100%);
  background-attachment: fixed;
}

/* Nút CTA theo màu primary từng site */
body.render-v8 .btn-primary {
  box-shadow: var(--v8-btn-glow, 0 14px 24px rgba(20, 89, 221, 0.18));
}

/* Đọc bài: line-height từ token */
body.render-v8 .prose p,
body.render-v8 .prose li {
  line-height: var(--v8-prose-lh, 1.7);
}

/* --- Skin 0: cân bằng (mặc định, đã kế thừa trên) --- */
body.v8-skin-0 .site-header {
  border-top: 3px solid color-mix(in srgb, var(--primary) 32%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/* --- Skin 1: sắc cạnh, nhiều viền, hover nhẹ --- */
/* Bo nhỏ hơn, góc “công cụ / dashboard” */
body.v8-skin-1 {
  --radius: 12px;
  --radius-lg: 18px;
}

body.v8-skin-1 .hero-copy,
body.v8-skin-1 .hero-panel,
body.v8-skin-1 .card,
body.v8-skin-1 .prose,
body.v8-skin-1 .article-header {
  box-shadow: none;
  border-width: 1px;
  border-color: var(--line-strong);
  background-image: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--surface) 95%, var(--primary-soft)) 100%);
}

body.v8-skin-1 .card:hover,
body.v8-skin-1 .feature-card:hover {
  transform: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}

body.v8-skin-1 .site-header {
  border-top: 0;
  border-bottom: 2px solid var(--line);
}

/* --- Skin 2: bo mềm, bóng sâu, cảm giác “card” --- */
body.v8-skin-2 .hero-copy {
  border-radius: calc(var(--radius-lg) + 4px);
  box-shadow: var(--shadow-lg);
}

body.v8-skin-2 .card,
body.v8-skin-2 .feature-card,
body.v8-skin-2 .prose {
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--primary) 8%, var(--line));
  backdrop-filter: blur(2px);
}

body.v8-skin-2 .site-header {
  border-top: 4px solid var(--primary);
  background: color-mix(in srgb, var(--surface) 88%, var(--primary-soft) 12%);
}

/* --- Skin 3: rộng rãi, khoảng cách lớn (gần “editorial”) --- */
body.v8-skin-3 .wrap {
  max-width: min(1180px, var(--wrap));
}

body.v8-skin-3 .site-main {
  padding-top: 28px;
  padding-bottom: 120px;
}

body.v8-skin-3 .hero-section,
body.v8-skin-3 .section-block {
  padding: 40px 0;
}

body.v8-skin-3 .card,
body.v8-skin-3 .feature-card {
  border-radius: calc(var(--radius-lg) + 3px);
}

body.v8-skin-3 .breadcrumbs-row {
  background: transparent;
  border: none;
  padding-left: 0;
}

/* --- Font 0: stack mặc định từ style.css --- */

/* --- Font 1: tiêu đề / thương hiệu kiểu “báo / tạp chí” --- */
body.v8-font-1 h1,
body.v8-font-1 .page-hero h1,
body.v8-font-1 .article-header h1,
body.v8-font-1 .brand-name {
  font-family: Georgia, "Times New Roman", "Noto Serif", serif;
  letter-spacing: -0.03em;
  font-weight: 700;
}

body.v8-font-1 .section-head h2,
body.v8-font-1 .prose h2 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.02em;
}

/* --- Font 2: giao diện “UI sans” tách biệt --- */
body.v8-font-2 {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, system-ui, sans-serif;
}

body.v8-font-2 .nav-link,
body.v8-font-2 .btn {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* --- Font 3: tương phản serif/sans cho heading --- */
body.v8-font-3 h1,
body.v8-font-3 .article-header h1,
body.v8-font-3 .brand-name {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-weight: 800;
}

/* Chung: header, hero, card dùng màu từ token (đồng bộ domain) */
body.render-v8 .site-header {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.86) inset;
}

body.render-v8 .hero-copy {
  border-radius: calc(var(--radius) + 4px);
  background:
    radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--primary) 11%, transparent), transparent 42%),
    radial-gradient(circle at 6% 88%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  position: relative;
}

body.render-v8 .hero-copy::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--v8-hero-noise, 0.03);
  background-image: radial-gradient(rgba(12, 34, 74, .32) 0.4px, transparent 0.4px);
  background-size: 5px 5px;
}

body.render-v8 .hero-panel {
  border-color: color-mix(in srgb, var(--primary) 25%, var(--line));
}

body.render-v8 .breadcrumbs {
  padding: clamp(10px, 1.5vw, 16px) 0 8px;
}

body.render-v8 .breadcrumbs-row {
  padding: 10px 16px;
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  border: 1px solid var(--line);
  border-radius: 14px;
  max-width: var(--wrap);
  margin-inline: auto;
}

body.render-v8 .card:hover,
body.render-v8 .feature-card:hover {
  box-shadow: var(--shadow-lg);
}

body.render-v8 .btn:focus-visible,
body.render-v8 .nav-link:focus-visible,
body.render-v8 a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent);
  outline-offset: 2px;
}

body.render-v8 .chip,
body.render-v8 .pill-link {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-alt));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  color: var(--primary);
}

body.render-v8 .site-footer {
  border-top: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--bg)) 0%, var(--surface-soft) 100%);
}

@media (max-width: 720px) {
  body.render-v8 .hero-grid {
    gap: 20px;
  }
  body.render-v8 .nav-link {
    min-height: 44px;
  }
}

/* Trình duyệt cũ không hỗ trợ color-mix: vẫn dùng biến gốc */
@supports not (color: color-mix(in srgb, red, blue)) {
  body.v8-skin-0 .site-header {
    border-top: 3px solid hsla(var(--v8-dna-hue, 220), 70%, 48%, 0.32);
  }
  body.render-v8 .chip,
  body.render-v8 .pill-link {
    background: hsla(var(--v8-dna-hue, 220), 85%, 96%, 0.95);
    border: 1px solid hsla(var(--v8-dna-hue, 220), 50%, 88%, 0.7);
  }
}