/**
 * KeoBongVip Mobile Custom Stylesheet
 * Tối ưu hóa toàn diện giao diện di động: iOS, Android, Telegram, Zalo
 */

/* 1. Safe Area Inset & Body Spacing */
@media (max-width: 767px) {
  body {
    /* Đảm bảo khoảng cách đệm cho thanh Bottom Nav Bar */
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)) !important;
    -webkit-tap-highlight-color: transparent;
  }
}

/* 2. Mượt mà cuộn cảm ứng */
.overflow-x-auto,
.overflow-y-auto {
  -webkit-overflow-scrolling: touch;
}

/* 3. Sticky Cột Tên Đội Bóng khi vuốt bảng Kèo */
@media (max-width: 768px) {
  .sticky-col-header {
    position: sticky !important;
    left: 0 !important;
    z-index: 25 !important;
    background-color: #150e38 !important;
    box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.65);
  }

  .sticky-col-subhead {
    position: sticky !important;
    left: 0 !important;
    z-index: 24 !important;
    background-color: #110b2d !important;
    box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.65);
  }

  .sticky-col-team {
    position: sticky !important;
    left: 0 !important;
    z-index: 20 !important;
    background-color: #0e0926 !important;
    box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.7);
  }
}

/* 4. Bottom Nav Bar Glassmorphism */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(10, 6, 28, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(147, 51, 234, 0.35);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.7), 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 8px 2px 6px;
  text-decoration: none;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: all 0.2s ease;
  position: relative;
}

.mobile-nav-item i {
  font-size: 18px;
  margin-bottom: 3px;
  transition: transform 0.2s ease;
}

.mobile-nav-item.active {
  color: #fbbf24;
}

.mobile-nav-item.active i {
  color: #fbbf24;
  transform: translateY(-2px);
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
}

.mobile-nav-item.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  border-radius: 0 0 4px 4px;
}

/* 5. Touch Target Optimization */
@media (max-width: 640px) {
  button, a {
    min-height: 38px;
    touch-action: manipulation;
  }
}