/* Kho cần câu (trinh_khach/src/can_cau_ui.ts) + khung phẩm của cần trên thanh cầm / túi đồ / cửa hàng */
#bang-cc { width: min(640px, calc(100vw - 20px)); }
#bang-cc .tieu-de small { color: var(--chu-mo); font-weight: 600; letter-spacing: 0; margin-left: 6px; text-shadow: none; }
.than-cc { display: flex; gap: 10px; padding: 0 10px 10px; min-height: 0; }
#cc-ds { flex: 1 1 auto; min-width: 0; overflow-y: auto; overscroll-behavior: contain; max-height: 64vh; }
.cc-nhom { font-size: 11px; letter-spacing: 1.2px; color: var(--chu-mo); font-weight: 700; margin: 2px 0 6px; }
.cc-nhom + .cc-luoi { margin-bottom: 10px; }
.cc-luoi { display: grid; grid-template-columns: repeat(auto-fill, 58px); gap: 6px; }
.cc-o { width: 58px; height: 58px; padding: 0; border-radius: 9px; position: relative; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--mau-pham) 22%, transparent), rgba(79, 227, 255, .04) 70%);
  border: 1.5px solid color-mix(in srgb, var(--mau-pham) 70%, transparent); }
.cc-o img { width: 44px; height: 44px; image-rendering: pixelated; }
.cc-o.chon { box-shadow: 0 0 0 2px var(--vien), 0 0 12px rgba(79, 227, 255, .6); }
.cc-o.chua img { filter: grayscale(.9) brightness(.55); }
.cc-o.chua { border-style: dashed; }
.cc-o.vip { animation: ccVip 2.4s ease-in-out infinite; }
.cc-o .cc-dang { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); font-size: 8.5px; font-weight: 800; letter-spacing: .3px;
  background: var(--xanh); color: #04202a; border-radius: 4px; padding: 0 3px; white-space: nowrap; }
.cc-o .cc-dong { position: absolute; top: 1px; right: 4px; font-size: 11px; color: var(--vang); text-shadow: 0 0 4px rgba(255, 216, 74, .8); }
.cc-o .cc-khoa { position: absolute; top: 2px; right: 5px; font-size: 11px; color: var(--chu-mo); font-weight: 800; }
@keyframes ccVip { 50% { box-shadow: 0 0 12px color-mix(in srgb, var(--mau-pham) 80%, transparent), inset 0 0 10px color-mix(in srgb, var(--mau-pham) 40%, transparent); } }

#cc-ct { width: 250px; flex: 0 0 auto; border-left: 1px solid var(--vien-mo); padding-left: 10px; overflow-y: auto; overscroll-behavior: contain; max-height: 64vh; }
.cc-dau { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.cc-anh { width: 68px; height: 68px; flex: 0 0 auto; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--mau-pham); background: radial-gradient(circle, color-mix(in srgb, var(--mau-pham) 30%, transparent), transparent 72%); }
.cc-anh img { width: 60px; height: 60px; image-rendering: pixelated; }
.cc-anh.vip { animation: ccVip 2.4s ease-in-out infinite; }
.cc-ten { font-weight: 900; font-size: 15px; line-height: 1.2; }
.cc-vip { font-size: 10px; font-weight: 900; color: #3a1a00; background: linear-gradient(90deg, #ffd84a, #ff9a6a); border-radius: 4px; padding: 0 4px; vertical-align: 2px; }
.cc-pham { font-size: 11.5px; color: var(--chu-mo); }
.cc-dongdb { font-size: 12px; color: var(--vang); font-weight: 700; margin-top: 2px; }
.cc-ss { font-size: 11px; color: var(--chu-mo); margin: 4px 0 2px; }
.cc-bang { display: grid; gap: 5px; margin: 4px 0 8px; }
.cc-cs { display: grid; grid-template-columns: 84px 1fr; gap: 1px 6px; font-size: 12px; align-items: center; }
.cc-cs span { color: var(--chu-mo); }
.cc-cs b { text-align: right; font-weight: 700; white-space: nowrap; }
.cc-cs b em { font-style: normal; font-size: 11px; margin-left: 5px; }
.cc-cs b em.hon { color: var(--xanh); } .cc-cs b em.kem { color: var(--do); }
.cc-cs i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(79, 227, 255, .12); overflow: hidden; display: block; }
.cc-cs i s { display: block; height: 100%; background: linear-gradient(90deg, var(--vien), var(--xanh)); text-decoration: none; }
.cc-cs.phu { display: block; color: var(--vang); font-size: 11.5px; }
.cc-mota { color: var(--chu-mo); font-size: 12px; margin-bottom: 6px; }
.cc-nguon { font-size: 11.5px; margin-bottom: 6px; color: var(--chu); }
.cc-nguon b { color: var(--vien); }
.cc-nut { display: grid; gap: 6px; }
.cc-nut button { padding: 8px; min-height: 40px; border-radius: 7px; border: 1px solid var(--vien); background: rgba(79, 227, 255, .15); font-weight: 700; }
.cc-nut button.chinh { background: linear-gradient(#1f8c78, #136350); border-color: var(--xanh); }
.cc-nut button:disabled { opacity: .5; }

/* túi đồ: hàng cần câu */
#luoi-tui .cc-tui-nhom { grid-column: 1 / -1; font-size: 11px; letter-spacing: 1.2px; color: var(--chu-mo); font-weight: 700; }
#luoi-tui .cc-tui-nhom span { letter-spacing: 0; font-weight: 400; margin-left: 4px; opacity: .8; }
#luoi-tui .cc-o { width: 54px; height: 54px; }
#luoi-tui .cc-o img { width: 40px; height: 40px; }

/* thanh cầm: ô cần có khung màu phẩm */
.o-cam.cc-cam.p1 { border-color: #6fe27f; } .o-cam.cc-cam.p2 { border-color: #5cb6ff; } .o-cam.cc-cam.p3 { border-color: #c684ff; }
.o-cam.cc-cam.p4 { border-color: #ffd84a; } .o-cam.cc-cam.p5 { border-color: #ff6a5a; }
.o-cam.cc-cam.p4, .o-cam.cc-cam.p5 { background: radial-gradient(circle at 50% 60%, rgba(255, 200, 90, .22), var(--nen) 70%); }

/* cửa hàng: dòng chỉ số cần */
.mon-ch .cc-ch { grid-column: span 2; font-size: 11px; color: var(--chu-mo); line-height: 1.3; }
.mon-ch .cc-ch b { color: var(--vang); }

@media (max-width: 620px), (max-height: 500px) {
  .than-cc { flex-direction: column; gap: 8px; overflow-y: auto; }
  #cc-ds, #cc-ct { max-height: none; overflow: visible; }
  #cc-ct { width: auto; border-left: 0; border-top: 1px solid var(--vien-mo); padding: 8px 0 0; }
  .cc-luoi { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); justify-items: center; }
  .cc-nut { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .cc-nut button { min-height: 44px; }
}