@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html, body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #F6F3EB; /* Màu giấy dó / nền Việt Nam */
  color: #3D2B1F; /* Màu chữ nâu gỗ */
}

/* Vietnamese Folk Patterns */
.bg-trong-dong {
  background-color: #F6F3EB;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.08' stroke='%238B2C21' fill='none'%3E%3Ccircle cx='60' cy='60' r='55' stroke-width='1.5'/%3E%3Ccircle cx='60' cy='60' r='45' stroke-width='0.5' stroke-dasharray='4,4'/%3E%3Ccircle cx='60' cy='60' r='30' stroke-width='1'/%3E%3Ccircle cx='60' cy='60' r='10' stroke-width='1' fill='%238B2C21' fill-opacity='0.05'/%3E%3Cpolygon points='60,35 65,50 80,50 68,60 72,75 60,65 48,75 52,60 40,50 55,50' fill='%23C49140' stroke='none' opacity='0.4'/%3E%3Cpath d='M 10 60 Q 30 10 60 10' stroke-width='1.5' opacity='0.5'/%3E%3Cpath d='M 110 60 Q 90 110 60 110' stroke-width='1.5' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}

.bg-trong-dong-chat {
  background-color: #FAF8F2;
  background-image: url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.04' stroke='%23C49140' fill='none'%3E%3Ccircle cx='80' cy='80' r='70' stroke-width='1'/%3E%3Ccircle cx='80' cy='80' r='55' stroke-width='0.5' stroke-dasharray='3,3'/%3E%3Cpolygon points='80,35 90,70 125,80 90,90 80,125 70,90 35,80 70,70' fill='%23C49140' opacity='0.2' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.text-gradient-gold {
  background: linear-gradient(135deg, #C49140, #A67530);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gradient-red {
  background: linear-gradient(135deg, #8B2C21, #A13A2E);
}


/* Safe area padding utilities for iOS/Mobile PWA */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mb-safe {
    margin-bottom: env(safe-area-inset-bottom);
  }
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar, .scrollbar-hide::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar, .scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

@keyframes slide-down {
  from {
    transform: translate(-50%, -20px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}
.animate-slide-down {
  animation: slide-down 0.3s ease-out forwards;
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.animate-slide-up {
  animation: slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- PREMIUM INTERACTIVE & LUTE DESIGN SYSTEM ANIMATIONS --- */

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(139, 44, 33, 0.2), 0 0 5px rgba(139, 44, 33, 0.1);
    border-color: rgba(139, 44, 33, 0.5);
  }
  50% {
    box-shadow: 0 0 25px rgba(139, 44, 33, 0.5), 0 0 10px rgba(139, 44, 33, 0.2);
    border-color: rgba(139, 44, 33, 0.8);
  }
}
.animate-pulse-glow {
  animation: pulse-glow 2s infinite ease-in-out;
}

@keyframes float-circle-1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(15px, -20px) scale(1.15);
  }
}
@keyframes float-circle-2 {
  0%, 100% {
    transform: translate(0, 0) scale(1.1);
  }
  50% {
    transform: translate(-20px, 15px) scale(0.9);
  }
}
.animate-float-1 {
  animation: float-circle-1 8s infinite ease-in-out;
}
.animate-float-2 {
  animation: float-circle-2 10s infinite ease-in-out;
}

@keyframes shake-warning {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
  20%, 40%, 60%, 80% { transform: translateX(6px); }
}
.animate-shake-warning {
  animation: shake-warning 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 1; }
}
.animate-blink-cursor {
  animation: blink-cursor 0.8s infinite;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spin-slow 25s linear infinite;
}

@keyframes gradient-move {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animate-gradient-text {
  background: linear-gradient(-45deg, #8B2C21, #C49140, #FF6B4A, #D7A75B);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-move 8s ease infinite;
}

/* Premium glassmorphism utility classes */
.glass-panel-light {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-panel-dark {
  background: rgba(26, 18, 13, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.08); }
  28% { transform: scale(1); }
  42% { transform: scale(1.08); }
  70% { transform: scale(1); }
}

.animate-heartbeat {
  animation: heartbeat 0.8s infinite ease-in-out;
  display: inline-block;
}