/* ===== Theme 3D tối (kính mờ + đường hầm Three.js) - chỉ áp dụng cho trang khách: body.theme3d ===== */
body.theme3d{
  --bg:#060d1b; --card:rgba(12,24,44,.66); --card2:rgba(255,255,255,.06); --line:rgba(130,200,230,.17);
  --text:#e9f4fb; --muted:#8ea8bd;
  --brand:#5eead4; --brand-d:#0e8f9a; --brand-l:#b8fff3;
  --accent:#ff9ec9; --accent-d:#f472b6;
  --danger:#ff6b6b; --ok:#4ade80; --warn:#fbbf24;
  --shadow-sm:0 10px 30px -14px rgba(0,0,0,.65);
  --shadow-md:0 24px 50px -18px rgba(0,0,0,.75),0 0 0 1px rgba(94,234,212,.12);
  --paw:none;
  background-color:#060d1b;
  background-image:radial-gradient(1200px 700px at 50% -10%,rgba(40,90,140,.28),transparent 60%),
                   radial-gradient(900px 600px at 50% 115%,rgba(14,143,154,.16),transparent 60%);
  background-attachment:fixed;background-repeat:no-repeat;
  color-scheme:dark;
}
/* canvas đường hầm nằm sau mọi thứ */
#bg3d{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.bg3d-vignette{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 35%,rgba(3,8,18,.55) 100%)}
.bg3d-flash{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,#eafffb 0%,#7fe9ee 30%,#06223a 80%);transition:opacity .45s ease-in}
.bg3d-flash.on{opacity:1}
body.theme3d .topbar,body.theme3d main,body.theme3d .footer,body.theme3d .site-notice{position:relative;z-index:2}
body.theme3d .topbar{position:sticky;z-index:20}

/* topbar */
body.theme3d .topbar{background:rgba(8,16,32,.62);border-bottom:1px solid var(--line);box-shadow:0 10px 30px -18px #000}
body.theme3d .brand{color:var(--text)}
body.theme3d .brand .logo{color:var(--brand);filter:drop-shadow(0 0 8px rgba(94,234,212,.7))}
body.theme3d .nav a{color:#a9c0d2}
body.theme3d .nav a:hover{color:#fff}
body.theme3d .nav-wallet-balance{color:var(--text)}
body.theme3d .btn-ghost{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--text)}
body.theme3d .btn-ghost:hover{border-color:var(--brand);box-shadow:0 0 18px -4px rgba(94,234,212,.5)}
body.theme3d .nav-topup{background:linear-gradient(135deg,#b8fff3,#5eead4);color:#04202b;border-color:transparent}
body.theme3d .nav-topup:hover{color:#04202b}
body.theme3d .nav .admin-link{color:var(--warn)}
body.theme3d .site-notice{background:rgba(251,191,36,.12);color:#fcd677;border-bottom:1px solid rgba(251,191,36,.25)}

/* hero */
body.theme3d .hero{background:linear-gradient(135deg,rgba(14,32,58,.78),rgba(8,18,36,.62) 60%,rgba(60,22,60,.4));
  border-color:var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-md)}
body.theme3d .hero::before{background:radial-gradient(circle,rgba(94,234,212,.28),transparent 70%)}
body.theme3d .hero::after{background:radial-gradient(circle,rgba(244,114,182,.26),transparent 70%)}
body.theme3d .hero h1{background:linear-gradient(100deg,#fff 20%,#b8fff3 55%,#ff9ec9 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.025em;
  text-shadow:none;filter:drop-shadow(0 4px 24px rgba(94,234,212,.25))}
body.theme3d .hero-mascot::before{background:radial-gradient(ellipse,rgba(94,234,212,.35),transparent 70%)}

/* card / glass */
body.theme3d .card,body.theme3d .auth-card,body.theme3d .stat,body.theme3d .product-card{
  background:var(--card);border-color:var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.theme3d .product-card::before,body.theme3d .auth-card::before{background:linear-gradient(90deg,#5eead4,#60a5fa,#f472b6)}
body.theme3d .product-card:hover{box-shadow:0 26px 50px -18px rgba(0,0,0,.8),0 0 28px -6px rgba(94,234,212,.35)}
body.theme3d .product-card.tilt-ready:hover{box-shadow:0 26px 50px -18px rgba(0,0,0,.8),0 0 30px -6px rgba(94,234,212,.4)}
body.theme3d .product-card.tilt-ready::after{background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(130,235,255,.18),transparent 60%)}
body.theme3d .product-card .tag{background:rgba(94,234,212,.1);color:var(--brand);border-color:rgba(94,234,212,.28)}
body.theme3d .price{color:var(--brand);text-shadow:0 0 22px rgba(94,234,212,.35)}
body.theme3d .product-card h3{color:#fff}

/* nút */
body.theme3d .btn{color:#04202b;background:linear-gradient(135deg,#b8fff3,#5eead4 55%,#2dd4bf);
  box-shadow:0 10px 26px -10px rgba(94,234,212,.7),inset 0 1px 0 rgba(255,255,255,.55)}
body.theme3d .btn:hover{background:linear-gradient(135deg,#d6fff9,#7ff3e1 55%,#2dd4bf);
  box-shadow:0 14px 30px -10px rgba(94,234,212,.85),inset 0 1px 0 rgba(255,255,255,.6)}
body.theme3d .btn:disabled{background:rgba(255,255,255,.08);color:#6b8296;box-shadow:none}
body.theme3d .btn-sm{background:rgba(255,255,255,.06);color:var(--text);border-color:var(--line)}
body.theme3d .btn-sm:hover{border-color:var(--brand);color:var(--brand)}
body.theme3d .btn-sm.danger,body.theme3d .danger{color:#fff;background:#dc2626;border-color:#dc2626}
body.theme3d .btn-google{background:rgba(255,255,255,.95);color:#1f2937}
body.theme3d .tabs a{background:var(--card);color:var(--muted);border-color:var(--line)}
body.theme3d .tabs a.active,body.theme3d .profile-tabs .btn-ghost.active{background:linear-gradient(135deg,#b8fff3,#5eead4);color:#04202b;border-color:transparent}

/* form */
body.theme3d .form input,body.theme3d .form select,body.theme3d .form textarea,
body.theme3d .inline-form select{background:rgba(3,10,22,.7);color:var(--text);border-color:var(--line)}
body.theme3d .form input:focus,body.theme3d .form select:focus,body.theme3d .form textarea:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px rgba(94,234,212,.15)}
body.theme3d input::placeholder,body.theme3d textarea::placeholder{color:#5f788d}
body.theme3d input[type=file]{color:var(--muted)}

/* bảng, badge, flash */
body.theme3d .table th{color:var(--muted)}
body.theme3d .table code,body.theme3d .badge{background:rgba(255,255,255,.07);color:var(--muted)}
body.theme3d .badge-pending{background:rgba(251,191,36,.14);color:#fcd677}
body.theme3d .badge-approved{background:rgba(74,222,128,.14);color:#86efac}
body.theme3d .badge-rejected{background:rgba(255,107,107,.14);color:#fca5a5}
body.theme3d .flash-success{background:rgba(74,222,128,.12);color:#9af0b8;border-color:rgba(74,222,128,.3)}
body.theme3d .flash-error{background:rgba(255,107,107,.12);color:#ffb0b0;border-color:rgba(255,107,107,.3)}
body.theme3d .flash-info{background:rgba(96,165,250,.12);color:#a9cbfb;border-color:rgba(96,165,250,.3)}
body.theme3d .credential{background:rgba(3,10,22,.7);color:var(--brand);border-color:var(--line)}
body.theme3d .wallet-balance{background:linear-gradient(135deg,rgba(14,143,154,.85),rgba(30,64,120,.85));
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.2)}
body.theme3d .footer{border-top-color:var(--line);background:rgba(4,10,22,.45)}
body.theme3d a{color:var(--brand)}
body.theme3d .nav a,body.theme3d .brand,body.theme3d .btn,body.theme3d .btn-sm,body.theme3d .btn-ghost{color:inherit}
body.theme3d .nav a{color:#a9c0d2}
body.theme3d .nav a:hover{color:#fff}
body.theme3d .btn{color:#04202b}
body.theme3d .nav-topup,body.theme3d .nav-topup:hover{color:#04202b}
body.theme3d .btn-ghost,body.theme3d .btn-sm{color:var(--text)}
body.theme3d .profile-avatar img,body.theme3d .profile-avatar span{background:#0c1a2e}

/* hộp xác nhận mua (có bục hologram 3D) */
body.theme3d .confirm-overlay{background:rgba(2,8,18,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.theme3d .confirm-box{background:rgba(10,22,42,.88);border:1px solid var(--line);color:var(--text);
  box-shadow:0 30px 70px -20px #000,0 0 40px -10px rgba(94,234,212,.35)}
body.theme3d .confirm-box h3{color:#fff}
body.theme3d .confirm-box p strong{color:var(--brand)}
body.theme3d .confirm-yes{background:linear-gradient(135deg,#b8fff3,#5eead4);color:#04202b}
body.theme3d .confirm-no{background:rgba(255,255,255,.08);color:var(--text)}
body.theme3d .confirm-no:hover{background:rgba(255,255,255,.16)}
.holo-wrap{position:relative;width:100%;height:236px;margin:-34px 0 24px}
.holo-wrap canvas{width:100%;height:100%;display:block}
.holo-wrap .holo-hint{position:absolute;left:0;right:0;bottom:-20px;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);opacity:.8;pointer-events:none}
body.theme3d .confirm-modal-box{background:rgba(10,22,42,.92);color:var(--text);border:1px solid var(--line)}
body.theme3d .confirm-modal-msg{color:var(--text)}
body.theme3d .confirm-modal-icon{background:rgba(94,234,212,.12);color:var(--brand)}

/* chat / bot / call */
body.theme3d .chat-panel{background:rgba(9,19,36,.94);border-color:var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.theme3d .chat-panel-head{background:linear-gradient(135deg,#0e8f9a,#1e5aa8);color:#fff}
body.theme3d .chat-panel-head-bot{background:linear-gradient(135deg,#7c3aed,#4f46e5)}
body.theme3d .chat-panel-body{background:transparent;color:var(--text)}
body.theme3d .chat-panel-form{background:rgba(6,13,27,.9)}
body.theme3d .chat-panel-form input[type=text]{background:rgba(255,255,255,.07);color:var(--text);border-color:var(--line)}
body.theme3d .chat-send-btn{background:linear-gradient(135deg,#b8fff3,#5eead4);color:#04202b}
body.theme3d .chat-msg-me .chat-bubble{background:linear-gradient(135deg,#5eead4,#2dd4bf);color:#04202b}
body.theme3d .chat-msg-admin .chat-bubble{background:rgba(255,255,255,.08);color:var(--text);border-color:var(--line)}
body.theme3d .bot-chip{background:rgba(255,255,255,.06);color:var(--text);border-color:var(--line)}
body.theme3d .bot-chip:hover{background:rgba(124,58,237,.25)}
body.theme3d .support-fab-btn{box-shadow:0 8px 24px -6px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.1)}
body.theme3d .call-box{background:rgba(10,22,42,.95);border:1px solid var(--line);color:var(--text)}

@media(prefers-reduced-motion:reduce){.bg3d-flash{transition:none}}
body.theme3d .falling-cats{display:none}
body.theme3d .nav a.nav-topup,body.theme3d .nav a.nav-topup:hover{color:#04202b}
body.theme3d .nav a.admin-link{color:var(--warn)}

/* ---- Giảm độ "bự" của nền 3D + giữ nhân vật Live2D luôn nổi lên trên ---- */
#bg3d{opacity:.62}
.bg3d-vignette{background:radial-gradient(ellipse at 50% 45%,rgba(3,8,18,.15) 25%,rgba(3,8,18,.7) 100%)}
body.theme3d #waifu{z-index:30}