/* ===== 1.26.19: Bàn làm đồ kiểu "đặt đồ vào ô" (Lò rèn, Hiệu Ngọc, Thuần thú) — nạp sau ui4.css ===== */
#screen-game .bench-win.window.dock{ --Wd: var(--cbWc); }
.bench-win .dk-body { overflow-y: auto; overflow-x: hidden; }
.bx { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 4px 6px 10px; color: var(--dk-text); font-size: var(--ufs, 13px); }
.bx-info { background: #070403; border: 1px solid var(--dk-line); border-radius: 6px; padding: 8px 10px; box-shadow: inset 0 0 14px rgba(0, 0, 0, .8); }
.bx-info p { margin: 0 0 5px; line-height: 1.45; color: #f3e6c8; }
.bx-info p:last-child { margin-bottom: 0; color: #ffe08a; }
.bx-lab { color: var(--dk-gold); font-weight: 700; font-size: .92em; margin-bottom: 4px; }
.bx-field { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bx-field.sm { min-width: 104px; }
.bx-field.wide { align-items: stretch; text-align: left; }
.bx-name { margin-top: 4px; font-weight: 700; color: var(--dk-gold2); }
.bx-sub { margin-top: 2px; color: var(--dk-dim); font-size: .9em; }
.bx-line { text-align: center; padding: 7px 8px; border: 1px solid var(--dk-line2); border-radius: 5px; background: rgba(0, 0, 0, .35); color: #f3e6c8; }

/* Ô đặt vật phẩm */
.bx-slot { position: relative; width: 52px; height: 52px; padding: 0; border-radius: 6px; cursor: pointer;
  border: 2px solid #8a6838; background-color: #120a05; background-size: 84% auto; background-position: center; background-repeat: no-repeat;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .9), 0 0 0 1px #2a1a0c; flex: 0 0 auto; }
.bx-slot.big { width: 68px; height: 68px; }
.bx-slot.sm { width: 40px; height: 40px; cursor: default; display: inline-block; }
.bx-slot:not(.has):hover { border-color: var(--dk-gold); }
.bx-slot.has { border-color: #c99a4e; }
.bx-slot.bad { border-color: var(--dk-bad); }
.bx-slot .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2px; font-size: 10.5px; line-height: 1.15; color: #7d6448; }
.bx-slot .q { position: absolute; right: 2px; bottom: 1px; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.bx-slot .pl { position: absolute; left: 2px; top: 1px; }
.bx-anvil { position: relative; display: inline-block; }
.bx-fx { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; transform: translate(-50%, -50%); pointer-events: none; }

/* Hàng nguyên liệu: các ô đặt cạnh nhau */
.bx-mats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; padding: 8px 4px; border: 1px solid var(--dk-line2); border-radius: 6px; background: rgba(0, 0, 0, .25); }
.bx-pair { display: flex; align-items: flex-start; justify-content: center; gap: 14px; }
.bx-arrow { align-self: center; margin-top: 14px; color: var(--dk-gold); font-size: 22px; }

/* Bảng thông số */
.bx-kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 1px solid var(--dk-line2); border-radius: 5px; background: rgba(0, 0, 0, .35); }
.bx-kv .k { color: var(--dk-gold); font-weight: 600; }
.bx-kv .v { color: var(--dk-text); text-align: right; font-weight: 700; }
.bx-kv.rate .v { color: #ff8a5a; }
.bx-kv.warn .v { color: var(--dk-bad); }
.bx-table { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px; border: 1px solid var(--dk-line2); border-radius: 5px; background: rgba(0, 0, 0, .25); }
.bx-tr { display: grid; grid-template-columns: 1fr auto 26px auto; gap: 6px; align-items: center; padding: 2px 0; }
.bx-tr span { color: var(--dk-dim); }
.bx-tr b { text-align: right; }
.bx-tr b.up { color: var(--dk-good); }
.bx-tr em { color: var(--dk-gold); font-style: normal; text-align: center; }
.bx-cost { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 6px 10px; border: 1px solid var(--dk-line2); border-radius: 5px; background: rgba(0, 0, 0, .35); }
.bx-cost .k { margin-right: auto; color: var(--dk-gold); font-weight: 600; }
.bx-cost i { width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.bx-cost.bad b { color: var(--dk-bad); }
.bx-warn { margin: 0; text-align: center; color: var(--dk-bad); font-size: .92em; }
.bx-res { margin: 0; text-align: center; font-weight: 700; }
.bx-res.ok { color: var(--dk-good); }
.bx-res.fail { color: var(--dk-bad); }
.bx-act { display: flex; justify-content: center; gap: 10px; }
.bx-act .pbtn.big { min-width: 150px; }
.bx-step { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.bx-step b { min-width: 20px; text-align: center; }

/* Lỗ khảm */
.bx-holes { display: flex; gap: 10px; justify-content: center; }
.bx-hole { position: relative; width: 50px; height: 50px; padding: 0; border-radius: 6px; border: 2px solid #6a4c2c; background: #120a05 center / 80% auto no-repeat; box-shadow: inset 0 0 10px rgba(0, 0, 0, .9); cursor: default; }
.bx-hole.shut { background-color: #050302; border-color: #3a2814; opacity: .75; }
.bx-hole.open { border-color: #9c7a44; }
.bx-hole.gem { border-color: #d8a648; cursor: pointer; }
.bx-hole.sel { box-shadow: 0 0 0 2px var(--dk-good), inset 0 0 10px rgba(0, 0, 0, .9); }
.bx-hole .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #7d6448; text-align: center; line-height: 1.1; }

/* Thú cưng */
.bx-petrow { display: flex; gap: 8px; align-items: stretch; }
.bx-petname { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 8px; border: 1px solid var(--dk-line); border-radius: 5px; background: #070403; font-weight: 700; }
.bx-petname .ph { color: #7d6448; font-weight: 400; }
.bx-petic { width: 36px; height: 36px; flex: 0 0 auto; }
.bx-petic canvas { width: 100%; height: 100%; }
.bx-stage { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px; border: 1px solid var(--dk-line2); border-radius: 6px; background: radial-gradient(ellipse at 50% 70%, #3a2614 0%, #0c0704 75%); }
.bx-art { display: flex; flex-direction: column; align-items: center; min-height: 110px; justify-content: center; }
.bx-art canvas { width: 160px; height: 120px; }
.bx-artname { color: var(--dk-gold2); font-weight: 700; }
.bx-nav { width: 34px; height: 34px; border-radius: 6px; border: 1px solid #5a3410; background: linear-gradient(180deg, #f0b84a, #b5741c); color: #3a1f08; font-size: 22px; font-weight: 900; line-height: 1; cursor: pointer; }
.bx-nav:disabled { opacity: .4; cursor: default; }
.bx-skills { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 6px; border: 1px solid var(--dk-line2); border-radius: 6px; background: #070403; }
.bx-sk { position: relative; aspect-ratio: 1; border-radius: 6px; border: 2px solid #5a3e22; background: #120a05 center / cover no-repeat; }
.bx-sk.has { border-color: #c99a4e; }
.bx-sk.shut { background: #030201; border-color: #2a1a0c; }
.bx-sk .star { position: absolute; right: 2px; top: 0; color: #ffd45a; font-style: normal; font-size: 12px; text-shadow: 0 0 3px #000; }

/* Bảng chọn nổi (bấm ô trống) */
.bx-pick { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); border-radius: inherit; }
.bx-pickbox { width: min(92%, 420px); max-height: 84%; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--dk-bg1), var(--dk-bg2)); border: 1px solid var(--dk-line); border-radius: 8px; box-shadow: 0 8px 30px rgba(0, 0, 0, .7); }
.bx-pickh { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--dk-line2); color: var(--dk-gold); }
.bx-pickgrid { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.bx-pickc { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--dk-line2); border-radius: 5px; background: rgba(0, 0, 0, .35); color: var(--dk-text); text-align: left; cursor: pointer; }
.bx-pickc:hover { border-color: var(--dk-gold); }
.bx-pickc .bx-slot.sm { position: relative; }
.bx-pickt { display: flex; flex-direction: column; }
.bx-pickt small { color: var(--dk-dim); }
.bx-none { margin: 10px; text-align: center; color: var(--dk-dim); }

@media (max-height: 560px), (max-width: 900px) {
  .bx { gap: 6px; padding: 2px 3px 8px; }
  .bx-slot { width: 42px; height: 42px; }
  .bx-slot.big { width: 52px; height: 52px; }
  .bx-hole { width: 40px; height: 40px; }
  .bx-field.sm { min-width: 84px; }
  .bx-art { min-height: 100px; }
  .bx-art canvas { width: 140px; height: 105px; }
  .bx-info { padding: 6px 8px; order: 99; }   /* điện thoại: bảng chữ hướng dẫn xuống cuối, ô đặt đồ lên trước */
  .bx-info p { font-size: .9em; }
  .bx-kv, .bx-cost { padding: 4px 8px; }
}

/* ===== 1.26.19: Nấu ăn / Chế thuốc kiểu ảnh mẫu ===== */
.cr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.25fr); gap: 8px; height: 100%; min-height: 0; color: var(--dk-text, #f2e2c4); }
.cr-grid > section { border: 1px solid #6a4c2c; border-radius: 6px; background: rgba(0, 0, 0, .35); padding: 8px; min-height: 0; overflow-y: auto; }
.cr-ptop { display: flex; gap: 8px; align-items: center; }
.cr-pic { width: 46px; height: 46px; flex: 0 0 auto; border: 2px solid #c99a4e; border-radius: 6px; background: #120a05 center / 84% auto no-repeat; display: block; }
.cr-pinfo { display: flex; flex-direction: column; gap: 2px; }
.cr-pinfo b { color: #f0c878; font-size: 1.05em; }
.cr-pinfo span { font-size: .9em; color: #ffe08a; }
.cr-bar { height: 6px; margin: 8px 0; border-radius: 3px; background: #1a100a; overflow: hidden; border: 1px solid #4f3820; }
.cr-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6fbf4f, #b8e07a); }
.cr-desc { margin: 4px 0; line-height: 1.45; font-size: .92em; }
.cr-desc.dim { color: #b89d76; }
.cr-lh { padding: 5px 8px; margin: -2px -2px 6px; border-radius: 4px; background: linear-gradient(180deg, #9a3b22, #6a2414); color: #ffe7ac; font-weight: 700; text-align: center; }
.cr-rows { display: flex; flex-direction: column; gap: 4px; }
.cr-rec { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 8px; border: 1px solid transparent; border-radius: 4px; background: rgba(255, 230, 170, .04); color: #e6d3ae; text-align: left; cursor: pointer; }
.cr-rec small { color: #b89d76; font-size: .85em; }
.cr-rec.ok small { color: #8fe07a; }
.cr-rec.lock { opacity: .55; }
.cr-rec.sel { border-color: #f0c878; background: rgba(240, 200, 120, .14); }
.cr-make { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cr-out { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cr-oic { width: 58px; height: 58px; border: 2px solid #c99a4e; border-radius: 6px; background: #120a05 center / 84% auto no-repeat; display: block; }
.cr-out b { color: #f0c878; }
.cr-odesc { margin: 0; font-size: .88em; color: #d8c49e; }
.cr-meta { display: flex; justify-content: space-between; width: 100%; font-size: .88em; color: #ffe08a; }
.cr-meta .bad { color: #ff7b6b; }
.cr-ings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
.cr-ing { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cr-slot { width: 46px; height: 46px; display: block; border: 2px solid #6a4c2c; border-radius: 6px; background: #120a05 center / 84% auto no-repeat; box-shadow: inset 0 0 8px rgba(0, 0, 0, .9); }
.cr-ing.empty .cr-slot { background-color: #070403; border-color: #3a2814; }
.cr-ing small { font-size: .85em; color: #8fe07a; font-weight: 700; }
.cr-iname { font-style: normal; font-size: .78em; color: #d8c49e; line-height: 1.1; text-align: center; }
.cr-ing.bad small { color: #ff7b6b; }
.cr-step { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.cr-pm { width: 30px; height: 30px; border-radius: 5px; border: 1px solid #5a3410; background: linear-gradient(180deg, #f0b84a, #b5741c); color: #3a1f08; font-size: 18px; font-weight: 900; cursor: pointer; }
.cr-n { min-width: 60px; padding: 4px 8px; border: 1px solid #6a4c2c; border-radius: 4px; background: #070403; }
.cr-acts { display: flex; gap: 10px; width: 100%; justify-content: space-between; }
.cr-acts .pbtn { flex: 1; }
@media (max-height: 560px), (max-width: 900px) {
  .cr-grid { gap: 5px; font-size: 11px; }
  .cr-grid > section { padding: 5px; }
  .cr-slot, .cr-pic { width: 36px; height: 36px; }
  .cr-oic { width: 44px; height: 44px; }
}

/* ===== 1.26.19: bảng Kỹ năng kiểu "bí tịch môn phái" ===== */
#win-character .skills-pane.sk2:not([hidden]) { flex-direction: column !important; gap: 6px; }
#win-character .sk2-tabs { display: flex; gap: 6px; justify-content: center; flex: 0 0 auto; }
#win-character .sk2-tabs button { min-width: 110px; padding: 5px 14px; border-radius: 5px; border: 1px solid #6a4c2c; background: linear-gradient(180deg, #4a3220, #2a1a0e); color: #d8c49e; font-weight: 700; cursor: pointer; }
#win-character .sk2-tabs button.active { background: linear-gradient(180deg, #f0b84a, #b5741c); color: #3a1f08; border-color: #5a3410; }
#win-character .sk2-main { flex: 1 1 auto; min-height: 0; display: flex; gap: 8px; }
#win-character .sk2 .sk-grid { grid-template-columns: repeat(3, 1fr); }
#win-character .sk2-part { display: flex; flex-direction: column; gap: 6px; }
#win-character .sk2-bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 5px; border: 1px solid #4f3820; border-radius: 5px; background: #070403; }
#win-character .sk2-cell { position: relative; aspect-ratio: 1; padding: 0; border-radius: 5px; border: 2px solid #8a6838; background: #120a05 center / cover no-repeat; cursor: pointer; }
#win-character .sk2-cell.empty { background: #030201; border-color: #2a1a0c; cursor: default; }
#win-character .sk2-cell.sel { border-color: #ffe7ac; box-shadow: 0 0 6px rgba(255, 220, 120, .6); }
#win-character .sk2-cell .n { position: absolute; right: 2px; bottom: 0; font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
#win-character .sk2-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dashed rgba(240, 200, 120, .3); }
#win-character .sk2-ic { width: 44px; height: 44px; flex: 0 0 auto; border: 2px solid #c99a4e; border-radius: 6px; background: #120a05 center / cover no-repeat; }
#win-character .sk2-ht { display: flex; flex-direction: column; gap: 2px; }
#win-character .sk2-ht b { color: var(--dk-gold2) !important; font-size: 1.08em; }
#win-character .sk2-ht span { color: var(--dk-good) !important; font-weight: 700; font-size: .92em; }
#win-character .sk2-req { color: var(--dk-good) !important; font-weight: 700; margin-top: 4px; }
#win-character .sk2-req.bad { color: var(--dk-bad) !important; }
#win-character .sk2-cost { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
#win-character .sk2-c, #win-character .sk2-ch { display: grid; grid-template-columns: 44px 1fr 1fr; gap: 6px; align-items: center; padding: 4px 7px; border: 1px solid #6a4c2c; border-radius: 4px; background: linear-gradient(180deg, #3a1a10, #24100a); }
#win-character .sk2-ch { background: none; border-color: transparent; padding-top: 0; padding-bottom: 0; }
#win-character .sk2-ch b, #win-character .sk2-ch em { color: #b89d76 !important; font-size: .82em; font-weight: 600; }
#win-character .sk2-c span { color: #e8b88a !important; font-size: .88em; }
#win-character .sk2-c b, #win-character .sk2-c em, #win-character .sk2-ch b, #win-character .sk2-ch em { text-align: right; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#win-character .sk2-c b { color: #fff !important; font-size: .9em; }
#win-character .sk2-c em { color: #d8c49e !important; font-size: .9em; }
#win-character .sk2-c.bad b { color: var(--dk-bad) !important; }

/* ===== 1.26.20: Tẩy luyện ===== */
.bx-lines { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border: 1px solid var(--dk-line2); border-radius: 6px; background: #070403; flex: 1; min-width: 0; }
.bx-lh { color: var(--dk-gold); font-weight: 700; text-align: center; padding-bottom: 4px; border-bottom: 1px dashed rgba(240, 200, 120, .3); margin-bottom: 2px; }
.bx-ln { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; background: rgba(255, 230, 170, .04); }
.bx-ln .nm { flex: 1; color: #d8c49e; }
.bx-ln b { color: #8fe0a0; }
.bx-ln.lock { background: rgba(240, 200, 120, .12); box-shadow: inset 0 0 0 1px rgba(240, 200, 120, .45); }
.bx-cmp { display: flex; gap: 8px; }
.bx-lines.new { box-shadow: inset 0 0 0 1px rgba(143, 224, 122, .5); }
.bx-lines.new .bx-lh { color: var(--dk-good); }
@media (max-width: 520px) { .bx-cmp { flex-direction: column; } }
.bx-seg .pbtn:not(.gold) { filter: grayscale(.7) brightness(.7); }
/* 1.27.0: bảng Kỹ năng tự do — 4 thẻ bí tịch, hàng 5 ô lắp kỹ năng */
#win-character .sk2-schools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
#win-character .sk2-schools button { padding: 4px 2px; border-radius: 5px; border: 1px solid #6a4c2c; background: linear-gradient(180deg, #3a2618, #22140a); color: #d8c49e; font-weight: 700; font-size: .86em; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#win-character .sk2-schools button.active { color: #3a1f08; border-color: #5a3410; background: linear-gradient(180deg, #f0d08a, #c9933a); }
#win-character .sk2-cell.basic { border-color: #6a5a40; cursor: default; }
#win-character .sk2-cell.slot.empty { cursor: pointer; }
#win-character .sk2-cell.pick { border-color: #9fe07a; box-shadow: 0 0 7px rgba(150, 230, 110, .75); animation: skPick 1s ease-in-out infinite; }
@keyframes skPick { 50% { box-shadow: 0 0 2px rgba(150, 230, 110, .3); } }
#win-character .sk2-cell .k { position: absolute; left: 3px; top: 1px; font-size: 9px; font-weight: 800; color: #ffe7ac; text-shadow: 0 0 3px #000, 0 0 3px #000; }
#win-character .sk-cell.on-bar::after { content: ''; position: absolute; right: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: #9fe07a; box-shadow: 0 0 4px #000; }
#win-character .sk-cell { position: relative; }
#win-character .sk2-ht small.sk2-school { color: #c9b48f !important; font-size: .82em; font-weight: 600; }
/* 1.27.0: lưới kỹ năng co theo bề ngang khung (không bị cắt mép trái khi khung hẹp) */
#win-character .sk-left #skl-grid { grid-template-columns: repeat(3, minmax(0, var(--skc))) !important; grid-auto-rows: auto !important; width: 100%; }
#win-character .sk-left #skl-grid .sk-cell { width: 100% !important; height: auto !important; aspect-ratio: 1; }
#win-character .sk2-part[data-sk2p="skill"] { width: 100%; }
/* 1.27.1: số ô đang lắp trên ô kỹ năng · hàng chọn ô khi bấm "Lắp vào ô" */
#win-character .sk-cell .slot-k { position: absolute; left: 3px; top: 2px; z-index: 2; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #3f9a2a; color: #fff; font-size: 10px; font-weight: 900; line-height: 15px; text-align: center; box-shadow: 0 0 3px #000; }
#win-character .sk-pick { flex: 0 0 auto; margin: 4px 0 6px; padding: 6px; border: 1px solid #6a4c2c; border-radius: 6px; background: rgba(10, 6, 3, .6); }
#win-character .sk-pick-h { color: #ffe7ac !important; font-weight: 700; font-size: .9em; margin-bottom: 5px; }
#win-character .sk-pick-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
#win-character .sk-pick-slot { position: relative; aspect-ratio: 1; padding: 0; border-radius: 6px; border: 2px solid #9fe07a; background: #120a05 center / cover no-repeat; cursor: pointer; box-shadow: 0 0 6px rgba(150, 230, 110, .5); }
#win-character .sk-pick-slot.empty { background: #050302; }
#win-character .sk-pick-slot .k { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
/* ============ 1.27.2 Thẻ Kỹ năng kiểu bảng tâm pháp (một cột) ============ */
#win-character .sk2-main.skv-mode .sk-right { display: none !important; }
#win-character .sk2-main.skv-mode .sk-left { flex: 1 1 auto !important; width: auto !important; max-width: none !important; align-items: stretch !important; padding: 8px 10px !important; }
#win-character .sk2-part[data-sk2p="skill"] { flex: 1 1 auto; min-height: 0; }
#win-character .skv { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; }
#win-character .skv-books { display: flex; justify-content: center; gap: 10px; }
#win-character .skv-book { width: 50px; height: 50px; padding: 0; border-radius: 4px; border: 2px solid #5a4528; background: #0c0805 center / cover no-repeat; cursor: pointer; box-shadow: inset 0 0 0 1px #000, 0 2px 4px rgba(0,0,0,.6); filter: brightness(.72) saturate(.8); transition: filter .15s, transform .15s; }
#win-character .skv-book:hover { filter: none; transform: translateY(-1px); }
#win-character .skv-book.on { filter: none; border-color: #ffd36b; box-shadow: inset 0 0 0 1px #000, 0 0 0 2px rgba(255,211,107,.35), 0 0 12px rgba(255,200,90,.55); }
#win-character .skv-bookname { text-align: center; font-size: .82em; color: #c9b48f !important; margin-top: -2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#win-character .skv-skills { display: flex; justify-content: center; gap: 8px; padding: 6px 4px; border-top: 1px solid rgba(240,200,120,.18); border-bottom: 1px solid rgba(240,200,120,.18); background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15)); }
#win-character .skv-sk { position: relative; width: 44px; height: 44px; padding: 0; border-radius: 4px; border: 2px solid #3f6aa8; background: #0c0805 center / cover no-repeat; cursor: pointer; box-shadow: inset 0 0 0 1px #000; }
#win-character .skv-sk.ult { border-color: #c99a2e; }
#win-character .skv-sk.off { filter: grayscale(.85) brightness(.55); }
#win-character .skv-sk.can { filter: grayscale(.4) brightness(.8); border-color: #e8c66a; }
#win-character .skv-sk.on { filter: none; border-color: #ffe7ac; box-shadow: inset 0 0 0 1px #000, 0 0 10px rgba(255,220,130,.75); }
#win-character .skv-sk .lv { position: absolute; right: 2px; bottom: 0; font-size: 10px; font-weight: 900; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
#win-character .skv-sk .slot { position: absolute; left: -5px; top: -5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #3f9a2a; color: #fff; font-size: 10px; font-weight: 900; line-height: 15px; box-shadow: 0 0 3px #000; }
#win-character .skv-head { display: flex; align-items: center; gap: 8px; }
#win-character .skv-hic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 4px; border: 2px solid #c99a4e; background: #0c0805 center / cover no-repeat; }
#win-character .skv-hname { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 4px 10px; border: 1px solid #5a4528; border-radius: 3px; background: rgba(0,0,0,.45); }
#win-character .skv-hname b { color: #ffe08a !important; font-size: 1.02em; }
#win-character .skv-hname span { color: #d8c49e !important; font-size: .9em; }
#win-character .skv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
#win-character .skv-st { display: flex; gap: 5px; align-items: baseline; min-width: 0; padding: 3px 8px; border: 1px solid #4a3a22; border-radius: 3px; background: rgba(0,0,0,.4); font-size: .9em; }
#win-character .skv-st.wide { grid-column: 1 / -1; }
#win-character .skv-st span { flex: 0 0 auto; color: #c9a86a !important; }
#win-character .skv-st b { flex: 1 1 auto; min-width: 0; color: #f6ead2 !important; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#win-character .skv-st.bad b { color: var(--dk-bad, #ff6a5a) !important; }
#win-character .skv-st.ok b { color: var(--dk-good, #8fe07a) !important; }
#win-character .skv-effect { padding: 4px 8px; border: 1px solid #4a3a22; border-radius: 3px; background: rgba(0,0,0,.4); color: #f0d890 !important; font-size: .88em; line-height: 1.35; }
#win-character .skv-desc { flex: 1 1 auto; min-height: 56px; overflow-y: auto; padding: 6px 9px; border: 1px solid #5a4528; border-radius: 3px; background: rgba(0,0,0,.55); font-size: .9em; line-height: 1.45; scrollbar-width: thin; }
#win-character .skv-desc p { margin: 0 0 4px; color: #e8dcc0 !important; }
#win-character .skv-desc .g { color: #8fe07a !important; }
#win-character .skv-desc .nx { margin-top: 4px; color: #9fd0ff !important; }
#win-character .skv-pick { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px; border: 1px dashed rgba(150,230,110,.5); border-radius: 4px; }
#win-character .skv-pick > span { color: #ffe7ac !important; font-weight: 700; font-size: .88em; margin-right: 2px; }
#win-character .skv-slot { position: relative; width: 36px; height: 36px; padding: 0; border-radius: 4px; border: 2px solid #9fe07a; background: #0c0805 center / cover no-repeat; cursor: pointer; box-shadow: 0 0 6px rgba(150,230,110,.45); }
#win-character .skv-slot.empty { background: #050302; }
#win-character .skv-slot span { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); font-size: 10px; font-weight: 900; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
#win-character .skv-acts { display: flex; justify-content: center; gap: 10px; }
#win-character .skv-acts .pbtn { min-width: 120px; }
@media (max-height: 560px), (max-width: 900px) {
  #win-character .skv { gap: 4px; }
  #win-character .skv-book { width: 38px; height: 38px; }
  #win-character .skv-sk, #win-character .skv-hic { width: 34px; height: 34px; }
  #win-character .skv-bookname { display: none; }
  #win-character .skv-st { padding: 2px 6px; font-size: .82em; }
}
#win-character .skv-desc .nx span + span { margin-left: .35em; }
#win-character .skv > :not(.skv-desc) { flex-shrink: 0; }
/* Điện thoại / màn thấp: cả thẻ cuộn được, hàng nút luôn nằm dưới đáy */
@media (max-height: 560px), (max-width: 900px) {
  #win-character .skv { overflow-y: auto; scrollbar-width: thin; }
  #win-character .skv-desc { flex: 0 0 auto; min-height: 0; overflow: visible; }
  #win-character .skv-acts { position: sticky; bottom: 0; z-index: 2; padding: 4px 0 2px; background: linear-gradient(180deg, rgba(20,12,6,0), rgba(20,12,6,.95) 35%); }
  #win-character .skv-acts .pbtn { min-width: 100px; }
}
/* 1.27.3: lưới Tiềm năng co theo bề ngang khung (máy tính bị cắt hai bên) */
#win-character .sk-left #pot-grid { grid-template-columns: repeat(3, minmax(0, var(--skc))) !important; grid-auto-rows: auto !important; width: 100%; justify-content: center; }
#win-character .sk-left #pot-grid .sk-cell { width: 100% !important; height: auto !important; aspect-ratio: 1; }
#win-character .sk2-part[data-sk2p="pot"] { width: 100%; }