/* ht-vutru.css: vỏ vũ trụ cho trang Hang Trùm (ari-yoga/thu-training-zone/hang-trum/, làm lại trang Công cụ, 04/10/2026).
   Nạp SAU tz.css, ht.css, trum-song.css. KHÔNG nạp vutru.css: hai bộ cùng đặt --chu và --vien nhưng khác nghĩa (tz.css: viền hồng nhạt; vutru.css: kem đặc),
   nên phần thanh đầu được chép tại đây với màu viết thẳng. Đổi bảng màu hồng của tz.css sang cam kem ấm của trang chủ mới; mọi màu hồng viết cứng trong ht.css
   (huy hiệu, nút) giữ nguyên, chỉ đổi biến. Sửa HTML ở nguon/dung_trang.mjs (htHtml), không sửa tay hang-trum/index.html. */
:root {
  --nen-1: #2a1836; --nen-2: #150d22; --nen-3: #0a0712; --nen-4: #050409;
  --mat: rgb(21 13 34 / .72); --mat-dac: #1c1230; --mat-2: #271a3d;
  --vien: rgb(255 226 196 / .16); --vien-2: rgb(255 226 196 / .32);
  --chu: #fff7f0; --chu-2: rgb(255 247 240 / .82); --chu-3: rgb(255 247 240 / .62);
  --hong: #ffb46b; --hong-sang: #ffd2a0; --hong-chu: #ffcf9f; --accent: #ffb46b;
}
html { background: #050409; }
body.trang-hang {
  color: var(--chu);
  background:
    radial-gradient(ellipse 55% 40% at 68% 22%, rgb(162 58 138 / .18), transparent 70%),
    radial-gradient(ellipse 50% 40% at 22% 72%, rgb(106 58 176 / .15), transparent 70%),
    radial-gradient(ellipse at 50% 45%, #2a1836 0%, #150d22 42%, #0a0712 78%, #050409 100%);
  background-attachment: fixed;
}
#sao { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.trang-hang main, .trang-hang footer, .trang-hang .ban-thu { position: relative; z-index: 1; }
.trang-hang main { padding-top: 12px; }
.trang-hang .ban-thu { margin-top: calc(64px + env(safe-area-inset-top)); background: rgb(10 7 18 / .5); border: 1px solid rgb(255 226 196 / .14); border-radius: 18px;
  max-width: 1180px; margin-left: auto; margin-right: auto; font-size: .8rem; }
.trang-hang .skip { background: #fff7f0; color: #1a0f22; }
/* chân trang gọn: chỉ giữ lời miễn trừ */
.trang-hang footer { background: none; border: 0; }
.trang-hang footer .inner { display: none; }

/* thanh đầu: nút ← về Khu Huấn Luyện, tên, nút loa (chép từ vutru.css, màu viết thẳng) */
.vt-bar { position: fixed; z-index: 30; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; pointer-events: none;
  padding: calc(10px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); }
.vt-bar > * { pointer-events: auto; }
.vt-ve, .vt-bar .sndfab { flex: none; position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1.5px solid #ffe2c4; background: rgb(10 7 18 / .55); color: #ffe2c4; cursor: pointer; text-decoration: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 14px rgb(255 226 196 / .18), inset 0 0 10px rgb(255 226 196 / .06); }
.vt-ve:hover, .vt-bar .sndfab:hover { background: rgb(255 226 196 / .14); }
.vt-ve svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vt-bar .sndfab svg { width: 22px; height: 22px; fill: currentColor; }
.vt-bar .sndfab .wave { opacity: 1; transition: opacity .3s; } .vt-bar .sndfab .slash { opacity: 0; transition: opacity .3s; }
.vt-bar .sndfab.off { opacity: .65; } .vt-bar .sndfab.off .wave { opacity: 0; } .vt-bar .sndfab.off .slash { opacity: 1; }
.vt-bar .sndfab.waiting::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #ffb46b; opacity: .6; }
.vt-bar .sndfab .tip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vt-ten { display: inline-flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; color: #fff7f0; font: 600 clamp(15px, .6vw + 13px, 19px)/1 'Bricolage Grotesque', 'Saira', system-ui, sans-serif;
  letter-spacing: .04em; text-shadow: 0 1px 6px rgb(0 0 0 / .7); }
.vt-ten img { height: 28px; width: auto; flex: none; }
.vt-phai { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ================================================================ làm lại giao diện Hang Trùm theo concept vũ trụ (04/10/2026, cô Ari giao toàn quyền thiết kế)
   Ý: Hang Trùm là MỘT HÀNH TINH HANG ĐỘNG ở góc trời (cùng hình với hành tinh trên trang chính). Đầu trang: hành tinh hang phát sáng cam, hai trùm
   đầu bay quanh như vệ tinh. Các bước vào trận là chuỗi mốc tròn. Mỗi trùm là một "vệ tinh" nhỏ trong thẻ kính: chân dung tròn có vành sáng theo màu
   trùm, tên + một câu + nút Thách đấu; phần tật xấu / thói quen / phần thưởng gập lại để trang gọn. Phông Bricolage + Be Vietnam Pro như cả web.
   Mọi hành vi (ht.js, trum-song.js, hộp đặt cược, giải thích) giữ nguyên: chỉ đổi lớp phủ CSS và bọc dl vào <details> trong dung_trang.mjs. */
:root { --f-hien: 'Bricolage Grotesque', 'Ari Hien DP', 'Be Vietnam Pro', system-ui, sans-serif; --f-than: 'Be Vietnam Pro', 'Ari Doc DP', system-ui, sans-serif; }
@keyframes ht-troi { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.trang-hang { font-family: var(--f-than); }
.trang-hang h1, .trang-hang h2, .trang-hang h3 { font-family: var(--f-hien); font-stretch: 100%; letter-spacing: -.012em; }
.trang-hang main { max-width: 1120px; }

/* ---- đầu trang: hành tinh hang động + hai trùm bay quanh */
.ht-dau { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px; padding: 24px 0 4px; }
.ht-dau-chu { position: relative; z-index: 2; }
.trang-hang .kicker { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; border: 1px solid rgb(255 226 196 / .35);
  background: rgb(10 7 18 / .45); color: #ffe2c4; font: 600 .76rem/1.4 var(--f-than); letter-spacing: .1em; text-transform: uppercase; }
.trang-hang h1 { font-weight: 600; font-size: clamp(2.6rem, 6.4vw, 4.2rem); line-height: 1.02; margin: 12px 0 0;
  background: linear-gradient(180deg, #fff7f0 10%, #ffd2a0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.ht-dau .lede { color: rgb(255 247 240 / .82); font-size: 1.04rem; }
.ht-dau-hinh { position: relative; height: clamp(250px, 34vw, 380px); }
.ht-hang { position: absolute; right: 0; top: 0; bottom: 0; margin-block: auto; width: min(100%, 340px); height: auto; max-width: none;
  filter: drop-shadow(0 0 44px rgb(255 140 60 / .5)); animation: ht-troi 7s ease-in-out infinite; }
.ht-mat { background: rgb(10 7 18 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--mau) 60%, transparent), 0 0 26px color-mix(in srgb, var(--mau) 40%, transparent); animation: ht-troi 6s ease-in-out infinite; }
.ht-mat.m1 { left: 0; top: 4%; width: clamp(104px, 15vw, 150px); height: clamp(104px, 15vw, 150px); animation-delay: -1.5s; }
.ht-mat.m2 { right: 2%; bottom: 0; width: clamp(80px, 11vw, 112px); height: clamp(80px, 11vw, 112px); animation-delay: -3.5s; }
.ht-mat img { width: 82%; height: 82%; }
.ht-vi { border-color: rgb(255 180 107 / .5); background: rgb(255 180 107 / .1); border-radius: 999px; }
.ht-vi:hover { background: rgb(255 180 107 / .18); }
.ht-vi-so { color: #ffe9d2; text-decoration-color: rgb(255 180 107 / .6); }
.ht-vi-so b { color: #ffb46b; font-family: var(--f-hien); }
.ht-vi-giu { color: rgb(255 247 240 / .78); }
@media (max-width: 760px) {
  .ht-dau { grid-template-columns: 1fr; gap: 6px; }
  .ht-dau-hinh { order: -1; height: 250px; margin-top: 8px; }
  .ht-hang { left: 0; right: 0; margin-inline: auto; width: min(74%, 250px); }
  .ht-mat.m1 { left: 2%; top: 8%; } .ht-mat.m2 { right: 2%; bottom: 4%; }
}

/* ---- các bước vào trận: chuỗi mốc tròn */
.ht-cach, .ht-ds, .ht-luat, .ht-qua { margin-top: 44px; }
.ht-cach h2, .ht-muc-dau h2, .ht-qua h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 600; }
.ht-buoc { gap: 14px; position: relative; }
.ht-buoc li { padding: 58px 16px 16px; border-radius: 24px; background: var(--mat); border: 1px solid rgb(255 226 196 / .14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ht-buoc li::before { left: 16px; top: 14px; width: 34px; height: 34px; background: linear-gradient(180deg, #ffe9d2, #ffb46b); color: #1a0f22;
  box-shadow: 0 0 0 5px rgb(255 180 107 / .14), 0 0 18px rgb(255 180 107 / .4); }
.ht-buoc li:not(:last-child)::after { content: ""; position: absolute; left: 54px; top: 30px; right: -14px; height: 0; border-top: 1.5px dashed rgb(255 226 196 / .3); }
.ht-buoc b { font-family: var(--f-hien); font-weight: 600; }
@media (max-width: 900px) { .ht-buoc li:not(:last-child)::after { display: none; } }
@media (max-width: 820px) { .ht-buoc li { padding: 14px 14px 14px 60px; } .ht-buoc li::before { top: 14px; } }

/* ---- bộ lọc + tiêu đề mục */
.ht-loc { gap: 8px; }
.ht-loc button { min-height: 44px; border-radius: 999px; border: 1px solid rgb(255 226 196 / .26); background: rgb(10 7 18 / .5); color: rgb(255 247 240 / .85); padding: 0 14px; }
.ht-loc button[aria-pressed="true"] { background: linear-gradient(180deg, #ffe9d2, #ffb46b); color: #1a0f22; border-color: transparent; }
.ht-loc .dem { opacity: .75; }

/* ---- thẻ trùm: vệ tinh nhỏ trong thẻ kính */
.ht-luoi { gap: 16px; }
.trum-the { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 18px; border-radius: 28px;
  border-color: color-mix(in srgb, var(--mau) 34%, rgb(255 226 196 / .1));
  background: linear-gradient(160deg, color-mix(in srgb, var(--mau) 15%, transparent), transparent 58%), var(--mat);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 24px 50px -34px rgb(0 0 0 / .9); }
.trum-hinh { width: 112px; height: 112px; }
.trum-hao { background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--mau) 42%, #2a1836), #150d22 76%);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--mau) 60%, transparent), 0 0 30px color-mix(in srgb, var(--mau) 36%, transparent); }
.trum-hinh img { padding: 10px; }
.trum-tt { color: #1a0f22; background: linear-gradient(180deg, #ffe9d2, #ffb46b); font-family: var(--f-than); }
.tt-khoa .trum-tt { color: #ffe2c4; background: rgb(10 7 18 / .85); border: 1px solid rgb(255 226 196 / .4); }
.tt-sap .trum-tt { color: rgb(255 247 240 / .7); background: rgb(10 7 18 / .85); border: 1px solid rgb(255 226 196 / .2); }
.trum-kicker { color: #ffb46b; font-family: var(--f-than); }
.trum-the h3 { font-weight: 600; font-size: 1.3rem; }
.trum-the h3 small { font-family: var(--f-than); color: rgb(255 247 240 / .6); }
.trum-mo { color: rgb(255 247 240 / .82); margin-bottom: 10px; }
.trum-nut { margin-top: 8px; }
.trang-hang .nut.chinh { background: linear-gradient(180deg, #ffe9d2, #ffb46b); color: #1a0f22; border: 0; border-radius: 999px; box-shadow: 0 6px 22px rgb(255 180 107 / .35); }
.trang-hang .nut.chinh:hover { background: linear-gradient(180deg, #fff1e0, #ffc07d); }
.trang-hang .nut.phu { background: none; color: #ffe2c4; border: 1.5px solid #ffe2c4; border-radius: 999px; box-shadow: none; }
.trang-hang .nut.phu:hover { background: rgb(255 226 196 / .12); }
.trang-hang .nut:disabled { background: rgb(255 226 196 / .06); color: rgb(255 247 240 / .4); border: 1px dashed rgb(255 226 196 / .25); box-shadow: none; }
/* phần chi tiết gập: tật xấu, thói quen, thuần được, bảo bối */
.trum-them { margin-top: 12px; border-top: 1px solid var(--vien); }
.trum-them > summary, .cach-lam > summary { display: flex; align-items: center; gap: 8px; min-height: 46px; cursor: pointer; list-style: none; font: 600 .95rem var(--f-hien); color: rgb(255 247 240 / .92); }
.trum-them > summary::-webkit-details-marker { display: none; }
.trum-them > summary .ic { width: 18px; height: 18px; margin-left: auto; color: rgb(255 247 240 / .6); transition: transform .3s; }
.trum-them[open] > summary .ic { transform: rotate(180deg); }
.trum-them .trum-tt-ds { margin: 4px 0 6px; }
.cach-lam { margin-top: 0; }
.cach-lam-than h4, .tran-dong, .trum-tt-ds dt { color: #ffcf9f; font-family: var(--f-than); }
.tinh-trum, .bb-co { color: #ffe9d2; }
.tinh-trum { background: rgb(255 180 107 / .14); border-color: rgb(255 180 107 / .45); }
.tran-dang { background: rgb(255 226 196 / .05); }
@media (max-width: 560px) {
  .trum-the { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .trum-hinh { width: 84px; height: 84px; }
}

/* ---- khối mức cược, luật, hộp thoại */
.muc-the, .ht-luat-ds, .ht-qua { background: var(--mat); border-color: rgb(255 226 196 / .14); border-radius: 22px; }
.muc-the.chon-san { border-color: rgb(255 180 107 / .55); }
.muc-the-so { color: #ffb46b; font-family: var(--f-hien); }
.muc-the li::before { background: #ffb46b; }
.hop-cuoc, .giai { background: #1c1230; border-color: rgb(255 226 196 / .26); }
.hop-cuoc::backdrop { background: rgb(5 4 9 / .7); }
.hc-x:hover { background: rgb(255 226 196 / .12); }
.hc-kicker { color: #ffb46b; }
.hc-vi b { color: #ffb46b; }
.trang-hang .ban-thu { font-size: .78rem; }
.trang-hang .chon-vai a[aria-current="true"] { background: rgb(255 180 107 / .22); }
@media (prefers-reduced-motion: reduce) { .ht-hang, .ht-mat { animation: none; } }

/* cột chân dung của Miu có thêm nút Xem Miu 3D: không tràn sang chữ */
.trum-cot { min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.trum-cot .trum-hinh { align-self: center; }
.m3-nut { width: 100%; justify-content: center; padding: 8px 6px; font-size: .78rem; line-height: 1.2; white-space: normal; text-align: center; gap: 6px; }
@media (max-width: 560px) {
  .trum-the:has(.trum-cot) { grid-template-columns: 104px minmax(0, 1fr); }
  .trum-cot .trum-hinh { width: 84px; height: 84px; }
}

/* ---- hình trùm "nhô ra khỏi vòng" (05/10/2026, cô Ari thấy hình trùm nhỏ, bị cắt gọn trong vòng tròn): vòng chỉ làm nền phát sáng,
   trùm to hơn vòng ~1,3 lần, chân đứng ở đáy vòng, đầu và mây hơi giận nhô lên trên. Ảnh 512 (sizes ở trang) nên nét. */
.trum-hinh { width: 128px; height: 128px; margin-top: 22px; margin-left: 14px; }
.trum-the { grid-template-columns: 142px minmax(0, 1fr); }
.trum-hinh .ts { position: absolute; left: -16%; right: -16%; top: -26%; bottom: -4%; width: auto; height: auto; }
.trum-hinh .ts-cham { border-radius: 24px; }
.trum-hao { inset: 12% 0 0 0; }
@media (max-width: 560px) {
  .trum-hinh, .trum-cot .trum-hinh { width: 92px; height: 92px; margin-left: 10px; }
  .trum-the, .trum-the:has(.trum-cot) { grid-template-columns: 106px minmax(0, 1fr); }
}

/* nút lùi to, sáng, có chữ (cô Ari 06/10/2026: nút lùi nhỏ thì cho nổi bật, dễ tìm): cùng chuẩn với các trang công cụ con */
.vt-bar .vt-ve { width: auto; min-width: 52px; height: 52px; padding: 0 14px; gap: 6px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #ffe9d2, #ffb46b); color: #1a0f22; font: 700 .95rem/1 var(--f-than, system-ui);
  box-shadow: 0 0 0 4px rgb(255 180 107 / .22), 0 0 26px rgb(255 160 90 / .6), inset 0 -4px 8px rgb(150 60 10 / .25); }
.vt-bar .vt-ve svg { width: 24px; height: 24px; stroke-width: 2.4; }
.vt-bar .vt-ve::after { content: "Về"; }
@media (min-width: 480px) { .vt-bar .vt-ve::after { content: "Quay về"; } }
.vt-bar .vt-ve:hover { filter: brightness(1.08); background: linear-gradient(180deg, #ffe9d2, #ffb46b); }