/* tau.css: trang Công cụ kiểu con tàu nhiều phòng (bản xem thử /tools/tau/, việc C1). Đứng trên vutru.css + hub-vutru.css:
   giữ nền tối Khu Huấn Luyện (QĐ-73), màu nhấn cam ấm, chữ kem. Viết tay; trang sinh từ tools_tau.py. */
.trang-tau .hub { justify-content: flex-start; padding-top: calc(80px + env(safe-area-inset-top)); padding-bottom: 28px; overflow-x: clip; }

/* biển tên sảnh: tấm biển nhỏ có đèn báo */
.tau-bien { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 8px; padding: 5px 14px 5px 11px; border-radius: 8px;
  border: 1px solid rgb(255 226 196 / .22); background: linear-gradient(180deg, rgb(44 30 66 / .9), rgb(21 13 34 / .9));
  font: 600 12px/1.3 var(--f-hien); letter-spacing: .1em; text-transform: uppercase; color: var(--vien); }
.tau-bien-den { width: 7px; height: 7px; border-radius: 50%; background: #7fe3b0; box-shadow: 0 0 8px #7fe3b0; animation: tauDen 2.8s ease-in-out infinite; }
@keyframes tauDen { 50% { opacity: .35; } }

/* thân tàu: đĩa bay nhìn từ trên xuống, sảnh nằm giữa lòng đĩa */
/* 11/10 (cô báo đĩa tàu đè nút Nghe Ari trên điện thoại): thân tàu co theo ĐÚNG cỡ sảnh (màn thấp thì sảnh nhỏ lại), để đĩa không còn to hơn sảnh mà trồi lên phần đầu trang */
.tau-than { --tw: max(320px, min(100vw, calc((100dvh - 250px) / var(--ti-le) / .92), 892px)); position: relative; z-index: 0; width: var(--tw); margin: 6px auto 0; display: grid; place-items: center; padding: 4vw 0 9vw; }
.trang-tau .tau-bien, .trang-tau .hub-diem, .trang-tau .hub-vi, .trang-tau .hub-giong { position: relative; z-index: 2; }
.tau-dia { position: absolute; left: 50%; top: 6px; width: calc(var(--tw) * 1.12); height: calc(var(--tw) * .874); translate: -50% 0; border-radius: 50%;
  background:
    radial-gradient(closest-side, rgb(255 180 107 / .10), transparent 62%),
    radial-gradient(closest-side, #2b1d42 0 58%, #1c1230 59% 71%, #2f2148 72% 73.5%, #150d22 74.5% 92%, #3a2a56 93% 94.5%, #0f0919 96%);
  box-shadow: 0 40px 80px rgb(4 2 10 / .7), inset 0 0 0 1px rgb(255 226 196 / .14), inset 0 -30px 60px rgb(6 3 14 / .6); }
/* vành đèn tín hiệu quay chậm quanh thân */
.tau-vanh { position: absolute; left: 50%; top: calc(6px + var(--tw) * .047); width: var(--tw); height: calc(var(--tw) * .78); translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgb(255 200 140 / .85) 0 1.1deg, transparent 1.1deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #0000 calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(closest-side, #0000 calc(100% - 5px), #000 calc(100% - 4px));
  animation: tauQuay 90s linear infinite; opacity: .8; }
@keyframes tauQuay { to { rotate: 360deg; } }
/* lửa động cơ dưới đuôi */
.tau-lua { position: absolute; left: 50%; bottom: 0; width: 34%; height: 11vw; max-height: 96px; translate: -50% 20%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 214 170 / .9), rgb(255 150 80 / .5) 40%, transparent 72%); filter: blur(10px); animation: tauLua 2.4s ease-in-out infinite; }
@keyframes tauLua { 50% { opacity: .55; scale: .9 1.1; } }
.trang-tau .phong-khung { width: 92%; min-width: 0; margin-bottom: 0; }

/* cửa phòng: ô cửa tròn có chủ phòng ló mặt, thay cho hành tinh */
.trang-tau .khu.cua { --co: clamp(40px, 11.5cqw, 76px); }
.cua-o { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, #3a2a56, #150d22 78%);
  box-shadow: 0 0 0 2px var(--mau), 0 0 0 5px rgb(10 7 18 / .8), 0 0 16px 4px color-mix(in srgb, var(--mau) 55%, transparent), 0 6px 12px rgb(5 4 9 / .55);
  transition: box-shadow 300ms var(--em); }
.cua-anh { position: absolute; left: 50%; top: 54%; width: 124%; height: 124%; max-width: none; translate: -50% -50%; object-fit: contain; pointer-events: none; user-select: none; }
.khu.cua .khu-nut:hover .cua-o, .khu.cua.chon .cua-o { box-shadow: 0 0 0 3px var(--mau), 0 0 0 6px rgb(10 7 18 / .8), 0 0 26px 8px var(--mau), 0 6px 12px rgb(5 4 9 / .55); }
.khu.cua .khu-vong { inset: -14%; z-index: 1; }
.khu.cua .khu-ten { top: calc(100% + 6px); font-size: clamp(11px, 2.1cqw, 15px); padding: 3px 9px; }
.khu.cua .khu-nut::after { left: -30%; right: -30%; top: -12%; bottom: -62%; }
@media (prefers-reduced-motion: reduce) { .tau-vanh, .tau-lua, .tau-bien-den { animation: none; } }

/* sơ đồ tàu: mỗi phòng một thẻ, bấm là vào phòng (cùng tấm với cửa trong sảnh) */
.so-do { width: min(100% - 32px, 920px); margin: 26px auto 0; }
.so-do h2 { font-size: clamp(22px, 1.2vw + 18px, 30px); }
.so-do-mo { margin: 4px 0 14px; font-size: 14.5px; color: var(--chu-mo); }
.so-do-ds, .ngoai-ds { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 720px) { .so-do-ds { grid-template-columns: 1fr 1fr; } }
.the-phong { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 84px; padding: 10px 12px 10px 10px; text-align: left; cursor: pointer;
  border-radius: 20px; border: 1px solid var(--duong); border-left: 3px solid var(--mau); background: rgb(21 13 34 / .72); color: var(--chu); font: inherit;
  transition: background 240ms var(--em), translate 240ms var(--em); -webkit-tap-highlight-color: transparent; }
.the-phong:hover { background: rgb(255 226 196 / .08); translate: 2px 0; }
.the-phong:active { scale: .985; }
.the-anh { flex: none; position: relative; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, #3a2a56, #150d22 78%); box-shadow: 0 0 0 2px var(--mau); }
.the-anh img { position: absolute; left: 50%; top: 54%; width: 124%; height: 124%; max-width: none; translate: -50% -50%; object-fit: contain; }
.the-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.the-chu b { font: 600 17px/1.25 var(--f-hien); }
.the-ai { font-size: 13px; font-weight: 600; color: var(--mau); }
.the-tram { font-size: 13px; line-height: 1.4; color: var(--chu-mo); }
.the-phong .tram-mui { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--chu-nhat); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.so-do-ngoai-td { margin: 28px 0 12px; font-size: 19px !important; }
.ngoai-ds { grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .ngoai-ds { grid-template-columns: repeat(4, 1fr); } }
.cua-ngoai { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 60px; padding: 8px 14px; border-radius: 16px; text-decoration: none;
  border: 1px dashed rgb(255 226 196 / .28); color: var(--chu); background: rgb(10 7 18 / .4); }
.cua-ngoai:hover { background: rgb(255 226 196 / .08); }
.cua-ngoai b { font: 600 14.5px/1.25 var(--f-doc); }
.cua-ngoai span { font-size: 12.5px; color: var(--chu-nhat); }
.tau-ghi { margin: 22px 0 0; font-size: 13px; color: var(--chu-nhat); text-align: center; }
.tau-ghi a { color: var(--nhan); }

/* trong một phòng: sân khấu có chủ phòng đứng sống, bạn cùng phòng nép bên */
.phong-tau .san { padding: 18px 20px 6px; }
.san-khau { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 6px; min-height: 196px; padding-top: 66px; margin: 0 44px 10px;
  border-radius: 24px; background: radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--mau) 22%, transparent), transparent 70%); }
.san-khau::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 6px; height: 12px; border-radius: 50%; background: rgb(5 4 9 / .5); filter: blur(6px); }
.san-nv { position: relative; z-index: 1; width: 132px; flex: none; text-align: center; }
/* chủ phòng 3D (Mr Thiền, 13/10 thêm Cú Gật Gù, Bác sĩ Đười Ươi): khung vẽ nằm chồng lên hình 2D, hiện dần khi mô hình tải xong; lỗi thì hình 2D ở lại */
.san-nv .san-3d { position: absolute; left: 50%; top: 66px; width: 170%; aspect-ratio: 1; height: auto; translate: -50% -50%; pointer-events: none; opacity: 0; transition: opacity .6s ease; filter: drop-shadow(0 12px 22px rgb(0 0 0 / .45)); }
.san-nv .san-3d-cu { width: 128%; top: 62px; }      /* cú đứng trên cành, vừa khít khung vuông */
.san-nv .san-3d-bs { width: 172%; top: 54px; }
.san-nv.co-3d .san-3d { opacity: 1; }
.san-nv.tinh.co-3d img { opacity: 0; transition: opacity .6s ease; animation: none; }
/* chủ phòng sống 2D bên dưới mô hình 3D: ẩn hình, GIỮ vùng chạm và bong bóng lời */
.san-nv.co-3d .nvc .nv-than { opacity: 0; transition: opacity .6s ease; }
.san-nv.tinh img { display: block; width: 132px; height: 132px; object-fit: contain; filter: drop-shadow(0 12px 22px rgb(0 0 0 / .45)); animation: sanTroi 6s ease-in-out infinite; }
@keyframes sanTroi { 50% { translate: 0 -6px; } }
.san-nv .nv-ten { display: inline-block; margin-top: 2px; }
.san-nv.tinh .nv-ten { padding: 2px 10px; border-radius: 99px; border: 1px solid rgb(255 226 196 / .35); background: rgb(10 7 18 / .72); font: 600 12px/1.5 var(--f-doc); color: var(--vien); }
.san-phu { position: relative; z-index: 1; width: 76px; height: 76px; object-fit: contain; opacity: .96; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .45)); }
.phong-tau .tam-tieu { text-align: center; }
.phong-tau .tam-tieu h2 { font-size: clamp(22px, 1.4vw + 17px, 28px); }
.san-ai { font-weight: 600; color: var(--mau) !important; }
/* hub-vutru.css có .nv-bong riêng (bóng đổ dưới chân nhân vật giữa sảnh): gỡ các thuộc tính đó khỏi bong bóng lời của chủ phòng */
.phong-tau .san-nv .nv-bong { max-width: min(78vw, 300px); height: auto; translate: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .san-nv.tinh img { animation: none; } }

/* ngang bằng trang cũ (đợt 3): tàu Lão Kính bay trong khung sảnh (z 6) nên cửa phòng và vệ tinh nổi lên trên; vệ tinh đậu góc trái trên của sảnh */
.trang-tau .khu-ds { z-index: 7; }
.trang-tau .hub-vt { left: 0; top: -6%; z-index: 8; }
@media (min-width: 701px) { .trang-tau .hub-vt { left: -9%; top: 4%; } }
/* 13/10: hai lối ra ngoài tàu đậu cạnh sảnh (Hang Trùm góc phải trên, Vườn Hành Tinh bên dưới), để máy tính không phải cuộn xuống danh sách mới thấy */
.trang-tau .tau-loi { position: absolute; z-index: 8; width: clamp(56px, 15cqw, 96px); text-decoration: none; text-align: center; -webkit-tap-highlight-color: transparent; transition: scale .25s var(--em); }
.trang-tau .tau-loi::after { content: ""; position: absolute; inset: -6px; }
.trang-tau .tau-loi-vo { display: block; width: 100%; aspect-ratio: 1; animation: troi 6.8s ease-in-out -2s infinite; }
.trang-tau .tau-loi-vo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.trang-tau .loi-hang .tau-loi-vo { filter: drop-shadow(0 0 16px rgb(255 140 60 / .5)); }
.trang-tau .loi-vuon .tau-loi-vo { filter: drop-shadow(0 0 16px rgb(170 255 190 / .42)); animation-delay: -4.4s; }
.trang-tau .tau-loi-chu { position: relative; left: 50%; translate: -50% 0; display: block; width: max-content; margin-top: 2px; padding: 3px 8px; border-radius: 10px; background: rgb(10 7 18 / .62);
  font: 600 11.5px/1.2 var(--f-doc, system-ui); color: var(--nhan, #ffe9d2); text-shadow: 0 1px 6px rgb(5 4 9 / .8); }
.trang-tau .tau-loi:hover { scale: 1.06; }
.trang-tau .tau-loi:active { scale: .94; }
.trang-tau .tau-loi:focus-visible { outline: 2px solid var(--nhan); outline-offset: 6px; border-radius: 14px; }
.trang-tau .loi-hang { right: 4%; top: -6%; }
.trang-tau .loi-vuon { left: 5%; top: 80%; }
@media (min-width: 1000px) { .trang-tau .loi-hang { right: -9%; top: 4%; } .trang-tau .loi-vuon { left: auto; right: -13%; top: 66%; } }
@media (prefers-reduced-motion: reduce) { .trang-tau .tau-loi-vo { animation: none; } .trang-tau .tau-loi { transition: none; } }
.trang-tau .hub-giong { margin-bottom: 4px; }
.trang-tau .ngoai-ds { grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .trang-tau .ngoai-ds { grid-template-columns: repeat(3, 1fr); } }

/* nút Kể chuyện kiểu bong bóng (11/10): bong bóng hiện ngay dưới chủ phòng; lúc đang kể giấu lời mô tả và nút gọi cho phòng gọn lại */
.phong-tau .kc-cho:empty { display: none; }
.phong-tau .kc-cho.kc-dang-ke ~ .tam-tieu p:not(.san-ai), .phong-tau .kc-cho.kc-dang-ke ~ .tam-tieu .kc-goi { display: none; }
.phong-tau .kc-cho .kc.kc-bong { margin: 16px 0 10px; }

/* Kho Mastermind (14/10/2026, QĐ-125): lối vào lớn nhất trên tàu, ngay dưới sảnh; MẶC ĐỊNH ẨN, mastermind/mm.js hiện theo tài khoản (data-kieu mo | moi). Quả cầu năng lượng do cc/cau-nang-luong.js vẽ (mastermind/mm.js gọi);
   không có WebGL thì hiện hình hành tinh khu Yoga tĩnh. */
.mm-loi[hidden] { display: none; }
.mm-loi [class*="mm-chi-"] { display: none; }
.mm-loi[data-kieu="mo"] .mm-chi-mo, .mm-loi[data-kieu="moi"] .mm-chi-moi, .mm-loi[data-kieu="khoa"] .mm-chi-khoa { display: inline; }
.mm-loi[data-kieu="khoa"] .mm-loi-mo.mm-chi-khoa { display: flex; align-items: center; gap: 6px; color: var(--vien); }
.mm-o-khoa { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mm-loi[data-kieu="khoa"] .mm-loi-cau { filter: saturate(.45) brightness(.8); }
.mm-loi[data-kieu="khoa"] .mm-loi-nut { background: transparent; color: var(--chu); border: 1px solid rgb(255 226 196 / .4); }
.mm-loi[data-kieu="moi"] .mm-loi-mo.mm-chi-moi, .mm-loi[data-kieu="mo"] .mm-loi-ghi { display: block; }
.mm-loi-ghi { font-size: 11.5px; color: var(--chu-nhat); margin-top: 4px; }
.mm-loi { max-width: 760px; margin: 18px auto 6px; padding: 0 16px; }
.mm-loi-the { position: relative; display: flex; align-items: center; gap: 6px 18px; padding: 14px 20px 14px 8px; border-radius: 28px; text-decoration: none; color: var(--chu);
  border: 1px solid rgb(255 226 196 / .32); background: radial-gradient(80% 120% at 0% 50%, rgb(126 90 210 / .34), transparent 70%), rgb(21 13 34 / .82);
  box-shadow: 0 18px 50px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .06); }
.mm-loi-the:focus-visible { outline: 2px solid var(--vien); outline-offset: 3px; }
.mm-loi-cau { position: relative; flex: none; width: clamp(128px, 34vw, 200px); aspect-ratio: 1; }
.mm-loi-cau canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-loi-cau b, .mm-loi-cau .nl-hinh { display: none; }
.mm-loi-cau.nl-khong canvas { display: none; }
.mm-loi-cau.nl-khong .nl-hinh, .mm-loi-cau:not(.nl)::before { content: ""; display: block; position: absolute; inset: 14%; background: url("../hanh-tinh/yoga-208.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 22px rgb(190 150 255 / .55)); }
.mm-loi-chu { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mm-loi-nhan { font: 600 11.5px/1.3 var(--f-hien); letter-spacing: .1em; text-transform: uppercase; color: var(--vien); }
.mm-loi-chu b { font: 800 clamp(22px, 2.2vw + 14px, 30px)/1.1 var(--f-hien); }
.mm-loi-mo { font-size: 14px; line-height: 1.5; color: var(--chu-mo); }
.mm-loi-nut { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: 6px; padding: 0 16px 0 18px; border-radius: 99px;
  background: #f58baf; color: #2a0f1a; font: 700 14.5px/1 var(--f-doc); }
.mm-loi-nut svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 480px) { .mm-loi-the { flex-direction: column; text-align: center; padding: 6px 18px 20px; } .mm-loi-chu { align-items: center; } .mm-loi-nut { align-self: center; } }
/* Lối vào phòng riêng (cô Ari dặn 17/10/2026: nhỏ, tinh tế): một viên mảnh nét sáng */
.cua-phong { display: flex; justify-content: center; margin: 22px auto 6px; padding: 0 16px; }
.cua-phong-vien { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 13px; border-radius: 99px; text-decoration: none;
  font: 500 13.5px/1 var(--f-doc, system-ui); letter-spacing: .02em; color: rgb(246 238 252 / .82);
  border: 1px solid rgb(255 226 196 / .18); background: rgb(255 255 255 / .03); transition: color .25s, border-color .25s, background .25s; }
.cua-phong-vien svg { width: 17px; height: 17px; fill: none; stroke: #ffe2c4; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.cua-phong-vien svg circle { fill: #ffe2c4; stroke: none; }
.cua-phong-vien:hover { color: #fff; border-color: rgb(255 226 196 / .45); background: rgb(255 226 196 / .06); }
.cua-phong-vien:focus-visible { outline: 2px solid #ffe2c4; outline-offset: 3px; }
/* Biểu tượng Yoga Mastermind = quả cầu thầy (thay-cau.js, kiểu trợ lý Sam), 17/10/2026 */
.mm-loi-thay::before { display: none !important; }
.mm-loi-thay canvas { display: block !important; }

/* ---------------------------------------------------------------- con tàu vườn (18/10/2026, cô Ari chốt PA 6; viec-dang-lam/sanh-chung-1810/KE-HOACH.md)
   Thân tàu là ảnh nền trong (tau/vuon/tau-*.webp), mỗi trưởng phòng là một lớp cắt đúng chỗ trên ảnh (nv-<id>.webp) chồng khít lên.
   Hoạt cảnh chỉ dùng transform/opacity: lớp nhân vật chỉ PHÓNG từ chân lên (≥ 1) để luôn phủ kín hình gốc bên dưới. */
.tau-than.vuon-o { --tw: min(100vw, 980px); padding: 2vw 0 3vw; width: 100%; max-width: 980px; }
.trang-tau .vuon-khung { width: min(92vw, 900px); min-width: 0; margin: 0 auto; }
.vuon { position: absolute; inset: 0; z-index: 1; }
.vuon-troi { position: absolute; inset: 0; animation: vzTroi 6s ease-in-out infinite; will-change: transform; }
@keyframes vzTroi { 50% { transform: translateY(-1.6%); } }
.vuon-than { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; pointer-events: none;
  filter: drop-shadow(0 26px 36px rgb(6 2 14 / .55)); transition: filter .35s ease, opacity .35s ease; }
.vz-nv { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); max-width: none; pointer-events: none; user-select: none;
  transform-origin: 50% 100%; animation: vzTho 4.2s ease-in-out calc(var(--d) * -.7s) infinite; transition: filter .35s ease, opacity .35s ease; }
@keyframes vzTho { 50% { transform: scale(1.035); } }
.vz-may { animation: vzMay 5s ease-in-out infinite; }
@keyframes vzMay { 50% { transform: scale(1.05); } }
.vz-cu { transform-origin: 50% 90%; animation: vzCu 6s ease-in-out infinite; }
@keyframes vzCu { 0%, 70%, 100% { transform: scale(1.02) rotate(0); } 78% { transform: scale(1.06) rotate(-5deg); } 88% { transform: scale(1.06) rotate(4deg); } }
.vz-dj { animation: vzDj .94s ease-in-out infinite; }
@keyframes vzDj { 50% { transform: scale(1.03); } }
.vz-bay { transform-origin: 50% 50%; animation: vzBay 3.4s ease-in-out infinite; }
@keyframes vzBay { 50% { transform: translateY(-5%) rotate(-2deg); } }
.vz-vong { transform-origin: 50% 0; animation: vzVong 5.4s ease-in-out infinite; }
@keyframes vzVong { 0%, 100% { transform: scale(1.05) rotate(-1.4deg); } 50% { transform: scale(1.05) rotate(1.4deg); } }
/* thác chảy: vệt sáng trôi xuống trong khung thác */
.vz-thac { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); overflow: hidden; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent); }
.vz-thac::before { content: ""; position: absolute; left: 0; right: 0; top: -100%; height: 200%;
  background: repeating-linear-gradient(180deg, transparent 0 14px, rgb(255 255 255 / .55) 18px, transparent 26px 40px);
  animation: vzThac 1.6s linear calc(var(--d) * -.3s) infinite; }
@keyframes vzThac { to { transform: translateY(50%); } }
/* khói nồi bếp */
.vz-khoi { position: absolute; left: var(--l); top: var(--t); width: 2.4%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgb(255 255 255 / .8), transparent); filter: blur(2px);
  animation: vzKhoi 3.6s ease-out calc(var(--d) * -1.2s) infinite; }
@keyframes vzKhoi { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 25% { opacity: .75; } 100% { transform: translate(-30%, -260%) scale(1.8); opacity: 0; } }
/* vùng chạm: tối thiểu 44px, nhãn tên chỉ hiện khi rê chuột/đang chọn */
.vz-cham { position: absolute; left: calc(var(--l) + var(--w) / 2); top: calc(var(--t) + var(--h) / 2); width: max(44px, var(--w)); height: max(44px, var(--h)); padding: 0; margin: 0;
  translate: -50% -50%; border: 0; border-radius: 40%; background: transparent; cursor: pointer; z-index: 3; -webkit-tap-highlight-color: transparent; }
.vz-cham:focus-visible { outline: 2px solid var(--mau); outline-offset: 2px; }
.vz-nhan { position: absolute; left: 50%; bottom: calc(100% + 2px); translate: -50% 4px; width: max-content; max-width: 40vw; padding: 3px 9px; border-radius: 99px; pointer-events: none;
  background: rgb(10 7 18 / .78); border: 1px solid color-mix(in srgb, var(--mau) 70%, transparent); color: #fff3e6; font: 600 clamp(10.5px, 1.6cqw, 13.5px)/1.3 var(--f-doc, system-ui);
  opacity: 0; transition: opacity .2s ease, translate .2s ease; }
@media (hover: hover) { .vz-cham:hover .vz-nhan { opacity: 1; translate: -50% 0; } }
.vz-cham[aria-expanded="true"] .vz-nhan { opacity: 1; translate: -50% 0; }
/* đang chọn: khu khác mờ, nhân vật được chọn nảy một cái rồi sáng viền mềm, giữ tới khi đóng ô */
.vuon.co-chon .vuon-than { filter: drop-shadow(0 26px 36px rgb(6 2 14 / .55)) brightness(.55) saturate(.8); }
.vuon.co-chon .vz-nv { filter: brightness(.55) saturate(.8); }
.vuon.co-chon .vz-nv.chon { filter: brightness(1.08) drop-shadow(0 0 3px #fff6e8) drop-shadow(0 0 10px var(--mau-chon, #ffd9a8)); z-index: 2; animation: vzNay .62s cubic-bezier(.3, 1.6, .5, 1) both; }
.vuon.co-chon .vz-nv.chon.vz-bay { animation: vzNay .62s cubic-bezier(.3, 1.6, .5, 1) both, vzBay 3.4s ease-in-out .62s infinite; }
@keyframes vzNay { 0% { transform: scale(1); } 45% { transform: scale(1.26); } 75% { transform: scale(1.1); } 100% { transform: scale(1.14); } }
.vuon.co-chon .vz-thac, .vuon.co-chon .vz-khoi { opacity: .25; }
/* ô tin ngắn: cạnh khu trên máy tính, mép dưới màn hình trên điện thoại */
.vz-tin { position: absolute; z-index: 9; width: min(300px, 86vw); padding: 12px 40px 12px 14px; border-radius: 18px; text-align: left;
  border: 1px solid color-mix(in srgb, var(--mau, #ffd9a8) 60%, transparent); background: rgb(16 10 28 / .94); box-shadow: 0 18px 40px rgb(0 0 0 / .5);
  animation: vzTinVao .25s ease both; }
.vz-tin[hidden] { display: none; }
@keyframes vzTinVao { from { opacity: 0; transform: translateY(6px); } }
.vz-tin-ten { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px 0 16px; border-radius: 99px; text-decoration: none;
  background: var(--mau, #f58baf); color: #22101a; font: 700 15.5px/1.1 var(--f-hien, system-ui); }
.vz-tin-ten svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vz-tin-ten:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.vz-tin-ai { margin: 8px 0 2px; font: 600 13px/1.35 var(--f-doc, system-ui); color: var(--mau, #ffd9a8); }
.vz-tin-mo { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--chu-mo, #d9cfe6); }
.vz-tin-dong { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff3e6; cursor: pointer; }
.vz-tin-dong svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.trang-tau .phong { position: relative; }
@media (max-width: 700px) {
  .vz-tin { position: fixed; left: 50%; right: auto; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom)); translate: -50% 0; width: min(420px, calc(100vw - 24px)); }
}
@media (prefers-reduced-motion: reduce) {
  .vuon-troi, .vz-nv, .vz-thac::before, .vz-khoi, .vz-tin { animation: none !important; }
  .vz-khoi { display: none; }
  .vuon.co-chon .vz-nv.chon { transform: scale(1.12); }
}
/* điện thoại dọc: vệ tinh mùa giải và Hang Trùm đậu PHÍA TRÊN tàu, Vườn Hành Tinh ở góc phải dưới (chỗ trời trống dưới đuôi), không đè thân tàu */
@media (max-width: 700px) {
  .trang-tau .vuon-khung { margin-top: 27vw; }
  .trang-tau .vuon-khung .hub-vt { left: 1%; top: -40%; width: 16vw; }
  .trang-tau .vuon-khung .loi-hang { right: 2%; top: -38%; width: 15vw; }
  .trang-tau .vuon-khung .loi-vuon { left: auto; right: 5%; top: 74%; width: 15vw; }
}
/* 18/10 chiều (cô Ari): bảng tên phòng nhỏ luôn hiện để biết chỗ nhấn; tàu Lão Kính nhỏ lại, bay PHÍA TRÊN tàu vườn, không đè */
.vz-nhan { opacity: .92; translate: -50% 0; font-size: clamp(9px, 1.45cqw, 12.5px); padding: 2px 7px; }
.vz-nhan::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .35em; border-radius: 50%; background: var(--mau); vertical-align: .08em; }
.vz-cham[data-chon-khu] .vz-nhan { left: calc(50% + var(--nx, 0px)); top: var(--ny, auto); bottom: var(--nb, calc(100% + 2px)); white-space: nowrap; }
.vuon.co-chon .vz-cham:not([aria-expanded="true"]) .vz-nhan { opacity: .35; }
.trang-tau .vuon-khung .tcd { top: -54%; width: clamp(92px, 24%, 200px); }
.trang-tau .vuon-khung { margin-top: clamp(110px, 24vw, 230px); }