/* Base - Tối ưu cho iPhone (notch) và Samsung (camera) */
html {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto !important; /* Đảm bảo html có thể scroll */
  /* Tràn viền hoàn toàn - không có padding */
  padding: 0;
  margin: 0;
  height: auto !important; /* Cho phép html mở rộng theo nội dung */
  min-height: 100%;
  /* Chặn copy văn bản */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Prevent scroll from affecting fixed elements */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
}

/* Force html to be scrollable - override any other styles */
html:not(.sheet-detail-open) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
}

body { 
  margin: 0; 
  padding: 0; 
  font-family: 'Be Vietnam Pro', sans-serif; 
  background-color: white; 
  overflow-x: hidden;
  overflow-y: auto !important; /* Đảm bảo body luôn có thể scroll */
  position: relative;
  /* Đảm bảo background tràn viền đến tất cả các cạnh */
  min-height: 100vh;
  min-height: -webkit-fill-available; /* iOS Safari */
  height: auto !important; /* Cho phép body mở rộng theo nội dung */
  /* Tràn viền: không có padding, margin để background đến các cạnh */
  /* Safe area sẽ được xử lý ở các container con */
  /* Chặn copy văn bản */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Chặn tap highlight trên mobile */
  -webkit-tap-highlight-color: transparent;
  /* Prevent scroll from affecting fixed elements */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

/* Force body to be scrollable - override any other styles */
body:not(.sheet-detail-open) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
}

/* Layout - Tràn viền với safe area cho nội dung */
.phone-container { 
  font-family: 'Be Vietnam Pro', sans-serif; 
  width: 100%; 
  min-height: 100vh;
  min-height: -webkit-fill-available; /* iOS Safari */
  background: white; 
  overflow-x: hidden;
  position: relative;
  /* Tràn viền đến tất cả các cạnh: không có margin */
  margin: 0;
  /* Padding safe area chỉ cho nội dung bên trong, không ảnh hưởng background */
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  /* Không có padding-bottom để phần dưới tràn viền hoàn toàn */
  padding-bottom: 0;
  box-sizing: border-box;
}

/* Cards */
.card { background-color: white; border-radius: 24px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); padding: 20px; margin-bottom: 20px; transition: transform .3s, box-shadow .3s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(0,0,0,0.15); }

/* Hours highlight */
.hours-card { background: linear-gradient(140deg,#8b5cf6 10%, #ec4899 90%); color: #fff; border-radius: 16px; padding: 15px; text-align: center; margin-bottom: 25px; box-shadow: 0 10px 25px rgba(139,92,246,.6); transform: perspective(1px) translateZ(0); }

/* Lesson detail */
.lesson-detail { border-left: 4px solid #3b82f6; padding-left: 16px; transition: background-color .2s; margin-left: -20px; margin-right: -20px; padding-top: 10px; padding-bottom: 10px; padding-right: 20px; cursor: pointer; }
.lesson-detail:hover { background-color: #f8fafc; }

/* Course image */
.course-image-container { width: 90px; flex-shrink: 0; display: flex; align-items: stretch; height: auto; }
.course-image { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.15); border: 2px solid #fff; }
.course-image-container.fixed-height { height: auto !important; }

/* News */
.news-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; cursor: pointer; transition: background-color .2s; }
.news-item:hover { background-color: #f9f9f9; }
.news-item:last-child { border-bottom: none; }
.news-thumb { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; margin-left: 10px; }

/* Ranking */
.rank-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #f3f4f6; transition: background-color .2s; }
.rank-item:last-child { border-bottom: none; }
.user-rank { background-color: #e0f2fe; border-radius: 8px; border-bottom: none !important; }

/* Profile styles */
.profile-header { color: white; position: relative; transition: background 0.5s ease; }

/* Fixed header styles - prevent from being affected by scroll/zoom */
[class*="fixed"][class*="top-0"],
.fixed.top-0,
header[style*="position: fixed"][style*="top: 0"],
div[style*="position: fixed"][style*="top: 0"]:not(.bottom-nav-container):not(.bottom-nav-container *),
[style*="fixed top-0"],
[style*="fixed"][style*="top: 0"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: transform !important;
  /* Prevent header from being affected by scroll/zoom */
  contain: layout style paint !important;
  z-index: 10 !important;
  /* Force hardware acceleration and prevent scroll interference */
  -webkit-perspective: 1000px;
  perspective: 1000px;
  isolation: isolate !important;
  /* Prevent any transform from scroll */
  transform-origin: center top !important;
}
.avatar-container { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); z-index: 10; cursor: pointer; }
.avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 4px solid white; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.background-wave { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; opacity: 0.2; transition: background-image 0.5s ease; }
.menu-item { padding: 16px 20px; display: flex; align-items: center; border-bottom: 1px solid #f3f4f6; cursor: pointer; transition: background-color .2s; }
.menu-item:hover { background-color: #f9fafb; }
.menu-icon-wrapper { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.icon-blue-light { background-color: #dbeafe; color: #3b82f6; }
.icon-green { background-color: #d1fae5; color: #10b981; }
.icon-purple { background-color: #ede9fe; color: #8b5cf6; }
.icon-red { background-color: #fee2e2; color: #ef4444; }
.stats-icon-wrapper { width: 32px; height: 32px; margin: 0 auto 4px auto; color: #3b82f6; display: flex; align-items: center; justify-content: center; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); }

/* Notifications page */
.notification-list {
  overflow-y: auto;
  flex-grow: 1;
  padding-bottom: 20px;
}
.notification-item {
  transition: all 0.15s ease-in-out;
}
.notification-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background-color: #f9f9fb;
}

/* Search page */
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Messenger/Chat styles */
.chat-container { width: 100%; max-width: 800px; background: white; border-radius: 40px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); display: flex; min-height: 80vh; margin: 0 auto; }

@media (max-width: 767px) {
  .chat-list-screen { display: block; width: 100%; min-height: 80vh; overflow-x: hidden; }
  .chat-detail-screen { display: none; width: 100%; min-height: 80vh; }
  .chat-list-screen .overflow-y-auto { padding-bottom: 90px; }
}

@media (min-width: 768px) {
  .chat-list-screen { width: 40%; border-right: 1px solid #f3f4f6; display: block !important; }
  .chat-detail-screen { width: 60%; display: flex !important; flex-direction: column; }
  .chat-list-screen .overflow-y-auto { padding-bottom: 20px; }
}

.chat-list-item { transition: background-color 0.2s; cursor: pointer; }
.chat-list-item:hover { background-color: #f9fafb; }

.sender-bubble { background-color: #8b5cf6; color: white; border-radius: 18px 18px 0 18px; max-width: 80%; padding: 10px 14px; }

.receiver-bubble { background-color: #e5e7eb; color: #374151; border-radius: 18px 18px 18px 0; max-width: 80%; padding: 10px 14px; }

.fab-button { transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 8px 15px rgba(236, 72, 153, 0.5); }
.fab-button:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(236, 72, 153, 0.6); }

/* Metronome Floating Button */
/* Disable all animations for metronome nav button */
.metronome-nav-button {
  animation: none !important;
  transition: none !important;
}

.metronome-fab-button {
  transition: all 0.3s ease;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.metronome-fab-button:hover {
  transform: scale(1.1) translateZ(0);
  -webkit-transform: scale(1.1) translateZ(0);
}

.metronome-fab-button:active {
  transform: scale(0.95) translateZ(0);
  -webkit-transform: scale(0.95) translateZ(0);
}

.metronome-fab-button.metronome-active {
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.5);
  animation: metronomePulse 1s ease-in-out infinite;
}

@keyframes metronomePulse {
  0%, 100% {
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.5);
    transform: scale(1) translateZ(0);
  }
  50% {
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.7);
    transform: scale(1.05) translateZ(0);
  }
}

.metronome-icon-pulse {
  animation: metronomeIconPulse 1s ease-in-out infinite;
}

@keyframes metronomeIconPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* Metronome Pendulum Animation - sẽ được set động theo BPM */
.metronome-pendulum {
  transform-origin: 16px 4px;
}

@keyframes metronomePendulum {
  0% {
    transform: rotate(-50deg);
  }
  50% {
    transform: rotate(50deg);
  }
  100% {
    transform: rotate(-50deg);
  }
}

/* Metronome Body Pulse Animation - nhấp nháy theo nhịp */
.metronome-body-pulse {
  transform-origin: center;
}

@keyframes metronomeBodyPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  5% {
    opacity: 0.7;
    transform: scale(0.98);
  }
  10% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Metronome Modal Styles */
@keyframes metronomeModalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Metronome Play Button Pulse Animation - nhấp nháy theo nhịp */
@keyframes metronomePlayButtonPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
  }
  5% {
    transform: scale(1.12);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.8);
  }
  10% {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.6);
  }
  15% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
  }
}

.metronome-modal {
  background: white !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

.metronome-bpm-display {
  position: relative;
  overflow: hidden;
}

.metronome-bpm-display::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
  pointer-events: none;
}

/* Metronome Slider */
.metronome-slider {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  height: 8px;
}

.metronome-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #8b5cf6;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
  transition: all 0.2s;
  border: 3px solid white;
}

.metronome-slider::-webkit-slider-thumb:hover {
  background: #7c3aed;
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.5);
}

.metronome-slider::-webkit-slider-thumb:active {
  transform: scale(1.05);
}

.metronome-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #8b5cf6;
  cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
  transition: all 0.2s;
}

.metronome-slider::-moz-range-thumb:hover {
  background: #7c3aed;
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.5);
}

.metronome-slider::-moz-range-thumb:active {
  transform: scale(1.05);
}

.metronome-control-btn {
  transition: all 0.2s;
}

.metronome-control-btn:hover:not(:disabled) {
  transform: scale(1.1);
}

.metronome-control-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.metronome-play-btn {
  transition: all 0.2s;
}

.metronome-play-btn:hover {
  transform: scale(1.05);
}

.metronome-play-btn:active {
  transform: scale(0.95);
}

.messages-area { flex-grow: 1; overflow-y: auto; }

/* Messenger animations and transitions */
@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes messageFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes chatSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes chatContentFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.message-bubble {
  animation: messageSlideIn 0.3s ease-out;
  transition: all 0.2s ease-in-out;
}

.message-bubble:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chat-list-item {
  transition: all 0.2s ease-in-out;
  animation: chatSlideIn 0.2s ease-out;
}

.chat-list-item:hover {
  transform: translateX(4px);
}

.chat-window {
  animation: chatContentFadeIn 0.3s ease-out;
}

.chat-header {
  transition: all 0.2s ease-in-out;
}

.message-input {
  transition: all 0.2s ease-in-out;
}

.message-input:focus {
  transform: scale(1.02);
}

.send-button {
  transition: all 0.2s ease-in-out;
}

.send-button:hover:not(:disabled) {
  transform: scale(1.05);
}

.send-button:active:not(:disabled) {
  transform: scale(0.95);
}

.attach-button,
.media-button {
  transition: all 0.2s ease-in-out;
}

.attach-button:hover,
.media-button:hover {
  transform: scale(1.1);
  background-color: #f3f4f6;
}

.attach-button:active,
.media-button:active {
  transform: scale(0.95);
}

/* Bottom nav slide animation */
.bottom-nav-container {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transform: translateY(0) translateZ(0);
  opacity: 1;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 9999 !important;
  /* Force hardware acceleration */
  -webkit-transform: translateY(0) translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: transform !important;
  contain: layout style paint !important;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  isolation: isolate !important;
  transform-origin: center bottom !important;
}

/* Ensure bottom nav stays fixed and doesn't scroll with content */
[style*="position: fixed"][style*="bottom: 0"],
div[style*="position: fixed"][style*="bottom: 0"],
.bottom-nav-container,
[class*="bottom-nav"] {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: transform !important;
  /* Prevent bottom nav from being affected by scroll/zoom */
  contain: layout style paint !important;
  z-index: 9999 !important;
  /* Force hardware acceleration and prevent scroll interference */
  -webkit-perspective: 1000px;
  perspective: 1000px;
  isolation: isolate !important;
  /* Prevent any transform from scroll */
  transform-origin: center bottom !important;
}

/* Prevent body scroll when bottom nav is visible */
body:not(.no-bottom-nav) {
  padding-bottom: 0;
}

/* Ensure pages don't cause bottom nav to scroll */
.pb-24 {
  padding-bottom: 6rem !important; /* Space for bottom nav */
}

.bottom-nav-container.slide-down {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.bottom-nav-container.slide-up {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Progress bar border around bottom nav */
.bottom-nav-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10001;
}

.bottom-nav-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-radius: inherit;
  border-top-color: #3b82f6;
  animation: progressTop 1.5s linear infinite;
}

.bottom-nav-progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-radius: inherit;
  border-right-color: #3b82f6;
  animation: progressRight 1.5s linear infinite;
  animation-delay: 0.375s;
}

@keyframes progressTop {
  0% { border-top-color: #3b82f6; }
  25% { border-top-color: transparent; }
  100% { border-top-color: transparent; }
}

@keyframes progressRight {
  0% { border-right-color: transparent; }
  25% { border-right-color: #3b82f6; }
  50% { border-right-color: transparent; }
  100% { border-right-color: transparent; }
}

@keyframes progressBottom {
  0% { border-bottom-color: transparent; }
  50% { border-bottom-color: transparent; }
  75% { border-bottom-color: #3b82f6; }
  100% { border-bottom-color: transparent; }
}

@keyframes progressLeft {
  0% { border-left-color: transparent; }
  75% { border-left-color: transparent; }
  100% { border-left-color: #3b82f6; }
}

/* Progress ring with animated segment around border */
.bottom-nav-progress-ring {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  border-radius: 9999px; /* Match rounded-full */
  pointer-events: none;
  z-index: 1;
  box-sizing: border-box;
  overflow: hidden;
}

.bottom-nav-progress-ring::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  padding: 3px;
  background: conic-gradient(
    from 0deg,
    #3b82f6 0deg,
    #3b82f6 90deg,
    rgba(59, 130, 246, 0.1) 90deg,
    rgba(59, 130, 246, 0.1) 360deg
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: progressRotate 1.5s linear infinite;
  transform-origin: center center;
}

@keyframes progressRotate {
  0% { 
    transform: rotate(0deg);
  }
  100% { 
    transform: rotate(360deg);
  }
}

/* Hide ALL progress bars at the top of the page */
body > *[style*="top: 0"][style*="position: fixed"],
body > *[style*="position: fixed"][style*="top: 0"],
*[style*="top: 0"][style*="position: fixed"][style*="height: 2px"],
*[style*="top: 0"][style*="position: fixed"][style*="height: 3px"],
*[style*="top: 0"][style*="position: fixed"][style*="height: 4px"],
*[style*="top: 0"][style*="position: fixed"][style*="width: 100%"],
progress[style*="top"],
progress[style*="position: fixed"],
#nprogress,
.nprogress-bar,
.nprogress-custom-parent,
.nprogress-busy,
[class*="progress"][style*="top: 0"],
[class*="loading"][style*="top: 0"],
[class*="progress-bar"][style*="top: 0"],
[class*="progress-indicator"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Hide browser default progress indicator */
body::before,
html::before,
body::after,
html::after {
  content: none !important;
}

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

/* No scrollbar for filter chips */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.search-box { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-radius: 12px; transition: all .3s; }
.search-box:focus-within { box-shadow: 0 6px 16px rgba(139,92,246,.3); border: 1px solid #8b5cf6; }
.filter-button-active { background-color: #8b5cf6; color: #fff; box-shadow: 0 4px 10px rgba(139,92,246,.4); }
.filter-button { transition: all .2s; white-space: nowrap; cursor: pointer; }
.drag-scroll-container { 
  cursor: grab; 
  user-select: none;
  -webkit-user-select: none;
}
.drag-scroll-container.is-dragging { 
  cursor: grabbing; 
  user-select: none;
  -webkit-user-select: none;
}
.drag-scroll-container.is-dragging button {
  pointer-events: none;
}

/* Cafe styles */
.cafe-green-bg { background-color: #16a34a; }
.cafe-dark-green-text { color: #14532d; }
.cafe-light-green-bg { background-color: #dcfce7; }
.product-card { background: #fff; border-radius: 18px; box-shadow: 0 6px 14px rgba(0,0,0,.08); position: relative; overflow: hidden; min-height: 190px; }
.category-btn.active { background: linear-gradient(135deg,#16a34a 0%, #22c55e 100%); color: #fff; box-shadow: 0 6px 14px rgba(34,197,94,.35); }
.category-btn.inactive { background: #fff; border: 1px solid #e5e7eb; color: #111827; }
.checkout-button { background: #16a34a; color: #fff; padding: 12px; border-radius: 14px; font-weight: 600; }

/* Icon transition animation */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Sticky categories */
.sticky-categories {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  will-change: transform;
}

/* Fixed search header for Search page. Use a class to avoid global attribute-based selectors
   that hide inline-styled fixed elements (we purposely avoid inline style 'top: 0' + 'position: fixed') */
.search-header-fixed {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important; /* kept in CSS so no inline style contains top: 0 */
  z-index: 99999 !important;
  background: #ffffff;
  border-bottom: 1px solid #f3f4f6;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  /* slightly tighter padding to reduce header height */
  padding: 0.375rem 1.25rem;
  padding-top: calc(env(safe-area-inset-top, 12px) + 0.5rem);
  pointer-events: auto;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: transform !important;
  /* Prevent header from being affected by scroll/zoom */
  contain: layout style paint !important;
  /* Force hardware acceleration and prevent scroll interference */
  -webkit-perspective: 1000px;
  perspective: 1000px;
  isolation: isolate !important;
  /* Prevent any transform from scroll */
  transform-origin: center top !important;
  /* Lock position during scroll - multiple declarations for maximum compatibility */
  position: -webkit-sticky !important;
  position: sticky !important;
  position: fixed !important;
}

.search-header-spacer {
  /* Smaller default spacer to reduce large gap before JS measurement runs */
  height: calc(env(safe-area-inset-top, 12px) + 3.5rem);
  width: 100%;
}

/* Category button styles */
.category-btn {
  background-color: #e5e7eb;
  color: #374151;
  transition: all 0.2s ease-in-out;
}
.category-btn.active {
  background-color: #16a34a;
  color: white;
  box-shadow: 0 4px 6px -1px rgba(22, 163, 74, 0.4), 0 2px 4px -2px rgba(22, 163, 74, 0.4);
}
.category-btn.active svg {
  color: white;
}
.category-btn.inactive svg {
  color: #1f2937;
}
.category-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Don't apply filter to images - keep original colors */
/* SVG icons will still turn white via .category-btn.active svg rule */

/* Page transition animations */
@keyframes pageSlideInRight {
  from {
    transform: translateX(100%);
    opacity: 0.9;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pageSlideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0.9;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Chat context menu animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.page-slide-in-right {
  animation: pageSlideInRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.page-slide-in-left {
  animation: pageSlideInLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Content return animation when closing detail view */
@keyframes contentReturn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.content-enter-from-detail {
  animation: contentReturn 320ms cubic-bezier(.2,.8,.2,1) both;
}

/* Filter switch animation */
@keyframes filterSwitch {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.filter-switch-anim {
  animation: filterSwitch 260ms cubic-bezier(.2,.8,.2,1) both;
}

/* Star pulse animation for wallet */
@keyframes star-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}
.animate-star-pulse {
  animation: star-pulse 2s infinite ease-in-out;
}

/* News Overlay Styles */
/* News Overlay với animation */
.news-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: white;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important, 
              opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: transform, opacity;
}

.news-overlay.hidden {
  transform: translateX(100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.news-overlay:not(.hidden) {
  /* Không set transform/opacity ở đây để inline styles từ JS có thể override */
  pointer-events: auto !important;
}

.news-overlay-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#news-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.news-close-btn {
  position: fixed;
  top: max(16px, env(safe-area-inset-top, 16px));
  left: 16px;
  z-index: 10001;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  border-radius: 50px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.news-close-btn[style*="display: none"],
.news-close-btn.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-10px);
}

.news-close-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateX(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.news-close-btn:active {
  transform: translateX(-5px) scale(0.96);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.news-close-btn i {
  font-size: 11px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-close-btn:hover i {
  transform: translateX(-2px);
}

/* News page specific styles */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.category-pill {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-pill.active {
  background-color: #000;
  color: #fff;
  transform: scale(1.05);
}

.floating-nav {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.main-gradient {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.snap-x {
  scroll-snap-type: x mandatory;
}

.snap-center {
  scroll-snap-align: center;
}

/* News page - Ensure arbitrary values work */
.rounded-b-\[40px\] {
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}

.rounded-\[32px\] {
  border-radius: 32px;
}

.rounded-\[20px\] {
  border-radius: 20px;
}

.h-\[420px\] {
  height: 420px;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[9px\] {
  font-size: 9px;
}

.min-w-\[280px\] {
  min-width: 280px;
}

/* Additional Tailwind utilities for news page */
.aspect-\[4\/5\] {
  aspect-ratio: 4 / 5;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.bg-white\/90 {
  background-color: rgba(255, 255, 255, 0.9);
}

.bg-white\/40 {
  background-color: rgba(255, 255, 255, 0.4);
}

.from-black\/90 {
  --tw-gradient-from: rgba(0, 0, 0, 0.9);
}

.via-black\/20 {
  --tw-gradient-via: rgba(0, 0, 0, 0.2);
}

/* Ensure gradient works */
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

/* Fix for backdrop-blur */
.backdrop-blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Fix for shadow colors */
.shadow-blue-100 {
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1), 0 4px 6px -2px rgba(59, 130, 246, 0.05);
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Fix for tracking */
.tracking-tighter {
  letter-spacing: -0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.tracking-tighter {
  letter-spacing: -0.05em;
}