/* ============================================================
   style.css – Toàn bộ custom CSS
   ============================================================ */

:root {
  --imperial-red: #8b1a1a;
  --silk-gold:    #d4af37;
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background-color: #f3ede3;
  color: #1a1a1a;
  margin: 0;
}

/* ── Font chữ Hán ───────────────────────────────────────── */
.font-han {
  font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Serif SC",serif;
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #fdfbf7; }
::-webkit-scrollbar-thumb { background: var(--imperial-red); border-radius: 10px; }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Texture giấy ───────────────────────────────────────── */
.paper-texture {
  background-image: url('https://www.transparenttextures.com/patterns/parchment.png');
}

/* ── Ô luyện viết chữ ───────────────────────────────────── */
.me-tu-cach {
  background-image:
    linear-gradient(to right, #eee 1px, transparent 1px),
    linear-gradient(to bottom, #eee 1px, transparent 1px),
    linear-gradient(45deg,  #f5f5f5 1px, transparent 1px),
    linear-gradient(-45deg, #f5f5f5 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: center;
}

/* ── Animations ─────────────────────────────────────────── */
@keyframes inkFlow {
  from { filter: blur(8px); opacity: 0; transform: scale(0.95); }
  to   { filter: blur(0);   opacity: 1; transform: scale(1);    }
}
.animate-ink { animation: inkFlow 0.9s cubic-bezier(0.22,1,0.36,1) forwards; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.animate-fadeIn { animation: fadeIn 0.5s ease forwards; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.animate-slideUp { animation: slideUp 0.3s ease forwards; }

@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin   { animation: spin 1s linear infinite; display: inline-block; }

@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
.animate-pulse  { animation: pulse 1.5s ease infinite; }

/* ── View switcher ──────────────────────────────────────── */
.view        { display: none; }
.view.active { display: block; }

/* ── Result card ────────────────────────────────────────── */
.result-card { animation: fadeIn 0.4s ease forwards; }

/* ── Modals ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* ── Nav active ─────────────────────────────────────────── */
.nav-btn.active   { background: #8b1a1a !important; color: white !important; }
.nav-btn:not(.active) { background: #fff5f5 !important; color: #801818 !important; }

/* ── Helpers ─────────────────────────────────────────────── */
.hidden { display: none !important; }