/* Rương chứa đồ + hầm tàu (trinh_khach/src/kho_chua_ui.ts): bảng hai cột TÚI ↔ KHO theo khung bảng thống nhất (.bang.lon) */
#bang-kho { width: min(820px, calc(100vw - 20px)); }
#bang-kho > .tieu-de > span { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1 1 auto; }
#bang-kho > .tieu-de small { color: var(--chu-mo); font-weight: 600; letter-spacing: 0; text-shadow: none; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-chu { min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255, 180, 84, .5); background: rgba(255, 180, 84, .1); color: var(--cam);
  font-weight: 700; font-size: 12.5px; letter-spacing: 0; flex: 0 0 auto; margin-right: 2px; }
.kc-chu:disabled { opacity: .4; }

.than-kho { display: flex; gap: 8px; padding: 0 10px 10px; min-height: 0; flex: 1 1 auto; }
.kc-cot { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--vien-mo); border-radius: 9px; background: rgba(79, 227, 255, .03); }
.kc-cot[data-ben="kho"] { border-color: rgba(255, 216, 74, .4); background: rgba(255, 216, 74, .03); }
.kc-dau { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; min-height: 54px; border-bottom: 1px solid var(--vien-mo); }
.kc-nhan { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; color: var(--vien); white-space: nowrap; }
.kc-cot[data-ben="kho"] .kc-nhan { color: var(--vang); }
.kc-nhan b { margin-left: 4px; padding: 2px 7px; border-radius: 99px; background: rgba(79, 227, 255, .14); color: var(--chu); letter-spacing: 0; font-size: 12px; }
.kc-nhan b.day { background: rgba(255, 106, 106, .22); color: #ffb0b0; }
.kc-dau button { flex: 0 0 auto; min-height: 44px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--vien); background: rgba(79, 227, 255, .15); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.kc-dau button:disabled { opacity: .4; }
.kc-dau button:active:not(:disabled), #kc-che-do button:active { transform: translateY(1px); }

.kc-luoi { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 5px; align-content: start; justify-items: center; padding: 7px; max-height: 52vh; }
.kc-o { width: 50px; height: 50px; }
.kc-o img { width: 36px; height: 36px; }
i.kc-o.trong { display: block; border-radius: 8px; border: 1px dashed rgba(79, 227, 255, .18); background: rgba(79, 227, 255, .025); }
.kc-o.qua { border-color: var(--do); background: rgba(255, 106, 106, .12); }
.kc-o[data-v]:active { transform: scale(.94); }

/* dải giữa: chọn cách chuyển */
#kc-che-do { flex: 0 0 84px; display: flex; flex-direction: column; gap: 5px; align-items: stretch; justify-content: flex-start; }
.kc-cd-nhan { font-size: 10.5px; color: var(--chu-mo); text-align: center; letter-spacing: .3px; line-height: 1.1; }
#kc-che-do button { min-height: 44px; padding: 2px 4px; border-radius: 8px; border: 1px solid var(--vien-mo); background: rgba(79, 227, 255, .07); font-weight: 700; font-size: 12px; line-height: 1.15; }
#kc-che-do button.chon { border-color: var(--xanh); background: rgba(111, 255, 210, .18); color: var(--xanh); box-shadow: 0 0 8px rgba(111, 255, 210, .35); }
#kc-che-do button.kc-phu { color: var(--chu-mo); margin-top: auto; }
#kc-so { width: 100%; min-height: 44px; border-radius: 8px; border: 1px solid var(--vien-mo); background: rgba(4, 14, 26, .8); color: var(--chu); text-align: center; font: 700 16px system-ui, sans-serif; padding: 0 2px;
  -moz-appearance: textfield; appearance: textfield; }
#kc-so::-webkit-outer-spin-button, #kc-so::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* nút Túi trên HUD: báo đầy */
#nut-tui.kc-day { border-color: var(--do); box-shadow: 0 0 10px rgba(255, 106, 106, .6); }
.kc-nhan-day { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); font-size: 9px; font-weight: 900; letter-spacing: .3px; padding: 0 4px; border-radius: 4px;
  background: var(--do); color: #2a0606; white-space: nowrap; pointer-events: none; }
#nut-tui.kc-nhay { animation: kcNhay .55s ease-out; }
@keyframes kcNhay { 0%, 40%, 80% { transform: translateX(-4px) scale(1.12); } 20%, 60% { transform: translateX(4px) scale(1.12); } 100% { transform: none; } }
.tieu-de small.kc-dem { margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: rgba(79, 227, 255, .14); color: var(--chu); font-weight: 700; letter-spacing: 0; text-shadow: none; font-size: 12px; }
.tieu-de small.kc-dem.day { background: rgba(255, 106, 106, .22); color: #ffb0b0; }
#kc-goi-tui { margin: 0 10px 8px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255, 106, 106, .5); background: rgba(255, 106, 106, .1); color: #ffc9c9; font-size: 12.5px; flex: 0 0 auto; }

/* bảng Chế tạo / Thuyền: số có tính cả rương */
.kc-r { font-style: normal; font-size: 10px; color: var(--vang); margin-left: 1px; }
.kc-ghi-che { font-size: 12px; color: var(--chu-mo); padding: 0 2px 2px; }
.kc-ghi-che b { color: var(--vang); }

/* thẻ Hầm tàu trong bảng Thuyền */
.kc-the-ham { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 8px; padding: 8px; border-radius: 9px;
  border: 1px solid rgba(255, 216, 74, .45); background: rgba(255, 216, 74, .06); }
.kc-the-ham img { width: 44px; height: 44px; image-rendering: pixelated; }
.kc-the-ham b { display: block; font-size: 14px; }
.kc-the-ham span { font-size: 12px; color: var(--chu-mo); }
.kc-the-ham button { min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--vang); background: rgba(255, 216, 74, .16); color: var(--vang); font-weight: 800; white-space: nowrap; }

/* ---------- điện thoại ngang / màn thấp: phủ gần hết màn, hai cột cuộn riêng ---------- */
@media (max-width: 620px), (max-height: 500px) {
  .bang.lon#bang-kho { width: auto; height: auto; }
  .kc-luoi { max-height: none; }
}
@media (max-height: 500px) and (min-width: 621px) {
  .than-kho { padding: 0 8px 8px; gap: 6px; }
  .kc-dau { min-height: 50px; padding: 3px 5px 3px 9px; }
  #kc-che-do { flex-basis: 78px; gap: 4px; }
  .kc-cd-nhan { display: none; }
  #bang-kho > .tieu-de small { font-size: 11.5px; }
}
/* ---------- điện thoại dọc: túi trên, dải chọn nằm ngang, kho dưới ---------- */
@media (max-width: 620px) {
  .than-kho { flex-direction: column; gap: 6px; padding: 0 8px 8px; }
  #kc-che-do { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 5px; }
  #kc-che-do button { flex: 1 1 0; min-width: 0; }
  #kc-che-do button.kc-phu { margin-top: 0; }
  .kc-cd-nhan { display: none; }
  #kc-so { flex: 0 0 58px; width: 58px; }
  #bang-kho > .tieu-de small { display: none; }
  .kc-dau button { padding: 0 8px; font-size: 12px; }
}
/* ---------- máy tính / màn cao: bảng nằm nửa dưới để còn thấy rương bật nắp phía trên ---------- */
@media (min-width: 621px) and (min-height: 641px) {
  .bang.lon#bang-kho { top: auto; bottom: calc(92px + var(--day)); transform: translateX(-50%); }
  .kc-luoi { max-height: 30vh; }
}