/* PHÒNG TẬP (pt-…) — phần ghép được vào Training Zone (QĐ-20 hướng A, bản hoàn thiện 24/09/2026).
   Dùng chung biến màu, .nut, .chip, .giai, .sr, .ic, .kicker, .lede… của tz.css / phong-a.css (không định nghĩa lại).
   Tệp này nạp SAU tz.css (hoặc phong-a.css). Cách ghép: viec-dang-lam/ari-rewards/qd18/phong/GHEP-VAO-TRANG.md.
   Chuyển động: CHỈ transform và opacity; lõi chỉ bay khi phòng đang trên màn hình (.dang-thay do pt-phong.js bật). */

/* bộ biểu tượng Phosphor dùng qua <use> (một <svg class="bo-icon"> ở đầu <body>): không chiếm chỗ */
.bo-icon { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------------ bổ sung thanh điều hướng: nút loa của trang
   Trang tự đặt <button id="sndFab"> trong .topnav: am-thanh.js dùng lại nút có sẵn (không tự dựng nút nổi), nên nút
   luôn thấy trên thanh điều hướng dính, không mờ đi, không che nội dung (phê bình #10). */
.topnav .sndfab { margin-left: auto; }
.topnav .sndfab + .btn { margin-left: 10px; }
@media (min-width: 1024px) { .topnav .links + .sndfab { margin-left: 0; } }
@media (max-width: 359.98px) { .brand b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* nút Trang chủ khi nấp: ẩn hẳn (JS thêm inert) — không còn điểm dừng Tab vô hình (phê bình #10) */
.homefab.nep { visibility: hidden; transition: opacity .25s, transform .25s, visibility 0s .25s; }
.sndfab { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgb(245 139 175 / .32); background: rgb(255 255 255 / .04); color: var(--hong); padding: 0;
  transition: color .4s, border-color .4s, background-color .4s; }
.sndfab:hover { background: rgb(245 139 175 / .12); border-color: var(--hong); }
.sndfab svg { width: 20px; height: 20px; fill: currentColor; }
.sndfab .wave { opacity: 1; transition: opacity .3s; }
.sndfab .slash { opacity: 0; transition: opacity .3s; }
.sndfab.off { color: var(--chu-3); border-color: rgb(245 237 232 / .18); }
.sndfab.off .wave { opacity: 0; }
.sndfab.off .slash { opacity: 1; }
.sndfab.waiting::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--hong); opacity: .6; }
.sndfab .tip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* màu lõi năng lượng từng khu (= Training Zone, KIEN-TRUC-NHAN-VAT §6.3; khu Giấc ngủ dùng màu bạc hà của Thói quen cũ) */
:root { --loi-nhip: #B9A3F0; --loi-cothe: #FF9F80; --loi-hoitho: #8EC5F5; --loi-yoga: #F58BAF;
  --loi-anuong: #FFB48A; --loi-giacngu: #7FD6BF; --loi-tientrinh: #F4CE6A; --loi-baitap: #A99BF5; }

/* ------------------------------------------------------------------ bố cục: phòng là màn đầu
   Điện thoại: đầu trang + nút Tìm → phòng (tràn hết bề ngang) → thẻ nhân vật → còn lại hôm nay.
   Màn rộng (≥ 960): cột trái hẹp (đầu trang, nút Tìm, nhân vật, còn lại hôm nay) + phòng to bên phải, dính khi cuộn. */
.pt-san { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px var(--le, 16px) 0; max-width: 1320px; margin: 0 auto;
  grid-template-areas: "dau" "phong" "nv" "homnay"; }
.pt-dau { grid-area: dau; }
.pt-khung { grid-area: phong; }
.pt-nv-the { grid-area: nv; }
.pt-hom-nay { grid-area: homnay; }
.pt-dau h1 { margin: 0; font: 800 clamp(2.05rem, 7.6vw, 3.1rem)/1.02 var(--f-hien); letter-spacing: -.012em; }
@media (min-width: 960px) {
  .pt-san {
    grid-template-columns: clamp(290px, 30vw, 380px) minmax(0, 1fr);
    grid-template-areas: "dau phong" "nv phong" "homnay phong";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(24px, 3vw, 44px); row-gap: 18px; padding-top: 22px; align-items: start;
  }
  .pt-dau h1 { font-size: clamp(2.4rem, 3.4vw, 3.2rem); }
}

/* nút Tìm ngay trên phòng (phê bình #5): trông như ô tìm, bấm là mở bảng tìm có ô nhập thật */
.pt-tim-nut { display: none; }
.co-js .pt-tim-nut {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 14px; padding: 10px 16px;
  border-radius: 999px; border: 1px solid var(--vien-2); background: rgb(255 255 255 / .05); color: #B9A4BE; text-align: left;
  font-size: 1rem;
}
.pt-tim-nut .ic { width: 20px; height: 20px; color: var(--hong-chu); }
.pt-tim-nut span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pt-tim-nut:hover { border-color: var(--hong); background: rgb(245 139 175 / .08); }
@media (max-width: 959.98px) { .pt-dau .lede { font-size: .96rem; } }

/* ------------------------------------------------------------------ CĂN PHÒNG */
.pt-khung { position: relative; margin: 0 calc(var(--le, 16px) * -1); }
@media (max-width: 767.98px) { .pt-khung { overflow-x: clip; } }   /* nhãn sát mép không bao giờ đẩy trang tràn ngang */
.pt-phong {
  position: relative; container-type: inline-size; isolation: isolate;
  width: 100%; margin: 0 auto;
  aspect-ratio: 1 / var(--ti-le);         /* toạ độ mọi khu là phần trăm của ảnh phòng: khung giữ đúng tỉ lệ ảnh */
  --nv-to: 1.15;                         /* nhân vật to hơn tỉ lệ thật một chút cho rõ (chibi) */
}
.pt-anh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; user-select: none;
  filter: drop-shadow(0 30px 40px rgb(6 2 14 / .45)) drop-shadow(0 0 26px rgb(245 139 175 / .16)); }
/* quầng nắng ấm sau căn phòng (phê bình #7: phòng nắng không nằm giữa khoảng tối) */
.pt-phong::before {
  content: ""; position: absolute; inset: 4% 0 0; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 214 176 / .30), rgb(255 170 170 / .14) 52%, rgb(245 139 175 / .05) 74%, transparent);
  filter: blur(10px);
}
@media (min-width: 768px) { .pt-khung { margin: 0; } .pt-phong { width: min(100%, calc((100dvh - 110px) / var(--ti-le))); min-width: 600px; max-width: 920px; } }
@media (min-width: 960px) {
  .pt-khung { position: sticky; top: 72px; }
  .pt-phong { width: min(100%, calc((100dvh - 96px) / var(--ti-le))); min-width: 560px; max-width: none; margin-right: 0; }
}
@container (max-width: 599px) { .pt-phong { --nv-to: 1.7; } }   /* điện thoại: nhân vật gấp 1,7 lần tỉ lệ thật (phê bình #2) */

.pt-goi-y { position: absolute; left: 3%; bottom: 2%; z-index: 2; display: flex; align-items: center; gap: 6px; margin: 0;
  max-width: 30%; font: 600 .8rem/1.3 var(--f-hien); color: var(--chu-3); }
.pt-goi-y .ic { width: 18px; height: 18px; color: var(--hong-chu); }
@container (max-width: 599px) { .pt-goi-y { display: none; } }

/* ---- tám khu: mỗi <li> phủ kín phòng (không nhận chạm), chỉ nút lõi + nhãn nhận chạm */
.pt-cac-goc { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; }
.pt-goc { position: absolute; inset: 0; pointer-events: none; --co: clamp(42px, 10.4cqw, 96px); }
.pt-vong { /* vòng sáng trên chính tấm thảm của khu: hiện khi rê, khi chọn, khi tìm/lọc */
  position: absolute; left: var(--tx); top: var(--ty); width: var(--tw); height: var(--th); transform: translate(-50%, -50%) scale(.92);
  border-radius: 50%; opacity: 0;
  border: 2px solid color-mix(in srgb, var(--mau) 85%, white);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mau) 34%, transparent), color-mix(in srgb, var(--mau) 8%, transparent) 72%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--mau) 60%, transparent), inset 0 0 14px color-mix(in srgb, var(--mau) 45%, transparent);
  transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1);
}
.pt-day { /* sợi sáng mảnh nối lõi với món đồ (thẳng đứng, không phải đường đi) */
  position: absolute; left: var(--x); top: var(--y); width: 2px; height: calc(var(--cy) - var(--y)); transform: translateX(-50%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--mau) 75%, transparent), transparent);
  opacity: .38; transition: opacity .4s;
}
.pt-nut {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: max(var(--co), 44px); height: max(calc(var(--co) * 1.1), 44px);
  display: grid; place-items: center; pointer-events: auto; text-decoration: none; color: var(--chu);
  border-radius: 999px; -webkit-tap-highlight-color: transparent; transition: opacity .35s;
}
.pt-nut:focus-visible { outline-offset: 2px; }
.pt-loi { position: relative; width: var(--co); aspect-ratio: 192 / 240; }
.pt-loi img { position: absolute; left: 0; top: 0; width: 100%; height: auto;
  filter: drop-shadow(0 6px 10px rgb(10 4 20 / .4)); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
/* vệt sáng elip màu khu dưới lõi, luôn hiện: lõi "đứng" trong phòng chứ không phải nhãn dán (phê bình #8) */
.pt-loi-bong { position: absolute; left: 50%; bottom: -8%; width: 92%; height: 22%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mau) 70%, white 10%), color-mix(in srgb, var(--mau) 22%, transparent) 60%, transparent);
  opacity: .85; }
.pt-loi picture { display: contents; }
.pt-loi .pt-loi-phu { width: 44%; top: -6%; opacity: .95; }
.pt-loi .pt-loi-phu.p0 { left: -26%; }
.pt-loi .pt-loi-phu.p1 { left: 82%; }
@container (max-width: 599px) { .pt-loi .pt-loi-phu { display: none; } }
.pt-nut:hover .pt-loi-chinh, .pt-nut:focus-visible .pt-loi-chinh { transform: translateY(-4px) scale(1.08); }
.pt-goc:hover .pt-vong, .pt-goc:focus-within .pt-vong { opacity: .9; transform: translate(-50%, -50%); }
.pt-goc:hover .pt-day, .pt-goc:focus-within .pt-day { opacity: .8; }

/* nhãn khu: dính liền đáy lõi (một khối với lõi), cao 28 px, bấm được như lõi (nằm trong cùng liên kết) */
.pt-ten {
  position: absolute; left: 50%; top: calc(50% + var(--co) * .5 - 6px); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 28px;
  padding: 3px 11px 4px; border-radius: 999px;
  background: rgb(24 15 36 / .86); border: 1px solid color-mix(in srgb, var(--mau) 55%, transparent);
  box-shadow: 0 6px 16px -8px rgb(0 0 0 / .8), inset 0 2px 0 color-mix(in srgb, var(--mau) 35%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 600 .8rem/1.2 var(--f-hien);
  transition: border-color .3s, background-color .3s;
}
.pt-ten b { font-weight: 800; }
.pt-ten small { font-weight: 600; font-size: .75rem; color: var(--chu-3); display: none; }
/* "còn 3 việc hôm nay": ghi chữ "còn" để không ai đọc thành số thứ tự 1-2-3 (phê bình #4) */
.pt-con { position: absolute; z-index: 1; left: calc(50% + var(--co) * .18); top: calc(50% - var(--co) * .7);
  display: inline-flex; align-items: center; white-space: nowrap; font: 800 .75rem/1.5 var(--f-hien); font-style: normal;
  color: #2A1B38; background: linear-gradient(180deg, #FFB6CD, var(--hong)); border-radius: 999px; padding: 0 7px;
  box-shadow: 0 3px 8px -2px rgb(10 4 20 / .6), 0 0 0 2px rgb(24 15 36 / .9); }
.pt-con-dai { display: none; }
.pt-goc.sat-phai .pt-con { left: auto; right: calc(50% + var(--co) * .18); }      /* sát mép phải: dấu sang vai trái */
@container (min-width: 600px) {
  .pt-ten { font-size: .86rem; padding: 4px 12px 5px; min-height: 30px; }
  .pt-con-dai { display: inline; }
  /* Hơi thở: dưới lõi là mèo trùm → nhãn đứng trên lõi (trên là cửa sổ, trống), dấu "còn" sang giữa bên phải */
  .pt-goc.mt-tr .pt-ten { top: auto; bottom: calc(50% + var(--co) * .6 - 6px); }
  .pt-goc.mt-tr .pt-con { left: calc(50% + var(--co) * .38); top: calc(50% - 10px); }
}
@container (min-width: 700px) { .pt-ten small { display: inline; } }
/* phòng hẹp (điện thoại): vị trí nhãn từng khu chọn sẵn cho khỏi chồng nhau (đo ở 320–430 px bằng kiem/xep.mjs) */
@container (max-width: 599px) {
  .pt-goc.ben-tr .pt-ten { top: auto; bottom: calc(50% + var(--co) * .56 - 4px); }
  .pt-goc.ben-tr .pt-con { left: calc(50% + var(--co) * .36); top: calc(50% - 9px); }
  .pt-goc.sat-phai .pt-ten { left: auto; right: calc(50% - var(--co) * .5 - 10px); transform: none; }
  .pt-goc.sat-phai .pt-con { right: calc(50% + var(--co) * .34); top: calc(50% - 9px); }
  .pt-goc.sat-trai .pt-ten { left: calc(50% - var(--co) * .5 - 12px); transform: none; }
}
@container (max-width: 399px) { .pt-goc.ben-tr .pt-con { left: calc(50% + var(--co) * .3); } }
@container (max-width: 359px) {
  .pt-goc { --co: 40px; }
  .pt-ten { font-size: .75rem; padding: 2px 8px 3px; }
  /* màn rất hẹp: dấu "còn N" thu thành một chấm hồng (không chữ số) — số việc vẫn nằm trong nhãn đọc màn hình */
  .pt-con { width: 14px; height: 14px; padding: 0; font-size: 0; left: calc(50% + var(--co) * .24); top: calc(50% - var(--co) * .5); }
  .pt-goc.ben-tr .pt-con { left: calc(50% + var(--co) * .3); top: calc(50% - 7px); }
}
.pt-nut:hover .pt-ten, .pt-nut:focus-visible .pt-ten { border-color: var(--mau); }

/* chọn / tìm: khu đang mở sáng lên, khu không khớp mờ đi (vẫn bấm được) */
.pt-phong[data-chon] .pt-goc[data-chon] .pt-vong, .pt-goc.khop .pt-vong { opacity: 1; transform: translate(-50%, -50%); }
.pt-phong[data-chon] .pt-goc:not([data-chon]) .pt-nut { opacity: .6; }
.pt-phong[data-chon] .pt-goc[data-chon] .pt-day, .pt-goc.khop .pt-day { opacity: .85; }
.pt-phong[data-chon] .pt-goc[data-chon] .pt-ten, .pt-goc.khop .pt-ten { border-color: var(--mau); background: color-mix(in srgb, var(--mau) 32%, rgb(24 15 36 / .92)); }
.pt-goc.mo .pt-nut { opacity: .36; }
.pt-goc.mo .pt-nut:hover, .pt-goc.mo .pt-nut:focus-visible { opacity: 1; }

/* ---- nhân vật giữa phòng (Đ23: chỗ mô-đun nhân vật dùng chung sẽ vẽ vào #bucGiua) */
.pt-nv { position: absolute; left: var(--x); top: var(--y); width: calc(var(--w) * var(--nv-to)); z-index: 5; transform: translate(-50%, -100%);
  pointer-events: none; }
.pt-nv-anh { width: 100%; height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 0 6px rgb(255 214 190 / .3)); }
.pt-nv-bong { position: absolute; left: 50%; bottom: -1.1cqw; width: 230%; height: 2.4cqw; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgb(58 30 20 / .5), transparent); }
/* bảng tên ở ngang ngực, bên phải nhân vật (dưới chân là khu Giấc ngủ, trên đầu là lõi góc sau) — hiện cả trên điện thoại */
.pt-bang-ten { position: absolute; left: calc(100% + 4px); top: 22%; z-index: 5; pointer-events: auto; }
/* lời mời của khách: cạnh nhân vật cơ bản trên màn rộng; điện thoại đặt ở tam giác trống góc dưới trái của ảnh */
.pt-moi { position: absolute; z-index: 5; left: calc(var(--x) + 3.4cqw); top: calc(var(--y) - 14cqw); }
@container (max-width: 599px) { .pt-moi { left: 2%; top: auto; bottom: 2%; } .pt-moi .pt-moi-hoi { display: none; } }
.pt-bang-ten {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 4px 12px 4px 5px; border-radius: 999px;
  background: rgb(24 15 36 / .86); border: 1px solid var(--vien-2); color: var(--chu);
  box-shadow: 0 8px 18px -10px rgb(0 0 0 / .8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 800 .82rem/1.15 var(--f-hien); text-align: left; white-space: nowrap;
}
.pt-bang-ten small { display: block; font: 600 .75rem var(--f-hien); color: var(--chu-3); }
.pt-so-cap { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: linear-gradient(180deg, #FFB6CD, var(--hong)); color: #2A1B38; font: 800 .9rem var(--f-hien); }
/* điện thoại: bảng tên thu lại thành huy hiệu cấp tròn ngay vai nhân vật (tên đầy đủ ở thẻ nhân vật ngay dưới phòng,
   chạm huy hiệu là mở giải thích) — khỏi đè lên khu Bài tập ở mép phải */
@container (max-width: 599px) {
  .pt-bang-ten { left: calc(100% - 8px); top: 0; justify-content: center; min-width: 44px; padding: 7px; gap: 0;
    background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pt-bang-ten-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pt-bang-ten .pt-so-cap { width: 28px; height: 28px; font-size: .82rem; box-shadow: 0 0 0 2px rgb(24 15 36 / .9), 0 4px 12px -2px rgb(245 139 175 / .7); }
}
.pt-moi { display: inline-flex; align-items: center; gap: 0; padding: 0; border-radius: 999px; background: rgb(24 15 36 / .86);
  border: 1px solid var(--vien-2); box-shadow: 0 10px 22px -10px rgb(245 139 175 / .6); white-space: nowrap; }
.pt-moi-nut { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 15px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(180deg, #FFB6CD, var(--hong)); color: #2A1B38; font: 800 .8rem var(--f-hien); }
.pt-moi-hoi { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--chu-2); padding: 0; }
.pt-moi-hoi .ic { width: 18px; height: 18px; }
/* mèo trùm: ảnh đặt đúng khung chiếu; nút có đệm quanh ảnh để ô chạm đủ 44 px; điện thoại phóng to 1,6 lần */
.pt-meo { position: absolute; left: var(--x); top: var(--y); width: calc(var(--w) + 16px); z-index: 1; margin: -8px 0 0 -8px;
  padding: 8px; border: 0; background: none; border-radius: 40%; min-width: 44px; min-height: 44px; transform-origin: 50% 90%; }
.pt-meo img { width: 100%; height: auto; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.pt-meo:hover img { transform: scale(1.08) rotate(-3deg); }
@container (max-width: 599px) { .pt-meo { transform: scale(1.5); } }
@container (max-width: 359px) { .pt-meo { transform: scale(1.15); } .pt-phong { --nv-to: 1.5; } .pt-bang-ten { top: -14%; } }

/* ------------------------------------------------------------------ nhãn nhỏ trên trạm và việc */
.pt-nhan { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px;
  font: 600 .76rem/1.5 var(--f-hien); white-space: nowrap; }
.pt-nhan .ic { width: 12px; height: 12px; }
.pt-nhan.vu { color: var(--hong-chu); background: rgb(245 139 175 / .12); }
.pt-nhan.trum { color: #D7C9FF; background: rgb(185 163 240 / .16); }
.pt-nhan.xong { color: #173A33; background: var(--bac-ha); }
.pt-nhan.sap { color: var(--chu-3); border: 1px dashed var(--vien-2); }
.pt-viec .pt-nhan.trum { justify-self: start; margin-top: 2px; }

/* ------------------------------------------------------------------ mọi trạm theo khu (lọc theo khu) */
.pt-tat-ca { max-width: 1320px; margin: 56px auto 0; padding: 0 var(--le, 16px); }
.pt-tat-ca-dau h2 { margin: 0; font: 800 clamp(1.5rem, 3.4vw, 2.2rem)/1.12 var(--f-hien); }
.pt-tat-ca-dau p { margin: 6px 0 14px; color: var(--chu-2); max-width: 60ch; }
.pt-chips { position: sticky; top: 64px; z-index: 6; padding-block: 8px; background: rgb(22 14 34 / .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@media (min-width: 900px) { .pt-chips { flex-wrap: wrap; margin: 0; padding: 8px 0; -webkit-mask-image: none; mask-image: none; } }
.pt-tat-ca .dem-tim { margin-top: 8px; }
.pt-nhom-luoi { columns: 1; column-gap: 18px; margin-top: 16px; }
@media (min-width: 760px) { .pt-nhom-luoi { columns: 2; } }
@media (min-width: 1200px) { .pt-nhom-luoi { columns: 3; } }
.pt-nhom { display: block; break-inside: avoid; margin: 0 0 18px; padding: 16px; border-radius: var(--r-lon); background: var(--mat);
  border: 1px solid var(--vien); box-shadow: inset 0 3px 0 color-mix(in srgb, var(--mau) 70%, transparent); }
.pt-nhom[hidden] { display: none; }
.pt-nhom-dau { display: grid; grid-template-columns: 52px 1fr 24px; gap: 12px; align-items: center; cursor: pointer; list-style: none;
  min-height: 56px; border-radius: 14px; }
.pt-nhom-dau::-webkit-details-marker { display: none; }
.pt-nhom-dau > .ic { width: 20px; height: 20px; color: var(--chu-3); transition: transform .3s; }
.pt-nhom[open] > .pt-nhom-dau > .ic { transform: rotate(180deg); }
.pt-nhom[open] > .pt-nhom-dau { margin-bottom: 10px; }
.pt-nhom-huy img { width: 52px; height: auto; }
.pt-nhom-tieu { display: grid; gap: 1px; min-width: 0; }
.pt-nhom-vat { display: inline-flex; align-items: center; gap: 5px; font: 600 .78rem var(--f-hien); color: color-mix(in srgb, var(--mau) 80%, white); }
.pt-nhom-vat .ic { width: 15px; height: 15px; }
.pt-nhom-dau h3 { margin: 0; font: 800 1.2rem/1.2 var(--f-hien); }
.pt-nhom-mo { font-size: .86rem; line-height: 1.45; color: var(--chu-2); }
.pt-nhom-mo .dem { color: var(--chu-3); white-space: nowrap; }

/* ---- một trạm (dùng ở danh sách, bảng khu và bảng tìm) */
.pt-tram-ds { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pt-tram-ds > li[hidden] { display: none; }
.pt-tram { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; min-height: 64px; padding: 8px 12px 8px 8px;
  border-radius: 16px; text-decoration: none; border: 1px solid transparent; background: rgb(255 255 255 / .03);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .3s, background-color .3s; }
a.pt-tram:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--mau, var(--hong)) 55%, transparent); background: rgb(255 255 255 / .06); }
.pt-tram-loi { width: 52px; height: auto; }
.pt-tram-chu { display: grid; gap: 2px; min-width: 0; }
/* biểu tượng Phosphor ngay cạnh tên: phân biệt các trạm cùng một họ lõi (phê bình #12) */
.pt-tram-ten { display: flex; align-items: center; gap: 7px; font: 800 .98rem/1.25 var(--f-hien); }
.pt-tram-ten .pt-tram-ic { width: 26px; height: 26px; padding: 4px; border-radius: 8px; color: #2A1B38;
  background: color-mix(in srgb, var(--mau, var(--hong)) 88%, white); }
.pt-tram-mo { font-size: .84rem; line-height: 1.4; color: var(--chu-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-tram-nhan { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.pt-tram.sap-mo { border: 1px dashed var(--vien-2); background: none; }
.pt-tram.sap-mo .pt-tram-loi { opacity: .7; }
.pt-tram-khu { display: inline-flex; align-items: center; gap: 4px; font: 600 .75rem var(--f-hien); color: color-mix(in srgb, var(--mau) 80%, white); }
.pt-tram-khu .ic { width: 13px; height: 13px; }
.pt-trong { padding: 22px; border-radius: var(--r); text-align: center; border: 1px dashed var(--vien-2); }
.pt-trong b { display: block; font: 800 1.1rem var(--f-hien); margin-bottom: 6px; }
.pt-trong p { margin: 0; color: var(--chu-2); }

/* ------------------------------------------------------------------ BẢNG TRẠM của một khu + BẢNG TÌM
   Màn rộng: ngăn kéo đè lên cột trái, phòng bên phải vẫn thấy và vẫn bấm được (hộp không chặn trang).
   Điện thoại/máy tính bảng: tấm trượt từ đáy lên. Bảng khu chặn trang (nền mờ); bảng tìm KHÔNG chặn và chỉ cao
   60% để phòng ở trên vẫn thấy các khu sáng lên theo chữ đang gõ. */
.pt-bang {
  margin: 0; padding: 0; border: 1px solid var(--vien-2); color: var(--chu); background: var(--mat-dac);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .85), inset 0 3px 0 var(--mau);
  --mau: var(--hong);
}
.pt-bang::backdrop { background: rgb(6 2 14 / .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.pt-bang[open] { display: flex; flex-direction: column; }
.pt-bang-dau { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: 56px 1fr 44px; gap: 12px; align-items: center;
  padding: 16px 12px 12px 16px; background: linear-gradient(180deg, var(--mat-dac) 80%, transparent); }
.pt-bang-tim .pt-bang-dau { grid-template-columns: 1fr 44px; padding-bottom: 8px; }
.pt-bang-huy { width: 56px; min-height: 70px; }
.pt-bang-huy img { width: 56px; height: auto; }
.pt-bang-vat { display: flex; align-items: center; gap: 5px; margin: 0; font: 600 .78rem var(--f-hien); color: color-mix(in srgb, var(--mau) 80%, white); }
.pt-bang-vat .ic { width: 15px; height: 15px; }
.pt-bang-dau h2 { margin: 0; font: 800 1.3rem/1.15 var(--f-hien); }
.pt-bang-mo { margin: 2px 0 0; font-size: .86rem; line-height: 1.45; color: var(--chu-2); }
.pt-bang-dong { align-self: start; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .06);
  display: grid; place-items: center; color: var(--chu); padding: 0; }
.pt-bang-tim .pt-bang-dong { align-self: center; }
.pt-bang-dong:hover { background: rgb(245 139 175 / .16); }
.pt-dem { padding: 0 16px 6px; }
.pt-bang-than { padding: 4px 12px 8px; overflow: auto; overscroll-behavior: contain; }
.pt-bang-than .pt-tram-ds { gap: 8px; }
.pt-bang-chan { margin: 0; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); font-size: .8rem; color: var(--chu-3);
  border-top: 1px solid var(--vien); }
@media (max-width: 959.98px) {
  .pt-bang { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 640px; margin: 0 auto; max-height: 82dvh; z-index: 25;
    border-radius: 24px 24px 0 0; border-bottom: 0; }
  .pt-bang-tim { max-height: 60dvh; }
  .pt-bang-quai { display: block; flex: none; width: 44px; height: 5px; margin: 8px auto -4px; border-radius: 999px; background: rgb(255 255 255 / .22); }
  .pt-bang-chan .chi-rong { display: none; }
}
@media (min-width: 960px) {
  .pt-bang { position: fixed; z-index: 25; top: var(--bang-tren, 76px); bottom: auto; left: max(var(--le, 16px), calc((100vw - 1320px) / 2 + var(--le, 16px)));
    width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - var(--bang-tren, 76px) - 16px); height: auto; border-radius: var(--r-lon); }
  .pt-bang-quai, .pt-bang-chan .chi-hep { display: none; }
}

/* ------------------------------------------------------------------ vai: người chơi / khách (QĐ-23) */
[data-vai="nguoi-choi"] .chi-khach-khoi, [data-vai="khach"] .chi-nguoi-choi-khoi { display: none !important; }
[data-vai="khach"] .pt-con, [data-vai="khach"] .pt-meo, [data-vai="khach"] .pt-nhan.xong, [data-vai="khach"] .pt-nhan.trum { display: none; }
[data-vai="khach"] .pt-nhan.vu { display: none; }

/* ------------------------------------------------------------------ chuyển động (chỉ transform/opacity) */
@media (prefers-reduced-motion: no-preference) {
  .dang-thay .pt-loi-chinh { animation: bay 5.2s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
  .dang-thay .pt-loi-phu.p0 { animation: bay 6.1s cubic-bezier(.45, 0, .55, 1) -1.4s infinite alternate; }
  .dang-thay .pt-loi-phu.p1 { animation: bay 5.7s cubic-bezier(.45, 0, .55, 1) -3.1s infinite alternate; }
  .dang-thay .pt-goc:nth-child(2n) .pt-loi-chinh { animation-delay: -2.2s; }
  .dang-thay .pt-goc:nth-child(3n) .pt-loi-chinh { animation-delay: -3.7s; }
  .dang-thay .pt-loi-bong { animation: bong 5.2s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
  .dang-thay .pt-goc:nth-child(2n) .pt-loi-bong { animation-delay: -2.2s; }
  .dang-thay .pt-goc:nth-child(3n) .pt-loi-bong { animation-delay: -3.7s; }
  .dang-thay .pt-nv-anh { animation: tho 4.6s ease-in-out infinite; }
  .pt-nut:hover .pt-loi-chinh { animation-play-state: paused; }
  .pt-san > * { animation: hien .8s cubic-bezier(.16, 1, .3, 1) both; }
  .pt-san > .pt-khung { animation-delay: .06s; }
  .pt-san > .pt-nv-the { animation-delay: .12s; }
  .pt-san > .pt-hom-nay { animation-delay: .18s; }
  .pt-bang[open] { animation: len .45s cubic-bezier(.16, 1, .3, 1); }
  @media (min-width: 960px) { .pt-bang[open] { animation-name: sang; } }
}
@keyframes bay { from { transform: translateY(0); } to { transform: translateY(-7%); } }
@keyframes bong { from { transform: translateX(-50%) scale(1); opacity: .85; } to { transform: translateX(-50%) scale(.86); opacity: .6; } }
@keyframes tho { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.012); } }
@keyframes hien { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes len { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sang { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}