/* hub-vutru.css: trang chính /tools/ "phòng là bầu trời" (04/10/2026). Nạp sau vutru.css. */

.hub { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(70px + env(safe-area-inset-top)) 0 18px; }
.hub-diem { margin: 0 auto 4px; padding: 6px 15px; border-radius: 99px; border: 1px solid var(--duong); background: var(--kinh);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 500 13px/1.3 var(--f-doc); color: var(--chu-mo); }
.hub-diem b { font: 700 15px/1 var(--f-hien); color: var(--nhan); }
.hub-diem[hidden] { display: none; }
/* ô điểm của tôi ở trang chính (cô Ari 10/10/2026): diem-tram.js đặt ngay dưới dải "Hôm nay N điểm", chỉ khi đã đăng nhập */
.dt-vi.hub-vi { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 4px; width: fit-content; max-width: calc(100% - 24px); margin: 2px auto 6px; padding: 0; font: 500 13.5px/1.5 var(--f-doc); color: var(--chu-mo); }
.dt-vi.hub-vi[hidden] { display: none; }
.hub-vi .dt-vi-so { font: 700 15px/1.2 var(--f-hien); color: var(--nhan); }
.hub-vi .dt-vi-mua { margin-left: 10px; padding: 2px 10px; border-radius: 99px; border: 1px solid rgb(255 226 196 / .3); color: var(--chu); font-weight: 600; font-size: 12.5px; white-space: nowrap; }

/* ---------------------------------------------------------------- căn phòng: mọi toạ độ là phần trăm của ảnh phòng */
.phong { width: 100%; display: flex; flex-direction: column; align-items: center; }
.phong-khung {
  position: relative; container-type: inline-size; isolation: isolate;
  width: min(100%, calc((100dvh - 170px) / var(--ti-le)), 920px); min-width: 320px;
  aspect-ratio: 1 / var(--ti-le);
}
.phong-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 / .55)) drop-shadow(0 0 30px rgb(255 180 107 / .14)); }

.nv { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: calc(var(--w) * 1.15); translate: -50% -100%; pointer-events: none; }
@container (max-width: 599px) { .nv { width: calc(var(--w) * 1.7); } }
.nv img { display: block; width: 100%; height: auto; }
.nv-bong { position: absolute; left: 50%; bottom: -1.1cqw; width: 230%; height: 2.4cqw; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(20 8 30 / .45), transparent); }
.nv-moi { position: absolute; z-index: 5; left: calc(var(--x) + 3.4cqw); top: calc(var(--y) - 14cqw); display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 clamp(12px, 2.6cqw, 20px); border-radius: 99px; text-decoration: none; white-space: nowrap; color: #1a0f22;
  font: 600 clamp(11.5px, 2.5cqw, 14.5px)/1 var(--f-doc); background: linear-gradient(180deg, #ffe9d2, #ffb46b);
  box-shadow: 0 4px 16px rgb(255 180 107 / .4); transition: scale 140ms var(--em); }
.nv-moi:active { scale: .95; }

/* ---------------------------------------------------------------- tám hành tinh khu */
.khu-ds { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.khu { position: absolute; left: var(--x); top: var(--y); --co: clamp(28px, 8.6cqw, 62px); width: var(--co); translate: -50% -50%; pointer-events: auto; }
.khu-nut { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%;
  animation: troi calc(5.2s + var(--d) * .7s) ease-in-out calc(var(--d) * -.9s) infinite;
  transition: scale 240ms var(--em); -webkit-tap-highlight-color: transparent; }
.khu-nut:hover { scale: 1.1; }
/* vùng chạm rộng hơn hành tinh: gồm cả tên bên dưới, ngón tay chạm trúng dễ */
.khu-nut::after { content: ""; position: absolute; left: -45%; right: -45%; top: -25%; bottom: -78%; border-radius: 22px; }
.khu-nut:active { scale: .93; transition-duration: 120ms; }
.khu-anh { position: absolute; left: -22%; top: -22%; width: 144%; height: 144%; max-width: none; pointer-events: none; user-select: none;
  filter: drop-shadow(0 2px 5px rgb(5 4 9 / .5)); transition: filter 300ms var(--em); }
.khu-nut:hover .khu-anh, .khu.chon .khu-anh { filter: drop-shadow(0 0 12px var(--mau)) drop-shadow(0 2px 5px rgb(5 4 9 / .5)); }
.khu-nut:hover .khu-ten, .khu.chon .khu-ten { border-color: var(--mau); background: color-mix(in srgb, var(--mau) 30%, rgb(10 7 18 / .85)); }
.khu-ten { position: absolute; left: 50%; top: calc(100% + 1px); translate: -50% 0; z-index: 2; padding: 3px 10px; border-radius: 99px; white-space: nowrap;
  background: rgb(10 7 18 / .72); border: 1px solid rgb(255 226 196 / .42); color: var(--chu); font: 600 clamp(11px, 2cqw, 16px)/1.3 var(--f-doc);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: none; }
.khu-vong { position: absolute; inset: -7%; border-radius: 50%; opacity: 0; transition: opacity 300ms var(--em); pointer-events: none;
  background: conic-gradient(var(--mau) calc(var(--tien, 0) * 360deg), rgb(255 226 196 / .16) 0);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 2px)); }
.khu.co-tien .khu-vong { opacity: 1; }
.khu-dem { position: absolute; right: -30%; top: -16%; z-index: 2; min-width: 20px; padding: 1px 6px; border-radius: 99px; text-align: center;
  background: var(--nhan); color: #1a0f22; font: 700 10.5px/1.4 var(--f-doc); box-shadow: 0 2px 8px rgb(0 0 0 / .4); }
.khu-dem[hidden] { display: none; }
@keyframes troi { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2cqw; } }

/* Hang Trùm: hành tinh hang động ở góc trời, ngoài hình thoi của phòng */
.hang { position: absolute; z-index: 4; left: 86%; top: 1%; width: clamp(34px, 9.5cqw, 72px); text-decoration: none; text-align: center;
  animation: troi 6.4s ease-in-out -2s infinite; transition: scale 240ms var(--em); -webkit-tap-highlight-color: transparent; }
.hang:hover { scale: 1.06; }
/* Mini game: hành tinh hồng ở góc trên bên trái căn phòng (điện thoại đứng: dưới phòng, bên phải Hang Trùm); không tính điểm */
.hang-mini { left: 2%; animation-delay: -4s; }
.hang-mini .hang-anh { filter: drop-shadow(0 0 16px rgb(255 120 190 / .5)) drop-shadow(0 4px 10px rgb(5 4 9 / .5)); }
.hang-khoa { display: block; font-size: max(11px, .78em); font-weight: 500; opacity: .75; line-height: 1.2; }
.hang-mini .hang-ten { border-color: rgb(255 140 200 / .6); }
.hang:active { scale: .94; transition-duration: 120ms; }
.hang-anh { display: block; width: 130%; height: auto; margin: -15% -15% 0; max-width: none; filter: drop-shadow(0 0 16px rgb(255 140 60 / .45)) drop-shadow(0 4px 10px rgb(5 4 9 / .5)); }
.hang-ten { position: relative; display: inline-block; margin-top: -2px; padding: 4px 12px; border-radius: 99px; white-space: nowrap;
  background: rgb(10 7 18 / .66); border: 1px solid rgb(255 180 107 / .55); color: var(--nhan); font: 600 clamp(11.5px, 2.2cqw, 16px)/1.3 var(--f-doc); }

/* điện thoại đứng: dưới căn phòng còn nhiều chỗ trống, Hang Trùm xuống đó cho to và dễ chạm */
@media (max-width: 700px) and (orientation: portrait) {
  .phong-khung { margin-bottom: 30vw; }
  .hang { left: calc(50% - 31vw); top: calc(100% + 2vw); width: 20vw; }
  .hang-mini { left: calc(50% + 11vw); }
}
.hub-goi-y { margin-top: 10px; font: 400 13px/1.4 var(--f-doc); color: var(--chu-nhat); text-align: center; }

/* ---------------------------------------------------------------- tấm trạm của một khu (trượt từ dưới lên) */
.tam { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.tam[hidden] { display: none; }
.tam-nen { position: absolute; inset: 0; background: rgb(5 4 9 / .62); animation: hien 300ms var(--em) both; }
.tam-hop { position: relative; width: min(560px, 100%); max-height: min(80dvh, 680px); display: flex; flex-direction: column;
  border-radius: 28px 28px 0 0; background: var(--kinh-dac); border: 1px solid var(--duong); border-bottom: 0;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 -20px 60px rgb(0 0 0 / .5);
  padding-bottom: env(safe-area-inset-bottom); animation: len 440ms var(--em) both; }
.tam.dong .tam-hop { animation: xuong 260ms var(--em) both; }
.tam.dong .tam-nen { animation: an 260ms var(--em) both; }
.tam-quai { position: absolute; left: 50%; top: 8px; width: 38px; height: 4px; border-radius: 4px; translate: -50% 0; background: rgb(255 226 196 / .3); }
.tam-dong { position: absolute; right: 12px; top: 14px; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%;
  border: 2px solid var(--vien); background: rgb(10 7 18 / .78); color: var(--vien); cursor: pointer; transition: scale 140ms var(--em); }
.tam-dong:active { scale: .92; }
.tam-dong svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.tam-cuon { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.tam-khu[hidden] { display: none; }
.tam-dau { display: flex; align-items: center; gap: 14px; padding: 26px 64px 10px 20px; }
.tam-anh { flex: none; width: 66px; height: 66px; filter: drop-shadow(0 0 14px var(--mau)); }
.tam-tieu h2 { font-size: clamp(22px, 1.4vw + 17px, 28px); }
.tam-tieu p { margin-top: 3px; font-size: 14px; color: var(--chu-mo); }

.tram-ds { list-style: none; margin: 0; padding: 4px 10px 8px; }
.tram { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 8px 12px; border-radius: 18px; text-decoration: none; color: var(--chu);
  transition: background-color 240ms var(--em), scale 140ms var(--em); -webkit-tap-highlight-color: transparent; }
.tram:hover { background: rgb(255 226 196 / .08); }
.tram:active { scale: .98; }
.tram-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--vien);
  border: 1.5px solid var(--vien); box-shadow: 0 0 14px rgb(255 226 196 / .18), inset 0 0 10px rgb(255 226 196 / .06); }
.tram-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tram-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tram-chu b { font: 600 16px/1.25 var(--f-doc); }
.tram-diem { padding: 2px 10px; border-radius: 99px; font: 600 12px/1.5 var(--f-doc); border: 1px solid rgb(255 180 107 / .55); color: var(--nhan); }
.tram-diem:empty { display: none; }
.tram-diem.dat { background: linear-gradient(180deg, #ffe9d2, #ffb46b); border-color: transparent; color: #1a0f22; }
.tram-diem.khong { border-color: var(--duong); color: var(--chu-nhat); font-weight: 500; }
.tram-diem.dang { border-style: dashed; }
.tram-mui { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--chu-nhat); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tam-ghi { padding: 4px 22px 16px; font-size: 12px; line-height: 1.5; color: var(--chu-nhat); }

@media (min-width: 900px) {
  .tam { align-items: center; }
  .tam-hop { border-radius: 28px; border-bottom: 1px solid var(--duong); }
}

.vt-chan { position: relative; z-index: 1; padding: 6px 20px calc(26px + env(safe-area-inset-bottom)); text-align: center; }
.vt-chan .disc { max-width: 64ch; margin: 0 auto; font-size: 12px; line-height: 1.6; color: var(--chu-nhat); }

@keyframes len { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes xuong { to { translate: 0 100%; } }
@keyframes hien { from { opacity: 0; } to { opacity: 1; } }
@keyframes an { to { opacity: 0; } }

/* không JS: các khu xếp thành danh sách dưới căn phòng, vẫn bấm được mọi trạm */
html:not(.co-js) .tam { position: static; display: block; }
html:not(.co-js) .tam-nen, html:not(.co-js) .tam-dong, html:not(.co-js) .tam-quai { display: none; }
html:not(.co-js) .tam-hop { width: min(560px, 100%); margin: 0 auto; max-height: none; border-radius: 28px; animation: none; }
html:not(.co-js) .tam-khu[hidden] { display: block; }
html:not(.co-js) .hub { min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  .khu-nut, .hang { animation: none !important; }
  .tam-hop, .tam-nen { animation-duration: .01s !important; }
}

/* Giọng Ari hướng dẫn (giong-ari.js): nút ở đầu trang và trong tấm từng khu, nền tối */
.hub-giong { display: flex; justify-content: center; margin: 2px 12px 8px; }
.hub-giong .giong, .tam-tieu .giong { margin: 0; --accent: #ffb46b; --text-primary: #fff7f0; --text-secondary: rgb(255 247 240 / .78); --line: rgb(255 226 196 / .22); --panel: #1c1230; }
.tam-tieu .giong { margin-top: 8px; }
.tam-tieu .giong-nut { min-height: 40px; }

/* ---- bảng xếp hạng dưới phòng (04/10/2026, cô Ari) */
.hub-bxh { display: inline-flex; align-items: center; min-height: 44px; gap: 6px; margin-top: 10px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgb(255 226 196 / .4);
  background: rgb(10 7 18 / .55); color: #ffe2c4; font: 600 .9rem/1.3 var(--f-doc, system-ui); text-decoration: none; }
.hub-bxh svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hub-bxh:hover { background: rgb(255 226 196 / .12); }
.bxh-vung { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 56px 16px 40px; scroll-margin-top: 70px; }
.bxh-vung .bxh[data-kieu="phong-tap"] { --bx-nen: transparent; background: transparent; }

/* ---- dưới căn phòng: danh sách tất cả ứng dụng, rồi Hang Trùm (05/10/2026, cô Ari: "liệt kê ra danh sách tất cả các ứng dụng, rồi mới đến hang trùm, để người chơi nhấn dưới đó cho nhanh") */
.hub-nhanh { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.hub-nhanh .hub-bxh { margin-top: 0; }
.dsu, .htd { position: relative; z-index: 1; scroll-margin-top: 70px; }
.dsu-trong, .htd-trong { max-width: 1180px; margin: 0 auto; padding: 44px 16px 8px; }
.dsu h2, .htd h2 { margin: 0; font: 600 clamp(1.5rem, 3vw, 2.1rem)/1.15 var(--f-hien, 'Bricolage Grotesque', system-ui, sans-serif); color: #fff7f0; }
.dsu-mo { margin: 6px 0 20px; color: rgb(255 247 240 / .75); }
.dsu-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.dsu-khu { border: 1px solid color-mix(in srgb, var(--mau) 38%, rgb(255 226 196 / .12)); border-radius: 24px; padding: 10px 6px 8px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--mau) 14%, transparent), transparent 60%), rgb(14 9 26 / .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dsu-khu h3 { display: flex; align-items: center; gap: 10px; margin: 0; padding: 4px 12px 2px; font: 600 1.05rem/1.2 var(--f-hien, system-ui); color: #fff7f0; }
.dsu-khu h3 img { width: 34px; height: 34px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--mau) 60%, transparent)); }
.dsu-khu .tram-ds { padding: 2px 4px 4px; }
.dsu-khu .tram { min-height: 56px; }
.htd-dau { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; padding: 18px 22px; border-radius: 28px; border: 1px solid rgb(255 226 196 / .16);
  background: radial-gradient(120% 140% at 0% 50%, rgb(255 140 60 / .16), transparent 60%), rgb(14 9 26 / .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.htd-hanh { flex: none; width: clamp(96px, 16vw, 150px); height: auto; filter: drop-shadow(0 0 30px rgb(255 140 60 / .5)); }
.htd-dau p { margin: 8px 0 14px; color: rgb(255 247 240 / .8); max-width: 56ch; }
.htd-dau .nut.chinh { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 600; text-decoration: none;
  background: linear-gradient(180deg, #ffe9d2, #ffb46b); color: #1a0f22; box-shadow: 0 6px 22px rgb(255 180 107 / .35); }
.htd-ds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.htd-trum { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 20px; text-decoration: none; text-align: center;
  border: 1px solid rgb(255 226 196 / .14); background: rgb(14 9 26 / .55); color: #fff7f0; font: 600 .82rem/1.25 var(--f-doc, system-ui); min-height: 44px; }
.htd-trum:hover { background: rgb(255 226 196 / .1); }
.htd-trum img { width: 76px; height: 76px; object-fit: contain; }
@media (max-width: 560px) {
  .htd-dau { flex-direction: column; text-align: center; padding: 16px; }
  .htd-ds { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}

/* Trạm "Thông tin mùa giải" (06/10/2026): vệ tinh cắm cờ hồng bay lơ lửng (cùng hình trang chủ), logo Ari đè lên cờ bằng CSS */
.hub-vt { position: absolute; z-index: 4; left: 2%; top: 3%; width: clamp(54px, 15cqw, 92px); text-decoration: none; text-align: center; -webkit-tap-highlight-color: transparent; }
.hub-vt::after { content: ""; position: absolute; inset: -6px -10px -6px; }
.hub-vt-vo { position: relative; display: block; width: 100%; aspect-ratio: 1; animation: troi 7.2s ease-in-out -1s infinite; filter: drop-shadow(0 0 14px rgb(255 150 200 / .5)); }
.hub-vt-vo > img:first-child { display: block; width: 100%; height: 100%; object-fit: contain; }
.hub-vt-logo { position: absolute; left: 53%; top: 13.5%; width: 17%; height: 17%; object-fit: contain; pointer-events: none; }
.hub-vt-chu { display: block; margin-top: 2px; 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); padding: 3px 6px; border-radius: 10px; background: rgb(10 7 18 / .62); } /* nền tối: nhãn nằm đè tường phòng ở máy tính, chữ cam không nền thì chìm (rà 11/10) */
.hub-vt:active { scale: .94; }
@media (min-width: 701px) { .hub-vt { top: 24%; } }
@media (prefers-reduced-motion: reduce) { .hub-vt-vo { animation: none; } }
.vt-loi { position: fixed; z-index: 30; box-sizing: border-box; padding: 13px 16px 10px; border-radius: 20px; color: #2b2140; background: #fff4e6; box-shadow: 0 10px 34px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 190 220 / .6);
  opacity: 0; scale: .94; pointer-events: none; transition: opacity .25s, scale .3s cubic-bezier(.3, 1.4, .5, 1); }
.vt-loi.hien { opacity: 1; scale: 1; pointer-events: auto; }
.vt-loi-chu { margin: 0 0 6px; font-size: 15.5px; line-height: 1.5; font-weight: 500; }
.vt-loi-dem { display: block; font-size: 12px; font-weight: 600; color: #b0446f; }
.vt-bang { position: fixed; inset: 0; z-index: 40; background: rgb(8 5 18 / .8); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.vt-bang[hidden] { display: none; }
.vt-bang-hop { position: relative; width: min(560px, 100%); max-height: min(86vh, 760px); overflow-y: auto; padding: 22px 20px 24px; border-radius: 22px; background: #fff4e6; color: #2b2140; box-shadow: 0 16px 60px rgb(0 0 0 / .55); }
.vt-bang-hop h2 { margin: 0 0 4px; font-size: 1.35rem; padding-right: 36px; }
.vt-bang-hop h3 { margin: 16px 0 6px; font-size: 1.02rem; color: #b0446f; }
.vt-bang-hop p { margin: 0 0 8px; line-height: 1.55; }
.vt-ngay { font-weight: 700; color: #b0446f; }
.vt-chuyen blockquote { margin: 0 0 8px; padding: 10px 14px; border-left: 3px solid #ef8fc0; background: rgb(239 143 192 / .12); border-radius: 0 12px 12px 0; line-height: 1.55; white-space: pre-line; }
.vt-dong { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(43 33 64 / .08); font-size: 1.6rem; line-height: 1; color: #2b2140; }
.vt-hang { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vt-nut { display: inline-block; padding: 11px 18px; border-radius: 999px; background: linear-gradient(#ff9ec4, #ff6aa8); color: #2a0f24; font-weight: 700; text-decoration: none; }
.vt-nut.vien { background: transparent; box-shadow: inset 0 0 0 2px #ef8fc0; color: #b0446f; }

/* Vườn Hành Tinh: hòn đảo bay có cây, lơ lửng trong phòng, chạm là sang /mini-game/vuon/ (cô Ari 06/10/2026) */
.hub-vuon { position: absolute; z-index: 4; right: 2%; top: 3%; width: clamp(60px, 16cqw, 96px); text-decoration: none; text-align: center; -webkit-tap-highlight-color: transparent; }
.hub-vuon::after { content: ""; position: absolute; inset: -6px -6px -6px -10px; }   /* 10/10: mép phải -10px từng làm trang tràn ngang 2px ở 390 */
.hub-vuon-vo { position: relative; display: block; width: 100%; aspect-ratio: 1; animation: troi 6.4s ease-in-out -2.4s infinite; filter: drop-shadow(0 0 16px rgb(170 255 190 / .4)); }
.hub-vuon-vo > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hub-vuon-chu { display: block; margin-top: 2px; 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); }
.hub-vuon:active { scale: .94; }
@media (min-width: 701px) { .hub-vuon { right: -15%; top: 46%; } }
@media (prefers-reduced-motion: reduce) { .hub-vuon-vo { animation: none; } }

/* Rà đêm 11/10 đợt 2 */
/* tàu Lão Kính (z 6, bay khắp khung) từng che tâm hành tinh Mini game và nhãn Thông tin mùa giải: các trạm quanh phòng nổi lên trên tàu, tàu bay sau lưng */
.hang, .hub-vt, .hub-vuon { z-index: 7; }
/* nhãn vệ tinh rộng hơn hình: canh giữa theo hình, không để chữ tràn ra mép trái màn */
.hub-vt-chu { position: relative; left: 50%; translate: -50% 0; width: max-content; max-width: 96px; }
@media (max-width: 700px) { .hub-vt { left: 5%; } }
/* link Đăng nhập để tích điểm: chữ cao 16px, vùng chạm phủ cả viên thuốc và thêm trên dưới cho đủ 44 */
.hub-dn { position: relative; }
.hub-dn::after { content: ""; position: absolute; inset: -14px -15px; }