/* Trang chủ MCN — CSS ngoài Tailwind, giữ tối thiểu */
html { scroll-padding-top: 5rem; }

/* Hero: nền tối ngả violet + blob gradient trôi + lưới chấm mờ (style creator-flashy) */
.hero-bg { background: linear-gradient(135deg, #020617 0%, #1e1b4b 52%, #2e1065 100%); }
.hero-glow { position: absolute; border-radius: 9999px; pointer-events: none; filter: blur(70px); }
.hero-grid-pattern {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(148, 163, 184, .16) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 78%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 78%);
}

/* Navbar: trong suốt trên hero, đặc khi cuộn (site.js toggle .scrolled) */
#site-nav { transition: background-color .3s ease, box-shadow .3s ease; }
#site-nav.scrolled {
  background: rgba(2, 6, 23, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(168, 85, 247, .22);
}

/* Kính mờ (glassmorphism) cho chip/nút phụ trên nền tối */
.glass {
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .14);
}

/* Nút CTA gradient phát sáng */
.btn-glow { box-shadow: 0 8px 32px rgba(217, 70, 239, .35), 0 2px 12px rgba(124, 58, 237, .45); }
.card-glow { transition: transform .3s ease, box-shadow .3s ease; }
.card-glow:hover { transform: translateY(-6px); box-shadow: 0 18px 50px -12px rgba(124, 58, 237, .28); }

/* Animation: blob trôi, nổi bồng bềnh, gradient chạy */
@keyframes blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(34px, -24px) scale(1.08); }
  66% { transform: translate(-22px, 18px) scale(.94); }
}
@keyframes float-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes float-bob2 {
  0%, 100% { transform: translateY(-6px); }
  50% { transform: translateY(8px); }
}
@keyframes gradient-x {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hero-blob { animation: blob 14s ease-in-out infinite; }
.animate-float { animation: float-bob 5s ease-in-out infinite; }
.animate-float-slow { animation: float-bob2 7.5s ease-in-out infinite; }
.animate-gradient { background-size: 200% 200%; animation: gradient-x 6s ease infinite; }

/* Đồ hoạ tăng trưởng: đường line vẽ dần (draw-in) + chấm cuối nhịp đập */
.gl-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawline 2.4s ease-out .4s forwards; }
@keyframes drawline { to { stroke-dashoffset: 0; } }
.gl-dot-pulse { transform-box: fill-box; transform-origin: center; animation: dotpulse 2.2s ease-out 3s infinite; }
@keyframes dotpulse {
  0% { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(3); opacity: 0; }
}

/* Hero deck: 4 card xếp bài, bấm card nào card đó nhảy lên trước (site.js gán .slot-N) */
.deck-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), filter .55s ease;
  will-change: transform;
}
.deck-card:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; }
/* Xoè rộng để card sau lộ hẳn dải header bấm được (mobile offset nhỏ, sm+ rộng hơn) */
.slot-0 { transform: rotate(-1deg); z-index: 30; cursor: default; }
.slot-1 { transform: translate(16px, -40px) rotate(3deg) scale(.96); z-index: 20; cursor: pointer; filter: brightness(.88); }
.slot-2 { transform: translate(-14px, 38px) rotate(-3.5deg) scale(.94); z-index: 12; cursor: pointer; filter: brightness(.78); }
.slot-3 { transform: translate(-6px, -64px) rotate(-1.5deg) scale(.92); z-index: 6; cursor: pointer; filter: brightness(.68); }
.slot-1:hover, .slot-2:hover, .slot-3:hover { filter: brightness(1.02); }
@media (min-width: 640px) {
  .slot-1 { transform: translate(48px, -48px) rotate(4deg) scale(.96); }
  .slot-2 { transform: translate(-44px, 44px) rotate(-4.5deg) scale(.94); }
  .slot-3 { transform: translate(-14px, -84px) rotate(-2deg) scale(.92); }
}

/* Pill điều hướng deck */
.deck-tab {
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #cbd5e1;
  border-radius: 9999px;
  padding: .4rem .9rem;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .25s, background .25s, border-color .25s;
}
.deck-tab:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.deck-tab.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(90deg, #d946ef, #8b5cf6);
  box-shadow: 0 4px 18px rgba(217, 70, 239, .35);
}

/* Tool showcase: carousel 2 tab (site.js #tools-carousel — tự slide + click tab) */
.tool-track { transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
.tool-tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #cbd5e1;
  border-radius: 9999px;
  padding: .55rem 1.15rem;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .25s, background .25s, border-color .25s, box-shadow .25s;
}
.tool-tab:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.tool-tab.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(90deg, #d946ef, #8b5cf6);
  box-shadow: 0 4px 18px rgba(217, 70, 239, .35);
}
.tool-tab:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; }

/* Dữ liệu giữ chỗ chờ số thật — XOÁ class này khi điền xong [CẦN ĐIỀN] */
.placeholder-data { border: 1px dashed rgba(217, 119, 6, .7); border-radius: .5rem; }

/* Fade-in khi cuộn tới (site.js + IntersectionObserver) — chỉ ẩn khi có html.js
   (site.js gán đầu file): không JS / JS chết → nội dung vẫn hiển thị đầy đủ */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Eligibility quiz: nút chọn đáp án (site.js #elig) — nhúng trong câu trả lời FAQ item 1 */
.elig-opt {
  width: 100%;
  text-align: left;
  border: 1px solid #e2e8f0;
  border-radius: .85rem;
  background: #fff;
  padding: .85rem 1.25rem;
  font-size: .9rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, transform .1s;
}
.elig-opt:hover { border-color: #a78bfa; background: #f5f3ff; color: #6d28d9; }
.elig-opt:active { transform: scale(.99); }
.elig-opt:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }

/* FAQ accordion: ẩn marker mặc định + icon dấu + xoay 45° thành × khi mở */
#faq summary::-webkit-details-marker { display: none; }
.faq-icon { transition: transform .3s ease; }
details[open] summary .faq-icon { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-blob, .animate-float, .animate-float-slow, .animate-gradient { animation: none; }
  .gl-path { stroke-dashoffset: 0; animation: none; }
  .gl-dot-pulse { animation: none; opacity: 0; }
  .deck-card { transition: none; }
  .tool-track { transition: none; } /* không trượt mượt; site.js cũng tắt auto-slide */
  [data-elig-bar] { transition: none; }
  .faq-icon { transition: none; }
}