/* Hạng mùa (spec 2026-10-19-not-nhac-va-hang-mua) – chip huy hiệu trên cùng, thẻ giải thích chip, màn lên bậc, thẻ tổng kết mùa,
 * thẻ nhỏ ở Hôm nay, huy hiệu ở thẻ hồ sơ "Tôi" và cạnh tên trên bảng xếp hạng. JS: student/hang-mua.js. Nạp SAU khung-ngang.css.
 * Khổ ngang, vừa một màn hình ở 740×360 … 915×412. Giảm chuyển động: html.po-giam / prefers-reduced-motion. */

/* ---------- huy hiệu trong vòng tiến độ ---------- */
.hm-vong { position: relative; flex: none; width: var(--hm-co, 32px); height: var(--hm-co, 32px); display: grid; place-items: center; }
.hm-vong > svg { grid-area: 1 / 1; }
.hm-vong__o { width: 100%; height: 100%; }
.hm-huy-hieu { display: block; }

/* ---------- chip Hạng mùa (thanh trên) ---------- */
.chip.chip--hang { width: 44px; padding: 0; justify-content: center; }
.chip--hang .hm-vong { --hm-co: 34px; }
.chip--hang svg { width: auto; height: auto; }
.chip--hang .hm-vong__o { width: 34px; height: 34px; }
@media (max-height: 360px) {
  .chip.chip--hang { width: 42px; }
}

/* ---------- thẻ giải thích chip + thẻ tổng kết mùa (hộp thoại kem, 2 cột ngang) ---------- */
.dlg.hm-the { width: min(100% - 32px, 560px); padding: 20px 22px; display: none; }
.dlg.hm-the[open] { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 18px; }
.hm-the__hinh { display: grid; place-items: center; min-height: 120px; }
.hm-the__hinh .hm-vong__o circle:first-of-type { stroke: rgba(30, 20, 90, .12); }
.hm-the__chu { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.hm-the__t { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--navy); }
.hm-the__ds { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.hm-the__ds li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--navy-70, #4A4668); }
.hm-the__ds li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #3FBF6A; }
.hm-the__nut { display: flex; gap: 10px; margin-top: 4px; }
.hm-the__nut .po-nut { flex: 1 1 0; }
@media (max-height: 380px) {
  .dlg.hm-the { padding: 14px 18px; }
  .dlg.hm-the[open] { grid-template-columns: 108px minmax(0, 1fr); gap: 14px; }
  .hm-the__t { font-size: 19px; }
  .hm-the__ds li { font-size: 14px; }
  .hm-the__hinh svg[width="112"], .hm-the__hinh .hm-vong { max-width: 100px; max-height: 100px; }
  .hm-the__hinh > svg { width: 84px; height: 84px; }
  .hm-the__nut { margin-top: 0; }
}

/* ---------- màn lên bậc (toàn màn, nền đêm, huy hiệu lớn có quầng) ---------- */
.dlg.hm-len { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0 max(24px, var(--safe-r)) 0 max(24px, var(--safe-l));
  border-radius: 0; color: #fff; background: radial-gradient(ellipse at 32% 50%, #3A1A95 0, #22086A 55%, #170550 100%); display: none; }
.dlg.hm-len[open] { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 24px; }
.dlg.hm-len::backdrop { background: #170550; }
.hm-len__hinh { position: relative; display: grid; place-items: center; }
.hm-len__hinh::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 229, 138, .45) 0, rgba(255, 229, 138, 0) 68%); animation: hm-sang 2.4s ease-in-out infinite; }
.hm-len__hinh > svg { position: relative; width: min(190px, 52dvh); height: min(190px, 52dvh); animation: hm-bat .7s .1s cubic-bezier(.3, 1.5, .5, 1) both; }
.hm-len__chu { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hm-len__k { margin: 0; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 14px; font-weight: 700; color: #FFE58A; }
.hm-len__t { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 800; color: #fff; }
.hm-len__p { margin: 0 0 6px; font-size: 17px; line-height: 1.45; font-weight: 600; color: rgba(255, 255, 255, .82); }
@media (max-height: 380px) {
  .hm-len__t { font-size: 28px; }
  .hm-len__p { font-size: 15px; }
}
@keyframes hm-bat { from { transform: scale(.3) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hm-sang { 0%, 100% { transform: scale(.92); opacity: .8; } 50% { transform: scale(1.08); opacity: 1; } }
.hm-len.is-yen .hm-len__hinh::before, .hm-len.is-yen .hm-len__hinh > svg,
html.po-giam .hm-len__hinh::before, html.po-giam .hm-len__hinh > svg { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .hm-len__hinh::before, .hm-len__hinh > svg { animation: none; }
}

/* ---------- thẻ nhỏ Hạng mùa ở Hôm nay ---------- */
.hm-mini__art { flex: none; width: 50px; height: 50px; display: grid; place-items: center; }
@media (max-height: 412px) {
  .hm-mini__art { width: 44px; height: 44px; }
  .hm-mini__art svg { width: 44px; height: 44px; }
}

/* ---------- thẻ hồ sơ "Tôi" (cả thẻ là nút → giải thích Hạng mùa): huy hiệu + danh hiệu (chữ chạy khi dài) + thanh tiến độ ---------- */
button.toi-hs { width: 100%; border: 0; font: inherit; text-align: left; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.toi-hs:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 229, 138, .7); }
.toi-hs__ten { display: block; }
.toi-hs__hang { min-width: 0; display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; line-height: 1.25; color: var(--glow, #FFE58A); }
.toi-hs__hh { flex: none; width: 22px; height: 22px; line-height: 0; }
.toi-hs__dh { flex: 1; min-width: 0; white-space: nowrap; }

/* ---------- huy hiệu cạnh tên trên bảng xếp hạng ---------- */
.xh-dong__hh { flex: none; width: 24px; height: 24px; line-height: 0; }
@media (max-height: 360px) {
  .xh-dong__hh { width: 22px; height: 22px; }
  .xh-dong__hh svg { width: 22px; height: 22px; }
}