/* Chọn chủ đề, chọn nhóm */
/* ---------- Chọn chủ đề ---------- */
.topic-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 3vmin, 26px); max-width: 900px; }
.topic-card {
  width: clamp(130px, 24vmin, 200px); padding: 14px 10px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: 0 8px 0 var(--d), 0 16px 26px rgba(0, 0, 0, .16), inset 0 3px 0 #fff;
  border: 4px solid var(--c);
}
.topic-card .en { font-size: clamp(20px, 3.6vmin, 28px); color: var(--d); line-height: 1.1; }
.topic-card small { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.topic-card.picked { animation: bump .5s ease; }
.meter { width: 80%; height: 10px; border-radius: 99px; background: #e7eef7; overflow: hidden; margin-top: 6px; }
.meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, white), var(--c)); }

/* ---------- Chọn nhóm bài học (Animals: 10 nhóm) ---------- */
.group-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 2vmin, 18px); width: min(1000px, 100%); }
.group-card {
  position: relative; padding: 10px 6px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 4px solid var(--c); box-shadow: 0 7px 0 var(--d), 0 14px 22px rgba(0, 0, 0, .14), inset 0 3px 0 #fff;
  animation: pop .4s ease backwards; animation-delay: calc(var(--k) * .04s);
}
.group-card .gnum { position: absolute; left: 8px; top: 6px; font-size: 13px; font-weight: 800; color: var(--d); opacity: .7; }
.group-card .en { font-size: clamp(14px, 2.3vmin, 19px); line-height: 1.1; color: var(--d); text-align: center; }
.group-card small { font-size: 12px; line-height: 1.2; color: var(--ink-soft); text-align: center; }
.group-card .meter { height: 8px; }
.group-card.picked { animation: bump .5s ease; }
@media (orientation: portrait) {
  .group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .group-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 8px; align-items: center; padding: 6px 8px; text-align: left; }
  .group-card .pic { grid-row: 1 / 4; --s: 40px; }
  .group-card .en, .group-card small { text-align: left; }
  .group-card .en { font-size: 14px; }
  .group-card small { font-size: 11px; }
  .group-card .meter { width: 100%; height: 6px; margin-top: 2px; }
  .group-card .gnum { display: none; }
}