/* ---------- Hoc (study) ---------- */
.study-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.study-controls select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
}
.study-remaining { margin-left: auto; font-size: 13px; color: var(--muted); }

.layout-study { grid-template-columns: 1fr; max-width: 960px; padding-bottom: 160px; }

/* The hoc cao theo noi dung (khong cuon ben trong the). Moi quy tac nam duoi
   .study-card de the xem truoc o tab "Them tu moi" khong bi doi. */
.study-flip-wrap { max-width: 760px; margin: 0 auto; }
.study-card {
  min-height: max(440px, calc(100vh - 380px));
  touch-action: pan-y;
  user-select: none;
}
/* Mat dang hien thi la position:relative nen no quyet dinh chieu cao the;
   mat con lai nam absolute de khong keo cao the (mat truoc ngan khong bi keo bang mat sau). */
.study-card .flip-inner { min-height: inherit; }
.study-card .flip-face { position: absolute; inset: 0; min-height: inherit; }
.study-card:not(.flipped) .flip-front,
.study-card.flipped .flip-back { position: relative; inset: auto; }
.study-card .card-surface { height: auto; overflow: visible; padding: 28px 32px; }
.study-card .flip-back .hanzi { font-size: 40px; margin-bottom: 4px; }
.study-card .flip-back .pinyin { font-size: 20px; }
.study-card .flip-back .meaning { font-size: 22px; }
.study-card .example {
  width: 100%;
  max-width: 100%;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
  white-space: pre-line;
}
.study-card .mnemonic img { max-width: 280px; }

.study-empty {
  text-align: center;
  padding: 60px 20px;
  font-size: 16px;
  color: var(--muted);
}

.study-waiting {
  text-align: center;
  padding: 60px 20px;
  font-size: 18px;
  color: var(--ink);
}
.study-waiting b { font-variant-numeric: tabular-nums; color: var(--red); }
.study-waiting-hint { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* Thanh cham diem co dinh o day man hinh (nhu Anki) */
.study-bar {
  position: fixed;
  left: var(--sidebar-current-w, 0px); /* nam trong vung noi dung, ben phai menu trai */
  right: 0;
  bottom: 0;
  z-index: 20; /* thap hon menu (40/50) va nen mo (45) */
  transition: left 0.2s ease;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06);
  padding: 10px 16px 14px;
}
.study-bar-inner { max-width: 760px; margin: 0 auto; }
.study-show-btn {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  border-radius: 12px;
  background: var(--pinyin-color);
  color: #fff;
}
.study-show-btn:hover { background: #245a95; }

.study-grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.study-grade { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.study-grade-time { font-size: 12px; color: var(--muted); min-height: 16px; }
.btn-grade { width: 100%; padding: 14px 8px; font-size: 15px; border-radius: 12px; }
.btn-grade-again { background: #fdecea; color: var(--red-dark); }
.btn-grade-again:hover { background: #fbdcd8; }
.btn-grade-hard { background: #fdf0dc; color: #9a5b00; }
.btn-grade-hard:hover { background: #fae4c2; }
.btn-grade-good { background: #e3f3e8; color: var(--meaning-color); }
.btn-grade-good:hover { background: #d3ecda; }
.btn-grade-easy { background: #e3eefa; color: var(--pinyin-color); }
.btn-grade-easy:hover { background: #d2e3f5; }

.flip-tip { text-align: center; font-size: 12px; color: var(--muted); margin-top: 10px; }