/* ============================================================
   KHI — LỚP ĐỒ HOẠ (theo KryUI graphics.md, dịch sang bảng màu KHI)
   KryUI dựng cho nền tối "Midnight Gold" (aurora vàng) — KHI nền kem sáng,
   nên đổi: aurora vàng -> khối sage rất nhạt; glow -> quầng ấm cam đất.
   Luật giữ nguyên: đồ hoạ là GIA VỊ, 1 điểm nhấn mỗi màn, hoa văn <=14%,
   luôn có fade-mask, không bao giờ lấn nội dung.
   ============================================================ */

/* 1 · GRAIN — chống dải màu, cho chất "phim" ấm. Phủ toàn trang, rất nhẹ. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .42; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
/* nội dung luôn nằm trên lớp grain */
/* ⚠ KHÔNG đưa .nav-wrap vào đây: position:relative sẽ ĐÈ position:sticky của style-v5
   (graphics.css nạp sau) — chính nó làm header không dính suốt từ 30/07 (Dang phát hiện 01/08). */
header, section, footer, .progress { position: relative; z-index: 2; }

/* 2 · HOA VĂN CHẤM có fade-mask — chỉ cho khối rỗng, không cho khối có ảnh */
.dots {
  position: relative;
}
.dots::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(var(--sage) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .13;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(80% 60% at 50% 40%, #000 20%, transparent 78%);
}
.dots > * { position: relative; z-index: 1; }

/* 3 · KHỐI MỜ (blob) — thay aurora, dùng sau khối mời tập thử */
.aura { position: relative; overflow: hidden; }
.aura::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: 520px; height: 520px; right: -140px; top: -180px; border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(126,148,111,.34), transparent 70%);
  animation: drift 18s ease-in-out infinite alternate;
}
.aura > * { position: relative; z-index: 1; }
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-40px,26px,0) scale(1.08); }
}
/* quầng ấm sau khối tối */
.aura.warm::after { background: radial-gradient(circle closest-side, rgba(172,98,55,.3), transparent 70%); }

/* 4 · ĐƯỜNG NGĂN có chấm giữa */
.rule { display: flex; align-items: center; gap: 16px; }
.rule::before, .rule::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.rule .dot3 { display: flex; gap: 6px; }
.rule .dot3 i { width: 4px; height: 4px; border-radius: 50%; background: var(--sage); display: block; }
.rule .dot3 i:nth-child(2) { background: var(--clay); }

/* 5 · ICON (KryUI icons.md — Lucide, nét 1.75, KHÔNG emoji) */
.ico { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none;
       stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico.fill { fill: currentColor; stroke: none; }
.ico-16 { width: 16px; height: 16px; }
.ico-20 { width: 20px; height: 20px; }
.btn .ico, .lnk .ico, .chip .ico { margin-right: -2px; }
.quote .stars { display: inline-flex; gap: 3px; color: var(--clay-text); }
.quote .stars .ico { width: 14px; height: 14px; }
/* tick trong danh sách mời tập thử */
.offer li::before { content: none; }
.offer li .ico-wrap {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--surface); color: var(--sage-deep);
}
.offer li .ico-wrap .ico { width: 13px; height: 13px; }
/* nút play trên khung video */
.video .play .ico { width: 24px; height: 24px; }
.video.empty .play .ico { color: var(--ink-faint); }

/* 6 · MINH HOẠ MONOLINE cho ô chờ nội dung (nét tự vẽ khi vào màn) */
.slot .art { width: 56px; height: 56px; margin-bottom: 4px; color: var(--sage); }
.slot .art svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
                 stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.anim .slot .art path, .anim .slot .art rect, .anim .slot .art circle, .anim .slot .art line {
  stroke-dasharray: var(--len, 220); stroke-dashoffset: var(--len, 220);
  transition: stroke-dashoffset 1.1s var(--ease);
}
.anim .slot.in .art path, .anim .slot.in .art rect, .anim .slot.in .art circle, .anim .slot.in .art line {
  stroke-dashoffset: 0;
}
.slot .art + b { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .aura::after { animation: none; }
  .anim .slot .art path, .anim .slot .art rect, .anim .slot .art circle, .anim .slot .art line { stroke-dashoffset: 0; }
}