/* Trang tra cứu thuật ngữ. Mobile-first: mọi thứ một cột, mở rộng ở màn lớn. */

.tn { max-width: 62rem; margin: 0 auto; padding: 1rem .9rem 3rem; }
.tn-head h1 { margin: 0 0 .35rem; font-size: 1.5rem; }
.tn-summary { margin: 0 0 1.1rem; opacity: .82; line-height: 1.5; }

.tn-searchbar { margin: 0 0 .85rem; }
/* Nhãn phải tồn tại cho trình đọc màn hình, nhưng placeholder đã nói đủ cho người nhìn. */
.tn-srlabel {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
#tnSearch {
  width: 100%; box-sizing: border-box; padding: .7rem .85rem;
  font-size: 1rem; border-radius: .6rem;
  border: 1px solid rgba(120, 110, 80, .38); background: transparent; color: inherit;
}
#tnSearch:focus { outline: 2px solid rgba(180, 140, 60, .75); outline-offset: 1px; }
.tn-count { margin: .45rem 0 0; font-size: .86rem; opacity: .72; min-height: 1.2em; }

/* Cùng hình dạng với `.pb-tabs` của /practice (practice_browse.js): bo 8px, nền trắng,
   glyph 15px, số đếm mờ, và trạng thái chọn là NỀN ĐẶC chứ không phải viền đậm thêm.
   Hai trang cùng làm một việc — lọc theo nhóm — nên không có lý do trông khác nhau. */
.tn-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 1rem; }
.tn-cat {
  font: inherit; font-size: 13px; padding: 6px 12px; cursor: pointer;
  border-radius: 8px; border: 1px solid #c9bfa8;
  background: #fff; color: #5c4b28;
  display: inline-flex; align-items: center;
}
.tn-cat .tn-tico { width: 15px; height: 15px; margin-right: 5px; flex: none; }
.tn-cat-n { opacity: .55; font-size: 11px; margin-left: 4px; }
.tn-cat[aria-pressed="true"] { background: #5c4b28; color: #fff; border-color: #5c4b28; }
.tn-cat[aria-pressed="true"] .tn-cat-n { opacity: .85; }

.tn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tn-item {
  padding: .75rem .85rem; border-radius: .6rem;
  border: 1px solid rgba(120, 110, 80, .22);
}
.tn-item[hidden] { display: none; }
.tn-item-link { text-decoration: none; color: inherit; display: flex; flex-wrap: wrap;
                align-items: baseline; gap: .5rem; }
.tn-item-link:hover .tn-item-vi { text-decoration: underline; }
.tn-item-vi { font-weight: 600; font-size: 1.02rem; }
.tn-item-zh { opacity: .66; font-size: .95rem; }
.tn-item-def { margin: .3rem 0 0; line-height: 1.5; opacity: .9; }
.tn-item-alias { margin: .28rem 0 0; font-size: .84rem; opacity: .66; }

.tn-empty { padding: 1.4rem .2rem; line-height: 1.6; }
.tn-empty strong { font-weight: 600; }

.tn-crumb { display: flex; gap: .4rem; font-size: .88rem; opacity: .78; margin: 0 0 .9rem; }
.tn-crumb a { color: inherit; }
.tn-detail-vi { margin: 0 0 .2rem; font-size: 1.6rem; }
.tn-detail-zh { margin: 0 0 .9rem; font-size: 1.15rem; opacity: .7; }
.tn-detail-def { margin: 0 0 1.4rem; line-height: 1.65; font-size: 1.03rem; }
.tn-detail-block { margin: 0 0 1.2rem; }
.tn-detail-block h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em;
                      opacity: .66; margin: 0 0 .4rem; }
.tn-alias-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tn-alias-list li { padding: .25rem .6rem; border-radius: 999px;
                    border: 1px solid rgba(120, 110, 80, .3); font-size: .9rem; }
.tn-404 { padding-top: 2rem; }
.tn-404 code { padding: .1rem .35rem; border-radius: .25rem; background: rgba(120, 110, 80, .16); }

@media (min-width: 46rem) {
  .tn { padding: 1.6rem 1.2rem 3rem; }
  .tn-head h1 { font-size: 1.9rem; }
  .tn-list { grid-template-columns: 1fr 1fr; }
}

/* CTA "Học quân này" — cùng hình dạng nút với `.tn-cat` đang chọn, vì nó là lối đi tiếp
   chứ không phải một link chạy chữ. `.tn-blog` chưa từng có style riêng nên gộp luôn. */
.tn-lesson, .tn-blog, .tn-practice {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; padding: 8px 14px; border-radius: 8px;
  background: #5c4b28; color: #fff; border: 1px solid #5c4b28;
  text-decoration: none;
}
.tn-lesson:hover, .tn-blog:hover, .tn-practice:hover { background: #6d5a33; }
/* Lối sang luyện tập là hành động PHỤ so với "Học quân này" — viền thay vì nền đặc. */
.tn-practice { background: transparent; color: #5c4b28; border-color: #c9bfa8; }
.tn-practice:hover { background: rgba(92, 75, 40, .08); color: #5c4b28; }
.tn-practice::before { content: "\2315"; font-size: 13px; opacity: .8; }
.tn-lesson::before { content: "\25B6"; font-size: 11px; opacity: .85; }

/* Nhãn vai đỏ/đen: nhỏ và mờ có chủ đích — chữ Hán mới là thứ cần đọc, nhãn chỉ giải
   thích vì sao có hai chữ. To bằng nhau là nó cạnh tranh với chính thứ nó chú thích. */
.tn-zh-ben { font-size: .62em; opacity: .6; margin-left: .18em; }
.tn-zh-sep { opacity: .45; }

/* Tiêu đề + nút Báo lỗi cùng hàng; nút đẩy sang phải và không kéo mắt khỏi tên thuật ngữ. */
.tn-detail-head { display: flex; align-items: flex-start; gap: 12px; }
.tn-detail-head .tn-detail-vi { flex: 1 1 auto; margin-right: 0; }
.tn-detail-head .report-trigger { flex: none; align-self: center; }