/* ==========================================================================
   Tối ưu cho iPhone / mobile Safari (đặc biệt iPhone 12 Pro Max, notch + safe area)
   ========================================================================== */

html {
  /* Không cho Safari tự phóng to chữ khi xoay ngang */
  -webkit-text-size-adjust: 100%;
  /* Cuộn mượt kiểu iOS cho các vùng có thể cuộn riêng */
  -webkit-overflow-scrolling: touch;
}

body {
  /* Bỏ hiệu ứng highlight xám khi chạm trên iOS/Android */
  -webkit-tap-highlight-color: transparent;
  /* Bỏ 300ms delay khi chạm, phản hồi nhanh hơn */
  touch-action: manipulation;
  overscroll-behavior-y: none;
}

/* Vùng an toàn quanh notch / thanh home indicator khi mở "Thêm vào Màn hình chính" */
header {
  padding-top: env(safe-area-inset-top);
}
footer {
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}
main#app {
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

/* Tăng vùng chạm cho các nút/link điều hướng — tối thiểu 44x44px theo chuẩn Apple HIG */
.nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
#menuBtn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.listen-check, .mark-speak, .speak-btn, .rec-btn {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ngăn Safari iOS tự động zoom vào khi focus input/textarea có cỡ chữ < 16px */
input, textarea, select {
  font-size: 16px;
}
@media (min-width: 640px) {
  input, textarea, select { font-size: inherit; }
}

.nav-link.active { background-color: rgba(255,255,255,0.2); font-weight: 600; }

.card {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  padding: 1.25rem;
}

.flashcard {
  perspective: 1000px;
  height: 220px;
}
.flashcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  cursor: pointer;
}
.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
}
.flashcard-front { background: #4f46e5; color: white; }
.flashcard-back { background: #eef2ff; color: #1e1b4b; transform: rotateY(180deg); }

.pulse-rec {
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
  70% { box-shadow: 0 0 0 12px rgba(220,38,38,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}