/* ========== FLASHCARDS (base) ========== */
.mon-flashcards{
  list-style:none !important;
  margin:2rem auto !important;
  padding:0 !important;
  max-width:560px;           /* 1 cột trung tâm */
}

.mon-flashcards .flashcard-item{ display:none; }
.mon-flashcards .flashcard-item.active{ display:block; }

/* thẻ card 3D */
.flashcard-inner{
  position:relative;
  width:100%;
  min-height:420px;
  transform-style:preserve-3d;
  transition:transform .6s;
}
.flashcard-inner.flipped{ transform:rotateY(180deg); }

.flashcard-front,
.flashcard-back{
  position:absolute;
  inset:0;
  background:#fff;
  border:1px solid #ddd;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  backface-visibility:hidden;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.flashcard-back{ transform:rotateY(180deg); }

/* --- FRONT --- */
.flashcard-front .card-image img{
  width:100%; height:180px; object-fit:cover;
  border-radius:12px; margin-bottom:12px;
}
.flashcard-front .word{
  font-size:26px; font-weight:700; color:#222;
  display:flex; align-items:center; gap:8px;
}
.flashcard-front .ipa{ font-size:18px; color:#e53935; }
.flashcard-front .type{ margin-top:6px; font-size:15px; color:#666; font-style:italic; }

/* nút nghe từ (xuống dòng riêng) */
.flashcard-front .listen-btn-word{
  display:block;
  margin:8px auto 0;
  border:none; background:#28a745; color:#fff;
  border-radius:20px; padding:6px 14px; font-size:14px; cursor:pointer;
}

/* nút lật */
.flashcard-front .flip-btn,
.flashcard-back  .flip-btn{
  margin-top:auto;
  font-size:20px;
  background:#007bff; color:#fff;
  border:none; border-radius:50%;
  width:40px; height:40px; cursor:pointer;
}

/* --- BACK --- */
.flashcard-back{ justify-content:flex-start; }
.flashcard-back .sentence{
  width:100%;
  margin-bottom:16px; padding-bottom:12px;
  border-bottom:1px dashed #ddd; text-align:left;
}
.flashcard-back .sentence:last-child{ border-bottom:none; }
.flashcard-back .sentence .en{
  display:block; font-weight:600; color:#222; margin-bottom:4px;
}
.flashcard-back .sentence .vi{
  display:block; font-style:italic; color:#555; margin-bottom:6px;
}
.flashcard-back .listen-btn{
  display:inline-block; margin-top:6px;
  border:none; background:#28a745; color:#fff;
  border-radius:20px; padding:4px 12px; font-size:13px; cursor:pointer;
}

/* --- NAV (đặt ngoài ul) --- */
.flashcard-nav{
  margin:1rem auto 2rem;
  display:flex; justify-content:center; gap:20px;
  max-width:560px;
}
.flashcard-nav button{
  font-size:20px; background:#eee; border:none;
  border-radius:50%; width:40px; height:40px; cursor:pointer;
}

.flashcard-nav .counter {
  font-size: 15px;
  font-weight: 600;
  color: #444;
  min-width: 60px;         /* để không nhảy khi thay đổi số */
  text-align: center;
}

/* ========== MOBILE ========== */
@media (max-width: 480px){
  .mon-flashcards{ max-width: 94vw; }
  .flashcard-front .word{ font-size:22px; }
  .flashcard-front .ipa{ font-size:16px; }
  .flashcard-front, .flashcard-back{ padding:16px; }
  .flashcard-front .card-image img{ height:160px; }
}