/* =============================================================================
   TIEN HIEP — HERO SHELL  (JOB_TH1_06 — HUD DESKTOP)
   Nguồn: Meta-Ecosystem/06.00 v2.7 · PQ-62 (ghép mảnh neo góc) · PQ-63 (icon sáng)
   Đã nghiệm thu qua _tien_hiep_test.php — đây là bản CHUYỂN VÀO SẢN PHẨM,
   chỉ đổi position:fixed (toàn màn hình) → position:absolute (trong khung
   .hero-tienhiep) để hero vẫn cuộn như một section bình thường, không
   chiếm dụng vĩnh viễn viewport như bản thử.

   ⚠️ Ẩn/hiện theo theme nằm ở CUỐI file — mặc định ẩn, chỉ hiện khi
   [data-theme="tien_hiep"] để không đụng tới theme kid/pro (DoD 06.00 §7.3).
   ============================================================================= */

.hero-tienhiep{
  position:relative;
  height:100vh;
  min-height:560px;
  max-height:980px;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
}

/* Owner 2026-09-07: "chỉ Click, không select text" — TOÀN BỘ giao diện
   Tiên Hiệp (kể cả popup, vì data-theme nằm ở <html>, mọi thứ trong trang
   đều thừa hưởng qua inheritance). Tránh bôi chọn nhầm chữ khi kéo/vuốt
   (carousel Avatar, kéo Rương Chứa Đồ, vuốt tab...). Trừ lại Ô NHẬP LIỆU
   THẬT (đặt tên nhân vật, chat...) vẫn cần chọn/copy chữ bình thường —
   không được cấm user-select ở đó. */
[data-theme="tien_hiep"]{
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
[data-theme="tien_hiep"] input,
[data-theme="tien_hiep"] textarea,
[data-theme="tien_hiep"] [contenteditable]{
  -webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;
  -webkit-touch-callout:default;
}

/* ---------- Header trôi nổi trên tranh nền (Owner 2026-09-05) ----------
   .site-header (style.css) vốn có nền tối bán trong suốt + blur, tạo một
   thanh đen ngang phía trên tranh — xoá nền đó CHỈ CHO tien_hiep, rồi kéo
   hero lên ĐÈ RA SAU header bằng margin-top âm, để icon/logo nổi thẳng
   trên tranh — cùng triết lý PQ-57 (icon nổi trên nền, không khối đặc). */
[data-theme="tien_hiep"] .site-header{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:0;
  box-shadow:none;
  /* GĐ2 (Owner 2026-09-07): "rê chuột vào icon Thư/Cài Đặt không tỏa sáng,
     phải dời xuống dưới tên icon mới click được" — Header tuy trong suốt
     nhưng vẫn còn `position:sticky;z-index:50` (style.css), CAO HƠN
     `.hud`(z-index:10) — dải cao 68px (--header-h) phía trên màn vẫn chắn
     hết mọi cú click/hover xuống bên dưới dù không còn gì hiển thị ở đó.
     Tắt hẳn khả năng bắt sự kiện của Header cho theme này — bật lại RIÊNG
     cho .avatar-menu-container (khung neo #avatarDropdown, xem bên dưới)
     vì dropdown tài khoản (mở từ icon "Cài Đặt") vẫn cần nhận click bình
     thường. */
  pointer-events:none;
}
[data-theme="tien_hiep"] .avatar-menu-container{
  pointer-events:auto;
}
/* Header trong suốt nhường click cho HUD bên dưới, nhưng khách vẫn phải mở
   trực tiếp được hộp Đăng nhập/Đăng ký bằng hai nút Header của chính họ. */
[data-theme="tien_hiep"] #authTrigger{
  pointer-events:auto;
}
/* Owner 2026-09-10: "Loa Báo chỉ mở được popup nhưng bấm 'Đã đọc tất cả'/
   'Xem tất cả' bên trong không có tác dụng" — CÙNG GỐC với lý do
   .avatar-menu-container phải bật lại pointer-events ở trên: mở dropdown
   qua bell.click() (JS gọi thẳng, bỏ qua pointer-events) vẫn hoạt động,
   nhưng MỌI cú bấm CHUỘT THẬT sau đó vào bên trong dropdown (đã mở) bị
   .site-header chặn vì thừa kế pointer-events:none, không có ngoại lệ như
   avatar-menu-container. Bật lại cho #notifBellContainer (Loa Báo) và
   #headerLocalChips (Ngân Khố — cùng cấu trúc, cùng lỗi, tuy Owner chưa báo
   nhưng vá luôn cho nhất quán, tránh lặp lại đúng bug này lần nữa). */
[data-theme="tien_hiep"] #notifBellContainer,
[data-theme="tien_hiep"] #headerLocalChips{
  pointer-events:auto;
}
/* Owner 2026-09-10: "xoá vùng đen làm mờ xung quanh popup, không che nội
   dung bên dưới" — Chợ/Cửa Hàng/Túi Đồ (`.modal-overlay`, style.css, dùng
   chung mọi theme nên chỉ tắt riêng cho tien_hiep) và Bang Hội
   (`.village-modal-overlay`, village.css) đều có lớp nền tối + blur toàn
   màn hình phía sau modal — bỏ hẳn cho theme này, chỉ giữ modal card tự nó
   (đã có nền/viền riêng, không cần lớp phủ ngoài). KHÔNG đụng gì tới
   kid/pro. */
[data-theme="tien_hiep"] .modal-overlay,
[data-theme="tien_hiep"] .village-modal-overlay{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
[data-theme="tien_hiep"] .logo-mark{
  filter:drop-shadow(0 1px 3px rgba(4,7,10,.95)) drop-shadow(0 2px 10px rgba(4,7,10,.75));
}
[data-theme="tien_hiep"] .logo-text b,
[data-theme="tien_hiep"] .logo-text span{
  text-shadow:0 1px 2px rgba(4,7,10,.95), 0 0 8px rgba(4,7,10,.8);
}
/* Owner 2026-09-05: khung avatar dời lên ngang hàng header, chiếm ĐÚNG góc
   trên-trái mà logo site vẫn đứng — hai thứ chồng lên nhau. Trong app/game
   PC không có chỗ nào vừa để logo web vừa để chân dung nhân vật cùng một
   góc — ẩn hẳn logo web CHO RIÊNG theme tien_hiep (bất kể công tắc "Hiển thị
   logo trên Header" ở admin, công tắc đó vẫn áp dụng đúng cho kid/pro).
   Khung avatar (#hudTopLeft, tien-hiep-hero.css bên dưới) THAY THẾ logo làm
   điểm nhận diện góc trên-trái khi ở Cõi Tiên Hiệp. */
[data-theme="tien_hiep"] #siteLogoLink{display:none;}

/* JOB_TH1_09 DoD: "vào trang game, HUD thu lại, không khung trong khung".
   Trang game (snake.php, tetris.php…) mở trong <iframe> của popup
   (JOB_TH1_10) share CHUNG localStorage nên cũng nhận data-theme="tien_hiep"
   — nếu không chặn, .site-header nổi trong suốt của CHÍNH TRANG GAME đó
   sẽ đè lên đúng chỗ header/nút đóng (X) của popup bên ngoài, thành 2 lớp
   khung chồng nhau. Ẩn hẳn site-header khi ở trang game (body.clg-game-page,
   gắn bởi header.php dựa vào hằng CLG_GAME_ENTRY) — popup bên ngoài đã có
   sẵn nút đóng riêng, trang game không cần header của nó nữa. */
[data-theme="tien_hiep"] body.clg-game-page .site-header{display:none;}

/* ---------- JOB_TH1_10 đợt 2-5 (06.00 Chương XII): ẩn widget/nút gốc đã
   gắn vào icon HUD — tránh 2 lối vào cùng 1 tính năng, đỡ rối mắt.
   KHÔNG hide nguyên khối chứa panel/modal đang mở (party-widget và
   #headerLocalChips vừa là NÚT vừa là NƠI HIỂN THỊ khi mở), chỉ ẩn phần
   là "nút bấm/tab nổi" ở trạng thái ĐÓNG. ---------- */
/* #openShopBtn có style="display:inline-flex" NGAY TRONG markup (header.php)
   — inline style luôn thắng CSS ngoài dù chọn lọc gì, PHẢI thêm !important
   mới ẩn được (Owner 2026-09-07: icon vẫn còn hiện dù đã gắn vào dock). */
[data-theme="tien_hiep"] #openShopBtn{display:none!important;}  /* Chợ → Cửa Hàng */
[data-theme="tien_hiep"] #villageLauncher{display:none;}     /* Bang Hội → Xóm Làng */
[data-theme="tien_hiep"] #inventoryFabBtn{display:none;}     /* Túi Đồ → Rương Chứa Đồ */
[data-theme="tien_hiep"] #chatFab{display:none;}              /* Trò Chuyện → Chat */
/* Tổ Đội: .party-widget VỪA LÀ tab nổi khi đóng VỪA LÀ khung panel khi mở
   (cùng 1 phần tử, chỉ đổi class .is-open) — chỉ ẩn lúc ĐÓNG, panel khi mở
   vẫn hiện bình thường. */
[data-theme="tien_hiep"] .party-widget:not(.is-open){display:none;}
/* Ngân Khố: #localCurrencyMegaChipTrigger là nút bấm; dropdown kết quả là
   phần tử RIÊNG (#localCurrencyMegaChipDropdown) nằm cùng cha — ẩn nút
   không ảnh hưởng dropdown khi Engine.openTienHiepTreasury() bấm hộ. */
[data-theme="tien_hiep"] #localCurrencyMegaChipTrigger{display:none;}
/* Loa Báo: tương tự, chỉ ẩn nút chuông, giữ nguyên dropdown thông báo.
   .notif-bell-btn cũng có style="display:flex" render thẳng trong JS
   (core.js) — cùng lý do trên, bắt buộc !important. */
[data-theme="tien_hiep"] .notif-bell-btn{display:none!important;}
/* Chat: #chatPanel vốn neo bottom:var(--chat-tab-height) (48px) để CHỪA CHỖ
   cho #chatFab (tab nổi) luôn lộ ra bên dưới panel — nay #chatFab đã ẩn hẳn
   (Trò Chuyện đã có icon riêng) nên khoảng chừa đó thành khoảng hở thừa.
   Ép panel bám sát đáy màn hình (Owner 2026-09-05). */
[data-theme="tien_hiep"] #chatPanel{bottom:0;}
/* Tổ Đội: ẩn thanh chọn tab Tổ Đội/Bạn Bè khi mở từ icon tiên hiệp — hệ
   tiên hiệp chưa có icon Bạn Bè riêng nên chỉ cần đúng 1 panel Tổ Đội,
   không cần công tắc chuyển tab (Owner 2026-09-05). */
[data-theme="tien_hiep"] .party-widget.th-party-solo .party-widget-nav{display:none;}
/* GĐ2 (Owner 2026-09-07): "thanh header dọn sạch hoàn toàn, chính thức là
   thanh vô hình" — 3 việc cuối hấp thụ nốt phần header còn sót: Năng Lượng
   dời vào khung Avatar (3 thanh HP/EXP/Năng Lượng); Ngôn Ngữ dời vào chung
   cụm menu Cài Đặt; Cài Đặt (icon HUD) giờ MỞ THẲNG dropdown tài khoản
   (#avatarDropdown) vốn có sẵn — ẩn nút bấm cũ (.energy-widget/.lang-switch/
   .user-pill) nhưng KHÔNG ẩn .avatar-menu-container (khung neo vị trí của
   #avatarDropdown — ẩn nó thì dropdown mất luôn chỗ neo, không hiện được
   dù bị mở bằng JS). */
/* .energy-widget có style="display:flex" NGAY TRONG markup (header.php) —
   cùng lý do #openShopBtn/.notif-bell-btn ở trên, PHẢI !important. */
[data-theme="tien_hiep"] .energy-widget{display:none!important;}
[data-theme="tien_hiep"] .lang-switch{display:none;}
[data-theme="tien_hiep"] .user-pill{visibility:hidden;width:0;height:0;padding:0;overflow:hidden;}
[data-theme="tien_hiep"] .hero-tienhiep{
  /* Kéo hero lên đúng bằng chiều cao header (header vốn chiếm chỗ trong
     flow dù transparent) — height GIỮ NGUYÊN 100vh (không cộng thêm),
     để đáy hero (lan can/dock) khớp đúng đáy viewport như trước khi có
     header đè lên, không tràn quá màn hình. */
  margin-top:calc(-1 * var(--header-h));
}
[data-theme="tien_hiep"] .hero-tienhiep .hud{
  /* Bù lại khoảng header đè lên — icon 4 cạnh không bị chui dưới header */
  top:var(--header-h);
}

/* ---------- Tranh nền 4 lớp (PQ-62: ghép mảnh neo góc) ---------- */
.hero-tienhiep .stage{position:absolute;inset:0;overflow:hidden;z-index:0;}
.hero-tienhiep .stage img{position:absolute;left:0;width:100%;display:block;}

/* Lớp 1 — TRỜI: dải chuyển màu, kéo giãn thoải mái */
.hero-tienhiep .stage .l1{top:0;height:100%;object-fit:fill;}

/* Lớp 3 — VÁCH ĐÁ: 1 ảnh cắt đôi, tranh vốn đã taper tự nhiên ở mốc 50% */
.hero-tienhiep .stage .lg{bottom:0;top:auto;height:100%;width:auto;max-width:none;}
.hero-tienhiep .stage .lg-l{left:0;  right:auto; clip-path:inset(0 50% 0 0);}
.hero-tienhiep .stage .lg-r{right:0; left:auto;  clip-path:inset(0 0 0 50%);}

/* Lớp 2 — NÚI XA: 2 tranh ĐỘC LẬP, mỗi tranh tự nhạt về 0 — không clip-path */
.hero-tienhiep .stage .l2{bottom:0;top:auto;height:100%;width:auto;max-width:none;clip-path:none;}
.hero-tienhiep .stage .l2-l{left:0;right:auto;}
.hero-tienhiep .stage .l2-r{right:0;left:auto;}

/* Owner 2026-09-08: "lấy cảm giác THỞ áp dụng cho lớp 2 và 3 theo phương
   NGANG, để bối cảnh có cảm giác chuyển động giữa các lớp — lớp 1 (trời) và
   lớp 4 (hành lang) đứng yên." Cùng tinh thần nhẹ/chậm như hiệu ứng thở của
   Nhân Vật: chỉ translateX (không đổi kích thước), biên độ rất nhỏ, đủ tạo
   cảm giác gió/độ sâu (parallax) chứ không phải cuộn cảnh. `.stage` đã có
   sẵn `overflow:hidden` nên không lo lộ mép khi lắc nhẹ. Lớp 2 (xa hơn) đi
   CHẬM + NGẮN hơn lớp 3 (gần hơn, giữa lớp 2 và lớp 4) — 2 lớp lắc NGƯỢC
   chiều nhau để cảm giác "giữa các lớp" (relative motion) rõ hơn là cả nền
   trôi cùng khối. */
.hero-tienhiep .stage .l2{animation:thStageLayer2Sway 30s ease-in-out infinite;will-change:transform;}
/* Owner 2026-09-08 (sửa lại): Lớp 2 đổi từ lắc NGANG sang LÊN-XUỐNG (giữ
   nguyên Lớp 3 vẫn lắc ngang) — 2 lớp giờ chuyển động khác TRỤC nhau, càng
   rõ cảm giác "chuyển động giữa các lớp" hơn là chỉ khác biên độ/chu kỳ. */
/* Owner 2026-09-08 (sửa lần 2): "tăng biên độ lên tận 100px — cạnh dưới có
   LAN CAN (lớp 4) che chắn nên không sợ hở chân, muốn cảm giác hùng vĩ núi
   từ dưới mọc lên." Chỉ đẩy LÊN (không đẩy xuống — đẩy xuống mới hở cạnh
   dưới ra khỏi vùng lan can che; đẩy lên chỉ lộ thêm phía TRÊN, vốn đã được
   `.stage{overflow:hidden}` cắt an toàn, không hở gì). */
@keyframes thStageLayer2Sway{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-100px);}
}
/* Owner 2026-09-08 (sửa lỗi hở cạnh): `.lg-l` neo `left:0`, `.lg-r` neo
   `right:0` — cùng translateX 1 chiều như bản trước sẽ kéo 1 trong 2 đứa RA
   XA mép neo của chính nó (lộ khe hở ở đúng mép màn hình đó). Đổi sang MỖI
   BÊN một keyframe riêng, chỉ di chuyển vào phía "an toàn" — `.lg-l` chỉ lùi
   thêm về bên TRÁI (tràn ra ngoài mép trái, `.stage` đã overflow:hidden nên
   không sao) hoặc về đúng 0 (khớp mép, không hở); `.lg-r` chỉ tiến thêm về
   bên PHẢI hoặc về đúng 0. Không bao giờ có chiều nào kéo 1 bên RA XA mép
   của chính nó nữa — 2 bên lắc "phình ra/co vào" đối xứng qua đường nối
   giữa (thay vì cả khối trôi 1 hướng), vẫn giữ đúng cảm giác chuyển động. */
.hero-tienhiep .stage .lg-l{animation:thStageLayer3SwayL 11s ease-in-out infinite;will-change:transform;}
.hero-tienhiep .stage .lg-r{animation:thStageLayer3SwayR 11s ease-in-out infinite;will-change:transform;}
@keyframes thStageLayer3SwayL{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(-6px);}
}
@keyframes thStageLayer3SwayR{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(6px);}
}

/* Lớp 4 — CẬN CẢNH: 3 mảnh neo góc độc lập, giữ nguyên tỉ lệ gốc */
/* Owner 2026-09-08: đèn lồng đu đưa nhẹ theo gió — kết hợp NGANG + DỌC
   (không chỉ 1 trục như lớp 2/3), quỹ đạo hình oval nhỏ qua 4 mốc thay vì
   chỉ 2 mốc đối xứng, giống cảm giác lồng đèn thật treo đung đưa. Biên độ
   rất nhỏ, cùng tinh thần nhẹ/chậm đã chốt — KHÔNG xoay (chỉ translate). */
/* Owner 2026-09-08 (sửa lại): góc trên-phải cũ bị icon "Cài Đặt" (#hudTopRight,
   z-index:10 của .hud) che khuất — lồng đèn chỉ z-index:1 nên luôn nằm dưới.
   Dời sang neo BÊN PHẢI khối Avatar (#hudTopLeft: left:14px, width:216px →
   mép phải 230px) thay vì góc phải màn hình — đổi mỏ neo từ `right` sang
   `left`.
   Owner 2026-09-08 (sửa lần 2): `top` mượn công thức bù trừ header-h của
   #hudTopLeft (dùng cho phần tử NẰM TRONG .hud, vốn bị .hud đẩy xuống
   top:var(--header-h) nên cần bù ngược) — nhưng lồng đèn là con trực tiếp
   của .hero-tienhiep (KHÔNG nằm trong .hud), không dính offset đó, nên công
   thức bù trừ đẩy nó lên cao quá mức. Trả về `top:0` — neo THẲNG vào cạnh
   trên của .hero-tienhiep (chính là cạnh trên màn hình, .hero-tienhiep luôn
   cao 100vh) — tự động theo đúng mọi kích thước màn hình, không cần tính lại. */
/* Owner 2026-09-08 (sửa lần 3): "bám sát khối Avatar" — rút khoảng cách từ
   mép phải Avatar (230px) xuống còn 6px đệm (236px, trước là 246px = 16px).
   "Lật ảnh theo chiều ngang, dây treo hướng qua trái" — ảnh gốc vẽ cho góc
   PHẢI màn hình (dây/móc treo nằm bên phải khung, thân đèn xoã bên trái)
   nên khi dời sang cạnh TRÁI của Avatar, móc treo trỏ ngược ra khoảng
   trống bên phải, vô lý — scaleX(-1) lật ngang để móc treo quay vào phía
   Avatar (bên trái). Phải bake scaleX(-1) vào TỪNG mốc keyframe (không khai
   riêng trên .l4-lantern) vì thuộc tính animation chiếm trọn quyền điều
   khiển transform lúc đang chạy, transform khai ngoài keyframes sẽ bị bỏ
   qua hoàn toàn. */
/* Owner 2026-09-08 (sửa lần 4): "cạnh trên bị hở khi di chuyển xuống — neo
   lại hoặc trừ hao." .hero-tienhiep không có overflow:hidden bao ngoài
   .l4-lantern (khác .stage của lớp 2/3) nên mốc 50% (translateY +3px, đi
   XUỐNG) kéo mép trên rời khỏi top:0, hở ra khoảng trống phía trên nó. "Trừ
   hao": nhích sẵn `top` lên ÂM đúng bằng biên độ xuống tối đa (3px) — mép
   trên lúc "xuống" tối đa vừa đúng chạm top:0 thật (-3px + 3px = 0), không
   bao giờ hở; lúc "lên" (âm) chỉ càng an toàn hơn (ẩn khuất phía trên). */
.hero-tienhiep .l4-lantern{position:absolute;top:-3px;left:236px;height:20vh;width:auto;
                            z-index:1;pointer-events:none;
                            animation:thLanternSway 8s ease-in-out infinite;will-change:transform;}
.hero-tienhiep .th-android-apk-lantern{position:absolute;top:-3px;left:calc(100% + 6px);height:calc(20vh * var(--apk-lantern-scale,1));width:auto;
                                       z-index:11;display:none;will-change:transform;
                                       animation:thApkLanternSway 8s ease-in-out infinite;}
.hero-tienhiep .th-android-apk-lantern img{display:block;height:100%;width:auto;max-width:none;}
.hero-tienhiep .th-android-apk-lantern:hover,.hero-tienhiep .th-android-apk-lantern:focus-visible{filter:brightness(1.14) drop-shadow(0 0 8px rgba(255,208,84,.82));outline:none;}
.hero-tienhiep.is-char-home:not(.is-equip-view) .th-android-apk-lantern{display:block;}
/* Owner 2026-10-03: lồng đèn APK CHỈ ở Sảnh Chính — mọi Scene (Bí Cảnh, Boss, Tu Luyện, Bản Đồ, Trang Bị…) đều ẩn. */
body.th-scene-active .hero-tienhiep .th-android-apk-lantern{display:none !important;}
@keyframes thLanternSway{
  0%,100%{transform:scaleX(-1) translate(0,0);}
  25%{transform:scaleX(-1) translate(3px,-2px);}
  50%{transform:scaleX(-1) translate(0,3px);}
  75%{transform:scaleX(-1) translate(-3px,-1px);}
}
@keyframes thApkLanternSway{
  0%,100%{transform:translate(0,0);}
  25%{transform:translate(3px,-2px);}
  50%{transform:translate(0,3px);}
  75%{transform:translate(-3px,-1px);}
}
.hero-tienhiep .l4-roof{position:absolute;bottom:0;right:0;height:24vh;width:auto;
                         z-index:1;pointer-events:none;}
.hero-tienhiep .l4-railing{position:absolute;left:0;right:0;bottom:0;height:15vh;
                            z-index:1;pointer-events:none;
                            background-repeat:repeat-x;
                            background-position:left bottom;
                            background-size:auto 100%;}

/* ---------- Giao diện chính SAU KHI có nhân vật (Owner: PQ-55, PQ-68) —
   thay bảng chào "Thế Giới Tiên Hiệp" bằng nhân vật đứng trên sân đá. Ẩn
   mặc định, chỉ hiện khi .hero-tienhiep có .is-char-home.
   Owner 2026-09-06: "sân đá thử lùi ra sau ảnh Lan Can cho thực hơn" — 2 ảnh
   KHÔNG còn chung 1 khung bọc (khác 2026-09-05) vì cần z-index KHÁC NHAU so
   với .l4-railing (nằm giữa 2 lớp đó trong DOM): sân đá vẽ TRƯỚC lan can
   (z-index 0, ở xa hơn), nhân vật vẽ SAU lan can (z-index 1, ở gần hơn/trên
   cùng) — không bị cắt ngang người dù đứng sau sân. Dùng biến --ch-h để 2
   ảnh luôn quy về cùng 1 khung chiều cao tham chiếu dù không còn lồng nhau. */
.hero-tienhiep{--ch-h:56vh;--khoiA-shift-x:0px;}
/* Owner 2026-09-07 (đợt 4): "Khối A vẫn đang ở giữa trang nên Rương Chứa Đồ
   bị chồng lên" — dời cả cụm Khối A (nhân vật/sân đá/10 ô trang bị/vũ khí-
   thú cưỡi bay/thanh tab) sang TRÁI một khoảng cố định khi vào màn Nhân Vật,
   nhường hẳn nửa phải cho Khối B rộng rãi hơn. Dùng 1 biến `--khoiA-shift-x`
   áp CHUNG cho mọi phần tử của Khối A (cộng thêm vào transform/left sẵn có
   của từng phần tử, không đổi % gốc) — chỉnh 1 chỗ là dời đồng bộ cả cụm.
   CHỈ áp cho desktop/tablet — mobile xếp CHỒNG DỌC (Khối A trên/Khối B
   dưới) nên không cần dời ngang, xem override trong tien-hiep-mobile.css. */
.hero-tienhiep.is-equip-view{--khoiA-shift-x:-120px;}
.hero-tienhiep .char-home-platform,
.hero-tienhiep .char-home-portrait{display:none;pointer-events:none;}
.hero-tienhiep.is-char-home .char-home-portrait{display:block;}
.hero-tienhiep.is-char-home .panel{display:none;}
/* Owner 2026-09-09: bệ đá nổi (`char-home-platform`) từng bị xoá HẲN vì
   tưởng chỉ dùng ở Trang Bị (mỗi phái nên có mặt sân riêng, không hợp bệ đá
   xanh ngọc dùng chung — PROMPT_DEMO_18) — SAI, đây còn là mặt sân DUY NHẤT
   cho Nhân Vật đứng ở SẢNH CHÍNH mặc định (`is-char-home` không kèm
   `is-equip-view`, stage 4 lớp Sảnh Chính chỉ có mây/núi không có mặt đất
   riêng — xoá mất thì nhân vật "đứng trơ trọi trên mây"). Khôi phục, nhưng
   CHỈ hiện khi KHÔNG ở Trang Bị (`:not(.is-equip-view)`) — Trang Bị vẫn ẩn
   như ý định ban đầu, chờ 5 ảnh nền riêng theo phái (PROMPT_DEMO_18). */
.hero-tienhiep.is-char-home:not(.is-equip-view) .char-home-platform{display:block;}
.hero-tienhiep .char-home-platform{
  position:absolute;left:50%;bottom:50px;
  transform:translateX(calc(-50% + var(--khoiA-shift-x)));
  height:var(--ch-h);max-height:620px;width:auto;max-width:none;z-index:0;
}
/* Owner 2026-09-08: "dời toàn bộ cụm: Sân đá, bảng tên, nhân vật lên cao
   hơn 50px" — cộng thêm +50px vào bottom gốc của portrait (và th-char-shadow,
   luôn đi kèm chân nhân vật, không thì bóng bị bỏ lại phía sau khi người dời
   lên). Bảng tên tính riêng bên dưới (đã hạ 20px trước khi cộng +50px chung
   cụm). */
.hero-tienhiep .char-home-portrait{
  position:absolute;left:50%;z-index:2;
  /* Owner 2026-09-15: nâng z-index (1→2) để Nhân Vật LUÔN nằm TRÊN ảnh Thần
     Thú bay (.th-equip-mount-float, z-index:1) khi 2 lớp chồng nhau — trước
     đó cùng z-index:1 nên thắng-thua tính theo thứ tự DOM (Thần Thú khai báo
     sau Nhân Vật trong index.php nên đè lên). */
  /* Owner 2026-09-06: 26% hơi tiến quá — lùi lại NỬA mức vừa hạ (32%→26%,
     nay quay lại giữa 2 mốc đó: 26%→29%) cho hoàn hảo.
     Owner 2026-09-08: +50px (dời cả cụm lên cao, xem ghi chú ở trên). */
  bottom:calc(var(--ch-h) * 0.29 + 50px);
  height:calc(var(--ch-h) * 0.84);
  width:auto;object-fit:contain;
  filter:drop-shadow(0 16px 24px rgba(4,7,10,.55));
  /* Owner 2026-09-08: "lấy cảm giác THỞ của Thần Thú ở Hoa Viên, áp dụng cho
     Nhân Vật, nhẹ - chậm thôi" — cùng khuôn `pet-avatar-breathe` (virtual_pet.css):
     CHỈ scale (không translate) neo transform-origin ở CHÂN, biên độ nhẹ hơn
     hẳn bản Thần Thú (1.10↔1.125, ~2.3%) vì đây là ảnh toàn thân lớn — dùng
     ~1.2% cho "thở nhẹ" đúng nghĩa. transform gộp CHUNG với translateX định
     vị ngang có sẵn (bên dưới) ngay trong keyframes — không tách animation
     riêng vì transform không cộng dồn được giữa 2 khai báo khác nhau.
     transform-origin: center bottom để chân luôn đứng yên trên sân đá. */
  transform-origin:center bottom;
  will-change:transform;
  /* Owner 2026-09-29 (báo cáo thật: nhân vật lệch hẳn sang phải, tái hiện ở
     cả Brave lẫn Chrome, reload vẫn còn) — CÙNG HỌ LỖI với Phi Kiếm đã vá ở
     .th-equip-phikiem-float (xem ghi chú "mới vào web lệch phải" bên dưới):
     translateX(-50% + --khoiA-shift-x) TRƯỚC ĐÂY chỉ nằm trong @keyframes
     thCharBreathe, không có transform tĩnh mặc định trên chính rule này.
     Khi trình duyệt/OS bật "giảm chuyển động" (prefers-reduced-motion —
     media query bên dưới tắt hẳn animation này để tuân JOB_TH1_09 DoD),
     animation không chạy nữa ⇒ mất luôn transform canh giữa duy nhất ⇒
     phần tử đứng nguyên ở left:50% thô (mép trái tại 50%, không phải tâm),
     lệch hẳn sang phải đúng nửa bề rộng ảnh — vĩnh viễn, không tự hết dù
     reload. Khai báo tĩnh ở đây để LUÔN đúng vị trí bất kể animation có
     chạy hay không, animation chỉ còn lo phần "thở" (scale). */
  transform:translateX(calc(-50% + var(--khoiA-shift-x)));
  animation:thCharBreathe 6.4s ease-in-out infinite;
}
@keyframes thCharBreathe{
  0%,100%{transform:translateX(calc(-50% + var(--khoiA-shift-x))) scale(1);}
  50%{transform:translateX(calc(-50% + var(--khoiA-shift-x))) scale(1.012);}
}
/* Owner 2026-09-08: "cho Nhân Vật... có bóng dưới chân, áp dụng mọi kích
   thước" — hình elip mờ dần, z-index:0 (dưới chân, TRÊN sân đá nhưng DƯỚI
   người — canh cùng left/transform với char-home-portrait nên luôn đúng
   tâm dù --khoiA-shift-x đổi theo breakpoint/trạng thái). Cùng 1 bộ trị số
   cho MỌI kích thước màn hình — không cần override riêng theo breakpoint
   vì đều tính theo --ch-h (đã tự đổi theo breakpoint sẵn). */
.hero-tienhiep .th-char-shadow{display:none;}
.hero-tienhiep.is-char-home .th-char-shadow{display:block;}
.hero-tienhiep .th-char-shadow{
  position:absolute;left:50%;z-index:0;pointer-events:none;
  transform:translateX(calc(-50% + var(--khoiA-shift-x)));
  /* Owner 2026-09-08: +50px cùng cụm với platform/portrait ở trên — bóng
     phải bám theo chân nhân vật, không thì lệch khỏi vị trí mới. */
  bottom:calc(var(--ch-h) * 0.27 + 50px);
  width:calc(var(--ch-h) * 0.32);height:calc(var(--ch-h) * 0.06);
  background:radial-gradient(ellipse at center,rgba(4,7,10,.55) 0%,rgba(4,7,10,.25) 55%,transparent 75%);
  border-radius:50%;
  /* 2026-09-21: bỏ filter:blur(2px) — .th-aura (vòng sáng dưới chân) là con của
     phần tử này, filter sẽ làm mờ cả vòng sáng. Gradient radial đã tự mềm. */
}
/* Owner 2026-09-08: bảng Tên Nhân Vật đặt trên sân đá, dưới chân nhân vật —
   dùng chung 1 element cho Sảnh Chính lẫn Trang Bị (giống char-home-portrait/
   th-char-shadow), canh giữa theo đúng công thức --khoiA-shift-x.
   QA 2026-09-08: bottom tính theo --ch-h (0.12) bị dải icon HUD dưới cùng
   (#hudDock, neo bottom:14px + cao ~88px desktop/~80px mobile ⇒ đỉnh dải
   cách đáy màn hình ~94-102px CỐ ĐỊNH, không co giãn theo --ch-h) đè mất —
   ở màn hình thấp, 0.12*--ch-h < 94px nên bảng tên lọt thỏm dưới dải icon.
   Neo bottom bằng px cố định (106px, cùng hệ quy chiếu với #hudDock) để
   LUÔN nằm trên dải icon ở mọi breakpoint, thay vì theo --ch-h.
   Owner 2026-09-08: hạ bảng tên xuống 20px (106→86), sau đó cộng +50px
   theo cụm Sân đá/Nhân vật dời lên cao (86+50=136px).
   Owner 2026-09-09: "dời bảng tên xuống dưới thêm 20px, tránh trùng Thần
   Thú" — hạ tiếp 136→116px, sau đó dời thêm 10px nữa (116→106px). */
.hero-tienhiep .th-char-nameplate{display:none;}
.hero-tienhiep.is-char-home .th-char-nameplate{display:block;}
.hero-tienhiep .th-char-nameplate{
  position:absolute;left:50%;z-index:1;pointer-events:none;
  transform:translateX(calc(-50% + var(--khoiA-shift-x)));
  bottom:106px;
  width:calc(var(--ch-h) * 0.42);
}
.hero-tienhiep .th-char-nameplate-bg{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 4px 8px rgba(4,7,10,.5));
}
.hero-tienhiep .th-char-nameplate-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:0 20%;
  font-family:var(--font-body);font-weight:700;
  font-size:calc(var(--ch-h) * 0.026);color:#22170B;
  letter-spacing:.5px;text-shadow:0 1px 1px rgba(255,255,255,.35);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:700px){
  .hero-tienhiep{--ch-h:42vh;}
}

/* ---------- Vùng HUD 4 cạnh ---------- */
.hero-tienhiep .hud{position:absolute;inset:0;z-index:10;pointer-events:none;}
.hero-tienhiep .hud > *{pointer-events:auto;}
/* Khung avatar giờ neo lên ngang hàng header (xem #hudTopLeft bên dưới) nên
   chỉ cần chừa ~120px tuyệt đối là đủ, không cần tới 150px như trước. */
.hero-tienhiep #hudRailLeft{position:absolute;left:14px;top:60px;}
/* Owner 2026-09-07: icon thu/phóng (▲/▼) của NHÓM ĐẦU TIÊN trên rail trái
   đang đè lên khung Avatar (đáy khung Avatar và mép trên icon toggle chỉ
   cách nhau vài px, tính cả 2 đều neo gần đỉnh màn hình). Dời icon toggle
   này xuống — dùng `position:relative;top:` (dịch chuyển HÌNH ẢNH, không
   đụng layout) để "Nhiệm Vụ" (item đầu tiên ngay sau nó) và các rail khác
   giữ nguyên vị trí, không phá alignment với rail phải vừa canh xong. */
.hero-tienhiep #hudRailLeft .hud-group:first-child .hud-group-toggle{
  position:relative;top:10px;
}
/* GĐ2 (Owner 2026-09-07, đợt "header trống hoàn toàn"): #hudTopRight (Thư,
   Cài Đặt) trước đây KHÔNG có bù trừ header-h như #hudTopLeft (avatar) nên
   thật ra đang nằm thấp hơn avatar tới ~74px dù nhìn tưởng "cùng hàng trên
   cùng" — giờ header đã trống hẳn, áp ĐÚNG cùng công thức bù trừ như avatar
   để 2 cụm HUD trên cùng thật sự ngang hàng, sát mép trên. #hudRailRight
   không còn bị cụm Cài Đặt/Thư che phía trên nữa (đã dời hẳn lên cao) nên
   canh THẲNG bằng #hudRailLeft (top:60px) — "Bản Đồ" ngang "Nhiệm Vụ". */
.hero-tienhiep #hudRailRight{position:absolute;right:14px;top:60px;}
.hero-tienhiep #hudTopRight{position:absolute;right:16px;top:calc(-1 * var(--header-h) + 14px);}
/* "Bảng Xếp Hạng" dài hơn khung nhãn 76px chuẩn (.hud-item-label mặc định
   1 dòng + ellipsis). Nới RIÊNG vùng chữ, vẫn giữ nguyên tâm/cỡ icon để
   nhãn hiện đủ trên một dòng mà cột HUD không bị lệch. */
.hero-tienhiep #hudRailRight .hud-item[data-item-key="bxh"] .hud-item-label{
  width:calc(var(--hud-icon) * 1.5); max-width:none; white-space:nowrap; overflow:visible; text-overflow:clip;
}
.hero-tienhiep #hudDock{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;}

/* Owner 2026-09-15: "7 icon mỗi rail bị lọt mất 1 icon dưới cùng, icon như
   to hơn" — thật ra icon vẫn đúng 64px như cũ (không đổi số), vấn đề là 7 ô
   × ~88px/ô + top:60px CHỈ vừa đủ trên màn rất cao; ở màn hình thấp hơn
   (dù rộng, vd laptop công ty có thanh taskbar/toolbar ăn bớt chiều cao),
   tổng chiều cao rail vượt quá viewport, đẩy ô cuối lọt khỏi màn hình.
   Trước đây chỉ có fallback theo max-width (mobile dọc) — thêm fallback
   theo CHIỀU CAO màn hình (max-height), thu nhỏ icon/khoảng cách y hệt
   công thức mobile đã có sẵn (56px, đã kiểm chứng thực nghiệm) để 2 rail
   luôn đủ chỗ cho đủ 7 ô, không lọt icon nào, bất kể màn rộng hay hẹp. */
@media (max-height:820px){
  .hero-tienhiep #hudRailLeft{top:44px;}
  .hero-tienhiep #hudRailRight{top:44px;}
  .hero-tienhiep #hudRailLeft .hud-item,
  .hero-tienhiep #hudRailRight .hud-item{padding:2px;}
  .hero-tienhiep #hudRailLeft .hud-group-items,
  .hero-tienhiep #hudRailRight .hud-group-items{gap:4px;}
  .hero-tienhiep #hudRailLeft .hud-group,
  .hero-tienhiep #hudRailRight .hud-group{gap:4px;}

  /* Owner 2026-09-15 (tiếp): đồng bộ cỡ icon HUD trên (#hudTopRight) và
     dưới (#hudDock) với 2 rail trái/phải ở cùng breakpoint, tránh lệch size
     giữa các nhóm HUD khi màn hình thấp. */
  .hero-tienhiep #hudTopRight .hud-item,
  .hero-tienhiep #hudDock .hud-item{padding:2px;}
  .hero-tienhiep #hudTopRight .hud-group-items,
  .hero-tienhiep #hudDock .hud-group-items{gap:4px;}
  .hero-tienhiep #hudTopRight .hud-group,
  .hero-tienhiep #hudDock .hud-group{gap:4px;}
}

/* ---------- GĐ2 Chương XI (PQ-44, PQ-56): MÀN TRANG BỊ RIÊNG ----------
   Owner 2026-09-06 sửa lại sau khi thấy bản "10 ô thường trực trên Sảnh":
   *"không nên load 10 icon ra sảnh vì giai đoạn sau còn hiển thị nhiều
   thông tin hơn trong chức năng Trang Bị... mỗi trang bị có 1 loạt thuộc
   tính riêng, phẩm chất riêng, mức cường hóa riêng, khảm nạm ngọc riêng...
   nên tách riêng"*. Vậy: 10 ô CHỈ hiện khi bấm "Trang Bị" (.is-equip-view;
   xem đợt 7 bên dưới — rail HUD chức năng KHÔNG bị ẩn nữa, còn dư khoảng
   trống), KHÔNG thường trực cùng .is-char-home nữa — chừa chỗ để giai đoạn
   sau nhét thêm bảng chỉ số/
   khảm ngọc mà không phải đập lại kiến trúc. Khung icon dùng đúng bộ khung
   phẩm chất thật (`ui_quality_1..6.png`, PQ-25 Xám·Lục·Lam·Tím·Vàng·Đỏ) —
   không phải icon nổi trần suông như HUD nữa (icon trang bị luôn có khung
   phẩm chất trong mọi game tiên hiệp tham chiếu). */
/* GĐ2 (Owner 2026-09-07): ảnh nền riêng cho màn Nhân Vật (Khối A) — thay
   hẳn 4 lớp stage của Sảnh Chính khi vào Trang Bị, vì ảnh mới đã tự đủ
   chiều sâu (cổng đá, núi, biển) trong 1 tấm duy nhất. z-index 0 (ngang
   .stage cũ) để platform/nhân vật (z-index 0-1) vẫn vẽ đè lên đúng như
   trước, không cần sửa gì các lớp khác. */
.hero-tienhiep .th-khoiA-bg{
  display:none;position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.hero-tienhiep.is-equip-view .th-khoiA-bg{display:block;}
.hero-tienhiep.is-equip-view .stage,
.hero-tienhiep.is-equip-view .l4-lantern,
.hero-tienhiep.is-equip-view .th-android-apk-lantern,
.hero-tienhiep.is-equip-view .l4-roof,
.hero-tienhiep.is-equip-view .l4-railing{display:none;}
/* Owner 2026-09-07 (đợt 4, ĐẢO LẠI quyết định đợt 7 ở dưới — xem chú thích
   cũ tại .th-equip-rail): "vào giao diện Nhân Vật thì 4 HUD phải tạm ẩn để
   người chơi tập trung vào chức năng Nhân Vật, về lại Sảnh hoặc tắt Nhân
   Vật mới hiện lại". "4 HUD" = đúng 4 vùng Engine.renderMenu() nạp trong
   index.php (hud_rail_left/hud_rail_right/hud_top_right/hud_dock) — KHÔNG
   tính khung tóm tắt nhân vật #hudTopLeft. PQ-74 thay quyết định cũ: Scene
   Nhân Vật sẽ có vùng thông tin riêng, vì vậy khung HUD Sảnh này cũng ẩn. */
.hero-tienhiep.is-equip-view #hudRailLeft,
.hero-tienhiep.is-equip-view #hudRailRight,
.hero-tienhiep.is-equip-view #hudTopRight,
.hero-tienhiep.is-equip-view #hudDock,
.hero-tienhiep.is-equip-view #hudTopLeft{display:none;}

/* Owner 2026-09-23 (đợt 2): Túi Đồ là POPUP NỔI, không phải Scene/is-equip-view
   — không đổi nền, không ẩn HUD Sảnh, không ẩn/đổi nhân vật. Chỉ bật riêng
   #thInvPanel (Rương Chứa Đồ, 3 tab Trang Bị/Tiêu Hao/Thuốc có sẵn) nổi đè lên
   trên nguyên cảnh đang đứng, giống hệt khung của nó trong màn Trang Bị. */
/* Owner 2026-09-23 (đợt 3): mở Túi trong Bí Cảnh — #thSceneRoot (chứa Scene
   'territory') là position:fixed z-index:300 (tien-hiep-navigation.css),
   che mất #thInvPanel mặc định (z-index:2, chỉ so kè trong stacking context
   của .hero-tienhiep). Nâng hẳn z-index khi đang mở popup để luôn nổi trên
   MỌI Scene đang chạy (300) nhưng vẫn dưới lớp modal thật (400). */
.hero-tienhiep.is-bag-popup-view .th-invpanel{display:block;z-index:320;}
.th-invpanel-close{display:none;position:absolute;right:6%;top:2%;width:26px;height:26px;
  border:0;background:rgba(0,0,0,.45);color:#fff0d8;border-radius:50%;cursor:pointer;
  font-size:14px;line-height:1;z-index:4;}
.hero-tienhiep.is-bag-popup-view .th-invpanel-close{display:block;}

/* ---------- GĐ2 (Owner 2026-09-07): "Màn Nhân Vật" — thanh Tab trên cùng
   + Khối B (Rương Chứa Đồ) ---------- */
/* Owner 2026-09-07 (đợt 6): "Về Sảnh" dời LÊN TRÊN "Trang Bị" (đảo thứ tự
   dọc so với trước — xem .th-equip-exit bên dưới, 2 giá trị top hoán đổi
   cho nhau). */
.hero-tienhiep .th-char-tabbar{
  display:none;position:absolute;left:50%;top:50px;
  transform:translateX(calc(-50% + var(--khoiA-shift-x)));
  z-index:3;gap:8px;
}
.hero-tienhiep.is-equip-view .th-char-tabbar{display:flex;}
.th-char-tab{
  border:1px solid var(--border-strong);border-radius:999px;
  padding:8px 20px;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:13px;
  color:var(--text-muted);background:color-mix(in srgb,var(--bg) 55%,transparent);
  backdrop-filter:blur(6px);transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.th-char-tab.is-active{
  color:var(--accent-2);border-color:var(--accent-2);box-shadow:var(--glow-accent);
}
.th-character-stats-panel{
  position:absolute;z-index:4;top:96px;right:3.5%;width:min(460px,35vw);
  max-height:calc(100dvh - 128px);overflow-y:auto;padding:12px;
  color:var(--text);background:color-mix(in srgb,var(--bg) 82%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-2) 62%,var(--border-strong));
  border-radius:var(--radius);box-shadow:var(--shadow-lg);backdrop-filter:blur(8px);
}
.th-character-stats-panel[hidden]{display:none;}
.th-character-stats-title{margin:0 0 5px;color:#FFD666;font-family:var(--font-display);font-size:17px;text-align:center;}
.th-character-stats-status{margin:0 0 8px;font-size:11px;line-height:1.35;color:var(--text-muted);text-align:center;}
.th-character-stats-status.is-combat-power{color:#FFD666;font-size:14px;font-weight:800;line-height:1.4;}
.th-character-stats-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;align-items:start;}
.th-character-stats-group{margin:0;padding-top:6px;border-top:1px solid color-mix(in srgb,var(--border-strong) 70%,transparent);}
.th-character-stats-group h4{margin:0 0 4px;color:#4DA3FF;font-size:11px;}
.th-character-stats-row{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:6px;padding:2px 0;font-size:11px;line-height:1.25;}
.th-character-stats-row span{color:var(--text-muted);}.th-character-stats-row strong{color:var(--text);font-variant-numeric:tabular-nums;}
.th-character-stats-group--full{grid-column:1/-1;}
.th-setbonus-block{margin-bottom:6px;}
.th-setbonus-block:last-child{margin-bottom:0;}
.th-setbonus-block h5{margin:0 0 3px;color:#4DA3FF;font-size:11px;}
.th-skill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.th-skill-card{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;padding:9px;border:1px solid color-mix(in srgb,var(--border-strong) 82%,transparent);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--bg) 75%,transparent);}
.th-skill-card.is-unlocked{border-color:color-mix(in srgb,var(--accent-2) 66%,var(--border-strong));}
.th-skill-icon{display:block;width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 1px 2px #000);}
.th-skill-copy{min-width:0;}
.th-skill-card h4{margin:0 0 3px;color:#FFD666;font-family:var(--font-display);font-size:13px;line-height:1.25;}
.th-skill-kind,.th-skill-modifiers{margin:0;font-size:10px;line-height:1.35;}.th-skill-kind{color:var(--text-muted);}.th-skill-modifiers{margin-top:5px;color:var(--text);}
.th-skill-action{width:100%;margin-top:7px;padding:5px 6px;border:1px solid var(--accent-2);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--accent-2) 16%,var(--bg));color:var(--accent-2);font:inherit;font-size:11px;font-weight:700;cursor:pointer;}.th-skill-action:disabled{opacity:.55;cursor:not-allowed;}
.hero-tienhiep.is-stats-view #thInvPanel{display:none!important;}

/* Khối B — Rương Chứa Đồ. Đứng bên PHẢI Khối A. Owner 2026-09-07 (đợt 5):
   ẢNH THẬT do Owner cung cấp (assets/themes/tien_hiep/ui/khoiB/, cắt/sao
   chép nguyên bản từ /Pictures/Tien Hiep/icon/Block B) — khung giấy da-ngọc
   bích thay hẳn nền màu phẳng cũ. Panel khoá đúng tỉ lệ ảnh gốc (1024:1536)
   bằng aspect-ratio để background 100%/100% không méo. Padding dùng % (theo
   quy chuẩn CSS luôn tính theo BỀ NGANG khối cha cho cả trên/dưới) để luôn
   né đúng viền hoa văn + khoảng bảng tên trên đỉnh dù panel co giãn. */
/* Owner 2026-09-07 (đợt 7): "set vị trí mặc định đúng như tôi đã dời trong
   ảnh" — Owner tự kéo bằng tay (tính năng đợt 6) tới vị trí ưng ý rồi yêu
   cầu chốt luôn thành mặc định cho MỌI người chơi (khác vị trí kéo cá nhân
   lưu localStorage, đây là baseline chung) — đo lại từ ảnh Owner gửi: right
   8%→5% (nằm gần mép phải hơn), top vẫn canh giữa dọc (50%, không đổi).
   Đợt 8: "khoảng trống với cạnh trình duyệt còn lớn, giảm 1 nửa" — 5%→2.5%. */
/* Owner 2026-09-08 (đợt 26→27): "tăng bề ngang ảnh nền Rương thêm 10px,
   không cho 4 cột vật phẩm giãn theo" rồi "thêm 5px nữa" — tổng +15px, nới
   aspect-ratio 1024:1536→1024:1484 (ở chiều cao phổ biến 640px), chấp nhận
   méo nhẹ (cùng cách đã làm cho khung mobile). Bù lại lề trái/phải của
   .th-invpanel-inner thêm đúng 7.5px mỗi bên (calc(20% + 7.5px)) để bề
   rộng NỘI DUNG (lưới 4 cột) giữ nguyên như cũ — phần rộng thêm chỉ lộ ra
   ở viền khung 2 bên. */
.hero-tienhiep .th-invpanel{
  display:none;position:absolute;right:2.5%;top:50%;transform:translateY(-50%);
  height:min(640px,78%);aspect-ratio:1024/1484;width:auto;z-index:2;
  background:url('../../assets/themes/tien_hiep/ui/khoiB/panel_bg.webp') no-repeat center/100% 100%;
}
.hero-tienhiep.is-equip-view .th-invpanel{display:block;}
/* Owner 2026-09-07 (đợt 8): tay nắm kéo — viên ngọc tròn trang trí ĐÃ VẼ
   SẴN trên đỉnh khung ảnh (không phải element riêng, chỉ là hoạ tiết trong
   panel_bg.png) — đặt 1 vùng tròn trong suốt ĐÈ ĐÚNG lên vị trí đó để bấm/
   kéo được, thay hẳn vùng icon+chữ mờ nhạt trước đó (Owner: "rất khó tìm
   vị trí"). Toạ độ ước lượng theo đúng vị trí viên ngọc trong ảnh gốc. */
.th-invpanel-draghandle{
  position:absolute;left:50%;top:1.5%;width:15%;aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;z-index:3;
}
.th-invpanel-draghandle.is-draggable{cursor:grab;}
.th-invpanel-draghandle.is-dragging{cursor:grabbing;}
/* inset % ở ĐÂY tính theo panel cha (chính .th-invpanel, vì nó là containing
   block position:relative/absolute gần nhất của phần tử position:absolute
   này) — trên/dưới theo CHIỀU CAO panel, trái/phải theo CHIỀU RỘNG panel,
   đúng ý muốn (khác hẳn padding % vốn luôn quy về bề ngang khối CHA). */
/* Owner 2026-09-07 (đợt 7, sau đợt 6): "icon/text chưa lọt hẳn vào vùng cần
   hiển thị, lên cao thêm ~50px" — panel cao tối đa 640px (min(640px,78%))
   nên quy đổi ~50px ra % theo đúng chiều cao đó (~7.8%): 13%→5%. */
/* Owner 2026-09-07 (đợt 8, sau đợt 7): "lên cao quá rồi, thấp xuống 20px"
   rồi lại "xuống thấp hơn 20px nữa" — 5%→8%→11% (mỗi 20px ≈ 3.1% trên nền
   panel cao ~640px). */
/* Owner 2026-09-07 (đợt 9): "nới lề 20%" — 18%→20%.
   Đợt 11: header đã dời ra khỏi khối này (xem .th-invpanel-header bên
   dưới) nên top inset không còn phải chừa chỗ cho header nữa trong flex
   flow — nhưng vẫn cần bắt đầu THẤP HƠN vị trí header 1 khoảng (16%, thay
   vì 11% cũ) để tab/lưới không đè lên header phía trên. */
/* Owner 2026-09-08 (đợt 15): "chia lớp" — bỏ hẳn flex-column (tab đẩy lưới
   xuống theo chiều cao thật của nó). Tabs và lưới giờ 2 LỚP TUYỆT ĐỐI ĐỘC
   LẬP chồng lên nhau trong .th-invpanel-inner (containing block chung),
   lưới có z-index CAO HƠN nên "nổi lên trên" ảnh nền tab — tự nhiên lấy lại
   khoảng trống rỗng phía dưới ảnh tab (chỉ có dây/lá trang trí mảnh, không
   quan trọng) mà không cần đo lại tay mỗi khi đổi cỡ màn hình. Áp dụng
   ĐỒNG NHẤT cho mọi kích thước — mobile override riêng % (tien-hiep-mobile.
   css) chỉ chỉnh lại top/bottom, không đổi kỹ thuật. */
/* Đợt 26: lề trái/phải +5px mỗi bên (calc) để bù đúng phần rộng thêm của
   panel — bề rộng thật của khối nội dung (lưới 4 cột) không đổi. */
.th-invpanel-inner{
  position:absolute;inset:16% calc(20% + 7.5px) 11%;
}
/* Owner 2026-09-07 (đợt 9→10): "lớn hơn 1 size" rồi "chạm khung, không đẹp,
   giảm về như cũ" — icon/chữ trả lại 20px/13px.
   Đợt 11: định vị TUYỆT ĐỐI thẳng theo .th-invpanel (đã dời ra khỏi
   .th-invpanel-inner — xem chú thích trong index.php) — top:11% GIỮ NGUYÊN
   đúng mốc cũ (trước đó là vị trí bắt đầu của .th-invpanel-inner khi còn
   chứa header, nay header tự đứng độc lập tại đúng chỗ đó). */
.th-invpanel-header{
  position:absolute;left:50%;top:11%;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.th-invpanel-icon{width:20px;height:20px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(4,7,10,.7));}
.th-invpanel-title{
  font-family:var(--font-display);font-weight:700;font-size:13px;
  color:#4A3418;text-shadow:0 1px 1px rgba(255,255,255,.35);
}
/* Owner 2026-09-08 (đợt 15): "ảnh nền 3 tab không còn bị bóp méo vì dồn
   trong khung cố định nữa — chỉ cần fix đúng tỉ lệ thật". Đo lại bbox vùng
   plaque thật trong ảnh cắt (bỏ phần dây/lá đuôi mảnh phía dưới không tính)
   ra tỉ lệ ~340:165 (~2.06:1) — dùng aspect-ratio thay vì min-height cố
   định, để chiều cao LUÔN tỉ lệ đúng theo chiều rộng thật ở MỌI kích thước
   màn hình, không còn bị kéo dãn/bẹp dí nữa. Lớp TRÊN (z-index thấp hơn
   lưới — xem .th-invpanel-grid) vì lưới cần "nổi" lên trên phần rỗng bên
   dưới plaque. */
/* Owner 2026-09-08 (đợt 23): "desktop vẫn còn bóp méo" — thật ra không còn
   méo về TỈ LỆ (aspect-ratio đã đúng toán học) nhưng panel desktop hẹp
   (dọc) nên 3 tab chia theo bề rộng .th-invpanel-inner (đã trừ lề 20% mỗi
   bên) ra rất NHỎ (~54×26px) — quá bé để đọc rõ, nhìn như bị bẹp. Cho tabs
   tràn RỘNG HƠN bề rộng của inner (left/right âm) để tận dụng thêm khoảng
   trống 2 bên panel mà lưới/header không cần tới, tab lớn rõ hẳn lên. */
/* Owner 2026-09-08 (đợt 28): "3 tab còn giãn cách, chưa sát nhau" — đúng,
   kiểm tra file ảnh xác nhận tab_active/tab_inactive.png đã chạm sát 2 mép
   (không viền trong suốt dư), khoảng hở hoàn toàn do CSS gap — đưa về 0. */
.th-invpanel-tabs{
  position:absolute;top:0;left:-10%;right:-10%;z-index:1;
  display:flex;gap:0;
}
/* Owner 2026-09-08 (đợt 24): "ảnh nền 3 tab bị ngắn/méo, tăng chiều cao
   cho tràn xuống" — ĐÚNG, bug thật: aspect-ratio:340/165 chỉ đo vùng
   plaque (bỏ qua dây/lá đuôi phía dưới), nhưng background-size:100% 100%
   lại kéo giãn NGUYÊN FILE 340×370 (gồm cả phần đuôi đó) vào khung
   340×165 — nén dọc còn ~45% chiều cao thật = méo. Đổi đúng bằng KÍCH
   THƯỚC FILE THẬT (340:370) để background-size:100% 100% không còn phải
   kéo giãn gì nữa — hiển thị nguyên vẹn, không méo. */
.th-invpanel-tab{
  flex:1;border:0;cursor:pointer;aspect-ratio:340/370;
  background:url('../../assets/themes/tien_hiep/ui/khoiB/tab_inactive.webp') no-repeat center/100% 100%;
  padding:1px 2px 8px;
  font-family:var(--font-body);font-weight:700;font-size:11px;
  color:#EDE0C8;text-shadow:0 1px 2px rgba(4,7,10,.9);
  transition:filter var(--dur) var(--ease);
}
/* Owner 2026-09-08 (đợt 25): "tăng size chữ lên 1 size, dời lên trên 5px"
   — font-size 10px→11px (khai báo trên); chữ dời lên bằng transform trên
   span con (không đụng padding, độc lập ảnh nền — cùng kỹ thuật đã dùng ở
   mobile). */
.th-invpanel-tab-label{display:inline-block;transform:translateY(-5px);}
.th-invpanel-tab:hover{filter:brightness(1.12);}
.th-invpanel-tab.is-active{
  background-image:url('../../assets/themes/tien_hiep/ui/khoiB/tab_active.webp');
  color:#1D3B2E;text-shadow:0 1px 1px rgba(255,255,255,.4);
}
/* Owner 2026-09-08 (đợt 15): LỚP DƯỚI về DOM nhưng z-index CAO HƠN tabs —
   "nổi lên trên ảnh nền 3 tab", chồng lên khoảng trống rỗng (dây/lá mảnh,
   không quan trọng) bên dưới plaque thay vì đợi tabs nhường chỗ theo flex.
   grid-template-rows CỐ ĐỊNH 5 hàng + overflow:hidden — khoá cứng đúng 20 ô
   (4×5) hiển thị, phòng trường hợp lỡ render dư số ô (an toàn kép, không
   chỉ dựa vào JS tính đúng số ô mỗi trang).
   BUG THẬT phát hiện đợt 18 (Owner báo "1/2 cột bị ẩn" sau khi tăng chiều
   cao ảnh mobile): KHÔNG PHẢI do ảnh nền méo — do đặt `aspect-ratio:1` trên
   TỪNG Ô trong khi grid lại ép `bottom:22px` (chiều cao CỐ ĐỊNH) + 5 hàng
   1fr riêng biệt. 2 ràng buộc chiều cao khác nguồn (chiều cao hàng theo
   1fr của khung CỐ ĐỊNH, chiều rộng ô lại đòi khớp theo aspect-ratio) xung
   đột nhau — ô bị ép RỘNG HƠN cột thật, tràn khỏi lưới. Sửa tận gốc: bỏ
   `bottom` cố định + `aspect-ratio:1` trên ô, chuyển hẳn aspect-ratio lên
   CHÍNH khung lưới (đúng tỉ lệ cột:hàng — 4:5) — khi đó chiều cao khung tự
   suy ra ĐÚNG từ chiều rộng, mỗi ô tự vuông vức, không còn 2 nguồn xung đột. */
/* Đợt 29: "dời 4 cột vật phẩm xuống dưới thêm 5px" — top:16%→calc(16% + 5px). */
.th-invpanel-grid{
  position:absolute;left:0;right:0;top:calc(16% + 5px);aspect-ratio:4/5;z-index:2;
  display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,1fr);
  gap:1px;overflow:hidden;align-content:stretch;
}
.th-invpanel-slot{position:relative;}
/* Owner 2026-09-08 (đợt 41): ô có đồ gắn thêm class .item-slot (dùng chung
   toàn site) để "ăn ké" tooltip hover đã đăng ký sẵn document-level trong
   core.js — nhưng .item-slot có sẵn background/border/hover-transform
   riêng (style.css) sẽ đè lên khung ảnh kim cổ-ngọc bích của Rương, phải
   trung hoà lại toàn bộ ở đây (aspect-ratio cũng bỏ vì khung ô đã tự vuông
   theo grid-template-rows, không cần .item-slot ép lại). */
.th-invpanel-slot.item-slot{
  background:transparent;border:0;border-radius:0;aspect-ratio:auto;
  max-width:none;cursor:pointer;
}
.th-invpanel-slot.item-slot:hover{
  border-color:transparent;transform:none;box-shadow:none;filter:brightness(1.15);
}
.th-invpanel-slot-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.th-invpanel-slot-icon{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56%;height:56%;font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.th-invpanel-slot-icon img{width:100%;height:100%;object-fit:contain;}
/* Đợt 22: "xoá vòng tròn đen quanh số lượng, thay bằng bóng của chữ" — bỏ
   background/border-radius/padding dạng khối, chỉ còn text-shadow đậm. */
.th-invpanel-slot-qty{
  position:absolute;right:6%;bottom:5%;
  font-family:var(--font-body);font-weight:700;font-size:10px;color:#fff;
  text-shadow:0 1px 2px rgba(4,7,10,.95),0 1px 1px rgba(4,7,10,.95),
              0 0 4px rgba(4,7,10,.9),0 0 4px rgba(4,7,10,.9);
}
/* Đợt 15: dời hẳn xuống chân .th-invpanel-inner (position:absolute, không
   còn nằm trong flex-column) — lưới đã chừa sẵn bottom:22px đúng bằng chỗ
   này.
   Owner 2026-09-29 (sửa lại): "Vàng bên trái, phân trang bên phải, cùng 1
   hàng, không chen lấn nhau" — pager neo phải (right:2%), Vàng neo trái
   (left:4%).
   Owner 2026-09-29 (sửa tiếp): "tuốt dưới quá, cho lên ngay dưới lưới, cách
   1 chút" — bottom:2px (tận đáy khối trống, cách lưới ~52px) đổi thành
   bottom:9% (đo thật: lưới kết thúc ở ~84% chiều cao .th-invpanel-inner, đưa
   hàng này lên ngay sau đó, chỉ còn cách lưới ~8-10px thay vì lọt tuốt
   xuống đáy 11% dưới cùng của panel). */
.th-invpanel-pager{
  position:absolute;right:2%;left:auto;bottom:9%;z-index:2;
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
}
.th-invpanel-pager-btn{
  width:24px;height:24px;border-radius:50%;border:1px solid var(--border-strong);
  background:color-mix(in srgb,var(--bg) 55%,transparent);color:#4A3418;
  font-size:14px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:filter var(--dur) var(--ease);
}
.th-invpanel-pager-btn:hover:not(:disabled){filter:brightness(1.2);}
.th-invpanel-pager-btn:disabled{opacity:.4;cursor:default;}
.th-invpanel-pager-label{
  font-family:var(--font-body);font-weight:700;font-size:11px;color:#4A3418;
}
/* Owner 2026-09-29: "Vàng: xxx [icon]" — số Vàng ví hiện tại (Phương án A),
   cập nhật tức thời qua listener walletChange dùng chung với #headerGold,
   không cần reload. Luôn hiện (không ẩn/hiện theo trang như pager). Neo
   TRÁI, cùng hàng với pager (neo phải) — xem chú thích .th-invpanel-pager. */
.th-invpanel-gold{
  position:absolute;left:4%;right:auto;bottom:9%;z-index:2;
  display:flex;align-items:center;justify-content:flex-start;gap:4px;
  font-family:var(--font-body);font-weight:700;font-size:11px;color:#4A3418;
}
.th-invpanel-gold .gold-icon-inline{display:inline-flex;width:13px;height:13px;}
.th-invpanel-gold .gold-icon-inline img{width:100%;height:100%;object-fit:contain;}
.th-invpanel-sell{min-height:20px;margin-left:3px;padding:1px 7px;border:1px solid rgba(115,74,24,.88);border-radius:999px;background:linear-gradient(180deg,#fff0a4,#d6a540);box-shadow:inset 0 1px rgba(255,255,255,.65),0 1px 2px rgba(0,0,0,.28);color:#4a2810;font:800 10px var(--font-body);line-height:1;cursor:pointer;}
.th-invpanel-sell:hover{filter:brightness(1.1);}
.th-invpanel-sell:focus-visible{outline:2px solid #fff3a5;outline-offset:2px;}

.hero-tienhiep .th-equip-rail{
  display:none;position:absolute;top:50%;
  transform:translateY(-50%);
  flex-direction:column;gap:6px;z-index:2;pointer-events:auto;
}
.hero-tienhiep.is-equip-view .th-equip-rail{display:flex;}
/* Owner 2026-09-06 (đợt 7, ĐÃ ĐẢO LẠI đợt 4 2026-09-07 — xem #hudRailLeft/
   Right/#hudTopRight/#hudDock phía trên): trước đây rail chức năng KHÔNG bị
   ẩn khi vào Trang Bị. Owner nay đổi ý — 4 HUD (rail trái/phải/top-right/
   dock) tạm ẩn hết khi vào màn Nhân Vật để tập trung.
   Owner 2026-09-15: "chốt điểm NEO cho 2 cột theo TÂM Nhân Vật, không nhảy
   lung tung khi đổi kích thước màn hình" — trước đây left:24%/right:24% neo
   theo % BỀ RỘNG MÀN HÌNH, trong khi Nhân Vật/Vũ Khí/Thần Thú/Phi Kiếm đều
   neo theo TÂM + --ch-h (đơn vị chiều cao màn hình). 2 cách neo khác đơn vị
   (% bề rộng vs vh) khiến khoảng cách rail↔nhân vật co giãn KHÔNG cùng tỉ lệ
   khi đổi bề ngang/tỉ lệ màn hình — lúc thì rail đè lên nhân vật/Vũ Khí/Thần
   Thú, lúc thì cách quá xa. Đổi sang cùng công thức "tâm nhân vật + khoiA-
   shift-x + ước lượng nửa bề ngang nhân vật (ch-h*0.19) + khoảng cách cố
   định" như Vũ Khí/Thần Thú/Phi Kiếm — mép TRONG của mỗi cột (giáp nhân vật)
   luôn cách đúng 1 khoảng cố định tính theo --ch-h, dù màn hình đổi kích
   thước/tỉ lệ thế nào. Cột lớn hơn Vũ Khí/Thần Thú/Phi Kiếm 1 khoảng để
   không che 3 ảnh bay đó (đang nằm giữa nhân vật và rail).
   Owner 2026-09-15 (sau khi vẫn thấy đè): nguyên nhân THẬT không phải công
   thức sai mà do bản ghi tọa độ CŨ từ tool CĂN UI (element_key left_slots/
   right_slots, lúc test trước) còn lưu trong DB, đè !important lên đúng
   công thức này — đã xóa 2 bản ghi đó. Nhân tiện đo THẬT tỉ lệ nửa bề ngang
   nhân vật bằng cách quét pixel alpha (xem _thUpdateCharHalfWidthRatio,
   tien-hiep-popup.js) thay vì đoán ch-h*0.19, vì ảnh preview Áo Giáp là
   canvas vuông có viền trong suốt — chính xác hơn ở mọi bộ giáp.
   Giảm khoảng cách cố định 150px→80px cho vừa cả màn hẹp (~700-900px). */
.hero-tienhiep .th-equip-rail-left{
  right:calc(50% - var(--khoiA-shift-x) + (var(--ch-h, 56vh) * var(--char-half-width-ratio, 0.19)) + 80px);
  align-items:flex-start;
}
.hero-tienhiep .th-equip-rail-right{
  left:calc(50% + var(--khoiA-shift-x) + (var(--ch-h, 56vh) * var(--char-half-width-ratio, 0.19)) + 80px);
  align-items:flex-end;
}

/* Owner 2026-09-06 (đợt 2): icon to hơn 30% (64px→84px), các ô sát lại gần
   nhau hơn (gap rail 12px→6px), và tên trang bị KHÔNG còn nằm dưới icon —
   dời ra BÊN NGOÀI icon (trái nếu cột trái, phải nếu cột phải), canh giữa
   theo chiều dọc của icon. Trạng thái (khoá/trống/tên Thần Thú...) KHÔNG
   hiện chữ thường trực nữa — chỉ hiện trong tooltip khi rê chuột (viền
   tooltip tô theo màu phẩm chất, PQ-25) — RIÊNG nút hành động (mời gacha /
   chọn Thần Thú + xác nhận) vẫn phải hiện vì là điều khiển bấm được. */
.th-equip-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:default;
}
.th-equip-item-row{display:flex;align-items:center;gap:8px;}
.hero-tienhiep .th-equip-rail-right .th-equip-item-row{flex-direction:row-reverse;}
.th-equip-item-label{
  width:68px;font-family:var(--font-body);font-size:11px;font-weight:600;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);
}
.hero-tienhiep .th-equip-rail-left .th-equip-item-label{text-align:right;}
.hero-tienhiep .th-equip-rail-right .th-equip-item-label{text-align:left;}
.th-equip-item-frame{
  position:relative;z-index:0;width:84px;height:84px;flex-shrink:0;
  filter:drop-shadow(0 3px 8px rgba(4,7,10,.75));
}
/* Owner 2026-09-08: "ánh sáng lấp lánh quanh icon Trang Bị, màu theo phẩm
   chất" — dùng lại đúng bảng màu TH_QUALITY_COLORS đã có (Xám·Lục·Lam·Tím·
   Vàng·Đỏ, khớp .th-equip-tooltip). */
.th-equip-item:not(.is-locked) .th-equip-item-frame{--th-q-glow:#B8B8B8;}
.th-equip-item[data-quality="2"]:not(.is-locked) .th-equip-item-frame{--th-q-glow:#3DBE6C;}
.th-equip-item[data-quality="3"]:not(.is-locked) .th-equip-item-frame{--th-q-glow:#3D9BE9;}
.th-equip-item[data-quality="4"]:not(.is-locked) .th-equip-item-frame{--th-q-glow:#A855F7;}
.th-equip-item[data-quality="5"]:not(.is-locked) .th-equip-item-frame{--th-q-glow:#D4AF37;}
.th-equip-item[data-quality="6"]:not(.is-locked) .th-equip-item-frame{--th-q-glow:#E14B4B;}
/* Owner 2026-09-08: "dời xuống LỚP dưới cùng (dưới cả khung lẫn icon), không
   phải dời VỊ TRÍ xuống vài chục px" — ::before nằm cùng vị trí/kích thước
   khung (không lệch xuống), z-index:-1 để vẽ SAU (đè bên dưới) khung +
   icon, quầng sáng mờ dần ra ngoài rìa khung tạo hiệu ứng "phát sáng từ bên
   trong lớp dưới cùng". */
@keyframes thEquipGlowPulse{
  0%,100%{opacity:.5;transform:scale(.94);}
  50%{opacity:1;transform:scale(1.06);}
}
.th-equip-item:not(.is-locked) .th-equip-item-frame::before{
  content:'';position:absolute;z-index:-1;inset:-3px;border-radius:50%;
  background:radial-gradient(circle,var(--th-q-glow) 0%,color-mix(in srgb,var(--th-q-glow) 60%,transparent) 45%,transparent 72%);
  filter:blur(2.5px);
  animation:thEquipGlowPulse 2.2s ease-in-out infinite;
  pointer-events:none;
}
.th-equip-item-frameart{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
/* Owner 2026-09-06: "khoảng trống bên trong cho màu nền CAM/vàng nhẹ để
   nổi bật icon" — lỗ trống của khung phẩm chất vốn trong suốt hoàn toàn,
   icon (nhất là icon chưa mang, màu tối) nhoè vào cảnh nền núi/mây phía
   sau. Đệm một lớp nền ấm mờ, nằm GIỮA khung và icon (đứng sau icon trong
   thứ tự vẽ) — không che khung phẩm chất, chỉ lấp khoảng trống rỗng. */
.th-equip-item-innerbg{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64%;height:64%;border-radius:18%;
  background:radial-gradient(circle at 38% 32%,
    color-mix(in srgb,#FFD27A 85%,transparent),
    color-mix(in srgb,#C97A2E 55%,transparent) 75%);
}
.th-equip-item-icon-img{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:50%;height:50%;object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(4,7,10,.8));
}
/* Thú Cưỡi đã liên kết: dùng ẢNH THẬT của Thần Thú (idle) làm icon trong ô,
   không phải icon bóng đen chung nữa — icon tròn lấp gần hết khung, khác
   icon-img thường (chỉ 50%) vì đây là ảnh nhân vật thật, cần rõ mặt. */
.th-equip-item-icon-img.is-pet-portrait{
  width:72%;height:72%;object-fit:cover;border-radius:50%;
}
/* Owner: "khung phẩm chất vẫn sáng ở mức thấp nhất, chỉ ICON bên trong mờ
   khi khoá" — không đụng filter của khung. */
.th-equip-item.is-locked .th-equip-item-icon-img{filter:grayscale(1) brightness(.4);opacity:.7;}
.th-equip-item-lockbadge{
  position:absolute;bottom:-3px;right:-3px;width:20px;height:20px;border-radius:50%;
  background:rgba(4,7,10,.85);border:1px solid var(--border-strong);
  display:grid;place-items:center;font-size:11px;
}
/* Owner 2026-09-08 (GĐ2 §4.1, G2-R1): ô ĐÃ MỞ nhưng đang trống cần khác hẳn
   ô CHƯA MỞ — nếu không người chơi tưởng "ô mở mà vẫn trống" là lỗi hiển
   thị. Dấu "+" vàng góc dưới-phải (đã vẽ sẵn từ GĐ1, `ui_badge_plus.png`,
   chưa từng dùng tới) — cùng vị trí với badge khoá vì 2 badge không bao giờ
   cùng xuất hiện 1 lúc (is-locked loại trừ is-empty-unlocked). */
/* Owner 2026-09-08 (sửa lại): dấu + trước đó lọt hẳn RA NGOÀI khung (giống
   badge khoá) chiếm thêm diện tích — dời HẲN VÀO TRONG, khớp lên icon nền
   trang bị thay vì đè viền khung. */
.th-equip-item-plusbadge{
  position:absolute;bottom:6px;right:6px;width:20px;height:20px;
  pointer-events:none;filter:drop-shadow(0 1px 2px rgba(4,7,10,.8));
}
/* Owner 2026-09-08: "thiếu dấu − để tháo trang bị ra" — đối xứng với dấu +.
   Chưa có asset vẽ riêng (badge phụ rất nhỏ, cùng diện ngoại lệ Owner đã
   duyệt cho lockbadge 🔒) — dùng chung khuôn hộp tròn tối, viền/màu
   --accent-2 (đỏ) để phân biệt rõ "tháo ra" khác "khoá" (--border-strong,
   trung tính) và khác "+" (vàng, thêm vào). Cùng góc dưới-phải — is-locked/
   is-empty-unlocked/đã trang bị không bao giờ trùng nhau nên không đụng độ. */
.th-equip-item-minusbadge{
  position:absolute;bottom:-3px;right:-3px;width:20px;height:20px;border-radius:50%;
  background:rgba(4,7,10,.85);border:1px solid var(--accent-2);color:var(--accent-2);
  display:grid;place-items:center;font-size:14px;font-weight:700;line-height:1;padding:0;
  cursor:pointer;transition:background var(--dur) var(--ease);
}
.th-equip-item-minusbadge:hover{background:color-mix(in srgb,var(--accent-2) 30%,rgba(4,7,10,.85));}
.th-equip-item-minusbadge:disabled{opacity:.5;cursor:default;}
/* JOB_TH3_04 — badge "+N" cường hoá (chỉ hiển thị nếu enhance_level>0, dữ
   liệu do TH3.05 nạp sau này). Góc trên-trái, không đụng 3 badge góc dưới-
   phải hiện có (lock/plus/minus). */
.th-equip-item-enhancebadge{
  position:absolute;top:-3px;left:-3px;min-width:18px;height:18px;padding:0 3px;border-radius:9px;
  background:rgba(4,7,10,.85);border:1px solid var(--warn,#D4AF37);color:var(--warn,#D4AF37);
  display:grid;place-items:center;font-size:10px;font-weight:900!important;line-height:1;
}

/* Owner 2026-09-29: mũi tên xanh "tốt hơn trang bị đang mặc" — nổi thường
   trực (không cần hover) trên icon trang bị ở Rương/Túi Đồ/Cửa Hàng/Thương
   Thành. Góc phải-dưới, NẰM HẲN TRONG icon (không tràn ra ngoài ô) theo yêu
   cầu Owner — khác badge cường hoá (góc trên-trái, cho phép tràn nhẹ ra
   ngoài). Container (.th-invpanel-slot / .th-shop-equip-tooltip /
   .marketplace-listing-slot) đều đã có position:relative hoặc absolute sẵn. */
.th-item-better-badge{
  position:absolute;right:3%;bottom:3%;z-index:3;
  width:15px;height:15px;border-radius:50%;
  background:rgba(4,7,10,.88);border:1px solid #3DBE6C;color:#3DBE6C;
  display:grid;place-items:center;font-size:9px;font-weight:900;line-height:1;
  pointer-events:none;filter:drop-shadow(0 1px 2px rgba(4,7,10,.8));
}
/* Cửa Hàng (shop.js) không có khung .th-invpanel-slot dùng chung — ô icon ở
   đây vốn không đặt position, cần khai báo riêng để badge góc dưới-phải neo
   đúng vào chính ô icon (58px/52px), không neo theo tổ tiên xa hơn. */
.th-shop-equip-tooltip{position:relative;}

/* JOB_TH3_04 — ô "Trang Bị" trong Rương Chứa Đồ (#thInvPanel), khác ô tiêu
   hao/thuốc: khung phẩm chất thật thay vì slot_empty.png chung. */
.th-invpanel-slot.is-equip-slot{cursor:pointer;}
.th-invpanel-slot.is-equip-slot .th-invpanel-slot-icon{width:70%;height:70%;}

/* JOB_TH3_04 §4.3.4 — modal Chi Tiết Trang Bị (Mặc/Tháo), tách khỏi modal
   Chi Tiết Vật Phẩm tiêu hao. Thứ tự DOM đã đúng thứ tự bắt buộc: ảnh lớn ->
   tên -> phẩm/slot -> mô tả -> chỉ số -> yêu cầu -> khoá giao dịch -> nút. */
.th-equip-detail-overlay{
  position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;
  background:rgba(4,7,10,.72);padding:16px;
}
.th-equip-detail-overlay.open{display:flex;}
.th-equip-detail-panel{
  position:relative;width:min(360px,92vw);max-height:88vh;overflow-y:auto;
  background:linear-gradient(180deg,rgba(18,14,10,.97),rgba(10,8,6,.97));
  border:1px solid var(--border-strong);border-radius:14px;padding:18px;
  display:flex;flex-direction:column;gap:8px;color:var(--text,#EDE6D6);
}
.th-equip-detail-close{
  position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;
  background:rgba(4,7,10,.7);border:1px solid var(--border-strong);color:inherit;cursor:pointer;
}
.th-equip-detail-art{width:100%;max-height:220px;display:flex;align-items:center;justify-content:center;}
.th-equip-detail-art img{max-width:100%;max-height:220px;object-fit:contain;}
.th-equip-detail-name{font-size:18px;font-weight:700;text-align:center;}
.th-equip-detail-subline{text-align:center;opacity:.85;font-size:13px;}
.th-equip-detail-desc{font-size:13px;opacity:.85;line-height:1.5;}
.th-equip-detail-stats,.th-equip-detail-reqs{font-size:13px;display:flex;flex-direction:column;gap:2px;}
.th-equip-detail-reqs{opacity:.8;border-top:1px solid var(--border-strong);padding-top:6px;}
.th-equip-detail-lock{font-size:12px;opacity:.75;}
.th-equip-detail-enhance{text-align:center;font-size:13px;color:#f5dc70;display:flex;flex-direction:column;align-items:center;gap:3px;}
.th-equip-detail-stars{height:24px;display:flex;justify-content:center;gap:1px;}
.th-equip-detail-stars img{width:22px;height:22px;object-fit:contain;}
.th-equip-detail-enhance .btn{margin-top:3px;min-width:180px;}
/* JOB_TH3_05 / PQ-71: Lò Rèn là Scene native toàn màn, asset chỉ là sân khấu. */
[data-theme="tien_hiep"] .th-forge-scene{position:fixed;inset:0;z-index:1;display:grid;place-items:center;overflow:auto;background:#071019;color:#fff;animation:thPopupFadeIn .18s var(--ease);}
/* Canvas 1672×941: tất cả vùng tương tác neo theo % của đúng ảnh nền này. */
[data-theme="tien_hiep"] .th-forge-stage{position:relative;width:min(100vw,calc(100dvh * 1.776));aspect-ratio:1672/941;background:url('../../assets/themes/tien_hiep/forge/ui_forge_enhancement_scene_v1.webp') center/100% 100% no-repeat;overflow:hidden;}
.th-forge-close{position:absolute;left:3%;top:4%;z-index:3;border:1px solid rgba(231,197,107,.7);border-radius:999px;padding:8px 13px;background:rgba(7,19,28,.85);color:#f9e7ad;font:700 13px var(--font-body);cursor:pointer;}
.th-forge-tab{position:absolute;top:4%;z-index:3;border:1px solid rgba(231,197,107,.7);border-radius:999px;padding:8px 13px;background:rgba(7,19,28,.85);color:#f9e7ad;font:700 13px var(--font-body);cursor:pointer;}.th-forge-enhance-tab{left:13%;}.th-forge-quality-link{left:23%;}.th-forge-gem-link{left:33%;}.th-forge-divine-link{left:43%;}.th-forge-tab.is-active{border-color:rgba(103,222,210,.95);background:rgba(12,70,76,.9);box-shadow:0 0 8px rgba(103,222,210,.8),0 0 18px rgba(103,222,210,.42);color:#bafff5;cursor:default;}
.th-gem-forge-scene{position:fixed;inset:0;z-index:1;display:grid;place-items:center;overflow:auto;background:#071019;color:#fff}.th-gem-forge-stage{position:relative;width:min(100vw,calc(100dvh * 1.5));aspect-ratio:3/2;background:url('../../assets/themes/tien_hiep/backgrounds/bg_gem_forge_scene.png') center/cover no-repeat;overflow:hidden}.th-gem-forge-stage:before{content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(90deg,rgba(3,12,17,.72),rgba(3,12,17,.22) 55%,rgba(3,12,17,.65));pointer-events:none}.th-gem-forge-stage>*{position:relative;z-index:1}.th-gem-forge-nav{position:absolute;z-index:10;inset:0 auto auto 0;width:100%;height:12%;pointer-events:none}.th-gem-forge-nav button{position:absolute;top:33%;z-index:11;pointer-events:auto;border:1px solid rgba(231,197,107,.7);border-radius:999px;padding:8px 13px;background:rgba(7,19,28,.85);color:#f9e7ad;font:700 13px var(--font-body);cursor:pointer}.th-gem-forge-close{left:3%}.th-gem-forge-tab{left:13%}.th-gem-quality-tab{left:23%}.th-gem-active-tab{left:33%;border-color:#67ded2!important;background:#0c464c!important;color:#bafff5!important;box-shadow:0 0 14px rgba(103,222,210,.56)}.th-gem-forge-stage h1{margin:0;padding-top:9%;text-align:center;color:#ffe7a0;font:700 clamp(24px,3vw,38px) var(--font-display);text-shadow:0 2px 8px #000}.th-gem-forge-columns{display:grid;grid-template-columns:1fr 1fr .78fr;gap:16px;width:86%;margin:3% auto;padding:14px;border:1px solid rgba(222,192,113,.55);border-radius:8px;background:rgba(4,22,27,.58);backdrop-filter:blur(4px)}.th-gem-forge-columns h2{margin:0 0 9px;color:#ffe6a0;font:700 15px var(--font-display)}.th-gem-inventory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:43vh;overflow:auto}.th-gem-entry{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:4px;border:1px solid rgba(124,204,190,.48);border-radius:6px;background:rgba(7,37,41,.74);color:#f3eed9;text-align:left;cursor:pointer}.th-gem-entry img{grid-row:span 2;width:40px;height:40px;object-fit:contain}.th-gem-entry small{color:#70e4d3}.th-gem-entry.is-picked,.th-gem-entry.is-active{outline:2px solid #ffe16d}.th-gem-combine{margin-top:9px;width:100%;border:1px solid #65dfc8;border-radius:6px;padding:8px;background:#115b52;color:#f3ffe9;font-weight:800;cursor:pointer}.th-gem-combine:disabled{opacity:.45;cursor:not-allowed}.th-gem-equipment{width:100%;padding:7px;border:1px solid #bda667;border-radius:5px;background:#09252a;color:#fff}.th-gem-item-preview{display:grid;place-items:center;min-height:92px;color:#ffe7a0}.th-gem-item-preview img{width:58px;height:58px;object-fit:contain}.th-gem-sockets{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.th-gem-socket{min-height:75px;border:1px solid rgba(226,197,118,.65);border-radius:50%;background:rgba(2,27,29,.73);color:#e8e1bd;cursor:pointer}.th-gem-socket img{display:block;width:45px;height:45px;object-fit:contain;margin:auto}.th-gem-socket.is-locked{opacity:.38}.th-gem-socket.is-filled{border-color:#61e6ca;box-shadow:0 0 10px rgba(97,230,202,.32)}.th-gem-detail{min-height:150px;color:#e8eee7;line-height:1.55}@media(max-width:720px){.th-gem-forge-scene{display:block}.th-gem-forge-stage{width:720px;max-width:none;margin:calc((100dvh - 480px)/2) auto}.th-gem-forge-columns{grid-template-columns:1fr 1fr 1fr;width:92%;font-size:11px}.th-gem-inventory{grid-template-columns:1fr}.th-gem-active-tab{left:34%}}
/* TH4.04: share the 1672×941 stage canvas and portrait anchor of the other two forges. */
.th-gem-forge-stage{width:min(100vw,calc(100dvh * 1.776));aspect-ratio:1672/941;background-size:100% 100%;}
@media(max-width:720px) and (orientation:portrait){[data-theme="tien_hiep"] .th-gem-forge-scene{display:block;overflow:auto;}[data-theme="tien_hiep"] .th-gem-forge-stage{width:720px;max-width:none;margin:calc((100dvh - 405px)/2) auto;}}
/* TH4.04 V2: all live controls inhabit the forge artwork, matching Enhancement/Ascension. */
.th-gem-forge-stage{background-image:url('../../assets/themes/tien_hiep/backgrounds/bg_gem_forge_scene_v2.png');}
.th-gem-forge-stage{background-image:image-set(url('../../assets/themes/tien_hiep/backgrounds/bg_gem_forge_scene_v2.webp') type('image/webp'),url('../../assets/themes/tien_hiep/backgrounds/bg_gem_forge_scene_v2.png') type('image/png'));}
.th-gem-forge-stage:before{display:none;}
.th-gem-forge-stage .th-gem-heading{position:absolute;left:37%;top:84.2%;width:26%;margin:0;text-align:center;color:#ffe7a0;font:700 clamp(12px,1vw,16px) var(--font-display);line-height:1.15;text-shadow:0 2px 6px rgba(0,0,0,.78);}
.th-gem-equipment-panel{position:absolute;left:4.1%;top:23%;width:23%;height:34%;display:flex;flex-direction:column;align-items:center;color:#f4e6bf;text-align:center;text-shadow:0 2px 5px #000;}
.th-gem-equipment-panel h2,.th-gem-sockets-panel h2,.th-gem-inventory-panel h2{margin:0 0 5px;color:#ffe9a8;font:700 clamp(11px,1.05vw,16px) var(--font-display);}
.th-gem-equipment{width:74%;padding:4px 7px;border:1px solid rgba(236,208,119,.86);border-radius:5px;background:rgba(3,35,34,.88);color:#f4f3e5;font:700 clamp(9px,.8vw,13px) var(--font-body);text-align:center;}
.th-gem-item-preview{width:72%;min-height:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#ffe778;font:700 clamp(10px,.9vw,14px) var(--font-body);text-shadow:0 2px 5px #000;cursor:help;}
.th-gem-item-preview img{width:clamp(48px,5.8vw,94px);height:clamp(48px,5.8vw,94px);object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.72));}.th-gem-item-preview strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.th-gem-sockets-panel{position:absolute;left:72.5%;top:21%;width:23%;height:38%;color:#f4e6bf;text-align:center;text-shadow:0 2px 5px #000;}
.th-gem-sockets{--th-gem-art-x:0%;--th-gem-art-y:0%;--th-gem-label-x:0%;--th-gem-label-y:0%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:2%;height:80%;padding:0 9%;}.th-gem-socket{position:relative;min-height:0;border:0;border-radius:50%;background:transparent;color:#e8e1bd;font:700 clamp(9px,.85vw,13px) var(--font-body);text-shadow:0 2px 4px #000;cursor:pointer;}.th-gem-socket:hover:not(:disabled){filter:brightness(1.22) drop-shadow(0 0 7px rgba(106,246,220,.82));}.th-gem-socket img{width:62%;height:62%;object-fit:contain;margin:3px auto 0;transform:translate(var(--th-gem-art-x),var(--th-gem-art-y));filter:drop-shadow(0 2px 5px #000);}.th-gem-socket span{position:absolute;left:47%;top:61%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88em;transform:translate(calc(-50% + var(--th-gem-label-x)),var(--th-gem-label-y));}.th-gem-socket.is-locked{opacity:.42;filter:grayscale(.5);}
.th-gem-inventory-panel{position:absolute;left:2.3%;top:68.2%;width:20%;height:18%;color:#f4e6bf;text-align:center;text-shadow:0 2px 5px #000;}.th-gem-inventory-panel h2{margin-bottom:3px;}.th-gem-inventory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;max-height:78%;padding:0 7%;overflow-y:auto;scrollbar-width:thin;}.th-gem-inventory p{grid-column:1/-1;margin:13px 0 0;color:#d9e9e3;font-size:clamp(9px,.8vw,13px);}.th-gem-entry{display:grid;grid-template-columns:1fr;place-items:center;gap:0;min-height:0;padding:1px;border:0;border-radius:50%;background:transparent;color:#f4f1de;font:700 clamp(7px,.62vw,10px) var(--font-body);cursor:pointer;text-shadow:0 1px 3px #000;}.th-gem-entry img{grid-row:auto;width:clamp(25px,3.1vw,50px);height:clamp(25px,3.1vw,50px);object-fit:contain;filter:drop-shadow(0 2px 4px #000);}.th-gem-entry span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.th-gem-entry small{color:#81ead8;font-size:.88em;}.th-gem-entry.is-picked,.th-gem-entry.is-active{outline:1px solid #ffe36d;filter:drop-shadow(0 0 5px rgba(255,224,101,.78));}
.th-gem-detail-panel{position:absolute;left:27%;top:73.3%;width:44%;height:11%;display:grid;place-items:center;padding:0 4%;color:#edfbf5;text-align:center;text-shadow:0 2px 5px #000;pointer-events:none;}.th-gem-detail{min-height:0;white-space:pre-line;font:700 clamp(9px,.82vw,14px)/1.4 var(--font-body);}.th-gem-detail>span{display:block;}.th-gem-detail-name{color:#ffe6a0;}.th-gem-detail-use{color:#9cf0d7;font-weight:600;}.th-gem-detail-stat{color:#91dcff;}.th-gem-detail-power{color:#ffe36d;}.th-gem-detail-note{color:#e8f5ec;font-weight:600;}.th-equip-tooltip-gem-use{margin-top:4px;color:#9cf0d7;font-size:12px;font-style:italic;line-height:1.35;}.th-equip-tooltip-gem-stat{color:#91dcff;font-size:12px;font-weight:800;line-height:1.35;}.th-gem-combine{position:absolute;left:80.8%;top:68.4%;width:12%;height:13%;border:0!important;border-radius:50%;background:transparent!important;color:#effff8;font:800 clamp(16px,1.45vw,24px) var(--font-body);text-shadow:0 2px 5px #000;box-shadow:none!important;cursor:pointer;}.th-gem-combine:not(:disabled):hover{filter:brightness(1.25) drop-shadow(0 0 9px rgba(111,252,224,.88));}.th-gem-combine:disabled{opacity:.42;cursor:not-allowed;}
@media(max-width:720px) and (orientation:portrait){.th-gem-heading{top:84.2%;}.th-gem-equipment-panel{left:4.1%;top:23%;}.th-gem-sockets-panel{left:72.5%;top:21%;}.th-gem-inventory-panel{left:2.3%;top:68.2%;}.th-gem-detail-panel{left:27%;top:73.3%;}.th-gem-combine{left:80.8%;top:68.4%;}}
/* TH4.04 polish: compact stock, click-to-open equipment selector, and sharp action label. */
.th-gem-equipment-trigger{margin:0;border:0;background:transparent;color:#ffe9a8;font:700 clamp(11px,1.05vw,16px) var(--font-display);text-shadow:0 2px 5px #000;cursor:pointer;}.th-gem-equipment-trigger:disabled{color:#a5b6b2;cursor:default;}.th-gem-equipment-picker{position:absolute;z-index:6;left:-4%;top:9%;width:108%;max-height:138%;overflow:auto;padding:clamp(6px,.8vw,12px);border:1px solid rgba(220,184,94,.74);border-radius:12px;background:rgba(5,22,27,.96);box-shadow:0 12px 32px rgba(0,0,0,.58);}.th-gem-equipment-options{display:grid;gap:5px;}.th-gem-equipment-options .th-forge-picker-item{display:flex;align-items:center;gap:7px;width:100%;padding:5px;border:1px solid rgba(168,209,193,.4);border-radius:8px;background:rgba(19,53,55,.82);color:#eef5ef;text-align:left;cursor:pointer;}.th-gem-equipment-options .th-forge-picker-item img{width:34px;height:34px;object-fit:contain;}.th-gem-equipment-options .th-forge-picker-item span{min-width:0;font-size:12px;line-height:1.25;}
.th-gem-item-preview{cursor:pointer;}.th-gem-item-preview img{width:clamp(96px,11.6vw,188px);height:clamp(96px,11.6vw,188px);}
.th-gem-inventory-panel{display:flex;align-items:center;justify-content:center;}.th-gem-inventory{width:70%;max-height:none;padding:0;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;overflow:visible;}.th-gem-entry{position:relative;display:block;min-height:0;padding:0;border:0;background:transparent;}.th-gem-entry img{display:block;width:clamp(28px,3.7vw,60px);height:clamp(28px,3.7vw,60px);margin:auto;}.th-gem-entry small{position:absolute;left:50%;bottom:-5%;min-width:30%;padding:0 3px;border:1px solid rgba(224,191,95,.8);border-radius:3px;background:#06191a;color:#effff8;font:700 clamp(8px,.7vw,11px) var(--font-body);line-height:1.25;text-align:center;text-shadow:none;transform:translateX(-50%);}.th-gem-entry span{display:none;}
.th-gem-socket.is-locked span{transform:translate(calc(-50% + var(--th-gem-label-x)),calc(20px + var(--th-gem-label-y)));}
.th-gem-combine{left:81.1%;top:67.3%;font-size:clamp(16px,1.45vw,24px);opacity:1!important;filter:none!important;text-shadow:0 1px 1px rgba(0,0,0,.35);}.th-gem-combine:disabled{opacity:1;color:#effff8;}
@media(max-width:720px) and (orientation:portrait){.th-gem-combine{left:81.1%;top:67.3%;}}
/* TH4.04 final anchor pass: source canvas is 1672×941. */
.th-gem-equipment-trigger{position:absolute;left:50%;top:51%;width:max-content;transform:translate(-50%,-50%);}.th-gem-item-preview{transform:translateY(-10px);}.th-gem-inventory-panel{transform:translate(-3px,-20px);}.th-gem-socket.is-locked span{margin-left:-3px;}.th-gem-combine{left:81.4%;top:67%;}
@media(max-width:720px) and (orientation:portrait){.th-gem-combine{left:81.4%;top:67%;}}
/* TH4.04 interaction and final pixel anchors. */
.th-gem-item-preview img{width:clamp(115px,13.92vw,226px);height:clamp(115px,13.92vw,226px);}.th-gem-inventory-panel{transform:translate(-6px,-25px);}.th-gem-socket.is-locked span{margin-left:-6px;}.th-gem-socket.is-locked:nth-child(-n+3) span{transform:translate(calc(-50% + var(--th-gem-label-x)),calc(30px + var(--th-gem-label-y)));}.th-gem-detail-panel{top:calc(74.4% + 10px);}.th-gem-combine{left:81.4%;top:67%;-webkit-text-stroke:1px #061115;paint-order:stroke fill;}.th-gem-equipment-clear{position:absolute;z-index:2;bottom:5%;left:50%;border:1px solid rgba(230,194,105,.82);border-radius:5px;padding:2px 9px;background:rgba(5,28,29,.88);color:#ffe5a0;font:700 clamp(9px,.75vw,12px) var(--font-body);text-shadow:0 1px 3px #000;transform:translateX(-50%);cursor:pointer;}.th-gem-socket-action{position:absolute;left:43.5%;top:85.8%;width:13%;height:5%;border:0;background:transparent;color:#effff8;font:800 clamp(12px,1vw,18px) var(--font-body);text-shadow:0 1px 1px rgba(0,0,0,.35);-webkit-text-stroke:1px #061115;paint-order:stroke fill;cursor:pointer;}.th-gem-socket-action:disabled{opacity:.5;cursor:not-allowed;}.th-gem-socket-action:not(:disabled):hover{filter:brightness(1.22) drop-shadow(0 0 7px rgba(111,252,224,.88));}.th-gem-socket.is-selected{filter:brightness(1.25) drop-shadow(0 0 8px rgba(111,252,224,.9));}
.th-gem-combine-preview{opacity:1!important;filter:none!important;}.th-gem-socket-action{top:83.7%;opacity:1!important;text-shadow:0 1px 1px rgba(0,0,0,.35);-webkit-text-stroke:1px #061115;paint-order:stroke fill;}.th-gem-socket-action:disabled{opacity:1!important;color:#effff8;}
.th-gem-socket.th-gem-combine-preview img{position:relative;top:clamp(30px,4.3vw,72px);}.th-gem-socket.th-gem-combine-preview span{top:calc(61% + clamp(30px,4.3vw,72px));}.th-gem-entry img{transform:translateY(5px);}.th-gem-lock-notice{display:block;color:#ff7068;font-weight:800;text-shadow:0 1px 3px #180000;}.th-gem-combine:hover,.th-gem-socket-action:hover{color:#fff1aa!important;filter:brightness(1.22) drop-shadow(0 0 8px rgba(255,210,86,.98))!important;text-shadow:0 0 3px #fff3b0,0 0 10px rgba(255,193,54,.95),0 2px 3px #000!important;}
@media(max-width:720px) and (orientation:portrait){.th-gem-detail-panel{top:calc(74.4% + 10px);}.th-gem-combine{left:81.4%;top:67%;}.th-gem-socket-action{left:43.5%;top:85.8%;}}
/* TH4.04 socket reset: artwork and labels are independently positioned from the grid centre. */
.th-gem-sockets{margin-inline:auto;}
.th-gem-socket .th-gem-socket-art,.th-gem-socket.th-gem-combine-preview .th-gem-socket-art{position:absolute;left:50%;top:50%!important;display:block;width:62%;height:62%;max-width:none;overflow:visible;font-size:initial;line-height:normal;white-space:normal;transform:translate(calc(-50% + var(--th-gem-art-x)),calc(-50% + var(--th-gem-art-y)))!important;pointer-events:none;}
.th-gem-socket .th-gem-socket-art:empty{display:none;}
.th-gem-socket .th-gem-socket-art img,.th-gem-socket.th-gem-combine-preview .th-gem-socket-art img{position:static!important;top:auto!important;display:block;width:100%;height:100%;margin:0;object-fit:contain;transform:none!important;filter:drop-shadow(0 2px 5px #000);}
.th-gem-socket .th-gem-socket-label,.th-gem-socket.is-locked .th-gem-socket-label,.th-gem-socket.is-locked:nth-child(-n+3) .th-gem-socket-label,.th-gem-socket.th-gem-combine-preview .th-gem-socket-label{position:absolute;left:50%;top:calc(81% - 2px);display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88em;transform:translate(calc(-50% + var(--th-gem-label-x)),var(--th-gem-label-y))!important;margin-left:0!important;}
.th-gem-socket.th-gem-combine-preview .th-gem-socket-art,.th-gem-socket.is-filled .th-gem-socket-art,.th-gem-socket.is-preview .th-gem-socket-art{width:68.2%;height:68.2%;}.th-gem-socket.th-gem-combine-preview .th-gem-socket-label,.th-gem-socket.is-filled .th-gem-socket-label,.th-gem-socket.is-preview .th-gem-socket-label{display:none;}
.th-forge-heading{position:absolute;left:36%;top:calc(73.7% + 25px);width:28%;margin:0;color:#ffe7a0;text-align:center;text-shadow:0 2px 8px #000;font-family:var(--font-display);font-weight:700;font-size:clamp(14px,1vw,18px)!important;line-height:1.15!important;}
.th-forge-equip-trigger{position:absolute;z-index:2;left:4%;top:37%;width:28%;min-height:10%;border:0;background:transparent;color:#e5f4ec;font:700 clamp(11px,1.15vw,18px) var(--font-body);text-shadow:0 2px 5px #000;cursor:pointer;}.th-forge-equip-trigger:disabled{cursor:default;color:#a9b9b4;}.th-forge-equip-popover{position:absolute;z-index:4;left:3%;top:14%;width:31%;max-height:49%;overflow:auto;padding:clamp(8px,1vw,15px);border:1px solid rgba(220,184,94,.74);border-radius:14px;background:rgba(5,22,27,.95);box-shadow:0 12px 32px rgba(0,0,0,.58);}.th-forge-equip-popover[hidden]{display:none;}.th-forge-equip-popover p{margin:0 0 8px;color:#f9dfa0;font-weight:800;text-align:center;}.th-forge-equip-options{display:grid;grid-template-columns:1fr;gap:5px;}.th-forge-equip-options button{display:flex;align-items:center;gap:7px;width:100%;padding:5px;border:1px solid rgba(168,209,193,.4);border-radius:8px;background:rgba(19,53,55,.82);color:#eef5ef;text-align:left;cursor:pointer;}.th-forge-equip-options img{width:34px;height:34px;object-fit:contain;}.th-forge-equip-options span{min-width:0;font-size:12px;line-height:1.25;}.th-forge-equip-options b{color:#ffe56a;white-space:nowrap;}
.th-forge-item-slot{position:absolute;left:4%;top:19%;width:30%;height:39%;display:flex;align-items:center;justify-content:center;text-align:center;color:#d7e5e1;text-shadow:0 1px 4px #000;cursor:pointer;}.th-forge-item-slot img{max-width:62%;max-height:62%;object-fit:contain;transform:translate(-10px,3%);filter:drop-shadow(0 4px 8px rgba(0,0,0,.75));}.th-forge-item-slot b{position:absolute;left:44%;bottom:8%;transform:translateX(-50%);color:#ffe56a;font-size:clamp(13px,1.5vw,22px);text-shadow:0 2px 4px #000;}
.th-forge-fireflies{position:absolute;z-index:1;inset:4%;overflow:hidden;border-radius:50%;pointer-events:none;--th-firefly:#9cf8ed;--th-firefly-glow:rgba(127,255,238,.8);}.th-forge-item-slot>img{position:relative;z-index:2;}.th-forge-item-slot>b{z-index:2;}.th-forge-fireflies-tier-1{--th-firefly:#7dff95;--th-firefly-glow:rgba(79,255,132,.82);}.th-forge-fireflies-tier-2{--th-firefly:#dc9cff;--th-firefly-glow:rgba(190,102,255,.85);}.th-forge-fireflies-tier-3{--th-firefly:#ffe890;--th-firefly-glow:rgba(255,201,65,.88);}.th-forge-fireflies-tier-4{--th-firefly:#ff998e;--th-firefly-glow:rgba(255,74,62,.9);}.th-forge-fireflies i{position:absolute;left:var(--x);top:var(--y);width:clamp(3px,.35vw,6px);height:clamp(3px,.35vw,6px);border-radius:50%;background:var(--th-firefly);box-shadow:0 0 4px 2px var(--th-firefly-glow),0 0 11px 3px var(--th-firefly-glow);animation:thForgeFirefly var(--duration) ease-in-out var(--delay) infinite alternate;}.th-forge-fireflies i:nth-child(3n){width:clamp(2px,.25vw,4px);height:clamp(2px,.25vw,4px);}.th-forge-fireflies i:nth-child(2n){animation-direction:alternate-reverse;}
@keyframes thForgeFirefly{0%{opacity:.15;transform:translate(0,0) scale(.58)}42%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1)}72%{opacity:.38;transform:translate(0,var(--dy)) scale(.76)}100%{opacity:.92;transform:translate(var(--dx),0) scale(.95)}}
@media(prefers-reduced-motion:reduce){.th-forge-fireflies i{animation:none;opacity:.65;}}
.th-forge-material-hint{position:static}.th-forge-material{position:absolute;display:flex;flex-direction:column;align-items:center;gap:clamp(4px,.6vw,8px);color:#f4e6bf;text-align:center;text-shadow:0 1px 3px #000;}.th-forge-material-1{left:68.4%;top:calc(39.8% + 10px);width:8%;}.th-forge-material-2{left:78%;top:calc(39.8% + 10px);width:8%;}.th-forge-material-3{left:87.2%;top:calc(39.8% + 10px);width:8%;}.th-forge-material img{width:76.5%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.65));}.th-forge-material-stepper{display:flex;align-items:stretch;justify-content:center;width:auto;max-width:100%;margin:0 auto;height:clamp(16px,2vw,22px);border:1px solid #b99e56;border-radius:5px;overflow:hidden;background:rgba(8,25,31,.92);box-shadow:inset 0 1px 2px rgba(0,0,0,.5);}.th-forge-material input{flex:0 1 clamp(20px,2.2vw,28px);min-width:0;padding:0;border:0;background:transparent;color:#fff7d4;text-align:center;font-size:clamp(9px,.9vw,12px);font-weight:700;-moz-appearance:textfield;appearance:textfield;}.th-forge-material input::-webkit-inner-spin-button,.th-forge-material input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}.th-forge-material-dec,.th-forge-material-inc{flex:0 0 clamp(14px,1.6vw,20px);display:flex;align-items:center;justify-content:center;padding:0;border:0;background:rgba(185,158,86,.22);color:#ffe9ad;font-size:clamp(9px,.9vw,12px);font-weight:700;line-height:1;cursor:pointer;}.th-forge-material-dec{border-right:1px solid #b99e56;}.th-forge-material-inc{border-left:1px solid #b99e56;}.th-forge-material-dec:disabled,.th-forge-material-inc:disabled{opacity:.3;cursor:not-allowed;}.th-forge-material-dec:not(:disabled):hover,.th-forge-material-inc:not(:disabled):hover{background:rgba(185,158,86,.45);}.th-forge-material small{position:absolute;right:5%;top:2%;min-width:16px;padding:1px 3px;border-radius:999px;background:rgba(3,16,20,.82);color:#d8f7ef;font-size:clamp(9px,.75vw,12px);line-height:1.15;}
.th-forge-rate{position:absolute;left:45%;top:34%;width:10%;text-align:center;font-size:clamp(10px,.85vw,14px);font-weight:800;text-shadow:0 1px 4px #000;}.th-forge-blessing{position:absolute;left:28%;top:84%;width:44%;text-align:center;color:#b9fff7;font-size:clamp(11px,1.05vw,16px);font-weight:700;text-shadow:0 1px 4px #000;}.th-forge-action{position:absolute;left:80.7%;top:calc(82.5% + 3px);width:9%;min-height:8%;padding:4px 6px!important;border:0!important;border-radius:50%;background:transparent!important;color:#f5f8f5!important;font-size:clamp(9px,.85vw,13px);line-height:1.15;white-space:normal;box-shadow:none!important;transition:filter .16s ease,text-shadow .16s ease;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;}.th-forge-action-gold{display:block;white-space:nowrap;font-size:.9em;}.th-forge-action:not(:disabled):hover{filter:drop-shadow(0 0 5px rgba(255,255,255,.98)) drop-shadow(0 0 12px rgba(255,255,255,.78));text-shadow:0 0 6px #fff;}.th-forge-action:disabled{opacity:.45;}
.th-forge-result{position:absolute;z-index:5;left:37%;top:48%;width:26%;opacity:0;text-align:center;font:800 clamp(13px,1.35vw,22px) var(--font-display);letter-spacing:.04em;text-shadow:0 2px 8px #000;pointer-events:none;}.is-forge-success .th-forge-result,.is-forge-failure .th-forge-result{animation:thForgeResult 1.65s ease both;}.is-forge-success .th-forge-result{color:#eaffcf;}.is-forge-failure .th-forge-result{color:#ffb5ad;}
@keyframes thForgeMaterialOne{0%{opacity:1;transform:translate(0,0) scale(1)}75%{opacity:1;transform:translate(-225%,-30%) scale(.72)}100%{opacity:0;transform:translate(-245%,-35%) scale(.2)}}
@keyframes thForgeMaterialTwo{0%{opacity:1;transform:translate(0,0) scale(1)}75%{opacity:1;transform:translate(-350%,-26%) scale(.72)}100%{opacity:0;transform:translate(-370%,-31%) scale(.2)}}
@keyframes thForgeMaterialThree{0%{opacity:1;transform:translate(0,0) scale(1)}75%{opacity:1;transform:translate(-465%,-24%) scale(.72)}100%{opacity:0;transform:translate(-485%,-29%) scale(.2)}}
@keyframes thForgeVesselPulse{0%,100%{filter:brightness(1)}45%{filter:brightness(1.24) saturate(1.16)}70%{filter:brightness(1.08)}}
@keyframes thForgeItemPulse{0%,100%{filter:drop-shadow(0 4px 8px rgba(0,0,0,.75))}50%{filter:drop-shadow(0 0 10px rgba(229,255,249,.95)) drop-shadow(0 0 22px rgba(109,241,229,.72))}}
@keyframes thForgeResult{0%{opacity:0;transform:scale(.72)}18%,72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.14)}}
.th-forge-stage::after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 36%,rgba(179,255,245,.42),transparent 17%),radial-gradient(ellipse at 50% 38%,rgba(112,234,224,.22),transparent 32%);}.is-enhancing .th-forge-stage{animation:thForgeVesselPulse 1.1s ease-in-out both;}.is-enhancing .th-forge-stage::after{animation:thForgeAura 1.1s ease-in-out both;}.is-enhancing .th-forge-material-1.is-picked{animation:thForgeMaterialOne 1.05s cubic-bezier(.3,.05,.6,.95) both;}.is-enhancing .th-forge-material-2.is-picked{animation:thForgeMaterialTwo 1.05s cubic-bezier(.3,.05,.6,.95) .04s both;}.is-enhancing .th-forge-material-3.is-picked{animation:thForgeMaterialThree 1.05s cubic-bezier(.3,.05,.6,.95) .08s both;}.is-enhancing .th-forge-item-slot img{animation:thForgeItemPulse .32s ease-in-out 3;}.is-forge-success .th-forge-stage::after,.is-forge-failure .th-forge-stage::after{opacity:1;animation:thForgeAura .55s ease-out both;}.is-forge-failure .th-forge-stage::after{background:radial-gradient(ellipse at 50% 36%,rgba(255,111,92,.38),transparent 18%),radial-gradient(ellipse at 50% 38%,rgba(232,66,62,.18),transparent 32%);}
@keyframes thForgeAura{0%{opacity:0}42%{opacity:1}100%{opacity:0}}
@keyframes thQualityMaterialOne{0%{opacity:1;transform:translate(0,0) scale(1)}75%{opacity:1;transform:translate(-292%,-50%) scale(.72)}100%{opacity:0;transform:translate(-312%,-58%) scale(.2)}}
@keyframes thQualityMaterialTwo{0%{opacity:1;transform:translate(0,0) scale(1)}75%{opacity:1;transform:translate(-409%,-45%) scale(.72)}100%{opacity:0;transform:translate(-429%,-53%) scale(.2)}}
@keyframes thQualityMaterialThree{0%{opacity:1;transform:translate(0,0) scale(1)}75%{opacity:1;transform:translate(-526%,-40%) scale(.72)}100%{opacity:0;transform:translate(-546%,-48%) scale(.2)}}
.th-forge-confirm-modal{position:fixed;inset:0;display:grid;place-items:end center;padding:16px 16px max(174px,calc(env(safe-area-inset-bottom) + 150px));background:transparent;}.th-forge-confirm-card{width:min(390px,92vw);padding:22px;border:1px solid rgba(225,187,86,.7);border-radius:14px;background:linear-gradient(145deg,rgba(21,52,65,.97),rgba(10,24,34,.97));box-shadow:0 18px 42px rgba(0,0,0,.52);color:#f4f1e5;text-align:center;}.th-forge-confirm-card h2{margin:0;color:#ffe7a0;font:700 25px var(--font-display);}.th-forge-confirm-card p{line-height:1.55;color:#d7e3e1;}.th-forge-confirm-card div{display:flex;justify-content:center;gap:10px;margin-top:18px;}.th-forge-confirm-card button{border:1px solid rgba(225,187,86,.65);border-radius:8px;padding:9px 14px;background:#1d3541;color:#f5e5ae;font-weight:800;cursor:pointer;}.th-forge-confirm-card .th-forge-confirm-ok{background:linear-gradient(135deg,#9c7531,#e0c461);color:#1b1608;}
@media(max-width:720px) and (orientation:portrait){[data-theme="tien_hiep"] .th-forge-scene{display:block;overflow:auto;}[data-theme="tien_hiep"] .th-forge-stage{width:720px;max-width:none;margin:calc((100dvh - 405px)/2) auto;}.th-forge-close{position:fixed;left:10px;top:10px;z-index:6;}.th-forge-equip-popover{max-height:54%;}.th-forge-equip-options span{font-size:11px;}}

/* TH4.06 — Scene Thần Khí. Empty frames come from the approved art; all
   numbers/icons are live HTML so Admin CĂN UI can reposition each group. */
[data-theme="tien_hiep"] .th-divine-forge-scene{position:fixed;inset:0;z-index:1;display:grid;place-items:center;overflow:auto;background:#071019;color:#fff}.th-divine-forge-stage{position:relative;width:min(100vw,calc(100dvh * 1.776));aspect-ratio:1672/941;background:url('../../assets/themes/tien_hiep/forge/ui_forge_divine_artifact_scene_v1.webp') center/cover no-repeat;overflow:hidden;font:600 clamp(11px,1vw,15px) var(--font-body)}.th-divine-forge-stage>*{position:absolute;z-index:1}.th-divine-forge-nav{left:2%;top:2%;display:flex;gap:.5%;z-index:12}.th-divine-forge-nav button,.th-divine-target button,.th-divine-fodders>button,.th-divine-action{border:1px solid #e1bf65;border-radius:999px;background:rgba(5,30,34,.9);color:#fff0b8;padding:.45em .8em;cursor:pointer}.th-divine-tab.is-active{background:#0f625c;color:#eaffd2;box-shadow:0 0 12px #53f1ce}.th-divine-meter{left:6%;top:23%;width:14%;height:47%;display:flex;flex-direction:column;align-items:center;gap:3%;text-align:center}.th-divine-meter output{color:#f9e09a}.th-divine-meter div{width:37%;height:69%;border:1px solid rgba(104,240,216,.8);border-radius:6px;overflow:hidden;display:flex;align-items:flex-end;background:rgba(0,16,19,.55)}.th-divine-meter i{display:block;width:100%;background:linear-gradient(#7effe4,#106464);transition:width .2s}.th-divine-meter small{font-size:.78em}.th-divine-target{left:37%;top:27%;width:25%;height:35%;text-align:center}.th-divine-target button{margin-bottom:7%;}.th-divine-target div{display:grid;place-items:center;gap:4px;color:#ffe9a4}.th-divine-target img{width:42%;height:42%;object-fit:contain}.th-divine-materials{left:63%;top:27%;width:13%;display:grid;gap:12px}.th-divine-materials label{display:grid;gap:4px;color:#e8f9e2}.th-divine-materials input{max-width:70px;border:1px solid #d8bb68;border-radius:4px;background:#092a2d;color:#fff;padding:4px}.th-divine-materials p{font-size:.76em;line-height:1.4;color:#ffe5a0}.th-divine-fodders{right:5%;top:21%;width:19%;height:50%;text-align:center}.th-divine-fodders>div{display:grid;grid-template-columns:repeat(2,1fr);gap:4%;height:84%;overflow:auto}.th-divine-item{border:1px solid rgba(231,197,107,.65);border-radius:50%;background:rgba(1,20,22,.72);color:#e9ead5;min-height:0;cursor:pointer}.th-divine-item img{width:58%;height:58%;object-fit:contain;display:block;margin:auto}.th-divine-item span{display:block;font-size:.66em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.th-divine-item.is-picked{outline:2px solid #f6df69}.th-divine-message{left:25%;bottom:7%;width:39%;min-height:6%;display:grid;place-items:center;text-align:center;color:#dfffe8;padding:1%}.th-divine-action{right:7%;bottom:7%;min-width:14%;min-height:7%;font-size:1.1em;background:rgba(121,83,13,.92)}.th-divine-action:disabled{opacity:.45;cursor:not-allowed}@media(max-width:720px) and (orientation:portrait){[data-theme="tien_hiep"] .th-divine-forge-scene{display:block;overflow:auto}.th-divine-forge-stage{width:900px;max-width:none;margin:calc((100dvh - 506px)/2) auto}}
/* TH4.06 polish: one visual Lò with a radio choice; preserve the two server-side
   progress bars, but do not present them as two separate features. */
.th-divine-forge-stage .th-forge-close{left:3%;top:4%;}
.th-divine-forge-stage .th-divine-normal{left:13%;}
.th-divine-forge-stage .th-divine-quality{left:23%;}
.th-divine-forge-stage .th-divine-gem{left:33%;}
.th-divine-forge-stage .th-divine-active{left:43%;border-color:rgba(103,222,210,.95);background:rgba(12,70,76,.9);box-shadow:0 0 8px rgba(103,222,210,.8),0 0 18px rgba(103,222,210,.42);color:#bafff5;cursor:default;}
.th-divine-kind-choice{left:4.2%;top:13%;z-index:4;width:17%;margin:0;padding:5px 8px 6px;border:1px solid rgba(225,191,101,.72);border-radius:8px;background:rgba(5,30,34,.78);color:#f9e7ad;text-align:center;font:700 clamp(9px,.78vw,13px) var(--font-body);transform:translateY(50px);}
.th-divine-kind-choice label{display:inline-flex;align-items:center;gap:2px;margin:1px 4px;cursor:pointer;white-space:nowrap;}.th-divine-kind-choice input{accent-color:#67ded2;}
.th-divine-meter{position:relative;}.th-divine-meter output{position:absolute;z-index:2;left:50%;top:48%;width:max-content;padding:3px 6px;border:1px solid rgba(220,190,105,.7);border-radius:5px;background:rgba(4,24,27,.82);font-weight:800;transform:translate(-50%,-50%);}.th-divine-meter>div{margin-top:0;transform:translateY(22px);}.th-divine-meter small{margin-top:auto;transform:translateY(-35px);}
.th-divine-materials{row-gap:70px;}.th-divine-materials label{position:relative;grid-template-columns:1fr;justify-items:center;gap:1px;cursor:help;}.th-divine-materials label img{width:clamp(63px,6.6vw,108px);height:clamp(63px,6.6vw,108px);object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.82));}.th-divine-materials [data-divine-material="talisman"] img{transform:translateY(-23px);}.th-divine-materials label span{display:none;}.th-divine-materials label input{width:54px;max-width:100%;}.th-divine-materials [data-divine-material="talisman"] input{transform:translateY(-20px);}.th-divine-materials [data-divine-material="talisman"] p{position:absolute;z-index:2;left:50%;top:calc(clamp(63px,6.6vw,108px) + 10px);width:max-content;min-width:136px;display:grid;gap:3px;margin:0;padding:5px 7px;border:1px solid rgba(174,184,184,.56);border-radius:5px;background:rgba(0,0,0,.84);color:#fff3c8;text-align:center;line-height:1.3;transform:translateX(-50%);}.th-divine-materials [data-divine-talisman-note]{display:block;font-size:.92em;}
.th-divine-fodders>div{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:min-content;gap:4px 3px;padding:2px 1px;align-content:start;background:rgba(4,19,23,.96);border-radius:6px;}.th-divine-item{position:relative;display:block;aspect-ratio:1;margin:0;padding:1px;border:1px solid color-mix(in srgb,var(--th-divine-quality) 85%,#fff 15%);border-radius:6px;background:radial-gradient(circle,rgba(255,255,255,.11),rgba(1,20,22,.74) 68%);box-shadow:0 0 6px var(--th-divine-quality-glow),inset 0 0 5px rgba(0,0,0,.68);overflow:visible;}.th-divine-item:hover{filter:brightness(1.17);}.th-divine-item img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.78));}.th-divine-item b{position:absolute;right:-5%;top:-8%;z-index:2;min-width:1.45em;padding:0 2px;border:1px solid rgba(255,231,120,.86);border-radius:4px;background:rgba(4,18,23,.92);color:#ffe777;font:800 clamp(7px,.65vw,11px) var(--font-body);line-height:1.25;text-shadow:0 1px 2px #000;}.th-divine-item.is-picked{outline:2px solid #f6df69;box-shadow:0 0 9px rgba(255,225,105,.96),inset 0 0 5px rgba(0,0,0,.68);}.th-divine-fodders em{grid-column:1/-1;margin-top:14%;font-size:.82em;color:#d6e7df;}
.th-divine-forge-stage::after{content:"";position:absolute;z-index:3;inset:0;opacity:0;pointer-events:none;background:radial-gradient(ellipse at 49% 43%,rgba(179,255,245,.42),transparent 17%),radial-gradient(ellipse at 49% 43%,rgba(112,234,224,.22),transparent 32%);}.is-divine-feeding .th-divine-forge-stage{animation:thForgeVesselPulse 1.1s ease-in-out both;}.is-divine-feeding .th-divine-forge-stage::after{animation:thForgeAura 1.1s ease-in-out both;}.is-divine-feeding .th-divine-item.is-picked{animation:thForgeItemPulse .32s ease-in-out 3;}.is-divine-feeding .th-divine-meter{animation:thForgeItemPulse .32s ease-in-out 3;}
[data-theme="tien_hiep"] .th-quality-scene{position:fixed;inset:0;z-index:1;display:grid;place-items:center;overflow:auto;background:#071019;color:#fff}.th-quality-stage{position:relative;width:min(100vw,calc(100dvh * 1.776));aspect-ratio:1672/941;background:url('../../assets/themes/tien_hiep/forge/ui_forge_quality_ascension_scene_v1.webp') center/100% 100% no-repeat;overflow:hidden}.th-quality-close,.th-quality-forge,.th-quality-tab{position:absolute;z-index:3;top:4%;border:1px solid rgba(231,197,107,.7);border-radius:999px;padding:8px 13px;background:rgba(7,19,28,.85);color:#f9e7ad;font-weight:800;cursor:pointer}.th-quality-close{left:3%}.th-quality-forge{left:13%}.th-quality-tab{left:23%}.th-quality-heading{position:absolute;left:35%;top:calc(75% + 80px);width:30%;margin:0;text-align:center;color:#ffe7a0;font:700 clamp(11px,.9vw,15px) var(--font-display);text-shadow:0 2px 7px #000}.th-quality-target{position:absolute;left:calc(5% + 10px);top:calc(38% - 10px);width:25%;height:12%;border:0;background:transparent;color:#e8f6f0;font:700 clamp(12px,1.1vw,18px) var(--font-body);cursor:pointer;text-shadow:0 2px 5px}.th-quality-target-view{position:absolute;left:5%;top:24%;width:25%;height:35%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;pointer-events:none}.th-quality-target-view img{max-width:52%;max-height:72%;object-fit:contain;filter:drop-shadow(0 4px 8px #000)}.th-quality-picker{position:absolute;z-index:5;left:3%;top:12%;width:32%;max-height:54%;overflow:auto;padding:12px;border:1px solid #c7a75a;border-radius:12px;background:rgba(5,20,28,.96)}.th-quality-picker button{display:flex;align-items:center;gap:6px;width:100%;margin:5px 0;padding:5px;border:1px solid #548277;border-radius:7px;background:#14393b;color:#fff;text-align:left;cursor:pointer}.th-quality-picker img{width:32px;height:32px;object-fit:contain}.th-quality-picker .is-selected{outline:2px solid #ffe46d}.th-quality-fodders{position:absolute;left:66%;top:21%;width:28%;height:29%;display:grid;grid-template-columns:repeat(3,1fr);gap:2%}.th-quality-fodder{border:0;background:transparent;color:#e6d58e;font-weight:800;cursor:pointer}.th-quality-fodder.is-locked{opacity:.28;cursor:default}.th-quality-fodder img{width:65%;height:65%;object-fit:contain}.th-quality-materials{position:absolute;left:calc(66% + 15px);top:60%;width:22%;display:flex;justify-content:space-between}.th-quality-materials label{position:relative;width:30%;text-align:center}.th-quality-materials img{width:70%;aspect-ratio:1;object-fit:contain}.th-quality-materials input{width:58%;padding:2px;border:1px solid #b99e56;border-radius:4px;background:#08191e;color:#fff;text-align:center}.th-quality-materials small{display:block;font-size:10px}.th-quality-talisman{position:absolute;left:90%;top:calc(60% - 10px);width:5%;height:14%;border:0;background:transparent;color:#f9e7ad;font-size:clamp(8px,.7vw,12px);cursor:pointer}.th-quality-talisman img{width:88%;height:72%;object-fit:contain;display:block;margin:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.65))}.th-quality-talisman .th-quality-talisman-label{display:block}.th-quality-talisman.is-active{filter:drop-shadow(0 0 8px #fff06a);color:#fff36d}.th-quality-rate{position:absolute;left:45%;top:34%;width:10%;text-align:center;font-weight:800;font-size:clamp(11px,1vw,17px);text-shadow:0 2px 5px #000}.th-quality-blessing{position:absolute;left:28%;top:calc(84% - 5px);width:44%;text-align:center;color:#bafff6;font-weight:800;font-size:clamp(10px,.95vw,15px);text-shadow:0 2px 5px #000}.th-quality-action{position:absolute;left:80%;top:calc(79% - 5px);width:10%;height:10%;border:0;border-radius:50%;background:transparent;color:#f4f7f2;font-weight:800;cursor:pointer}.th-quality-action:not(:disabled):hover{filter:drop-shadow(0 0 8px #fff)}.th-quality-action:disabled{opacity:.4}.th-quality-result{position:absolute;left:38%;top:47%;width:24%;text-align:center;color:#fff4a0;font:800 clamp(13px,1.3vw,21px) var(--font-display);text-shadow:0 2px 8px #000}
.th-quality-tab.is-active{border-color:rgba(103,222,210,.95);background:rgba(12,70,76,.9);box-shadow:0 0 8px rgba(103,222,210,.8),0 0 18px rgba(103,222,210,.42);color:#bafff5}.th-quality-materials label{cursor:help}.th-quality-talisman{cursor:help}.th-quality-target{left:calc(5% + 15px)}.th-quality-heading{top:calc(75% + 75px)}.th-quality-materials{justify-content:center;gap:8px}
.th-quality-gem{position:absolute;z-index:3;left:33%;top:4%;border:1px solid rgba(231,197,107,.7);border-radius:999px;padding:8px 13px;background:rgba(7,19,28,.85);color:#f9e7ad;font-weight:800;cursor:pointer}.th-quality-divine{left:43%;}
.th-gem-divine-tab{left:43%;}
.th-quality-materials label{position:relative}.th-quality-materials label[data-quality-material-index="1"] img,.th-quality-materials label[data-quality-material-index="2"] img{transform:translateX(10px)}.th-quality-materials label small{position:absolute;right:1%;top:1%;z-index:2;min-width:16px;padding:1px 3px;border-radius:999px;background:rgba(3,16,20,.86);color:#d8f7ef;font-size:clamp(9px,.75vw,12px);line-height:1.15}.th-quality-materials label[data-quality-material-index="2"] input,.th-quality-materials label[data-quality-material-index="3"] input{transform:translateX(-3px)}
.th-quality-materials label[data-quality-material-index="1"] img{transform:translateX(12px)}.th-quality-materials label[data-quality-material-index="2"] img{transform:translateX(8px)}.th-quality-materials label[data-quality-material-index="3"] img{transform:translateX(2px)}.th-quality-materials label[data-quality-material-index="1"] input{transform:translateX(2px)}.th-quality-materials label[data-quality-material-index="3"] input{transform:translateX(-5px)}.th-quality-target{color:#e5f4ec;text-shadow:none}.th-quality-talisman img{width:79.2%;height:64.8%;transform:translateY(-6px)}.th-quality-talisman small{display:block;transform:translateY(-8px);font-size:clamp(9px,.8vw,13px);font-weight:800;color:#f9e7ad;-webkit-text-stroke:.5px #000;text-shadow:1px 1px 1px #000,-1px -1px 1px #000}
.th-quality-fodder img{transform:translate(10px,-10px)}
.th-quality-fodder:nth-child(3n+1) img{transform:translate(20px,-10px)}
.th-quality-fodder:nth-child(3n) img{transform:translate(-3px,-10px)}
.th-quality-fodders{transform:translate(20px,-2px)}
.th-quality-fodder.is-preview-empty{opacity:.42}
.th-quality-fodder.is-preview-empty:nth-child(3n+1){transform:translateX(3px)}
.th-quality-fodder.is-preview-empty:nth-child(3n+2){transform:translateX(-8px)}
.th-quality-fodder.is-preview-empty:nth-child(3n){transform:translateX(-24px)}
.th-quality-fodder:not(.is-preview-empty):not(:has(img)):nth-child(3n+1){transform:translate(3px,-10px)}
.th-quality-fodder:not(.is-preview-empty):not(:has(img)):nth-child(3n+2){transform:translate(-8px,-10px)}
.th-quality-fodder:not(.is-preview-empty):not(:has(img)):nth-child(3n){transform:translate(-24px,-10px)}
.th-quality-target{transform:translateY(-9px)}
.th-quality-action{transform:translate(-3px,-5px)}
.th-equip-tooltip-equipped{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:2;width:max-content;padding:2px 8px;border-radius:999px;color:#ffe56a;font-size:11px;font-weight:800;text-align:center;text-shadow:0 1px 3px #000}.th-quality-target-view{cursor:pointer;pointer-events:auto}.th-quality-target-view img{transform:translateX(10px)}.th-quality-fodder{position:relative}.th-quality-fodder.th-forge-fodder-item{cursor:pointer}.th-quality-fodder.th-forge-fodder-item:hover{filter:brightness(1.18) drop-shadow(0 0 5px rgba(255,233,123,.75))}.th-quality-picker .th-forge-picker-item{position:relative}.th-quality-picker .th-forge-picker-item.is-selected{opacity:.48;filter:saturate(.6)}
.th-quality-result{opacity:0;pointer-events:none}
.th-quality-stage::after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 18% 40%,rgba(179,255,245,.42),transparent 20%),radial-gradient(ellipse at 18% 42%,rgba(112,234,224,.22),transparent 35%)}
.is-quality-upgrading .th-quality-stage{animation:thForgeVesselPulse 1.1s ease-in-out both}
.is-quality-upgrading .th-quality-stage::after{animation:thForgeAura 1.1s ease-in-out both}
.is-quality-upgrading .th-quality-target-view img{animation:thForgeItemPulse .32s ease-in-out 3}
.is-quality-upgrading .th-quality-materials label[data-quality-material-index="1"].is-picked{animation:thQualityMaterialOne 1.05s cubic-bezier(.3,.05,.6,.95) both}
.is-quality-upgrading .th-quality-materials label[data-quality-material-index="2"].is-picked{animation:thQualityMaterialTwo 1.05s cubic-bezier(.3,.05,.6,.95) .04s both}
.is-quality-upgrading .th-quality-materials label[data-quality-material-index="3"].is-picked{animation:thQualityMaterialThree 1.05s cubic-bezier(.3,.05,.6,.95) .08s both}
.is-quality-success .th-quality-result,.is-quality-failure .th-quality-result{animation:thForgeResult 1.65s ease both}
.is-quality-success .th-quality-result{color:#eaffcf}
.is-quality-failure .th-quality-result{color:#ffb5ad}
.is-quality-success .th-quality-stage::after,.is-quality-failure .th-quality-stage::after{opacity:1;animation:thForgeAura .55s ease-out both}
.is-quality-failure .th-quality-stage::after{background:radial-gradient(ellipse at 18% 40%,rgba(255,111,92,.38),transparent 20%),radial-gradient(ellipse at 18% 42%,rgba(232,66,62,.18),transparent 35%)}
/* Keep the quality-forge artwork and interactive anchors at their authored scale
   on portrait screens, matching the enhancement forge behavior. */
@media(max-width:720px) and (orientation:portrait){
  [data-theme="tien_hiep"] .th-quality-scene{display:block;overflow:auto;}
  [data-theme="tien_hiep"] .th-quality-stage{width:720px;max-width:none;margin:calc((100dvh - 405px)/2) auto;}
  [data-theme="tien_hiep"] .th-quality-close{position:fixed;left:10px;top:10px;z-index:6;}
  [data-theme="tien_hiep"] .th-quality-target{left:calc(5% + 10px);top:calc(38% - 10px);transform:none;}
  [data-theme="tien_hiep"] .th-quality-heading{top:calc(75% + 80px);}
  [data-theme="tien_hiep"] .th-quality-materials{left:calc(66% + 15px);justify-content:space-between;gap:0;}
  [data-theme="tien_hiep"] .th-quality-materials label img,
  [data-theme="tien_hiep"] .th-quality-materials label[data-quality-material-index="1"] img,
  [data-theme="tien_hiep"] .th-quality-materials label[data-quality-material-index="2"] img,
  [data-theme="tien_hiep"] .th-quality-materials label[data-quality-material-index="3"] img,
  [data-theme="tien_hiep"] .th-quality-fodder img,
  [data-theme="tien_hiep"] .th-quality-fodder:nth-child(3n + 1) img,
  [data-theme="tien_hiep"] .th-quality-fodder:nth-child(3n) img,
  [data-theme="tien_hiep"] .th-quality-target-view img{transform:none;}
  [data-theme="tien_hiep"] .th-quality-materials label[data-quality-material-index="1"] input,
  [data-theme="tien_hiep"] .th-quality-materials label[data-quality-material-index="2"] input,
  [data-theme="tien_hiep"] .th-quality-materials label[data-quality-material-index="3"] input,
  [data-theme="tien_hiep"] .th-quality-talisman small,
  [data-theme="tien_hiep"] .th-quality-fodders,
  [data-theme="tien_hiep"] .th-quality-action{transform:none;}
  [data-theme="tien_hiep"] .th-quality-talisman img{width:88%;height:72%;transform:none;}
  [data-theme="tien_hiep"] .th-quality-fodder.is-preview-empty:nth-child(1),
  [data-theme="tien_hiep"] .th-quality-fodder.is-preview-empty:nth-child(2),
  [data-theme="tien_hiep"] .th-quality-fodder.is-preview-empty:nth-child(3),
  [data-theme="tien_hiep"] .th-quality-fodder.is-preview-empty:nth-child(4),
  [data-theme="tien_hiep"] .th-quality-fodder.is-preview-empty:nth-child(5),
  [data-theme="tien_hiep"] .th-quality-fodder.is-preview-empty:nth-child(6),
  [data-theme="tien_hiep"] .th-quality-fodder:not(.is-preview-empty):not(:has(img)):nth-child(1),
  [data-theme="tien_hiep"] .th-quality-fodder:not(.is-preview-empty):not(:has(img)):nth-child(2),
  [data-theme="tien_hiep"] .th-quality-fodder:not(.is-preview-empty):not(:has(img)):nth-child(3),
  [data-theme="tien_hiep"] .th-quality-fodder:not(.is-preview-empty):not(:has(img)):nth-child(4),
  [data-theme="tien_hiep"] .th-quality-fodder:not(.is-preview-empty):not(:has(img)):nth-child(5),
  [data-theme="tien_hiep"] .th-quality-fodder:not(.is-preview-empty):not(:has(img)):nth-child(6){transform:none;}
}
.th-equip-detail-actions{margin-top:6px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;}
.th-equip-detail-actions .btn{min-width:0;width:100%;min-height:36px;padding:0 6px;gap:3px;font-size:11px;letter-spacing:0;text-transform:none;white-space:nowrap;border:1px solid rgba(250,222,144,.88);box-shadow:inset 0 0 0 1px rgba(74,44,12,.45),0 2px 6px rgba(0,0,0,.38);}
.th-equip-detail-actions .btn[hidden]{display:none;}
.th-equip-detail-gold-icon{display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;}
.th-equip-detail-gold-icon :is(img,svg){display:block;width:14px;height:14px;object-fit:contain;}
/* JOB_TH2_08c (2026-09-08, PQ-50 — hiệu ứng bằng code, không vẽ ảnh riêng):
   loé sáng NHẸ đúng 2 nhịp rồi tự tắt hẳn (animation-iteration-count:2,
   KHÔNG infinite — đây là báo hiệu "vừa mở khoá", không phải hào quang
   thường trực) khi 1 ô vừa chuyển từ khoá sang mở. */
@keyframes thNewUnlockPulse{
  0%,100%{filter:drop-shadow(0 3px 8px rgba(4,7,10,.75));}
  50%{filter:drop-shadow(0 3px 8px rgba(4,7,10,.75)) drop-shadow(0 0 10px #FFD666) drop-shadow(0 0 18px #FFD666);}
}
.th-equip-item.is-newly-unlocked .th-equip-item-frame{
  animation:thNewUnlockPulse 0.9s ease-in-out 2;
}
/* Owner 2026-09-08: "ô Thú Cưỡi chưa có Thần Thú phải hiện dấu + giống các ô
   trống khác — bấm vào MỚI hiện bảng chọn, không hiện thường trực dưới icon
   (đúng quy ước MMO)." Bảng chọn giờ là POPUP nổi phía trên ô, ẩn mặc định
   qua thuộc tính [hidden] — JS toggle khi bấm icon, đóng khi bấm ra ngoài.
   `.th-equip-item` cần position:relative để popup neo đúng vào đây (popup
   là con trực tiếp, đứng sau `.th-equip-item-row` trong DOM). */
.th-equip-item{position:relative;}
.th-equip-item-pick-popup{
  position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);
  z-index:5;display:flex;align-items:center;gap:4px;
  background:rgba(4,7,10,.92);border:1px solid var(--border-strong);border-radius:10px;
  padding:6px 8px;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.th-equip-item-pick-popup[hidden]{display:none;}
.th-equip-item-pick-popup select{
  max-width:80px;font-size:9px;padding:1px 2px;border-radius:4px;
  border:1px solid var(--border-strong);background:rgba(4,7,10,.55);color:#fff;
}
.th-equip-item-pick-popup button{
  flex-shrink:0;width:17px;height:17px;border-radius:50%;border:0;
  background:var(--accent-2);color:var(--on-primary);font-size:10px;line-height:1;
  cursor:pointer;display:grid;place-items:center;padding:0;
}

/* Tooltip dùng chung, viền tô theo màu phẩm chất (PQ-25) — chỉ hiện khi rê
   chuột vào ô, KHÔNG chiếm chỗ cố định trên giao diện. */
/* Owner 2026-09-08: "tooltip tràn ra ngoài mất nội dung" — 2 phần: (1) JS
   giờ đã kẹp vị trí trong khung nhìn (_thWireEquipTooltips), nhưng (2)
   white-space:nowrap trước đó khiến CHỮ vẫn tràn khỏi khung dù box đo
   đúng max-width:200px (nowrap không co chữ lại theo box) — đổi sang
   normal để chữ tự xuống dòng, offsetWidth mới phản ánh đúng kích thước
   thật, JS kẹp mới chính xác. */
.th-equip-tooltip{
  position:fixed;z-index:10050;pointer-events:none;
  display:none;width:min(244px,calc(100vw - 16px));max-width:344px;
  max-height:calc(100dvh - 16px);overflow-y:auto;overflow-x:hidden;padding:8px 12px;
  background:color-mix(in srgb,var(--bg) 70%,transparent);
  border:2px solid #B8B8B8;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  font-family:var(--font-body);font-size:13px;line-height:1.45;color:#f4f1e5;
  text-align:center;white-space:normal;
}
.th-equip-tooltip.is-preview{width:min(344px,calc(100vw - 16px));}
.th-equip-tooltip-art{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 8px;
}
.th-equip-tooltip-art.is-preview{width:100%;height:min(320px,62vw);}
.th-equip-tooltip-art.is-icon{
  width:200px;height:200px;max-width:100%;
  /* Ô khóa/trống dùng icon xám. Ánh trắng dịu chỉ tăng tương phản, không
     tạo khung viền mới quanh ảnh. */
  background:radial-gradient(circle,rgba(255,255,255,.42) 0%,rgba(236,242,252,.16) 66%,transparent 72%);
}
/* Owner: ảnh lớn trong tooltip (điểm code TẬP TRUNG — Engine._thWireEquipTooltips,
   dùng chung cho 12 ô Trang Bị/Rương/Cường Hóa/Dung Luyện/Cửa Hàng...) sáng
   nhẹ lên + quầng sáng BÁM SÁT theo hình dạng ảnh thật (drop-shadow theo
   alpha) chứ không tỏa tràn ra ngoài khung; màu theo phẩm chất qua --th-q-glow
   set inline ngay trên .th-equip-tooltip-art. */
@keyframes thEquipTooltipArtGlow{
  0%,100%{filter:brightness(1.015) drop-shadow(0 0 3px color-mix(in srgb,var(--th-q-glow,transparent) 38%,transparent)) drop-shadow(0 0 5px color-mix(in srgb,var(--th-q-glow,transparent) 38%,transparent));}
  50%{filter:brightness(1.045) drop-shadow(0 0 3px color-mix(in srgb,var(--th-q-glow,transparent) 62%,transparent)) drop-shadow(0 0 5px color-mix(in srgb,var(--th-q-glow,transparent) 62%,transparent));}
}
.th-equip-tooltip-art img{width:100%;height:100%;display:block;object-fit:contain;animation:thEquipTooltipArtGlow 3s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){.th-equip-tooltip-art img{animation:none;filter:brightness(1.02) drop-shadow(0 0 3px color-mix(in srgb,var(--th-q-glow,transparent) 45%,transparent)) drop-shadow(0 0 5px color-mix(in srgb,var(--th-q-glow,transparent) 45%,transparent));}}
@keyframes thEquipHoverFireflyDrift{
  0%{transform:translate(0,0) scale(.6);opacity:.2;}
  20%{transform:translate(calc(var(--dx) * .25),calc(var(--dy) * -.55)) scale(.88);opacity:.75;}
  40%{transform:translate(calc(var(--dx) * .85),calc(var(--dy) * .15)) scale(1);opacity:1;}
  60%{transform:translate(calc(var(--dx) * .45),var(--dy)) scale(.9);opacity:.8;}
  80%{transform:translate(calc(var(--dx) * -.25),calc(var(--dy) * .55)) scale(.72);opacity:.45;}
  100%{transform:translate(0,0) scale(.6);opacity:.2;}
}
.th-equip-hover-fireflies{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible;--th-firefly:#9cf8ed;--th-firefly-glow:rgba(127,255,238,.8);}
.th-equip-hover-fireflies i{position:absolute;left:var(--x);top:var(--y);width:clamp(2px,.35vw,4px);height:clamp(2px,.35vw,4px);border-radius:50%;background:var(--th-firefly);box-shadow:0 0 3px 1px var(--th-firefly-glow),0 0 7px 2px var(--th-firefly-glow);animation:thEquipHoverFireflyDrift var(--duration) ease-in-out var(--delay) infinite backwards;}
@media(prefers-reduced-motion:reduce){.th-equip-hover-fireflies i{animation:none;opacity:.65;}}
.th-equip-tooltip,.th-equip-tooltip *{pointer-events:none!important;}
.th-equip-tooltip-title{margin:0 0 4px;color:#FFD666;font-size:15px;font-weight:800;line-height:1.35;text-align:center;}
.th-equip-tooltip-stars{height:28px;margin:0 0 5px;display:flex;align-items:center;justify-content:center;gap:2px;}.th-equip-tooltip-stars img{width:25px;height:25px;object-fit:contain;}.th-equip-tooltip-quality{margin:0 0 4px;font-weight:800;text-align:center;}
.th-equip-tooltip-identity{margin:0 0 5px;color:#f3d88a;font-size:13px;font-weight:800;text-align:center;line-height:1.45;}
.th-equip-tooltip-seller{margin:0 0 5px;color:#d8e3e5;font-size:13px;font-weight:700;text-align:center;line-height:1.45;}
.th-equip-tooltip-gems{display:flex;flex-wrap:wrap;max-width:142px;justify-content:center;gap:2px 3px;margin:-3px auto 5px;}
.th-equip-tooltip-gems img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.72));}
.th-equip-tooltip-gem-detail{margin:0 0 5px;color:#f4f1e5;font-size:13px;font-weight:600;line-height:1.45;text-align:center;white-space:pre-line;}
.th-equip-tooltip-power{margin:0 0 5px;color:#ffd666;font-size:13px;font-weight:800;line-height:1.4;text-align:center;}
.th-equip-tooltip-requirements{margin:0 0 4px;color:#d8e3e5;font-size:13px;font-weight:600;text-align:center;white-space:pre-line;line-height:1.45;}
.th-equip-tooltip-detail{color:#f4f1e5;font-size:13px;font-weight:500;text-align:center;white-space:pre-line;line-height:1.55;}
.th-equip-compare-arrow{display:inline-block;margin-left:4px;font-size:11px;font-weight:900;}
.th-equip-compare-arrow.is-better{color:#4ddc7a;}
.th-equip-compare-arrow.is-worse{color:#ff5c5c;}
.th-equip-compare-value{margin-left:2px;font-size:12px;font-weight:700;color:#ff8a8a;}
.th-equip-compare-arrow.is-better+.th-equip-compare-value{color:#7be8a0;}
.th-equip-tooltip.is-pet-full{width:min(344px,calc(100vw - 16px));max-height:calc(100dvh - 16px);}
.th-pet-tooltip-full{display:grid;gap:7px;text-align:left;}
.th-pet-tooltip-art{height:128px;margin:0;overflow:hidden;background:transparent;text-align:center;}
.th-pet-tooltip-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));}
.th-pet-tooltip-full .th-equip-tooltip-title{margin:0;text-align:center;}
.th-pet-tooltip-quality{font-size:13px;font-weight:800;line-height:1.4;text-align:center;}
.th-pet-tooltip-species,.th-pet-tooltip-stage,.th-pet-tooltip-element{text-align:center;color:#f4f1e5;font-size:13px;font-weight:600;line-height:1.4;}
.th-pet-tooltip-element b{color:#fff;}
.th-pet-tooltip-exp{display:grid;grid-template-columns:1fr auto;gap:3px 8px;padding:6px 8px;border:1px solid color-mix(in srgb,var(--border) 75%,transparent);border-radius:7px;font-size:12px;font-weight:700;}
.th-pet-tooltip-exp i{grid-column:1/-1;display:block;height:5px;overflow:hidden;border-radius:999px;background:rgba(0,0,0,.32);}.th-pet-tooltip-exp i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#a855f7,#d946ef);}
.th-pet-tooltip-section{padding:7px 8px;border:1px solid color-mix(in srgb,var(--border) 75%,transparent);border-radius:7px;}.th-pet-tooltip-section em{display:block;margin:0 0 5px;color:#d8e3e5;font-size:12px;font-style:normal;font-weight:800;text-transform:uppercase;}
.th-pet-tooltip-vital{display:grid;grid-template-columns:82px 1fr 42px;align-items:center;gap:5px;margin:3px 0;color:#f4f1e5;font-size:12px;}.th-pet-tooltip-vital i{height:5px;overflow:hidden;border-radius:999px;background:rgba(0,0,0,.32);}.th-pet-tooltip-vital i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#22c55e,#eab308);}.th-pet-tooltip-vital strong{text-align:right;font-size:12px;}
.th-pet-tooltip-skills>div{display:flex;flex-wrap:wrap;gap:5px;}.th-pet-tooltip-skill{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:3px 5px;border-radius:6px;background:rgba(16,185,129,.12);font-size:11px;}.th-pet-tooltip-skill img{width:22px;height:22px;object-fit:contain;border-radius:4px;}.th-pet-tooltip-skill b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.th-pet-tooltip-skill em{display:inline;margin:0;color:#8be3a4;font-size:10px;font-weight:700;text-transform:none;white-space:nowrap;}
.th-pet-tooltip-power{margin-bottom:6px;color:#fcd34d;font-size:13px;font-weight:800;line-height:1.4;text-align:center;}.th-pet-tooltip-combat{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}.th-pet-tooltip-combat>div{padding:4px 2px;border-radius:5px;background:rgba(255,255,255,.05);text-align:center;}.th-pet-tooltip-combat span,.th-pet-tooltip-combat strong{display:block;color:#f4f1e5;font-size:12px;}.th-pet-tooltip-combat strong{margin-top:2px;font-weight:800;}
@media (max-width:600px){
  .th-equip-tooltip{width:min(184px,calc(100vw - 24px));max-height:calc(100dvh - 24px);}
  .th-equip-tooltip.is-preview{width:min(260px,calc(100vw - 24px));}
  .th-equip-tooltip-art.is-preview{height:min(240px,62vw);}
  .th-equip-tooltip-art.is-icon{width:160px;height:160px;}
}
/* Owner 2026-09-08: "tooltip Rương mờ 50% giống tooltip Trang Bị" — .item-
   tooltip là style DÙNG CHUNG toàn site (style.css, mọi theme) nên KHÔNG
   sửa thẳng ở đó (sẽ ảnh hưởng cả kid/pro) — khoanh vùng riêng theme Tiên
   Hiệp, cùng công thức color-mix với .th-equip-tooltip ở trên. CHỈ đổi
   background — không đụng font/text-align gốc của .item-tooltip. */
[data-theme="tien_hiep"] .item-tooltip{
  background:color-mix(in srgb,var(--bg) 70%,transparent);
  font-family:var(--font-body);font-size:13px;line-height:1.45;color:#f4f1e5;
}
/* Owner 2026-09-08: "tên vật phẩm màu vàng, mô tả màu trắng" — CHỈ áp cho
   tên (dòng <b> đầu tiên) và mô tả (<p>). Dùng combinator ">" (CON TRỰC
   TIẾP) chứ không phải descendant thường — nếu chỉ ".item-tooltip b" sẽ
   bắt luôn cả <b> bên trong .item-tooltip-row (2 dòng "Thuộc tính"/"Hạn
   dùng" lồng bên trong), lại có độ đặc thù cao hơn nên đè mất màu gốc của
   chúng — dùng ">" giới hạn đúng CON TRỰC TIẾP của .item-tooltip mới an
   toàn, không đụng .item-tooltip-row b. */
[data-theme="tien_hiep"] .item-tooltip > .item-tooltip-title{color:#FFD666;font-size:15px;font-weight:800;line-height:1.35;}
[data-theme="tien_hiep"] .item-tooltip > p{color:#f4f1e5;font-size:13px;font-weight:500;line-height:1.5;}
/* Owner 2026-09-08 (sửa lại): hiểu nhầm — Owner muốn đổi màu 2 CHỮ NHÃN
   "Thuộc tính"/"Hạn dùng" (.item-tooltip-row span), KHÔNG phải phần GIÁ
   TRỊ (.item-tooltip-row b, ví dụ "✅ Giao dịch được") — giá trị giữ
   nguyên màu gốc (color:var(--text) từ style.css, không cần khai báo lại
   ở đây vì không còn override nào chồng lên nữa). */
[data-theme="tien_hiep"] .item-tooltip-row{font-size:13px;line-height:1.45;}
[data-theme="tien_hiep"] .item-tooltip-row span{color:#78b8ff;font-weight:700;}
[data-theme="tien_hiep"] .item-tooltip-gem-use{color:#9cf0d7;}
[data-theme="tien_hiep"] .item-tooltip-row--gem span{color:#a4dcff;}
[data-theme="tien_hiep"] .item-tooltip-gem-value--max_hp{color:#ff9da8;}
[data-theme="tien_hiep"] .item-tooltip-gem-value--atk_min,[data-theme="tien_hiep"] .item-tooltip-gem-value--atk_max{color:#ffc26b;}
[data-theme="tien_hiep"] .item-tooltip-gem-value--def{color:#9fc5ff;}
[data-theme="tien_hiep"] .item-tooltip-gem-value--move_speed_permille{color:#72efd2;}
[data-theme="tien_hiep"] .item-tooltip-gem-value--dodge{color:#d7a5ff;}
[data-theme="tien_hiep"] .item-tooltip-gem-power{color:#ffe36d;}
.th-equip-tooltip.is-visible{display:block;}
.th-equip-tooltip.is-forge-tooltip{z-index:10050;}

/* Vũ khí bay lơ lửng bên PHẢI nhân vật (PQ-46, nhìn từ ngoài vào — nghĩa là
   bên phải màn hình), chỉ hiện khi ô Vũ Khí đã mở — dùng đúng ảnh
   `proof_weapon_bay.png` đã vẽ sẵn từ GĐ1 (JOB_TH1_01). Thú Cưỡi bay ĐỐI
   XỨNG bên trái (Owner 2026-09-06), dùng ảnh "idle" thật của Thần Thú đang
   kích hoạt (đã có sẵn trong hệ Thần Thú, `pet_species_assets`) — không vẽ
   thêm tài sản mới. Cả hai nằm GIỮA rail và nhân vật (14% < rail 24%). */
.hero-tienhiep .th-equip-weapon-float{
  display:none;position:absolute;bottom:calc(var(--ch-h, 56vh) * 0.4);
  /* Owner 2026-09-15: "cho cây Vũ Khí lớn thêm 10%" — 0.4→0.44. */
  height:calc(var(--ch-h, 56vh) * 0.44);width:auto;z-index:1;pointer-events:none;
  /* Owner 2026-09-15: "cách nhân vật 20px" — đổi từ right:14% (theo mép màn
     hình, trôi xa nhân vật ở màn rộng) sang left tính từ TÂM nhân vật, dùng
     đúng ước lượng mép nhân vật ~ch-h*0.19 đã có sẵn (xem ghi chú mount bên
     dưới) + 20px cách.
     Owner 2026-09-15 (đợt 2, sau khi hiện cả ở Sảnh Chính): "cách xa quá" —
     giảm 20px→10px.
     Owner 2026-09-15 (đợt 3): "do ảnh PNG có khoảng trống rìa nên vẫn thấy
     xa" — cho sát 0px luôn.
     Owner 2026-09-15 (đợt 4): "gần lại tiếp -20px".
     Owner 2026-09-15 (đợt 5, sau khi đồng bộ Sảnh Chính/Trang Bị): "gần lại
     20px nữa" — -20px→-40px.
     Owner 2026-09-15 (đợt 6): "vẫn còn xa" — ảnh PNG proof_weapon_bay.png
     có viền trong suốt rộng hơn hẳn ảnh Thần Thú nên cùng khoảng lệch tâm
     vẫn trông xa hơn — gần thêm 30px nữa, -40px→-70px. */
  left:calc(50% + var(--khoiA-shift-x) + (var(--ch-h, 56vh) * 0.19) - 70px);
  /* Owner 2026-09-15: "đứng thẳng, không nghiêng" — bỏ transform:rotate(18deg)
     cũ. display:inline-flex (thay vì block) để width:auto tự co khít theo
     ảnh bên trong (div không có tỷ lệ khung hình như <img>, cần shrink-to-fit
     qua flex mới giữ đúng kích thước như trước). */
  align-items:center;justify-content:center;
}
.hero-tienhiep .th-equip-weapon-float img{
  height:100%;width:auto;display:block;
  /* Owner 2026-09-15: "bản thân cây vũ khí cũng phát quang nhẹ" — lấy đúng
     công thức thEquipTooltipArtGlow (ảnh trang bị trong tooltip) áp lên
     đây, cộng thêm lớp bóng đổ gốc (0 8px 16px đen) vào CÙNG animation vì
     filter không cộng dồn được giữa khai báo tĩnh và animation riêng. */
  animation:thAuraWithShadow 3.2s ease-in-out infinite;
}
/* Owner 2026-09-19: hào quang kiểu Phi Kiếm (2 lớp 10px + 22px màu Phẩm Chất,
   thở nhẹ) áp cho Vũ Khí + Thần Thú ở Sảnh Chính/Nhân Vật, GIỮ bóng đổ đen
   gốc bên dưới (filter không cộng dồn giữa khai báo tĩnh và animation nên gộp
   chung 1 keyframe). Thay cho quầng nhạt cũ (thEquipWeaponFloatGlow /
   thMountGlowPulse). */
/* Owner 2026-09-19: Thần Thú sáng quá đậm — bản NHẸ của thAuraWithShadow
   (bán kính 1/2 và pha loãng 55% màu Phẩm Chất), chỉ dùng cho Thần Thú. */
@keyframes thAuraWithShadowSoft{
  0%,100%{filter:drop-shadow(0 8px 16px rgba(4,7,10,.6)) drop-shadow(0 0 4px color-mix(in srgb,var(--th-q-glow,transparent) 55%,transparent)) drop-shadow(0 0 10px color-mix(in srgb,var(--th-q-glow,transparent) 55%,transparent));}
  50%{filter:drop-shadow(0 8px 16px rgba(4,7,10,.6)) drop-shadow(0 0 6px color-mix(in srgb,var(--th-q-glow,transparent) 55%,transparent)) drop-shadow(0 0 13px color-mix(in srgb,var(--th-q-glow,transparent) 55%,transparent));}
}
@keyframes thAuraWithShadow{
  0%,100%{filter:drop-shadow(0 8px 16px rgba(4,7,10,.6)) drop-shadow(0 0 10px var(--th-q-glow,transparent)) drop-shadow(0 0 22px var(--th-q-glow,transparent));}
  50%{filter:drop-shadow(0 8px 16px rgba(4,7,10,.6)) drop-shadow(0 0 13px var(--th-q-glow,transparent)) drop-shadow(0 0 28px var(--th-q-glow,transparent));}
}
@keyframes thEquipWeaponFloatGlow{
  0%,100%{filter:drop-shadow(0 8px 16px rgba(4,7,10,.6)) brightness(1.015) drop-shadow(0 0 3px color-mix(in srgb,var(--th-q-glow,transparent) 38%,transparent)) drop-shadow(0 0 5px color-mix(in srgb,var(--th-q-glow,transparent) 38%,transparent));}
  50%{filter:drop-shadow(0 8px 16px rgba(4,7,10,.6)) brightness(1.045) drop-shadow(0 0 3px color-mix(in srgb,var(--th-q-glow,transparent) 62%,transparent)) drop-shadow(0 0 5px color-mix(in srgb,var(--th-q-glow,transparent) 62%,transparent));}
}
@media(prefers-reduced-motion:reduce){
  .hero-tienhiep .th-equip-weapon-float img{animation:none;filter:drop-shadow(0 8px 16px rgba(4,7,10,.6)) drop-shadow(0 0 10px var(--th-q-glow,transparent)) drop-shadow(0 0 22px var(--th-q-glow,transparent));}
}
/* Owner 2026-09-06 (đợt 4, sửa lại đợt 3): theo thiết kế, Vũ Khí bay bên
   TRÁI nhân vật = bên PHẢI theo góc nhìn người chơi (đúng vị trí hiện có,
   right:14%, không đổi). Vậy Thú Cưỡi phải nằm phía ĐỐI DIỆN — bên PHẢI
   nhân vật = bên TRÁI người chơi. Canh theo TRUNG TÂM nhân vật bằng pixel
   cố định (Owner: "dời về bên trái 200-300px") thay vì % theo rìa màn hình
   — ổn định hơn khi màn hình đổi bề rộng vì luôn bám đúng tâm nhân vật. */
.hero-tienhiep .th-equip-mount-float{
  display:none;position:absolute;
  /* Owner 2026-09-06 (đợt 7, sau đợt 6): "lùi lại 30px (lên cao)" — nâng
     thêm 30px nữa (50px→80px), chỉ áp dụng desktop/tablet — mobile có bộ
     số riêng, không đụng tới ở đây. */
  /* Owner 2026-09-09: "dời Thần Thú lên cao 10px" — 80px→90px.
     Owner 2026-09-15: "cho lên cao 20px" — 90px→110px.
     Owner 2026-09-15 (sau khi reset override CĂN UI lệch giữa 2 scene):
     "dời thần thú lên cao 20px" — 110px→130px. */
  bottom:calc(var(--ch-h, 56vh) * 0.1 + 130px);
  left:calc(50% - 150px + var(--khoiA-shift-x));
  height:calc(var(--ch-h, 56vh) * 0.24);width:auto;z-index:1;pointer-events:none;
  align-items:center;justify-content:center;
  --th-q-glow:#B8B8B8;
  transform-origin:center bottom;
}
.hero-tienhiep .th-equip-mount-float img{
  height:100%;width:auto;display:block;
  filter:drop-shadow(0 8px 16px rgba(4,7,10,.6));
  /* 2026-09-22: wrapper cha có pointer-events:none (cố ý, để không chắn thao tác khác quanh Nhân Vật) —
     nhưng Thần Thú tự nói chuyện (tien-hiep-pet-dialogue.js) cần bấm được đúng ảnh. Chỉ mở lại đúng ảnh,
     không đụng vùng trong suốt còn lại của wrapper. */
  pointer-events:auto;
}
/* Owner 2026-09-08: "ánh sáng lấp lánh quanh Thần Thú dưới chân Nhân Vật,
   màu theo phẩm chất" — <img> không hỗ trợ ::before/::after nên dùng
   filter:drop-shadow() nhiều lớp (tôn trọng kênh alpha, khác box-shadow
   bám theo hình chữ nhật) CHỒNG animation lên bóng đổ gốc (0 8px 16px) đã
   có sẵn, không mất hiệu ứng đổ bóng cũ. Màu lấy từ data-quality (JS gán
   theo pet.quality, xem tien-hiep-popup.js) — cùng bảng TH_QUALITY_COLORS. */
/* Owner 2026-09-08: "lấp lánh gấp đôi nhu cầu, giảm nhẹ lại" — blur giảm
   khoảng một nửa.
   Owner 2026-09-15: "giảm hiệu ứng ánh sáng lại 1 nửa, chỉ cần sáng nhẹ" —
   dùng color-mix pha loãng 50% màu phẩm chất thay vì đổi px (px đã nhỏ sẵn,
   giảm px tiếp gần như mất nét mà không giảm được ĐỘ SÁNG cảm nhận). */
@keyframes thMountGlowPulse{
  0%,100%{filter:drop-shadow(0 8px 16px rgba(4,7,10,.6)) drop-shadow(0 0 .5px color-mix(in srgb,var(--th-q-glow) 50%,transparent)) drop-shadow(0 0 1px color-mix(in srgb,var(--th-q-glow) 50%,transparent));}
  50%{filter:drop-shadow(0 8px 16px rgba(4,7,10,.6)) drop-shadow(0 0 1px color-mix(in srgb,var(--th-q-glow) 50%,transparent)) drop-shadow(0 0 1.75px color-mix(in srgb,var(--th-q-glow) 50%,transparent));}
}
/* Owner 2026-09-15: "Thần Thú thở nhẹ — tăng/giảm kích thước nhẹ, không di
   chuyển ngang" — cùng khuôn thCharBreathe của Nhân Vật, biên độ tương tự
   (~1.2%), neo transform-origin ở CHÂN để chân không trôi khi phóng to. */
@keyframes thMountBreatheScale{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.012);}
}
.th-equip-mount-float.is-visible{animation:thMountBreatheScale 4.8s ease-in-out infinite;}
.th-equip-mount-float.is-visible img{animation:thAuraWithShadowSoft 3.2s ease-in-out infinite;}
.th-equip-mount-float[data-quality="2"]{--th-q-glow:#3DBE6C;}
.th-equip-mount-float[data-quality="3"]{--th-q-glow:#3D9BE9;}
.th-equip-mount-float[data-quality="4"]{--th-q-glow:#A855F7;}
.th-equip-mount-float[data-quality="5"]{--th-q-glow:#D4AF37;}
.th-equip-mount-float[data-quality="6"]{--th-q-glow:#E14B4B;}
/* Owner 2026-09-08: bóng dưới chân Thần Thú — CÙNG toạ độ left/bottom với
   .th-equip-mount-float (chỉ copy đúng 2 giá trị đó ở MỌI nơi mount có
   override riêng — desktop/tablet ở đây, mobile ở dưới + tien-hiep-mobile.
   css) để bóng luôn bám đúng chân dù màn hình cỡ nào, không cần tính lại
   công thức riêng. z-index:0 (dưới ảnh) + pointer-events:none. */
.th-mount-shadow{
  display:none;position:absolute;z-index:0;pointer-events:none;
  bottom:calc(var(--ch-h, 56vh) * 0.1 + 90px);
  left:calc(50% - 150px + var(--khoiA-shift-x));
  width:calc(var(--ch-h, 56vh) * 0.22);height:calc(var(--ch-h, 56vh) * 0.045);
  /* KHÔNG translateX(-50%) — mount không tự canh giữa theo cách đó (left
     của nó vốn đã là mép trái thật), giữ đúng cùng gốc toạ độ. Chỉ đẩy
     xuống dưới 1 chút (translateY) để bóng nằm SÁT gầm ảnh thay vì giữa. */
  transform:translateY(60%);
  background:radial-gradient(ellipse at center,rgba(4,7,10,.55) 0%,rgba(4,7,10,.25) 55%,transparent 75%);
  border-radius:50%;filter:blur(2px);
}
/* Owner 2026-09-15: "mang Thần Thú/Vũ Khí ra Sảnh Chính luôn" — đổi điều
   kiện hiện từ .is-equip-view (chỉ Trang Bị) sang .is-char-home (cả Sảnh
   Chính lẫn Trang Bị, vì Trang Bị luôn kèm class is-char-home). */
.hero-tienhiep.is-char-home .th-equip-weapon-float.is-unlocked{display:inline-flex;}
.hero-tienhiep.is-char-home .th-equip-mount-float.is-visible{display:inline-flex;}
.hero-tienhiep.is-char-home .th-equip-mount-float.is-visible + .th-mount-shadow{display:block;}

/* Owner 2026-09-15: Phi Kiếm bay SAU LƯNG Nhân Vật, ngang tầm VAI — z-index
   thấp hơn .char-home-portrait (2) nên luôn bị Nhân Vật che phía trước,
   đúng nghĩa "sau lưng". Số liệu size/vị trí là ước lượng ban đầu, còn cần
   Owner canh chỉnh lại theo thực tế ảnh Phi Kiếm thật (tỷ lệ khung hình
   mỗi cây khác nhau). */
.hero-tienhiep .th-equip-phikiem-float{
  display:none;position:absolute;z-index:1;pointer-events:none;
  /* Owner 2026-09-15 (đợt 2): "cho cao hơn để lộ Phi Kiếm nhiều hơn" —
     0.75→0.95.
     Owner 2026-09-15 (đợt 3): "hạ xuống, khoảng giữa 0.75 và 0.95" — 0.85. */
  left:50%;bottom:calc(var(--ch-h, 56vh) * 0.85);
  height:calc(var(--ch-h, 56vh) * 0.5);width:auto;
  align-items:center;justify-content:center;
  /* Owner 2026-09-16: "mới vào web lệch phải, vào Trang Bị quay ra mới đúng" —
     translateX(-50%) canh giữa trước đây CHỈ nằm trong @keyframes thở bên
     dưới, không có transform tĩnh mặc định; khung hình đầu tiên (trước khi
     animation kịp áp dụng) hiện đúng left:50% thô, lệch hẳn sang phải. Khai
     báo transform tĩnh ở đây để LUÔN đúng vị trí ngay từ khung hình đầu. */
  transform:translateX(calc(-50% + var(--khoiA-shift-x))) rotate(-12deg);
  /* Owner 2026-09-22: "Phi Kiếm ở Bí Cảnh đẹp hơn" — thay hẳn kiểu thở NGANG
     (thPhiKiemBreatheX cũ) bằng đúng kiểu bay của Bí Cảnh (.th-combat-phikiem):
     nhấp nhẹ lên xuống + nghiêng góc đổi theo, giữ nguyên phần canh giữa
     translateX(-50% + khoiA-shift-x) vì đó là vị trí thật, không phải hiệu ứng.
     Dùng % thay vì px cho translateY để tỉ lệ đúng ở mọi cỡ khung (khung ở
     đây thường cao hơn khung Bí Cảnh nhiều). */
  animation:thPhiKiemFloat 3.2s ease-in-out infinite;
}
@keyframes thPhiKiemFloat{
  0%,100%{transform:translateX(calc(-50% + var(--khoiA-shift-x))) translateY(0) rotate(-12deg);}
  50%{transform:translateX(calc(-50% + var(--khoiA-shift-x))) translateY(-5%) rotate(-9deg);}
}
.hero-tienhiep .th-equip-phikiem-float img{
  height:100%;width:auto;display:block;
  /* Owner 2026-09-15: "thêm 2 hiệu ứng ánh sáng như Vũ Khí đang cắm" — dùng
     lại đúng công thức quầng sáng thở (thEquipWeaponFloatGlow) + đom đóm
     (JS chèn .th-equip-hover-fireflies), không vẽ hiệu ứng mới. */
  /* Owner 2026-09-19: đồng bộ HÀO QUANG Phi Kiếm với màn Bí Cảnh (đẹp hơn):
     2 lớp quầng sáng màu Phẩm Chất (10px + 22px) thay cho quầng nhạt 3-5px cũ,
     vẫn "thở" nhẹ theo nhịp cũ. */
  animation:thPhiKiemAura 3.2s ease-in-out infinite;
  opacity:.95;
}
@keyframes thPhiKiemAura{
  0%,100%{filter:drop-shadow(0 0 10px var(--th-q-glow,#9adfff)) drop-shadow(0 0 22px var(--th-q-glow,#9adfff));}
  50%{filter:drop-shadow(0 0 13px var(--th-q-glow,#9adfff)) drop-shadow(0 0 28px var(--th-q-glow,#9adfff));}
}
@media(prefers-reduced-motion:reduce){
  .hero-tienhiep .th-equip-phikiem-float img{animation:none;filter:drop-shadow(0 0 10px var(--th-q-glow,#9adfff)) drop-shadow(0 0 22px var(--th-q-glow,#9adfff));}
  /* Đúng khuôn .th-combat-phikiem ở Bí Cảnh: tắt hẳn nhấp-nhô, giữ nguyên góc nghiêng tĩnh. */
  .hero-tienhiep .th-equip-phikiem-float{animation:none;}
}
.hero-tienhiep.is-char-home .th-equip-phikiem-float.is-visible{display:inline-flex;}
@media (max-width:700px){
  .hero-tienhiep .th-equip-phikiem-float{display:none !important;}
}

/* Nút thoát Trang Bị — về lại Sảnh (icon HUD chức năng), nhỏ gọn giống
   khuôn "◀ Về sảnh game" đã dùng cho các trang game. */
/* Owner 2026-09-07 (đợt 8): "Về Sảnh canh lề theo Trang Bị, nằm gần lại
   hơn" — trước đó thiếu var(--khoiA-shift-x) nên lệch cột dọc so với
   .th-char-tabbar (Trang Bị) khi vào equip-view (Khối A dời trái); top rút
   ngắn khoảng cách với tabbar (50px, xem .th-char-tabbar phía trên). */
.hero-tienhiep .th-equip-exit{
  display:none;position:absolute;top:14px;left:50%;
  transform:translateX(calc(-50% + var(--khoiA-shift-x)));z-index:3;
  padding:6px 16px;border-radius:999px;border:1px solid var(--border-strong);
  background:color-mix(in srgb,var(--bg) 55%,transparent);color:var(--text);
  font-family:var(--font-body);font-size:12.5px;font-weight:600;cursor:pointer;
  backdrop-filter:blur(6px);
}
.hero-tienhiep.is-equip-view .th-equip-exit{display:block;}

/* Tablet (~768–900px): vẫn theo % như desktop (Owner 2026-09-06 gộp chung
   desktop+tablet) — chỉ thu nhỏ icon một chút cho vừa màn hẹp hơn. */
@media (max-width:900px){
  .th-equip-item-frame{width:66px;height:66px;}
  .th-equip-item-label{width:56px;font-size:10px;}
}
@media (max-width:700px){
  .th-character-stats-panel{top:112px;left:16px;right:16px;width:auto;max-height:calc(100dvh - 150px);padding:14px;}
  .th-character-stats-groups{grid-template-columns:1fr;}
  .th-skill-grid{grid-template-columns:1fr;}
}
/* Mobile (≤700px): Owner 2026-09-06 — "cần hiển thị cả 2 [icon chức năng
   và icon trang bị], nên dời 10 icon trang bị lại gần nhân vật hơn". Rail
   chức năng (#hudRailLeft/Right) chiếm 14px→72px (hud-item rộng 58px, xem
   tien-hiep-mobile.css) — đặt rail trang bị ngay SÁT BÊN, thu nhỏ hết cỡ,
   ẩn nhãn chữ (còn tooltip title bù lại) để lọt vừa khoảng hẹp còn lại
   trước khi chạm nhân vật. Vũ khí/thú cưỡi bay lơ lửng tạm ẨN — không đủ
   chỗ chồng thêm lớp thứ 3 trên màn dọc hẹp. */
@media (max-width:700px){
  .hero-tienhiep .th-equip-rail{gap:5px;}
  /* Owner 2026-09-06 (đợt 8): "icon 10 trang bị cần lớn hơn 20%" (48px→58px)
     + "chưa có tên, hãy hiển thị tên ở cạnh phải/trái mỗi icon như giao
     diện máy tính" — bật lại nhãn (đã ẩn ở đợt 7), thu nhỏ riêng cho vừa
     màn hẹp.
     Owner 2026-09-07 (đợt 14): "sáng kiến mới — neo cột trái vào cạnh trái,
     cột phải vào cạnh phải, cách mép 20px" — THAY HẲN cách định vị cũ (bám
     theo nhân vật ở giữa, 86px cố định dễ lệch khi đổi cỡ chữ/màn hình)
     bằng neo THẲNG vào 2 mép màn hình — luôn nhất quán, không phụ thuộc gì
     vào vị trí nhân vật/Khối A nữa. */
  .hero-tienhiep .th-equip-rail-left{left:20px;}
  .hero-tienhiep .th-equip-rail-right{right:20px;}
  .th-equip-item{gap:0;}
  .th-equip-item-row{gap:4px;}
  .th-equip-item-frame{width:58px;height:58px;}
  .th-equip-item-label{display:block;width:36px;font-size:8px;}
  .th-equip-item-pick-popup select{max-width:60px;font-size:6px;}
  .th-equip-item-pick-popup button{width:13px;height:13px;font-size:8px;}
  /* Owner 2026-09-06 (đợt 9): "tên trang bị hướng vào bên trong nhân vật"
     — NGƯỢC với desktop/tablet (desktop hướng RA NGOÀI). Cột trái: tên
     BÊN PHẢI icon (hướng vào giữa) ⟹ đảo flex-direction so với rule gốc
     (mặc định là row = tên bên trái/ra ngoài). Cột phải: tên BÊN TRÁI icon
     ⟹ cũng đảo so với rule gốc (mặc định row-reverse = tên bên phải/ra
     ngoài). Text-align đảo theo cho chữ áp sát icon. */
  .hero-tienhiep .th-equip-rail-left .th-equip-item-row{flex-direction:row-reverse;}
  .hero-tienhiep .th-equip-rail-right .th-equip-item-row{flex-direction:row;}
  .hero-tienhiep .th-equip-rail-left .th-equip-item-label{text-align:left;}
  .hero-tienhiep .th-equip-rail-right .th-equip-item-label{text-align:right;}
  /* Owner 2026-09-06 (đợt 9, sửa lại đợt 8): "Thần thú đang nhảy sang bên
     phải nhân vật, trong khi ở desktop/tablet nó nằm bên trái nhân vật vì
     bên phải là không gian của VŨ KHÍ (hiện chưa hiển thị chứ không phải
     không có)" — bỏ mốc +150px của đợt 8 (đã đẩy lố sang hẳn phía bên kia),
     về lại đúng phía như desktop/tablet (bên trái người chơi), chỉ giữ
     phần nâng bottom (khớp tầm chân) là đúng, không đổi horizontal nữa. */
  .hero-tienhiep .th-equip-weapon-float{display:none !important;}
  .hero-tienhiep .th-equip-mount-float{
    /* Owner 2026-09-06 (đợt 11, sau đợt 10): "lùi lại sang phải 40px" —
       155px→115px cách tâm.
       Owner 2026-09-08 (đợt 33): "ảnh Thần Thú rời xa nhân vật quá, bị cột
       trang bị trái che mất — khoá vào nhân vật, cách 10px". Ước lượng theo
       --ch-h (nhân vật cao ch-h*0.84, bề ngang nhân vật ước ~38% chiều cao
       đó ⟹ mép nhân vật cách tâm ~ch-h*0.19; ảnh Thần Thú cao ch-h*0.2,
       ước bề ngang gần bằng cao ⟹ nửa bề ngang ~ch-h*0.1) — tổng khoảng
       cách từ tâm ≈ ch-h*0.29 + 10px. CHƯA test qua trình duyệt theo yêu
       cầu — Owner kiểm tra lại, báo thêm nếu còn lệch. */
    /* Owner 2026-09-08 (đợt 34): "ảnh nhỏ quá, tăng 30%" — height 0.2→0.26
       (×1.3). Vị trí ngang (left) GIỮ NGUYÊN — tăng size không tự đổi
       khoảng cách tới nhân vật (Owner chỉ yêu cầu size + dời xuống).
       Đợt 37: "tăng thêm chiều cao 20px, cách nhân vật ra 10px" — height
       +20px cứng; khoảng cách -10px→-20px (xa nhân vật thêm 10px).
       Đợt 38: "cao thêm 10px, cách xa thêm 20px về phía trái" — height
       +20px→+30px; khoảng cách -20px→-40px.
       Đợt 39: "cao thêm 10px, cách nhân vật thêm 10px nữa" — height
       +30px→+40px; khoảng cách -40px→-50px. */
    left:calc(50% - (var(--ch-h, 42vh) * 0.29) - 50px);
    bottom:calc(var(--ch-h, 42vh) * 0.28);
    height:calc(var(--ch-h, 42vh) * 0.26 + 40px);
  }
  /* Bóng Thần Thú mobile — copy đúng left/bottom của mount ở trên, kích
     thước bóng cũng tăng theo cùng tỉ lệ ×1.3 cho khớp ảnh to hơn. */
  .th-mount-shadow{
    left:calc(50% - (var(--ch-h, 42vh) * 0.29) - 50px);
    bottom:calc(var(--ch-h, 42vh) * 0.28);
    width:calc(var(--ch-h, 42vh) * 0.234);height:calc(var(--ch-h, 42vh) * 0.052);
  }
  .hero-tienhiep.is-equip-view .th-equip-exit{display:block;}
}

/* Khung tóm tắt nhân vật (góc trên-trái) — CHỖ TRỐNG GĐ2. Hệ thống tu vi/
   nhân vật chưa xây (JOB_TH1_02/GĐ2, 06.00 Chương IV) — số liệu ở đây là
   PLACEHOLDER TĨNH. Bố cục tham chiếu bộ game tiên hiệp thương mại (Owner
   cung cấp 2026-09-05): Avatar + Lực Chiến + Cấp + Cảnh Giới + Máu + EXP%.
   Dựng sẵn markup/CSS để GĐ2 chỉ cần đổi NGUỒN DỮ LIỆU (đổ số thật vào các
   #th*Stub/#th*Fill), không cần vẽ lại HUD. */
.hero-tienhiep #hudTopLeft{
  /* 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;
}
.hero-tienhiep .th-id-row{display:flex;align-items:center;gap:10px;}
.hero-tienhiep .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);
}
.hero-tienhiep .th-id-text{min-width:0;flex:1;}
.hero-tienhiep .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;
}
.hero-tienhiep .th-lc-icon{font-size:12px;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent-2) 70%,transparent));}
.hero-tienhiep .th-level{font-size:12px;font-weight:700;flex-shrink:0;}
.hero-tienhiep .th-lc-sep{font-size:11px;opacity:.6;flex-shrink:0;}
.hero-tienhiep .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. */
.hero-tienhiep .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 */
.hero-tienhiep .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);
}
.hero-tienhiep .th-bar-fill{height:100%;border-radius:inherit;transition:width .3s var(--ease);}
.hero-tienhiep .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. */
.hero-tienhiep .th-exp,
.hero-tienhiep .th-energy{margin-top:-4px;}
.hero-tienhiep .th-hp .th-bar-fill{background:linear-gradient(90deg,#8a2222,var(--brand));}
.hero-tienhiep .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. */
.hero-tienhiep .th-exp{height:15px;}
.hero-tienhiep .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. */
.hero-tienhiep .th-energy{height:15px;cursor:pointer;}
.hero-tienhiep .th-energy .th-bar-fill{background:linear-gradient(90deg,#7dd3fc,var(--accent));}

/* ---------- Khối giới thiệu giữa khung (thay .hero-copy cũ) ---------- */
.hero-tienhiep .panel{
  position:absolute;left:50%;top:16%;transform:translateX(-50%);
  width:min(560px,58vw);padding:22px 26px;border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  border:1px solid var(--border-strong);box-shadow:var(--shadow-lg);
  backdrop-filter:blur(3px);z-index:5;text-align:center;
}
.hero-tienhiep .panel h1{
  font-family:var(--font-display);font-weight:var(--display-weight);
  font-size:clamp(24px,3vw,32px);letter-spacing:var(--display-ls);margin:0 0 10px;
  background:var(--grad-brandtext);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-tienhiep .panel p{margin:0 0 16px;color:var(--text-muted);font-size:14px;line-height:1.6;}
.hero-tienhiep .panel .hero-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}

/* ---------- Ẩn/hiện theo theme (DoD: không đụng kid/pro) ---------- */
.hero-tienhiep{display:none;}
[data-theme="tien_hiep"] .hero-classic{display:none;}
[data-theme="tien_hiep"] .hero-tienhiep{display:block;}

/* ---------- GĐ2 (Owner 2026-09-07): CÕI TIÊN HIỆP LÀ 1 MÀN DUY NHẤT ----------
   "nội dung bên dưới giao diện Tiên Hiệp (từ Sảnh Trò Chơi xuống cuối web,
   bao gồm cả footer) đã tích hợp vào giao diện Tiên Hiệp nên không cần
   hiển thị nữa... vào game sẽ chỉ còn giao diện 1 màn hình, không lăn
   chuột lên xuống gì cả". #game-grid/#leaderboard chỉ tồn tại DUY NHẤT
   trong index.php nên ẩn theo ID là an toàn (không đụng trang nào khác).
   .site-footer dùng chung mọi trang — CHỈ ẩn khi cùng trang với chính
   .hero-tienhiep (:has, không đụng footer ở các trang tiên hiệp khác nếu
   có ai vào thẳng URL, ví dụ trang game trước khi bọc iframe). */
[data-theme="tien_hiep"] #game-grid,
[data-theme="tien_hiep"] #leaderboard{display:none;}
[data-theme="tien_hiep"] body:has(.hero-tienhiep) .site-footer{display:none;}
/* Không còn nội dung nào bên dưới hero để cuộn tới — khoá cuộn trang,
   .hero-tienhiep tự lo bố cục bên trong nó (position:absolute) như 1 màn
   hình launcher cố định, đúng tinh thần PQ-64 ("1 màn hình duy nhất"). */
[data-theme="tien_hiep"] body:has(.hero-tienhiep){overflow:hidden;}

@media (max-width:600px){
  /* BUG tìm thấy 2026-09-05: width:88vw gần full màn hình, ĐÈ LÊN cả rail
     trái/phải bên dưới (panel đứng sau trong .hud nên vẽ chồng lên trên,
     icon rail bị che kín dù DOM/CSS icon vẫn đúng — chỉ là bị vẽ đè).
     Đổi sang left/right + width:auto, chừa hẳn 78px hai bên cho rail
     (60px icon thu gọn + 18px đệm) thay vì % bề ngang không tính rail.
     Vị trí top của #hudRailLeft/#hudRailRight do tien-hiep-mobile.css
     (nạp SAU file này) quyết định — không lặp lại ở đây. */
  .hero-tienhiep .panel{width:auto;left:78px;right:78px;top:12%;transform:none;padding:18px 20px;}
}

/* ---------- Tôn trọng prefers-reduced-motion (JOB_TH1_09 DoD) ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-tienhiep .char-home-portrait{animation:none;}
  .hero-tienhiep .stage .l2,
  .hero-tienhiep .stage .lg-l,
  .hero-tienhiep .stage .lg-r{animation:none;}
  .hero-tienhiep .l4-lantern{animation:none;}
  .hero-tienhiep .th-android-apk-lantern{animation:none;}
}

/* ---------- Vòng sáng dưới chân theo Môn Phái × Cảnh Giới (2026-09-21) ----------
   Ảnh WebP phẳng nhìn từ trên xuống (aura/aura_<sect>_t<n>.webp). Nghiêng như đặt
   trên mặt đất bằng rotateX, xoay chậm bằng animation trên <img>. Ẩn cho tới khi
   JS (Engine._thRefreshAura) nạp đúng ảnh. Ở Sảnh/Trang Bị .th-aura--home là con
   của .th-char-shadow nên tự bám chân nhân vật ở mọi breakpoint: bóng rộng
   ~0,32 chiều cao (--ch-h) => vòng rộng 330% bóng ≈ 1,25 × chiều cao nhân vật. */
.th-aura{display:none;position:absolute;pointer-events:none;aspect-ratio:1/1;
  transform:translate(-50%,-50%) rotateX(68deg);}
.th-aura.is-ready{display:block;animation:thAuraPulse 5.2s ease-in-out infinite;}
.th-aura .th-aura-img{display:block;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:contain;filter:none;animation:thAuraSpin 48s linear infinite;will-change:transform;}
.th-aura--home{left:50%;top:-21%;width:330%;}
/* Tỏa sáng nhẹ (2026-09-21): quầng ánh sáng mềm nằm DƯỚI vòng, không xoay (nằm trên mặt phẳng nghiêng
   của .th-aura nên thành elip trên mặt đất). Màu theo phái (--g), cỡ theo --th-aura-d, độ mạnh --th-aura-gs
   (tăng nhẹ theo tầng). Cố ý yếu để không lấn át hoa văn vòng. */
.th-aura{--g:255 220 140;--th-aura-d:.72;--th-aura-gs:.24;}
.th-aura[data-sect="kim_thieulam"]{--g:255 196 72;}
.th-aura[data-sect="moc_duongmon"]{--g:96 236 172;}
.th-aura[data-sect="thuy_ngamy"]{--g:112 190 255;}
.th-aura[data-sect="hoa_caibang"]{--g:255 112 52;}
.th-aura[data-sect="tho_vodang"]{--g:238 204 124;}
.th-aura::before{content:"";position:absolute;pointer-events:none;
  inset:calc(50% * (1 - var(--th-aura-d)) - 8%);border-radius:50%;
  background:radial-gradient(circle closest-side at 50% 50%,
    rgb(var(--g) / 0) 0%,rgb(var(--g) / 0) 26%,
    rgb(var(--g) / var(--th-aura-gs)) 60%,
    rgb(var(--g) / calc(var(--th-aura-gs) * .45)) 82%,rgb(var(--g) / 0) 100%);
  animation:thAuraGlow 6.4s ease-in-out infinite;}
@keyframes thAuraGlow{0%,100%{opacity:.7;}50%{opacity:1;}}
@media (prefers-reduced-motion:reduce){.th-aura::before{animation:none;}}
@keyframes thAuraSpin{to{transform:rotate(360deg);}}
@keyframes thAuraPulse{0%,100%{opacity:.86;}50%{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .th-aura.is-ready,.th-aura .th-aura-img{animation:none;}
}

/* =========================================================
   BROADCAST BAR — override cho theme Tiên Hiệp (PQ-57)
   Bản gốc (.broadcast-bar.active ở style.css) là khối nền đen
   mờ full-width — đúng kiểu "khung hộp đặc" đã bị cấm cho HUD/
   icon Tiên Hiệp. Ở đây bỏ hẳn khối nền, chỉ giữ chữ chạy ngang
   nổi trên cảnh nền, đổ bóng đậm để vẫn đọc rõ. Không đụng CSS
   gốc — theme kid/pro giữ nguyên nền đen mờ như cũ.
   ========================================================= */
[data-theme="tien_hiep"] .broadcast-bar.active{
  background:transparent;
  backdrop-filter:none;
  border-bottom:none;
}
[data-theme="tien_hiep"] .broadcast-bar-track span{
  text-shadow:0 1px 3px rgb(0 0 0 / .9), 0 0 10px rgb(0 0 0 / .6);
}
/* Tân Thủ: menu ngắn trên Sảnh và Scene cẩm nang. */
.th-novice-menu{position:fixed;width:min(196px,calc(100vw - 24px));padding:10px 11px;border:1px solid #bd8d37;border-radius:9px;background:linear-gradient(145deg,#26341f,#111a11);color:#fff7d4;box-shadow:0 8px 20px #000a}.th-novice-menu-kicker{display:none}.th-novice-menu h2{margin:0 0 7px;font-family:var(--font-display);font-size:14px;line-height:1.2;color:#ffe29a}.th-novice-menu>p:not(.th-novice-menu-kicker){display:none}.th-novice-menu-close{position:absolute;right:6px;top:3px;border:0;background:transparent;color:#d8c999;font-size:18px;line-height:1;cursor:pointer}.th-novice-menu-guide{position:relative;display:flex;width:100%;align-items:center;justify-content:space-between;border:1px solid #9b7736;border-radius:5px;padding:7px 8px;background:#55401e;color:#fff7d4;font:600 12px/1.2 var(--font-display);cursor:pointer}.th-novice-menu-badge{top:4px;right:4px}.th-novice-menu-guide:hover{background:#715529}.th-novice-menu-guide span{font-size:18px;line-height:.7}.th-novice-guide-scene{position:fixed;inset:0;display:grid;place-items:center;padding:clamp(14px,3vw,34px);background:transparent;color:#f9f1d7}.th-novice-guide-shell{display:flex;flex-direction:column;width:min(760px,calc(100vw - 28px));max-height:min(760px,calc(100dvh - 48px));overflow:hidden;border:1px solid #a98b45;border-radius:14px;background:linear-gradient(145deg,#22351deF,#0c170edF);box-shadow:0 12px 34px #000b}.th-novice-guide-scene header{display:flex;flex:none;gap:14px;align-items:center;padding:15px 18px;border-bottom:1px solid #8b783e;background:linear-gradient(90deg,#304625,#172816);}.th-novice-guide-scene header p{margin:0 0 2px;color:#cdbb7a;font-size:11px;font-weight:700;letter-spacing:.12em}.th-novice-guide-scene h1{margin:0;color:#ffe29a;font:clamp(20px,2.6vw,30px)/1.1 serif}.th-novice-guide-scene main{min-height:0;overflow:auto;padding:20px 22px}.th-novice-guide-back{flex:none;border:1px solid #c69b4a;border-radius:7px;padding:8px 10px;background:#263920;color:#fff5cf;cursor:pointer}.th-novice-guide-article{padding:18px 20px;border:1px solid #8b783e;border-radius:10px;background:#132015e8;box-shadow:0 8px 30px #0006}.th-novice-guide-summary{margin:0 0 18px;color:#d9c995;font-size:16px}.th-novice-guide-article h2{margin:22px 0 8px;color:#f5c65a;font:24px serif}.th-novice-guide-article h2:first-of-type{margin-top:0}.th-novice-guide-article p{line-height:1.65;color:#edf0db}.th-novice-guide-article figure{margin:16px auto;text-align:center}.th-novice-guide-article figure img{max-width:min(100%,620px);max-height:360px;border:1px solid #c69b4a;border-radius:10px}.th-novice-guide-article figcaption{margin-top:6px;color:#c8b984;font-size:13px}.th-novice-guide-loading,.th-novice-guide-empty{padding:32px;text-align:center;color:#e6d8a5}@media(max-width:720px){.th-novice-guide-scene{padding:10px}.th-novice-guide-shell{width:calc(100vw - 20px);max-height:calc(100dvh - 30px)}.th-novice-guide-scene header{gap:9px;padding:11px 12px}.th-novice-guide-scene h1{font-size:20px}.th-novice-guide-back{padding:7px 8px;font-size:11px}.th-novice-guide-scene main{padding:13px}.th-novice-guide-article{padding:14px}.th-novice-guide-summary{font-size:14px}.th-novice-guide-article h2{font-size:20px}.th-novice-guide-article figure img{max-height:260px}}
/* Cáo Thị dùng nguyên khuôn Hướng Dẫn Tân Thủ; chỉ bổ sung tab và dòng thời gian. */
.th-notice-board-tabs{display:flex;gap:8px;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid #8b783e}.th-notice-board-tabs button{border:1px solid #9b7736;border-radius:6px;padding:8px 16px;background:#263920;color:#e6d8a5;font:600 13px/1 var(--font-display);cursor:pointer}.th-notice-board-tabs button[aria-selected="true"]{background:#715529;color:#fff5cf;border-color:#d5ad57}.th-notice-board-article+.th-notice-board-article{margin-top:12px}.th-notice-board-article time{display:block;margin:-2px 0 16px;color:#c8b984;font-size:12px}.th-notice-board-article p:first-child{margin-top:0}.th-notice-board-article p:last-child{margin-bottom:0}

/* Chính Điện Môn Phái (menu Nhiệm Vụ Sư Môn / Săn Boss Môn Phái) — dùng lại
   đúng khuôn .th-novice-menu, chỉ nới rộng chút cho tên phái dài và thêm
   button thứ 2 xuống dòng. */
.th-sectboss-menu{width:min(224px,calc(100vw - 24px));}
.th-sectboss-menu .th-novice-menu-guide+.th-novice-menu-guide{margin-top:6px;}
.th-sectboss-pw-hint{display:block!important;margin:0 0 8px;font-size:11.5px;color:#d8c999;}
.th-sectboss-pw-err{display:block!important;margin:8px 0 0;color:#ff8a8a;font-size:11.5px;}
.th-sectboss-pw-err[hidden]{display:none!important;}
/* Boss Môn Phái to gấp đôi quái thường (Owner 2026-09-29) để phân biệt rõ
   Boss với quái — riêng Scene này, không đụng .th-boss-sprite dùng chung
   cho Quái Thủ Lĩnh Bí Cảnh (JOB khác). */
.th-sectboss-scene .th-boss-sprite{height:clamp(110px,44cqh,480px);}
@media (max-width:560px){.th-sectboss-scene .th-boss-sprite{height:clamp(100px,40cqh,320px);}}
/* Boss Môn Phái multiplayer (Owner 2026-09-29): bảng cống hiến, overlay hồi
   sinh, băng thông báo thắng — dùng riêng Scene này. */
.th-sectboss-board{position:absolute;top:56px;right:12px;z-index:5;width:min(180px,32vw);max-height:40vh;overflow:auto;padding:8px;border:1px solid rgba(242,218,139,.5);border-radius:10px;background:rgba(6,16,22,.82);font:600 11.5px/1.4 var(--font-body);color:#fff4d0;}
.th-sectboss-board-row{display:flex;justify-content:space-between;gap:6px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.th-sectboss-board-title{margin:7px 0 3px;color:#8fe8ff;font:700 11px/1.3 var(--font-body);letter-spacing:.02em;}
.th-sectboss-board-title:first-child{margin-top:0;}
.th-sectboss-board-row:last-child{border-bottom:0;}
.th-sectboss-board-row b{color:#ffe083;}
.th-sectboss-board-row.is-dead{opacity:.45;}
.th-sectboss-board-row.is-dead span::before{content:'✝ ';}
.th-sectboss-dead-overlay{position:absolute;left:50%;top:38%;z-index:20;transform:translate(-50%,-50%);padding:14px 22px;border:1px solid rgba(255,120,120,.7);border-radius:12px;background:rgba(24,6,6,.85);color:#ffdada;text-align:center;font:700 14px/1.5 var(--font-display);box-shadow:0 10px 26px rgba(0,0,0,.55);}
.th-sectboss-dead-overlay b{display:block;font-size:17px;color:#ff8a8a;margin-bottom:4px;}
.th-sectboss-dead-overlay[hidden]{display:none;}
.th-sectboss-banner{position:absolute;left:50%;top:14%;z-index:20;transform:translateX(-50%);padding:10px 20px;border:1px solid rgba(255,224,131,.85);border-radius:999px;background:linear-gradient(135deg,#3a2a0c,#1c1406);color:#ffe9a8;font:800 14px/1.3 var(--font-display);box-shadow:0 8px 22px rgba(0,0,0,.55);text-align:center;}
.th-sectboss-banner[hidden]{display:none;}
.th-sectboss-banner.is-expired{background:linear-gradient(135deg,#3a2a2a,#1c1414);color:#e8c9a8;border-color:rgba(200,160,120,.7);}
/* Owner 2026-09-29 (chỉnh lần 3: chậm thêm nữa): Boss "thở" — lớn tí xíu 1,5s
   rồi về lại 1,5s (chu kỳ 3s) để đứng yên vẫn có cảm giác sống, không lẫn với
   animation tấn công (đổi background-position, khác thuộc tính). */
.th-sectboss-scene .th-boss-sprite{transform-origin:50% 100%;animation:th-sectboss-breathe 3s ease-in-out infinite;}
@keyframes th-sectboss-breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.035);}}
@media (prefers-reduced-motion:reduce){.th-sectboss-scene .th-boss-sprite{animation:none;}}
/* LUẬT BẮT BUỘC khi nhân vật gục trong lúc chờ hồi sinh (Owner 2026-09-29):
   chưa có pose "bị đánh gục" riêng cho nhân vật combat actor (chỉ có idle,
   move, 5 skill và basic attack — xem atlas_manifest_v1.json từng phái) nên
   dùng phương án dự phòng — mờ nhân vật + Thần Thú + Phi Kiếm/Vũ Khí còn 30%,
   ĐÓNG BĂNG mọi thao tác tấn công (kể cả AUTO) cho tới khi hồi sinh xong. Nếu
   sau này có ảnh pose gục ngã riêng cho nhân vật thì thay .is-me-dead bằng
   ảnh đó, không đổi luật khóa thao tác.
   CẢNH BÁO CHO NGƯỜI SỬA SAU: rule dưới đây từng bị trình duyệt ÂM THẦM XÓA
   suốt 1 bản OTA vì comment cũ vô tình chứa dấu SAO rồi dấu GẠCH CHÉO liền
   nhau, đóng comment sớm — không bao giờ đặt hai ký tự đó cạnh nhau trong
   comment CSS, kể cả khi mô tả tên hàm/đường dẫn có dấu sao. */
.th-sectboss-scene.is-me-dead [data-role="player-actor"]{opacity:.3;filter:grayscale(.4);transition:opacity .3s ease;}
/* Số sát thương bay lên khi trúng đòn (nhân vật đánh Boss / Boss đánh nhân vật). */
.th-sectboss-dmg{position:absolute;left:50%;top:10%;transform:translateX(-50%);font:800 15px/1 var(--font-display);text-shadow:0 1px 2px #000,0 0 6px #000;pointer-events:none;animation:th-sectboss-dmg-float .9s ease-out forwards;z-index:10;}
.th-sectboss-dmg.is-boss-hit{color:#ffe38a;}
.th-sectboss-dmg.is-player-hurt{color:#ff6b6b;}
@keyframes th-sectboss-dmg-float{0%{opacity:0;transform:translate(-50%,0) scale(.8);}15%{opacity:1;transform:translate(-50%,-6px) scale(1);}100%{opacity:0;transform:translate(-50%,-46px) scale(1);}}
.th-sectboss-hp-num{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);white-space:nowrap;font:700 10.5px/1 var(--font-body);color:#fff4d0;text-shadow:0 1px 2px #000;}
.th-story-dialogue{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(480px,calc(100vw - 24px));max-height:min(640px,calc(100dvh - 48px));display:flex;flex-direction:column;border:1px solid #a98b45;border-radius:14px;overflow:hidden;background:linear-gradient(145deg,#22351deF,#0c170edF);box-shadow:0 12px 34px #000b;color:#f9f1d7}.th-story-dialogue-close{position:absolute;right:8px;top:6px;z-index:2;border:0;background:rgba(0,0,0,.4);color:#fff7d4;font-size:20px;line-height:1;width:28px;height:28px;border-radius:50%;cursor:pointer}.th-story-dialogue-portrait{position:relative;flex:none;background:#0c1410;display:flex;align-items:center;justify-content:center;aspect-ratio:2/1;overflow:hidden}.th-story-dialogue-portrait img{width:100%;height:100%;object-fit:cover;object-position:center top}.th-story-dialogue-name{position:absolute;left:10px;bottom:10px;padding:4px 12px;border:1px solid #bd8d37;border-radius:20px;background:rgba(12,20,16,.72);backdrop-filter:blur(2px);font:700 14px/1.2 var(--font-display);color:#ffe29a}.th-story-dialogue-box{display:flex;flex-direction:column;padding:14px 16px;gap:10px;overflow:auto}.th-story-dialogue-text{margin:0;line-height:1.6;color:#edf0db;font-size:14px}.th-story-dialogue-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.th-story-dialogue-next,.th-story-dialogue-claim,.th-story-dialogue-later{border:1px solid #9b7736;border-radius:6px;padding:8px 14px;background:#55401e;color:#fff7d4;font:600 12px/1.2 var(--font-display);cursor:pointer}.th-story-dialogue-next:hover,.th-story-dialogue-claim:hover,.th-story-dialogue-later:hover{background:#715529}.th-story-dialogue-claim{background:#3c5a2a;border-color:#7bbf4e}.th-story-dialogue-claim:hover{background:#4c7236}@media(max-width:520px){.th-story-dialogue{width:calc(100vw - 16px)}}
@keyframes thStoryRewardShake{0%,100%{transform:translate(-50%,-50%)}20%{transform:translate(calc(-50% - 6px),-50%)}40%{transform:translate(calc(-50% + 6px),-50%)}60%{transform:translate(calc(-50% - 4px),-50%)}80%{transform:translate(calc(-50% + 4px),-50%)}}
.th-story-dialogue.is-reward-pulse{animation:thStoryRewardShake .5s ease}
.th-story-dialogue.is-reward-pulse::after{content:'';position:absolute;inset:0;border-radius:14px;pointer-events:none;box-shadow:0 0 0 3px #f5c65a,0 0 26px 8px #f5c65a99;animation:thStoryRewardGlow .7s ease-out forwards}
@keyframes thStoryRewardGlow{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.th-story-reward-burst{position:absolute;inset:0;pointer-events:none;overflow:visible}
.th-story-reward-burst span{position:absolute;left:calc(10% + (var(--i) * 10%));bottom:8%;font-size:20px;opacity:0;animation:thStoryRewardSparkle .9s ease-out forwards;animation-delay:calc(var(--i) * 45ms)}
@keyframes thStoryRewardSparkle{0%{opacity:0;transform:translateY(0) scale(.4) rotate(0deg)}25%{opacity:1}100%{opacity:0;transform:translateY(-90px) scale(1.1) rotate(50deg)}}
@media(prefers-reduced-motion:reduce){.th-story-dialogue.is-reward-pulse{animation:none}.th-story-dialogue.is-reward-pulse::after{animation:none;opacity:0}}

/* PQ-126 — Boss Môn Phái v2: nút Trợ Chiến, bảng trạng thái, dòng sự kiện Boss, bảng đóng góp */
.th-boss-support{width:64px;height:64px;}
.th-boss-support-btn,.th-combat-skill-btn.th-boss-support-btn:nth-of-type(1){right:0;bottom:0;width:64px;height:64px;border-radius:50%;border-color:rgba(255,214,141,.95);color:#ffe9a8;font:800 14px/1.1 var(--font-body);text-shadow:0 1px 2px #000;}
.th-boss-support-label{display:block;position:relative;z-index:1;text-align:center;pointer-events:none;}
.th-sectboss-hud{position:absolute;left:12px;top:44px;z-index:5;width:min(250px,30vw);display:flex;flex-direction:column;gap:6px;pointer-events:none;}
.th-sectboss-info{font:600 12px/1.45 var(--font-body);color:#f4e9c7;text-shadow:0 1px 3px #000,0 0 4px #000;pointer-events:none;}
.th-sectboss-info b{color:#ffe083;}.th-sectboss-info .is-bad{color:#ff9a9a;}.th-sectboss-info .is-good{color:#9dffc4;}
.th-sectboss-feed{display:flex;flex-direction:column;gap:2px;font:600 12px/1.35 var(--font-body);color:#f4e9c7;text-shadow:0 1px 3px #000,0 0 4px #000;pointer-events:none;}
.th-sectboss-feed-row.is-rage{color:#ff9a6a;font-weight:800;}.th-sectboss-feed-row.is-support{color:#9dffc4;}
.th-sectboss-board-row span i{font-style:normal;font-weight:400;opacity:.7;font-size:10px;}
.th-sectboss-board-row.is-me span{color:#ffe083;}.th-sectboss-board-row.is-away{opacity:.6;}
.th-sectboss-banner.is-loot{white-space:pre-line;border-radius:14px;max-width:min(560px,88vw);text-align:center;line-height:1.5;}

/* PQ-126 Đợt B — vòng sáng dưới chân Boss (xoay chậm, nghiêng như .th-aura), icon Trợ Chiến, rung màn hình khi Nộ */
.th-boss-ground-aura{display:none;position:absolute;left:50%;top:84%;width:128%;aspect-ratio:1/1;pointer-events:none;z-index:0;transform:translate(-50%,-50%) rotateX(68deg);}
.th-boss-ground-aura.is-ready{display:block;animation:thAuraPulse 5.2s ease-in-out infinite;}
.th-sectboss-scene .th-boss-ground-aura img{display:block;width:100%!important;height:100%!important;max-width:none;max-height:none;object-fit:contain;animation:thAuraSpin 40s linear infinite;will-change:transform;}
.th-boss-support-icon{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;pointer-events:none;}
.th-sectboss-scene.is-rage-shake{animation:thRageShake .5s ease-in-out;}
@keyframes thRageShake{0%,100%{transform:translate(0,0)}15%{transform:translate(-6px,3px)}35%{transform:translate(5px,-4px)}55%{transform:translate(-4px,2px)}75%{transform:translate(3px,-2px)}}
@media (prefers-reduced-motion:reduce){.th-boss-ground-aura img,.th-boss-ground-aura.is-ready,.th-sectboss-scene.is-rage-shake{animation:none;}}
.th-sectboss-scene .th-boss-mob .th-boss-sprite{position:relative;z-index:1;}
.th-sectboss-scene .th-boss-mob .th-wx-info{position:relative;z-index:4;}

/* PQ-126 Đợt B+ — Chính Điện: chữ nổi cùng kiểu Bí Cảnh, chữ thông tin nổi trên đầu, tên + máu dưới chân */
.th-sectboss-scene .th-combat-dmg-float{z-index:7;}
.th-sectboss-scene .th-pk-hudclone{left:12px;top:8px;width:216px;z-index:5;cursor:default;pointer-events:none;transform-origin:0 0;}
.th-sectboss-hud{top:calc(8px + 142px * var(--th-fs,1));}
.th-fxstack{position:absolute;left:50%;bottom:calc(100% + 34px * var(--th-fs,1));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;pointer-events:none;z-index:8;width:max-content;max-width:260px;}
.th-fxstack-row{white-space:nowrap;font:800 calc(15px * var(--th-fs,1))/1.15 var(--font-body);color:#fff2b8;text-shadow:0 0 4px #000,0 2px 3px #000,1px 1px 0 #000;animation:thFxRow 2.2s ease-out forwards;}
.th-fxstack-row.is-bad{color:#ff8a8a;}.th-fxstack-row.is-good{color:#9dffc4;}.th-fxstack-row.is-self{color:#ffe6a8;}.th-fxstack-row.is-boss{color:#ffd27a;}.th-fxstack-row.is-rage{color:#ff9a5a;font-size:calc(18px * var(--th-fs,1));}
@keyframes thFxRow{0%{opacity:0;transform:translateY(6px);}12%{opacity:1;transform:translateY(0);}70%{opacity:1;}100%{opacity:0;}}
.th-boss-hp-num{display:block;font:700 calc(11px * var(--th-fs,1))/1 var(--font-body);color:#fff4d0;text-shadow:0 0 3px #000,0 1px 2px #000;white-space:nowrap;}
.th-sectboss-scene .th-sectboss-hp-num{font-size:calc(10.5px * var(--th-fs,1));}
.th-sectboss-info,.th-sectboss-feed{font-size:calc(12px * var(--th-fs,1));}
.th-sectboss-board{font-size:calc(12px * var(--th-fs,1));}

/* PQ-126 Đợt C — vòng sáng cho Quái Thủ Lĩnh Bí Cảnh / quái Tu Luyện (dùng lại .th-boss-ground-aura) */
.th-combat-monster .th-boss-ground-aura img{display:block;width:100%!important;height:100%!important;max-width:none;max-height:none;object-fit:contain;animation:thAuraSpin 40s linear infinite;will-change:transform;}
.th-combat-monster.has-aura .th-combat-monster-sprite{position:relative;z-index:1;}
.th-combat-monster.has-aura .th-wx-info{position:relative;z-index:4;}
.th-train-mob .th-boss-ground-aura{width:150%;top:88%;}

/* Tên chiêu của Boss: trôi lên rồi mờ như số máu (cùng animation .th-combat-dmg-float), nằm cao hơn số sát thương người đánh Boss */
.th-sectboss-scene .th-combat-dmg-float.is-boss-skill{top:calc(-34px * var(--th-fs,1));color:#ffd27a;font-size:calc(22px * var(--th-fs,1));white-space:nowrap;letter-spacing:.3px;text-shadow:0 0 6px rgba(255,170,40,.8),0 2px 3px #000,1px 1px 0 #000;}
.th-sectboss-scene .th-combat-dmg-float.is-boss-skill.is-boss-rage{color:#ff9a5a;font-size:calc(28px * var(--th-fs,1));text-shadow:0 0 8px rgba(255,80,20,.9),0 2px 3px #000,1px 1px 0 #000;}

/* PQ-127 — bản đồ Boss nhiều người: 10 ô đứng (thu theo --ps), người chơi khác, ô trống bấm được, danh sách Trợ Chiến/Xem, đồng hồ lịch */
.th-sectboss-scene .th-combat-player,.th-sectboss-scene .th-boss-mob{transform:translate(-50%,-100%) scale(var(--ps,1));transform-origin:50% 100%;}
.th-boss-ally.is-ally-dead{opacity:.35;filter:grayscale(.5);}
.th-boss-ally{pointer-events:none;}
.th-sectboss-ghost{position:absolute;transform:translate(-50%,-100%) scale(var(--ps,1));transform-origin:50% 100%;min-width:46px;padding:4px 10px;border-radius:999px;border:2px dashed rgba(255,224,131,.9);background:rgba(20,14,6,.6);color:#fff1b8;font:800 16px/1 var(--font-body);text-shadow:0 1px 2px #000;cursor:pointer;opacity:.9;pointer-events:auto;}
.th-sectboss-ghost:hover{opacity:1;background:rgba(255,214,102,.25);}
.th-sectboss-side{position:absolute;top:56px;right:12px;z-index:5;width:min(190px,32vw);max-height:calc(100% - 150px);overflow:auto;display:flex;flex-direction:column;gap:8px;}
.th-sectboss-scene .th-sectboss-side .th-sectboss-board{position:static;width:auto;max-height:none;cursor:pointer;}
.th-sectboss-scene.is-board-min .th-sectboss-crowd{display:none;}
.th-sectboss-crowd{padding:8px;border:1px solid rgba(242,218,139,.4);border-radius:10px;background:rgba(6,16,22,.82);font:600 calc(11px * var(--th-fs,1))/1.35 var(--font-body);color:#f4e9c7;}
.th-sectboss-crowd h5{margin:6px 0 3px;font-size:1em;color:#ffe083;}
.th-sectboss-crowd-row{display:flex;gap:6px;align-items:center;padding:2px 0;}
.th-sectboss-crowd-row img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid rgba(255,224,131,.5);}
.th-sectboss-crowd-row b{display:block;font-weight:700;}.th-sectboss-crowd-row i{display:block;font-style:normal;opacity:.75;font-size:.9em;}
.th-sectboss-crowd-empty{opacity:.55;font-style:italic;}
.th-sectboss-crowd-me{padding:4px 0 6px;border-bottom:1px solid rgba(255,255,255,.12);}
.th-sectboss-crowd button{margin-left:4px;padding:2px 8px;border-radius:6px;border:1px solid rgba(255,224,131,.6);background:rgba(255,224,131,.15);color:#ffe9a8;font:700 1em var(--font-body);cursor:pointer;}
.th-sectboss-timer{position:absolute;left:50%;top:68px;transform:translateX(-50%);z-index:6;max-width:min(560px,70vw);padding:8px 16px;border-radius:999px;border:1px solid rgba(255,224,131,.7);background:rgba(10,12,18,.78);color:#ffe9a8;font:700 calc(14px * var(--th-fs,1))/1.3 var(--font-body);text-align:center;text-shadow:0 1px 2px #000;pointer-events:none;}
.th-sectboss-timer[hidden]{display:none;}
.th-sectboss-full{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);}
.th-sectboss-full[hidden]{display:none;}
.th-sectboss-full-card{padding:16px 22px;border:1px solid rgba(255,224,131,.8);border-radius:12px;background:linear-gradient(135deg,#2c2208,#150f04);color:#ffe9a8;text-align:center;max-width:min(360px,86vw);}
.th-sectboss-full-card b{display:block;font-size:18px;margin-bottom:6px;}.th-sectboss-full-card p{margin:0 0 12px;font-size:13px;color:#f4e9c7;}
.th-sectboss-full-card button{margin:0 6px;padding:7px 16px;border-radius:8px;border:1px solid rgba(255,224,131,.8);background:rgba(255,214,102,.22);color:#ffe9a8;font:800 14px var(--font-body);cursor:pointer;}

/* =====================================================================
   Luyện Công Căn Bản — "Rừng Ẩn Tu" (Owner 2026-10-03)
   Phòng 9 người × 40 quái trên lưới 7×7, nhìn xéo từ trên cao. Dùng lại UI chiến đấu của Boss Môn Phái (.th-sectboss-scene);
   KHÁC: cỡ nhân vật/quái theo hàng đứng (--ps = % cỡ chuẩn) áp lên CHIỀU CAO ẢNH chứ không scale cả khối, để tên + thanh máu dưới chân
   vẫn đọc được (cỡ chữ riêng --tf, nhỏ dần theo --ps), đúng font/hiệu ứng Bí Cảnh.
   ===================================================================== */
.th-luyencong-scene .th-lc-bg{pointer-events:none;user-select:none;}
.th-luyencong-scene .th-combat-arena{overflow:visible;}
.th-luyencong-scene .th-combat-player,.th-luyencong-scene .th-lc-mob{transform:translate(-50%,-100%);transform-origin:50% 100%;transition:none;}
.th-luyencong-scene .th-combat-arena .th-combat-player .th-combat-player-img{height:calc(31.2cqh * var(--ps,1));}
.th-luyencong-scene .th-combat-arena .th-combat-player .th-combat-player-img.th-combat-sect-sprite{--th-sect-h:calc(31.2cqh * var(--ps,1) * 1.143);}
.th-luyencong-scene .th-combat-arena .th-combat-player{--th-aura-h:calc(26cqh * var(--ps,1));gap:calc(2px * var(--tf,1));}
/* Owner 2026-10-31: vòng sáng dưới chân ở các cảnh chiến đấu sân khấu (Luyện Công, Thảo Nguyên, Tu Luyện, Tổ Đội, Boss) hơi CAO so với chân nhân vật → hạ tâm vòng xuống (mặc định bỏ phần nâng 0,06 × cỡ vòng; chỉnh bằng --th-aura-lift). Bản Pixi đọc đúng vị trí này từ DOM nên tự khớp. */
/* Luyện Công/Thảo Nguyên: nhân vật nhỏ — đệm chân cố định 13px quá lớn so với chân thật (vòng nằm trên chân ~9px) → bỏ đệm */
.th-luyencong-scene .th-combat-arena .th-combat-player{--th-aura-foot:0px;}
.th-territory-scene .th-combat-arena .th-combat-player .th-aura{bottom:calc(var(--th-aura-foot) + var(--th-aura-h) * var(--th-aura-lift,0));}
.th-luyencong-scene .th-lc-mob{width:max-content;cursor:pointer;gap:calc(1px * var(--tf,1));}
.th-luyencong-scene .th-lc-mob .th-combat-monster-sprite{height:calc(26cqh * var(--ps,1));transform:scaleX(var(--lc-flip,1)) rotate(calc(var(--lc-tilt,0deg) * var(--lc-flip,1) * -1));transform-origin:50% 100%;}
.th-luyencong-scene .th-lc-mob.is-dead{opacity:0;pointer-events:none;transition:opacity .35s ease;}
.th-luyencong-scene .th-lc-mob.is-selected .th-combat-monster-sprite{filter:drop-shadow(0 0 calc(10px * var(--tf,1)) #ffe68d) drop-shadow(0 calc(10px * var(--tf,1)) calc(12px * var(--tf,1)) rgba(0,0,0,.55));}
.th-luyencong-scene .th-lc-mob.is-spawn{animation:thLcSpawn .45s ease-out;}
@keyframes thLcSpawn{0%{opacity:0;filter:brightness(2.2);}100%{opacity:1;filter:none;}}
.th-luyencong-scene .th-combat-actor .th-combat-monster-name{font-size:calc(12px * var(--th-fs,1) * var(--tf,1));max-width:none;}
.th-luyencong-scene .th-combat-actor .th-combat-hp{width:calc(74px * var(--tf,1));height:calc(7px * var(--tf,1));border-width:1px;}
.th-luyencong-scene .th-combat-actor .th-wx-icon{width:calc(18px * var(--tf,1));height:calc(18px * var(--tf,1));}
.th-luyencong-scene .th-combat-dmg-float{z-index:7;}   /* cỡ chữ = chuẩn Tu Luyện (22px × --th-fs), không co theo cỡ nhân vật */
.th-luyencong-scene .th-combat-dmg-float.is-crit{}
.th-luyencong-scene .th-combat-dmg-float.is-player-hit{}
.th-luyencong-scene .th-combat-dmg-float.is-wx-adv{}
.th-luyencong-scene .th-fx-badges{transform:scale(var(--tf,1));transform-origin:50% 100%;}
.th-luyencong-scene .th-lc-ghost{transform:translate(-50%,-100%);font-size:calc(12px * var(--tf,1));min-width:calc(34px * var(--tf,1));padding:calc(3px * var(--tf,1)) calc(8px * var(--tf,1));border-width:calc(2px * var(--tf,1));}
.th-luyencong-scene .th-boss-ally{pointer-events:none;}
.th-luyencong-scene .th-sectboss-hud{pointer-events:none;}
.th-luyencong-scene .th-combat-monster-name.th-boss-name-self,.th-luyencong-scene .th-boss-name-ally{color:#fff1cf;}
.th-luyencong-scene .th-combat-actor .th-fxstack{bottom:calc(100% + 18px * var(--tf,1));}
.th-lc-tag .th-map-zone-label{border-color:rgba(255,224,131,.7);}
@media (prefers-reduced-motion:reduce){.th-luyencong-scene .th-lc-mob.is-spawn{animation:none;}}
/* Luyện Công: bảng thống kê (kênh, giờ còn lại, Tu Vi hôm nay…) dời sang cạnh PHẢI, ngay dưới nút Về Môn Phái (Owner 2026-10-03). */
.th-luyencong-scene .th-sectboss-hud{left:auto;right:12px;top:56px;width:min(260px,34vw);align-items:flex-end;text-align:right;}
.th-luyencong-scene .th-sectboss-info{text-align:right;}
.th-luyencong-scene .th-sectboss-banner{top:11%;max-width:min(520px,80vw);text-align:center;white-space:normal;border-radius:14px;line-height:1.45;}

/* ===== Giảm tải vẽ (Owner 2026-10-05: ~8 người thì giật) =====
   Quái Rừng Ẩn Tu: 40 sprite đổi khung liên tục → bộ lọc drop-shadow (mờ 12px) phải tính lại mỗi khung. Bỏ hẳn, thay bằng bóng elip tĩnh rẻ tiền.
   Phòng đông / máy yếu (lớp .th-perf-lite do _thPerfMeter bật): bỏ bộ lọc ở Boss + nhân vật, tắt hiệu ứng thở của Boss. */
.th-luyencong-scene .th-lc-mob .th-combat-monster-sprite{filter:none;}
.th-luyencong-scene .th-lc-mob{contain:layout style;}
.th-luyencong-scene .th-lc-mob::before{content:"";position:absolute;left:50%;top:calc(26cqh * var(--ps,1) - 7px * var(--tf,1));width:calc(26cqh * var(--ps,1) * .7);height:calc(14px * var(--tf,1));transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.5),rgba(0,0,0,0) 70%);pointer-events:none;}
/* Rừng Ẩn Tu / Thảo Nguyên = màn TREO MÁY (Owner 2026-10-22): bỏ hết bộ lọc, hoạt hình, chuyển động trang trí; chỉ giữ hình, tên, thanh máu và nút bấm. */
.th-lc-lite *,.th-lc-lite *::before,.th-lc-lite *::after{animation:none!important;transition:none!important;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;will-change:auto!important;}
.th-lc-lite .th-lc-mob.is-dead{opacity:0;}
.th-lc-lite .th-lc-mob.is-selected .th-combat-monster-sprite{outline:2px solid #ffe68d;outline-offset:-2px;border-radius:6px;}   /* chọn mục tiêu: viền thay cho quầng sáng filter */
.th-lc-lite .th-combat-dmg-float,.th-lc-lite .th-vfx,.th-lc-lite .th-fxstack,.th-lc-lite .th-fx-pop,.th-lc-lite .th-fx-badges{display:none!important;}
.th-lc-lite .th-boss-ground-aura{display:none!important;}
.th-perf-lite .th-boss-sprite,.th-perf-lite.th-sectboss-scene .th-boss-mob.is-selected .th-boss-sprite{filter:none;animation:none;}
.th-perf-lite .th-combat-actor img,.th-perf-lite .th-combat-player img{filter:none;}
.th-perf-lite .th-wx-icon{filter:none;}
.th-perf-lite .th-vfx{will-change:auto;}
/* Boss từ 6 người: giữ avatar/HP và hoạt ảnh đòn của đồng đội, bỏ lớp trình diễn nặng ở chính scene này. */
.th-boss-raid-lite .th-boss-ally .th-combat-player-img{filter:none;}
.th-boss-raid-lite .th-boss-ally .th-fxstack,.th-boss-raid-lite .th-boss-ally .th-fx-badges{display:none;}
/* Thuần Phục Thần Mã (TM2): bảng Thần Mã mở từ Chi Tiết Trang Bị của ô Thú Cưỡi — dùng khung modal Chi Tiết Trang Bị, thêm thanh Thuần Độ + hàng cho ăn. */
.th-tm-panel{width:min(400px,94vw);}
/* Tiên Hiệp Bách Khoa */
.th-bk-panel{width:min(760px,96vw);max-height:92vh;display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(24,30,28,.97),rgba(10,14,16,.98));border:1px solid rgba(201,164,76,.55);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 18px 50px rgba(0,0,0,.65),inset 0 0 40px rgba(79,191,159,.06);}
.th-bk-title{font-weight:800;font-size:20px;margin-bottom:8px;color:#f0d98a;letter-spacing:.5px;text-shadow:0 1px 6px rgba(0,0,0,.8);}
.th-bk-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}   /* Owner 2026-10-06: tự xuống hàng khi đầy, không cuộn ngang (người chơi dễ không biết cuộn được) */
.th-bk-tabs button{flex:0 0 auto;}
.th-bk-tabs button{padding:5px 10px;border-radius:999px;border:1px solid rgba(201,164,76,.5);background:rgba(0,0,0,.35);color:inherit;cursor:pointer;font-size:13px;}
.th-bk-tabs button.is-active{background:rgba(201,164,76,.35);font-weight:700;}
.th-bk-content{overflow:auto;max-height:68vh;display:grid;gap:8px;align-content:start;}
.th-bk-card{padding:10px 12px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.28));border:1px solid rgba(201,164,76,.22);border-left:3px solid var(--bk-q,rgba(201,164,76,.7));}
.th-bk-card p{margin:4px 0 0;font-size:13px;line-height:1.4;}
.th-bk-row{display:flex;justify-content:space-between;padding:3px 6px;font-size:13px;}
.th-bk-sub{font-weight:700;margin-top:4px;color:#e8c872;}
.th-bk-dim{opacity:.75;font-size:12px;}
.th-bk-filter{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;}
.th-bk-item{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:13px;}
.th-bk-item img{width:32px;height:32px;object-fit:contain;}
.th-bk-item em{margin-left:auto;opacity:.7;font-size:12px;}
.th-bk-mount{display:flex;gap:10px;align-items:center;}
.th-bk-mount .th-mount-stage{width:96px;min-height:90px;flex:0 0 96px;}
.th-bk-mount .th-mount-horse{max-height:90px;}
.th-bk-equip{display:flex;gap:8px;align-items:flex-start;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08);}
.th-bk-equip img{width:44px;height:44px;object-fit:contain;flex:0 0 44px;}
.th-bk-equip-name{font-weight:700;font-size:13px;}
.th-bk-stats{display:flex;flex-wrap:wrap;gap:3px 10px;font-size:12px;}
.th-bk-stat b{color:#e8c872;}
.th-bk-badge{display:inline-block;padding:0 6px;border:1px solid rgba(201,164,76,.7);border-radius:999px;font-size:11px;font-weight:600;}
.th-bk-qrow{display:flex;gap:6px;flex-wrap:wrap;}
.th-bk-indent{margin-left:10px;}
.th-bk-setrow{display:flex;gap:10px;align-items:baseline;margin-top:4px;}
.th-bk-pieces{flex:0 0 52px;font-weight:700;font-size:13px;}
.th-bk-auras{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px;}
.th-bk-auras figure{margin:0;text-align:center;font-size:10px;}
.th-bk-auras img{width:100%;aspect-ratio:1;object-fit:contain;background:rgba(0,0,0,.35);border-radius:6px;}
.th-bk-filter input[type=search]{flex:1;min-width:120px;}
.th-tm-bar{position:relative;height:22px;border-radius:999px;border:1px solid rgba(231,197,107,.7);background:rgba(4,7,10,.7);overflow:hidden;}
.th-tm-bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#8a6a1c,#e7c56b);transition:width .25s ease;}
.th-tm-bar span{position:relative;display:block;text-align:center;font:700 12px/20px var(--font-body);color:#fff;text-shadow:0 1px 3px #000;}
.th-tm-note{font-size:12px;text-align:center;opacity:.9;color:#f5dc70;}
.th-tm-warn{color:#ff9a8a;}
.th-tm-sec{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--border-strong);padding-top:8px;}
.th-tm-sec h4{margin:0;font-size:13px;color:#f5dc70;}
.th-tm-row{display:flex;align-items:center;gap:8px;}
.th-tm-row img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));}
.th-tm-name{flex:1;display:flex;flex-direction:column;font-size:13px;}
.th-tm-name small{opacity:.7;font-size:11px;}
.th-tm-qty,.th-tm-units{width:64px;padding:4px 8px;border-radius:999px;border:1px solid rgba(231,197,107,.6);background:rgba(4,7,10,.7);color:inherit;text-align:center;font:700 13px var(--font-body);}
.th-tm-food{padding:4px 10px;border-radius:999px;border:1px solid rgba(231,197,107,.6);background:rgba(4,7,10,.85);color:inherit;font:13px var(--font-body);}
.th-tm-gold-row{display:flex;align-items:center;gap:8px;font-size:12px;}
.th-tm-cap,.th-tm-empty,.th-tm-future small{font-size:11px;opacity:.75;}
.th-tm-sec .btn{align-self:center;min-width:180px;}
.th-tm-future{opacity:.8;}
/* Thuần Phục Thần Mã (TM3a): danh sách vòng Thử Thách trong bảng Thần Mã. */
.th-tm-trial{display:flex;flex-direction:column;gap:4px;padding:6px 0;}
.th-tm-trial-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;}
.th-tm-trial-head small{opacity:.7;font-size:11px;}
.th-tm-round{display:flex;align-items:center;gap:8px;font-size:12px;opacity:.75;}
.th-tm-round.is-current{opacity:1;color:#f5dc70;}
.th-tm-round.is-done{opacity:.9;color:#7be08a;}
.th-tm-round-mark{width:16px;text-align:center;}
.th-tm-round-text{display:flex;flex-direction:column;}
.th-tm-round-text small{opacity:.75;font-size:11px;}
/* Thảo Nguyên (TM4): Mã Vương — to hơn, viền vàng; chủ có viền sáng hơn. */
.th-lc-mob.is-vuong .th-lc-sprite{transform:scale(1.28);transform-origin:50% 100%;filter:drop-shadow(0 0 10px rgba(245,220,112,.75));}
.th-lc-mob.is-vuong .th-combat-monster-name{color:#f5dc70;font-weight:800;text-shadow:0 1px 3px #000;}
.th-lc-mob.is-vuong.is-vuong-mine .th-lc-sprite{filter:drop-shadow(0 0 14px rgba(255,235,130,1));}
.th-tm-vuong{width:140px;height:140px;margin:0 auto;background-repeat:no-repeat;background-size:400% 200%;background-position:0 0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.7));}
/* Thần Mã (TM6): ngựa đứng trên vòng sáng Cảnh Giới, viền sáng theo phẩm chất. */
.th-mount-stage{position:relative;display:flex;justify-content:center;align-items:flex-end;width:100%;min-height:150px;}
.th-aura--mount{left:50%;top:82%;width:96%;--g:255 244 214;--th-aura-d:.6;--th-aura-gs:.2;}
.th-mount-horse{position:relative;max-width:100%;max-height:220px;object-fit:contain;filter:drop-shadow(0 0 10px var(--th-q-glow)) drop-shadow(0 0 22px var(--th-q-glow)) drop-shadow(0 4px 6px rgba(0,0,0,.6));}
.th-equip-detail-art.th-mount-stage{min-height:170px;}
.th-equip-detail-art .th-mount-horse{position:relative;}

.th-bk-chips{display:flex;gap:6px;flex-wrap:wrap;}
.th-bk-chips button{padding:4px 12px;border-radius:999px;border:1px solid var(--bk-q,rgba(201,164,76,.5));background:rgba(0,0,0,.35);color:inherit;cursor:pointer;font-size:12px;}
.th-bk-chips button.is-active{background:rgba(201,164,76,.32);font-weight:700;}
.th-bk-realms{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;}
.th-bk-realm{display:flex;flex-direction:column;align-items:center;padding:6px;border-radius:8px;background:rgba(0,0,0,.3);border:1px solid rgba(79,191,159,.3);font-size:13px;}
.th-bk-realm span{font-size:11px;opacity:.75;}
.th-bk-bicanh{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin-top:8px;}
.th-bk-bc{position:relative;border-radius:10px;overflow:hidden;padding:8px;min-height:130px;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.75)),var(--bk-bg) center/cover;border:1px solid rgba(201,164,76,.3);}
.th-bk-bc-name{font-weight:700;font-size:13px;text-shadow:0 1px 4px #000;}
.th-bk-bc-row{display:flex;gap:10px;justify-content:center;align-items:flex-end;margin-top:4px;}
.th-bk-fig{display:flex;flex-direction:column;align-items:center;width:84px;font-size:11px;text-align:center;cursor:help;}
.th-bk-fig img,.th-bk-fig .th-bk-sprite{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.8));}
.th-bk-fig.is-boss img{width:100px;height:100px;}
.th-bk-sprite{background-repeat:no-repeat;background-size:400% 200%;background-position:0 0;}
.th-bk-skillgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;}
.th-bk-skill{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:10px;background:rgba(0,0,0,.3);border:1px solid rgba(201,164,76,.35);text-align:center;font-size:11px;cursor:help;}
.th-bk-skill.is-passive{border-color:rgba(79,191,159,.5);}
.th-bk-skill img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));}
.th-bk-skill em{opacity:.7;font-style:normal;}
.th-bk-leader{display:flex;align-items:center;gap:10px;padding:6px;cursor:help;}
.th-bk-leader img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.8));}
.th-bk-grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.th-bk-tile{display:flex;flex-direction:column;align-items:center;padding:8px;border-radius:10px;background:rgba(0,0,0,.3);border:1px solid rgba(201,164,76,.3);text-align:center;font-size:12px;cursor:help;}
.th-bk-tile img{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.8));}
.th-bk-tile small{opacity:.75;}.th-bk-tile em{font-style:normal;color:#e8c872;}
.th-bk-bosses{display:grid;gap:8px;}
.th-bk-boss{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,.2));border:1px solid rgba(201,164,76,.35);cursor:help;}
.th-bk-boss img{width:110px;height:110px;object-fit:contain;flex:0 0 110px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.8));}
.th-bk-boss b{display:block;margin-top:2px;}
.th-bk-badge.is-closed{border-color:#e14b4b;color:#e14b4b;}
.th-bk-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px;}
.th-bk-stages figure{margin:0;text-align:center;font-size:11px;cursor:help;}
.th-bk-stages img{width:100%;aspect-ratio:1;object-fit:contain;background:rgba(0,0,0,.3);border-radius:8px;}
.th-bk-pet-collections{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(201,164,76,.22)}
.th-bk-pet-collections h4{margin:0 0 6px;color:#f0d98a;font-size:12px}
.th-bk-pet-collect-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.th-bk-pet-collect{appearance:none;min-width:0;padding:5px 3px;border:1px solid rgba(201,164,76,.26);border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.34));color:#f4e6bf;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:help;font:inherit;text-align:center}
.th-bk-pet-collect:hover,.th-bk-pet-collect:focus-visible{border-color:#f0d98a;background:rgba(201,164,76,.16);outline:0}
.th-bk-pet-collect img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.75))}
.th-bk-pet-collect.is-book img{width:48px;height:48px}
.th-bk-pet-collect span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;line-height:1.2}
.th-bk-pet-collect em{font-size:8px;font-style:normal;color:#ffe187;line-height:1}
.th-bk-pet-collect.is-passive{border-color:rgba(79,191,159,.45)}
.th-bk-equip,.th-bk-mount{cursor:help;}
@media (max-width:520px){.th-bk-boss img{width:80px;height:80px;flex-basis:80px;}.th-bk-stages{grid-template-columns:repeat(2,1fr);}}
@media (max-width:700px){.th-bk-pet-collections{grid-template-columns:1fr}.th-bk-pet-collect img{width:40px;height:40px}.th-bk-pet-collect.is-book img{width:44px;height:44px}}


/* =====================================================================
   SẢNH CHÍNH MỚI — CỔ TRẤN (Owner 2026-10-07; tien-hiep-cotran.js)
   Chỉ hiệu lực khi JS đặt data-co-tran="1" lên .hero-tienhiep (công tắc Admin
   `tienhiep.co_tran`, mặc định TẮT). KHÔNG ở màn Trang Bị (.is-equip-view dùng
   nền + nhân vật riêng). Dọn toàn bộ cảnh cũ (4 lớp nền, nhân vật, sân đá,
   mái/lan can, Vũ Khí/Thần Thú/Phi Kiếm bay…); giữ 4 HUD, khung avatar, chat,
   thông báo hệ thống. Bảng chào "Thế Giới Tiên Hiệp" vẫn hiện cho người chưa
   có nhân vật (nút Bắt Đầu Tu Tiên) — nằm trên nền cổ trấn.
   ===================================================================== */
.hero-tienhiep .th-cotran{display:none;position:absolute;inset:0;overflow:hidden;z-index:0;container-type:size;background:#0d2330;touch-action:pan-y;cursor:grab;}
.hero-tienhiep[data-co-tran="1"]:not(.is-equip-view) .th-cotran{display:block;}
.hero-tienhiep[data-co-tran="1"]:not(.is-equip-view) .stage,
.hero-tienhiep[data-co-tran="1"]:not(.is-equip-view) .l4-roof,
.hero-tienhiep[data-co-tran="1"]:not(.is-equip-view) .l4-railing,
.hero-tienhiep[data-co-tran="1"]:not(.is-equip-view) .l4-lantern,
.hero-tienhiep[data-co-tran="1"]:not(.is-equip-view) .char-home-platform,
.hero-tienhiep[data-co-tran="1"]:not(.is-equip-view) .char-home-portrait,
.hero-tienhiep[data-co-tran="1"]:not(.is-equip-view) .th-char-shadow,
.hero-tienhiep[data-co-tran="1"]:not(.is-equip-view) .th-char-nameplate,
.hero-tienhiep[data-co-tran="1"]:not(.is-equip-view) .th-equip-weapon-float,
.hero-tienhiep[data-co-tran="1"]:not(.is-equip-view) .th-equip-mount-float,
.hero-tienhiep[data-co-tran="1"]:not(.is-equip-view) .th-mount-shadow,
.hero-tienhiep[data-co-tran="1"]:not(.is-equip-view) .th-equip-phikiem-float{display:none !important;}
/* Khung hình 16:9 phủ kín hero kiểu "cover" (đơn vị cqw/cqh theo .th-cotran); màn dọc rộng hơn khung → kéo ngang bằng --ct-pan. */
.th-cotran-stage{position:absolute;left:50%;top:50%;width:max(100cqw,calc(100cqh * 16 / 9));aspect-ratio:16 / 9;transform:translate(calc(-50% + var(--ct-pan,0px)),-50%);}
.th-cotran-layer{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;pointer-events:none;}
.th-cotran-layer.is-on{opacity:1;}
.th-cotran-layer.is-dem{z-index:1;}
/* Grade CHỈ lớp nền: nền Cổ Trấn có phần gạch/lối đi sáng hơn bộ kiến trúc ghép phía trên.
   Giữ công trình, đèn và HUD nguyên màu để chúng vẫn là điểm sáng của cảnh. */
.th-cotran-bg{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;user-select:none;-webkit-user-drag:none;filter:brightness(.94) saturate(.96) contrast(1.01);}
.th-cotran-layer.is-dem .th-cotran-bg{filter:brightness(.87) saturate(.91) contrast(1.03);}
.th-cotran-buildings{position:absolute;inset:0;z-index:2;pointer-events:none;}
.th-cotran-bld{position:absolute;left:var(--bx);top:var(--by);width:var(--bw);pointer-events:none;transform:rotate(var(--ct-rotate,0deg)) scaleX(var(--ct-flip,1));transform-origin:50% 90%;}
.th-cotran-building{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none;opacity:0;transition:opacity .7s ease;}
.th-cotran-building.is-ngay.is-ready{opacity:1;}
.th-cotran-building.is-dem{z-index:1;}
.th-cotran-stage[data-period="dem"] .th-cotran-building.is-dem.is-ready{opacity:1;}
/* Ban đêm ẩn HẲN ảnh kiến trúc ban ngày (mép/chân kiến trúc đêm không còn lộ viền sáng của ảnh ngày); ẩn sau khi ảnh đêm đã hiện xong để không bị chớp khi đổi buổi */
.th-cotran-stage[data-period="dem"] .th-cotran-building.is-ngay{opacity:0;transition:opacity .35s ease .7s;}
/* Căn UI: chỉ nhận chuột khi Admin bật EDIT. */
.is-th-layout-editing .th-cotran-bld{pointer-events:auto;cursor:move;outline:1px dashed rgba(255,215,106,.5);}
.is-th-layout-editing .th-cotran-bld[data-th-layout-selected]{outline:2px solid #ffd76a;}
.is-th-cotran-arranging .th-cotran{cursor:default;}
.is-th-cotran-arranging .th-cotran-bld{pointer-events:auto;cursor:move;outline:1px dashed rgba(255,215,106,.42);}
.is-th-cotran-arranging .th-cotran-bld[data-arrange-selected]{outline:3px solid #ffd76a;filter:drop-shadow(0 0 7px rgba(255,215,106,.72));}
.th-cotran-arranger{position:fixed;z-index:2700;right:12px;top:92px;width:min(340px,calc(100vw - 24px));max-height:calc(100vh - 108px);display:flex;flex-direction:column;overflow:hidden;border:1px solid #d4a847;border-radius:12px;background:rgba(10,20,31,.96);box-shadow:0 14px 40px rgba(0,0,0,.55);color:#f5ead0;font:13px/1.35 system-ui,sans-serif;}
.th-cotran-arranger header,.th-cotran-arranger footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:rgba(33,51,68,.92);}
.th-cotran-arranger header button,.th-cotran-arranger button{border:1px solid #b7953c;border-radius:6px;background:#1b3141;color:#f6e7b6;padding:6px 8px;cursor:pointer;font-weight:700;}
.th-cotran-arranger header button{font-size:20px;line-height:16px;}
.th-cotran-arrange-tabs{display:flex;gap:7px;padding:8px 10px;border-bottom:1px solid rgba(212,168,71,.3);}
.th-cotran-arranger section{overflow:auto;padding:9px 10px;}
.th-cotran-arrange-categories{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px;}.th-cotran-arrange-categories button{font-size:11px;padding:4px 6px;}
.th-cotran-arrange-assets{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}.th-cotran-arrange-asset{min-width:0;padding:4px!important;text-align:center;font-size:10px!important;}.th-cotran-arrange-asset img{display:block;width:100%;height:54px;object-fit:contain;}.th-cotran-arrange-asset span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.th-cotran-arranger [data-arrange-inspector]{display:flex;flex-direction:column;gap:9px;}.th-cotran-arranger small{color:#b6c3cd;}.th-cotran-arranger label{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:center;}.th-cotran-arranger input[type="text"]{grid-column:1/-1;min-width:0;border:1px solid #52677a;border-radius:5px;background:#101c29;color:#fff;padding:6px;}.th-cotran-arranger output{text-align:right;color:#ffd76a;}.th-cotran-arrange-row{display:flex;gap:6px;flex-wrap:wrap;}.th-cotran-arranger .is-danger{border-color:#c65353;color:#ffc2c2;}.th-cotran-arranger footer button:last-child{background:#8b6d1d;color:#fff5c5;}
@media (max-width:720px){.th-cotran-arranger{top:auto;bottom:8px;right:8px;width:min(360px,calc(100vw - 16px));max-height:46vh;}.th-cotran-arrange-assets{grid-template-columns:repeat(4,1fr);}.th-cotran-arrange-asset img{height:42px;}}
@media (prefers-reduced-motion:reduce){.th-cotran-layer,.th-cotran-building{transition:none;}}

/* Nhân vật nhỏ đi trong Cổ Trấn (thử nghiệm ?th_walker=1) — vị trí/cỡ do JS đặt theo khung cảnh. */
.th-cotran-walker{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;}
.th-cotran-walker-sprite{position:absolute;left:0;top:0;display:block;background-repeat:no-repeat;transform-origin:50% 50%;image-rendering:auto;}
.th-cotran-walker-shadow{position:absolute;display:block;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.42),rgba(0,0,0,0) 70%);}
.th-cotran-walker-ring{position:absolute;width:22px;height:10px;margin:-5px 0 0 -11px;border:2px solid rgba(255,242,200,.95);border-radius:50%;opacity:0;pointer-events:none;z-index:2000;}
.th-cotran-walker-ring.is-go{animation:th-ct-ring .9s ease-out;}
@keyframes th-ct-ring{0%{opacity:1;transform:scale(.6);}100%{opacity:0;transform:scale(1.8);}}
.th-cotran-walker-debug{position:absolute;inset:0;width:100%;height:100%;opacity:.28;pointer-events:none;z-index:1999;image-rendering:pixelated;}

.th-cotran-walker-pk{position:absolute;display:block;background-repeat:no-repeat;pointer-events:none;}
/* Tên + thanh máu trên đầu nhân vật Cổ Trấn */
.th-cotran-walker-tag{position:absolute;z-index:3;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;white-space:nowrap;}
.th-cotran-walker-wx{display:inline-flex;align-items:center;justify-content:center;height:16px;}
.th-cotran-walker-wx:empty{display:none;}
.th-cotran-walker-wx img{display:block;width:16px;height:16px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.9));}
.th-cotran-walker-title{display:block;font-family:"Noto Serif","Playfair Display",Georgia,serif;font-size:10px;font-weight:700;line-height:1.1;letter-spacing:.03em;text-shadow:0 1px 2px #000,0 0 3px #000;white-space:nowrap;}
.th-cotran-walker-title[hidden],.th-cotran-walker-title:empty{display:none;}
.th-cotran-walker-title img{height:11px;width:auto;vertical-align:-1px;margin-right:2px;}
.th-title-line{font-size:12px;font-weight:700;line-height:1.1;margin:0;text-shadow:0 1px 2px rgba(0,0,0,.7);}
.th-title-line[hidden]{display:none;}
.th-title-line img{height:13px;width:auto;vertical-align:-2px;margin-right:2px;}
.th-cotran-walker-name{font-family:"Noto Serif","Playfair Display",Georgia,serif;font-size:12px;font-weight:700;line-height:1.1;color:#fff4d6;text-shadow:0 1px 2px #000,0 0 3px #000,1px 0 2px #000,-1px 0 2px #000;letter-spacing:.02em;}
.th-cotran-walker-hp{display:block;width:52px;height:6px;border:1px solid rgba(0,0,0,.85);border-radius:3px;background:rgba(20,6,6,.75);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.6);}
.th-cotran-walker-hp i{display:block;height:100%;width:100%;background:linear-gradient(#ff6b5e,#c21f1f);}
.th-cotran-walker-exp-gain{position:absolute;left:50%;bottom:100%;z-index:7;transform:translate(-50%,0);color:#ffe9a8;font:900 calc(16px * var(--th-fs,1))/1.1 var(--font-body);white-space:nowrap;pointer-events:none;text-shadow:0 0 5px #7a5300,0 2px 3px #000;animation:th-cotran-exp-gain 1.5s ease-out both;}
@keyframes th-cotran-exp-gain{0%{opacity:0;transform:translate(-50%,8px) scale(.82);}12%{opacity:1;transform:translate(-50%,0) scale(1.05);}76%{opacity:1;}100%{opacity:0;transform:translate(-50%,-38px) scale(.96);}}
@media (prefers-reduced-motion:reduce){.th-cotran-walker-exp-gain{animation-duration:.01ms;}}
.hero-tienhiep:not([data-co-tran="1"]) .th-combat-kit.th-cotran-kit,.hero-tienhiep.is-equip-view .th-combat-kit.th-cotran-kit{display:none;}
/* Cổ Trấn: cụm chiến đấu lùi sang trái để không đè hàng icon HUD bên phải */
.hero-tienhiep .th-combat-kit.th-cotran-kit{inset:0 96px 0 0;}   /* mặc định; JS (alignKit) đo lại theo mép trái cột icon HUD phải */
@media (max-width:560px){.hero-tienhiep .th-combat-kit.th-cotran-kit{inset:0 60px 0 0;}}
/* Thần Thú đi cùng + Phi Kiếm sau lưng (Cổ Trấn) */
.th-cotran-walker-pet{position:absolute;pointer-events:none;}
.th-cotran-walker-pet-sprite{width:100%;height:100%;background-repeat:no-repeat;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45));}
.th-cotran-walker-pkback{position:absolute;display:none;z-index:0;background-repeat:no-repeat;opacity:.95;pointer-events:none;transform:rotate(-12deg);filter:drop-shadow(0 0 8px var(--th-q-glow,#9adfff));animation:th-cotran-pkback-float 3.2s ease-in-out infinite;}
@keyframes th-cotran-pkback-float{0%,100%{transform:translateY(0) rotate(-12deg);}50%{transform:translateY(-7px) rotate(-9deg);}}
@media (prefers-reduced-motion:reduce){.th-cotran-walker-pkback{animation:none;}}
.hero-tienhiep .th-combat-kit.th-cotran-kit{z-index:30;}
.hero-tienhiep .th-combat-kit.th-cotran-kit.is-pk-only{inset:0;}   /* chỉ-Phi-Kiếm: không lùi vào, sát góc màn hình */
/* Bày Trí Cổ Trấn: điểm neo, mặt nạ đi được, nhãn hoạt động; icon trạng thái trên đầu nhân vật */
.th-cotran-arrange-anchors{position:absolute;inset:0;z-index:5200;pointer-events:none;}
.th-cotran-arrange-dot{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#ffd76a;border:2px solid #5b3d00;color:#2b1a00;font:700 12px/18px system-ui,sans-serif;text-align:center;font-style:normal;pointer-events:auto;cursor:grab;box-shadow:0 0 0 3px rgba(255,215,106,.35);touch-action:none;}
.th-cotran-arrange-mask{position:absolute;inset:0;width:100%;height:100%;z-index:5100;image-rendering:pixelated;cursor:crosshair;touch-action:none;}
.th-cotran-arranger [data-mask-tool].is-on{background:#8b6d1d;color:#fff5c5;}
.th-cotran-arranger select{min-width:0;border:1px solid #52677a;border-radius:5px;background:#101c29;color:#fff;padding:6px;}
.th-cotran-arrange-act{color:#ffd76a;font-size:9px!important;}
.th-cotran-arranger input[type="range"]{min-width:0;}
.th-cotran.is-covered{visibility:hidden;}.th-cotran.is-covered *{animation-play-state:paused!important;}   /* scene chiến đấu che kín: ẩn bằng visibility (không display:none — nhân vật vẫn chạy logic) */
.th-cotran-status{display:block;width:30px;height:30px;object-fit:contain;pointer-events:none;animation:th-cotran-status-bob 1.6s ease-in-out infinite;will-change:transform;}   /* Owner 2026-10-22: bỏ filter:drop-shadow trên phần tử đang animate (mỗi khung phải vẽ lại bằng GPU) */
@keyframes th-cotran-status-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* Bày Trí: popup chi tiết kiến trúc nằm cạnh bảng chính (fixed nên không bị cắt bởi bảng) */
.th-cotran-arrange-pop{position:fixed;z-index:2710;top:92px;right:calc(min(340px,100vw - 24px) + 24px);width:min(400px,calc(100vw - 380px));min-width:300px;max-height:calc(100vh - 108px);display:flex;flex-direction:column;overflow:hidden;border:1px solid #d4a847;border-radius:12px;background:rgba(10,20,31,.97);box-shadow:0 14px 40px rgba(0,0,0,.55);color:#f5ead0;font:14px/1.4 system-ui,sans-serif;}
.th-cotran-arrange-pop[hidden]{display:none;}
.th-cotran-arrange-pop header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:rgba(33,51,68,.92);}
.th-cotran-arrange-pop>section{overflow:auto;padding:12px;}
.th-cotran-arrange-pop [data-arrange-inspector]{gap:12px;}
.th-cotran-arrange-pop label{display:grid;grid-template-columns:130px 1fr;gap:8px;align-items:center;}
.th-cotran-arrange-pop select,.th-cotran-arrange-pop input[type="text"]{font-size:14px;padding:8px;}
.th-cotran-arrange-pop button{font-size:13px;padding:8px 10px;}
@media (max-width:900px){.th-cotran-arrange-pop{right:12px;left:12px;width:auto;top:8px;max-height:44vh;}}
/* Nhãn TAG cạnh kiến trúc + hào quang khi rê chuột vào kiến trúc đã gắn liên kết (công tắc co_tran_spots → .is-spots-on) */
.th-cotran-bld-tag{position:absolute;z-index:4000;display:none;pointer-events:none;white-space:nowrap;transform:translate(-50%,0);}
.th-cotran-bld-tag[data-pos="top"]{transform:translate(-50%,-100%);}
.th-cotran-bld-tag[data-pos="left"]{transform:translate(-100%,-50%);}
.th-cotran-bld-tag[data-pos="right"]{transform:translate(0,-50%);}
.th-cotran.is-spots-on .th-cotran-bld-tag,.is-th-cotran-arranging .th-cotran-bld-tag{display:block;}
.th-cotran-bld-tag span{display:block;padding:.18em .7em;border-radius:999px;border:1px solid rgba(231,196,105,.65);background:rgba(10,20,31,.68);color:#ffe9a6;font:700 max(10px,.82cqw)/1.25 system-ui,sans-serif;letter-spacing:.02em;text-shadow:0 1px 2px #000;box-shadow:0 1px 6px rgba(0,0,0,.45);transition:background .2s,box-shadow .2s,color .2s;}
.th-cotran-bld-tag.is-link-hover span{background:rgba(70,48,8,.82);color:#fff6d0;box-shadow:0 0 12px rgba(255,214,120,.9);}
.is-th-cotran-arranging .th-cotran-bld-tag{pointer-events:auto;cursor:move;}
.th-cotran-building{transition:opacity .7s ease,filter .25s ease;}
.th-cotran-bld.is-link-hover .th-cotran-building{filter:brightness(1.16) saturate(1.1) drop-shadow(0 0 7px rgba(255,214,120,.95)) drop-shadow(0 0 16px rgba(255,190,80,.6));}
/* Nhãn TAG sát kiến trúc hơn 4px (Owner 2026-10-10) */
.th-cotran-bld-tag[data-pos="bottom"]{margin-top:-4px;}
.th-cotran-bld-tag[data-pos="top"]{margin-top:4px;}
.th-cotran-bld-tag[data-pos="left"]{margin-left:4px;}
.th-cotran-bld-tag[data-pos="right"]{margin-left:-4px;}
/* ===== Sự kiện Lửa Trại Cổ Trấn ===== */
.th-cotran-bld[data-special="campfire"]{display:none;}
.th-cotran-bld[data-special="campfire"].is-cf-on,.is-th-cotran-arranging .th-cotran-bld[data-special="campfire"]{display:block;}
.th-cotran-cf-glow{position:absolute;z-index:3;transform:translate(-50%,-50%);aspect-ratio:2/1;border-radius:50%;pointer-events:none;display:none;background:radial-gradient(ellipse at center,rgba(255,176,70,.5) 0%,rgba(255,140,40,.2) 52%,rgba(255,120,30,0) 72%);mix-blend-mode:screen;}
.is-th-cotran-arranging .th-cotran-cf-glow{display:block;border:1px dashed rgba(255,200,110,.85);background:radial-gradient(ellipse at center,rgba(255,176,70,.28),rgba(255,140,40,.1) 60%,rgba(255,120,30,0) 72%);}
.th-cotran-cf-label{position:absolute;z-index:4000;transform:translate(-50%,0);margin-top:-4px;text-align:center;pointer-events:none;white-space:nowrap;font:700 max(10px,.85cqw)/1.3 system-ui,sans-serif;color:#ffe9a6;text-shadow:0 1px 3px #000,0 0 6px #000;}
.th-cotran-cf-label b{display:block;font-size:1.08em;}.th-cotran-cf-label span{display:block;font-weight:600;color:#ffd2a0;}
.th-cotran-cf-menu{position:fixed;z-index:9100;display:flex;flex-direction:column;gap:6px;padding:8px;max-width:260px;border-radius:12px;border:1px solid rgba(231,196,105,.7);background:rgba(10,20,31,.92);box-shadow:0 8px 24px rgba(0,0,0,.55);font:13px/1.35 system-ui,sans-serif;color:#f5ead0;}
.th-cotran-cf-opt{border:1px solid #d4a847;border-radius:999px;background:linear-gradient(#a8541c,#6e3510);color:#fff3cf;padding:8px 14px;font-weight:700;cursor:pointer;}
.th-cotran-cf-opt:hover{filter:brightness(1.15);}.th-cotran-cf-info{padding:2px 6px;color:#e8d9b0;}
.th-cotran-cf-bar{position:fixed;z-index:9100;left:50%;bottom:22%;transform:translateX(-50%);min-width:240px;padding:8px 14px;border-radius:999px;border:1px solid rgba(231,196,105,.7);background:rgba(10,20,31,.9);color:#ffe9a6;font:700 13px system-ui,sans-serif;text-align:center;}
.th-cotran-cf-bar>div{margin-top:6px;height:8px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;}.th-cotran-cf-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff9a3c,#ffd76a);}
.th-cotran-lantern{position:absolute;z-index:5000;width:5.2%;height:auto;pointer-events:none;opacity:0;filter:drop-shadow(0 0 10px rgba(255,170,60,.85));will-change:left,top,transform;}
/* lõi sáng nóng + tàn lửa bay: JS điều khiển độ sáng nhấp nháy không đều */
.th-cotran-cf-core{position:absolute;z-index:3;transform:translate(-50%,-50%);aspect-ratio:2/1;border-radius:50%;pointer-events:none;display:none;background:radial-gradient(ellipse at center,rgba(255,236,170,.85) 0%,rgba(255,190,80,.45) 38%,rgba(255,140,40,0) 70%);mix-blend-mode:screen;}
.th-cotran-cf-embers{position:absolute;z-index:4001;transform:translate(-50%,-100%);aspect-ratio:1/1;pointer-events:none;display:none;overflow:visible;}
.th-cotran-cf-embers i{position:absolute;bottom:0;width:.5vw;height:.5vw;min-width:3px;min-height:3px;border-radius:50%;background:radial-gradient(circle,#fff3b0,#ff9a2a 55%,rgba(255,120,20,0) 72%);opacity:0;transform:scale(var(--sz,1));animation:th-cf-ember 3.4s linear infinite;}
@keyframes th-cf-ember{0%{opacity:0;transform:translate(0,0) scale(var(--sz,1))}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),-1100%) scale(calc(var(--sz,1)*.3))}}
/* Bày Trí: nút 👁 ẩn toàn bộ 4 cụm icon HUD + khung avatar để không che kiến trúc đang chỉnh. */
body.is-th-arrange-hide-hud #hudRailLeft,body.is-th-arrange-hide-hud #hudRailRight,body.is-th-arrange-hide-hud #hudTopRight,body.is-th-arrange-hide-hud #hudDock,body.is-th-arrange-hide-hud #hudTopLeft{visibility:hidden !important;pointer-events:none !important;}
.th-cotran-arrange-hudbtn{display:inline-flex;gap:6px;align-items:center;}
.th-cotran-arrange-hudbtn button.is-on{background:#6a4a1a;}
/* Dân làng NPC (Cổ Trấn): nhãn tên khác người chơi/Simbot (xanh lục nhạt, nghiêng) + bong bóng chat tự động trên đầu. */
.th-cotran-walker-tag.is-npc .th-cotran-walker-name{color:#c8e6d2;font-style:italic;text-shadow:0 1px 2px #000,0 0 3px #123;}
.th-cotran-bubble{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translate(-50%,6px);max-width:150px;width:max-content;padding:5px 9px;border-radius:10px;background:rgba(252,246,226,.96);border:1px solid rgba(120,90,40,.7);color:#3a2a14;font:12px/1.3 "Noto Serif",Georgia,serif;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:normal;z-index:5;}
.th-cotran-bubble.is-on{opacity:1;transform:translate(-50%,0);}
.th-cotran-bubble::after{content:'';position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(252,246,226,.96);border-bottom:0;}
/* Động vật Cổ Trấn (cún, mèo, gà): sprite nằm trong khung cảnh như nhân vật, không bấm được. */
.th-cotran-animal{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;}
.th-cotran-animal-sprite{position:absolute;left:0;top:0;display:block;background-repeat:no-repeat;transform-origin:50% 50%;}
.th-cotran-animal-shadow{position:absolute;display:block;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.38),rgba(0,0,0,0) 70%);}
/* Cá trong hồ/kênh (Cổ Trấn): nằm trên nền, dưới nhân vật/kiến trúc; xoay theo hướng bơi. */
.th-cotran-fish{position:absolute;left:0;top:0;pointer-events:none;z-index:3;will-change:transform;opacity:.92;transform-origin:50% 50%;}
.th-cotran-fish-sprite{position:absolute;left:0;top:0;display:block;background-repeat:no-repeat;}


/* Hiệu ứng sprite gắn vào kiến trúc (Độ Kiếp Đài: sét) — nằm trên ảnh kiến trúc, không bắt chuột */
.th-cotran-bld-fx{position:absolute;z-index:3;pointer-events:none;opacity:0;background-repeat:no-repeat;will-change:background-position,opacity;}

/* Tối ưu tải trang (Owner 2026-10-14): Sảnh Chính cũ (5 lớp nền, sân đá, mái, lan can…) KHÔNG còn dùng khi Cổ Trấn bật → không tải ảnh của nó.
   data-legacy="pending": chưa biết Cổ Trấn bật hay tắt → ẩn hết lớp cũ, không có src. "off": Cổ Trấn đang dùng. "on": Cổ Trấn tắt → nạp ảnh cũ (tien-hiep-cotran.js setLegacy). */
.hero-tienhiep[data-legacy="pending"] .stage,.hero-tienhiep[data-legacy="pending"] .l4-roof,.hero-tienhiep[data-legacy="pending"] .l4-railing,
.hero-tienhiep[data-legacy="pending"] .char-home-platform,.hero-tienhiep[data-legacy="pending"] .char-home-portrait,.hero-tienhiep[data-legacy="pending"] .th-char-shadow,
.hero-tienhiep[data-legacy="pending"] .th-char-nameplate,.hero-tienhiep[data-legacy="pending"] .th-khoiA-bg{display:none !important;}
.hero-tienhiep[data-legacy="on"] .l4-railing{background-image:url('../../assets/themes/tien_hiep/backgrounds/bg_main_layer4_railing_tile.webp');}

/* Dung Luyện Trang Bị: ô số Hỗn Nguyên Thạch dạng ＋/－ như Cường Hóa (Owner 2026-10-14) */
.th-quality-materials .th-forge-material-stepper{width:62%;min-width:0}
.th-quality-materials .th-forge-material-stepper input{flex:1 1 auto;width:auto;min-width:0;padding:0;border:0;border-radius:0;background:transparent;color:#fff7d4;text-align:center;font-size:clamp(9px,.9vw,12px);font-weight:700;transform:none !important;-moz-appearance:textfield;appearance:textfield}
.th-quality-materials .th-forge-material-stepper input::-webkit-inner-spin-button,.th-quality-materials .th-forge-material-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* ===== Bách Khoa minh họa bằng ảnh (Owner 2026-10-14) — tien-hiep-bachkhoa-ext.js ===== */
.th-bk-panel{width:min(980px,96vw)}
.th-bk-hero{position:relative;min-height:150px;border-radius:12px;padding:16px 18px;display:flex;align-items:flex-end;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.82)),var(--bk-hero) center/cover no-repeat;border:1px solid rgba(201,164,76,.45);box-shadow:inset 0 0 30px rgba(0,0,0,.5)}
.th-bk-hero h3{margin:0 0 4px;font-size:20px;color:#ffe9a8;text-shadow:0 2px 6px #000}
.th-bk-hero p{margin:0;font-size:13px;line-height:1.5;max-width:760px;text-shadow:0 1px 4px #000}
.th-bk-strip{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:8px;border-radius:10px;background:rgba(0,0,0,.28)}
.th-bk-strip figure{margin:0;width:64px;text-align:center;font-size:10px}
.th-bk-strip img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.7))}
.th-bk-strip.is-money figure{width:120px;font-size:12px}.th-bk-strip.is-money img{width:90px;height:90px}
.th-bk-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.th-bk-stepc{position:relative;padding:10px 10px 10px 12px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.3));border:1px solid rgba(201,164,76,.3);display:flex;flex-direction:column;gap:3px;font-size:12px;line-height:1.4}
.th-bk-stepc img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.7))}
.th-bk-stepc b{color:#f0d98a;font-size:13px}
.th-bk-stepn{position:absolute;top:6px;right:8px;font-weight:800;color:rgba(240,217,138,.55);font-size:18px}
.th-bk-acard{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.28));border:1px solid rgba(201,164,76,.25)}
.th-bk-acard img{flex:0 0 84px;width:84px;height:84px;object-fit:contain;border-radius:8px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.7))}
.th-bk-acard p{margin:3px 0 0;font-size:13px;line-height:1.45}
.th-bk-agrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:8px}
.th-bk-agrid .th-bk-acard img[src*="/backgrounds/"]{object-fit:cover;flex:0 0 120px;width:120px;height:84px}
.th-bk-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.th-bk-gcard{display:flex;flex-direction:column;gap:3px;padding:8px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.4));border:2px solid var(--bk-q,rgba(201,164,76,.5));cursor:help;font-size:12px}
.th-bk-gimg{aspect-ratio:1;display:grid;place-items:center;border-radius:8px;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.12),rgba(0,0,0,.45))}
.th-bk-gal.is-tall .th-bk-gimg{aspect-ratio:3/4}
.th-bk-gimg img{max-width:96%;max-height:96%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.8))}
.th-bk-gcard b{font-size:13px;color:#f4e6bf}
.th-bk-gcard small{opacity:.75}
.th-bk-region{display:grid;gap:6px;margin-top:6px}
.th-bk-rhead{display:flex;flex-direction:column;justify-content:flex-end;min-height:84px;padding:8px 12px;border-radius:10px;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.8)),var(--bk-bg) center/cover;border:1px solid rgba(201,164,76,.4)}
.th-bk-rhead b{font-size:16px;color:#ffe9a8;text-shadow:0 2px 5px #000}
.th-bk-realmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.th-bk-rcard{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;border-radius:10px;background:rgba(0,0,0,.3);border:1px solid rgba(79,191,159,.35);font-size:12px;text-align:center}
.th-bk-rcard img{width:80px;height:80px;object-fit:contain}
@media (max-width:560px){.th-bk-agrid{grid-template-columns:1fr}.th-bk-hero{min-height:120px}}