/* antiai.vn — template "Asme": nền đen, Instrument Serif, .liquid-glass (prompt gốc).
   Instrument Serif không có dấu tiếng Việt → tiêu đề tiếng Việt dùng .serif-vi (Noto Serif Display). */
html { scroll-behavior: smooth; background: #000; }
body { background: #000; color: #fff; -webkit-font-smoothing: antialiased; }
.serif { font-family: 'Instrument Serif', serif; font-weight: 400; }
.anti-bold { font-weight: 400; -webkit-text-stroke: 0.032em currentColor; letter-spacing: 0.01em; paint-order: stroke fill; } /* Instrument Serif chỉ có 1 độ đậm → làm đậm bằng viền chữ */
.serif-vi { font-family: 'Noto Serif Display', 'Instrument Serif', serif; font-weight: 300; letter-spacing: -0.015em; text-wrap: balance; font-feature-settings: 'kern', 'liga'; }
.serif-vi em { font-weight: 300; }
.serif-vi .anti-bold { font-weight: 400; -webkit-text-stroke: 0.018em currentColor; letter-spacing: 0; }
.display-vi { text-wrap: pretty; }

@layer components {
  .liquid-glass {
    background: rgba(255, 255, 255, 0.01);
    background-blend-mode: luminosity;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
  }
  .liquid-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.4px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.15) 20%,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0.15) 80%,
      rgba(255, 255, 255, 0.45) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
}

/* Thay framer-motion: useInView(once, margin -100px) + initial → animate */
[data-reveal] {
  opacity: 0;
  transform: translate(var(--rx, 0px), var(--ry, 0px));
  transition: opacity var(--rd, .8s) cubic-bezier(0, 0, .58, 1) var(--rdelay, 0s),
              transform var(--rd, .8s) cubic-bezier(0, 0, .58, 1) var(--rdelay, 0s);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }

/* whileHover scale 1.05 / whileTap 0.95 */
.tap-scale { transition: transform .2s cubic-bezier(.2, .7, .2, 1); }
.tap-scale:hover { transform: scale(1.05); }
.tap-scale:active { transform: scale(.95); }

/* Thanh trượt đăng ký email (nút tròn bên trái, kéo sang phải để gửi) */
.slide-knob { cursor: grab; transition: transform .35s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.slide-knob:active { cursor: grabbing; }
.slide-knob:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.slide-fill { width: 0; transition: width .35s cubic-bezier(.2, .7, .2, 1); }
.slide-label { transition: opacity .2s; }
.slide-track.dragging .slide-knob, .slide-track.dragging .slide-fill { transition: none; }
.slide-track.sending .slide-knob { animation: slide-pulse 1s ease-in-out infinite; }
.slide-track.done .slide-fill { background: rgba(255, 255, 255, .3); }
@keyframes slide-pulse { 50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, .15); } }

/* Nội dung bài viết hi AI */
.prose-ai { color: rgba(255, 255, 255, .72); font-size: 1.0625rem; line-height: 1.85; }
.prose-ai > * + * { margin-top: 1.15em; }
.prose-ai h2 { margin-top: 2.2em; font-family: 'Noto Serif Display', serif; font-size: 2rem; line-height: 1.2; color: #fff; font-weight: 400; letter-spacing: -0.01em; }
.prose-ai h3 { margin-top: 1.8em; font-size: 1.2rem; color: #fff; }
.prose-ai strong { color: #fff; font-weight: 600; }
.prose-ai em { font-family: 'Noto Serif Display', serif; color: rgba(255, 255, 255, .85); }
.prose-ai ul, .prose-ai ol { padding-left: 1.3em; }
.prose-ai ul { list-style: disc; } .prose-ai ol { list-style: decimal; }
.prose-ai li + li { margin-top: .45em; }
.prose-ai li::marker { color: rgba(255, 255, 255, .35); }
.prose-ai code { font-size: .9em; background: rgba(255, 255, 255, .08); padding: .1em .4em; border-radius: .4rem; }
.prose-ai pre { background: rgba(255, 255, 255, .04); border-radius: 1rem; padding: 1.1rem 1.25rem; overflow-x: auto; font-size: .875rem; line-height: 1.7; }
.prose-ai pre code { background: none; padding: 0; }
.prose-ai blockquote { border-left: 1px solid rgba(255, 255, 255, .25); padding-left: 1.1rem; font-family: 'Noto Serif Display', serif; font-style: italic; font-size: 1.25rem; color: rgba(255, 255, 255, .85); }
.prose-ai a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .tap-scale, .tap-scale:hover, .tap-scale:active { transform: none; }
}