/*
 * Nút chuyển ngôn ngữ của trang và thẻ ngôn ngữ trên từng khoá.
 * Để riêng khỏi style.css cho dễ theo dõi phần song ngữ.
 */

/* ------------------------------ nút chuyển ------------------------------ */

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1;
}
.lang-switch a {
  padding: 0.45rem 0.8rem;
  color: var(--muted);
  background: var(--panel);
  text-decoration: none;
  transition: background 160ms, color 160ms;
}
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="true"] {
  background: #4dabcf;
  color: #06111d;
  font-weight: 600;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ------------------------------ thẻ ngôn ngữ ------------------------------ */

/* Nằm cùng hàng với `.count`; `.count` trong style.css đã có margin-left:auto,
   nên thẻ này chỉ cần đứng ngay trước và cả hai dồn về bên phải. */
.langs {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  gap: 0.2rem;
}
.langs + .count { margin-left: 0.35rem; }

.lang {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  border-radius: 0.35rem;
  padding: 0.18rem 0.4rem;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--panel-2);
  white-space: nowrap;
}
/* Ngôn ngữ đang xem được làm nổi để biết bấm vào thẻ sẽ mở bản nào. */
.lang-current {
  border-color: color-mix(in srgb, #4dabcf 55%, var(--line));
  color: #9fd6ea;
}

@media (max-width: 40rem) {
  .top-bar { flex-direction: column; align-items: flex-start; }
  /* Hàng đầu của thẻ được phép xuống dòng: tên khoá ở dòng trên, thẻ ngôn ngữ
     và số bài dồn xuống dòng dưới. KHÔNG đặt width:100% cho .langs — hàng này
     là flex nowrap theo mặc định nên một phần tử rộng 100% sẽ đẩy .count tràn
     ra ngoài thẻ (đo được: lệch 133px ở mọi thẻ). */
  .card-head { flex-wrap: wrap; }
  .langs { margin-left: auto; }
}