/* Giao dien kieu JX1 (VNG ui3): cua so noi Nhan vat + Vo cong — xem js/ui-jx1.js */
#jx1Win { position: absolute; inset: 0; z-index: 9; background: rgba(0, 0, 0, .5); }
#jx1Win.hidden { display: none; }
#jx1Win .jx1-panel { position: absolute; left: 50%; top: 50%; transform-origin: center center; background-color: #15120e;
  background-repeat: no-repeat; background-size: 100% 100%; box-shadow: 0 6px 24px #000c;
  font: 12px/14px Tahoma, Arial, sans-serif; text-shadow: 1px 1px 0 #000; user-select: none; }
.jx1-f { position: absolute; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jx1-add { position: absolute; width: 14px; height: 14px; padding: 0; border: 0; cursor: pointer;
  background: url('ui/jx1/cong-diem-1.png') no-repeat; }
.jx1-add:hover { filter: brightness(1.35); }
.jx1-add.off { background-image: url('ui/jx1/cong-diem-2.png'); cursor: default; filter: none; }
.jx1-eq { position: absolute; display: flex; align-items: center; justify-content: center; }
.jx1-eq.has { cursor: pointer; }
.jx1-eq.has:hover { outline: 1px solid rgb(124, 255, 125); }
.jx1-eq img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.jx1-face { position: absolute; object-fit: contain; }
.jx1-hit { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; }
.jx1-hit:hover { background: rgba(124, 255, 125, .12); }
.jx1-page { position: absolute; background-repeat: no-repeat; }
.jx1-sk { position: absolute; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.jx1-sk img { width: 36px; height: 36px; display: block; image-rendering: pixelated; filter: grayscale(.85) brightness(.6); }
.jx1-sk.learned img { filter: none; }
.jx1-sk.lock img { filter: grayscale(1) brightness(.35); }
.jx1-sk.main { outline: 1px solid rgb(255, 217, 78); }
.jx1-sk:hover { outline: 1px solid rgb(124, 255, 125); }
.jx1-skl { position: absolute; width: 36px; height: 13px; font-size: 10px; line-height: 13px; text-align: center; color: rgb(169, 211, 190); }
.jx1-pg { position: absolute; padding: 0; border: 0; background-color: transparent; background-repeat: no-repeat; cursor: pointer; }
/* nut + 14px: vung cham rong hon tren dien thoai */
@media (pointer: coarse) { .jx1-add[data-skid]::after { content: ""; position: absolute; inset: -8px -3px -2px -2px; } }
.jx1-eq.bad { background: rgba(200, 0, 0, .28); outline: 1px solid rgb(255, 60, 40); }
.jx1-eq.bad img { filter: sepia(1) saturate(4) hue-rotate(-30deg) brightness(.8); }

/* anh nen tach rieng de gan dai nut JX duoi cua so (xem renderChar / renderSkill trong js/ui-jx1.js) */
#jx1Win .jx1-panel.jx1-charwin, #jx1Win .jx1-panel.jx1-skwin { background: none; box-shadow: none; }
.jx1-bmp { position: absolute; left: 0; top: 0; width: 100%; height: 430px; background: #15120e no-repeat 0 0 / 100% 100%; clip-path: inset(4px 0 11px 0); }
.jx1-strip { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; gap: 4px; padding: 4px 6px; box-sizing: border-box;
  background: rgba(16, 13, 9, .96); border: 1px solid #6e5c34; border-top-color: #8a7240; box-shadow: inset 0 0 0 1px #000, 0 6px 18px #000c; color: #e8dfc8; }
.jx1-charwin .jx1-strip { left: 4px; right: 4px; }
.jx1-skwin .jx1-strip { padding: 4px; }
.jx1-srow { display: flex; align-items: center; gap: 4px; height: var(--sb-h, 26px); min-width: 0; }
.jx1-sbtn { flex: 1 1 0; min-width: 0; height: 100%; padding: 0 4px; border: 1px solid #8a7240; border-radius: 0; background: linear-gradient(#4a3c22, #241c10);
  color: #f3dfa2; font: 12px/1.1 Tahoma, Arial, sans-serif; text-shadow: 1px 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 0 1px 0 #ffffff14; cursor: pointer; }
.jx1-sbtn b { color: rgb(255, 217, 78); font-weight: 400; }
.jx1-sbtn:hover:not(:disabled) { filter: brightness(1.25); }
.jx1-sbtn:active:not(:disabled) { filter: brightness(.9); box-shadow: inset 0 2px 3px #000a; }
.jx1-sbtn:disabled { opacity: .45; cursor: default; }
.jx1-sbtn.on { color: rgb(255, 217, 78); border-color: #c9a24e; background: linear-gradient(#5a4520, #2a1f0e); }
.jx1-sbtn.red { color: #ffb0a0; }
.jx1-sbtn.jx1-warn { color: rgb(255, 90, 70); border-color: #9b3a2a; background: linear-gradient(#3a1a12, #1c0c08); text-align: left; padding: 0 8px; }
.jx1-slbl { flex: 0 0 auto; min-width: 62px; display: flex; flex-direction: column; justify-content: center; line-height: 13px; color: #d9c58a; font-size: 12px; padding-right: 2px; }
.jx1-slbl small { color: #9d927a; font-size: 10px; }
.jx1-minus, .jx1-plus { font-size: 11px; }
.jx1-plus { color: rgb(0, 255, 0); }
.jx1-mainrow .jx1-mainname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.jx1-mainname em { font-style: normal; color: #9d927a; margin-right: 4px; }
.jx1-mainname b { color: rgb(255, 217, 78); font-weight: 400; }
.jx1-mainrow .jx1-sbtn { flex: 0 0 58px; font-size: 11px; }
.jx1-skstrip .jx1-sbtn { font-size: 11px; padding: 0 2px; }
.jx1-slot { position: relative; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 1px solid #8a7240; border-radius: 0; background: #0c0a06; cursor: pointer; }
.jx1-slot img { width: 32px; height: 32px; display: block; image-rendering: pixelated; }
.jx1-slot i { position: absolute; left: 1px; top: 0; font: 10px/12px Tahoma, Arial, sans-serif; font-style: normal; color: rgb(255, 217, 78); text-shadow: 1px 1px 0 #000, -1px 0 0 #000; }
.jx1-slot.empty { border-color: #4a3f27; }
.jx1-slot:hover { outline: 1px solid rgb(124, 255, 125); }
.jx1-bk { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; line-height: 13px; font-size: 10px; color: #9d927a; white-space: nowrap; }
.jx1-bk b { color: rgb(0, 255, 0); font-weight: 400; font-size: 12px; }

.jx1-skslots { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 6px 0; color: #d9c58a; }
.jx1-skslots span { margin-right: 4px; }
#modal #mBody .jx1-skslots .btn { flex: 0 0 auto; width: 40px; min-width: 40px; padding: 3px 0; }
.jx1-pick { display: flex; flex-direction: column; gap: 3px; }
.jx1-pickrow, .jx1-deadrow { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 3px 6px; border: 1px solid #3b3322; border-radius: 0;
  background: rgba(20, 16, 10, .6); color: #e8dfc8; font: 12px Tahoma, Arial, sans-serif; text-shadow: 1px 1px 0 #000; text-align: left; cursor: pointer; }
.jx1-pickrow img { width: 32px; height: 32px; image-rendering: pixelated; }
.jx1-pickrow b, .jx1-deadrow b { color: rgb(255, 217, 78); font-weight: 400; }
.jx1-pickrow small, .jx1-deadrow small { margin-left: auto; color: #9d927a; font-size: 11px; }
.jx1-deadrow { flex-direction: column; align-items: flex-start; gap: 1px; margin-bottom: 3px; }
.jx1-deadrow small { margin-left: 0; color: rgb(255, 90, 70); }
.jx1-pickrow.on { border-color: #c9a24e; }
.jx1-pickrow:hover:not(:disabled), .jx1-deadrow:hover { border-color: #8a7240; filter: brightness(1.15); }
.jx1-pickrow:disabled { opacity: .45; cursor: default; }

/* mo cua so JX1 thi an cot thong tin, khung danh rong het chieu ngang (xem setOpen trong js/ui-jx1.js) */
/* man doc (dien thoai): an cot di thi khung danh khong gian ra va bo cuc vo, nen giu cot nhung an noi dung the cu sau cua so */
body.jx1-open #panel > .tab { visibility: hidden; }
@media (orientation: landscape) {
  body.jx1-open #panel { display: none !important; }
  body.jx1-open #app { grid-template-columns: 1fr; grid-template-areas: "top" "battle" "tabs"; }
}

/* bang chi tiet mon do kieu JX1: khung den trong mo, goc vuong, chu can giua, dong thuoc tinh mau nhu game goc */
#modal.item-preview-modal .mbox, #modal.item-tooltip-preview .mbox {
  width: min(100%, 380px); padding: 10px 12px 12px; border: 1px solid #6e5c34; border-radius: 0;
  background: rgba(0, 0, 0, .84) !important; background-image: none !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #2b2418, 0 10px 30px #000b;
  font: 12px/17px Tahoma, Arial, sans-serif; text-align: center; text-shadow: 1px 1px 0 #000;
}
#modal.item-preview-modal { background: rgba(0, 0, 0, .35); }
#modal.item-preview-modal .idet, #modal.item-tooltip-preview .idet { flex-direction: column; gap: 4px; }
#modal.item-preview-modal .idet .pic, #modal.item-tooltip-preview .idet .pic { border-radius: 0; border-color: #4a3f27; background: transparent; }
#modal.item-preview-modal .idet h4, #modal.item-tooltip-preview .idet h4 { font: 14px/18px Tahoma, Arial, sans-serif; }
#modal.item-preview-modal .idet small, #modal.item-tooltip-preview .idet small { display: block; font-size: 11px; }
#modal.item-preview-modal .sl, #modal.item-tooltip-preview .sl { margin: 6px 0; font-size: 12px; line-height: 17px; }
#modal.item-preview-modal .sl .b, #modal.item-tooltip-preview .sl .b { color: #fff; }
#modal.item-preview-modal .sl .h, #modal.item-tooltip-preview .sl .h { color: #7d7d7d; }
#modal.item-preview-modal .cmp2, #modal.item-tooltip-preview .cmp2 { border-radius: 0; border-color: #3b3322; background: rgba(20, 16, 10, .6); }
#modal.item-preview-modal .cmpv, #modal.item-tooltip-preview .cmpv { justify-content: center; }
#modal.item-preview-modal .item-segment, #modal.item-tooltip-preview .item-segment { border-radius: 0; }
#modal.item-preview-modal .btnrow, #modal.item-tooltip-preview .btnrow { justify-content: center; gap: 4px; }
#modal.item-preview-modal .btn, #modal.item-tooltip-preview .btn {
  min-height: 24px; padding: 2px 10px; border: 1px solid #8a7240; border-radius: 0;
  background: linear-gradient(#4a3c22, #241c10); color: #f3dfa2; font: 12px Tahoma, Arial, sans-serif; box-shadow: inset 0 1px 0 #ffffff14;
}
#modal.item-preview-modal .btn:hover:not(:disabled), #modal.item-tooltip-preview .btn:hover:not(:disabled) { filter: brightness(1.25); }
#modal.item-preview-modal .mx, #modal.item-tooltip-preview .mx { width: 22px; height: 22px; top: 4px; right: 4px; border-radius: 0; font-size: 12px; }

/* vong sang chay quanh o do xanh / Hoang Kim / Bach Kim — cung hieu ung voi o do cu (style.css .it.goldset::after ...) */
.jx1-eq.goldset,.jx1-eq.platinaset,.jx1-eq.magicitem{isolation:isolate}
.jx1-eq.goldset::after{content:"";position:absolute;inset:1px;padding:1.5px;border-radius:inherit;background:conic-gradient(from var(--gold-ray-angle,0deg),transparent 0deg 288deg,rgba(255,187,56,.12) 303deg,rgba(255,202,83,.72) 321deg,#fff3ba 331deg,#ffb52e 340deg,transparent 352deg 360deg),conic-gradient(from calc(var(--gold-ray-angle-reverse,0deg) + 180deg),transparent 0deg 288deg,rgba(255,187,56,.12) 303deg,rgba(255,202,83,.72) 321deg,#fff3ba 331deg,#ffb52e 340deg,transparent 352deg 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;filter:drop-shadow(0 0 2px #ffc34a99);opacity:.92;pointer-events:none;z-index:3;animation:goldset-sweep 3.2s linear infinite}
.jx1-eq.platinaset::after{content:"";position:absolute;inset:1px;padding:1.5px;border-radius:inherit;background:conic-gradient(from var(--plat-ray-angle,0deg),transparent 0deg 288deg,rgba(45,210,255,.12) 303deg,rgba(86,220,255,.78) 321deg,#fff9a6 331deg,#45cfff 340deg,transparent 352deg 360deg),conic-gradient(from calc(var(--plat-ray-angle-reverse,0deg) + 180deg),transparent 0deg 288deg,rgba(45,210,255,.12) 303deg,rgba(86,220,255,.78) 321deg,#fff9a6 331deg,#45cfff 340deg,transparent 352deg 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;filter:drop-shadow(0 0 2px #5bdfffaa);opacity:.94;pointer-events:none;z-index:3;animation:platinaset-sweep 3.2s linear infinite}
.jx1-eq.magicitem::after{content:"";position:absolute;inset:1px;padding:1.5px;border-radius:inherit;background:conic-gradient(from var(--magic-ray-angle,0deg),transparent 0deg 288deg,rgba(67,145,255,.1) 303deg,rgba(82,174,255,.78) 321deg,#d9f6ff 331deg,#459bff 340deg,transparent 352deg 360deg),conic-gradient(from calc(var(--magic-ray-angle-reverse,0deg) + 180deg),transparent 0deg 288deg,rgba(67,145,255,.1) 303deg,rgba(82,174,255,.78) 321deg,#d9f6ff 331deg,#459bff 340deg,transparent 352deg 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;filter:drop-shadow(0 0 2px #419dff99);opacity:.92;pointer-events:none;z-index:3;animation:magicitem-sweep 7s linear infinite}
.jx1-eq.vioitem{isolation:isolate}
.jx1-eq.vioitem::after{content:"";position:absolute;inset:1px;padding:1.5px;border-radius:inherit;background:conic-gradient(from var(--magic-ray-angle,0deg),transparent 0deg 288deg,rgba(176,96,255,.12) 303deg,rgba(199,123,255,.8) 321deg,#f3dcff 331deg,#a64dff 340deg,transparent 352deg 360deg),conic-gradient(from calc(var(--magic-ray-angle-reverse,0deg) + 180deg),transparent 0deg 288deg,rgba(176,96,255,.12) 303deg,rgba(199,123,255,.8) 321deg,#f3dcff 331deg,#a64dff 340deg,transparent 352deg 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;filter:drop-shadow(0 0 2px #b46bff99);opacity:.94;pointer-events:none;z-index:3;animation:magicitem-sweep 5s linear infinite}
@media(prefers-reduced-motion:reduce){.jx1-eq.goldset::after,.jx1-eq.platinaset::after,.jx1-eq.magicitem::after,.jx1-eq.vioitem::after{animation:none}}

/* ---------- tui do kieu JX1 (xem "tui do" trong js/ui-jx1.js) ---------- */
#jx1Bag { position: absolute; inset: 0; z-index: 9; background: rgba(0, 0, 0, .5); }
#jx1Bag.hidden { display: none; }
#jx1Bag .jx1-bagwin { position: absolute; left: 50%; top: 50%; transform-origin: center center;
  background-color: transparent; background-repeat: no-repeat; background-size: 100% var(--bag-h), calc(100% - 16px) calc(var(--bag-h) - 16px); background-position: 0 0, 8px 8px; box-shadow: none;
  font: 12px/14px Tahoma, Arial, sans-serif; text-shadow: 1px 1px 0 #000; user-select: none;
  }
.jx1-bagtitle { position: absolute; left: 0; right: 0; top: 33px; height: 26px; display: flex; align-items: center; justify-content: center;
  font: 700 15px/1 Tahoma, Arial, sans-serif; letter-spacing: .5px; color: #24180a; text-shadow: 0 1px 0 #fff6d6, 0 0 2px #fff3c4; }
.jx1-bagicon { position: absolute; width: 18px; height: 14px; }
.jx1-btn { position: absolute; padding: 0; border: 0; background-color: transparent; background-repeat: no-repeat; cursor: pointer; }
/* nut chu chan cua so (Hanh trang, Nhan vat, Vo cong): chu den vien xanh nhat nhu chu ve trong client; re chuot -> quang vang; nhan -> vien toi */
.jx1-tbtn { position: absolute; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer;
  font: 700 13px/28px Tahoma, Arial, sans-serif; color: #000; white-space: nowrap;
  text-shadow: 1px 0 0 #deffa5, -1px 0 0 #deffa5, 0 1px 0 #deffa5, 0 -1px 0 #deffa5, 1px 1px 0 #deffa5, -1px -1px 0 #deffa5, 1px -1px 0 #deffa5, -1px 1px 0 #deffa5; }
.jx1-tbtn:hover, .jx1-tbtn:focus-visible { outline: none;
  text-shadow: 1px 0 0 #f4ffd0, -1px 0 0 #f4ffd0, 0 1px 0 #f4ffd0, 0 -1px 0 #f4ffd0, 1px 1px 0 #f4ffd0, -1px -1px 0 #f4ffd0, 1px -1px 0 #f4ffd0, -1px 1px 0 #f4ffd0, 0 0 6px #ffe36a, 0 0 10px #d8c24a; }
.jx1-tbtn:active { transform: translateY(1px);
  text-shadow: 1px 0 0 #65724a, -1px 0 0 #65724a, 0 1px 0 #65724a, 0 -1px 0 #65724a, 1px 1px 0 #65724a, -1px -1px 0 #65724a, 1px -1px 0 #65724a, -1px 1px 0 #65724a; }
/* dai chan sach phu len chu ve lien trong anh nen Nhan vat / Vo cong (tools/ui_footbtn.py); nut chu .jx1-tbtn nam tren */
.jx1-foot { position: absolute; background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; }
.jx1-bagpg { color: rgb(255, 217, 78); font-size: 11px; }
.jx1-bagpg:disabled { color: #555; cursor: default; background: transparent; }
.jx1-bagslot { position: absolute; inset: 0; pointer-events: none; }
/* lop chua #t-inv phu ca khung: chi cac phan tu ben trong nhan bam, de nut Trang bi / Dong o chan khung bam duoc */
#jx1Bag #t-inv { pointer-events: none; }
#jx1Bag #t-inv > * { pointer-events: auto; }
/* the #t-inv cu dat vao khung: luoi o 28px dung cho, thanh cong cu xuong duoi khung */
#jx1Bag #t-inv { position: absolute; inset: 0; height: auto; padding: 0; overflow: visible; background: none; }
#jx1Bag #t-inv .invgrid { position: absolute; left: 24px; top: 72px; display: grid; grid-template-columns: repeat(var(--cols), 28px); grid-auto-rows: 28px;
  gap: 0; padding: 0; border: 0; background: none; width: auto; }
#jx1Bag #t-inv .it { width: 28px; height: 28px; aspect-ratio: auto; border: 1px solid rgba(100, 80, 30, .55); border-radius: 0; min-width: 0; padding: 0; }
#jx1Bag #t-inv .it.inv-empty-slot { border-color: transparent; background: none; }
#jx1Bag #t-inv .it i { font-size: 8px; right: 1px; bottom: -1px; }
#jx1Bag #t-inv .it em { font-size: 8px; left: 1px; top: -1px; }
#jx1Bag #t-inv .inv-reorder-hint { display: none; }
#jx1Bag #t-inv .invbar, #jx1Bag #t-inv .inv-tools { position: absolute; left: 6px; right: 6px; margin: 0; font-size: 11px; }
#jx1Bag #t-inv .invbar { top: calc(var(--bag-h) + 2px); display: flex; flex-direction: row; flex-wrap: nowrap; gap: 3px; align-items: center; }
#jx1Bag #t-inv .invbar .btn { width: auto; flex: 1 1 0; min-width: 0; min-height: 26px; height: 26px; padding: 2px 3px; font-size: 10px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#jx1Bag #t-inv .invbar > * { display: contents; }
#jx1Bag #t-inv .invbar .inv-capacity > span { display: none; }
#jx1Bag #t-inv .inv-tools { top: calc(var(--bag-h) + 32px); height: 26px; margin: 0; display: flex; gap: 6px; align-items: center; color: #d9c58a; }
#jx1Bag #t-inv .btn { min-height: 24px; padding: 2px 8px; border: 1px solid #8a7240; border-radius: 0; background: linear-gradient(#4a3c22, #241c10);
  color: #f3dfa2; font: 11px Tahoma, Arial, sans-serif; box-shadow: inset 0 1px 0 #ffffff14; }
#jx1Bag #t-inv .btn.red { color: #ffb0a0; }
#jx1Bag #t-inv .inv-tools .ui-select-trigger { min-height: 24px; padding: 2px 8px; border-radius: 0; }

/* nut trong bang chi tiet mon do: du lon de bam tren dien thoai */
@media (pointer: coarse) {
  #modal.item-preview-modal .btn, #modal.item-tooltip-preview .btn { min-height: 36px; padding: 4px 12px; font-size: 13px; }
  #modal.item-preview-modal .mx, #modal.item-tooltip-preview .mx { width: 32px; height: 32px; }
}

/* nut Dang xem / Dang mac trong bang mon do: can giua, 2 nut bang nhau, kieu nut JX (dai ca 06/10/2026) */
#modal .item-segment { width: min(calc(100% - 64px), 300px); margin: 2px auto 10px; padding: 0; gap: 4px; border: 0; border-radius: 0; background: none !important; }
#modal .item-segment button { min-height: 30px; padding: 4px 10px; border: 1px solid #6e5c34; border-radius: 0 !important; box-shadow: inset 0 1px 0 #ffffff10;
  background: linear-gradient(#2e2516, #17120a); color: #b9a77a; font: 12px Tahoma, Arial, sans-serif; text-shadow: 1px 1px 0 #000; cursor: pointer; }
#modal .item-segment button:hover { filter: brightness(1.25); }
#modal .item-segment button.on { border-color: #c9a24e; background: linear-gradient(#5a4520, #2a1f0e); color: rgb(255, 217, 78); box-shadow: inset 0 0 6px #ffd24a44; }

/* bo tro sat thuong trong bang chi tiet vo cong (synergyHTML trong js/ui-jx1.js) */
.jx1-syn { margin: 8px 0; padding: 8px 10px; border: 1px solid #6e5c34; background: rgba(0, 0, 0, .35); }
.jx1-syn h4 { margin: 2px 0 2px; font: 700 13px Tahoma, Arial, sans-serif; color: #f3dfa2; }
.jx1-syn h4 b { color: rgb(0, 255, 0); }
.jx1-syn h4 small, .jx1-syn small { color: #9d927a; font-weight: 400; font-size: 11px; }
.jx1-syn p { margin: 0 0 4px; font-size: 12px; }
.jx1-syn h4 + p + .jx1-syn-row, .jx1-syn-row + h4 { margin-top: 2px; }
.jx1-syn-row + h4 { margin-top: 10px; }
.jx1-syn-row { display: grid; grid-template-columns: 1fr auto minmax(86px, auto); gap: 10px; align-items: baseline; padding: 3px 0; border-top: 1px dashed #3b3322; font-size: 12px; }
.jx1-syn-row b { color: rgb(0, 255, 0); font-weight: 700; text-align: right; }
.jx1-syn-row > small { text-align: right; }
.jx1-syn-row.off { opacity: .55; }
.jx1-syn-row.off b { color: #9d927a; }
/* cua so Vo cong cua Tan thu (chua vao phai): o thong bao giua trang ky nang */
.jx1-newbie { position: absolute; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 12px 10px; box-sizing: border-box;
  background: #0d0b08e6; border: 1px solid #6b5a33; text-align: center; font: 12px/1.45 Tahoma, Arial, sans-serif; color: #d9cfb8; }
.jx1-newbie > b { color: #ffd94e; font-size: 13px; }
.jx1-newbie span b { color: #7dff6a; }
.jx1-newbie .btn { min-width: 120px; }
/* chan tui: hang tien (Tien dong | KNB) va hang suc chua, o den vien xam nhu o so trong client */
.jx1-bagrow { position: absolute; height: 18px; display: flex; align-items: center; gap: 6px; padding: 0 6px; box-sizing: border-box;
  background: #080706; border: 1px solid #3a352b; box-shadow: inset 0 1px 2px #000; font: 12px/1 Tahoma, Arial, sans-serif; }
.jx1-bagcash > span { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 5px; }
.jx1-bagcash > span + span { border-left: 1px solid #3a352b; padding-left: 6px; }
.jx1-bagcash img { width: 18px; height: 14px; flex: 0 0 18px; }
.jx1-bagcash b { flex: 1; text-align: right; color: #ffd94e; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jx1-bagcash small { color: #c9a24e; font-size: 10px; }
.jx1-bagcap > span { color: #b8ad95; flex: 0 0 auto; }
.jx1-bagcap > i { flex: 1; height: 6px; background: #1d1a15; border: 1px solid #3a352b; position: relative; overflow: hidden; }
.jx1-bagcap em { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#7dff6a, #2f9e2a); }
.jx1-bagcap em.full { background: linear-gradient(#ff8a6a, #b8321e); }
.jx1-bagcap > b { color: #7dff6a; font-weight: 400; flex: 0 0 auto; min-width: 46px; text-align: right; }
/* nhan bang Nhan vat: chu that thay chu ve san trong anh (net khi phong to) — mau vang nhat vien den nhu client */
.jx1-lbl { position: absolute; width: 90px; height: 14px; text-align: right; pointer-events: none; white-space: nowrap;
  font: 11px/14px Tahoma, Arial, sans-serif; color: #f2eec2; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.jx1-lbl.nar { font-size: 10px; letter-spacing: -.3px; }   /* "Kinh nghiem": o nhan chi rong ~50px */
/* bang Vo cong: chu that thay chu ve san (anh kynang-sach.png / kynang-trang-sach.png, tools/ui_cleanskill.py) */
.jx1-sktitle { position: absolute; left: 0; right: 0; top: 5px; height: 29px; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font: 700 15px/1 Tahoma, Arial, sans-serif; letter-spacing: .5px; color: #000; text-shadow: 1px 0 0 #dcd87c, -1px 0 0 #dcd87c, 0 1px 0 #dcd87c, 0 -1px 0 #dcd87c, 1px 1px 0 #dcd87c, -1px -1px 0 #dcd87c; }
.jx1-sktab { position: absolute; height: 14px; pointer-events: none; font: 12px/14px Tahoma, Arial, sans-serif; color: #e2e08c; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000; white-space: nowrap; }
.jx1-skpts { position: absolute; height: 14px; pointer-events: none; font: 12px/14px Tahoma, Arial, sans-serif; color: #ccffee; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
.jx1-pgt { font: 9.5px/20px Tahoma, Arial, sans-serif; letter-spacing: -.4px; border: 0; text-align: center; white-space: nowrap; overflow: hidden; color: #ccffee; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; padding: 0; background-size: 100% 100%; }
.jx1-pgt.on { color: #fff; }
.jx1-pgt:disabled { color: #7c8a85; cursor: default; }