/* Cửa sổ PC Gia tộc (kin.ini) / Bang hội (tong.ini) / Tranh đoạt lãnh thổ (worldmap_domain.ini) / Đua top TTH — game/js/pcwin/guild.js.
   Desktop: phần tử .ab đặt tuyệt đối theo toạ độ ini (--x --y --w --h) trên ảnh trang PC (game/assets/ui/pc/guild/*.webp);
   màn gọn (≤ 820 rộng / ≤ 500 cao): xếp dòng, bỏ ảnh trang. */
.pg-win{font-size:12px;color:var(--txt);min-width:0}
.pg-win h5,.pg-t{margin:0;color:var(--title);font-size:12.5px;font-weight:700}
.pg-wait{padding:16px;text-align:center}
.pg-note{margin:3px 0;font-size:11.5px;line-height:1.4;color:var(--dim);overflow-wrap:anywhere}
.pg-note b{color:var(--gold)}
.pg-in{background:#000;border:1px solid #6e726d;color:var(--txt);font:inherit;font-size:12px;padding:2px 5px;min-width:0;border-radius:0;box-sizing:border-box}
.pg-ta{width:100%;min-height:70px;resize:vertical}
.pg-tall{height:100%;min-height:200px;resize:none}
.pg-lab{display:block;color:var(--dim);margin:4px 0}
.pg-inl{display:inline-flex;gap:4px;align-items:center;margin:0}
.pg-inl .pg-in{width:110px}
.pg-row{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin:4px 0}
.pg-row .pg-in{flex:1 1 90px}
.pg-tag{font-style:normal;font-size:10.5px;padding:0 3px;margin-left:3px;background:#3a3c3a;color:var(--gold);border:1px solid #6e726d}
.pg-num{color:var(--gold)}
.pg-star{color:#ffd96a}
.pg-b{min-height:19px;height:19px;padding:0 6px;font-size:12px;line-height:17px;min-width:45px;white-space:nowrap}
.pg-hot{color:#fff!important;filter:brightness(1.25)}
.pg-b i{font-style:normal;display:inline-block;min-width:13px;margin-left:2px;padding:0 2px;border-radius:7px;background:var(--red);color:#fff;font-size:10px;line-height:13px}

/* tab trang (btn_page.spr 78×28: thường / rê / đang mở) + tab con (page_button_small.spr 55×28) */
.pg-tabs{display:flex;gap:10px;align-items:flex-end;height:30px;margin:0 0 4px}
.pg-tab,.pg-stab{border:0;padding:0;font:inherit;font-size:12px;cursor:pointer;color:#bebebe;text-shadow:0 1px 1px #000;background:url(../../assets/ui/pc/guild/page.webp) 0 0/78px 84px no-repeat;width:78px;height:28px;padding-top:6px;box-sizing:border-box;flex:none}
.pg-stab{background-image:url(../../assets/ui/pc/guild/pages.webp);background-size:55px 84px;width:55px;font-size:11.5px}
.pg-tab:hover:not(:disabled),.pg-stab:hover{background-position:0 -28px;color:#fff}
.pg-tab.on,.pg-stab.on{background-position:0 -56px;color:#fff}
.pg-tab:disabled{opacity:.5;cursor:default}
.pg-tab:focus-visible,.pg-stab:focus-visible{outline:1px solid var(--title);outline-offset:-3px}
.pg-tx{margin-left:auto;display:flex;gap:4px;align-self:center}
.pg-subtabs{display:flex;gap:6px;align-items:flex-end}

/* trang có ảnh nền PC */
.pg-page{background:#4b4b4b center/100% 100% no-repeat}
.pg-page[data-bg=kin_info]{background-image:url(../../assets/ui/pc/guild/kin_info.webp)}
.pg-page[data-bg=kin_note]{background-image:url(../../assets/ui/pc/guild/kin_note.webp)}
.pg-page[data-bg=kin_act]{background-image:url(../../assets/ui/pc/guild/kin_act.webp)}
.pg-page[data-bg=tong_info]{background-image:url(../../assets/ui/pc/guild/tong_info.webp)}
.pg-page[data-bg=tong_note]{background-image:url(../../assets/ui/pc/guild/tong_note.webp)}
.pg-page[data-bg=tong_off]{background-image:url(../../assets/ui/pc/guild/tong_off.webp)}
.pg-abs{position:relative}
.pg-abs .ab{position:absolute;left:var(--x);top:var(--y);width:var(--w,auto);height:var(--h,auto);box-sizing:border-box}
.pg-kin .pg-page{width:477px;height:384px}
.pg-set{width:646px;height:472px}
.pg-tong .pg-tabs{position:relative}
/* ô chữ đen (black_12.spr / ô của ảnh trang) */
.pg-f{display:flex;gap:4px;align-items:center;white-space:nowrap;overflow:hidden;line-height:16px;padding:0 3px;min-width:0}
.pg-f span{color:var(--dim);flex:none}
.pg-f b{font-weight:400;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pg-f small{color:var(--dim);overflow:hidden;text-overflow:ellipsis}
.pg-f select{flex:1;min-width:0}
.pg-x{display:flex;gap:2px;justify-content:flex-end}
.pg-g3{display:grid;grid-template-columns:repeat(3,63px);gap:5px 2px}
.pg-g3 .pg-b{min-width:0;width:63px;padding:0 2px;overflow:hidden;text-overflow:ellipsis}
.pg-b33 .pg-b{width:36px;height:33px;min-width:0;padding:0;font-size:10.5px;line-height:12px;white-space:normal}
.pg-box{background:#2e2e2e;border:1px solid #6e726d;overflow:auto}
.pg-log{padding:5px 7px;font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.pg-log p{margin:0 0 6px}
.pg-small{font-size:11px}
.pg-hl{padding:2px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.pg-hl small{color:var(--dim)}
.pg-l>.pg-note{margin:4px 6px}
.pg-tong .pg-page.pg-l:not(.pg-abs){padding:6px 8px;overflow:auto}
.pg-page.pg-l>h5:not(.ab){margin:6px 0 2px}

/* danh sách thành viên (SpMemberList) */
.pg-r{display:flex;flex-direction:column;min-width:0}
.pg-r>h5{margin:4px 2px 4px}
.pg-rt{line-height:20px}
.pg-lh,.pg-li{display:grid;grid-template-columns:30px 1fr 64px;gap:4px;align-items:center}
.pg-l3{grid-template-columns:52px 1fr 82px}
.pg-l4{grid-template-columns:30px 1fr 70px 92px}
/* danh sách gia tộc (tên · người · nút) / bang hội (tên · gia tộc · lãnh thổ · nút): tên ở cột co giãn, khẩu hiệu xuống dòng */
.pg-lfam{grid-template-columns:minmax(0,1fr) 44px 64px}
.pg-ltong{grid-template-columns:minmax(0,1fr) 44px 52px 70px}
.pg-lh{background:#2a2a2a;border:1px solid #6e726d;border-bottom:0;padding:1px 4px;color:var(--title);font-size:11.5px;min-height:16px}
.pg-list{height:var(--lh,250px);overflow-y:auto;background:#2e2e2e;border:1px solid #6e726d}
.pg-li{padding:2px 4px;border-bottom:1px solid rgba(255,255,255,.05);min-height:20px}
.pg-li .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-li .nm b{font-weight:400}
.pg-li .nm small{display:block;color:var(--dim);font-size:10.5px;overflow:hidden;text-overflow:ellipsis}
.pg-li .rk{color:var(--dim);text-align:center}
.pg-li .n{color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-li .fm{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-lfam .nm,.pg-ltong .nm{white-space:normal;text-overflow:clip}
.pg-lfam .nm small,.pg-ltong .nm small{overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.pg-li .a{display:flex;gap:3px;justify-content:flex-end}
.pg-log .pg-li{grid-template-columns:1fr auto}
.pg-log .pg-li.pg-l3{grid-template-columns:52px 1fr 82px}
.pg-sel{cursor:pointer}
.pg-sel:hover{background:rgba(170,230,130,.08)}
.pg-sel.on,.pg-me{background:rgba(170,230,130,.2);outline:1px solid rgba(170,230,130,.5);outline-offset:-1px}
.pg-sel:focus-visible{outline:1px solid var(--title)}
.pg-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#6a6a6a;margin-right:4px;vertical-align:middle}
.pg-dot.on{background:#5fd36a}
.pg-lbar{display:flex;gap:4px;align-items:center;margin-top:4px;min-height:20px}
.pg-lbar .sp{flex:1}
.pg-pn{min-width:36px;text-align:center;color:var(--dim)}
.pg-chk{display:inline-flex;gap:4px;align-items:center;color:var(--txt);cursor:pointer;white-space:nowrap}
.pg-find{width:96px}
.pg-selnm{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 0}
.pg-cmb{height:20px}
.pg-kv{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:4px 0 6px}
.pg-kv span{color:var(--dim)}
.pg-chips{margin:3px 0 6px;display:flex;flex-wrap:wrap;gap:3px}

/* lãnh thổ: domain_bg 794×535, ô 24 px (dom.webp: hàng = màu 0..12, cột = khung 0..3; hàng 13 = thôn 13 màu) */
.pg-dom{display:flex;flex-direction:column;gap:4px}
.pg-dhead{color:var(--dim)}
.pg-dhead b{color:var(--gold)}
.pg-mapw{position:relative}
.pg-map{position:relative;width:100%;aspect-ratio:794/535;background:#000;border:1px solid #6e726d;overflow:hidden;user-select:none;-webkit-user-select:none}
.pg-map img{position:absolute;inset:0;width:100%;height:100%;display:block}
.pg-dm{position:absolute;width:24px;height:24px;min-height:0;min-width:0;box-sizing:border-box;margin:-12px 0 0 -12px;border:0;padding:0;cursor:pointer;border-radius:50%;
  background:url(../../assets/ui/pc/guild/dom.webp) var(--bx,0) var(--by,0)/312px 336px no-repeat}
.pg-dm::after{content:"";position:absolute;inset:-6px;border-radius:50%}
.pg-dm:hover{filter:brightness(1.3)}
.pg-dm.on{box-shadow:0 0 0 2px #fff,0 0 8px 2px #ffd96a;z-index:1}
.pg-dm:focus-visible{outline:2px solid #fff}
.pg-ci{display:inline-block;width:24px;height:24px;vertical-align:middle;margin-right:4px;background:url(../../assets/ui/pc/guild/dom.webp) var(--bx,0) var(--by,0)/312px 336px no-repeat}
.pg-leg{position:absolute;right:6px;top:6px;width:172px;padding:6px 8px;background:rgba(20,22,20,.78);border:1px solid #6e726d;font-size:11.5px;line-height:1.5;max-height:calc(100% - 12px);overflow:auto}
.pg-leg .pg-t{display:block;margin-top:4px}
.pg-lr{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-lk{margin-top:4px;color:var(--dim);font-size:10.5px}
.pg-lk .pg-ci{transform:scale(.75);margin:0}
.pg-dsel{padding:4px 6px;background:#2e2e2e;border:1px solid #6e726d;min-height:20px}
.pg-dtabs{margin:2px 0 0}
.pg-dsec{padding:2px 2px 6px}
.pg-tth .pg-list{margin-bottom:6px}

/* ---- màn gọn: xếp dòng, bỏ ảnh trang / toạ độ ini */
@media (max-width:820px),(max-height:500px){
  .pg-abs .ab{position:static;width:auto;height:auto}
  .pg-kin .pg-page,.pg-set{width:auto;height:auto}
  .pg-page{background:#3a3c3a!important;padding:6px;display:flex;flex-direction:column;gap:4px}
  .pg-set{display:flex;flex-direction:column;gap:6px}
  .pg-tabs{height:auto;flex-wrap:wrap;gap:6px}
  .pg-tx{margin-left:0}
  .pg-f{white-space:normal;padding:2px 3px;min-height:24px}
  .pg-x{justify-content:flex-start;flex-wrap:wrap}
  .pg-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pg-g3 .pg-b{width:auto}
  .pg-b{min-height:28px;height:auto;line-height:26px}
  .pg-b33 .pg-b{width:auto;height:auto;min-height:32px;padding:0 8px;font-size:12px;line-height:30px;white-space:nowrap}
  .pg-list{height:auto;max-height:55vh}
  .pg-box{max-height:50vh}
  .pg-tall{min-height:160px}
  .pg-lbar{flex-wrap:wrap}
  #panel .pg-chk input,.pg-chk input{width:24px;height:24px;flex:none}
  .pg-dm,.pg-tab,.pg-stab{min-height:0!important;padding-bottom:0}
  .pg-dm{width:24px;height:24px;min-width:0;padding:0}
  /* bản đồ lãnh thổ: giữ ≥ 640 px (cuộn ngang trong khung) — co về 360 px thì các điểm 24 px (vùng chạm) đè lên nhau */
  .pg-mapw{overflow-x:auto;overscroll-behavior-x:contain}
  .pg-map{min-width:640px}
  .pg-leg{position:static;width:auto;max-height:none;margin-top:4px}
  .pg-l4{grid-template-columns:24px 1fr 62px 70px}
  .pg-in{min-height:28px}
}
@media (max-width:420px){ .pg-ltong{grid-template-columns:minmax(0,1fr) 36px 40px 68px} .pg-l4 .fm{display:none} .pg-l4{grid-template-columns:24px 1fr 70px} .pg-lh.pg-l4 span:last-child{display:none} }