/* Mobile Optimization - Tối ưu cho điện thoại */

/* Đảm bảo viewport đúng */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  touch-action: manipulation;
}

/* Tối ưu touch targets cho mobile */
button,
a,
input,
select,
textarea {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

/* Smooth scrolling trên mobile */
* {
  -webkit-overflow-scrolling: touch;
}

/* Fix cho iOS Safari */
body {
  -webkit-tap-highlight-color: transparent;
}

/* Tối ưu font size cho mobile */
@media (max-width: 768px) {
  /* Giảm font size tiêu đề trên mobile */
  h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  h2 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  
  h3 {
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
  }
  
  /* Tăng line-height cho dễ đọc */
  p,
  span,
  div {
    line-height: 1.6 !important;
  }
  
  /* Tối ưu button cho mobile */
  button {
    padding: 12px 24px !important;
    font-size: 16px !important;
  }
  
  /* Tối ưu input cho mobile */
  input,
  textarea,
  select {
    font-size: 16px !important; /* Prevent zoom on iOS */
    padding: 12px !important;
  }
  
  /* Tối ưu spacing */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Tối ưu cho màn hình nhỏ hơn */
@media (max-width: 480px) {
  h1 {
    font-size: 1.75rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  /* Giảm padding cho mobile nhỏ */
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Fix cho landscape mode trên mobile */
@media (max-height: 500px) and (orientation: landscape) {
  /* Giảm padding vertical */
  section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* Tối ưu images cho mobile */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent text overflow */
* {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Tối ưu modal/drawer cho mobile */
@media (max-width: 768px) {
  /* Full width modal trên mobile */
  [role="dialog"],
  .modal,
  .drawer {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Fix sticky header trên mobile */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
}

/* Tối ưu navigation cho mobile */
@media (max-width: 768px) {
  nav {
    flex-direction: column;
  }
  
  nav a {
    padding: 12px 16px !important;
    width: 100%;
    text-align: left;
  }
}

/* Prevent horizontal scroll */
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Tối ưu grid cho mobile */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* Safe area cho iPhone X và mới hơn */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* Tối ưu floating buttons cho mobile */
.fixed {
  bottom: max(1rem, env(safe-area-inset-bottom));
  right: max(1rem, env(safe-area-inset-right));
}

/* Smooth transitions */
* {
  transition: all 0.2s ease-in-out;
}

/* Disable transitions during resize */
.resize-animation-stopper * {
  animation: none !important;
  transition: none !important;
}