/* Bảng nâng cấp bè → thuyền buồm (trinh_khach/src/nang_cap_ui.ts) */
#than-nc { overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 12px; max-height: 72vh; display: grid; gap: 8px; align-content: start; }

/* thang 4 bậc */
.nc-thang { display: flex; align-items: center; gap: 0; padding: 2px 0 4px; }
.nc-bac { flex: 1 1 0; min-width: 0; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 6px 2px; border-radius: 9px; border: 1px solid var(--vien-mo); background: rgba(79, 227, 255, .05); position: relative; }
.nc-bac img { width: 42px; height: 42px; image-rendering: pixelated; }
.nc-bac span { font-size: 11px; line-height: 1.15; color: var(--chu-mo); text-align: center; }
.nc-bac em { position: absolute; top: -8px; font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 99px; background: var(--nen-dam); border: 1px solid var(--vien); color: var(--xanh); white-space: nowrap; }
.nc-bac.khoa img { filter: grayscale(.85) brightness(.7); }
.nc-bac.qua { border-color: rgba(111, 255, 210, .45); }
.nc-bac.nay { border-color: var(--xanh); background: rgba(111, 255, 210, .1); box-shadow: 0 0 10px rgba(111, 255, 210, .35); }
.nc-bac.nay span { color: var(--chu); font-weight: 700; }
.nc-bac.dong { border-color: var(--vang); animation: ncNhay 1.4s infinite; }
.nc-bac.dong em { color: var(--vang); border-color: var(--vang); }
.nc-bac.xem { outline: 2px solid var(--vien); outline-offset: 1px; }
.nc-noi { flex: 0 0 8px; height: 2px; background: var(--vien-mo); }
.nc-noi.qua { background: var(--xanh); }
@keyframes ncNhay { 50% { box-shadow: 0 0 12px rgba(255, 216, 74, .6); } }

/* thẻ */
.nc-the { border: 1px solid var(--vien-mo); border-radius: 10px; padding: 10px; background: rgba(79, 227, 255, .04); }
.nc-the.nay { border-color: rgba(111, 255, 210, .5); }
.nc-the.dong { border-color: var(--vang); background: linear-gradient(rgba(255, 216, 74, .08), transparent); }
.nc-dau { display: flex; gap: 10px; align-items: center; }
.nc-dau > img { width: 64px; height: 64px; image-rendering: pixelated; flex: 0 0 auto; }
.nc-nhan { font-size: 11px; letter-spacing: 1.5px; color: var(--vien); font-weight: 700; }
.nc-ten { font-size: 17px; font-weight: 900; color: var(--chu); letter-spacing: .5px; }
.nc-the.dong .nc-ten { color: var(--vang); }
.nc-gio { margin-top: 4px; font-size: 12px; color: var(--xanh); font-weight: 700; }
.nc-muc { font-size: 11px; letter-spacing: 1.5px; color: var(--chu-mo); font-weight: 700; margin: 10px 0 4px; }
.nc-loi { display: grid; gap: 3px; }
.nc-li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .18); }
.nc-li span { color: var(--chu-mo); }
.nc-li b { color: var(--xanh); text-align: right; }
.nc-li b s { color: var(--chu-mo); font-weight: 400; }
.nc-li.mo b { color: var(--vang); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; }
.nc-li.mo img { width: 22px; height: 22px; image-rendering: pixelated; }
.nc-dk { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--chu-mo); margin-bottom: 6px; }
.nc-dk .du { color: var(--xanh); } .nc-dk .thieu { color: var(--do); }
.nc-can { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px; }
.nc-can span { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--vien-mo); font-size: 12px; min-width: 0; }
.nc-can span.du { border-color: rgba(111, 255, 210, .45); }
.nc-can span.thieu { border-color: rgba(255, 106, 106, .5); }
.nc-can img { width: 24px; height: 24px; image-rendering: pixelated; flex: 0 0 auto; }
.nc-can i { font-style: normal; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--chu-mo); }
.nc-can .thieu b { color: var(--do); } .nc-can .du b { color: var(--xanh); }
.nc-dong { margin-top: 10px; }
.nc-ghi { margin-top: 6px; }
.nc-thanh { position: relative; height: 18px; border-radius: 9px; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .15); overflow: hidden; margin: 10px 0 8px; }
.nc-thanh span { display: block; height: 100%; background: linear-gradient(90deg, #c48412, #ffe066); transition: width .4s; }
.nc-thanh em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px #000; }
.nc-nut { display: flex; gap: 6px; }
.nc-nut button { flex: 1; min-height: 48px; border-radius: 8px; border: 1px solid var(--vien); background: rgba(79, 227, 255, .15); font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.nc-nut button.chinh { background: linear-gradient(#c48412, #8a5a0c); border-color: var(--vang); }
.nc-nut button small { font-size: 12px; color: var(--vang); font-weight: 700; }
.nc-nut button.chinh small { color: #fff6c4; }
.nc-nut button:disabled { opacity: .4; }

/* chip tiến độ dưới khung chỉ số */
#nc-chip { display: grid; gap: 2px; margin-top: 2px; padding: 3px 0 0; min-height: 30px; background: none; border: 0; border-top: 1px solid var(--vien-mo); text-align: left; }
#nc-chip span { font-size: 11px; font-weight: 800; color: var(--vang); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nc-chip b { height: 6px; border-radius: 4px; background: rgba(0, 0, 0, .5); overflow: hidden; display: block; }
#nc-chip i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c48412, #ffe066); }

/* hồ sơ: phương tiện */
.hs-pt { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 13px; font-weight: 700; color: var(--xanh); }
.hs-pt img { width: 24px; height: 24px; image-rendering: pixelated; }

@media (max-width: 620px), (max-height: 500px) {
  #than-nc { max-height: none; flex: 1 1 auto; min-height: 0; }
  .nc-bac { min-height: 70px; }
  .nc-bac img { width: 36px; height: 36px; }
  .nc-dau > img { width: 52px; height: 52px; }
  .nc-ten { font-size: 15px; }
}
@media (max-width: 400px) {
  .nc-bac span { font-size: 10px; }
  .nc-can { grid-template-columns: 1fr 1fr; }
}
@media (max-height: 500px) and (min-width: 621px) {
  #than-nc { grid-template-columns: 1fr 1fr; align-items: start; }
  #than-nc > .nc-thang { grid-column: 1 / -1; }
}
.nc-bao { margin-top: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--cam); background: rgba(255, 180, 84, .08); font-size: 13px; display: grid; gap: 4px; }
.nc-bao .nc-muc { margin: 0; color: var(--cam); }
.nc-bao b { color: var(--vang); }
.nc-bao img { width: 18px; height: 18px; image-rendering: pixelated; vertical-align: middle; }