/* =============================================================================
   TIEN HIEP — POPUP (JOB_TH1_10, 06.00 Chương XII, PQ-64)
   Popup dùng chung: Sảnh Game (lưới icon tròn) + popup từng game (<iframe>).
   Viền vàng kim cổ dùng lại đúng token --border-strong/--accent-2/--grad-primary
   đã áp cho .panel và nút "Bắt Đầu Chơi"/"Xem Bảng Vàng" (tien-hiep-hero.css)
   — không tự đặt màu mới.
   ============================================================================= */

.th-popup-overlay{
  position:fixed;inset:0;z-index:200;
  /* Owner 2026-09-10: bỏ hẳn lớp nền đen làm mờ toàn màn hình — vùng ngoài
     popup phải trong suốt, không che nội dung/HUD phía sau (khác nhóm
     dropdown neo nhỏ vốn không có lớp này). Vẫn giữ position:fixed;inset:0
     để hứng đúng cú bấm "ra ngoài thì đóng" (bên dưới), chỉ bỏ phần nhìn
     thấy được (background/backdrop-filter). */
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:thPopupFadeIn .18s var(--ease);
}
@keyframes thPopupFadeIn{from{opacity:0}to{opacity:1}}

.th-popup{
  position:relative;
  width:min(920px,100%);
  max-height:88vh;
  display:flex;flex-direction:column;
  /* Owner 2026-09-05: giảm độ đục nền xám xuống 30% — thấy mờ ảo cảnh Cõi
     Tiên Hiệp phía sau, không che hoàn toàn. Bù bằng blur để chữ/icon vẫn
     đọc được dù nền không còn kín. */
  background:color-mix(in srgb,var(--surface) 30%,transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.th-popup-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--border-strong);
  background:var(--grad-primary);
  flex-shrink:0;
}
.th-popup-title{
  font-family:var(--font-display);font-weight:var(--display-weight);
  font-size:16px;color:var(--on-primary);
}
.th-popup-close{
  width:30px;height:30px;border-radius:50%;border:0;
  background:color-mix(in srgb,var(--on-primary) 16%,transparent);
  color:var(--on-primary);font-size:15px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background var(--dur) var(--ease);
}
.th-popup-close:hover{background:color-mix(in srgb,var(--on-primary) 28%,transparent);}
.th-popup-body{overflow-y:auto;padding:20px;flex:1;min-height:0;}

/* ---------- Sảnh Game: lưới 5 cột × 4 hàng, icon tròn viền vàng ---------- */
.th-launcher-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px 12px;
}
.th-launcher-cell{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:6px;border:0;background:transparent;cursor:pointer;
  border-radius:var(--radius);
  transition:transform var(--dur) var(--ease);
}
.th-launcher-cell:hover,
.th-launcher-cell:focus-visible{transform:translateY(-3px) scale(1.05);}
.th-launcher-cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.th-launcher-cell:active{transform:scale(.96);}

.th-launcher-logo{
  width:76px;height:76px;border-radius:50%;
  overflow:hidden;display:block;
  border:3px solid var(--accent-2);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-2) 40%,transparent),
             0 4px 14px -4px rgba(4,7,10,.8),
             var(--glow-accent);
  background:radial-gradient(120% 120% at 30% 20%,var(--surface-3),var(--bg-2));
  transition:box-shadow var(--dur) var(--ease);
}
.th-launcher-cell:hover .th-launcher-logo{
  box-shadow:0 0 0 1px var(--accent-2), 0 4px 14px -4px rgba(4,7,10,.8), var(--glow-hover-accent);
}
.th-launcher-logo img{width:100%;height:100%;object-fit:cover;display:block;}
.th-launcher-emoji{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:34px;
}
.th-launcher-name{
  font-family:var(--font-body);font-weight:600;font-size:11.5px;
  color:var(--text);text-align:center;line-height:1.25;
  /* Owner 2026-09-05: 88px cắt mất vài ký tự trong khi ô còn dư chỗ — rộng
     ra gần hết bề ngang 1 cột (~166px ở khổ popup 920px/5 cột). */
  max-width:132px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;
  /* Nền popup chỉ còn 30% đục — chữ cần viền tối riêng mới đọc được (PQ-57) */
  text-shadow:0 1px 2px rgba(4,7,10,.95), 0 0 6px rgba(4,7,10,.8);
}
.th-popup-title{text-shadow:0 1px 2px rgba(4,7,10,.5);}

/* ---------- Popup từng game: iframe full khung, không viền thừa ---------- */
.th-popup-game{width:min(1100px,96vw);height:min(760px,88vh);}
.th-popup-game .th-popup-body{padding:0;background:#000;}
.th-game-iframe{width:100%;height:100%;border:0;display:block;}

/* ---------- Popup Bản Đồ: ảnh toàn cảnh giang sơn, không crop ---------- */
/* Owner 2026-09-09: "click vào icon Bản Đồ mở giao diện Bản Đồ với ảnh...,
   chưa cần kích hoạt tính năng nào khác" — chỉ hiện ảnh + nút X có sẵn của
   .th-popup-head. Khung theo đúng tỉ lệ ảnh thật (1536:1024 = 1.5), dùng
   object-fit:contain (không phải cover) để không bao giờ crop mất cạnh nào. */
/* Owner 2026-09-09: "popup vừa khít với ảnh, không để lộ 2 cột trống 2
   bên" — width cố định min(1200px,96vw) trước đó không khớp tỉ lệ ảnh thật
   ở mọi chiều cao màn hình, sinh vệt đen 2 bên (letterbox). Đổi popup sang
   width:fit-content (ôm khít đúng bề ngang ảnh) + ảnh tự giữ tỉ lệ gốc
   bằng cách chỉ ràng max-height (không object-fit, không ràng cả 2 chiều). */
/* Owner 2026-09-15: "bấm icon Môn Phái, Bản Đồ hiện full màn hình" — Bản Đồ
   dùng chung 1 Scene cho mọi lối vào (icon Bản Đồ lẫn icon Môn Phái), nên
   chuyển thẳng luôn cả Scene sang full màn hình thay vì popup khung nhỏ —
   bỏ padding/viền/bo góc/nền mờ, popup giờ phủ kín 100vw×100dvh.
   Owner 2026-09-15 (đợt 2): "vẫn còn vệt đen xung quanh" — trước đó ảnh
   giữ nguyên tỉ lệ gốc 1536:1024 (không crop) nên hễ tỉ lệ màn hình thật
   khác 1.5 là sinh viền đen 2 cạnh (letterbox), không cách nào tránh được
   nếu vẫn giữ đúng tỉ lệ ảnh. Đổi sang PHỦ KÍN hoàn toàn (width/height:100%,
   không object-fit = mặc định "fill"/kéo giãn) — ảnh co giãn khớp đúng mọi
   tỉ lệ màn hình, không còn khoảng trống, đổi lại có thể hơi kéo giãn nhẹ
   theo chiều ngang/dọc tuỳ tỉ lệ máy. Lớp SVG polygon overlay đã dùng
   preserveAspectRatio="none" (kéo giãn y hệt, không giữ tỉ lệ) từ trước nên
   vùng bấm vẫn khớp đúng landmark trong ảnh dù ảnh bị kéo giãn theo. */
.th-popup-map{
  width:100vw;height:100dvh;max-width:none;max-height:none;
  border:0;border-radius:0;box-shadow:none;
  background:#000;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.th-popup-map .th-popup-body{padding:0;background:#000;display:flex;overflow:hidden;}
.th-popup-map-img{display:block;width:100%;height:100%;max-width:none;max-height:none;}
.th-popup-map-stage,
.th-popup-map-detail{width:100%;height:100%;}
/* JOB_TH2_19: Bản Đồ là Scene native, giữ nguyên khung ảnh/popup đã duyệt
   nhưng để Scene Router sở hữu Back, Escape, focus và scroll lock. */
.th-map-scene{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  background:#000;
  animation:thPopupFadeIn .18s var(--ease);
}

/* ---------- Bản Đồ — 8 vùng bấm được, SVG Polygon Overlay (Owner 2026-09-10) ----------
   Nâng cấp từ hotspot hình chữ nhật (%) sang polygon bám sát đúng hình dạng
   thật từng đảo/vách núi (toạ độ đo trên image-map.net, dán thẳng vào
   `points`) + phát quang vàng khi hover.
   stage/detail ôm khít đúng khung ảnh bên trong (position:relative làm mốc
   cho lớp phủ SVG tuyệt đối) — không tự set width/height, kế thừa kích
   thước từ ảnh con `.th-map-bg` (GIỮ NGUYÊN cơ chế `max-height:80vh;
   width:auto;height:auto` của `.th-popup-map-img` đã chốt trước đó — KHÔNG
   đổi sang `width:100%` như bản mẫu gốc, vì sẽ phá khung popup fit-content
   "ôm khít ảnh, không letterbox" đã có). */
.th-popup-map-stage,
.th-popup-map-detail{position:relative;display:block;line-height:0;}
/* Bug thật (2026-09-09): `display:block` ở trên đè mất display:none mặc
   định của thuộc tính `[hidden]` (class selector có độ đặc hiệu cao hơn
   attribute selector của UA stylesheet) — cả 2 khối cùng hiện song song
   thay vì luân phiên. Ép lại rõ ràng. */
.th-popup-map-stage[hidden],
.th-popup-map-detail[hidden]{display:none;}
.th-map-bg{pointer-events:none;} /* tránh xung đột sự kiện chuột với SVG đè lên trên */
.th-map-svg-overlay{
  position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;
  /* Bản đồ chỉ điều hướng qua TAG: SVG polygon vẫn giữ làm mốc toạ độ cho
     CĂN UI và handler route, nhưng không vẽ/chặn chuột trên cảnh nền. */
  pointer-events:none;
}
.th-map-zone{
  display:none;
  fill:rgba(255,255,255,.001);
  stroke:transparent;
  stroke-width:1.5px;
  cursor:pointer;
  transition:fill .3s ease,stroke .3s ease,filter .3s ease;
}
/* Owner 2026-09-10: bỏ đường khung vàng (stroke) quanh vùng — chỉ giữ ánh
   sáng phủ lên (fill) + phát quang mềm (drop-shadow), không viền cứng.
   Đổi từ ánh sáng vàng sang ánh sáng TRẮNG, độ sáng giảm còn 1 nửa. */
.th-map-zone:hover{
  fill:rgba(255,255,255,.11);
  filter:drop-shadow(0 0 10px rgba(255,255,255,.325));
}
/* Dự phòng cho JOB_TH2_12 (mở vùng theo Cảnh Giới) — CHƯA áp dụng class này
   cho vùng nào ở JOB hiện tại, chỉ định nghĩa sẵn kiểu dáng. */
.th-map-zone.is-locked{cursor:not-allowed;}
.th-map-zone.is-locked:hover{
  fill:rgba(30,30,30,.4);
  stroke:rgba(180,50,50,.6);
  filter:drop-shadow(0 0 8px rgba(180,50,50,.5));
}
.th-map-zone.is-unlocked:hover{
  fill:rgba(255,255,255,.13);
  filter:drop-shadow(0 0 12px rgba(255,235,173,.42));
}
/* Owner 2026-09-15: hiện sẵn tên địa danh (không cần rê chuột), rê vào vẫn
   sáng vùng như cũ (đã có ở .th-map-zone:hover) — nhãn đặt trong foreignObject
   ở tâm polygon nên tự co giãn đúng tỉ lệ theo SVG (giống toạ độ polygon),
   pointer-events:none để không chặn hover/click vùng bên dưới. */
.th-map-zone-label-fo{pointer-events:none;overflow:visible;}
.th-map-zone-label-wrap{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.th-map-zone-label{
  width:fit-content;max-width:100%;
  /* Owner 2026-09-15: "text lớn quá che bản đồ" — giảm 1 bậc, 26px→21px. */
  font-family:var(--font-body);font-weight:700;font-size:14.7px; /* Owner 2026-09-26: thu nhỏ 30% (21px→14.7px) mọi nhãn vùng bản đồ */
  color:#fff;text-align:center;white-space:nowrap;
  text-shadow:0 1px 3px rgba(4,7,10,.95),0 0 6px rgba(4,7,10,.8);
  background:rgba(4,7,10,.55);
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  padding:3px 9px;
}
/* Owner 2026-09-15: nhãn 2 dòng riêng cho Bản Đồ Giang Sơn (tên vùng + Cảnh
   Giới yêu cầu) — bo góc thường (không viên thuốc, chữ 2 dòng bên trong 1
   viên thuốc tròn hết cỡ sẽ rất xấu) + dòng phụ nhỏ, mờ hơn dòng chính. */
.th-map-zone-label.th-map-zone-label-2line{
  border-radius:9px;padding:4px 10px;
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.th-map-zone-label-title{font-size:14.7px;line-height:1.15;}
.th-map-zone-label-sub{
  font-size:8.4px;font-weight:600;line-height:1.15;
  color:#ffe9a5;
}
.th-map-switch-btn{
  padding:6px 11px;border:1px solid color-mix(in srgb,var(--border-strong) 88%,#d9b75b);
  border-radius:999px;background:rgba(15,22,35,.74);color:var(--text);
  font:700 12px var(--font-body);cursor:pointer;
}
.th-map-switch-btn:hover{border-color:var(--accent-2);color:#fff;}
/* Owner 2026-09-15: "xóa khung tiêu đề vàng, chỉ hiện đúng ảnh bản đồ + nút
   nổi góc phải" — bỏ hẳn .th-popup-head (tiêu đề "Bản Đồ Trung Tâm"/"Giang
   Sơn..."), 2 nút (chuyển bản đồ + đóng) nổi trực tiếp lên trên ảnh, góc
   phải, giữ đúng vị trí cũ của chúng khi còn nằm trong thanh tiêu đề. */
.th-map-floating-actions{
  position:absolute;top:14px;right:14px;z-index:5;
  display:flex;align-items:center;gap:8px;
}
.th-map-floating-actions .th-popup-close{
  background:color-mix(in srgb,var(--bg) 60%,transparent);
  backdrop-filter:blur(4px);
}

/* PQ-78: Giang Sơn là bản đồ khám phá toàn cảnh — cả tám vùng luôn giữ màu
   gốc và có thể click vào để xem Scene/lore. Cảnh giới chỉ gate activity. */
/* Owner 2026-09-15: "xóa bảng bên phải, chỉ giữ ảnh + nút + nút X, full màn
   hình" — bỏ hẳn cột thông tin .th-giangson-info (ẩn qua CSS, giữ nguyên
   DOM/JS phía sau để không phải sửa logic setDetail/loading), gộp về 1 cột
   full-width/full-height y hệt cách làm cho Bản Đồ Trung Tâm. */
.th-popup-giangson{width:100vw;max-width:none;}
.th-popup-giangson .th-popup-body.th-giangson-body{
  display:block;background:#0d1625;
}
.th-popup-giangson .th-giangson-info{display:none;}
.th-giangson-stage{min-width:0;background:#05090f;width:100%;height:100%;}
.th-popup-giangson .th-popup-map-img{width:100%;height:100%;max-width:none;max-height:none;}
.th-giangson-zone{fill:rgba(255,255,255,.001);}
.th-giangson-zone.is-explorable:hover{fill:rgba(255,255,255,.13);filter:drop-shadow(0 0 12px rgba(255,235,173,.42));}
.th-giangson-info{
  display:flex;flex-direction:column;gap:10px;padding:20px 17px;overflow:auto;
  color:var(--text);line-height:1.5;background:linear-gradient(160deg,#1d2b40,#101827);
  border-left:1px solid rgba(223,186,88,.3);font-size:13px;
}
.th-giangson-info h2{margin:0;color:#f5e6b2;font:700 21px var(--font-display);line-height:1.2;}
.th-giangson-info h3{margin:8px 0 0;color:#d9b75b;font:700 13px var(--font-display);}
.th-giangson-info p{margin:0;color:#d4d8e0;}
.th-giangson-info ul{margin:0;padding-left:18px;}
.th-giangson-info li{margin:5px 0;color:#e6e9ee;}
.th-giangson-info li.is-disabled{color:#93a0b1;}
.th-giangson-info small{color:#9da6b3;}
.th-giangson-eyebrow{font-size:10px!important;font-weight:800;letter-spacing:.11em;color:#a8d6ce!important;}
.th-giangson-gate{padding:10px;border:1px solid rgba(203,89,89,.45);border-radius:8px;background:rgba(70,20,26,.24);}
.th-giangson-gate.is-ready,.th-region-gate.is-ready{border-color:rgba(109,204,191,.55);background:rgba(17,79,79,.3);}
.th-giangson-qa-note{padding:8px!important;border:1px solid rgba(109,204,191,.5);border-radius:8px;background:rgba(17,79,79,.32);color:#b9f2e8!important;font-size:12px;}
.th-giangson-loading{margin-top:auto!important;color:#aeb9c7!important;}
.th-giangson-region-scene{position:fixed;inset:0;z-index:120;overflow:auto;background:#07101b;color:#f3f0e8;}
.th-region-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Owner 2026-09-15: "ảnh nền bị phủ mờ, xóa màn mờ đi cho hiện rõ để tham
   quan/thưởng ngoạn" — bỏ hẳn lớp gradient tối phủ toàn ảnh; tiêu đề/mô tả
   vẫn đọc được nhờ text-shadow riêng (.th-region-head h1) + khung
   .th-region-panel đã có nền riêng, không phụ thuộc lớp phủ này. */
.th-region-shade{display:none;}
.th-region-content{position:relative;z-index:1;min-height:100%;padding:clamp(20px,5vw,68px);display:flex;flex-direction:column;justify-content:space-between;gap:32px;}.th-region-head{display:flex;align-items:flex-start;gap:18px;}.th-region-head p{margin:0 0 4px;color:#a7d5d0;font-size:11px;font-weight:800;letter-spacing:.13em;}.th-region-head h1{margin:0;color:#fff2c5;font:700 clamp(26px,4vw,48px) var(--font-display);text-shadow:0 2px 18px #000;}
.th-region-back{border:1px solid rgba(235,201,104,.65);border-radius:999px;padding:9px 14px;background:rgba(8,17,30,.78);color:#f5e4aa;font:700 13px var(--font-body);cursor:pointer;white-space:nowrap;}.th-region-back:hover{background:rgba(35,57,74,.9);}.th-region-panel{width:min(680px,100%);padding:20px;border:1px solid rgba(230,196,100,.35);border-radius:16px;background:rgba(8,18,31,.7);backdrop-filter:blur(8px);box-shadow:0 12px 34px rgba(0,0,0,.33);}.th-region-description{margin:0;color:#dde3e7;line-height:1.6;}.th-region-gate{margin:14px 0 0;padding:10px;border:1px solid rgba(203,89,89,.45);border-radius:8px;background:rgba(70,20,26,.28);color:#f0d7d7;line-height:1.45;}.th-region-panel h2{margin:18px 0 10px;color:#f5e4aa;font:700 19px var(--font-display);}
.th-region-activities{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;}.th-region-activity-card{display:flex;flex-direction:column;align-items:flex-start;padding:14px;border:1px solid rgba(112,177,169,.36);border-radius:11px;background:rgba(22,48,62,.72);}.th-region-activity-card p{margin:0;color:#a7d5d0;text-transform:uppercase;font-size:10px;letter-spacing:.08em;}.th-region-activity-card h3{margin:6px 0 7px;color:#f7f4e9;font:700 16px var(--font-display);}.th-region-activity-state{min-height:32px;color:#c4d0d9;font-size:11px;line-height:1.4;}.th-region-activity-card button{margin-top:10px;border:1px solid rgba(235,201,104,.55);border-radius:7px;padding:7px 9px;background:rgba(63,90,91,.9);color:#f8e8ad;font:700 11px var(--font-body);cursor:pointer;}.th-region-activity-card button:hover{background:rgba(88,121,116,.95);}/* TH4.08-C.02 (2026-09-18): dấu check xanh trên card Bí Cảnh đã vượt. */
.th-territory-card{position:relative;}
.th-territory-card.is-completed{border-color:rgba(120,224,140,.6);}
.th-territory-check{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:#2e8f4a;color:#fff;font:900 13px/22px var(--font-body);text-align:center;box-shadow:0 2px 4px rgba(0,0,0,.5);z-index:2;}
/* TH4.08-C.02 (2026-09-18): nút "Nhận Thưởng" chỗ đứng cho JOB sau khi đủ
   3/3 Bí Cảnh trong vùng. */
.th-region-territory-claim{margin-left:10px;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,214,141,.8);background:linear-gradient(180deg,#8a5a1e,#5c3a10);color:#ffe9b0;font:900 13px var(--font-body);cursor:pointer;vertical-align:middle;}
.th-region-territory-claim.is-claimed{opacity:.6;cursor:default;filter:grayscale(.4);}
.th-region-empty{display:flex;flex-direction:column;gap:5px;padding:15px;border:1px dashed rgba(182,196,210,.48);border-radius:10px;color:#d6dde3;}.th-region-empty strong{color:#f1d88f;}.th-region-empty span{font-size:13px;line-height:1.5;}.th-region-loading,.th-region-problem,.th-activity-loading,.th-activity-problem{min-height:100%;display:grid;place-content:center;gap:14px;text-align:center;background:radial-gradient(circle at center,#1c3850,#07101b);}.th-region-problem p,.th-activity-problem p{color:#e7edf1;}

/* JOB_TH2_13C — Scene hoạt động và modal xác nhận cùng contract Scene/Modal. */
.th-giangson-activity-scene{position:fixed;inset:0;z-index:120;display:grid;place-items:center;overflow:auto;padding:clamp(18px,5vw,68px);background:radial-gradient(circle at 45% 25%,rgba(49,99,104,.45),transparent 38%),linear-gradient(135deg,#07121d,#172e3b 55%,#09121d);color:#f3f0e8;}.th-activity-scene-shell{width:min(720px,100%);border:1px solid rgba(235,201,104,.52);border-radius:18px;overflow:hidden;background:rgba(7,18,29,.9);box-shadow:0 24px 70px rgba(0,0,0,.48);}.th-activity-head{display:flex;align-items:flex-start;gap:16px;padding:20px;border-bottom:1px solid rgba(145,193,182,.28);background:linear-gradient(110deg,rgba(21,68,74,.86),rgba(18,31,52,.86));}.th-activity-head p,.th-activity-confirm-eyebrow{margin:0 0 5px;color:#a7d5d0;text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.11em;}.th-activity-head h1{margin:0;color:#fff1be;font:700 clamp(25px,4vw,39px) var(--font-display);}.th-activity-back{border:1px solid rgba(235,201,104,.55);border-radius:999px;padding:8px 12px;background:rgba(7,15,26,.75);color:#f6e2a2;font:700 12px var(--font-body);cursor:pointer;white-space:nowrap;}.th-activity-body{padding:24px;}.th-activity-description{margin:0 0 18px;color:#dfe6e9;line-height:1.6;}.th-activity-difficulty-label{display:flex;flex-direction:column;gap:7px;color:#f4df98;font-size:12px;font-weight:800;}.th-activity-difficulty{width:100%;padding:11px;border:1px solid rgba(151,197,190,.52);border-radius:8px;background:#102938;color:#f3f5ed;font:600 14px var(--font-body);}.th-activity-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;color:#b8c9d0;font-size:12px;}.th-activity-meta span{padding:6px 8px;border-radius:999px;background:rgba(100,141,150,.18);}.th-activity-gate{margin:18px 0 12px;padding:11px;border:1px solid rgba(203,89,89,.45);border-radius:8px;background:rgba(70,20,26,.28);color:#f0d7d7;line-height:1.45;}.th-activity-gate.is-ready{border-color:rgba(109,204,191,.55);background:rgba(17,79,79,.3);color:#c9f0e8;}.th-activity-enter,.th-activity-confirm-start{border:1px solid rgba(255,229,139,.8);border-radius:9px;padding:10px 16px;background:linear-gradient(135deg,#9a7030,#d8b85b);color:#16130b;font:800 13px var(--font-body);cursor:pointer;}.th-activity-enter:disabled{border-color:rgba(159,171,183,.38);background:#3e4d58;color:#b8c2cb;cursor:not-allowed;}.th-activity-result{margin-top:16px;padding:11px;border:1px solid rgba(109,204,191,.55);border-radius:8px;background:rgba(17,79,79,.3);color:#c9f0e8;line-height:1.45;}.th-activity-result.is-error{border-color:rgba(203,89,89,.5);background:rgba(70,20,26,.33);color:#f0d7d7;}.th-activity-confirm h3{margin:7px 0;color:#fff0b8;font:700 23px var(--font-display);}.th-activity-confirm p{color:#dce4e6;line-height:1.55;}.th-activity-confirm-limit{padding:9px;border-radius:8px;background:var(--surface-2);color:#c6d2d5!important;font-size:12px;}
@media (max-width:760px){
  .th-popup-giangson .th-popup-body.th-giangson-body{display:block;overflow:auto;max-height:84vh;}
  .th-popup-giangson .th-popup-map-img{max-height:none;}
  .th-giangson-info{min-height:168px;border-left:0;border-top:1px solid rgba(223,186,88,.3);}
  .th-map-switch-btn{font-size:10px;padding:5px 7px;margin-right:2px;}
  .th-region-content{padding:18px;gap:22px;}.th-region-head{gap:10px;flex-direction:column;}.th-region-panel{padding:15px;}.th-region-activities{grid-template-columns:1fr;}.th-giangson-activity-scene{place-items:stretch;padding:0;}.th-activity-scene-shell{width:100%;min-height:100dvh;border:0;border-radius:0;}.th-activity-head{flex-direction:column;}.th-activity-body{padding:18px;}
}
.th-map-back-btn{
  position:absolute;top:14px;left:14px;z-index:2;
  padding:8px 20px;border-radius:999px;
  background:color-mix(in srgb,var(--bg) 60%,transparent);
  border:1px solid var(--border-strong);color:var(--text);
  font-family:var(--font-body);font-weight:700;font-size:13px;cursor:pointer;
  backdrop-filter:blur(4px);transition:border-color var(--dur) var(--ease);
}
.th-map-back-btn:hover{border-color:var(--accent-2);}

/* ---------- Popup Bảng Xếp Hạng: gộp 3 bảng có sẵn, xếp cột trên desktop ---------- */
.th-popup-leaderboard{width:min(980px,96vw);}
.th-popup-leaderboard .th-popup-body{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;
}
.th-lb-section h3{
  margin:0 0 10px;font-family:var(--font-display);font-weight:700;font-size:15px;
  color:var(--accent-2);text-shadow:0 1px 2px rgba(4,7,10,.9);
  text-align:center;
}
@media (max-width:720px){
  .th-popup-leaderboard .th-popup-body{grid-template-columns:1fr;}
}

/* ---------- GĐ2 (Owner 2026-09-07): Popup Đổi Avatar ---------- */
.th-popup-avatar{width:min(420px,92vw);}
/* Owner 2026-09-07 (đợt 4): Owner gửi ảnh mẫu — thay khung tròn viền kim
   nhỏ bằng ảnh chân dung LỚN, tràn hết chiều ngang popup (bệt sát 2 mép,
   không viền/không khung tròn), mờ dần (fade) xuống đáy để hoà vào nền
   popup thay vì bị cắt cứng — đúng bố cục ảnh Owner gửi. Bù lại padding
   20px của .th-popup-body bằng margin âm để ảnh tràn mép. */
.th-avatar-picker-preview{
  margin:-20px -20px 16px -20px;
  width:calc(100% + 40px);
  height:400px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 74%,transparent 100%);
}
.th-avatar-picker-preview img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
@media (max-width:480px){
  .th-avatar-picker-preview{height:300px;}
}
.th-avatar-picker-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
}
.th-avatar-picker-opt{
  padding:0;border-radius:50%;border:2px solid transparent;cursor:pointer;
  background:transparent;aspect-ratio:1;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.th-avatar-picker-opt img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:top center;display:block;}
.th-avatar-picker-opt:hover{transform:scale(1.06);}
.th-avatar-picker-opt.is-selected{border-color:var(--accent-2);box-shadow:var(--glow-accent);}
@media (max-width:480px){
  .th-avatar-picker-grid{grid-template-columns:repeat(4,1fr);}
}
.th-avatar-picker-actions{display:flex;justify-content:center;margin-top:16px;}
/* Owner 2026-09-08 (đợt 2): bỏ hẳn khối đổi tên rời (ô nhập + nút riêng
   chèn giữa ảnh xem trước và lưới avatar) — trên popup 92vw/420px cao chỉ
   467px client height, ảnh xem trước 400px đã chiếm gần hết chỗ nên khối
   đó bị đẩy lọt ra ngoài vùng nhìn thấy (phải cuộn mới thấy nút "Đổi Tên").
   Owner: *"không cần text tên nhân vật, chỉ cần đúng bảng tên ở Sảnh đem
   vào hiển thị ngay chỗ text Đổi Avatar (canh giữa), cạnh bên có icon cây
   bút... như vậy sẽ không phát sinh diện tích"* — thay tiêu đề chữ bằng
   CHÍNH ảnh bảng tên (ui_char_nameplate.png, dùng lại y hệt bảng ở Sảnh)
   + nút bút chì ngay trong .th-popup-head, không thêm block nào trong
   .th-popup-body nữa. */
/* Owner 2026-09-08 (đợt 4→5): "thu hẹp độ cao khung bao quanh, cách bảng
   tên Npx trên dưới" — ban đầu tưởng do padding, thử dần 5px→3px→2px vẫn
   không thấy đổi vì gốc rễ THẬT là ui_char_nameplate.png có sẵn viền trong
   suốt "chết" ~40% chiều cao (đã crop lại ảnh, xem ghi chú ở
   .th-nameplate-inline-bg và commit ảnh). Ảnh đã gọn, quay lại 5px như
   Owner chốt sau khi ảnh đúng tỉ lệ. */
.th-popup-avatar .th-popup-head{position:relative;padding-top:5px;padding-bottom:5px;}
.th-popup-avatar .th-popup-title{
  flex:1;display:flex;align-items:center;justify-content:center;
  margin-right:10px;
}
/* Owner 2026-09-08 (đợt 3): "canh cho bảng tên nằm giữa rồi đến icon cây
   bút... bảng tên lớn hơn, tận dụng diện tích khung tiêu đề còn rộng" —
   .th-popup-title-nameplate KHÔNG còn là flex-row gộp cả 2 (gộp vào sẽ làm
   tâm lệch khỏi tâm thật của bảng tên vì cộng thêm bề rộng nút bút). Chỉ
   bọc đúng bề rộng ảnh bảng tên (để justify-content:center của
   .th-popup-title canh ĐÚNG TÂM bảng tên), nút bút đặt position:absolute
   bám mép phải, không cộng vào bề rộng khi canh giữa. */
.th-popup-title-nameplate{position:relative;display:inline-block;}
.th-nameplate-inline{position:relative;display:block;width:220px;}
.th-nameplate-inline-bg{display:block;width:100%;height:auto;
  filter:drop-shadow(0 2px 4px rgba(4,7,10,.5));}
.th-nameplate-inline-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:0 18%;
  font-family:var(--font-body);font-weight:700;font-size:16px;color:#22170B;
  letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Icon cây bút TRẦN — không khung/không nền, đúng chuẩn PQ-57 (icon nổi
   thẳng trên nền, cấm khối nền đặc) đang áp cho mọi icon Tiên Hiệp khác. */
.th-nameplate-edit-btn{
  position:absolute;top:50%;left:100%;transform:translateY(-50%);
  margin-left:8px;
  border:0;background:none;padding:0;
  color:var(--on-primary);font-size:18px;line-height:1;cursor:pointer;
  filter:drop-shadow(0 1px 2px rgba(4,7,10,.6));
  transition:transform var(--dur) var(--ease);
}
.th-nameplate-edit-btn:hover{transform:translateY(-50%) scale(1.15);}
@media (max-width:480px){
  .th-nameplate-inline{width:150px;}
  .th-nameplate-inline-text{font-size:13px;}
}
/* Popover đổi tên — position:absolute NỔI TRÊN nội dung popup, không đẩy
   layout (đúng yêu cầu "không phát sinh diện tích"). .th-popup có
   overflow:hidden nhưng popover vẫn nằm TRONG khung popup (chỉ đè lên
   .th-popup-body phía dưới header) nên không bị cắt. */
/* Owner 2026-09-08 (đợt 6): "thu hẹp khung bao quanh bám sát ô nhập, text
   nhập canh giữa" — giảm padding pill (14px trái → 8px, khớp padding phải)
   và gap giữa ô nhập/nút Lưu cho khít, bỏ hẳn khoảng dư quanh ô nhập. */
.th-nameplate-editpop{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  z-index:20;width:max-content;max-width:260px;
  display:flex;align-items:center;flex-wrap:wrap;gap:4px;
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:999px;padding:4px 4px 4px 8px;
  backdrop-filter:blur(6px);box-shadow:var(--shadow-lg);
}
.th-nameplate-editpop[hidden]{display:none;}
.th-nameplate-editpop input{
  width:140px;border:0;background:transparent;color:var(--text);
  font-size:13px;padding:6px 0;outline:none;text-align:center;
}
.th-nameplate-editpop input::placeholder{color:var(--text-muted);}
.th-nameplate-editpop .th-charcreate-error{
  flex-basis:100%;text-align:center;padding:0 8px;
}
/* Owner 2026-09-08 (đợt 7): "còn thừa 1 hàng trống bên dưới" — .th-charcreate-error
   (tái dùng từ màn Tạo Nhân Vật) có min-height:16px để tránh giật layout khi
   lỗi xuất hiện, nhưng lúc RỖNG vẫn chiếm nguyên 1 hàng do flex-basis:100%.
   Ẩn hẳn khi rỗng — chỉ hiện (và chiếm chỗ) khi thật sự có lỗi. */
.th-nameplate-editpop .th-charcreate-error:empty{display:none;}

/* ---------- GĐ2 Chương XI (PQ-31..37, PQ-67): Tạo Nhân Vật — MÀN TOÀN
   MÀN HÌNH riêng, không phải popup nhỏ (Owner 2026-09-05 sau khi thấy bản
   popup: "đâu thể tạo nhân vật bằng popup tí xíu như vầy được... phải có
   giao diện tạo nhân vật riêng với cảnh nền đàng hoàng"). Dùng đúng tranh
   `bg_char_creation.webp` (PROMPT_DEMO_09) đã vẽ SẴN CHO VIỆC NÀY — khoảng
   trống giữa khung đã chừa sẵn cho nhân vật ghép đè bằng CSS, KHÔNG cắt
   ghép layer như .stage của Sảnh Chính. z-index cao hơn .th-popup-overlay
   (200) vì đè lên trên mọi thứ khác kể cả Sảnh Game. */
.th-charcreate-scene{
  position:fixed;inset:0;z-index:250;
  background:var(--bg);
  overflow:hidden;
  animation:thPopupFadeIn .25s var(--ease);
}
.th-charcreate-scene-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 30%;
}
.th-charcreate-scene-close{
  position:absolute;top:18px;right:18px;z-index:2;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--border-strong);
  background:color-mix(in srgb,var(--bg) 55%,transparent);color:var(--text);
  font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(4px);
}
/* Owner 2026-09-07: "Tạo Nhân Vật" đang dùng var(--accent-2) — màu kim cổ
   nhạt (#C9A44C), chìm hẳn vào nền trời xanh sáng phía sau. Đổi hẳn sang
   màu HOÀNG KIM đậm/sáng (không phụ thuộc theme accent) + quầng đen dày
   hơn hẳn để luôn nổi bật bất kể ảnh nền sáng hay tối. */
.th-charcreate-scene-title{
  position:absolute;top:24px;left:50%;transform:translateX(-50%);z-index:2;
  margin:0;font-family:var(--font-display);font-weight:var(--display-weight);
  font-size:26px;color:#FFD666;letter-spacing:var(--display-ls);
  text-shadow:
    0 2px 4px rgba(4,7,10,.95),
    0 0 10px rgba(4,7,10,.9),
    0 4px 16px rgba(4,7,10,.85),
    0 0 30px rgba(4,7,10,.6);
}

/* Khu vực nhân vật — canh giữa đúng vùng trống đã chừa trong tranh nền
   (giữa 40% bề ngang × 60% bề cao, theo PROMPT_DEMO_09). Định vị TUYỆT ĐỐI
   độc lập cho từng khối (không dùng flex chung) để icon Nam/Nữ và bảng đặt
   tên không bao giờ đè lên nhau, bất kể ảnh nhân vật rộng hẹp thế nào —
   Owner 2026-09-05 phát hiện bản flex trước đó icon bị bảng tên che khuất. */
.th-charcreate-scene-portrait{
  position:absolute;left:50%;bottom:19%;transform:translateX(-50%);z-index:1;
  height:56vh;max-height:600px;width:auto;object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 18px 30px rgba(4,7,10,.6));
}
/* KHÔNG đóng khung/nền hộp — giống hệt icon HUD thường (PQ-57: icon nổi
   thẳng trên nền, cấm khối nền đặc), chỉ khác là icon TRÒN thay vì vuông và
   to hơn vì đứng cạnh nhân vật. Owner 2026-09-05: "xóa bỏ khung nền đen
   luôn... chỉ còn icon tròn với text như các icon của Tiên Hiệp". */
/* Owner 2026-09-05 (bản desktop/tablet, sau khi đã chỉnh mobile): dời icon
   xuống NGANG CHÂN nhân vật (chân neo ở bottom:19%, đặt icon hơi cao hơn
   một chút) và ÁP GẦN nhân vật hơn thay vì tít ra hai rìa màn hình. */
.th-gender-flank{
  position:absolute;bottom:22%;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:4px;border:0;background:transparent;cursor:pointer;
  transition:transform var(--dur) var(--ease);
}
.th-gender-flank-left{left:32%;}
.th-gender-flank-right{right:32%;}
.th-gender-flank img{
  width:64px;height:64px;border-radius:50%;
  filter:drop-shadow(0 1px 3px rgba(4,7,10,.95)) drop-shadow(0 2px 10px rgba(4,7,10,.75));
  transition:filter var(--dur) var(--ease);
}
.th-gender-flank span{
  font-family:var(--font-body);font-weight:600;font-size:12.5px;color:#fff;
  text-shadow:0 1px 2px rgba(4,7,10,.95),1px 0 2px rgba(4,7,10,.8),-1px 0 2px rgba(4,7,10,.8),0 -1px 2px rgba(4,7,10,.8);
}
.th-gender-flank:hover{transform:translateY(-2px) scale(1.08);}
.th-gender-flank:hover img,
.th-gender-flank.is-selected img{
  filter:drop-shadow(0 1px 3px rgba(4,7,10,.95)) drop-shadow(0 0 10px var(--accent)) drop-shadow(0 0 20px var(--accent));
}

/* GĐ2 (Owner 2026-09-07 — đợt 2): bỏ hẳn khung Avatar-lớn-luôn-hiện — Owner:
   "không có cách nào để vừa lớn mà lại không gây thô giao diện". Thay bằng
   TOOLTIP nổi lên ngay tại hàng chọn khi vừa bấm 1 avatar, tắt khi bấm ra
   ngoài — xem `.th-charcreate-avatar-tooltip` bên dưới. */

/* Hàng chọn Avatar — carousel dùng CUỘN NGANG GỐC của trình duyệt (không
   phải JS mô phỏng) để có cảm giác vuốt mượt tự nhiên (có đà, đúng hành vi
   chuột/trackpad/cảm ứng thật) và KHÔNG đụng chạm gì tới sự kiện click của
   từng nút avatar bên trong (khác bản pointer-drag tự viết trước đó, lỡ
   chặn mất click — Owner báo "không chọn được avatar khác"). */
.th-charcreate-avatar-carousel{display:flex;align-items:center;gap:6px;position:relative;}
.th-charcreate-avatar-nav{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--border-strong);background:color-mix(in srgb,var(--bg) 55%,transparent);
  color:var(--text);font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.th-charcreate-avatar-nav:hover{border-color:var(--accent-2);color:var(--accent-2);}

/* Owner 2026-09-07 (đợt 2): TOOLTIP avatar lớn — nổi lên NGAY TRÊN hàng
   chọn (không phải góc xa), tự ẩn/hiện qua class .is-visible (JS toggle
   theo click-ngoài, không dùng :hover vì Owner muốn "click ra ngoài mới
   tắt" chứ không phải rê chuột ra là tắt ngay). */
.th-charcreate-avatar-tooltip{
  position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%) scale(.9);
  width:180px;height:180px;border-radius:50%;
  border:3px solid var(--accent-2);
  box-shadow:0 0 16px color-mix(in srgb,var(--accent-2) 70%,transparent),
             0 0 34px color-mix(in srgb,var(--accent-2) 40%,transparent),
             inset 0 0 14px color-mix(in srgb,var(--accent-2) 30%,transparent);
  background:radial-gradient(120% 120% at 30% 20%,var(--surface-3),var(--bg-2));
  overflow:hidden;pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.th-charcreate-avatar-tooltip.is-visible{
  opacity:1;visibility:visible;transform:translateX(-50%) scale(1);pointer-events:auto;
}
.th-charcreate-avatar-tooltip img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
/* Mũi tên nhỏ chỉ xuống hàng avatar, cho rõ tooltip "thuộc về" hàng chọn */
.th-charcreate-avatar-tooltip::after{
  content:'';position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
  border:8px solid transparent;border-top-color:var(--accent-2);
}

/* Khung đặt tên — CHỈ MỘT Ô CHỮ NHẬT NHỎ GỌN + nút "Tạo" đi kèm, không đóng
   khung/bệ kính lớn (Owner 2026-09-05: "khung đặt tên chỉ là 1 ô chữ nhật
   vừa vặn, nhỏ gọn thôi... không cần đóng khung luôn" — bản trước to gần
   bằng nửa ảnh nhân vật, sai hẳn tỉ lệ của game tiên hiệp thật). Neo đáy
   màn, dưới chân nhân vật (chân neo ở bottom:19%). */
.th-charcreate-scene-panel{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
/* GĐ2 (Owner 2026-09-07 — đợt 2): hàng chọn Avatar — cùng khuôn viên nang
   mờ như ô tên bên dưới. Owner phát hiện bản pointer-drag tự viết trước
   đó (transform + JS) chặn mất click và giật/lag khi vuốt — bỏ HẲN, dùng
   CUỘN NGANG GỐC (`overflow-x:auto` + `scroll-snap-type`) — mượt tự
   nhiên, không đụng gì tới click, hiện avatar kế tiếp NGAY TRONG LÚC kéo
   (không phải đợi buông tay). Rộng vừa khít 5 ô, 5 ô còn lại cuộn tới. */
.th-charcreate-avatar-row{
  display:flex;gap:10px;
  width:calc(5 * 56px + 4 * 10px + 24px); /* 5 ô + 4 khe + padding 2 bên */
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:6px 12px;
  background:color-mix(in srgb,var(--bg) 55%,transparent);
  border:1px solid var(--border-strong);border-radius:999px;
  backdrop-filter:blur(6px);box-shadow:var(--shadow);
}
/* Ẩn thanh cuộn ngang (viên nang tự thân đã đủ gợi ý "cuộn được" nhờ hình
   dạng pill + 2 nút ‹›) — vẫn cuộn được bình thường, chỉ ẩn thanh trượt.
   cursor:grab gợi ý kéo-bằng-chuột được (JS, xem tien-hiep-popup.js). */
.th-charcreate-avatar-row{scrollbar-width:none;cursor:grab;}
.th-charcreate-avatar-row:active{cursor:grabbing;}
.th-charcreate-avatar-row::-webkit-scrollbar{display:none;}
/* Owner 2026-09-07: "chỉ hiển thị 5 avatar sau, dành không gian để avatar
   được lớn hơn" — 40px→56px, vừa khít 5 ô trong khung, 5 ô còn lại cuộn
   ngang tới (không chia trang cứng nữa). */
.th-charcreate-avatar-opt{
  flex-shrink:0;width:56px;height:56px;border-radius:50%;padding:0;
  border:2px solid transparent;cursor:pointer;background:transparent;
  scroll-snap-align:start;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.th-charcreate-avatar-opt img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:top center;display:block;pointer-events:none;}
.th-charcreate-avatar-opt:hover{transform:scale(1.08);}
.th-charcreate-avatar-opt.is-selected{border-color:var(--accent-2);box-shadow:var(--glow-accent);}

.th-charcreate-name-row{
  display:flex;gap:8px;
  background:color-mix(in srgb,var(--bg) 55%,transparent);
  border:1px solid var(--border-strong);border-radius:999px;
  padding:5px 5px 5px 16px;backdrop-filter:blur(6px);box-shadow:var(--shadow);
}
.th-charcreate-name-row input{
  width:200px;border:0;background:transparent;color:var(--text);
  font-size:14px;padding:6px 0;outline:none;
}
.th-charcreate-name-row input::placeholder{color:var(--text-muted);}
.th-charcreate-submit{
  border:0;border-radius:999px;padding:7px 20px;
  background:var(--grad-primary);color:var(--on-primary);
  font-family:var(--font-body);font-weight:700;font-size:13px;cursor:pointer;
  transition:filter var(--dur) var(--ease);
}
.th-charcreate-submit:hover{filter:brightness(1.08);}
.th-charcreate-submit:disabled{opacity:.6;cursor:default;}
.th-charcreate-error{display:block;min-height:16px;font-size:12px;color:#E0645A;
  text-shadow:0 1px 3px rgba(4,7,10,.9);}

@media (max-width:780px){
  .th-charcreate-scene-title{font-size:20px;}
  .th-charcreate-scene-portrait{bottom:24%;height:40vh;}
  /* Owner 2026-09-05: trên mobile để icon Nam/Nữ ở TRÊN đầu xa nhân vật,
     khó liên tưởng — dời xuống ngang CHÂN nhân vật (đứng 2 bên trái/phải
     chân), giống hệt vị trí trên desktop chỉ khác cỡ nhỏ hơn. Chân nhân vật
     ở khoảng bottom:24% (đáy ảnh portrait) — đặt icon hơi cao hơn 1 chút. */
  /* Owner tiếp: "lớn hơn 50% và gần nhân vật hơn" — 40px→60px, mép ngoài
     6%→16% (áp sát vai/tay nhân vật hơn thay vì ra tận rìa màn hình). */
  .th-gender-flank{bottom:27%;}
  .th-gender-flank-left{left:16%;}
  .th-gender-flank-right{right:16%;}
  .th-gender-flank img{width:60px;height:60px;}
  .th-gender-flank span{font-size:13px;}
  .th-charcreate-scene-panel{bottom:3%;}
  .th-charcreate-name-row input{width:150px;}
  .th-charcreate-avatar-opt{width:42px;height:42px;}
  .th-charcreate-avatar-row{width:calc(5 * 42px + 4 * 10px + 24px);}
  .th-charcreate-avatar-tooltip{width:130px;height:130px;}
}

/* GĐ2 Chương XI (PQ-44/56): 10 ô Trang Bị KHÔNG còn là popup — chuyển sang
   2 cột icon nổi trần quanh nhân vật ngay trên Sảnh Chính (PQ-68), style ở
   tien-hiep-hero.css (.th-equip-rail/.th-equip-item*), Owner 2026-09-06. */

/* =============================================================================
   GĐ2 §4.2 — MÀN "GIA NHẬP MÔN PHÁI" (PQ-35/PQ-38/PQ-42/PQ-59), 2026-09-08
   Cùng khuôn kỹ thuật với .th-charcreate-scene (toàn màn hình riêng, 1 nền
   cảnh cố định + NPC ghép đè bằng CSS). Ảnh NPC thật (1024×1536, dọc) và
   nền (1600×686, ngang rộng panorama) — khác tỉ lệ giả định ban đầu, layout
   dưới đây theo ĐÚNG kích thước ảnh thật đã lắp, không phải hình vuông.
   ============================================================================= */
.th-sectinvite-scene{
  position:fixed;inset:0;z-index:250;
  background:var(--bg);
  overflow:hidden;
  animation:thPopupFadeIn .25s var(--ease);
}
.th-sectinvite-scene-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Owner 2026-09-09: neo hẳn cạnh trái (0%) cắt mất luôn cổng khi màn hẹp
     (cổng không nằm sát mép, mất khoảng đệm 2 bên). Đổi sang lấy TÂM của
     đoạn 1/3 bên trái ảnh (~16.6%) làm điểm neo — co hẹp màn hình giờ cắt
     đều 2 bên quanh điểm đó thay vì cắt cứng từ 1 cạnh, luôn chừa đệm quanh
     cổng + con đường đá. */
  object-position:16.6% 45%;
}
.th-sectinvite-scene-close{
  position:absolute;top:18px;right:18px;z-index:5;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--border-strong);
  background:color-mix(in srgb,var(--bg) 55%,transparent);color:var(--text);
  font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(4px);
}

/* Owner 2026-09-08: "NPC nên nổi lên trên cùng, nổi lên trên cả khối giới
   thiệu môn phái" — z-index cao hơn hẳn panel/hàng Ngũ Hành/quote (2), chỉ
   thấp hơn nút đóng (5). `pointer-events:none` nên dù đứng trên cùng vẫn
   không chặn click các nút bên dưới ở phần NPC trong suốt. */
/* QA 2026-09-09: panel giờ CỐ ĐỊNH 525px (không co theo viewport nữa, xem
   .th-sectinvite-panel) — NPC tính theo `62vh` (chiều CAO màn hình) hoàn
   toàn không "biết" panel chiếm bao nhiêu chỗ theo chiều NGANG, nên ở màn
   hẹp (~560-700px) 2 khối đụng nhau nặng (Owner: "NPC to khổng lồ che ảnh
   bên trên"). Đổi hẳn sang tính theo BỀ RỘNG còn trống (vw) thay vì chiều
   cao màn hình — tự nhỏ lại đúng lúc màn hẹp, tự lớn lên khi màn rộng,
   luôn chừa chỗ hợp lý cho panel bên cạnh. */
/* Owner 2026-09-09: "NPC tự co giãn OK nhưng hạn nhỏ nhất cao 300px". Dùng
   `clamp()` NGAY TRÊN chiều cao (quy đổi 26vw bề rộng cũ sang 39vw chiều
   cao — cùng tỉ lệ thật ảnh NPC 1024:1536, 26×1.5=39) + `width:auto` — CHỈ
   ràng 1 chiều nên trình duyệt tự giữ đúng tỉ lệ, không cần object-fit,
   không thể méo. min 300px (sàn Owner chốt), max 510px (≈ trần 340px bề
   rộng cũ, giữ nguyên cảm giác không phóng quá to ở màn rất rộng). */
.th-sectinvite-npc{
  position:absolute;left:0;bottom:0;z-index:4;
  height:clamp(300px,39vw,510px);width:auto;
  filter:drop-shadow(0 20px 30px rgba(4,7,10,.55));
  pointer-events:none;
}
/* Owner 2026-09-09: câu dẫn rút còn 1 dòng ("Hãy chọn môn phái muốn bái
   sư!") — nới rộng khung + `white-space:nowrap` để KHÔNG BAO GIỜ tự xuống
   hàng dù màn hẹp tới đâu (dư chữ thì tràn nhẹ còn hơn ngắt dòng xấu).
   Neo `top` bằng PX cố định (không phải %) — khung này cao theo NỘI DUNG
   chữ (gần như hằng số, không tỉ lệ theo chiều cao màn hình), dùng % dễ
   trôi lệch ở màn ngắn. Hàng Ngũ Hành ngay dưới cũng đổi sang px cùng hệ
   quy chiếu để 2 khối luôn tách bạch, không còn đè lên nhau. */
.th-sectinvite-npc-quote{
  position:absolute;left:3%;top:10px;width:min(340px,80vw);z-index:2;
  background:color-mix(in srgb,var(--bg) 45%,transparent);
  border:1px solid var(--border-strong);border-radius:var(--radius);
  padding:8px 16px;backdrop-filter:blur(6px);box-shadow:var(--shadow);
}
.th-sectinvite-npc-quote p{
  margin:0;font-family:var(--font-body);font-style:italic;font-size:13px;
  color:var(--text);text-shadow:0 1px 2px rgba(4,7,10,.7);line-height:1.35;
  white-space:nowrap;
}

/* QA 2026-09-08: hàng ngày trước neo `top:50%` (centered) trùng vùng dọc với
   `.th-sectinvite-panel` (cũng centered) — ở khung ngắn (~600px cao) 2 khối
   đè nhau, hàng Ngũ Hành bị panel che mất hoàn toàn. Neo CỐ ĐỊNH gần đỉnh
   (`top`, không phải centered) — .th-sectinvite-panel bên dưới đổi sang neo
   từ đỉnh luôn (xem tiếp) để 2 khối không còn tranh chấp cùng 1 vùng. */
.th-sectinvite-wuxing-row{
  position:absolute;left:50%;top:58px;transform:translateX(-50%);z-index:2;
  display:flex;gap:12px;
  /* Owner: "5 icon bị biến dạng dù còn dư khoảng trống" — phần tử tuyệt đối
     chỉ khai `left` (không khai `right`) nên trình duyệt tự tính bề rộng
     "vừa khít nội dung" dựa trên khoảng trống CÒN LẠI tới mép phải màn hình
     thay vì bề rộng THẬT của 5 nút con (dù mỗi nút flex-shrink:0, hộp CHA
     vẫn bị tính hụt) — `transform:translateX(-50%)` canh giữa dựa trên bề
     rộng hụt đó nên bị lệch, đẩy icon cuối ra ngoài màn hình. Ép hẳn
     `width:max-content` để hộp cha LUÔN đúng bằng tổng bề rộng nội dung
     thật, canh giữa mới chính xác. */
  width:max-content;
}
.th-sectinvite-wuxing-btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  flex-shrink:0;
  padding:2px;border:0;background:transparent;cursor:pointer;
  transition:transform var(--dur) var(--ease);
}
.th-sectinvite-wuxing-btn img{
  width:56px;height:56px;border-radius:50%;
  filter:drop-shadow(0 1px 3px rgba(4,7,10,.95)) drop-shadow(0 2px 10px rgba(4,7,10,.75));
  transition:filter var(--dur) var(--ease);
}
.th-sectinvite-wuxing-btn span{
  font-family:var(--font-body);font-weight:600;font-size:12px;color:#fff;
  text-shadow:0 1px 2px rgba(4,7,10,.95),1px 0 2px rgba(4,7,10,.8),-1px 0 2px rgba(4,7,10,.8);
}
.th-sectinvite-wuxing-btn:hover{transform:translateY(-2px) scale(1.08);}
.th-sectinvite-wuxing-btn.is-selected img{
  filter:drop-shadow(0 1px 3px rgba(4,7,10,.95)) drop-shadow(0 0 10px var(--accent)) drop-shadow(0 0 20px var(--accent));
}

/* Owner 2026-09-09 (chốt cuối): "≥560px cố định chiều cao ảnh 350px, chiều
   ngang TỰ SCALE theo đúng tỉ lệ gốc — không crop cạnh nào, kể cả desktop".
   `cover` (đợt trước) bắt ảnh LẤP ĐẦY khung có sẵn ⟹ luôn phải cắt khi tỉ lệ
   khung ≠ tỉ lệ ảnh — sai hẳn yêu cầu "không crop". Đảo lại: ẢNH quyết định
   bề rộng của nó (height cố định + width:auto giữ đúng tỉ lệ thật).
   BUG đã vá: dùng `width:fit-content` cho PANEL để nó tự nới theo ảnh —
   nhưng `fit-content` tính theo bề rộng UNWRAP (không xuống dòng) của MỌI
   con bên trong, kể cả đoạn mô tả dài (<p>) — 1 câu mô tả dài viết liền 1
   dòng có thể rộng 700-900px, khiến panel phình to theo CHỮ chứ không phải
   theo ẢNH (đúng thứ Owner vừa bắt lỗi). Sửa dứt điểm: bỏ hẳn fit-content,
   TÍNH THẲNG bề rộng = chiều cao ảnh × tỉ lệ thật (350×1.5 = 525px, cả 5
   phái đều chung tỉ lệ 1536:1024 = 1.5, đã kiểm tra file thật) — panel
   LUÔN đúng bằng đúng bề rộng ảnh, không phụ thuộc nội dung chữ bên trong
   nữa. */
.th-sectinvite-panel{
  position:absolute;right:3%;top:140px;z-index:2;
  /* Owner 2026-09-09: "disable thanh cuộn đi... không hề cần phải cuộn" —
     desktop hiện thanh cuộn dù nội dung chưa hề tràn. Owner 2026-09-28: BẬT
     LẠI overflow-y:auto — nay có đủ 9 icon kỹ năng thật/phái (trước chỉ 6
     ô demo), nội dung có thể tràn thật, cấm mất nút Gia Nhập/nội dung phía
     dưới; thanh cuộn chỉ xuất hiện khi thật sự tràn (auto, không phải
     scroll). */
  width:min(525px,90vw);max-height:calc(100vh - 190px);overflow-y:auto;
  background:color-mix(in srgb,var(--surface) 55%,transparent);
  border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  backdrop-filter:blur(10px);box-shadow:var(--shadow-lg);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
/* Owner 2026-09-09: nút "−" góc bảng — thu gọn CHỈ CÒN nút nổi, bấm lại
   hoặc đổi phái khác (xử lý ở JS) sẽ bung lại như cũ. */
.th-sectinvite-panel-collapse{
  position:absolute;top:8px;right:8px;z-index:3;
  width:26px;height:26px;border-radius:50%;border:1px solid var(--border-strong);
  background:color-mix(in srgb,var(--bg) 60%,transparent);color:var(--text);
  font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(4px);transition:border-color var(--dur) var(--ease);
}
.th-sectinvite-panel-collapse:hover{border-color:var(--accent-2);}
.th-sectinvite-panel.is-collapsed{
  width:auto;max-height:none;overflow:visible;
  background:none;border:0;backdrop-filter:none;box-shadow:none;
}
.th-sectinvite-panel.is-collapsed .th-sectinvite-panel-bg,
.th-sectinvite-panel.is-collapsed .th-sectinvite-panel-inner{display:none;}
.th-sectinvite-panel.is-collapsed .th-sectinvite-panel-collapse{position:static;}
/* Owner 2026-09-09: "ảnh môn phái cần hiển thị ĐÚNG TỈ LỆ, luôn thấy đủ
   hình — đổi bề rộng màn hình thì ảnh co giãn theo, ĐẨY nội dung xuống chứ
   không fix cứng chiều cao rồi cắt mất ảnh". `height:130px` + `object-fit:
   cover` cũ CẮT MẤT ảnh để nhét vừa khung cứng.
   Lịch sử ngắn: height:auto (không crop, nhưng phụ thuộc bề rộng panel) →
   height cố định + `object-fit:contain` (không crop nhưng để trống mảng
   lớn khi panel hẹp hơn tỉ lệ ảnh) → `object-fit:cover` (lấp đầy, nhưng
   BẮT BUỘC crop cạnh khi tỉ lệ khung ≠ tỉ lệ ảnh — đúng thứ Owner không
   muốn). Chốt cuối: BỎ HẲN `width:100%` — chỉ ràng `height`, để `width:
   auto` tự giữ đúng tỉ lệ gốc (không object-fit nào cần thiết khi chỉ ràng
   1 chiều), panel bên ngoài (`width:fit-content`) tự nới theo đúng bề rộng
   ảnh — ảnh không bao giờ bị crop, kể cả desktop. */
.th-sectinvite-panel-bg{width:auto;height:350px;max-width:100%;display:block;}
.th-sectinvite-panel-inner{padding:10px 16px 12px;}
.th-sectinvite-panel-inner h2{
  margin:0 0 4px;font-family:var(--font-display);font-weight:var(--display-weight);
  font-size:19px;color:var(--text);line-height:1.2;
}
.th-sectinvite-panel-element{font-size:12px;color:var(--accent-2);font-weight:600;margin-left:6px;}
/* Owner 2026-09-08: "dời Khắc Chế lên cùng hàng, phía sau Hệ" — gộp thẳng
   vào dòng <h2> (tên phái + Hệ + Khắc Chế cùng 1 dòng), không còn là đoạn
   riêng bên dưới mô tả nữa. */
.th-sectinvite-panel-counter{font-size:12px;color:var(--text);font-weight:600;margin-left:4px;}
.th-sectinvite-panel-tagline{margin:0 0 6px;font-size:12.5px;font-style:italic;color:var(--text-muted);}
.th-sectinvite-panel-desc{margin:0 0 6px;font-size:13px;color:var(--text);line-height:1.4;}

/* Owner 2026-09-08: "thay 6 kỹ năng bằng 6 ô icon demo (khung phẩm chất có
   sẵn), rê chuột hiện tooltip tên/mô tả — bảng giới thiệu gọn hơn, dành
   diện tích cho hình ảnh môn phái". 1 khung phẩm chất DEMO/hệ, dùng chung
   cho cả 6 ô — chưa phải icon kỹ năng thật (chờ hệ Kỹ Năng GĐ4).
   Owner tiếp: "6 icon quá lớn, kể cả trên desktop — cố định 55×55px" —
   trước đó dùng `repeat(3,1fr)` nên ô co giãn theo bề rộng panel (rất to ở
   panel rộng trên mobile 92vw); ép cột `55px` cố định + `justify-content:
   center` để LUÔN đúng 55×55 bất kể panel rộng hẹp thế nào. */
.th-sectinvite-skill-grid{
  display:grid;grid-template-columns:repeat(3,55px);justify-content:center;gap:6px;
  margin:0 0 8px;
}
.th-sectinvite-skill-icon{
  width:55px;height:55px;
  border:0;background:transparent;padding:0;cursor:pointer;
  transition:transform var(--dur) var(--ease);
}
.th-sectinvite-skill-icon img{width:100%;height:100%;object-fit:contain;display:block;}
.th-sectinvite-skill-icon:hover{transform:scale(1.08);}
.th-sectinvite-skill-tooltip{
  position:fixed;z-index:20;max-width:240px;text-align:center;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);
  padding:8px 12px;box-shadow:var(--shadow-lg);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .15s var(--ease);
}
.th-sectinvite-skill-tooltip.is-visible{opacity:1;visibility:visible;}
.th-sectinvite-skill-tooltip strong{display:block;font-size:13px;color:var(--accent-2);margin-bottom:2px;}
.th-sectinvite-skill-tooltip span{display:block;font-size:12px;color:var(--text-muted);line-height:1.35;}
/* Owner 2026-09-28: tooltip 9 kỹ năng thật dùng chung markup
   `_thSkillSceneTooltipHtml()` với Scene Kỹ Năng thật (art/kind/req/
   modifiers) — chỉ thêm style riêng cho ảnh + khối chỉ số, phần strong/span
   đã có sẵn quy tắc chung ở trên. */
.th-sectinvite-skill-tooltip .th-skill-scene-tooltip-art{width:96px;height:96px;object-fit:contain;margin:0 auto 6px;}
.th-sectinvite-skill-tooltip .th-skill-scene-tooltip-kind{color:var(--accent-2);font-weight:600;}
.th-sectinvite-skill-tooltip .th-skill-scene-tooltip-modifiers{margin-top:6px;padding-top:6px;border-top:1px solid var(--border);text-align:left;}
.th-sectinvite-skill-tooltip .th-skill-scene-tooltip-modifiers span{margin-top:2px;}
.th-sectinvite-panel-joined{
  padding:8px;text-align:center;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 20%,transparent);
  color:var(--accent);font-weight:700;font-size:13px;
}
/* Owner 2026-09-09: nút "Để Sau" dời từ nút nổi cuối màn sang NGAY CẠNH nút
   "Gia Nhập Môn Phái" — cả 2 giờ nằm chung 1 hàng flex canh giữa trong
   panel, thay vì `.th-charcreate-submit` tự canh giữa riêng lẻ.
   Owner 2026-09-28: bảng giới thiệu 5 môn phái mô tả dài đẩy hàng nút này
   xuống quá xa, bị cắt mất do `.th-sectinvite-panel` không cho cuộn
   (overflow-y:hidden) — dời khối actions lên ĐẦU `.th-sectinvite-panel-inner`
   (ngay dưới ảnh, trước tên/Ngũ Hành) nên đổi margin-top→margin-bottom. */
.th-sectinvite-panel-actions{
  display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 8px;
}
.th-sectinvite-panel-actions .th-charcreate-submit,
.th-sectinvite-panel-actions .th-sectinvite-panel-joined{margin:0;}
/* Lỗi Gia Nhập giờ nằm ngay dưới hàng nút (trước tên phái) — ẩn khoảng
   trống `min-height` của `.th-charcreate-error` khi chưa có lỗi gì. */
.th-sectinvite-panel-inner .th-charcreate-error{text-align:center;margin:0;}
.th-sectinvite-panel-inner .th-charcreate-error:empty{display:none;min-height:0;}

.th-sectinvite-later{
  padding:6px 22px;border-radius:999px;
  background:color-mix(in srgb,var(--bg) 55%,transparent);
  border:1px solid var(--border-strong);color:var(--text);
  font-weight:700;font-size:13px;cursor:pointer;
  transition:border-color var(--dur) var(--ease);
}
.th-sectinvite-later:hover{border-color:var(--accent-2);}
.th-sectinvite-later:disabled{opacity:.45;cursor:not-allowed;}
.th-sectinvite-later:disabled:hover{border-color:var(--border-strong);}

/* Owner 2026-09-09: "từ size 650 trở xuống thì áp dụng chiều cao ảnh môn
   phái là 280" — vùng 561-650px (trên mốc mobile 560 nhưng vẫn hẹp) dùng
   ảnh thấp hơn (280 thay vì 350 mặc định). Panel co theo ĐÚNG công thức đã
   chốt (bề rộng = chiều cao ảnh × 1.5 = 280×1.5 = 420px) để không hở khoảng
   trống cạnh ảnh, giữ nguyên nguyên tắc "panel luôn khớp đúng ảnh". */
@media (max-width:650px){
  .th-sectinvite-panel{width:min(420px,90vw);}
  .th-sectinvite-panel-bg{height:280px;}
}

/* QA 2026-09-08: breakpoint cũ 780px trùng ngay khổ thử mặc định của môi
   trường test (750×600) — 2 khối bottom-anchored (hàng Ngũ Hành + panel)
   đè lên nhau ở khổ đó. Bộ mặc định ở trên giờ đã đủ gọn (NPC 62vh, panel
   neo từ đỉnh thay vì centered) để chạy tốt luôn ở ~750px — hạ hẳn
   breakpoint xuống 560px, chỉ còn dành riêng cho điện thoại DỌC thật sự. */
@media (max-width:560px){
  /* QA 2026-09-08: quote (top:3%) và hàng Ngũ Hành (thừa hưởng top:4% mặc
     định) từng CÙNG neo sát đỉnh — ở màn hẹp (dọc), bề ngang quote chiếm
     phần lớn màn hình nên 2 khối chồng thẳng lên nhau. Dời hẳn hàng Ngũ
     Hành XUỐNG DƯỚI quote, panel dời xuống tiếp theo. NPC bỏ hẳn opacity
     mờ — Owner: "nổi lên trên cùng", không phải ẩn bớt đi.
     Owner 2026-09-09: câu dẫn rút còn 1 dòng (quote thấp hẳn xuống) + thu
     gọn mọi khoảng trống để vừa 1 màn hình, không cuộn — dời mốc top của
     hàng Ngũ Hành/panel lên gần hơn, bớt hẳn khoảng đệm thừa. */
  .th-sectinvite-npc{height:36vh;left:-6%;}
  .th-sectinvite-npc-quote{width:min(280px,80vw);top:10px;font-size:12px;}
  .th-sectinvite-wuxing-row{top:60px;gap:8px;}
  .th-sectinvite-wuxing-btn{gap:2px;}
  .th-sectinvite-wuxing-btn img{width:40px;height:40px;}
  .th-sectinvite-wuxing-btn span{font-size:10.5px;}
  .th-sectinvite-panel{
    left:50%;right:auto;top:140px;transform:translateX(-50%);
    width:92vw;max-height:calc(100vh - 200px);
  }
  /* Owner 2026-09-09: mobile GIỮ NGUYÊN kiểu cũ (lấp đầy bề ngang panel,
     cover) — Owner xác nhận "giao diện mobile đang rất đẹp", CHỈ đổi cách
     tính bề rộng ảnh cho ≥560px (xem rule mặc định phía trên). Panel mobile
     vẫn `width:92vw` cố định (không phải fit-content) nên ảnh lấp đầy đúng
     bề ngang đó là hợp lý, không cần tự scale theo tỉ lệ như bản lớn. */
  .th-sectinvite-panel-bg{width:100%;height:280px;object-fit:cover;object-position:center;}
  .th-sectinvite-panel-inner{padding:8px 14px 10px;}
}

/* ---------- Tôn trọng prefers-reduced-motion (JOB_TH1_09 DoD) ---------- */
@media (prefers-reduced-motion:reduce){
  .th-popup-overlay{animation:none;}
  .th-popup-close,
  .th-launcher-cell,
  .th-launcher-logo,
  .th-gender-btn{transition:none;}
}

/* TH4.08-B: approved Bí Cảnh artwork is the full Scene canvas. */
.th-territory-scene{position:fixed;inset:0;z-index:120;overflow:hidden;background:#050c12;}
.th-territory-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.th-territory-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,10,14,.08) 45%,rgba(3,10,14,.62));pointer-events:none;}
.th-territory-status{position:absolute;z-index:5;left:50%;top:96px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);color:#f7eed4;font:700 12px var(--font-body);text-shadow:0 2px 4px #000;}
.th-territory-status span{padding:8px 11px;border:1px solid rgba(242,218,139,.48);border-radius:999px;background:rgba(4,13,18,.48);backdrop-filter:blur(3px);white-space:nowrap;}
/* TH4.08-C.01: preview art only; controls do not start a combat session. */
.th-territory-art-preview{position:absolute;z-index:2;left:clamp(6%,16vw,23%);bottom:clamp(92px,16vh,176px);width:clamp(190px,28vw,390px);display:grid;justify-items:center;pointer-events:none;filter:drop-shadow(0 12px 14px rgba(0,0,0,.58));}
.th-territory-combat-hud{position:absolute;z-index:5;top:20px;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:3px;min-width:220px;padding:8px 16px;border:1px solid rgba(242,218,139,.62);border-radius:10px;background:rgba(5,14,18,.7);color:#fff4c7;font:700 13px var(--font-body);text-align:center;text-shadow:0 2px 4px #000;backdrop-filter:blur(4px)}.th-territory-combat-hud b{color:#ffe68d;font-size:20px;letter-spacing:1px}
.th-territory-art-preview-dual{width:clamp(440px,58vw,820px);left:50%;transform:translateX(-50%);}
.th-territory-preview-stage{position:relative;width:100%;min-height:clamp(255px,35vw,435px);pointer-events:none;}
.th-territory-preview-actor{position:absolute;bottom:0;display:grid;justify-items:center;align-items:end;min-width:0;color:#f7eed4;font:700 10px var(--font-body);text-align:center;text-shadow:0 2px 4px #000;z-index:2;}
.th-territory-preview-actor.is-wolf{width:33%;right:8%;}
.th-territory-preview-actor.is-player{width:43%;left:8%;}
.th-territory-preview-actor.is-player .th-territory-preview-sprite{aspect-ratio:5/4;}
.th-territory-preview-sprite{width:100%;aspect-ratio:1;background-repeat:no-repeat;background-size:400% 400%;image-rendering:auto;}
.th-territory-vfx-layer{position:absolute;inset:0;z-index:3;pointer-events:none;}
.th-territory-vfx{position:absolute;background-repeat:no-repeat;filter:drop-shadow(0 4px 7px rgba(0,0,0,.34));mix-blend-mode:screen;}
.th-territory-vfx--staff_swing{width:40%;aspect-ratio:1;left:20%;bottom:15%;}
.th-territory-vfx--staff_impact{width:31%;aspect-ratio:1;right:10%;bottom:-7%;}
.th-territory-vfx--skill_channel{width:50%;aspect-ratio:1;left:4%;bottom:-6%;opacity:.9;}
.th-territory-vfx--hit_mark{width:18%;aspect-ratio:1;right:17%;bottom:35%;}
.th-territory-vfx--footstep_dust{width:25%;aspect-ratio:1;left:17%;bottom:-3%;opacity:.78;}
.th-territory-vfx--drop_motes{width:29%;aspect-ratio:1;right:10%;bottom:-4%;opacity:.88;}
.th-territory-vfx--defeat_dissolve{width:34%;aspect-ratio:1;left:12%;bottom:1%;opacity:.82;}
.th-territory-preview-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-width:310px;margin-top:-8px;pointer-events:auto;filter:none;}
.th-territory-preview-controls button{border:1px solid rgba(242,218,139,.55);border-radius:999px;padding:5px 8px;background:rgba(4,13,18,.62);color:#f7eed4;font:700 11px var(--font-body);text-shadow:0 1px 2px #000;cursor:pointer;backdrop-filter:blur(3px);}
.th-territory-preview-controls button[aria-pressed="true"]{border-color:#fff0a6;background:rgba(123,87,28,.8);color:#fff9d8;}
.th-territory-preview-state{margin-top:6px;color:#f7eed4;font:700 11px var(--font-body);text-shadow:0 2px 4px #000;}
@media (max-width:560px){.th-territory-status{bottom:18px;flex-direction:column;gap:6px;}.th-territory-status span{font-size:11px;}.th-territory-art-preview{left:50%;bottom:112px;transform:translateX(-50%);width:min(58vw,300px);}.th-territory-art-preview-dual{width:min(94vw,450px);}.th-territory-preview-stage{min-height:min(61vw,305px);}.th-territory-preview-actor.is-wolf{width:35%;right:6%;}.th-territory-preview-actor.is-player{width:45%;left:5%;}.th-territory-preview-controls{max-width:275px;}.th-territory-preview-controls button{padding:4px 7px;font-size:10px;}}
@media (prefers-reduced-motion:reduce){.th-territory-preview-sprite{display:none;}.th-territory-preview-state::after{content:' (đã tắt theo cài đặt giảm chuyển động)';}}

/* TH4.08-C.02 — combat PvE Bí Cảnh: ảnh tĩnh + CSS thuần, không sprite sheet. */
.th-combat-arena{position:absolute;inset:0;z-index:3;pointer-events:none;container-type:size;}
.th-combat-actor{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:auto;transition:filter .15s ease;}
.th-combat-actor img{display:block;height:clamp(120px,22vh,240px);width:auto;filter:drop-shadow(0 10px 12px rgba(0,0,0,.55));}
.th-combat-player img{height:clamp(140px,26vh,270px);}
/* TH4.08-C.02 (2026-09-18): thêm --th-combat-monster-approach-x — quái tiến
   dần về phía nhân vật theo distance_px server gửi, cộng thêm transition êm
   giữa các lần cập nhật (poll 1s/lần) để không giật cục dù server chỉ cập
   nhật rời rạc theo bước. */
.th-combat-monster{transform:translate(calc(-50% + var(--th-combat-monster-offset-x,0px) + var(--th-combat-monster-approach-x,0px)),calc(-100% + var(--th-combat-monster-offset-y,0px) + var(--th-combat-monster-approach-y,0px)));cursor:pointer;transition:transform 1s linear;}
.th-combat-monster.is-selected img{filter:drop-shadow(0 0 10px #ffe68d) drop-shadow(0 10px 12px rgba(0,0,0,.55));}
.th-combat-monster.is-dead{opacity:0;transition:opacity .3s ease;pointer-events:none;}
.th-combat-monster-layer{position:absolute;width:1px;height:1px;}
.th-combat-hp{width:74px;height:7px;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);overflow:hidden;}
.th-combat-hp-fill{height:100%;width:100%;background:linear-gradient(90deg,#7be36a,#3dbe6c);transition:width .2s ease;}
.th-combat-monster .th-combat-hp-fill{background:linear-gradient(90deg,#f2734b,#e14b4b);}
/* TH4.08-C.02 hotfix (2026-09-18): kéo dài + phóng to số damage, giữ nguyên
   toàn bộ nội dung số rõ nét trong 900ms đầu rồi mới mờ dần, thay vì mờ ngay
   từ khung hình đầu tiên (bản cũ 0.7s mờ liên tục nên gần như không kịp đọc). */
.th-combat-dmg-float{position:absolute;top:-8px;left:50%;transform:translateX(-50%);color:#fff2b8;font:900 calc(22px * var(--th-fs,1)) var(--font-body);text-shadow:0 0 4px #000,0 2px 3px #000,1px 1px 0 #000;pointer-events:none;animation:th-combat-dmg-float 1.4s ease-out forwards;z-index:5;}
@keyframes th-combat-dmg-float{0%{opacity:1;transform:translate(-50%,0) scale(1.15);}15%{opacity:1;transform:translate(-50%,-6px) scale(1);}65%{opacity:1;transform:translate(-50%,-28px) scale(1);}100%{opacity:0;transform:translate(-50%,-52px) scale(1);}}

/* TH4.08-C.02 hotfix (2026-09-18): thông báo "Nhặt được: ..." nổi gần nhân
   vật khi server báo đã cấp drop thật (đọc display_name/icon_path từ
   response, không tự dựng số liệu) — tự mất giống số damage nhưng chậm hơn
   để đọc kịp tên. Icon (nếu có) xếp NGAY DƯỚI tên theo yêu cầu Owner. */
.th-combat-drop-float{position:absolute;top:-90px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;white-space:nowrap;color:#bff2c0;font:900 15px var(--font-body);text-shadow:0 0 4px #000,0 2px 3px #000;pointer-events:none;animation:th-combat-drop-float 2.2s ease-out forwards;z-index:6;}
.th-combat-drop-float img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));background:rgba(20,30,20,.55);border:1px solid rgba(191,242,192,.6);border-radius:8px;padding:3px;}
@keyframes th-combat-drop-float{0%{opacity:0;transform:translate(-50%,10px) scale(.9);}10%{opacity:1;transform:translate(-50%,0) scale(1.05);}20%{transform:translate(-50%,0) scale(1);}75%{opacity:1;transform:translate(-50%,-18px) scale(1);}100%{opacity:0;transform:translate(-50%,-34px) scale(1);}}
/* Owner 2026-09-23 (mobile Bí Cảnh, chỉ mobile — không đụng desktop/tablet):
   tên vật phẩm nhặt được quá lớn so với tên quái → thu nhỏ khớp cỡ chữ tên
   quái (.th-combat-monster-name mobile 10.5px); ảnh vật phẩm đang đóng khung
   nền đen + viền, cỡ 40px trông quá to/cao che mất nhân vật → bỏ khung/nền/
   viền/bo góc, chỉ còn đúng ảnh vật phẩm, thu nhỏ còn 26px. */
/* Dùng .th-combat-player .th-combat-drop-float img (specificity cao hơn
   ".th-combat-player img") để KHÔNG bị rule chung .th-combat-player img ở
   dòng ~1084 (mobile, đứng sau trong file, cùng specificity nên thắng theo
   thứ tự) đè mất width/height — đây chính là nguyên nhân gốc khung ảnh vật
   phẩm bị kéo cao bằng ảnh nhân vật (clamp ~216px) trên mobile. */
@media (max-width:560px){.th-combat-drop-float{font-size:10.5px;top:-70px;}.th-combat-player .th-combat-drop-float img{width:26px;height:26px;background:none;border:none;border-radius:0;padding:0;}}
/* TH4.08-C.02 (2026-09-18, "hiệu ứng nhận EXP khi giết quái, khác lên
   cấp"): chùm sáng VFX có sẵn (reward_beam, 4 khung 2x2, không lặp) nổi
   dưới chân nhân vật + số +EXP bay lên nhẹ, khác hẳn animation lên cấp
   (thuộc hệ thống notify_user riêng, không đụng ở đây). */
.th-combat-exp-beam{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:110px;height:110px;background-repeat:no-repeat;background-size:200% 200%;background-position:0% 0%;pointer-events:none;z-index:1;mix-blend-mode:screen;animation:th-combat-exp-beam-frames .32s steps(1) forwards,th-combat-exp-beam-fade .85s ease-out forwards;}
@keyframes th-combat-exp-beam-frames{0%{background-position:0% 0%;}26%{background-position:100% 0%;}52%{background-position:0% 100%;}78%{background-position:100% 100%;}100%{background-position:100% 100%;}}
@keyframes th-combat-exp-beam-fade{0%{opacity:0;}15%{opacity:1;}70%{opacity:1;}100%{opacity:0;}}
.th-combat-exp-float{position:absolute;top:20%;left:50%;transform:translateX(-50%);color:#ffe9a8;font:900 calc(16px * var(--th-fs,1)) var(--font-body);text-shadow:0 0 5px #7a5300,0 2px 3px #000;pointer-events:none;z-index:6;animation:th-combat-exp-float 1.4s ease-out forwards;}
@keyframes th-combat-exp-float{0%{opacity:0;transform:translate(-50%,10px);}15%{opacity:1;transform:translate(-50%,0);}70%{opacity:1;transform:translate(-50%,-24px);}100%{opacity:0;transform:translate(-50%,-38px);}}
/* TH4.08-C.02 (2026-09-18, mục 1 "Skill combat", chỉnh lại theo ảnh minh
   hoạ Owner gửi): skill 10 (nth-of-type(1)) là TÂM, nằm SÁT góc phải-dưới;
   4 skill còn lại rải trên ĐÚNG 1/4 VÒNG TRÒN (90°→180°, cách đều 30°)
   quanh tâm skill 10 — Owner 2026-09-18 (lần 2, "vẫn dính nhau, vẫn xa góc"):
   lần trước tính sai — chord giữa 2 điểm cách nhau 32° ở R=85 chỉ ~47px,
   NHỎ HƠN đường kính icon 54px nên vẫn chồng mép. Lần này: satellite thu
   nhỏ còn 46px (skill chính vẫn 64px, đúng ý "khác biệt skill 10"), bán
   kính tăng lên 105px, góc đúng 90/120/150/180° (quý đều, chord=2·105·sin15°
   ≈54px > 46px, đủ khoảng hở). Đồng thời ép cụm sát hẳn góc phải-dưới thật
   (right/bottom margin giảm mạnh so với bản trước). */
/* Owner 2026-09-18 (chỉnh lần 3, "vẫn 1 chỗ đó, dời xuống thêm"): đã bỏ hẳn
   nút Đánh phía dưới nên không còn gì để né — hạ sát đáy khung chiến đấu
   (16px cố định, không dùng clamp min 50px như bản trước). */
.th-combat-skills{position:absolute;z-index:6;right:clamp(6px,1.5vw,16px);bottom:16px;width:160px;height:160px;pointer-events:none;}
.th-combat-skill-btn{position:absolute;width:46px;height:46px;border-radius:50%;border:2px solid rgba(242,218,139,.75);background:rgba(30,20,15,.85);padding:0;cursor:pointer;pointer-events:auto;box-shadow:0 3px 6px rgba(0,0,0,.5);}
.th-combat-skill-btn img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.th-combat-skill-btn.is-locked{cursor:not-allowed;}.th-combat-skill-btn.is-busy{cursor:wait;}.th-combat-skill-btn.is-cooling .th-combat-skill-cd{display:block;}
.th-combat-skill-btn.is-locked img{filter:grayscale(.85) brightness(.55);}
.th-combat-skill-btn:nth-of-type(1){right:0;bottom:0;width:64px;height:64px;border-color:rgba(255,214,141,.95);z-index:2;}
.th-combat-skill-btn:nth-of-type(2){right:0;bottom:105px;}
.th-combat-skill-btn:nth-of-type(3){right:53px;bottom:91px;}
.th-combat-skill-btn:nth-of-type(4){right:91px;bottom:53px;}
.th-combat-skill-btn:nth-of-type(5){right:105px;bottom:0;}
/* Khoá: 1 icon 🔒 nhỏ nằm NGAY TRÊN vòng tròn skill (góc dưới-phải của
   chính icon đó), không tách rời ra ngoài như bản trước. */
.th-combat-skill-btn.is-locked::after{content:'🔒';position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;line-height:18px;font-size:11px;text-align:center;background:rgba(10,10,10,.85);border:1px solid rgba(242,218,139,.6);border-radius:50%;}
/* Hồi chiêu kiểu kim đồng hồ: lớp phủ conic-gradient quét từ 0→360deg trong
   1 giây (khớp rate-limit chung), che dần rồi sáng dần thay vì tối đen luôn
   như trước — animate bằng JS cập nhật --th-skill-cd-deg mỗi khung hình. */
.th-combat-skill-cd{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(0,0,0,.78) var(--th-skill-cd-deg,0deg),transparent 0deg);pointer-events:none;display:none;}
.th-combat-skill-btn.is-cooling .th-combat-skill-cd{display:block;}
@media (max-width:560px){.th-combat-skills{width:122px;height:122px;right:6px;bottom:34px;}.th-combat-skill-btn{width:34px;height:34px;}.th-combat-skill-btn:nth-of-type(1){width:48px;height:48px;}.th-combat-skill-btn:nth-of-type(2){right:0;bottom:78px;}.th-combat-skill-btn:nth-of-type(3){right:39px;bottom:68px;}.th-combat-skill-btn:nth-of-type(4){right:68px;bottom:39px;}.th-combat-skill-btn:nth-of-type(5){right:78px;bottom:0;}}
/* Owner 2026-09-18 (chỉnh lần 3, "bỏ nút Đánh, gọn AUTO thành cần gạt nhỏ
   bên trái cụm skill"): thay hẳn 2 nút to bằng 1 cần gạt nhỏ, đặt cùng hàng
   ngang với skill 10 (bottom:0 của .th-combat-skills), lùi sang trái đúng
   bằng bề rộng cụm skill + khoảng cách. */
.th-combat-auto-switch{position:absolute;z-index:6;right:calc(clamp(6px,1.5vw,16px) + 105px + 64px + 14px);bottom:16px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;user-select:none;}
.th-combat-auto-switch input{position:absolute;opacity:0;width:1px;height:1px;}
.th-combat-auto-track{display:block;width:38px;height:20px;border-radius:999px;background:rgba(140,32,32,.85);border:1px solid rgba(255,255,255,.25);transition:background .2s ease;position:relative;}
.th-combat-auto-thumb{position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.5);transition:transform .2s ease;}
.th-combat-auto-switch input:checked + .th-combat-auto-track{background:rgba(46,140,80,.9);}
.th-combat-auto-switch input:checked + .th-combat-auto-track .th-combat-auto-thumb{transform:translateX(18px);}
.th-combat-auto-caption{font:800 10px var(--font-body);letter-spacing:.06em;color:#f7eed4;text-shadow:0 1px 3px #000;}
.th-territory-summary{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:rgba(3,8,11,.72);backdrop-filter:blur(2px);}
.th-territory-summary-card{width:min(92vw,420px);max-height:82vh;overflow:auto;padding:22px 20px;border-radius:14px;border:1px solid rgba(242,218,139,.55);background:rgba(9,17,22,.94);color:#f7eed4;text-align:center;}
.th-territory-summary-card h2{margin:0 0 10px;font:900 20px var(--font-body);color:#ffe68d;text-shadow:0 2px 4px #000;}
.th-territory-summary-items{list-style:none;margin:12px 0;padding:0;display:grid;gap:6px;font:700 13px var(--font-body);}
.th-territory-summary-empty{opacity:.75;font-size:13px;}
/* TH4.08-C.02 hotfix (2026-09-18): lưới icon nhỏ thay danh sách tên dài ở
   Tổng Kết — tên/phẩm chất xem qua title (tooltip), không chiếm chỗ trên lưới. */
.th-territory-summary-grid{display:grid;grid-template-columns:repeat(auto-fill,44px);justify-content:center;gap:8px;margin:12px 0;}
.th-territory-summary-grid-cell{position:relative;width:44px;height:44px;border-radius:8px;border:2px solid rgba(191,242,192,.6);background:rgba(20,30,20,.55);display:flex;align-items:center;justify-content:center;}
.th-territory-summary-grid-cell img{width:32px;height:32px;object-fit:contain;}
.th-territory-summary-grid-fallback{font:900 16px var(--font-body);opacity:.6;}
.th-territory-summary-grid-cell b{position:absolute;right:-2px;bottom:-4px;font:900 11px var(--font-body);color:#fff4c7;background:rgba(0,0,0,.75);border-radius:6px;padding:0 4px;line-height:1.4;}
.th-territory-summary-countdown{margin:14px 0 4px;font-size:12px;opacity:.8;}
.th-territory-summary-leave{margin-top:8px;padding:10px 22px;border-radius:999px;border:1px solid rgba(242,218,139,.7);background:rgba(123,87,28,.85);color:#fff9d8;font:800 13px var(--font-body);cursor:pointer;}
@media (max-width:560px){.th-combat-actor img{height:clamp(96px,20vh,160px);}.th-combat-player img{height:clamp(132px,26.4vh,216px);}.th-combat-auto-switch{right:calc(6px + 78px + 48px + 10px);bottom:34px;}}

@media (max-width:720px){
  .th-launcher-grid{grid-template-columns:repeat(3,1fr);gap:16px 8px;}
  .th-launcher-logo{width:64px;height:64px;}
  .th-popup{max-height:92vh;}
  .th-popup-game{width:100%;height:92vh;}
}

/* =============================================================================
   JOB_TH2_10 — ĐỘ KIẾP (GĐ2 §4.3), 2026-09-10
   1) Popup 2 nút khi bấm 1 viên Độ Kiếp Đan trong Rương (Độ Kiếp / Luyện Đan).
   2) Màn "Đài Độ Kiếp" toàn màn hình — cùng khuôn .th-sectinvite-scene.
   ============================================================================= */
.th-popup-dokiepdan .th-popup-body{padding:24px 22px;}
.th-dokiepdan-popup{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.th-dokiepdan-popup-icon{width:80px;height:80px;display:grid;place-items:center;}
.th-dokiepdan-popup-icon img{filter:drop-shadow(0 3px 8px rgba(4,7,10,.6));}
.th-dokiepdan-popup-name{font-weight:700;font-size:15px;color:var(--text);}
.th-dokiepdan-popup-qty{font-size:12.5px;color:var(--text-muted);}
.th-dokiepdan-popup-hint{font-size:12px;color:#82ddca;}
.th-dokiepdan-popup-actions{display:flex;gap:10px;margin-top:8px;}
.th-dokiepdan-popup-actions .th-charcreate-submit,
.th-dokiepdan-popup-actions .th-sectinvite-later{margin:0;}

.th-dokiep-scene{
  position:fixed;inset:0;z-index:250;
  background:var(--bg);
  overflow:hidden;
  animation:thPopupFadeIn .25s var(--ease);
}
.th-dokiep-scene-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 40%;
}
.th-dokiep-scene-close{
  position:absolute;top:18px;right:18px;z-index:5;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--border-strong);
  background:color-mix(in srgb,var(--bg) 55%,transparent);color:var(--text);
  font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(4px);
}
.th-dokiep-char{
  position:absolute;left:50%;bottom:8%;transform:translateX(-50%) translateY(-150px);
  height:56vh;max-height:520px;width:auto;z-index:2;
  filter:drop-shadow(0 12px 24px rgba(4,7,10,.55));
}
/* Vòng Sáng Cảnh Giới dưới chân (Owner 2026-09-28) — độc lập với .th-dokiep-char
   (không lồng chung 1 wrapper) để công cụ Admin kéo-thả vị trí Nhân Vật
   (Engine.tienHiepLayoutEditor, selector .th-dokiep-char) không bị đổi hành vi;
   mặc định canh đúng dưới chân theo cùng công thức bottom/transform của nhân
   vật (8% + 150px dịch lên do translateY), Admin kéo riêng ô "Vòng Sáng" nếu
   lệch. Cơ chế nạp ảnh/màu/xoay dùng chung .th-aura (tien-hiep-hero.css). */
.th-dokiep-scene{--th-aura-h:min(56vh,520px);}
.th-dokiep-aura{
  left:50%;bottom:calc(8% + 150px);
  width:calc(var(--th-aura-h) * 1.25);z-index:1;
  transform:translate(-50%,50%) rotateX(68deg);
}
.th-dokiep-panel{
  position:absolute;right:4%;top:50%;transform:translateY(-50%);
  z-index:3;width:min(360px,86vw);
  background:color-mix(in srgb,var(--bg) 60%,transparent);
  border:1px solid var(--border-strong);border-radius:var(--radius);
  padding:20px 22px;backdrop-filter:blur(6px);box-shadow:var(--shadow);
}
.th-dokiep-panel h2{margin:0 0 14px;font-size:17px;color:var(--brand);text-align:center;}
.th-dokiep-panel p{margin:0;font-size:13.5px;color:var(--text-muted);line-height:1.5;}
.th-dokiep-req{
  display:flex;flex-direction:column;gap:4px;
  font-size:13px;color:#E0645A;font-weight:600;margin-bottom:10px;
}
.th-dokiep-req.is-ready{color:#3FBF7F;}
.th-dokiep-key-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.th-dokiep-trial{display:flex;flex-direction:column;gap:5px;width:100%;}
.th-dokiep-trial small,.th-dokiep-trial-note{opacity:.85;font-size:11px;line-height:1.4;}
.th-dokiep-round{display:flex;gap:6px;align-items:flex-start;font-size:12px;opacity:.8;}
.th-dokiep-round.is-current{opacity:1;color:#ffe9b0;}
.th-dokiep-round.is-done{color:#3FBF7F;}
.th-dokiep-round small{display:block;}
.th-dokiep-trial-btn{align-self:flex-start;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,214,141,.7);background:rgba(90,24,24,.85);color:#ffe9b0;font:800 12px var(--font-body);cursor:pointer;}
.th-dokiep-trial-btn.is-ghost{background:rgba(24,56,90,.85);}
.th-dokiep-trial-btn:disabled{opacity:.5;cursor:default;}
.th-dokiep-key{
  font-size:11.5px;font-weight:600;color:#E0645A;
  border:1px solid currentColor;border-radius:999px;padding:2px 8px;
}
.th-dokiep-key.is-done{color:#3FBF7F;}
.th-dokiep-panel .th-charcreate-submit{display:block;width:100%;margin-top:6px;}
.th-dokiep-panel .th-charcreate-error{text-align:center;margin-top:6px;}

/* Lối tắt icon "Tu Luyện" ngay trên dòng yêu cầu Tu vi — cày thêm EXP khi
   chưa đủ cấp mà không phải thoát màn Độ Kiếp ra tìm icon HUD. */
.th-dokiep-req-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.th-dokiep-tuluyen-btn{
  flex-shrink:0;width:26px;height:26px;padding:2px;border-radius:50%;
  border:1px solid var(--border-strong);background:color-mix(in srgb,var(--bg) 55%,transparent);
  cursor:pointer;display:grid;place-items:center;
  transition:border-color var(--dur) var(--ease);
}
.th-dokiep-tuluyen-btn:hover{border-color:var(--accent-2);}
.th-dokiep-tuluyen-btn img{width:100%;height:100%;object-fit:contain;}

@media (max-width:780px){
  .th-dokiep-char{height:44vh;bottom:14%;}
  .th-dokiep-scene{--th-aura-h:44vh;}
  .th-dokiep-aura{bottom:calc(14% + 150px);}
  .th-dokiep-panel{
    left:50%;right:auto;top:auto;bottom:3%;transform:translateX(-50%);
    width:92vw;
  }
}

/* TH4.02.2 — Scene Kỹ Năng Môn Phái. Ảnh nền là asset riêng từng phái;
   UI không bake vào ảnh để tab và lưới vẫn responsive. */
[data-theme="tien_hiep"] .th-skill-scene{position:fixed;inset:0;isolation:isolate;overflow-x:hidden;overflow-y:auto;color:#f7f3df;background:#07131b;}
.th-skill-scene-bg,.th-skill-scene-shade{position:absolute;inset:0;width:100%;height:100%;}
.th-skill-scene-bg{object-fit:cover;z-index:-2;}.th-skill-scene-shade{z-index:-1;background:transparent;pointer-events:none;}
.th-skill-scene-close{position:absolute;top:18px;right:22px;z-index:2;border:1px solid rgba(244,212,126,.82);border-radius:7px;padding:8px 12px;background:rgba(7,22,27,.8);color:#ffe7a0;font:700 13px var(--font-body);cursor:pointer;}
.th-skill-scene-tabs{position:absolute;z-index:2;left:clamp(14px,3vw,48px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px;width:156px;}
.th-skill-scene-sect-tab{display:flex;align-items:center;gap:9px;min-height:52px;padding:7px 10px;border:1px solid rgba(211,193,136,.52);border-radius:7px;background:rgba(5,20,26,.72);color:#e7e1cd;font:700 13px var(--font-display);cursor:pointer;text-align:left;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease);}
.th-skill-scene-sect-tab:hover,.th-skill-scene-sect-tab:focus-visible{border-color:#ffe18a;background:rgba(21,64,67,.88);transform:translateX(3px);outline:0;}.th-skill-scene-sect-tab.is-active{border-color:#54e6c5;background:rgba(9,71,69,.9);box-shadow:0 0 16px rgba(84,230,197,.36);color:#fff4c7;}.th-skill-scene-sect-tab img{width:36px;height:36px;object-fit:contain;flex:0 0 36px;}
.th-skill-scene-content{position:relative;z-index:1;width:min(680px,calc(100vw - 270px));margin:0 auto;padding:clamp(58px,7vh,82px) 0 24px;}.th-skill-scene-content header{text-align:center;text-shadow:0 2px 7px #000;}.th-skill-scene-content header p{margin:0;color:#6ee8d3;font-size:12px;font-weight:800;}.th-skill-scene-content h1{margin:5px 0 4px;color:#ffe69b;font:700 clamp(26px,3vw,34px) var(--font-display);}.th-skill-scene-content header small{display:block;min-height:17px;color:#edf3e4;font-size:12px;}
.th-skill-scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.3vw,16px);margin:clamp(18px,2.5vh,26px) auto 0;max-width:570px;}
.th-skill-scene-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;height:clamp(145px,19vh,166px);padding:7px 5px 5px;border:1px solid rgba(226,204,133,.58);border-radius:7px;background:rgba(4,20,25,.72);color:#fff1b8;font:700 clamp(11px,1.2vw,13px)/1.25 var(--font-display);cursor:pointer;text-align:center;text-shadow:0 1px 3px #000;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease);}
.th-skill-scene-card:hover,.th-skill-scene-card:focus-visible{border-color:#fff0a5;background:rgba(20,72,71,.9);transform:translateY(-3px);outline:0;}.th-skill-scene-card.is-unlocked{border-color:#58e4c8;box-shadow:inset 0 0 14px rgba(62,217,184,.22),0 0 12px rgba(62,217,184,.24);}.th-skill-scene-card img{display:block;width:min(78%,106px);aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.72));}.th-skill-scene-card span{display:block;min-height:2.5em;overflow-wrap:anywhere;}
.th-skill-scene-tooltip{position:fixed;z-index:330;width:min(244px,calc(100vw - 16px));max-width:344px;max-height:calc(100dvh - 16px);overflow-y:auto;overflow-x:hidden;padding:8px 12px;border:1px solid rgba(247,221,135,.86);border-radius:7px;background:color-mix(in srgb,var(--bg) 70%,transparent);box-shadow:0 12px 34px rgba(0,0,0,.62);color:#f4f1e5;font:13px/1.45 var(--font-body);pointer-events:none;text-align:center;}.th-skill-scene-tooltip.is-pinned{pointer-events:auto;}.th-skill-scene-tooltip[hidden]{display:none;}.th-skill-scene-tooltip-art{display:block;width:200px;height:200px;max-width:100%;object-fit:contain;margin:0 auto 8px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.75));}.th-skill-scene-tooltip strong,.th-skill-scene-tooltip span{display:block;text-align:center;}.th-skill-scene-tooltip strong{color:#FFD666;font:800 15px/1.35 var(--font-body);}.th-skill-scene-tooltip-kind{margin-top:3px;color:#75e2cf;font-weight:800;}.th-skill-scene-tooltip-req{margin-top:4px;color:#c9d8d2;}.th-skill-scene-tooltip-modifiers{margin-top:8px;padding-top:8px;border-top:1px solid rgba(197,218,202,.27);color:#f1eee0;}.th-skill-scene-tooltip-modifiers span{margin-top:3px;text-align:left;}.th-skill-scene-loading,.th-skill-scene-problem{position:absolute;inset:0;display:grid;place-items:center;color:#fff0b4;font:700 16px var(--font-display);background:#07131b;}
@media (max-width:720px){.th-skill-scene-close{top:10px;right:10px;padding:7px 9px;}.th-skill-scene-close span{display:none;}.th-skill-scene-tabs{top:12px;left:12px;right:52px;transform:none;width:auto;flex-direction:row;justify-content:space-between;gap:5px;}.th-skill-scene-sect-tab{width:40px;min-width:40px;min-height:40px;padding:3px;justify-content:center;border-radius:50%;}.th-skill-scene-sect-tab:hover,.th-skill-scene-sect-tab:focus-visible{transform:translateY(2px);}.th-skill-scene-sect-tab img{width:30px;height:30px;flex-basis:30px;}.th-skill-scene-sect-tab span{display:none;}.th-skill-scene-content{width:min(94vw,550px);padding:76px 0 16px;}.th-skill-scene-content h1{font-size:25px;}.th-skill-scene-grid{gap:10px;margin-top:22px;}.th-skill-scene-card{height:132px;padding:6px 3px 4px;font-size:11px;gap:4px;}.th-skill-scene-card img{width:min(83%,78px);}.th-skill-scene-tooltip{width:min(184px,calc(100vw - 24px));max-height:calc(100dvh - 24px);}.th-skill-scene-tooltip-art{width:160px;height:160px;}}

/* Owner 2026-09-19: cụm icon chức năng bên trái trong hoạt động PK — xếp cột,
   tràn sang cột 2 khi màn thấp; icon giữ chuẩn HUD (.hud-item = 64px). */
.th-pk-hud-rail{position:absolute;z-index:6;left:8px;top:168px;bottom:12px;display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;gap:2px 6px;pointer-events:none;}
.th-pk-hud-rail .hud-item{pointer-events:auto;position:relative;display:flex;flex-direction:column;align-items:center;gap:0;width:var(--hud-item-w);padding:0;background:none;border:0;cursor:pointer;}

/* Overlay Túi/Cửa Hàng/Chợ trên hoạt động PK + nút Rời Bí Cảnh */
.th-pk-overlay{position:fixed;inset:0;z-index:340;display:flex;align-items:center;justify-content:center;background:rgba(3,8,12,.66);}
.th-pk-overlay > .th-major-scene{position:relative;inset:auto;width:min(96vw,980px);height:min(92vh,720px);}
/* Owner 2026-09-23 (Cửa Hàng/Chợ trong Bí Cảnh "bám góc trái-trên" + "che
   khung cảnh xung quanh"): 2 lỗi cộng lại.
   (1) rule ghi đè "position:relative" ngay trên đây KHÔNG có tác dụng —
   cùng độ đặc hiệu (0,2,0) với [data-theme=tien_hiep] .th-major-scene
   {position:fixed;inset:0} nhưng file tien-hiep-navigation.css nạp SAU nên
   thắng, .th-major-scene giữ nguyên fixed/inset:0 (tự phủ kín màn hình theo
   toạ độ VIEWPORT thay vì nằm gọn/canh giữa trong khung wrap 980×720 định
   sẵn) → bung lệch, dính góc trái-trên.
   (2) nền dim rgba(...) cua .th-pk-overlay phủ tối cả cảnh phía sau — trong
   khi .th-major-scene bình thường (mở ở Sảnh) luôn nền transparent, "giữ rõ
   phong cảnh". Class rieng .th-pk-shop-overlay (chỉ gắn cho Cửa Hàng/Chợ,
   KHÔNG đụng .th-pk-equip-overlay) bỏ hẳn can thiệp vào .th-major-scene và
   bỏ nền dim — để no tu fixed/center/transparent dung y het luc mo o Sanh. */
.th-pk-shop-overlay{background:transparent;}
.th-pk-shop-overlay > .th-major-scene{position:fixed!important;inset:0!important;width:auto;height:auto;}
.th-combat-leave-btn{position:absolute;z-index:7;top:10px;right:10px;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,214,141,.7);background:rgba(90,24,24,.85);color:#ffe9b0;font:800 12px var(--font-body);cursor:pointer;backdrop-filter:blur(3px);}
.th-combat-leave-btn:hover{background:rgba(130,32,32,.92);}
.th-combat-home-btn{right:124px;background:rgba(24,56,90,.85);}
.th-combat-home-btn:hover{background:rgba(32,78,130,.92);}
@media (max-width:700px){.th-combat-home-btn{right:10px;top:38px;padding:4px 10px;font-size:11px;}}


/* Bản nhân của khung nhân vật Sảnh (#hudTopLeft) dùng trong hoạt động PK — CSS sao từ tien-hiep-hero.css, chỉ đổi phạm vi chọn. */
.th-pk-hudclone{
  /* Dời lên NGANG HÀNG với header (Owner 2026-09-05) — header giờ trôi nổi
     trong suốt trên tranh nền (không còn thanh nền đặc) nên khoảng trống
     phía trên tận dụng luôn, không cần chờ dưới header mới bắt đầu HUD.
     .hud vốn bị đẩy xuống top:var(--header-h) (để 3 vùng kia né header) —
     bù ngược lại bằng top âm để khung avatar neo tại top:8px THẬT (viewport),
     không phải top:8px trong hệ toạ độ đã bị đẩy xuống của .hud. */
  position:absolute;left:14px;top:calc(-1 * var(--header-h) + 8px);
  width:216px;
  padding:10px;
  display:flex;flex-direction:column;gap:6px;
  background:color-mix(in srgb,var(--surface) 62%,transparent);
  border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  backdrop-filter:blur(3px);
  /* GĐ2 Chương XI: thẻ này giờ là điểm vào Tạo Nhân Vật/Trang Bị (index.php) */
  cursor:pointer;
}
.th-pk-hudclone .th-id-row{display:flex;align-items:center;gap:10px;}
.th-pk-hudclone .th-avatar{
  flex-shrink:0;width:52px;height:52px;border-radius:50%;cursor:pointer;
  object-fit:cover;object-position:top center;
  background:radial-gradient(120% 120% at 30% 20%,var(--surface-3),var(--bg-2));
  border:2px solid var(--accent-2);
  box-shadow:var(--glow-accent), inset 0 0 10px color-mix(in srgb,var(--accent-2) 30%,transparent);
}
.th-pk-hudclone .th-id-text{min-width:0;flex:1;}
.th-pk-hudclone .th-lc{
  display:flex;align-items:center;gap:4px;
  font-family:var(--font-display);font-weight:700;font-size:14px;
  color:var(--accent-2);letter-spacing:.2px;
}
.th-pk-hudclone .th-lc-icon{font-size:12px;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent-2) 70%,transparent));}
.th-pk-hudclone .th-level{font-size:12px;font-weight:700;flex-shrink:0;}
.th-pk-hudclone .th-lc-sep{font-size:11px;opacity:.6;flex-shrink:0;}
.th-pk-hudclone .th-levelrealm{display:flex;align-items:baseline;margin-top:2px;
  white-space:nowrap;overflow:hidden;}
/* Owner 2026-09-07: "Luyện Khí · Sơ Kỳ" quá tối so với nền — var(--text-muted)
   vốn định cho panel/nền phẳng, không đủ tương phản trên khung avatar bán
   trong suốt nổi giữa tranh nền sáng. Đổi sang sáng gần bằng --text (chỉ
   giảm nhẹ để vẫn phân cấp thấp hơn số Cấp/Lực Chiến) + thêm quầng tối như
   các chữ nổi khác trong file này (IC-4/PQ-60/61) để luôn đọc được. */
.th-pk-hudclone .th-realm{
  font-size:11px;
  color:color-mix(in srgb, var(--text) 88%, transparent);
  text-shadow:0 1px 2px rgba(4,7,10,.9), 0 0 6px rgba(4,7,10,.6);
  overflow:hidden;text-overflow:ellipsis;
}

/* Thanh Máu / EXP — dùng chung 1 kiểu khung, khác màu fill */
.th-pk-hudclone .th-bar{
  position:relative;height:14px;border-radius:var(--radius-sm);overflow:hidden;
  background:color-mix(in srgb,var(--bg) 70%,transparent);
  border:1px solid var(--border);
}
.th-pk-hudclone .th-bar-fill{height:100%;border-radius:inherit;transition:width .3s var(--ease);}
.th-pk-hudclone .th-hp{height:15px;}
/* Owner 2026-09-07: HP, EXP, Năng Lượng — 3 thanh cách nhau bằng khoảng gap
   chung của #hudTopLeft (6px, dùng chung cho mọi hàng) — kéo riêng 3 thanh
   này sát lại nhau, chỉ chừa khe rất nhỏ, tách biệt khỏi khoảng cách
   avatar/tên phía trên. */
.th-pk-hudclone .th-exp,
.th-pk-hudclone .th-energy{margin-top:-4px;}
.th-pk-hudclone .th-hp .th-bar-fill{background:linear-gradient(90deg,#8a2222,var(--brand));}
.th-pk-hudclone .th-bar-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;color:#fff;
  text-shadow:0 1px 2px rgba(4,7,10,.95);
}
/* Owner 2026-09-07: thêm chữ % thường trực trên thanh EXP giống thanh HP
   (trước đó chỉ có tooltip khi rê chuột, ở 0% nhìn như "không hiển thị
   gì") — cần cao bằng thanh HP mới đủ chỗ đặt chữ, bỏ hẳn kiểu mảnh 6px. */
.th-pk-hudclone .th-exp{height:15px;}
.th-pk-hudclone .th-exp .th-bar-fill{background:var(--grad-accent);}
/* Owner 2026-09-07: thanh Năng Lượng thứ 3 — hấp thụ từ .energy-widget trên
   Header (nay ẩn hẳn cho theme tiên hiệp), cùng khuôn .th-bar, màu xanh
   dương nhạt→ngọc bích khớp icon năng lượng gốc. */
.th-pk-hudclone .th-energy{height:15px;cursor:pointer;}
.th-pk-hudclone .th-energy .th-bar-fill{background:linear-gradient(90deg,#7dd3fc,var(--accent));}


.th-pk-hudclone{position:absolute;z-index:7;left:8px;top:8px;cursor:default;}
.th-pk-hudclone .th-avatar{cursor:default;}

/* Owner 2026-09-19: Tổ Đội / Hảo Hữu / Trò Chuyện mở từ cụm icon trong hoạt
   động PK nhưng widget gốc có z-index thấp (.party-widget 55, #chatPanel 90)
   nên bị Scene (root z-index 300) che kín dù đã "mở" — nâng lên trên Scene,
   vẫn dưới Modal root (400) để hộp thoại xác nhận luôn nằm trên cùng. */
[data-theme="tien_hiep"] body.th-navigation-scroll-locked .party-widget,
[data-theme="tien_hiep"] body.th-navigation-scroll-locked #chatPanel{z-index:350;}

/* Owner 2026-09-19: Thần Thú (dưới chân, bên trái) + Phi Kiếm (bay lơ lửng
   sau lưng) quanh nhân vật trong hoạt động PK — đặt theo tỉ lệ khung nhân vật
   để co giãn cùng ảnh. isolation giữ z-index âm của Phi Kiếm trong khung. */
.th-combat-player{isolation:isolate;}
.th-combat-player .th-combat-player-img{position:relative;z-index:1;}
.th-combat-player .th-combat-hp{position:relative;z-index:1;}
.th-combat-player .th-combat-pet{position:absolute;z-index:2;right:calc(100% - var(--th-pk-body-left,20%) + 5px);transform:translateX(var(--th-pk-pet-empty-right,0%));bottom:18px;width:auto;height:34%;max-height:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.55));pointer-events:none;}
.th-combat-player .th-combat-phikiem{position:absolute;z-index:0;left:50%;top:-12%;width:auto;height:62%;max-height:none;transform:translateX(-46%) rotate(-12deg);opacity:.95;filter:drop-shadow(0 0 10px var(--th-q-glow,#9adfff)) drop-shadow(0 0 22px var(--th-q-glow,#9adfff));pointer-events:none;animation:th-combat-phikiem-float 3.2s ease-in-out infinite;}
@keyframes th-combat-phikiem-float{0%,100%{transform:translateX(-46%) translateY(0) rotate(-12deg);}50%{transform:translateX(-46%) translateY(-9px) rotate(-9deg);}}
@media (prefers-reduced-motion:reduce){.th-combat-player .th-combat-phikiem{animation:none;}}

/* Wrapper Thần Thú/Phi Kiếm (chứa ảnh + đom đóm theo Phẩm Chất) — ảnh phủ kín wrapper. */
.th-combat-player .th-combat-companion-img{display:block;height:100%;width:auto;max-height:none;filter:none;}
/* 2026-09-22: .th-combat-pet có pointer-events:none (để không chắn thao tác đánh quái phía sau) — nhưng
   Thần Thú tự nói chuyện (tien-hiep-pet-dialogue.js) cần bấm được đúng ảnh của nó. Chỉ mở lại đúng ảnh
   Thần Thú, KHÔNG đụng .th-combat-phikiem (ảnh Phi Kiếm không có gì để tương tác). */
.th-combat-player .th-combat-pet .th-combat-companion-img{pointer-events:auto;}
.th-combat-player .th-combat-pet,.th-combat-player .th-combat-phikiem{width:auto;}

/* Owner 2026-09-19: 2 pill trạng thái (lượt còn lại + phiên) lên TRÊN CÙNG, dưới
   khung HUD đợt/đồng hồ; khi không vào được Bí Cảnh (hết lượt...) HUD ẩn đi
   và 2 pill lên đúng vị trí HUD, thay cho câu báo lỗi trùng ý. */
.th-territory-combat-hud.is-hidden{display:none;}
.th-territory-status.is-top{top:20px;}
/* Mobile: khung avatar chiếm góc trái trên nên 2 pill chuyển sang CẠNH PHẢI, ngay dưới nút Rời Bí Cảnh. */
@media (max-width:560px){.th-territory-status,.th-territory-status.is-top{left:auto;right:10px;top:52px;bottom:auto;transform:none;flex-direction:column;align-items:flex-end;gap:6px;}}
/* Owner 2026-09-23 (mobile Bí Cảnh, chỉ mobile): khung đếm ngược/đợt quái
   (.th-territory-combat-hud) trước đó canh giữa top:20px, bị khung nhân vật
   góc trái đè lên/cắt chữ. Dời hẳn sang cạnh phải, ngay dưới 2 pill trạng
   thái ("Bí Cảnh đang diễn ra") thay vì nằm giữa màn hình. */
@media (max-width:560px){.th-territory-combat-hud{left:auto;right:10px;top:132px;transform:none;min-width:0;width:auto;max-width:min(58vw,220px);padding:6px 10px;font-size:11px;}.th-territory-combat-hud b{font-size:16px;}}

/* Khung Thông Báo Hệ Thống chiếm góc trái dưới → cụm icon PK dừng phía trên nó. */
body.th-syslog-on .th-pk-hud-rail{bottom:160px;}
/* Owner 2026-09-23: bảng "Nhiệm vụ lãnh thổ" (3 Bí Cảnh) ở màn Vùng bị khung
   Thông Báo Hệ Thống góc trái dưới che mất nút "Vào Bí Cảnh" của thẻ đầu —
   chừa thêm khoảng trống đáy để .th-region-content (justify-content:space-
   between) đẩy khung .th-region-panel lên cao hơn, tránh đúng vùng syslog. */
body.th-syslog-on .th-region-content{padding-bottom:170px;}
.th-territory-first-claim{margin:0 6px 6px 0;padding:5px 12px;border-radius:999px;border:1px solid rgba(255,214,141,.8);background:linear-gradient(180deg,#8a5a1e,#5c3a10);color:#ffe9b0;font:900 12px var(--font-body);cursor:pointer;}
.th-territory-first-claim:disabled{opacity:.6;cursor:default;}
.th-territory-first-claimed{display:inline-block;margin:0 6px 6px 0;padding:5px 12px;border-radius:999px;color:#9a9a9a;font:800 12px var(--font-body);}
/* Bảng Trang Bị trong PK (Owner 2026-09-19): clone bố cục Trang Bị — 2 cột × 6 ô, nhân vật giữa. */
.th-pk-equip-overlay{background:transparent;}
.th-pk-equip-panel{width:min(96vw,560px);max-height:94vh;padding:32px 8px 16px;border-radius:16px;background:linear-gradient(180deg,rgba(20,28,38,.95),rgba(9,14,20,.96));border:1px solid rgba(255,214,141,.5);box-shadow:0 18px 50px rgba(0,0,0,.6);color:#f1e6c8;}
.th-pk-equip-panel header{display:flex;justify-content:flex-end;align-items:center;margin-bottom:6px;}
.th-pk-equip-panel h2{margin:0;font:900 18px var(--font-body);color:#ffe9b0;letter-spacing:.06em;}
.th-pk-equip-close{background:none;border:0;color:#ffe9b0;font-size:20px;cursor:pointer;}
.th-pk-equip-body{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.th-pk-equip-rail{display:flex;flex-direction:column;gap:4px;flex:0 0 auto;}
.th-pk-equip-rail-left{align-items:flex-start;}
.th-pk-equip-rail-right{align-items:flex-end;}
.th-pk-equip-rail-left .th-equip-item-row{flex-direction:row-reverse;}
.th-pk-equip-rail-left .th-equip-item-label{text-align:left;}
.th-pk-equip-rail-right .th-equip-item-label{text-align:right;}
.th-pk-equip-panel .th-equip-item-frame{width:min(64px,9.5vh);height:min(64px,9.5vh);}
.th-pk-equip-panel .th-equip-item-label{width:52px;font-size:10.5px;}
.th-pk-equip-stage{position:relative;flex:1 1 auto;align-self:stretch;min-height:min(500px,66vh);overflow:visible;}
.th-pk-equip-floor{position:absolute;left:50%;bottom:6%;width:58%;height:7%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);}
.th-pk-equip-figure{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);display:block;}
.th-pk-equip-figure .th-combat-player-img{display:block;height:min(430px,58vh);width:auto;}
.th-pk-equip-weapon{position:absolute;left:calc(50% + min(60px,8vh) - 30px);bottom:calc(8% + 18px);height:40%;display:inline-flex;z-index:1;pointer-events:none;}
.th-pk-equip-weapon img{height:100%;width:auto;filter:drop-shadow(0 6px 10px rgba(4,7,10,.6)) drop-shadow(0 0 10px var(--th-q-glow,transparent));}
@media (max-width:560px){.th-pk-equip-panel{width:90vw;padding:8px 6px 12px;}.th-pk-equip-weapon{left:calc(50% - 22px);}.th-pk-equip-panel .th-equip-item-label{display:none;}.th-pk-equip-figure .th-combat-player-img{height:min(240px,38vh);}}
/* Sửa méo/mờ: figure absolute + left:50% chỉ được nửa bề ngang stage, img max-width:100% bóp ngang trong khi chiều cao cố định → phải cho co giãn theo nội dung. */
.th-pk-equip-figure{width:max-content;}
.th-pk-equip-figure img,.th-pk-equip-weapon img{max-width:none;}

.th-pk-equip-figure .th-combat-pet{right:calc(100% - var(--th-pk-body-left,20%) - 5px);}
/* Sửa quái bị bóp ngang/nhòe: lớp chứa quái rộng 1px nên img max-width:100% ép ảnh hẹp lại trong khi chiều cao cố định. */
.th-combat-monster{width:max-content;}
.th-combat-actor img{max-width:none;}
/* Quái hiển thị đúng tỉ lệ (hết bị bóp ngang) nên to hơn trước → thu ~20% để cân với nhân vật. */
.th-combat-monster img{height:clamp(96px,17.6vh,192px);}
@media (max-width:560px){.th-combat-monster img{height:clamp(77px,16vh,128px);}}
/* Nhân vật trong Bí Cảnh +20% (Owner 2026-09-19); Thần Thú/Phi Kiếm tính theo % khung nên to theo. */
.th-combat-player .th-combat-player-img{height:clamp(168px,31.2vh,324px);}
@media (max-width:560px){.th-combat-player .th-combat-player-img{height:clamp(158px,31.7vh,259px);}}

/* Nút tròn Đánh Thường cạnh cụm skill (Owner 2026-09-19): cùng hàng skill 90, AUTO lùi sang trái. */
.th-combat-basic-btn{position:absolute;z-index:6;right:calc(clamp(6px,1.5vw,16px) + 159px);bottom:16px;width:46px;height:46px;border-radius:50%;border:2px solid rgba(242,218,139,.75);background:rgba(30,20,15,.85);padding:0;cursor:pointer;box-shadow:0 3px 6px rgba(0,0,0,.5);}
.th-combat-basic-btn img{width:100%;height:100%;border-radius:50%;object-fit:cover;max-width:none;display:block;}
.th-combat-basic-btn.is-busy{cursor:wait;}
.th-combat-basic-cd{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(0,0,0,.78) var(--th-skill-cd-deg,0deg),transparent 0deg);pointer-events:none;display:none;}
.th-combat-basic-btn.is-cooling .th-combat-basic-cd{display:block;}
.th-combat-auto-switch{right:calc(clamp(6px,1.5vw,16px) + 105px + 64px + 14px + 54px);}
@media (max-width:560px){.th-combat-basic-btn{right:calc(6px + 120px);bottom:34px;width:34px;height:34px;}.th-combat-auto-switch{right:calc(6px + 78px + 48px + 10px + 42px);}}

/* Quái bị đánh: sáng nháy + rung nhẹ (Owner 2026-09-19) */
.th-combat-monster img.is-hit{animation:th-monster-hit .26s ease-out;}
@keyframes th-monster-hit{
  0%{filter:brightness(2.4) saturate(.6) drop-shadow(0 10px 12px rgba(0,0,0,.55));transform:translateX(0);}
  20%{transform:translateX(-4px);}
  40%{filter:brightness(1.6) drop-shadow(0 10px 12px rgba(0,0,0,.55));transform:translateX(4px);}
  60%{transform:translateX(-2px);}
  80%{transform:translateX(2px);}
  100%{filter:brightness(1) drop-shadow(0 10px 12px rgba(0,0,0,.55));transform:translateX(0);}
}
@media (prefers-reduced-motion:reduce){.th-combat-monster img.is-hit{animation:none;}}

/* Cài đặt AUTO (Owner 2026-09-19): bánh răng trên cần gạt AUTO + popup nhỏ không làm mờ nền */
.th-combat-auto-gear{position:absolute;z-index:6;right:calc(clamp(6px,1.5vw,16px) + 105px + 64px + 14px + 54px + 7px);bottom:calc(16px + 44px);width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));}
.th-combat-auto-gear img{width:100%;height:100%;display:block;max-width:none;}
.th-combat-auto-gear:hover img{filter:brightness(1.2);}
.th-boss-fx-toggle{position:absolute;z-index:6;right:calc(clamp(6px,1.5vw,16px) + 105px + 64px + 14px + 54px + 38px);bottom:calc(16px + 44px);width:28px;height:28px;padding:0;border:1px solid rgba(255,214,141,.75);border-radius:50%;background:rgba(14,20,28,.92);color:#ffe9b0;cursor:pointer;font-size:15px;line-height:1;box-shadow:0 2px 5px rgba(0,0,0,.55);}
.th-boss-fx-menu{position:absolute;z-index:10;right:calc(clamp(6px,1.5vw,16px) + 105px + 64px + 14px + 54px + 24px);bottom:calc(16px + 44px + 34px);width:min(270px,86vw);padding:9px 11px;border:1px solid rgba(255,214,141,.6);border-radius:10px;background:rgba(14,20,28,.96);box-shadow:0 8px 24px rgba(0,0,0,.58);color:#f1e6c8;font:12px/1.35 var(--font-body);}
.th-boss-fx-menu[hidden]{display:none;}.th-boss-fx-menu b{display:block;margin-bottom:5px;color:#ffe9b0;font-size:13px;}.th-boss-fx-menu label{display:block;padding:3px 0;cursor:pointer;}.th-boss-fx-menu input{margin-right:5px;vertical-align:middle;}
.th-combat-auto-settings{position:absolute;z-index:9;right:calc(clamp(6px,1.5vw,16px) + 105px + 64px + 14px + 54px - 90px);bottom:calc(16px + 44px + 30px);width:230px;padding:8px 10px 10px;border-radius:10px;background:rgba(14,20,28,.94);border:1px solid rgba(255,214,141,.55);box-shadow:0 8px 24px rgba(0,0,0,.55);color:#f1e6c8;font-family:var(--font-body);}
.th-combat-auto-settings header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-size:13px;color:#ffe9b0;}
.th-auto-set-close{background:none;border:0;color:#ffe9b0;cursor:pointer;font-size:14px;}
.th-auto-set-tabs{display:flex;gap:4px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.15);}
.th-auto-set-tabs button{background:none;border:0;padding:3px 8px;color:#ccc;font:700 12px var(--font-body);cursor:pointer;}
.th-auto-set-tabs button.is-active{color:#ffe9b0;border-bottom:2px solid #ffd56b;}
.th-auto-set-list{display:flex;flex-direction:column;gap:3px;}
.th-auto-set-row{display:flex;align-items:center;gap:8px;padding:3px 4px;border-radius:6px;cursor:pointer;font-size:12px;}
.th-auto-set-row:hover{background:rgba(255,255,255,.07);}
.th-auto-set-row img{width:28px;height:28px;border-radius:50%;object-fit:cover;max-width:none;}
.th-auto-set-row span{flex:1;} .th-auto-set-row small{display:block;font-size:10px;opacity:.6;}
.th-auto-set-row.is-unlearned img{filter:grayscale(.8) brightness(.65);}
.th-auto-set-row input{width:16px;height:16px;accent-color:#3ea86a;}
.th-auto-set-note{margin:6px 0 4px;font-size:10.5px;opacity:.65;line-height:1.35;}
.th-auto-set-save{width:100%;padding:5px;border-radius:999px;border:1px solid rgba(255,214,141,.8);background:linear-gradient(180deg,#8a5a1e,#5c3a10);color:#ffe9b0;font:800 12px var(--font-body);cursor:pointer;}
/* Owner 2026-09-23 (mobile Bí Cảnh): base bottom của cụm skill/AUTO nâng từ
   12px → 34px để không bị khung Thông Báo Hệ Thống (.th-syslog, góc trái
   dưới) che khuất — các calc() dưới đây đổi theo đúng base mới. */
@media (max-width:560px){.th-combat-auto-gear{right:calc(6px + 78px + 48px + 10px + 42px + 7px);bottom:calc(34px + 44px);}.th-combat-auto-settings{right:8px;bottom:calc(34px + 44px + 34px);width:min(230px,86vw);}}
@media (max-width:560px){.th-boss-fx-toggle{right:calc(6px + 78px + 48px + 10px + 42px + 38px);bottom:calc(34px + 44px);}.th-boss-fx-menu{right:8px;bottom:calc(34px + 44px + 34px);}}

/* Quái runtime sprite (sheet 4 cột) — cùng cỡ với ảnh tĩnh cũ (Owner 2026-09-19) */
.th-combat-monster-sprite{display:block;height:clamp(96px,17.6vh,192px);aspect-ratio:1/1;background-repeat:no-repeat;filter:drop-shadow(0 10px 12px rgba(0,0,0,.55));}
@media (max-width:560px){.th-combat-monster-sprite{height:clamp(77px,16vh,128px);}}
.th-combat-monster.is-selected .th-combat-monster-sprite{filter:drop-shadow(0 0 10px #ffe68d) drop-shadow(0 10px 12px rgba(0,0,0,.55));}
.th-combat-monster .th-combat-monster-sprite.is-hit{animation:th-monster-hit .26s ease-out;}
.th-combat-monster.is-dead{transition:opacity .45s ease;}
@media (prefers-reduced-motion:reduce){.th-combat-monster .th-combat-monster-sprite.is-hit{animation:none;}}

/* Nhân vật: thở nhẹ khi chờ, lao khi đánh, nháy sáng khi bị đánh (Owner 2026-09-19) */
.th-combat-player .th-combat-player-img{transform-origin:50% 100%;animation:th-player-breathe 2.6s ease-in-out infinite;}
@keyframes th-player-breathe{0%,100%{transform:scale(1,1) translateY(0);}50%{transform:scale(1.008,1.014) translateY(-1px);}}
.th-combat-player .th-combat-player-img.is-swing{animation:th-player-swing .25s ease-out;}
@keyframes th-player-swing{0%{transform:translateX(0) rotate(0);}40%{transform:translateX(16px) rotate(2.5deg);}100%{transform:translateX(0) rotate(0);}}
.th-combat-player .th-combat-player-img.is-cast{animation:th-player-cast .36s ease-out;}
@keyframes th-player-cast{0%{transform:translate(0,0);}35%{transform:translate(12px,-10px) scale(1.02);}100%{transform:translate(0,0);}}
.th-combat-player .th-combat-player-img.is-hurt{animation:th-player-hurt .3s ease-out;}
@keyframes th-player-hurt{0%{filter:brightness(2.2) saturate(.5);}100%{filter:brightness(1);}}
.th-combat-dmg-float.is-player-hit{color:#ff5a5a;top:12%;font-size:calc(24px * var(--th-fs,1));}
@media (prefers-reduced-motion:reduce){.th-combat-player .th-combat-player-img{animation:none;}}
.th-pk-equip-figure .th-combat-player-img{animation:none;}
/* Hình nhân vật combat theo Môn Phái (Owner 2026-09-24): sprite atlas 640x512, chân ở y=456 → cao = chiều cao ảnh tĩnh cũ × 1.143 để thân người
   giữ cỡ cũ, kéo hàng lề dưới 10.9% (vùng trong suốt dưới chân) để chân vẫn chạm đáy như trước. Không thở/lao bằng CSS; chỉ nháy sáng nhẹ khi trúng đòn. */
.th-combat-player .th-combat-player-img.th-combat-sect-sprite{--th-sect-h:calc(clamp(168px,31.2vh,324px) * 1.143);height:var(--th-sect-h);width:auto;aspect-ratio:640/512;margin-bottom:calc(var(--th-sect-h) * -0.109);background-repeat:no-repeat;animation:none;transform:none;filter:drop-shadow(0 10px 12px rgba(0,0,0,.55));}
@media (max-width:560px){.th-combat-player .th-combat-player-img.th-combat-sect-sprite{--th-sect-h:calc(clamp(158px,31.7vh,259px) * 1.143);}}
.th-combat-player .th-combat-player-img.th-combat-sect-sprite.is-hurt{animation:th-sect-hurt .32s ease-out;}
@keyframes th-sect-hurt{0%{filter:brightness(1.55) drop-shadow(0 10px 12px rgba(0,0,0,.55));}100%{filter:brightness(1) drop-shadow(0 10px 12px rgba(0,0,0,.55));}}
@media (prefers-reduced-motion:reduce){.th-combat-player .th-combat-player-img.th-combat-sect-sprite.is-hurt{animation:none;}}

/* Bí Cảnh Thử Nghiệm (Admin) */
.th-region-territory-test{margin-left:10px;padding:6px 14px;border-radius:999px;border:1px dashed rgba(127,227,255,.8);background:rgba(20,40,60,.7);color:#bff0ff;font:800 12px var(--font-body);cursor:pointer;vertical-align:middle;}
.th-test-gate{position:fixed;inset:0;z-index:420;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);}
.th-test-gate-panel{width:min(90vw,300px);padding:14px 16px;border-radius:12px;background:rgba(14,20,28,.96);border:1px solid rgba(127,227,255,.5);color:#e8f4ff;font-family:var(--font-body);display:flex;flex-direction:column;gap:8px;}
.th-test-gate-panel p{margin:0;font-size:12px;opacity:.8;}
.th-test-gate-panel input{padding:7px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.4);color:#fff;font-size:14px;}
.th-test-gate-err{color:#ff8a8a;opacity:1 !important;}
.th-test-gate-panel div{display:flex;gap:8px;justify-content:flex-end;}
.th-test-gate-panel button{padding:5px 14px;border-radius:999px;border:1px solid rgba(255,214,141,.7);background:linear-gradient(180deg,#8a5a1e,#5c3a10);color:#ffe9b0;font:800 12px var(--font-body);cursor:pointer;}
.th-test-gate-panel button[data-act="cancel"]{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#ddd;}

/* Bảng Gọi Quái (Bí Cảnh Thử Nghiệm): cột bên phải, dưới nút Rời Bí Cảnh */
.th-test-summon{position:absolute;z-index:7;right:76px;top:60px;width:158px;max-height:calc(100% - 250px);overflow-y:auto;padding:6px;border-radius:10px;background:rgba(14,20,28,.82);border:1px solid rgba(127,227,255,.45);color:#e8f4ff;font-family:var(--font-body);}
.th-test-summon strong{display:block;margin-bottom:5px;font-size:11px;color:#bff0ff;}
.th-test-summon div{display:grid;grid-template-columns:1fr;gap:3px;}
.th-test-summon button{display:flex;align-items:center;gap:5px;padding:3px 6px;border-radius:6px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#f1f6ff;font:600 11px var(--font-body);text-align:left;cursor:pointer;}
.th-test-summon button:hover{background:rgba(127,227,255,.2);}
.th-test-summon button i{font-style:normal;flex:0 0 auto;width:15px;height:15px;line-height:15px;text-align:center;border-radius:50%;background:rgba(255,214,141,.85);color:#3a2408;font-size:10px;font-weight:900;}
@media (max-width:560px){.th-test-summon{top:132px;width:128px;max-height:calc(100% - 330px);}.th-test-summon button{font-size:10px;padding:2px 4px;}}

.th-test-summon .th-test-realms{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:6px;}
.th-test-summon .th-test-realms button{flex:0 0 auto;min-width:22px;justify-content:center;padding:2px 6px;}
.th-test-summon .th-test-realms button:first-child{flex:1 0 100%;}
.th-test-summon .th-test-realms button.is-on{background:rgba(255,214,141,.9);color:#3a2408;border-color:#ffd56b;}

.th-test-summon .th-test-counts{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:5px;}
.th-test-summon .th-test-counts button{flex:0 0 auto;justify-content:center;padding:2px 6px;}
.th-test-summon .th-test-counts button.is-on{background:rgba(127,227,255,.85);color:#06222e;border-color:#7fe3ff;}
/* Quái về cỡ mặc định (Owner 2026-09-19): bỏ mức thu ~20% trước đó */
.th-combat-monster img,.th-combat-monster-sprite{height:clamp(120px,22vh,240px);}
@media (max-width:560px){.th-combat-monster img,.th-combat-monster-sprite{height:clamp(96px,20vh,160px);}}
/* Quái Thủ Lĩnh (Owner 2026-09-28): to hơn quái thường ~30% (đúng contract mỹ thuật
   "silhouette lớn hơn 20-30%") + quầng vàng nhẹ phân biệt elite, không dùng vương
   miện/chữ "Boss" (art đã tự nói lên qua trang bị/dáng đứng, xem QuaiThuLinh.md). */
.th-boss-sprite{height:clamp(156px,28.6vh,312px);filter:drop-shadow(0 10px 14px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(255,214,102,.45));background-repeat:no-repeat;}
@media (max-width:560px){.th-boss-sprite{height:clamp(125px,26vh,208px);}}
.th-boss-mob.is-selected .th-boss-sprite{filter:drop-shadow(0 0 12px #ffe68d) drop-shadow(0 10px 14px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(255,214,102,.45));}
/* PQ-114 (06.00, 2026-09-29): Tím = Quái Thủ Lĩnh Bí Cảnh, Vàng = Boss Môn
   Phái (.th-boss-name-sect), Đỏ = Boss Thế Giới (chưa triển khai) — đúng
   bảng TH_QUALITY_COLORS, không tự chế màu khác. */
.th-boss-name{color:#A855F7!important;font-weight:800;}
.th-boss-name-sect{color:#D4AF37!important;font-weight:800;}
.th-test-summon .th-test-info{margin:0 0 5px;font-size:10px;line-height:1.3;color:#ffd56b;}
.th-test-summon .th-test-alive{margin:0 0 5px;font-size:10px;color:#bff0ff;}
.th-test-summon .th-test-clear{width:100%;margin-bottom:6px;justify-content:center;background:rgba(255,120,120,.25);border-color:rgba(255,140,140,.6);}
.th-test-summon .th-test-sects{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:6px;}
.th-test-summon .th-test-sects button{flex:0 0 auto;justify-content:center;padding:2px 6px;}
.th-test-summon .th-test-sects button.is-on{background:rgba(180,140,255,.85);color:#1d0f3a;border-color:#c9a8ff;}

/* Vòng sáng dưới chân trong Bí Cảnh + bảng Trang Bị PK (2026-09-21). Cỡ tính theo
   chiều cao ảnh nhân vật (--th-aura-h, khớp .th-combat-player img); chân nằm ở
   đáy ảnh (chừa ~6% khoảng trong suốt) cộng thanh máu bên dưới (--th-aura-foot).
   Phần dùng chung (.th-aura, xoay, ẩn/hiện) ở tien-hiep-hero.css. */
.th-combat-player{--th-aura-h:clamp(140px,26vh,270px);--th-aura-foot:13px;}
@media (max-width:560px){.th-combat-player{--th-aura-h:clamp(132px,26.4vh,216px);}}
.th-combat-player.th-pk-equip-figure{--th-aura-h:min(430px,58vh);--th-aura-foot:0px;}
@media (max-width:560px){.th-combat-player.th-pk-equip-figure{--th-aura-h:min(240px,38vh);}}
.th-combat-player .th-aura{left:50%;top:auto;z-index:0;width:calc(var(--th-aura-h) * 1.25);
  bottom:calc(var(--th-aura-foot) + var(--th-aura-h) * 0.06);transform:translate(-50%,50%) rotateX(68deg);}

/* Cấp skill "+x" (vàng) ở góc phải-dưới thẻ kỹ năng — chỉ hiện với skill đã học (2026-09-21). */
/* Owner 2026-09-30: cấp kỹ năng dời từ góc phải-dưới lên phải-trên — chỗ
   phải-dưới nhường cho nút "+" tăng cấp. */
.th-skill-scene-rank{position:absolute;right:6px;top:4px;font:800 clamp(13px,1.5vw,16px)/1 var(--font-display);color:#ffd666;text-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.85);pointer-events:none;}
/* Nút Học (trái-dưới) / nút + tăng cấp (phải-dưới) — nhỏ gọn, cố định trên
   thẻ, không còn nằm trong tooltip theo hover (dễ trượt chuột, phải bấm
   nhiều lần mới trúng). */
.th-skill-scene-learn-btn,.th-skill-scene-upgrade-btn{position:absolute;bottom:4px;z-index:1;display:grid;place-items:center;min-width:26px;height:20px;padding:0 6px;border-radius:5px;font:800 11px/1 var(--font-body);cursor:pointer;}
.th-skill-scene-learn-btn{left:4px;border:1px solid #64e4cc;background:rgba(11,91,80,.88);color:#efffe7;}
.th-skill-scene-learn-btn.is-done{border-color:rgba(186,196,192,.4);background:rgba(61,72,74,.55);color:rgba(220,230,224,.65);cursor:default;font-size:12px;}
.th-skill-scene-learn-btn:disabled{border-color:rgba(186,196,192,.42);background:rgba(61,72,74,.7);color:#bec6c2;cursor:not-allowed;}
.th-skill-scene-upgrade-btn{right:4px;min-width:20px;border:1px solid #ffd666;background:rgba(92,73,15,.85);color:#ffe9a0;font-size:15px;}
.th-skill-scene-upgrade-btn:disabled{border-color:rgba(186,196,192,.42);background:rgba(61,72,74,.7);color:#bec6c2;cursor:not-allowed;}

/* Sát thương chí mạng (bạo kích): cam rực, to hơn, quầng sáng cam — khác hẳn số thường (vàng nhạt) và số nhân vật mất máu (đỏ). */
.th-combat-dmg-float.is-crit{color:#ff8a1e;font-size:calc(32px * var(--th-fs,1));letter-spacing:.5px;text-shadow:0 0 6px #ff5a00,0 0 14px rgba(255,120,0,.85),0 2px 3px #000,1px 1px 0 #000;}

/* Tên quái (2026-09-21): chữ nhỏ ngay trên thanh máu, trắng ngà + viền đen cho đọc được trên mọi nền Bí Cảnh. */
.th-combat-monster-name{display:block;max-width:calc(190px * var(--th-fs,1));white-space:nowrap;color:#fff1cf;font:700 calc(12px * var(--th-fs,1))/1.1 var(--font-body);letter-spacing:.2px;text-shadow:0 0 3px #000,0 1px 2px #000,1px 1px 0 #000;pointer-events:none;}
@media (max-width:calc(560px * var(--th-fs,1))){.th-combat-monster-name{font-size:calc(10.5px * var(--th-fs,1));max-width:calc(130px * var(--th-fs,1));}}

/* Hiệu ứng môi trường Scene (tien-hiep-ambient.js): 2 canvas trong phần tử chủ. far = sau nhân vật/UI, near = trước nhưng chỉ hạt mảnh. */
.th-amb-canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;display:block;}
.th-amb-far{z-index:0;}
.th-amb-near{z-index:4;}

/* Bong bóng thoại Thần Thú (2026-09-22) — mang từ Hoa Viên (games/virtual_pet) sang các nơi Thần Thú Hành
   Tẩu xuất hiện trong Tiên Hiệp (Sảnh Chính, Trang Bị, Bí Cảnh). `position:fixed` neo theo toạ độ màn hình
   tính sẵn ở JS (không phải con của host) — Owner báo bị Nhân Vật che ở Sảnh/Trang Bị vì host
   (#thEquipMountFloat) có z-index thấp hơn Nhân Vật để Thần Thú luôn đứng SAU LƯNG người; z-index riêng
   của một phần tử con không thể vượt qua giới hạn xếp lớp của cha, nên phải tách hẳn ra khỏi host.
   z-index cao hơn HUD/Nhân Vật nhưng vẫn thấp hơn tooltip/modal (10050+) để không đè lên khi cần. Kiểu
   pill gọn theo phong cách chung của theme (không khung hộp to). */
.th-pet-bubble{position:fixed;transform:translate(-50%,calc(-100% - 6px)) scale(.95);z-index:1300;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;width:max-content;max-width:180px;
  opacity:0;transition:opacity .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1);}
.th-pet-bubble.is-visible{opacity:1;transform:translate(-50%,calc(-100% - 10px)) scale(1);}
.th-pet-bubble.is-hiding{opacity:0;transform:translate(-50%,calc(-100% - 4px)) scale(.96);}
.th-pet-bubble-content{background:rgba(10,18,26,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,214,102,.4);color:#fff1cf;padding:6px 12px;border-radius:999px;
  font:600 12px/1.32 var(--font-body,inherit);text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.4);
  word-wrap:break-word;user-select:none;}
.th-pet-bubble-tail{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:5px solid rgba(10,18,26,.9);margin-top:-1px;}
.th-pet-interactive{cursor:pointer;}
@keyframes thPetBounce{0%{transform:scale(1);}30%{transform:scale(1.1,.92);}55%{transform:scale(.95,1.06);}100%{transform:scale(1);}}
.th-pet-bounce{animation:thPetBounce .4s ease-out;}
@media (prefers-reduced-motion:reduce){
  .th-pet-bubble{transition:none;}
  .th-pet-bounce{animation:none;}
}

/* Owner 2026-09-23: 2 icon chăm sóc Thần Thú (📊 Trạng Thái · 🎒 Túi Đồ) khi bấm ảnh Thần Thú ở
   Sảnh/Trang Bị (tien-hiep-pet-care.js) — thay cho widget FAB nổi góc màn hình cũ. Neo bằng
   position:fixed (con của <body>, giống .th-pet-bubble) để không kẹt dưới z-index thấp của
   #thEquipMountFloat. Icon nổi trần theo PQ-57 (không khung hộp to); panel dữ liệu vẫn cần nền
   thẻ tối để đọc rõ số liệu, dùng đúng ngôn ngữ màu "thẻ vàng-tối" đã có sẵn trong theme (khớp
   .th-combat-auto-settings). */
.th-pet-care-root{position:fixed;z-index:1250;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.th-pet-care-actions{display:flex;gap:8px;pointer-events:auto;}
.th-pet-care-btn{width:38px;height:38px;border-radius:50%;border:2px solid rgba(242,218,139,.7);
  background:rgba(20,26,18,.85);color:#fff1cf;font-size:17px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.5);
  transition:transform .15s ease,border-color .15s ease;}
.th-pet-care-btn:hover{transform:translateY(-2px);}
.th-pet-care-btn.is-active{border-color:#ffe68d;background:rgba(90,62,18,.9);}
.th-pet-care-panel{display:none;pointer-events:auto;width:min(78vw,240px);max-height:min(60vh,368px);
  overflow-y:auto;padding:10px 12px;border-radius:12px;background:rgba(14,20,28,.95);
  border:1px solid rgba(255,214,141,.55);box-shadow:0 8px 24px rgba(0,0,0,.55);
  color:#f1e6c8;font-family:var(--font-body);}
.th-pet-care-panel.is-open{display:block;}
.th-pet-care-empty{margin:0;padding:6px 0;font-size:12px;text-align:center;opacity:.75;}
.th-pet-care-vitals{display:flex;flex-direction:column;gap:6px;}
.th-pet-care-vital-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px;font-size:12px;}
.th-pet-care-vital-label{white-space:nowrap;color:#f7eed4;}
.th-pet-care-vital-row b{grid-column:2;font-size:12px;color:#ffe68d;text-align:right;}
.th-pet-care-vital-bar{grid-column:1/-1;display:block;height:6px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;}
.th-pet-care-vital-bar i{display:block;height:100%;background:linear-gradient(90deg,#7be36a,#3dbe6c);border-radius:999px;}
.th-pet-care-vital-row--level{border-top:1px solid rgba(255,255,255,.15);padding-top:6px;margin-top:2px;grid-template-columns:1fr auto;}
.th-pet-care-vital-row--level .th-pet-care-vital-bar{display:none;}
.th-pet-care-item-grid{--item-slot-max:52px;display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,52px));gap:8px;}
@media (max-width:560px){
  .th-pet-care-panel{width:min(84vw,220px);}
  .th-pet-care-btn{width:32px;height:32px;font-size:15px;}
}

/* Skill Thần Thú (Owner 2026-09-24): thú nhún khi tung skill, số EXP thú nhận nổi lên, ô chọn Thần Thú thử ở Bí Cảnh Thử Nghiệm. */
.th-combat-player .th-combat-pet.is-casting{animation:th-pet-cast .6s ease-out;}
@keyframes th-pet-cast{0%{transform:translateX(var(--th-pk-pet-empty-right,0%)) translateY(0) scale(1);}30%{transform:translateX(var(--th-pk-pet-empty-right,0%)) translateY(-14px) scale(1.08);filter:drop-shadow(0 0 14px rgba(255,230,140,.9));}100%{transform:translateX(var(--th-pk-pet-empty-right,0%)) translateY(0) scale(1);}}
.th-combat-pet-exp{position:absolute;left:50%;top:-6px;transform:translateX(-50%);font-size:calc(11px * var(--th-fs,1));font-weight:800;color:#8fe8ff;text-shadow:0 1px 3px #000;pointer-events:none;animation:th-pet-exp 1.4s ease-out forwards;white-space:nowrap;}
@keyframes th-pet-exp{0%{opacity:0;transform:translate(-50%,6px);}15%{opacity:1;}100%{opacity:0;transform:translate(-50%,-34px);}}
.th-test-pet{margin:6px 0;padding:6px;border:1px solid rgba(255,255,255,.18);border-radius:8px;display:flex;flex-direction:column;gap:4px;font-size:11px;}
.th-test-pet select,.th-test-pet input{width:100%;font-size:11px;}
.th-test-pet button{font-size:11px;padding:3px 6px;cursor:pointer;}
@media (prefers-reduced-motion:reduce){.th-combat-player .th-combat-pet.is-casting{animation:none;}}

/* Nút skill Thần Thú cạnh AUTO (Owner 2026-09-24): icon = frame cast của skill giai đoạn hiện tại; vòng hồi chiêu như các skill khác. */
.th-combat-petskill-btn{position:absolute;z-index:6;right:calc(clamp(6px,1.5vw,16px) + 105px + 64px + 14px + 54px + 58px);bottom:16px;width:46px;height:46px;border-radius:50%;border:2px solid rgba(143,232,255,.85);background:rgba(15,25,35,.9);padding:0;cursor:pointer;box-shadow:0 3px 6px rgba(0,0,0,.5);overflow:hidden;}
.th-combat-petskill-btn[hidden]{display:none;}
.th-petskill-icon{position:absolute;inset:0;background-repeat:no-repeat;background-size:200% 200%;background-position:0% 100%;}
.th-petskill-cd{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(0,0,0,.78) var(--th-skill-cd-deg,0deg),transparent 0deg);pointer-events:none;display:none;}
.th-combat-petskill-btn.is-cooling .th-petskill-cd{display:block;}
.th-petskill-sec{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;text-shadow:0 1px 3px #000;pointer-events:none;}
.th-combat-petskill-btn.is-ready{border-color:#ffe68d;box-shadow:0 0 10px rgba(255,230,140,.85),0 3px 6px rgba(0,0,0,.5);}
.th-combat-petskill-btn.is-auto::after{content:'A';position:absolute;right:1px;top:1px;width:14px;height:14px;border-radius:50%;background:rgba(46,140,80,.95);color:#fff;font-size:9px;font-weight:900;line-height:14px;text-align:center;}
.th-combat-petskill-btn.is-busy{cursor:wait;}
.th-auto-set-petico{width:28px;height:28px;border-radius:50%;flex:0 0 28px;background-repeat:no-repeat;background-size:200% 200%;background-position:0% 100%;background-color:rgba(15,25,35,.9);border:1px solid rgba(143,232,255,.7);}
@media (max-width:560px){.th-combat-petskill-btn{right:calc(6px + 78px + 48px + 10px + 42px + 46px);bottom:34px;width:34px;height:34px;}.th-petskill-sec{font-size:11px;}}
.th-auto-set-row .th-auto-set-petico{flex:0 0 28px;width:28px;min-width:28px;height:28px;display:inline-block;}

/* Thần Thú dạng sprite (Owner 2026-09-25, pet_actors_v1): ô atlas đã căn chân ở đáy; cỡ wrapper đặt inline theo height_ratio thật của bộ. */
.th-combat-player .th-combat-pet.is-sprite .th-pet-sprite{display:block;height:100%;width:auto;background-repeat:no-repeat;filter:none;}

/* Kim Nguyên Bảo (Owner 2026-09-25): hộp thoại nhỏ nổi cạnh ô, KHÔNG có nền mờ phủ màn hình. */
.th-ingot-dialog{position:fixed;z-index:1400;width:250px;padding:12px 12px 10px;border-radius:10px;border:1px solid rgba(201,164,76,.85);background:rgba(14,22,30,.95);box-shadow:0 8px 22px rgba(0,0,0,.55);color:#f3e6c4;font-size:13px;line-height:1.4;}
.th-ingot-dialog p{margin:0 0 10px;text-align:center;}
.th-ingot-dialog b{color:#ffd76a;}
.th-ingot-actions{display:flex;gap:8px;}
.th-ingot-btn{flex:1;min-height:34px;padding:0 8px;border-radius:999px;border:1px solid rgba(201,164,76,.9);font-weight:800;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px;color:#2b1d05;background:linear-gradient(#ffe08a,#d9a63c);}
.th-ingot-btn.is-market{color:#dff7ee;background:linear-gradient(#2f7f6b,#1c5446);border-color:rgba(79,191,159,.85);}

/* Bán hàng loạt Trang Bị — popover gọn, neo cạnh Rương; không có overlay/nền mờ. */
.th-equip-batch-sell-dialog{position:fixed;z-index:1400;width:min(326px,calc(100vw - 16px));padding:12px;border:1px solid rgba(201,164,76,.9);border-radius:11px;background:linear-gradient(145deg,rgba(17,37,43,.98),rgba(9,19,26,.98));box-shadow:0 9px 25px rgba(0,0,0,.6);color:#f5e7c1;font:13px/1.35 var(--font-body);}
.th-equip-batch-sell-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;}.th-equip-batch-sell-head b{color:#ffe083;font:800 15px var(--font-display);}.th-equip-batch-sell-close{border:0;background:transparent;color:#d9c89c;font-size:17px;line-height:1;cursor:pointer;}
.th-equip-batch-sell-filter{display:grid;grid-template-columns:1fr 1.18fr;align-items:center;gap:6px 8px;margin:6px 0;}.th-equip-batch-sell-filter label{display:flex;align-items:center;gap:5px;font-weight:700;cursor:pointer;}.th-equip-batch-sell-filter input{accent-color:#d9a63c;}.th-equip-batch-sell-filter select{min-width:0;padding:4px 6px;border:1px solid rgba(202,169,89,.7);border-radius:6px;background:#152a2e;color:#f9eac6;font:12px var(--font-body);}.th-equip-batch-sell-filter select:disabled{opacity:.48;}
.th-equip-batch-sell-combine{min-height:19px;margin:8px 0 6px;padding:3px 7px;border-radius:6px;background:rgba(196,143,42,.14);color:#d5c7a2;font-size:11px;}.th-equip-batch-sell-combine.is-active{color:#fff0a8;background:rgba(201,151,42,.28);}
.th-equip-batch-sell-preview{min-height:37px;margin:0;padding:8px;border-top:1px solid rgba(222,191,111,.28);border-bottom:1px solid rgba(222,191,111,.28);color:#dce9dc;text-align:center;}.th-equip-batch-sell-preview strong{color:#ffe278;}
.th-equip-batch-sell-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:9px;}.th-equip-batch-sell-actions button,.th-equip-batch-sell-confirm button{min-height:29px;padding:4px 10px;border:1px solid rgba(211,175,84,.85);border-radius:7px;background:#1c4140;color:#e7f5e8;font:800 12px var(--font-body);cursor:pointer;}.th-equip-batch-sell-actions .is-sell,.th-equip-batch-sell-confirm .is-sell{background:linear-gradient(180deg,#ffe393,#d49c30);color:#3d2607;}.th-equip-batch-sell-actions button:disabled{opacity:.48;cursor:default;}
.th-equip-batch-sell-confirm{position:fixed;z-index:1401;width:min(286px,calc(100vw - 16px));padding:11px;border:1px solid rgba(225,182,75,.95);border-radius:10px;background:rgba(17,31,35,.98);box-shadow:0 8px 24px rgba(0,0,0,.62);color:#f5e7c1;text-align:center;font:13px/1.42 var(--font-body);}.th-equip-batch-sell-confirm p{margin:0 0 9px;}.th-equip-batch-sell-confirm div{display:flex;justify-content:center;gap:8px;}
.th-equip-detail-actions .th-equip-detail-destroy{border-color:rgba(220,92,79,.86);background:linear-gradient(180deg,#9f3f37,#64221f);color:#fff0df;}.th-equip-detail-actions .th-equip-detail-destroy:disabled{opacity:.5;cursor:default;}.th-equip-destroy-confirm{border-color:rgba(229,100,83,.95);}.th-equip-destroy-confirm small{color:#efb4a4;}.th-equip-destroy-confirm .is-destroy{border-color:rgba(235,111,91,.95);background:linear-gradient(180deg,#e86c5b,#9b3028);color:#fff7e9;}
.th-divine-batch-feed-dialog{position:fixed;z-index:1400;width:min(326px,calc(100vw - 16px));padding:12px;border:1px solid rgba(96,205,191,.92);border-radius:11px;background:linear-gradient(145deg,rgba(10,43,45,.98),rgba(7,20,27,.98));box-shadow:0 9px 25px rgba(0,0,0,.6);color:#dff6ec;font:13px/1.35 var(--font-body);}.th-divine-batch-feed-dialog header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;}.th-divine-batch-feed-dialog header b{color:#baf6e9;font:800 15px var(--font-display);}.th-divine-batch-feed-dialog header button{border:0;background:transparent;color:#c5e3db;font-size:17px;line-height:1;cursor:pointer;}.th-divine-batch-feed-filter{display:grid;grid-template-columns:1fr 1.18fr;align-items:center;gap:6px 8px;margin:6px 0;}.th-divine-batch-feed-filter label{display:flex;align-items:center;gap:5px;font-weight:700;cursor:pointer;}.th-divine-batch-feed-filter input{accent-color:#55cfc0;}.th-divine-batch-feed-filter select{min-width:0;padding:4px 6px;border:1px solid rgba(96,205,191,.72);border-radius:6px;background:#113437;color:#e6fff7;font:12px var(--font-body);}.th-divine-batch-feed-filter select:disabled{opacity:.48;}.th-divine-batch-feed-combine{min-height:19px;margin:8px 0 6px;padding:3px 7px;border-radius:6px;background:rgba(71,172,160,.14);color:#c3ddd7;font-size:11px;}.th-divine-batch-feed-combine.is-active{color:#eafff8;background:rgba(71,172,160,.28);}.th-divine-batch-feed-preview{min-height:37px;margin:0;padding:8px;border-top:1px solid rgba(126,221,207,.28);border-bottom:1px solid rgba(126,221,207,.28);color:#dcefeb;text-align:center;}.th-divine-batch-feed-preview strong{color:#b8f7e8;}.th-divine-batch-feed-dialog footer{display:flex;justify-content:flex-end;gap:7px;margin-top:9px;}.th-divine-batch-feed-dialog footer button,.th-divine-batch-feed-confirm button{min-height:29px;padding:4px 10px;border:1px solid rgba(96,205,191,.85);border-radius:7px;background:#184846;color:#e7f9f2;font:800 12px var(--font-body);cursor:pointer;}.th-divine-batch-feed-dialog footer button[data-act="feed"],.th-divine-batch-feed-confirm button[data-act="confirm"]{background:linear-gradient(180deg,#c3fff0,#55c3af);color:#06302a;}.th-divine-batch-feed-dialog footer button:disabled{opacity:.48;cursor:default;}.th-divine-batch-feed-confirm{position:fixed;z-index:1401;width:min(286px,calc(100vw - 16px));padding:11px;border:1px solid rgba(96,220,202,.95);border-radius:10px;background:rgba(11,34,37,.98);box-shadow:0 8px 24px rgba(0,0,0,.62);color:#dcf8ef;text-align:center;font:13px/1.42 var(--font-body);}.th-divine-batch-feed-confirm p{margin:0 0 9px;}.th-divine-batch-feed-confirm div{display:flex;justify-content:center;gap:8px;}
.th-ingot-btn:disabled{opacity:.55;cursor:default;}
.th-ingot-btn .currency-icon{height:1.15em;width:auto;vertical-align:middle;}

/* Ống EXP dưới chân Thần Thú Hành Tẩu (Owner 2026-09-25) — nằm ngay dưới thú ở Sảnh Chính, Trang Bị và Bí Cảnh. */
.th-pet-expbar{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:2px;width:max(70px,86%);max-width:150px;height:11px;pointer-events:none;z-index:3;}
.th-pet-expbar i{position:absolute;inset:0;display:block;overflow:hidden;border-radius:999px;background:rgba(6,10,16,.62);border:1px solid rgba(220,200,255,.45);box-shadow:0 1px 3px rgba(0,0,0,.6);}
.th-pet-expbar i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#a855f7,#d946ef);transition:width .5s ease;}
.th-pet-expbar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 8px/1 var(--font-body);color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000;white-space:nowrap;}

/* ---------- Bản Đồ Tu Luyện Môn Phái: overview + bãi (ảnh 16:9, 2560x1440) ----------
   Ảnh và lớp SVG hotspot nằm chung trong `.th-train-stage` (tỉ lệ 16:9 cố định) nên luôn
   khớp nhau ở mọi màn hình. Luôn vừa khung (contain): hiện trọn ảnh, không cắt mép. */
.th-train-overview{position:relative;overflow:hidden;background:#000;}
.th-train-stage{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  /* Owner 2026-09-26: luôn hiện TRỌN ảnh 16:9 (contain), không cắt mép; màn khác 16:9 sẽ có dải đen. */
  width:min(100vw,calc(100dvh * 16 / 9));
  aspect-ratio:16 / 9;line-height:0;
}
.th-train-bg{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none;}
.th-train-scene{overflow:hidden;}
.th-train-topbar{
  position:absolute;left:0;right:0;top:0;z-index:5;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:14px;pointer-events:none;
}
.th-train-topbar > *{pointer-events:auto;}
.th-train-topbar .th-map-back-btn{position:static;}
.th-train-title{
  display:flex;flex-direction:column;align-items:center;margin-top:2px;
  font-family:var(--font-body);color:#fff;text-shadow:0 1px 4px rgba(4,7,10,.95),0 0 10px rgba(4,7,10,.8);
  pointer-events:none;
}
.th-train-title b{font-size:20px;line-height:1.2;}
.th-train-title span{font-size:12px;color:#ffe9a5;font-weight:600;}
.th-train-battlefield{position:absolute;left:28%;top:42%;width:44%;height:44%;pointer-events:none;}
.th-train-scene .th-popup-close{position:static;}

/* ---------- Nhãn vùng bản đồ dạng HTML (Owner 2026-09-26) — để tool CĂN UI kéo được ----------
   Lớp `.th-map-label-layer` phủ đúng khung ảnh/SVG; mỗi nhãn đặt bằng left/top % (mặc định = tâm polygon),
   tâm nhãn = điểm đặt (translate -50%,-50%). Cỡ chữ co theo bề rộng bản đồ (cqw) y như khi nhãn còn nằm trong SVG
   (viewBox rộng 1536): 14.7/1536 và 8.4/1536 của bề rộng. */
.th-map-label-layer{position:absolute;inset:0;z-index:3;pointer-events:none;container-type:inline-size;line-height:normal;}
.th-map-label{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;white-space:nowrap;}
.th-map-label .th-map-zone-label{font-size:calc(14.7 * 100cqw / 1536);padding:.2em .6em;transition:border-color .2s ease,background .2s ease;}
.th-map-label:hover .th-map-zone-label{border-color:rgba(255,255,255,.65);background:rgba(4,7,10,.7);}
.th-map-label .th-map-zone-label.th-map-zone-label-2line{padding:.27em .68em;border-radius:.6em;}
.th-map-label .th-map-zone-label-title{font-size:calc(14.7 * 100cqw / 1536);}
.th-map-label .th-map-zone-label-sub{font-size:calc(8.4 * 100cqw / 1536);}
.th-popup-map-detail .th-map-back-btn{z-index:4;}
/* Stage/detail đặt line-height:0 (ôm khít ảnh) — thanh CĂN UI phải về bình thường. */
.th-popup-map-stage .th-layout-editor-toolbar,.th-popup-map-detail .th-layout-editor-toolbar,.th-train-stage .th-layout-editor-toolbar{line-height:normal;}
/* Owner 2026-09-26: vùng trống hai bên/trên dưới (khi màn không đúng 16:9) phủ bằng CHÍNH ảnh đó, làm mờ + hơi tối
   để không tranh với ảnh chính (kiểu nền mờ của video dọc). Nằm dưới stage, không nhận chuột. */
.th-train-blur{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(3px) brightness(.92) saturate(1.05);transform:scale(1.03);   /* Owner 2026-10-21: giảm mờ để dải bên bớt lộ */
  pointer-events:none;user-select:none;
}

/* ---------- Tu Luyện Môn Phái — chiến đấu (dùng chung Scene chiến đấu Bí Cảnh, class .is-training) ---------- */
.th-territory-scene.is-training{background:#000;overflow:hidden;}
.is-training .th-territory-shade{display:none;}
.th-territory-combat-hud[hidden]{display:none!important;}
/* Arena = khung 16:9 vừa màn hình (contain); ảnh bãi + nhân vật + quái + trưởng môn đều tính % theo khung này. Icon/HUD vẫn bám cạnh màn hình. */
.th-train-arena{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100vw,calc(100dvh * 16 / 9));aspect-ratio:16 / 9;overflow:visible;}
.th-train-stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none;z-index:0;}
.th-train-arena .th-combat-player{z-index:780;}
/* Owner 2026-09-26/28: nhân vật/Thần Thú/Phi Kiếm to lệch hẳn so với quái trên điện thoại — quái đã tính theo % BỀ RỘNG khung
   ảnh (`.th-combat-arena`) nên tự thu đúng theo khung dù màn dọc hẹp, còn nhân vật vẫn cao theo `vh` (chiều cao TOÀN MÀN HÌNH thật).
   Ở Tu Luyện, khung 16:9 bị ép hẹp lại (letterbox) nên `vh` lớn hơn nhiều so với khung — nhân vật hoá ra "to đùng". Đổi sang đơn vị
   container (`cqh`, theo chiều cao CHÍNH `.th-combat-arena` nhờ `container-type:size` ở trên) để tỉ lệ luôn khớp quái/trưởng môn ở
   mọi kích thước màn hình — áp dụng chung cho cả Bí Cảnh/Bí Cảnh Thử Nghiệm (arena = full màn hình, cqh≈vh nên không đổi hành vi cũ)
   lẫn Tu Luyện/Tu Luyện Thử Nghiệm (arena bị letterbox). */
.th-combat-arena .th-combat-player .th-combat-player-img{height:clamp(84px,31.2cqh,324px);}
.th-combat-arena .th-combat-player .th-combat-player-img.th-combat-sect-sprite{--th-sect-h:calc(clamp(84px,31.2cqh,324px) * 1.143);}
.th-combat-arena .th-combat-player{--th-aura-h:clamp(70px,26cqh,270px);}
.th-train-arena .th-combat-monster-layer{left:0!important;top:0!important;width:100%;height:100%;pointer-events:none;}
/* Owner 2026-10-21: CHUẨN Tu Luyện áp cho Boss Môn Phái / Rừng Ẩn Tu / Thảo Nguyên / Vượt Tháp — khung 16:9 vừa màn hình (contain), nền mờ lấp dải trống,
   nhân vật/quái/Thần Thú/skill đều tính theo khung nên luôn trọn vẹn; HUD/avatar/bảng thông báo vẫn bám cạnh màn hình (ngoài khung). Không đụng lớp quái như .th-train-arena. */
.th-territory-scene.is-fit169{background:#000;overflow:hidden;}
.is-fit169 .th-territory-shade{display:none;}
.th-fit-arena{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100vw,calc(100dvh * 16 / 9));aspect-ratio:16 / 9;overflow:visible;}
/* Owner 2026-10-29: quái >= nhân vật, Boss ~1,4x; mọi cỡ tính thuần theo cqh của khung 16:9 (không clamp px) để co giãn đồng bộ ở mọi màn hình, kể cả mobile. */
.th-fit-arena .th-combat-monster img,.th-fit-arena .th-combat-monster-sprite{height:31.2cqh;}
.th-fit-arena .th-combat-monster .th-boss-sprite{height:43.7cqh;}
.th-fit-arena .th-combat-player .th-combat-player-img{height:31.2cqh;}
.th-fit-arena .th-combat-player .th-combat-player-img.th-combat-sect-sprite{--th-sect-h:calc(31.2cqh * 1.143);}
.th-fit-arena .th-combat-player{--th-aura-h:26cqh;}
.th-fit-arena .th-combat-player{z-index:780;}
.th-train-mob{transform:translate(-50%,-100%);transition:none;pointer-events:auto;cursor:pointer;gap:2px;}
.th-train-mob .th-train-sprite{width:100%;height:auto;aspect-ratio:1 / 1;background-repeat:no-repeat;background-size:100% 100%;background-position:0 0;}
.th-train-mob.is-selected .th-train-sprite{filter:drop-shadow(0 0 10px #ffe68d) drop-shadow(0 10px 12px rgba(0,0,0,.55));}
.th-train-mob .th-train-sprite.is-hit{animation:th-monster-hit .26s ease-out;}
/* Trưởng môn: đứng rìa phải, chân neo tại (left, top) */
.th-train-leader{position:absolute;transform:translate(-50%,-100%);height:46%;aspect-ratio:1 / 1;z-index:790;pointer-events:auto;cursor:pointer;outline:none;}
.th-train-leader-img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.55));transition:filter .2s ease;}
.th-train-leader:hover .th-train-leader-img,.th-train-leader:focus-visible .th-train-leader-img{filter:drop-shadow(0 0 12px rgba(255,230,141,.85)) drop-shadow(0 10px 12px rgba(0,0,0,.55));}
.th-train-leader.is-locked{cursor:default;}
.th-train-leader{transition:opacity .4s ease;}
.th-train-leader.is-away{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s;}   /* trận bắt đầu: NPC trưởng môn tạm ẩn */
/* Quái Tu Luyện mọc từ dưới đất lên: cao dần từ đáy + hiện dần + chớp sáng (cùng tinh thần thLcSpawn/Pixi của Thảo Nguyên) */
.th-train-mob.is-rise .th-train-sprite{transform-origin:50% 100%;animation:thTrainRise .55s ease-out;}
@keyframes thTrainRise{0%{opacity:0;scale:1 .5;filter:brightness(2.2);}60%{opacity:1;}100%{opacity:1;scale:1 1;filter:none;}}
@media (prefers-reduced-motion:reduce){.th-train-mob.is-rise .th-train-sprite{animation:none;}}
.th-train-leader.is-locked .th-train-leader-img{filter:saturate(.6) brightness(.9) drop-shadow(0 10px 12px rgba(0,0,0,.55));}
.th-train-leader-name{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);padding:2px 10px;border-radius:999px;background:rgba(4,13,18,.6);color:#ffe9a5;font:700 12px var(--font-body);text-shadow:0 1px 3px #000;white-space:nowrap;pointer-events:none;}
/* Hội thoại cạnh vai NPC (bên trái NPC vì NPC đứng rìa phải) */
.th-train-bubble{position:absolute;right:66%;top:8%;min-width:180px;max-width:min(320px,34vw);padding:10px 12px;border:1px solid rgba(242,218,139,.65);border-radius:12px;background:rgba(6,16,22,.9);color:#fff4d0;font:600 13px/1.45 var(--font-body);text-shadow:0 1px 2px #000;box-shadow:0 8px 24px rgba(0,0,0,.5);cursor:default;}
.th-train-bubble[hidden]{display:none;}
.th-train-bubble::after{content:'';position:absolute;right:-8px;top:22px;width:14px;height:14px;background:rgba(6,16,22,.9);border-top:1px solid rgba(242,218,139,.65);border-right:1px solid rgba(242,218,139,.65);transform:rotate(45deg);}
.th-train-bubble p{margin:0;}
.th-train-bubble.is-menu p{margin-bottom:8px;}
.th-train-menu-btn,.th-train-pw button{width:100%;padding:8px 12px;border:1px solid rgba(255,229,139,.8);border-radius:9px;background:linear-gradient(135deg,#9a7030,#d8b85b);color:#16130b;font:800 13px var(--font-body);cursor:pointer;}
.th-train-pw{display:flex;gap:6px;}.th-train-pw input{flex:1;min-width:0;padding:7px 9px;border:1px solid rgba(242,218,139,.5);border-radius:8px;background:rgba(0,0,0,.45);color:#fff;font:600 14px var(--font-body);}.th-train-pw button{width:auto;padding:7px 14px;}
/* Đếm ngược giữa màn hình: chỉ chữ + đổ bóng, không khung */
.th-train-countdown{position:absolute;z-index:30;left:50%;top:42%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff4c7;font:900 clamp(72px,16vh,150px)/1 var(--font-display);text-shadow:0 4px 0 rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.9),0 8px 30px rgba(0,0,0,.8);pointer-events:none;}
.th-train-countdown[hidden]{display:none;}
.th-train-countdown.is-result{font-size:clamp(28px,5vh,52px);line-height:1.2;text-align:center;}
.th-train-countdown.is-result span{font:700 clamp(16px,2.6vh,26px) var(--font-body);color:#ffe9a5;}
@media (max-width:560px){.th-train-bubble{right:50%;max-width:52vw;font-size:12px;}}
@media (prefers-reduced-motion:reduce){.th-train-leader-img{transition:none;}}
.th-train-menu-btn+.th-train-menu-btn{margin-top:6px;}
.th-train-menu-btn.is-test{background:linear-gradient(135deg,#2c6f86,#5ec0d8);border-color:rgba(160,235,255,.85);color:#06202a;}
.th-train-test{top:96px;}
.th-train-test .th-test-info{margin:4px 0 2px;font-size:10px;line-height:1.3;color:#bcd;}
.th-train-test .th-test-counts button.is-on{background:rgba(255,214,141,.9);color:#3a2408;border-color:#ffd56b;}
/* Tu Luyện: quái có z-index theo chiều sâu (y) nên hiệu ứng skill/đòn đánh phải nổi TRÊN mọi quái (trước đây z 4–6 nằm dưới quái → cảm giác đánh trượt).
   reward_beam (chùm sáng dưới chân) cố ý giữ dưới quái. */
.th-train-arena .th-combat-monster-layer .th-vfx:not(.th-vfx-reward_beam){z-index:5000!important;}

/* =============================================================================
   PQ-116 (2026-10-01) — NGŨ HÀNH TRONG CHIẾN ĐẤU
   Icon hành đứng TRƯỚC tên + thanh máu (dưới chân nhân vật/quái/Boss). Icon nổi trần
   + drop-shadow (không khung hộp, theo PQ-57). Phản hồi khi khắc/bị khắc: nhãn nhỏ
   dưới số sát thương + đổi màu số.
   ========================================================================== */
.th-wx-info{display:flex;align-items:center;justify-content:center;gap:4px;pointer-events:none;}
/* Tên + Máu + Ngũ Hành luôn ở trước thân nhân vật và Phi Kiếm. Z-index chỉ
   áp trong actor nên vẫn giữ nguyên xếp lớp chiều sâu giữa các actor. */
.th-combat-actor .th-wx-info{position:relative;z-index:4;}
.th-wx-text{display:flex;flex-direction:column;align-items:center;gap:3px;}
.th-wx-slot{display:inline-flex;}
.th-wx-slot:empty{display:none;}
.th-wx-icon{display:block;width:24px!important;height:24px!important;max-width:none;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)) drop-shadow(0 0 4px rgba(0,0,0,.55));pointer-events:none;}
@media (max-width:560px){.th-wx-icon{width:20px!important;height:20px!important;}}
.th-combat-actor .th-wx-icon,.th-combat-player .th-wx-icon,.th-combat-monster .th-wx-icon{filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)) drop-shadow(0 0 4px rgba(0,0,0,.55));max-width:none;}

/* Nhãn phản hồi khắc/bị khắc — dùng chung cho số nổi Bí Cảnh/Tu Luyện (.th-combat-dmg-float) và Chính Điện (.th-sectboss-dmg). */
.th-combat-dmg-float[data-wx],.th-sectboss-dmg[data-wx]{white-space:nowrap;}
.th-combat-dmg-float[data-wx]::after,.th-sectboss-dmg[data-wx]::after{content:attr(data-wx);display:inline;margin-left:5px;font:800 calc(13px * var(--th-fs,1))/1 var(--font-body);letter-spacing:.3px;text-shadow:0 0 3px #000,0 1px 2px #000;}
.th-combat-dmg-float.is-wx-adv,.th-sectboss-dmg.is-wx-adv{color:#7dffb0;font-size:calc(26px * var(--th-fs,1));text-shadow:0 0 6px #1fd06a,0 0 12px rgba(31,208,106,.75),0 2px 3px #000,1px 1px 0 #000;}
.th-combat-dmg-float.is-wx-adv::after,.th-sectboss-dmg.is-wx-adv::after{color:#9dffc4;}
.th-combat-dmg-float.is-wx-dis,.th-sectboss-dmg.is-wx-dis{color:#b9c0c8;font-size:calc(18px * var(--th-fs,1));}
.th-combat-dmg-float.is-wx-dis::after,.th-sectboss-dmg.is-wx-dis::after{color:#c9d0d8;}
.th-combat-dmg-float.is-player-hit.is-wx-hurt,.th-sectboss-dmg.is-wx-hurt{color:#ff3b3b;font-size:calc(28px * var(--th-fs,1));text-shadow:0 0 6px #ff1a1a,0 0 14px rgba(255,40,40,.85),0 2px 3px #000,1px 1px 0 #000;}
.th-combat-dmg-float.is-wx-hurt::after,.th-sectboss-dmg.is-wx-hurt::after{color:#ff9a9a;}
.th-combat-dmg-float.is-player-hit.is-wx-resist,.th-sectboss-dmg.is-wx-resist{color:#8fd0ff;font-size:calc(20px * var(--th-fs,1));}
.th-combat-dmg-float.is-wx-resist::after,.th-sectboss-dmg.is-wx-resist::after{color:#bfe3ff;}

/* =============================================================================
   PQ-119 (2026-10-01) — popup Bí Kíp Dịch Cân Kinh / Tẩy Tủy Kinh: NỔI, KHÔNG phủ mờ nền
   ========================================================================== */
.th-skillbook-panel{position:fixed;z-index:12000;left:50%;top:12%;transform:translateX(-50%);width:min(380px,calc(100vw - 20px));max-height:76vh;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;border:1px solid rgba(255,214,141,.55);background:linear-gradient(180deg,rgba(18,26,36,.97),rgba(9,14,20,.97));box-shadow:0 10px 36px rgba(0,0,0,.55);color:var(--text);font-size:13px;}
.th-skillbook-head{display:flex;align-items:center;gap:10px;}
.th-skillbook-head>div{flex:1;min-width:0;display:flex;flex-direction:column;}
.th-skillbook-head strong{font-size:15px;color:#ffe9a8;}
.th-skillbook-head span{font-size:12px;color:var(--text-muted);}
.th-skillbook-icon{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.7));}
.th-skillbook-close{border:0;background:transparent;color:var(--text-muted);font-size:16px;cursor:pointer;padding:4px 6px;}
.th-skillbook-close:hover{color:#fff;}
.th-skillbook-hint,.th-skillbook-body p{margin:0;line-height:1.45;color:var(--text-muted);}
.th-skillbook-hint b,.th-skillbook-body b{color:#ffe9a8;}
.th-skillbook-keep{color:#8be3a4!important;font-size:12px;}
.th-skillbook-empty{margin:0;color:#ff9aa8;font-size:12px;}
.th-skillbook-list{display:flex;flex-direction:column;gap:5px;overflow-y:auto;max-height:42vh;padding-right:2px;}
.th-skillbook-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--text);text-align:left;cursor:pointer;}
.th-skillbook-row img{width:34px;height:34px;object-fit:contain;flex:0 0 auto;}
.th-skillbook-row span{display:flex;flex-direction:column;min-width:0;}
.th-skillbook-row small{font-size:11px;color:var(--text-muted);}
.th-skillbook-row:not(.is-disabled):hover{border-color:rgba(255,214,141,.7);}
.th-skillbook-row.is-selected{border-color:#ffd68d;background:rgba(255,214,141,.14);}
.th-skillbook-row.is-disabled{opacity:.5;cursor:not-allowed;}
.th-skillbook-foot{display:flex;align-items:center;gap:10px;justify-content:space-between;}
.th-skillbook-err{flex:1;font-size:11.5px;color:#ffb36b;min-height:14px;}
.th-skillbook-go{border:0;border-radius:999px;padding:8px 16px;font-weight:800;cursor:pointer;color:#2b1d00;background:linear-gradient(180deg,#ffe08a,#e0a935);}
.th-skillbook-go[disabled]{opacity:.45;cursor:not-allowed;}
.th-skillbook-loading{padding:14px;text-align:center;color:var(--text-muted);}

/* PQ-120: chữ "Trượt" (quái né được đòn) và "Né" (nhân vật né được đòn) — xám nhạt/xanh nhạt, không dùng số sát thương */
.th-combat-dmg-float.is-miss{color:#c9d3dc;font-size:calc(22px * var(--th-fs,1));font-style:italic;text-shadow:0 2px 3px #000,1px 1px 0 #000}
.th-combat-dmg-float.is-player-dodge{top:12%;color:#7fe3ff;font-size:calc(24px * var(--th-fs,1));font-weight:700;text-shadow:0 0 6px rgba(80,200,255,.85),0 2px 3px #000,1px 1px 0 #000}
/* PQ-120: Chính Điện Boss Môn Phái — chữ "Né" (mình né được đòn Boss) và "Trượt" (Boss né được đòn mình) */
.th-sectboss-dmg.is-player-dodge{color:#7fe3ff;font-size:24px;font-weight:700;text-shadow:0 0 6px rgba(80,200,255,.85),0 2px 3px #000,1px 1px 0 #000}
.th-sectboss-dmg.is-miss{color:#c9d3dc;font-size:22px;font-style:italic;text-shadow:0 2px 3px #000,1px 1px 0 #000}
/* PQ-121: dòng mô tả hiệu ứng đặc trưng cấp 11+ trong tooltip kỹ năng */
.th-skill-scene-tooltip-fx{display:block;margin-top:4px;font-size:12px;line-height:1.35;color:#ffe6a8}
.th-skill-scene-tooltip-fx b{color:#ffd666}

/* ===== PQ-121: huy hiệu trạng thái (trên đầu quái/nhân vật) + icon to rồi thu nhỏ khi vừa áp ===== */
.th-fx-badges{position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);display:flex;gap:2px;pointer-events:none;z-index:7;white-space:nowrap}
.th-fx-badge{position:relative;width:24px;height:24px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.85))}
.th-fx-badge img{width:100%;height:100%;object-fit:contain;display:block}
.th-fx-badge .th-fx-stack{position:absolute;right:-3px;bottom:-3px;font:800 10px/1 var(--font-body);color:#fff;text-shadow:0 0 3px #000,0 1px 1px #000}
.th-fx-badge.is-new{animation:thFxBadgeIn .2s ease-out .38s both}
@keyframes thFxBadgeIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.th-fx-pop{position:absolute;left:50%;top:38%;width:76px;height:76px;margin:-38px 0 0 -38px;pointer-events:none;z-index:9;filter:drop-shadow(0 3px 6px rgba(0,0,0,.8));animation:thFxPop .65s ease-out both}
/* Owner 2026-10-31: biểu tượng trạng thái kỹ năng (choáng, đóng băng, thiêu đốt… — từ cấp skill > 10) hiện TRÊN tên, ngay trên hàng huy hiệu như của nhân vật, KHÔNG đè lên ảnh quái/người nữa. Áp mọi cảnh chiến đấu (Bí Cảnh, Tu Luyện, Tổ Đội, Vượt Tháp, Luyện Công, Thảo Nguyên, Boss). */
.th-combat-actor .th-fx-pop{top:auto;bottom:calc(100% + 28px * var(--tf,1));width:calc(36px * var(--tf,1));height:calc(36px * var(--tf,1));margin:0 0 0 calc(-18px * var(--tf,1));}
@keyframes thFxPop{0%{opacity:0;transform:scale(.3)}12%{opacity:1;transform:scale(1.35)}52%{opacity:1;transform:scale(1.18) translateY(0)}100%{opacity:0;transform:scale(.32) translateY(-48px)}}
.th-combat-dmg-float.is-player-heal{top:12%;color:#8dff9c;font-size:calc(24px * var(--th-fs,1));font-weight:700;text-shadow:0 0 6px rgba(40,200,90,.85),0 2px 3px #000,1px 1px 0 #000}
.th-combat-dmg-float.is-player-buff{top:20%;animation-name:th-combat-exp-float;color:#ffe9a8;font-size:calc(16px * var(--th-fs,1));font-weight:900;white-space:nowrap;text-shadow:0 0 5px #7a5300,0 2px 3px #000}   /* CHUẨN chữ nhảy Tu Vi (Owner 2026-10-31): giống .th-combat-exp-float của Tu Luyện */
.th-combat-dmg-float.is-fx-reflect{color:#9fd8ff;font-size:calc(20px * var(--th-fs,1));font-weight:700;white-space:nowrap;text-shadow:0 2px 3px #000,1px 1px 0 #000}


/* Cỡ chữ hiệu ứng (số nổi, tên, trạng thái) thu theo kích thước màn hình — --th-fs nhân với cỡ gốc (Bí Cảnh, Tu Luyện, Chính Điện). */
:root{--th-fs:1;}
@media (max-height:820px){:root{--th-fs:.88;}}
@media (max-height:680px){:root{--th-fs:.74;}}
@media (max-height:540px){:root{--th-fs:.62;}}
@media (max-width:560px){:root{--th-fs:.76;}}
@media (max-width:560px) and (max-height:540px){:root{--th-fs:.6;}}

/* Thuốc hồi máu: "+X Máu" nổi trên thanh Máu nhân vật, trôi lên và mờ sau 1s (migration 366). */
.th-hp-heal-float{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;pointer-events:none;z-index:7;color:#8dff9c;font:800 calc(15px * var(--th-fs,1))/1 var(--font-body);text-shadow:0 0 6px rgba(40,200,90,.85),0 2px 3px #000,1px 1px 0 #000;animation:th-hp-heal-float 1s ease-out forwards;}
@keyframes th-hp-heal-float{0%{opacity:1;transform:translate(-50%,-100%);}60%{opacity:1;}100%{opacity:0;transform:translate(-50%,calc(-100% - 26px));}}
@media (prefers-reduced-motion:reduce){.th-hp-heal-float{animation:th-hp-heal-fade 1s linear forwards;}@keyframes th-hp-heal-fade{0%,60%{opacity:1}100%{opacity:0}}}

/* ===== Vòng thuốc hồi máu (Owner 2026-10-03): 4 vòng ngay TRÊN skill 30 (nth-of-type(2): right:0;bottom:105px), cùng cỡ vòng skill.
   Nằm trong .th-combat-skills nên tự ẩn/hiện theo cụm skill. Từ trên xuống: Tiểu · Trung · Đại · Ngũ Hoa (Ngũ Hoa sát skill 30). */
.th-potion-dock{position:absolute;right:0;bottom:157px;display:flex;flex-direction:column;gap:5px;pointer-events:none;}
.th-potion-btn{position:relative;width:46px;height:46px;border-radius:50%;border:2px solid rgba(120,220,170,.8);background:rgba(15,30,22,.88);padding:0;cursor:pointer;pointer-events:auto;box-shadow:0 3px 6px rgba(0,0,0,.5);}
.th-potion-btn[data-slug="ngu_hoa_ngoc_lo_hoan"]{border-color:rgba(255,214,141,.95);}
.th-potion-btn img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
.th-potion-btn.is-empty img{filter:grayscale(.85) brightness(.55);}
.th-potion-cd{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(0,0,0,.78) var(--th-skill-cd-deg,0deg),transparent 0deg);pointer-events:none;display:none;}
.th-potion-btn.is-cooling .th-potion-cd{display:block;}
.th-potion-qty{position:absolute;right:-3px;bottom:-3px;min-width:18px;height:18px;padding:0 3px;box-sizing:border-box;border-radius:9px;background:rgba(10,10,10,.9);border:1px solid rgba(242,218,139,.7);color:#fff;font:800 11px/16px var(--font-body);text-align:center;text-shadow:0 1px 2px #000;pointer-events:none;}
@media (max-width:560px){.th-potion-dock{bottom:116px;gap:4px;}.th-potion-btn{width:34px;height:34px;}.th-potion-qty{min-width:15px;height:15px;font-size:10px;line-height:13px;}}
/* Huy hiệu hồi máu tạm (chưa có status_hot_v1.png): tam giác xanh + chữ HP xanh trên đầu nhân vật */
.th-fx-hp-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;font:900 10px/1 var(--font-body);color:#46e07a;text-shadow:0 0 3px #000,0 1px 1px #000;}
.th-fx-hp-fallback i{font-style:normal;font-size:11px;line-height:9px;}
/* Cài Đặt AUTO — tab "Hồi Phục" */
.th-auto-set-tabs button[data-auto-tab]{flex:1;}
.th-combat-auto-settings{max-height:80vh;overflow:auto;}
.th-potion-order,.th-potion-thr{display:flex;flex-direction:column;gap:3px;margin-top:8px;font-size:12px;}
.th-potion-order label,.th-potion-thr label{display:flex;align-items:center;gap:5px;cursor:pointer;}
.th-potion-thr input[type="number"]{width:62px;padding:1px 4px;border-radius:5px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.4);color:#ffe9b0;font:700 12px var(--font-body);}

/* Panel Gọi Quái thử nghiệm: dời sang trái khỏi cụm vòng thuốc/skill và kéo được bằng tiêu đề */
.th-test-summon .th-test-drag-handle{cursor:move;touch-action:none;user-select:none;}
@media (max-width:560px){.th-test-summon{right:50px;}}

/* Owner 2026-10-03: MÀN HÌNH DỌC — Thần Thú đứng XÉO PHÍA TRƯỚC nhân vật (hướng 4h–5h, lệch phải, không đứng thẳng dưới chân):
   so với bản "ngay dưới chân" thì DỜI SANG PHẢI 50% bề ngang chính nó (mép trái của Thần Thú chạm trục giữa nhân vật) và LÊN GẦN NHÂN VẬT 50% chiều cao chính nó
   (nhờ vậy cũng nhô khỏi bảng thông báo hệ thống ở đáy màn điện thoại). Màn ngang giữ nguyên đứng bên trái. */
@media (orientation:portrait){
  .th-combat-player .th-combat-pet{right:auto;left:50%;bottom:auto;top:calc(100% + 5px);transform:translate(-11%,calc(-50% - 11%));}   /* +15% gần nhân vật (2026-10-03): chéo lên-trái ≈ 15% bề ngang Thần Thú (~9px mỗi trục, ~13px theo đường chéo ở cỡ hiện tại), tính theo % kích thước chính nó để co giãn */
  .th-combat-player .th-combat-pet.is-casting{animation-name:th-pet-cast-portrait;}
}
@keyframes th-pet-cast-portrait{0%{transform:translate(-11%,calc(-50% - 11%)) scale(1);}30%{transform:translate(-11%,calc(-50% - 11% - 14px)) scale(1.08);filter:drop-shadow(0 0 14px rgba(255,230,140,.9));}100%{transform:translate(-11%,calc(-50% - 11%)) scale(1);}}


/* ===== Chia sẻ Trang Bị / Vật Phẩm / Bản Đồ vào chat (Owner 2026-10-06) ===== */
.th-share-view{position:fixed;inset:0;z-index:10060;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(2,6,10,.62);}
.th-share-view-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%;}
.th-equip-tooltip.th-share-view-card{position:static;display:block;pointer-events:auto;z-index:auto;max-height:calc(100dvh - 72px);}
.th-share-view-owner{font-size:12px;color:#f4f1e5;text-shadow:0 1px 3px rgba(0,0,0,.9);}

/* ===== Tổ Đội Bí Cảnh & Tu Luyện (migration 388) ===== */
.th-pr-card{width:min(520px,94vw);max-height:80vh;overflow:auto;text-align:left;}
.th-pr-card div{display:block;margin-top:0;}
.th-pr-card .th-pr-body{margin-top:10px;}
.th-pr-card .th-pr-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.th-pr-card .th-pr-close{display:flex;justify-content:flex-end;margin-top:12px;}
.th-pr-rule{font-size:12px;opacity:.85;margin:0 0 8px;}
.th-pr-count{margin:6px 0;font-weight:700;color:#ffe7a0;}
.th-pr-wait{margin:8px 0;color:#9fe3d0;font-size:13px;}
.th-pr-err{margin:8px 0;padding:6px 10px;border-radius:10px;background:rgba(120,24,24,.55);border:1px solid rgba(255,140,140,.6);color:#ffd9d9;font-size:13px;font-weight:700;}
.th-pr-row{display:flex !important;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;margin-top:4px !important;border:1px solid rgba(112,177,169,.3);border-radius:8px;background:rgba(0,0,0,.18);font-size:13px;}
.th-pr-row em{opacity:.7;font-style:normal;}
.th-pr-row b.is-ready{color:#7fe08a;}
.th-pr-friends{margin-top:8px;max-height:150px;overflow:auto;}
.th-pr-btn{padding:7px 12px;border:1px solid rgba(255,229,139,.8);border-radius:9px;background:linear-gradient(135deg,#2c4a56,#3b6a78);color:#f4f1e5;font:700 13px var(--font-body);cursor:pointer;}
.th-pr-btn.is-ok{background:linear-gradient(135deg,#9a7030,#d8b85b);color:#16130b;}
.th-pr-foot{margin-top:12px;padding-top:10px;border-top:1px solid rgba(112,177,169,.3);font-size:12px;}
.th-pr-helper em{opacity:.7;font-style:normal;}
.th-pr-badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:rgba(255,229,139,.18);border:1px solid rgba(255,229,139,.5);color:#ffe7a0;font-size:12px;}
.th-pr-ally{pointer-events:none;}
.th-pr-ally.is-ally-away{opacity:.55;}
.th-region-territory-party{margin-top:6px;padding:7px 12px;border:1px solid rgba(160,235,255,.8);border-radius:9px;background:linear-gradient(135deg,#2c6f86,#5ec0d8);color:#06202a;font:800 13px var(--font-body);cursor:pointer;}
.th-region-territory-party[hidden]{display:none;}
.th-pet-panel-actions{display:flex;gap:10px;justify-content:center;}
.th-pet-panel-actions .btn{min-width:120px;}

/* ===== combat kit (js/modules/tien-hiep-combat-kit.js) — dùng chung mọi màn đánh quái/PK ===== */
.th-combat-kit{position:absolute;inset:0;z-index:6;pointer-events:none;}
.th-combat-kit > *{pointer-events:auto;}
.th-combat-kit .th-combat-skills{pointer-events:none;}
.th-combat-kit .th-combat-skills > *{pointer-events:auto;}
/* Nút tròn Phi Kiếm: ngay cạnh (phía trên) nút Đánh Thường */
.th-combat-pk-btn{position:absolute;z-index:6;right:calc(clamp(6px,1.5vw,16px) + 132px);bottom:calc(16px + 46px + 10px + 46px + 10px);width:46px;height:46px;border-radius:50%;border:2px solid rgba(143,232,255,.85);background:rgba(15,25,35,.9);padding:0;cursor:pointer;box-shadow:0 3px 6px rgba(0,0,0,.5);overflow:hidden;}
.th-combat-pk-img{position:absolute;inset:3px;border-radius:50%;background:center/contain no-repeat;display:block;}
.th-combat-pk-cd{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(0,0,0,.78) var(--th-skill-cd-deg,0deg),transparent 0deg);pointer-events:none;display:none;}
.th-combat-pk-btn.is-cooling .th-combat-pk-cd{display:block;}
.th-combat-pk-sec{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 17px/1 inherit;color:#fff;text-shadow:0 1px 3px #000,0 0 4px #000;pointer-events:none;}
.th-combat-pk-btn.is-on{border-color:#ffd76a;box-shadow:0 0 0 2px rgba(255,215,106,.45),0 3px 6px rgba(0,0,0,.5);}
.th-combat-pk-btn.is-locked{cursor:not-allowed;border-color:rgba(120,130,140,.7);}
.th-combat-pk-btn.is-locked .th-combat-pk-img{filter:grayscale(1) brightness(.5);}
.th-combat-pk-btn.is-locked::after{content:'🔒';position:absolute;right:-1px;bottom:-1px;width:18px;height:18px;font-size:12px;line-height:18px;text-align:center;background:rgba(0,0,0,.65);border-radius:50%;}
/* Skill Thần Thú: đứng ngay trên nút Đánh Thường (vị trí cũ của nút Phi Kiếm); Phi Kiếm đi tiếp cung lên trên, vòng sang phải ôm góc phải-dưới như bộ skill nhân vật */
.th-combat-kit .th-combat-petskill-btn{right:calc(clamp(6px,1.5vw,16px) + 159px);bottom:calc(16px + 46px + 10px);}
@media (max-width:560px){.th-combat-pk-btn{right:calc(6px + 108px);bottom:calc(34px + 34px + 8px + 34px + 8px);width:34px;height:34px;}.th-combat-kit .th-combat-petskill-btn{right:calc(6px + 120px);bottom:calc(34px + 34px + 8px);width:34px;height:34px;}}
/* Combat kit: cụm thuốc 2 cột. Cột PHẢI (dưới lên): Cửu Chuyển > Ngũ Hoa > Kim Sáng Đại. Cột TRÁI: Kim Sáng Trung (ngang Đại) > Kim Sáng Tiểu (ngang Ngũ Hoa). */
.th-combat-kit .th-potion-dock{display:grid;grid-template-columns:auto auto;flex-direction:initial;gap:5px;justify-items:end;}
.th-combat-kit .th-potion-btn[data-slug="kim_sang_duoc_trung"]{grid-column:1;grid-row:1;}
.th-combat-kit .th-potion-btn[data-slug="kim_sang_duoc_dai"]{grid-column:2;grid-row:1;}
.th-combat-kit .th-potion-btn[data-slug="kim_sang_duoc_tieu"]{grid-column:1;grid-row:2;}
.th-combat-kit .th-potion-btn[data-slug="ngu_hoa_ngoc_lo_hoan"]{grid-column:2;grid-row:2;}
.th-combat-kit .th-potion-btn[data-slug="cuu_chuyen_hoan_hon_don"]{grid-column:2;grid-row:3;}

/* Hiệu ứng Skill dùng chung (kit): nút ✨ trong .th-combat-kit; chế độ "Tắt hoàn toàn" ẩn số nổi/huy hiệu/VFX còn sót; chế độ chỉ-nút-✨ cho người Trợ Chiến/xem. */
.th-combat-kit .th-combat-fx-toggle.is-off{background:rgba(120,30,20,.92);border-color:#ff9c82;}
.th-skillfx-off .th-vfx,.th-skillfx-off .th-combat-dmg-float,.th-skillfx-off .th-fxstack,.th-skillfx-off .th-fx-pop,.th-skillfx-off .th-fx-badges{display:none !important;}
.th-combat-kit.is-fx-only > *:not(.th-combat-fx-toggle):not(.th-combat-fx-menu){display:none !important;}

/* Chế độ "NV Di Chuyển" (chỉ nút Phi Kiếm): đứng đúng vị trí + cỡ skill cấp 10 (nút lớn sát góc phải-dưới). */
.th-combat-kit.is-pk-only .th-combat-pk-btn{right:clamp(6px,1.5vw,16px);bottom:16px;width:64px;height:64px;border-color:rgba(255,214,141,.95);}
@media (max-width:560px){.th-combat-kit.is-pk-only .th-combat-pk-btn{right:6px;bottom:34px;width:48px;height:48px;}}

/* Owner 2026-10-14: Tên + Máu (nhân vật, Thần Thú, quái, Thủ Lĩnh, Boss...) dời LÊN ĐẦU, không hiện dưới chân. Actor là flex-column nên chỉ cần đổi thứ tự;
   chân nhân vật/quái giờ nằm đúng điểm neo (trước đây khối tên/máu dưới chân làm chân lệch lên). Thanh Tu Vi Thần Thú cũng đặt trên đầu thú. */
.th-combat-actor .th-wx-info{order:-1;}
.th-combat-actor .th-pet-expbar,.th-combat-player .th-pet-expbar{top:auto;bottom:100%;margin-top:0;margin-bottom:2px;}

/* Lệnh Bài (Owner 2026-10-14): nút icon cạnh "Vào Bí Cảnh" + nút trong menu Tu Luyện */
.th-region-territory-lb{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:2px 8px 2px 4px;border:1px solid rgba(212,175,55,.8);border-radius:999px;background:rgba(8,26,30,.82);color:#ffe9a8;cursor:pointer;vertical-align:middle}
.th-region-territory-lb img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.th-region-territory-lb b{font-size:12px}
.th-region-territory-lb:hover{background:rgba(212,175,55,.22)}
.th-train-menu-lb{display:flex;align-items:center;justify-content:center;gap:6px}
.th-train-menu-lb img{width:22px;height:22px;object-fit:contain}
/* Thánh Hỏa Lệnh — popup chọn Môn Phái (Owner 2026-10-14) */
.th-holyflame-panel{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;background:rgba(0,0,0,.55)}
.th-holyflame-card{width:min(420px,90vw);padding:16px 18px;border:2px solid #d4af37;border-radius:14px;background:linear-gradient(#2a1208,#140a06);color:#f5e7b8;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.7)}
.th-holyflame-ic{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(255,120,30,.55))}
.th-holyflame-card h3{margin:4px 0 6px;color:#ffd27a}
.th-holyflame-card p{margin:4px 0 10px;font-size:13px;line-height:1.4}
.th-holyflame-sects{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.th-holyflame-sect{cursor:pointer;border:1px solid rgba(212,175,55,.7);background:rgba(0,0,0,.35);color:#ffe9a8;border-radius:8px;padding:9px 6px;font-weight:700}
.th-holyflame-sect.is-mine{box-shadow:0 0 0 2px rgba(255,170,60,.7)}
.th-holyflame-sect:hover{background:rgba(212,175,55,.22)}
.th-holyflame-msg{min-height:18px;margin-top:8px;font-size:12px}
.th-holyflame-msg.is-err{color:#ff9d92}
.th-holyflame-actions{margin-top:8px}
.th-holyflame-cancel{cursor:pointer;border:1px solid rgba(212,175,55,.5);background:transparent;color:#d8c58b;border-radius:8px;padding:6px 16px}

/* Tên nhân vật mình trên thanh Máu (Bí Cảnh / Tu Luyện / Vượt Tháp) — Owner 2026-10-14 */
.th-territory-scene .th-combat-monster-name.th-boss-name-self{color:#fff1cf}

/* Ống năng lượng TRÒN bao icon Phi Kiếm (Owner 2026-10-15) + thanh năng lượng trong tooltip */
.th-pke-ring{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.th-pke-ring circle{fill:none;stroke-width:8}
.th-pke-ring .th-pke-bg{stroke:rgba(0,0,0,.6)}
.th-pke-ring .th-pke-fg{stroke:#5fe3ff;stroke-linecap:butt;filter:drop-shadow(0 0 3px rgba(95,227,255,.8));transition:stroke .3s}
.th-pke-ring .th-pke-min{stroke:#fff;stroke-width:12;opacity:.9}
.th-pk-auto{position:absolute;left:50%;top:1px;transform:translateX(-50%);z-index:3;min-width:22px;height:15px;padding:0 3px;box-sizing:border-box;border-radius:8px;font-size:9px;line-height:13px;text-align:center;font-weight:700;color:#cfd8dc;background:rgba(20,26,32,.85);border:1px solid rgba(160,170,180,.7);cursor:pointer;pointer-events:auto;}
.th-pk-auto.is-on{color:#2a1c00;background:#ffd76a;border-color:#fff1b8;box-shadow:0 0 6px rgba(255,215,106,.8);}
.th-combat-pk-btn.is-pke-low .th-pke-fg{stroke:#ff9d4a;filter:drop-shadow(0 0 3px rgba(255,157,74,.8))}
.th-combat-pk-btn.is-pke-low .th-combat-pk-img{filter:grayscale(.55) brightness(.7)}
.th-combat-pk-btn.is-pke-draining .th-pke-fg{animation:thPkePulse 1.2s ease-in-out infinite}
@keyframes thPkePulse{50%{opacity:.65}}
.th-equip-tooltip-energy{margin:6px 0;font-size:12px;color:#bfeaff}
.th-equip-tooltip-energy i{display:block;margin-top:3px;height:7px;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(143,232,255,.5);overflow:hidden}
.th-equip-tooltip-energy u{display:block;height:100%;text-decoration:none;background:linear-gradient(90deg,#2aa7d6,#7ff0ff)}

/* ---------- Phân trang BXH: 2 nút icon pill nhỏ gọn + nhãn khoảng hạng ---------- */
.th-lb-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;}
.th-lb-pg-btn{
  width:32px;height:26px;padding:0;border:1px solid var(--border-strong);border-radius:999px;
  background:var(--surface-2,transparent);color:var(--accent-2);font-size:20px;line-height:22px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 1px 2px rgba(4,7,10,.7));
}
.th-lb-pg-btn:hover:not(:disabled){border-color:var(--accent-2);}
.th-lb-pg-btn:disabled{opacity:.35;cursor:default;}
.th-lb-pg-label{min-width:56px;text-align:center;font-size:12px;color:var(--text-muted);}
.th-lb-me{margin-top:8px;text-align:center;font-size:12px;color:var(--accent-2);text-shadow:0 1px 2px rgba(4,7,10,.9);}

/* Ủy Thác Treo Máy: icon trên đầu bóng tài khoản được hệ thống cho treo ở Rừng Ẩn Tu / Thảo Nguyên */
.th-wx-info>img.th-lc-uythac{width:18px!important;height:18px!important;max-width:18px!important;flex:0 0 auto;pointer-events:none;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));}

/* Tạo Nhân Vật (Owner 2026-10-20): lỗi đủ lớn/tương phản để người chơi KHÔNG bỏ sót + gợi ý tên khi trùng */
.th-charcreate-scene #thCharNameError:not(:empty){display:block;margin:8px auto 0;max-width:min(92vw,520px);padding:7px 14px;border-radius:12px;font-size:14px;font-weight:700;line-height:1.35;text-align:center;color:#fff1ee;background:rgba(110,22,16,.88);border:1px solid rgba(255,150,130,.65);text-shadow:none;box-shadow:0 2px 10px rgba(0,0,0,.45);}
.th-charcreate-scene .th-charcreate-suggest{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin:8px auto 0;max-width:min(92vw,520px);font-size:13px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9);}
.th-charcreate-scene .th-charcreate-suggest button{padding:4px 12px;border-radius:999px;border:1px solid rgba(255,215,106,.85);background:rgba(36,28,10,.85);color:#ffe9a8;font-size:13px;font-weight:700;cursor:pointer;}
.th-charcreate-scene .th-charcreate-suggest button:hover{background:rgba(90,66,12,.95);}

/* DH3 đợt B: dòng Danh Hiệu phía trên tên trong cảnh chiến đấu (nổi trần + đổ bóng, không khung) */
.th-title-line{font-weight:700;line-height:1.1;text-shadow:0 1px 2px #000,0 0 3px #000;}
.th-title-line[hidden]{display:none;}
.th-title-line img{height:11px;width:auto;vertical-align:-1px;margin-right:2px;}
.th-wx-text .th-title-line{font-size:10px;white-space:nowrap;pointer-events:none;}