/* TADABOT — lớp nền dùng chung (nút, ô nhập, cổng vòm, hộp thoại). Token màu/phông ở tb/tokens.css — nạp tokens.css TRƯỚC.
   Ý tưởng: mỗi KHÔNG GIAN là một CÁNH CỔNG; nhìn qua cổng thấy đúng cảnh 3D bên trong. Mọi lớp tiện ích nằm trong phạm vi `.tb`
   vì trang không gian 3D dùng chung tệp này mà giáo cụ của engine đã có lớp `.o` riêng. */
.tb, .tb *, .tb *::before, .tb *::after { box-sizing: border-box; }
html:has(> body.tb) { color-scheme: dark; background: var(--tb-xanh-dam); }
body.tb { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--chu); font: 15px/1.55 var(--phong-chu);
  background: var(--luoi-cham), var(--nen-gradient);           /* lưới chấm mờ trên gradient hai xanh (tokens.css) */
  background-attachment: fixed; -webkit-font-smoothing: antialiased; }
.tb h1, .tb h2, .tb h3 { font-family: var(--phong-tieu-de); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
.tb p { margin: 0; }
.tb a { color: var(--nhan); text-underline-offset: 3px; }
.tb button, .tb input, .tb select { font: inherit; color: inherit; }
.tb button { cursor: pointer; }
.tb [hidden] { display: none !important; }
.tb :focus-visible { outline: 2px solid var(--nhan-2); outline-offset: 2px; border-radius: 6px; }
.tb .sang :focus-visible { outline-color: var(--nhan); }

/* chữ thương hiệu */
.tb a.ten-hieu, .ten-hieu { font-family: var(--phong-tieu-de); font-weight: 600; font-size: 18px; letter-spacing: -.02em; color: var(--chu);
  text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.ten-hieu::before { content: ""; width: 14px; height: 19px; border-radius: 50% 50% 3px 3px / 37% 37% 3px 3px;
  background: linear-gradient(180deg, #FFFFFF 0 62%, var(--nhan-2) 62% 100%); box-shadow: 0 0 18px rgba(255, 255, 255, .45); }
.tb .sang .ten-hieu::before { background: linear-gradient(180deg, var(--xanh-sang) 0 62%, var(--xanh-dam) 62% 100%); box-shadow: none; }

/* MỌI lớp tiện ích dưới đây nằm trong phạm vi `.tb`: trang không gian 3D dùng chung tệp này cho hộp thoại, mà giáo cụ của
   engine đã có lớp `.o` riêng (bang_minh_hoa, trung_bay) — không giới hạn phạm vi là ô lưới hình bị biến thành ô nhập. */
/* nút */
.tb .nut { height: 46px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--vien-manh); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .15s; }
.tb .nut:hover { background: rgba(255, 255, 255, .12); }
.tb .sang .nut:hover { background: rgba(36, 71, 143, .08); }
.tb .nut:active { transform: translateY(1px); }
.tb .nut:disabled { opacity: .5; cursor: default; }
/* nút chính = TRẮNG chữ xanh đậm (ảnh mẫu); trên tấm sáng thì đảo lại thành gradient xanh chữ trắng */
.tb .nut.chinh { border: 0; color: var(--nhan-chu); font-weight: 600; background: var(--nhan); box-shadow: var(--bong-nut); }
.tb .nut.chinh:hover { background: var(--nhan-hover); filter: none; }
.tb .sang .nut.chinh { background: linear-gradient(100deg, var(--xanh-sang) 0%, var(--xanh-dam) 100%); }

.tb .nut.nguy { color: var(--loi); border-color: rgba(255, 179, 189, .5); }
.tb .sang .nut.nguy { border-color: rgba(201, 48, 63, .4); }
.tb .nut.nho { height: 36px; padding: 0 14px; border-radius: 10px; font-size: 14px; }
.tb .nut-chu { border: 0; background: none; padding: 0; color: var(--nhan); text-decoration: underline; text-underline-offset: 3px; }

/* ô nhập */
.tb .o { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--chu-phu); }
.tb .o input, .tb .o select { height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--vien);
  background: var(--o-nen); color: var(--chu); font-size: 15px; transition: border-color .15s, box-shadow .15s, background .15s; }
.tb .o select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23B7C6EA' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.tb .sang .o select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2356658E' stroke-width='1.5'/%3E%3C/svg%3E"); }
.tb .o input::placeholder { color: var(--chu-mo); }
.tb .o input:hover, .tb .o select:hover { border-color: var(--vien-manh); }
.tb .o input:focus, .tb .o select:focus { outline: 0; border-color: var(--nhan); box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); }
.tb .sang .o input:focus, .tb .sang .o select:focus { box-shadow: 0 0 0 3px rgba(36, 71, 143, .18); background: #fff; }

.tb .bao { font-size: 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--vien); background: var(--bao-nen); }
.tb .bao.loi { color: #FFE1E5; border-color: rgba(255, 179, 189, .55); background: rgba(255, 138, 153, .16); }
.tb .bao.tot { color: #E6FFF5; border-color: rgba(120, 235, 190, .55); background: rgba(120, 235, 190, .16); }

.tb .sang .bao.loi { color: #9E1F2C; border-color: rgba(201, 48, 63, .35); background: rgba(201, 48, 63, .07); }
.tb .sang .bao.tot { color: #0E6E4A; border-color: rgba(14, 110, 74, .3); background: rgba(14, 110, 74, .07); }

/* CỔNG VÒM — chữ ký của Tadabot. --tuong / --san lấy từ cảnh 3D thật (bảng CANH trong tb/chung.js). */
.cong { position: relative; aspect-ratio: 3 / 4; border-radius: 50% 50% 7% 7% / 37.5% 37.5% 5.25% 5.25%; overflow: hidden;
  background: linear-gradient(180deg, var(--tuong, #d9dfe4) 0 70%, var(--san, #e2c9a6) 70% 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 0 0 7px rgba(255, 255, 255, .10), var(--bong-noi);
  transition: background .9s ease; isolation: isolate; }
.cong::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;          /* ánh sáng hắt từ trong cổng */
  background: radial-gradient(80% 50% at 50% 0%, rgba(255, 255, 255, .34), transparent 70%),
              linear-gradient(180deg, transparent 69.4%, rgba(0, 0, 0, .16) 70%, transparent 76%); }
/* cảnh là ẢNH 360° (nền trên R2): hiện ảnh nhỏ của chính nó; bỏ vạch chân tường vẽ sẵn, chỉ giữ ánh sáng hắt từ trên */
.cong.co-anh { background-size: cover; background-position: center 56%; }
.cong.co-anh::before { background: radial-gradient(80% 50% at 50% 0%, rgba(255, 255, 255, .22), transparent 70%); }
.cong .nv { position: absolute; left: 50%; bottom: 15%; z-index: 2; width: 100%; height: 80%; transform: translateX(-50%);
  object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 10px 10px rgba(8, 16, 46, .35)); }   /* ảnh Streamoji: PNG toàn thân nền trong suốt cắt ở gối → nhân vật đứng trong cổng, mép dưới của cổng che chỗ cắt */
.cong .bong { position: absolute; left: 50%; bottom: 11%; z-index: 2; width: 46%; height: 62%; transform: translateX(-50%); display: block; }
.cong .bong svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cong .bong path { fill: #1B3168; stroke: rgba(255, 255, 255, .9); stroke-width: 2.5; stroke-linejoin: round; paint-order: stroke; }
.cong .bong.trong path { fill: rgba(27, 49, 104, .28); stroke-dasharray: 5 5; stroke-width: 2; }

/* DẤU CHỜ `.tb-quay` (24/09, user "đổi loading spinner… hiện đại hơn, không dùng vòng tròn"): chính DẤU CỔNG VÒM của thương hiệu
   (cùng hình với `.ten-hieu::before`) đang DÂNG NƯỚC — mặt nước dập dềnh lên xuống trong lòng cổng, một vệt sáng quét qua.
   Không có vòng tròn nào; nhìn thấy nó chuyển động là biết hệ thống còn sống. Dùng chung: màn chờ trang không gian (#tbCho) và
   hộp nhân vật ở home (nhan_vat_modal.js). Lỗi: `.loi` bên ngoài dừng chuyển động, đổi viền đỏ. */
.tb-quay { position: relative; width: 38px; height: 52px; flex: none; overflow: hidden; isolation: isolate;
  border-radius: 50% 50% 6px 6px / 36% 36% 6px 6px; border: 1.5px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .10); box-shadow: 0 0 28px rgba(255, 255, 255, .25), 0 1px 0 rgba(255, 255, 255, .25) inset; }
.tb-quay::before { content: ""; position: absolute; left: -30%; right: -30%; top: 100%; height: 220%; z-index: -1;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--tb-nhan-2, #D7E3FA) 60%); border-radius: 46% 54% 0 0 / 30% 30% 0 0;
  animation: tbDang 2.4s ease-in-out infinite; }
.tb-quay::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg);
  animation: tbQuet 2.4s ease-in-out infinite; }
@keyframes tbDang { 0% { transform: translateY(-9%) rotate(-5deg); } 50% { transform: translateY(-36%) rotate(5deg); } 100% { transform: translateY(-9%) rotate(-5deg); } }
@keyframes tbQuet { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.tb .sang .tb-quay { border-color: rgba(36, 71, 143, .35); background: rgba(36, 71, 143, .08); box-shadow: none; }
.tb .sang .tb-quay::before { background: linear-gradient(180deg, var(--tb-xanh-sang) 0%, var(--tb-xanh-dam) 70%); }
@media (prefers-reduced-motion: reduce) { .tb-quay::before, .tb-quay::after { animation: none; } .tb-quay::before { transform: translateY(-55%); } }

/* hộp thoại */
.man-che { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
  background: var(--che-nen); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: moDan .22s ease-out both; }
.tb .hop { width: min(560px, 100%); max-height: calc(100dvh - 40px); overflow: auto; padding: 28px; border-radius: var(--ban-kinh-lon);
  background: var(--hop-nen); border: 1px solid var(--vien-manh); color: var(--chu);
  box-shadow: 0 40px 120px rgba(8, 16, 46, .55); display: flex; flex-direction: column; gap: 20px; }
.tb .hop h2 { font-size: 20px; }
.tb .hop .cuoi { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) { .tb .hop { padding: 22px; } }
@keyframes moDan { from { opacity: 0; } to { opacity: 1; } }

/* HIỆU ỨNG HỘP THOẠI DÙNG CHUNG (mọi .man-che / .km-nen / ngăn bên): vào = nền mờ dần + hộp nổi lên;
   ra = lớp .dang-dong do tb/hieu_ung.js gắn rồi mới ẩn/gỡ (display:none thì không diễn được lúc đóng). */
:root { --tb-hop-vao: cubic-bezier(.2, .9, .25, 1.05); --tb-hop-ra: cubic-bezier(.4, 0, 1, 1); }
.man-che > .hop, .km-nen > .km-hop { animation: hopVao .32s var(--tb-hop-vao) both; }
.man-che.dang-dong, .km-nen.dang-dong, .ngan-che.dang-dong { animation: moDan .2s var(--tb-hop-ra) reverse both; pointer-events: none; }
.man-che.dang-dong > .hop, .km-nen.dang-dong > .km-hop { animation: hopRa .2s var(--tb-hop-ra) both; }
@keyframes hopVao { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hopRa { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.97); } }

/* ĐANG TẢI DÙNG CHUNG: mọi khung giữ chỗ của thẻ (.xuong-the) và mọi ảnh thẻ đang tải (.dang-tai) cùng một vệt sáng quét. */
.xuong-the, .dang-tai { position: relative; overflow: hidden; isolation: isolate; }
.xuong-the { background: rgba(255, 255, 255, .07); }
.xuong-the::after, .dang-tai::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .13) 45%, rgba(255, 255, 255, .2) 50%, transparent 75%);
  background-size: 220% 100%; animation: tbQuetTai 1.4s ease-in-out infinite; }
.xuong-the:nth-child(2)::after { animation-delay: .12s; } .xuong-the:nth-child(3)::after { animation-delay: .24s; }
.xuong-the:nth-child(4)::after { animation-delay: .36s; }
@keyframes tbQuetTai { from { background-position: 120% 0; } to { background-position: -120% 0; } }
img.anh-vao { animation: moDan .35s ease-out both; }
@media (prefers-reduced-motion: reduce) { .tb *, .tb *::before, .tb *::after, .man-che, .man-che *, .km-nen, .km-nen *, .dang-tai::after { animation: none !important; transition: none !important; } }

/* THANH ĐIỀU HƯỚNG CHÍNH dùng chung ba trang (Không gian · Nhân vật · Chương trình): chữ một dòng, căn giữa;
   màn hẹp thì xuống hàng riêng và ba tab chia đều bề ngang. */
.dieu-huong { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .07); }
.dieu-huong a { height: 36px; padding: 0 14px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  text-align: center; white-space: nowrap; color: var(--chu-phu); text-decoration: none; font-size: 14px; font-weight: 500; }
.dieu-huong a:hover { color: var(--chu); background: rgba(255, 255, 255, .08); }
.dieu-huong a[aria-current="page"] { color: var(--nhan-chu); background: var(--nhan); }
header.dau .giua { flex: 1; display: flex; justify-content: center; }
@media (max-width: 720px) {
  header.dau { flex-wrap: wrap; }
  header.dau .giua { order: 3; flex-basis: 100%; }
  header.dau .dieu-huong { flex: 1; }
  header.dau .dieu-huong a { flex: 1 1 0; min-width: 0; padding: 0 8px; }
}