/* ==========================================================================
   TRANG CHỦ — phần chung (header, hiện dần khi cuộn)
   Giao diện các khối (hero, live, thực đơn, bảng vàng, footer) nằm ở clay.css
   ========================================================================== */

body {
  background-color: var(--bg-primary);
  background-image: none;          /* bỏ nền chấm bi của lớp cute */
  font-family: var(--font-display);
}

/* ---------- Header ---------- */
.site-header .brand-name { font-size: 1.15rem; letter-spacing: -.02em; }
.h-nav { gap: .25rem; }
.h-nav .nav-link { font-size: 1rem; white-space: nowrap; }
.h-nav-live { display: inline-flex; align-items: center; gap: .45rem; }
.h-live-dot { display: none; width: 9px; height: 9px; border-radius: 50%; background: #E11D48; animation: hBlink 1.2s steps(1) infinite; }
body.is-live .h-live-dot { display: inline-block; }
.h-nav-cta {
  min-height: 44px; padding: 0 1.1rem; border-radius: 12px;
  background: var(--mint); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; white-space: nowrap;
  transition: transform .12s;
}
.h-nav-cta:hover { transform: translateY(-2px); }

@media (max-width: 991px) {
  .site-header .brand-name { display: none; }   /* máy tính bảng: chỉ giữ logo dê cho header khỏi chật */
}
@media (max-width: 767px) {
  .h-nav-cta { min-height: 40px; padding: 0 .85rem; font-size: .92rem; }
}

/* ---------- Hiện dần khi cuộn tới (chỉ ẩn khi có JS; không JS vẫn thấy đủ nội dung) ---------- */
.js-reveal .h-rv { opacity: 0; transform: translateY(28px); }
.js-reveal .h-rv.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, 1, .3, 1);
  transition-delay: var(--rv-delay, 0s);
}

@keyframes hBlink { 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .h-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .h-live-dot { animation: none !important; }
}