/* Tác phẩm dạng game (student/screens/tac-pham.js): thẻ vé đầu trang, con đường nhỏ của một tác phẩm (dùng lại .cd-* của
 * Làng nhạc trong game.css), nhãn dưới nút, công thức đệm. Không giãn khoảng cách chữ; mục chạm ≥ 44 px; tôn trọng giảm chuyển động. */
.scr--tp .scr__top { gap: 12px; }
.tp-lui { width: 44px; height: 44px; background: #fff; box-shadow: 0 2px 0 #EFE7D8; color: var(--navy); }
.tp-top { display: block; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 17px; color: var(--navy); }

/* thẻ vé: cuống màu bạn nốt dẫn đường + nhân vật, đường xé răng cưa, phần thông tin */
.tp-ve { position: relative; display: flex; align-items: stretch; margin-top: 8px; border-radius: 22px; background: #fff;
  box-shadow: 0 4px 0 var(--tone-l), 0 10px 24px -18px rgba(15, 3, 78, .5); overflow: hidden; }
.tp-ve__cuong { flex: none; width: 84px; display: grid; place-items: end center; background: var(--tone); border-right: 3px dashed #fff; line-height: 0; overflow: hidden; }
.tp-ve__cuong :is(svg, .nv3d img) { margin-bottom: -6px; }
.tp-ve__in { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 12px 16px; }
.tp-ve__t { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--navy); }
.tp-ve__t:focus { outline: none; }
.tp-ve__by { margin: 0; font-size: 14px; font-weight: 600; color: var(--navy-70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-ve__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.tp-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--tone-l); color: var(--tone-i);
  font-size: 13px; font-weight: 700; }
.tp-chip--kho { background: #FFF4CF; color: #7A5600; }
.tp-ve__duoi { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.tp-ve__sao .cd-sao { position: static; transform: none; box-shadow: none; padding: 0; background: none; }
.tp-ve__tien { font-size: 14px; font-weight: 700; color: var(--navy-70); }

/* con đường */
.tp-duong { margin-top: 12px; }
.tp-o .cd-nut .ico { width: 32px; height: 32px; }
.tp-o.is-ca-bai .cd-nut { width: 84px; height: 78px; }
.tp-o.is-ca-bai .cd-nut.is-khoa, .tp-o.is-ca-bai .cd-nut.is-mo, .tp-o.is-ca-bai .cd-nut.is-dang-hoc { --b: #FFC93C; --bd: #E8A70C; color: #7A5600; }
.tp-o.is-ca-bai .cd-nut.is-khoa { filter: grayscale(.6) brightness(1.08); }
.tp-o.is-mo .cd-nut { --b: var(--tone); }
.tp-nhan { position: absolute; z-index: 2; top: calc(50% + 34px); left: 50%; transform: translateX(-50%); max-width: 130px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 248, 236, .92); color: var(--navy-70); font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-o.is-dang-hoc .tp-nhan { color: var(--tone-i); }
.tp-o.is-ca-bai .cd-sao { bottom: -20px; }
.tp-xem { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; margin: 8px 0 16px; font-weight: 700; }