/* === FIX iPhone auto-zoom - Hằng 2026 === */
input, textarea {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100% !important;
}
html { -webkit-text-size-adjust: 100% !important; }
body { touch-action: manipulation; }
/* Giao diện miễn phí*/
:root{--p1: #faf9f6; --p2: #ffffff; --p3: #d4c3b3; --pink: #b89163; --p4: #967a58; --purple: #5c5246;
  --purple-dark: #2a241c; --dark: #2c2c2c; --text-main: #333333; --hot: #e63946;
  --glass-bg: rgba(255, 255, 255, 0.65); --glass-border: rgba(255, 255, 255, 0.4);
  --soft-shadow: 0 16px 40px rgba(184, 145, 99, 0.08); 
  --header-bg: rgba(212, 195, 179, 0.45);
  --glow: rgba(184, 145, 99, 0.4);}
/* Giao diện roy*/
body.theme-royal { --p1: #F9F2E8; --p2: #fde68a; --p3:palegoldenrod; --pink: #d97706; --p4: #b45309; --purple: #f59e0b; --purple-dark: #78350f; --header-bg: rgba(254, 243, 199, 0.85); --glow: rgba(217, 119, 6, 0.3); }
/* Giao diện ruby*/
body.theme-ruby { --p1: #FFF7F9; --p2: #fecdd3; --p3: #fda4af; --pink: #e11d48; --p4: #9f1239; --purple: #fb7185; --purple-dark: #4c0519; --header-bg: rgba(255, 228, 230, 0.85); --glow: rgba(225, 29, 72, 0.3); }
body.theme-dark { --p1: #111827; --p2: #1f2937; --p3: #4b5563; --pink: #a78bfa; --p4: #c084fc; --purple: #6b7280; --purple-dark: #f3f4f6; --dark: #f9fafb; --text-main: #e5e7eb; --glass-bg: rgba(31, 41, 55, 0.75); --header-bg: rgba(17, 24, 39, 0.85); --glow: rgba(167, 139, 250, 0.3); }
body.theme-pastel-pink { --p1: #fff0f5; --p2: #ffe4e1; --p3: #ffb6c1; --pink: #ff69b4; --p4: #ff1493; --purple: #db7093; --purple-dark: #c71585; --header-bg: rgba(255, 240, 245, 0.85); --glow: rgba(255, 105, 180, 0.3); }
body.theme-autumn { --p1: #fff8eb; --p2: #ffe4b5; --p3: #ffa500; --pink: #ff8c00; --p4: #d2691e; --purple: #8b4513; --purple-dark: #a0522d; --header-bg: rgba(255, 248, 235, 0.85); --glow: rgba(255, 140, 0, 0.3); }
body.theme-mint { --p1: #f0fff0; --p2: #e0ffff; --p3: #98fb98; --pink: #3cb371; --p4: #2e8b57; --purple: #20b2aa; --purple-dark: #008080; --header-bg: rgba(240, 255, 240, 0.85); --glow: rgba(60, 179, 113, 0.3); }
body.theme-sky { --p1: #f0f8ff; --p2: #e6e6fa; --p3: #add8e6; --pink: #4169e1; --p4: #0000ff; --purple: #4682b4; --purple-dark: #00008b; --header-bg: rgba(240, 248, 255, 0.85); --glow: rgba(65, 105, 225, 0.3); }
body.theme-coffee { --p1: #fdf5e6; --p2: #f5deb3; --p3: #deb887; --pink: #d2b48c; --p4: #8b4513; --purple: #a0522d; --purple-dark: #5c4033; --header-bg: rgba(253, 245, 230, 0.85); --glow: rgba(139, 69, 19, 0.3); }
body.theme-cute { --p1: #fffafa; --p2: #fffacd; --p3: #ffebcd; --pink: #ff7f50; --p4: #ff6347; --purple: #da70d6; --purple-dark: #c71585; --header-bg: rgba(255, 250, 250, 0.85); --glow: rgba(255, 127, 80, 0.3); }
body.theme-custom { --p1: #f5f5f5; --p2: #eeeeee; --p3: #cccccc; --pink: #888888; --p4: #555555; --purple: #333333; --purple-dark: #111111; --header-bg: rgba(245, 245, 245, 0.85); --glow: rgba(136, 136, 136, 0.3); }

/* === 5 GIAO DIỆN MIỄN PHÍ MỚI === */
body.theme-tho-nho { --p1: #fff5f8; --p2: #ffe4ec; --p3: #f9a8d4; --pink: #ec4899; --p4: #db2777; --purple: #9ca3af; --purple-dark: #831843; --header-bg: rgba(255, 245, 248, 0.85); --glow: rgba(236, 72, 153, 0.3); }
body.theme-dau-tay { --p1: #f0fdf4; --p2: #fef2f2; --p3: #86efac; --pink: #ef4444; --p4: #dc2626; --purple: #22c55e; --purple-dark: #14532d; --header-bg: rgba(240, 253, 244, 0.85); --glow: rgba(239, 68, 68, 0.3); }
body.theme-keo-mut { --p1: #eff6ff; --p2: #fef9c3; --p3: #93c5fd; --pink: #3b82f6; --p4: #f59e0b; --purple: #ef4444; --purple-dark: #1e3a8a; --header-bg: rgba(239, 246, 255, 0.85); --glow: rgba(59, 130, 246, 0.3); }
body.theme-mam-non { --p1: #f7fee7; --p2: #ecfccb; --p3: #bef264; --pink: #65a30d; --p4: #4d7c0f; --purple: #a3a380; --purple-dark: #365314; --header-bg: rgba(247, 254, 231, 0.85); --glow: rgba(101, 163, 13, 0.3); }
body.theme-tuli { --p1: #fdf2f8; --p2: #dcfce7; --p3: #f9a8d4; --pink: #be185d; --p4: #9d174d; --purple: #16a34a; --purple-dark: #831843; --header-bg: rgba(253, 242, 248, 0.85); --glow: rgba(190, 24, 93, 0.3); }

/* === 5 GIAO DIỆN MIỄN PHÍ MỚI 2026 - HẰNG === */
body.theme-facebook { --p1: #f0f2f5; --p2: #e4e6eb; --p3: #1877f2; --pink: #1877f2; --p4: #0a58ca; --purple: #4267b2; --purple-dark: #050505; --header-bg: rgba(240, 242, 245, 0.9); --glow: rgba(24, 119, 242, 0.25); }
body.theme-wb { --p1: #ffffff; --p2: #f5f5f5; --p3: #000000; --pink: #000000; --p4: #333333; --purple: #1a1a1a; --purple-dark: #000000; --header-bg: rgba(255, 255, 255, 0.9); --glow: rgba(0, 0, 0, 0.15); }
body.theme-quy-co { --p1: #fff1f5; --p2: #ffe4ec; --p3: #f43f5e; --pink: #e11d48; --p4: #be123c; --purple: #9f1239; --purple-dark: #881337; --header-bg: rgba(255, 241, 245, 0.88); --glow: rgba(225, 29, 72, 0.28); }
body.theme-heo-nho { --p1: #fff7f0; --p2: #ffe4cc; --p3: #d97706; --pink: #ec4899; --p4: #ea580c; --purple: #a16207; --purple-dark: #7c2d12; --header-bg: rgba(255, 247, 240, 0.88); --glow: rgba(236, 72, 153, 0.25); }
body.theme-bear { --p1: #faf8f5; --p2: #f0e6d8; --p3: #5c4033; --pink: #8b5e34; --p4: #3e2723; --purple: #6b4226; --purple-dark: #2d1b14; --header-bg: rgba(250, 248, 245, 0.88); --glow: rgba(92, 64, 51, 0.25); }

/* === 5 GIAO DIỆN MIỄN PHÍ MỚI - HẰNG THÊM 2026 === */
/* 1. 🍇 Nho - Tím đậm đà */
body.theme-nho { --p1: #f5f3ff; --p2: #ede9fe; --p3: #c4b5fd; --pink: #7c3aed; --p4: #6d28d9; --purple: #5b21b6; --purple-dark: #4c1d95; --header-bg: rgba(237, 233, 254, 0.88); --glow: rgba(124, 58, 237, 0.32); }
/* 2. 🪩 Mơ - Tím pastel mộng mơ ngọt ngào */
body.theme-mo { --p1: #fdf4ff; --p2: #fae8ff; --p3: #e9d5ff; --pink: #d8b4fe; --p4: #c084fc; --purple: #a855f7; --purple-dark: #7e22ce; --header-bg: rgba(250, 232, 255, 0.88); --glow: rgba(216, 180, 254, 0.35); }
/* 3. 🌻 HD - Hoa hướng dương (vàng, nâu, xanh lá) */
body.theme-hd { --p1: #fffbeb; --p2: #fef3c7; --p3: #fcd34d; --pink: #f59e0b; --p4: #d97706; --purple: #16a34a; --purple-dark: #14532d; --header-bg: rgba(254, 243, 199, 0.88); --glow: rgba(245, 158, 11, 0.32); }
/* 4. 🐝 Py - Đỏ và vàng đậm dễ nhìn */
body.theme-py { --p1: #fff7ed; --p2: #ffedd5; --p3: #fbbf24; --pink: #ef4444; --p4: #dc2626; --purple: #f59e0b; --purple-dark: #7f1d1d; --header-bg: rgba(255, 237, 213, 0.88); --glow: rgba(239, 68, 68, 0.3); }
/* 5. 🐺 Sói - Xám basic ưng mắt */
body.theme-soi { --p1: #f9fafb; --p2: #f3f4f6; --p3: #d1d5db; --pink: #9ca3af; --p4: #6b7280; --purple: #4b5563; --purple-dark: #1f2937; --dark: #111827; --text-main: #1f2937; --header-bg: rgba(243, 244, 246, 0.9); --glow: rgba(107, 114, 128, 0.25); }


/* --- THEME PREMIUM MỚI --- */
body.theme-glass-rain { --p1: #e0f2fe; --p2: #f3e8ff; --p3: #bae6fd; --pink: #6366f1; --p4: #3b82f6; --purple: #4f46e5; --purple-dark: #312e81; --header-bg: rgba(224, 242, 254, 0.6); --glow: rgba(99, 102, 241, 0.4); background: linear-gradient(135deg, var(--p1), var(--p2)) !important;}
body.theme-glass-rain header { position: relative; overflow: hidden; }
body.theme-glass-rain header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.8) 10%, transparent 10%) 0 0, radial-gradient(circle, rgba(255,255,255,0.8) 10%, transparent 10%) 15px 15px; background-size: 30px 30px; animation: rainDrop 3s linear infinite; opacity: 0.4; pointer-events: none;}
@keyframes rainDrop { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } }

body.theme-cat { --p1: #ffedd5; --p2: #fce7f3; --p3: #fdba74; --pink: #f97316; --p4: #ec4899; --purple: #f43f5e; --purple-dark: #7c2d12; --header-bg: rgba(255, 237, 213, 0.85); --glow: rgba(249, 115, 22, 0.4); background: linear-gradient(135deg, var(--p1), var(--p2)) !important; }
body.theme-cat header { position: relative; }
body.theme-cat header::after { content: '🐱'; position: absolute; top: -14px; right: 25px; font-size: 26px; animation: bounceCat 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1); pointer-events: none;}
@keyframes bounceCat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(10deg); } }

/* THEME SVIP (Được gán bg-image qua JS) */
body.theme-svip { --p1: #ffffff; --p2: #f3f4f6; --pink: #ec4899; --p4: #8b5cf6; --purple-dark: #111827; --glow: rgba(236, 72, 153, 0.4); --glass-bg: rgba(255,255,255,0.6); --header-bg: rgba(255,255,255,0.7); background-size: cover !important; background-position: center !important; background-attachment: fixed !important; }
body.theme-svip .app { backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }


/* TỐI ƯU HEADER LUXURY - CHỈ BO GÓC DƯỚI, MÀU ĐẬM HƠN */
header { 
   margin: 0 0 14px 0; /* Sát viền trên */
   border-radius: 0 0 30px 30px; /* Chỉ bo góc dưới */
   background: var(--p3); /* Đậm màu hơn nền 1 chút */
   backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); 
   /* Viền mờ phai theo màu theme */
   border-bottom: 1.5px solid var(--glow); 
   padding: 18px 16px 14px; 
      box-shadow: 0 12px 35px rgba(0,0,0,0.03), inset 0 -2px 10px rgba(255,255,255,0.4); 
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   animation: premiumShine 6s infinite alternate;
}
body.theme-dark header { 
   border-bottom: 1.5px solid var(--glow);
   box-shadow: 0 12px 35px rgba(0,0,0,0.2), inset 0 -2px 10px rgba(255,255,255,0.05); 
}
.head-container { display: flex; flex-direction: column; gap: 12px; }
.head-main{ display: flex; justify-content: space-between; align-items: center; }
.head-left-side{ display: flex; align-items: center; gap: 10px; }


/* === FIX LỖI HIỂN THỊ BỊ THU NHỎ - HANG 2026 === */
html, body {
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 100vh;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important; /* FIX: cho phép cuộn dọc */
  -webkit-overflow-scrolling: touch !important; /* FIX: mượt trên iOS */
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  transform: none !important;
  zoom: 1 !important;
  position: static !important;
}
body > * {
  max-width: 100% !important;
}
/* Đảm bảo không bị scale trong preview */
#app, main, .container, .wrapper {
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  transform: none !important;
}

/* === PAYMENT SWIPE LUXURY GOLD COMPACT === */
.pay-swipe{ position:relative; margin-top:10px; user-select:none; touch-action:pan-y; }
.pay-track{ display:flex; transition:transform .32s cubic-bezier(.2,.8,.2,1); }
.pay-slide{ min-width:100%; box-sizing:border-box; padding:0 1px; opacity:.6; transform:scale(.96); transition:all .3s; }
.pay-slide.active{ opacity:1; transform:scale(1); }
.pay-card{ display:flex; align-items:center; justify-content:space-between; background:linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,251,240,0.82)); border:1.2px solid var(--glow); border-radius:13px; padding:8px 10px; box-shadow:0 4px 12px rgba(184,145,99,0.1), inset 0 1px 0 rgba(255,255,255,0.5); backdrop-filter:blur(8px); min-height:48px; position:relative; }
.pay-card::after{ content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pink) 18%, transparent); pointer-events:none; }
.pay-slide.active .pay-card{ background:linear-gradient(135deg, var(--p1), var(--p2), var(--p3)); border-color:var(--pink); box-shadow:0 6px 16px var(--glow), inset 0 1px 0 rgba(255,255,255,0.7); }
.pay-slide.active .pay-card::after{ box-shadow:inset 0 0 0 1px var(--glow), inset 0 0 0 2px rgba(255,255,255,0.25); }
.pay-card .left{ display:flex; align-items:center; gap:8px; }
.pay-card .ico{ font-size:18px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #fff, #f5e9c9); border-radius:10px; box-shadow:inset 0 1px 2px rgba(0,0,0,0.04); }
.pay-slide.active .pay-card .ico{ background:linear-gradient(135deg, var(--p1), var(--p2)); }
.pay-card b{ font-weight:900; font-size:13px; color:#5c4a2e; display:block; line-height:1.1; }
.pay-slide.active .pay-card b{ color:var(--purple-dark); }
.pay-card small{ font-size:10px; font-weight:700; color:#9a8260; }
.pay-card .right{ text-align:right; }
.pay-card .right .tag{ font-size:9.5px; font-weight:800; padding:3px 7px; border-radius:7px; background:rgba(184,145,99,0.14); color:#a07b3e; }
.pay-slide.active .pay-card .right .tag{ background:rgba(122,92,31,0.18); color:var(--purple-dark); }
.pay-dots{ display:flex; justify-content:center; gap:5px; margin-top:6px; }
.pay-dots span{ width:5px; height:5px; border-radius:50%; background:#d6c4a8; transition:all .25s; }
.pay-dots span.active{ width:16px; border-radius:3px; background:linear-gradient(90deg, var(--pink), var(--p4)); }
.pay-swipe-hint{ position:absolute; right:6px; top:-18px; font-size:9px; font-weight:700; color:#a08a6b; opacity:.75; }
body.theme-dark .pay-card{ background:linear-gradient(180deg, rgba(55,65,81,0.88), rgba(31,41,55,0.75)); border-color:#4b5563; }
body.theme-dark .pay-slide.active .pay-card{ background:linear-gradient(135deg, #4a3f1f, #6b5a2a); border-color:#d4af37; }
body.theme-dark .pay-card b{ color:var(--p3) }

/* === MENU PILL GLASS PREMIUM V1 - HANG 2026 === */
.pill-glass{
  position: relative; display: grid; grid-template-columns: repeat(5,1fr);
  height: 56px; padding: 4px; border-radius: 24px; margin: 12px 16px;
  background: rgba(255,255,255,0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--p2);
  box-shadow: 0 4px 20px rgba(139,110,74,.10), inset 0 1px 0 rgba(255,255,255,.3);
}
body.theme-dark .pill-glass{ background: rgba(31,41,55,0.65); border-color: rgba(255,255,255,0.08); }
.pill-slider{
  position:absolute; top:4px; left:4px; height:48px;
  width: calc((100% - 8px)/5);
  background:linear-gradient(135deg, var(--p1), var(--p2), var(--p3)); border-color:var(--pink); box-shadow:0 6px 16px var(--glow), inset 0 1px 0 rgba(255,255,255,0.7);
  border-radius:20px;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.pill-glass button{
  position:relative; z-index:2; background:none; border:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-family:'Be Vietnam Pro',sans-serif; font-weight:700; font-size:11.5px; color:var(--pink);
  transition:.3s; cursor:pointer;
  opacity: 0.62;
}
.pill-glass button .ic{ font-size:16px; line-height:1; }
/* === MỜ ICON + CHỮ MENU KHI KHÔNG CHỌN === */
.pill-glass button .ic {
  opacity: 0.38;
  filter: blur(0.4px) saturate(0.65);
  transition: all 0.3s ease;
}
.pill-glass button.active .ic {
  opacity: 1;
  filter: blur(0) saturate(1);
}
.pill-glass button.active{ color:var(--pink); transform:scale(1.04); opacity:1; }
.pill-glass button .dot{
  position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--pink); opacity:0; transition:.3s;
  box-shadow:0 0 8px rgba(184,145,99,.6);
}
.pill-glass button.active .dot{ opacity:0.3; }
body.theme-dark .pill-glass button{ color:var(--p3); }
body.theme-dark .pill-glass button.active{ color:#fff; }

/* === NHIỆM VỤ GAMING STYLE 6.1 === */
.quest-section-title {
  font-size:14px; font-weight:900; color:var(--pink); 
  margin:18px 4px 10px; padding-left:8px; 
  border-left:4px solid var(--pink); text-transform:uppercase; letter-spacing:0.5px;
  display:flex; align-items:center; gap:6px;
}
.quest-item {
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
  border:1.5px solid var(--glass-border); border-radius:18px; padding:14px;
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
  box-shadow:0 6px 18px rgba(0,0,0,0.04); backdrop-filter:blur(12px);
  transition:all 0.25s ease; position:relative; overflow:hidden;
}
body.theme-dark .quest-item { background:linear-gradient(135deg, rgba(55,65,81,0.9), rgba(31,41,55,0.85)); border-color:#4b5563; }
.quest-item::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--pink), var(--p4)); opacity:0.8;
}
.quest-item:hover { transform:translateY(-2px); box-shadow:0 10px 24px var(--glow); border-color:var(--pink); }
.quest-item.completed { border-color:#10b981; background:linear-gradient(135deg, rgba(16,185,129,0.08), rgba(255,255,255,0.9)); }
.quest-item.completed::before { background:linear-gradient(180deg, #10b981, #059669); }
.quest-icon {
  width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:22px; background:linear-gradient(135deg, var(--p2), var(--p1)); 
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.05), 0 4px 10px var(--glow);
  flex-shrink:0;
}
.quest-info { flex:1; min-width:0; }
.quest-name { font-weight:800; font-size:13.5px; color:var(--purple-dark); margin-bottom:4px; }
body.theme-dark .quest-name { color:#fff; }
.quest-desc { font-size:11px; color:#6b7280; font-weight:600; }
.quest-progress-wrap { display:flex; align-items:center; gap:8px; margin-top:6px; }
.quest-progress { flex:1; height:8px; background:#e5e7eb; border-radius:8px; overflow:hidden; }
body.theme-dark .quest-progress { background:#4b5563; }
.quest-progress-bar { height:100%; background:linear-gradient(90deg, var(--pink), var(--p4)); border-radius:8px; transition:width 0.4s ease; box-shadow:0 0 8px var(--glow); }
.quest-progress-text { font-size:10px; font-weight:800; color:var(--pink); min-width:32px; text-align:right; }
.quest-claim-btn {
  background:linear-gradient(135deg, #10b981, #059669); color:#fff; border:none;
  padding:8px 14px; border-radius:12px; font-weight:900; font-size:11px; cursor:pointer;
  box-shadow:0 4px 12px rgba(16,185,129,0.3); transition:all 0.2s; flex-shrink:0;
}
.quest-claim-btn:active { transform:scale(0.94); }
.quest-claim-btn.claimed { background:#9ca3af; box-shadow:none; cursor:default; }

/* HIỆU ỨNG ĐỘNG SVIP */
.svip-effect-container { position: fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index: -1; overflow: hidden;}
.effect-item { position: absolute; }

@keyframes floatDown { 0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotate(360deg); opacity: 0; } }
@keyframes floatUp { 0% { transform: translateY(110vh) translateX(0px) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(-10vh) translateX(20px) rotate(360deg); opacity: 0; } }
@keyframes catRun { 0% { left: -50px; transform: scaleX(1); } 49% { left: 110vw; transform: scaleX(1); } 50% { left: 110vw; transform: scaleX(-1); } 100% { left: -50px; transform: scaleX(-1); } }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{ margin:0; padding:0; background: var(--p1) url('14978.jpg') center/cover fixed no-repeat; font-family: "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto; font-size: 13px; color: var(--text-main); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); overscroll-behavior:none}
.app{ max-width:420px; margin:0 auto; min-height:100vh; background: var(--glass-bg); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); box-shadow: 0 0 80px rgba(0, 0, 0, 0.1); position:relative; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: visible !important;}

/* TỐI ƯU HEADER LUXURY */
header{ 
   margin: 12px 16px; 
   border-radius: 28px; 
       background-color: color-mix(in srgb, var(--p3) 70%, transparent);
           backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); 
   border: 1.5px solid var(--glass-border); 
   padding: 12px 16px;
   box-shadow: 0 8px 32px rgba(0,0,0,0.06), inset 0 2px 10px rgba(255,255,255,0.6); 
   transition: all 0.3s ease;
}
   

.chude{display: flex; justify-content: space-between; align-items: center;
   margin: 12px 16px; 
   border-radius: 28px; 
       background-color: color-mix(in srgb, var(--p3) 40%, transparent);
           backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); 
   border: 1.5px solid var(--glass-border); 
   padding: 10px 12px; top: 12px;   box-shadow: 0 8px 32px rgba(0,0,0,0.06), inset 0 2px 10px rgba(255,255,255,0.6); 
   font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px;color:var(--purple);
}
body.theme-dark header { box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 2px 10px rgba(255,255,255,0.05); }
.head-container { display: flex; flex-direction: column; gap: 10px; }
.head-main{ display: flex; justify-content: space-between; align-items: center; }
.head-left-side{ display: flex; align-items: center; gap: 8px; }
.logo-ring{ width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--pink) 0%, var(--p4) 100%); display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 12px var(--glow); padding: 2px;}
.logo-avatar{ width: 100%; height: 100%; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid #fff; background-image: url('https://sf-static.upanhlaylink.com/img/image_202605309fd7a25c4deb2e4b6cf8201241ee0846.jpg');}
.shop-title-title{ font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; background: linear-gradient(135deg, var(--pink), var(--purple-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1;}
body.theme-dark .shop-title-title { background: linear-gradient(to right, var(--pink), #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.head-right-side{ display: flex; align-items: center; gap: 12px; }
.hamburger-menu{ display: flex; flex-direction: column; gap: 4px; cursor: pointer; padding: 6px; background: rgba(0,0,0,0.03); border-radius: 12px; transition: 0.2s;}
.hamburger-menu:active { transform: scale(0.9); }
body.theme-dark .hamburger-menu { background: rgba(255,255,255,0.1); }
.hamburger-line{ width: 18px; height: 3px; background-color: var(--purple-dark); border-radius: 4px; transition: 0.3s; }
body.theme-dark .hamburger-line { background-color: #fff; }

.head-actions-nav { display: flex; align-items: center; justify-content: space-between; border-top: 1.5px dashed rgba(184, 145, 99, 0.2); padding-top: 10px; }
body.theme-dark .head-actions-nav { border-top-color: rgba(255,255,255,0.1); }

.header-cart-btn { background: linear-gradient(135deg, var(--pink), var(--p4)); border: 1px solid rgba(255,255,255,0.4); color: #fff; padding: 6px 14px; border-radius: 20px; font-weight: 800; font-size: 11px; cursor: pointer; display: flex; align-items: center; gap: 6px; box-shadow: 0 6px 15px var(--glow), inset 0 2px 4px rgba(255,255,255,0.2); transition: 0.3s; text-transform: uppercase; letter-spacing: 0.5px;}
.header-cart-btn:active { transform: scale(0.95); box-shadow: 0 1px 4px var(--glow); }
#cart-badge{ background: #fff; color: var(--pink); min-width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 900; display: grid; place-items: center; padding: 0 4px; animation: bounceBadge 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

.login-btn-outline{ background: rgba(255,255,255,0.5); border: 1.5px solid var(--pink); color: var(--pink); padding: 6px 16px; border-radius: 20px; font-weight: 800; font-size: 11px; cursor: pointer; transition: 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.02);}
.login-btn-outline:hover { background: var(--pink); color: #fff; box-shadow: 0 6px 15px var(--glow); }

#user-logged-in{ display: flex; align-items: center; gap: 8px; }
.user-status-card { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.6); padding: 4px 10px 4px 4px; border-radius: 30px; border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 4px 10px rgba(0,0,0,0.03); backdrop-filter: blur(10px);}
body.theme-dark .user-status-card { background: rgba(31,41,55,0.6); border-color: #4b5563; }
.user-status-card #user-avatar{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--pink);object-fit:cover; background: #fff; box-shadow: 0 2px 6px var(--glow);}
.user-status-card .user-info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.user-status-card .user-info b{font-size:11px;color:var(--purple-dark);max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block; line-height: 1.2; margin-bottom: 2px;}
body.theme-dark .user-status-card .user-info b { color: #fff; }

.wallet-badge-tech {
   display: inline-flex; align-items: center; gap: 4px;
   background: rgba(255, 255, 255, 0.9);
   padding: 2px 6px; border-radius: 12px;
   box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.05);
   font-size: 10.5px; font-weight: 900; color: var(--pink);
   border: 1px solid rgba(184, 145, 99, 0.2);
}
body.theme-dark .wallet-badge-tech { background: #374151; border-color: #4b5563; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }

.logout-btn{ background: rgba(244, 63, 94, 0.1); border: none; color: var(--hot); padding: 8px 12px; border-radius: 14px; font-size: 10px; font-weight: 900; cursor: pointer; transition: 0.2s; text-transform: uppercase; }
.logout-btn:active { transform: scale(0.9); background: var(--hot); color: #fff;}

#admin-badge {
    position: absolute; top: -6px; right: -6px; background: #e63946; color: white;
    font-size: 9px; font-weight: 900; padding: 2px 6px; border-radius: 10px;
    box-shadow: 0 2px 8px rgba(230, 57, 70, 0.5); border: 1.5px solid #fff; display: none;
}

.pay-method-container {
    background: rgba(255, 255, 255, 0.8); border: 1.5px solid var(--glass-border); padding: 12px 16px;
    border-radius: 24px; margin: 0 16px 12px; display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04); backdrop-filter: blur(10px);
}
body.theme-dark .pay-method-container { background: rgba(31, 41, 55, 0.8); border-color: #4b5563; }
.pay-method-container label { font-weight: 800; color: var(--purple-dark); font-size: 13px; display: flex; align-items: center; gap: 6px; }

                  

.elegant-select {padding: 8px 12px; border-radius: 16px;
    width: 140px; border: 1px solid var(--glass-border); background-color: color-mix(in srgb, #fff 60%, transparent);
    font-weight: 800; color:var(--p3); outline: none; margin-top: 0; font-size: 12px; cursor: pointer;backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); transition: all 0.3s ease;
}
.elegant-select:focus { border-color: var(--pink); box-shadow: 0 0 0 3px var(--glow);color: var(--p4);opacity:0,4;background-color: color-mix(in srgb, var(--p2) 80%, transparent);
}
body.theme-dark .elegant-select { background: #1f2937; color: #fff; border-color: #4b5563; }

/* SIDEBAR CONFIG */
.config-sidebar { position: fixed; top: 0; right: 0; width: 280px; height: 100%; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(30px); z-index: 1500; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.4s; visibility: hidden; box-shadow: -12px 0 40px rgba(0,0,0,0.1); padding: 20px; display: flex; flex-direction: column; gap: 18px; border-left: 1px solid rgba(255,255,255,0.5); overflow-y:auto; }
body.theme-dark .config-sidebar { background: rgba(31, 41, 55, 0.96); color: #fff; border-color: rgba(255,255,255,0.05); }
.config-sidebar.open { transform: translateX(0); visibility: visible; }
.config-title-bar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1.5px dashed rgba(0,0,0,0.08); padding-bottom: 12px; }
.config-title-bar h4 { margin: 0; font-size: 14px; font-weight: 800; color: var(--purple-dark); }
.close-sidebar-btn { background: rgba(0,0,0,0.04); border: none; font-size: 14px; cursor: pointer; color: var(--dark); width: 28px; height: 28px; border-radius: 50%; font-weight: bold; display: flex; align-items: center; justify-content: center; transition: 0.2s;}
.close-sidebar-btn:active { transform: scale(0.9); }
body.theme-dark .close-sidebar-btn { background: rgba(255,255,255,0.1); color: #fff; }

.menu-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.menu-card { background-color: color-mix(in srgb, var(--p2) 30%, transparent);
; border: 1.5px solid #e5e7eb; border-radius: 20px; padding: 12px; text-align: center; font-weight: 800; color: var(--purple-dark); cursor: pointer; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.02); display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; font-size: 11px;}
body.theme-dark .menu-card { background: rgba(31,41,55,0.8); border-color: #4b5563; color: #fff;}
.menu-card:active { transform: scale(0.95); box-shadow: 0 2px 8px var(--glow); border-color: var(--pink); color: var(--pink); }
.menu-card span { font-size: 22px; }

.theme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.theme-pill { padding: 6px 4px; border-radius: 12px; font-weight: 700; font-size: 9px; cursor: pointer; display: flex; flex-direction:column; align-items: center; gap: 3px; transition: 0.2s; background-color: color-mix(in srgb, var(--p2) 30%, transparent);
           backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); 
   border: 1.5px solid var(--glass-border); 
     box-shadow: 0 8px 32px rgba(0,0,0,0.06), inset 0 2px 10px rgba(255,255,255,0.6); 
; color: var(--text-main); position: relative; text-align:center; min-height:52px; justify-content:center;}
body.theme-dark .theme-pill { background: #374151; border-color: #4b5563; color: #fff;}
.theme-pill:hover { transform: translateY(-2px); }
.theme-pill.active { border: 1px solid dashed var(--p3); background: linear-gradient(135deg, rgba(184, 145, 99, 0.05), #fff); font-weight: 800;box-shadow: 0 6px 15px var(--glow); color: var(--p3); }
.theme-pill span { font-size: 16px; line-height:1; }
.theme-pill.premium-theme::after { content: '🔒'; position: absolute; top: 2px; right: 2px; font-size: 8px; background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 2px;}
.theme-pill.premium-theme.unlocked::after { content: '⭐'; }

.tabs{display:flex; gap:8px; margin: 0 16px 12px; padding:6px; background: rgba(255,255,255,0.4); border-radius: 24px; position:sticky; top: 80px; z-index:30; overflow-x:auto; scrollbar-width:none; border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 4px 15px rgba(0,0,0,0.03); backdrop-filter: blur(10px);}
body.theme-dark .tabs { background: rgba(31,41,55,0.5); border-color: #4b5563; }
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative; flex:1; padding:10px 12px; border: 1px solid transparent; border-radius:18px; background: transparent; color: #71717a; font-weight:800; font-size:12px; cursor:pointer; white-space:nowrap; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-align:center;}
.tab.active{ background: rgba(255,255,255,0.85); color: var(--pink); box-shadow:  0 2px 6px var(--glow); border-color: var(--pink); transform: translateY(-2px); backdrop-filter: blur(15px) saturate(180%); -webkit-backdrop-filter: blur(15px) saturate(180%); border-color: rgba(255,255,255,0.9); }
body.theme-dark .tab.active { background: rgba(184, 145, 99, 0.8); color: #fff; border-color: rgba(184, 145, 99, 0.4); }
.badge-new { position: absolute; top: -4px; right: -4px; background: var(--hot); color: #fff; font-size: 9px; padding: 2px 6px; border-radius: 10px; font-weight: 900; display: none; border: 1.5px solid #fff; box-shadow: 0 2px 6px rgba(230,57,70,0.4); }

main { flex: 1; padding-bottom: 24px; }

.products{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; padding:0 16px 16px}
.product-card{ border-radius:10px; padding:12px 6px; text-align:center; box-shadow: 0 4px 12px rgba(0,0,0,0.04); transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.85)) padding-box, linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.3)) border-box; border: 1.5px solid var(--glass-border); backdrop-filter: blur(20px); position: relative;cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center;}
body.theme-dark .product-card { background: linear-gradient(rgba(55, 65, 81, 0.95), rgba(55, 65, 81, 0.85)) padding-box, linear-gradient(135deg, #4b5563, #1f2937) border-box; border-color: #4b5563;}
.product-card:active { transform: scale(0.92) translateY(2px); box-shadow: 0 2px 6px var(--glow); border-color: var(--pink); filter: saturate(1.2); }
.product-zem{font-size:13px; font-weight:600; color:var(--pink); line-height:1; text-shadow: 0 2px 6px var(--glow); display:flex; justify-content:center; align-items:center; gap:4px; margin-bottom: 4px;}
.product-zem img { width: 14px; }
.product-prices{margin-top:6px; font-size:10px; color: #52525b; font-weight: 800;}
body.theme-dark .product-prices { color: #d1d5db; }
.sale-badge { position: absolute; top: -4px; right: -4px; background: linear-gradient(135deg, #ef4444, #e11d48); color: #fff; font-size: 8px; font-weight: 900; padding: 2px 4px; border-radius: 8px; box-shadow: 0 4px 10px rgba(225,29,72,0.4); z-index: 5; border: 1px solid #fff; }
.old-price { text-decoration: line-through; color: #9ca3af; font-size: 9px; margin-right: 4px; font-weight: 700; }

.gaming-input-wrapper { background: linear-gradient(135deg, #1f2937, #111827); padding: 18px; border-radius: 20px; border: 2px solid var(--pink); box-shadow: 0 0 15px var(--glow); color: #fff; margin-top: 15px; text-align: left; }
.gaming-input-wrapper label { font-weight: 900; color: #a78bfa; font-size: 13px; margin-bottom: 10px; display: block; text-transform: uppercase; letter-spacing: 1px; text-align: center; }
.gaming-input-wrapper input { background: #374151 !important; border: 1px solid #4b5563 !important; color: #fff !important; border-radius: 12px; margin-top: 0; padding: 14px; text-align: center; font-size: 14px; font-weight: 900; box-shadow: inset 0 2px 6px rgba(0,0,0,0.5); width: 100%; box-sizing: border-box; }
.gaming-input-wrapper input::placeholder { color: #9ca3af; font-weight: 600; }
.gaming-input-wrapper input:focus { border-color: #a78bfa !important; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.3) !important; background: #1f2937 !important;}
body:not(.theme-dark) .gaming-input-wrapper { background: linear-gradient(135deg, #f9fafb, #f3f4f6); color: var(--dark); border-color: var(--pink); }
body:not(.theme-dark) .gaming-input-wrapper input { background: #fff !important; border-color: #e5e7eb !important; color: var(--dark) !important; }
body:not(.theme-dark) .gaming-input-wrapper label { color: var(--pink); }

.profile-box { margin: 0 16px; background: rgba(255,255,255,0.9); border: 1.5px solid var(--glass-border); border-radius: 28px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.04); backdrop-filter: blur(20px);}
body.theme-dark .profile-box { background: rgba(55, 65, 81, 0.9); border-color: #4b5563; }
.profile-card { display:flex; gap:15px; align-items:center; padding-bottom:15px; border-bottom:1.5px dashed rgba(0,0,0,0.08); margin-bottom:15px;}
body.theme-dark .profile-card { border-bottom-color: rgba(255,255,255,0.1); }
.profile-avatar { width:65px; height:65px; border-radius:50%; border:3px solid var(--pink); box-shadow:0 6px 15px var(--glow); object-fit:cover; padding: 2px; background: #fff;}
.profile-info h2 { margin:0 0 5px 0; font-size:18px; color:var(--purple-dark); font-weight:900; display: inline-block; letter-spacing: -0.5px;}
body.theme-dark .profile-info h2 { color: #fff; }
.coin-badge { background:linear-gradient(135deg, #fbbf24, #f59e0b); color:#fff; padding:6px 12px; border-radius:14px; font-weight:900; font-size:12px; box-shadow:0 4px 12px rgba(245, 158, 11, 0.4); display:inline-block; border: 1.5px solid rgba(255,255,255,0.5);}

.chat-container { height: 250px; background: #f9fafb; border-radius: 20px; border:1px solid #e5e7eb; display:flex; flex-direction:column; overflow:hidden; }
body.theme-dark .chat-container { background: #374151; border-color:#4b5563; }
.chat-messages { flex:1; padding:15px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.chat-msg { max-width:80%; padding:10px 14px; border-radius:18px; font-size:13px; line-height:1.4; position:relative; font-weight: 500;}
.chat-msg.mine { align-self:flex-end; background: linear-gradient(135deg, var(--pink), var(--p4)); color:#fff; border-bottom-right-radius:4px; box-shadow: 0 4px 10px var(--glow);}
.chat-msg.theirs { align-self:flex-start; background:#fff; border:1px solid #e5e7eb; color:var(--dark); border-bottom-left-radius:4px; box-shadow: 0 2px 6px rgba(0,0,0,0.02);}
body.theme-dark .chat-msg.theirs { background:#1f2937; color:#fff; border-color:#4b5563;}
.chat-input-area { display:flex; padding:10px; background:#fff; border-top:1px solid #e5e7eb; gap:8px;}
body.theme-dark .chat-input-area { background:#1f2937; border-color:#4b5563;}
.chat-input-area input { margin:0; padding:10px 15px; border-radius:20px; flex:1; border:1px solid #ccc; outline:none; background: #f9fafb;}
.chat-send-btn { background: linear-gradient(135deg, var(--pink), var(--p4)); color:#fff; border:none; border-radius:20px; padding:0 18px; font-weight:800; cursor:pointer; box-shadow: 0 4px 10px var(--glow);}

.cart-box{ margin: 0 16px; background: rgba(255, 255, 255, 0.9); border: 1.5px solid var(--glass-border); border-radius:28px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); backdrop-filter: blur(20px); }
body.theme-dark .cart-box { background: rgba(31,41,55,0.9); border-color: #4b5563; }
.cart-box h3 { margin-top: 0; font-size: 16px; color: var(--purple-dark); font-weight: 900; border-bottom: 1.5px dashed #e5e7eb; padding-bottom: 12px; margin-bottom: 14px;}
.cart-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: #fff; border-radius: 20px; margin-bottom: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.02); border: 1px solid #f3f4f6; }
body.theme-dark .cart-item { background: #1f2937; border-color: #374151; }
.cart-qty { display: flex; align-items: center; gap: 8px; background: #f9fafb; padding: 4px; border-radius: 14px; border: 1px solid #e5e7eb; }
body.theme-dark .cart-qty { background: #374151; border-color: #4b5563;}
.qty-btn { width: 26px; height: 26px; border-radius: 10px; border: none; background: #e5e7eb; font-weight: 900; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--purple-dark); transition: 0.2s;}
.qty-btn:active { transform: scale(0.9); background: #d1d5db; }
body.theme-dark .qty-btn { background: #4b5563; color: #fff;}
.cart-remove{background:rgba(244, 63, 94, 0.1); border:0; color:var(--hot); width:28px; height:28px; border-radius:10px; font-size:14px; cursor:pointer; font-weight:900; display:flex; align-items:center; justify-content:center; transition: 0.2s;}
.cart-remove:active { transform: scale(0.9); background: var(--hot); color: #fff; }

input,select,textarea{width:100%; margin-top:10px; padding:14px; border:1.5px solid #e4e4e7; border-radius:20px; font-family:"Quicksand"; font-size:13px; font-weight: 600; background:rgba(255,255,255,0.8); outline:none; transition:all 0.25s; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); box-sizing: border-box;}
body.theme-dark input, body.theme-dark select, body.theme-dark textarea { background: rgba(55,65,81,0.8); border-color: #4b5563; color: #fff; }
input:focus,select:focus,textarea:focus{border-color:var(--pink); box-shadow:0 0 0 4px var(--glow), inset 0 1px 2px rgba(0,0,0,0.05); background: #fff;}
body.theme-dark input:focus, body.theme-dark select:focus, body.theme-dark textarea:focus { background: #1f2937; }

.total-row{display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:16px; border-top:1.5px dashed #e4e4e7; font-size:14px; font-weight:800}
body.theme-dark .total-row { border-top-color: #4b5563; }
#total-amount{color:var(--pink); font-size:22px; font-weight:900; letter-spacing: -0.5px; text-shadow: 0 2px 6px var(--glow);}
.checkout-btn{width:100%; margin-top:18px; padding:16px; border:0; border-radius:24px; background: linear-gradient(135deg, var(--pink), var(--p4)); color:#fff; font-weight:900; font-size:14px; box-shadow:0 8px 24px var(--glow); cursor:pointer; transition:all 0.3s; text-transform: uppercase; letter-spacing: 1px;}
.checkout-btn:active { transform: scale(0.98); box-shadow:0 4px 12px var(--glow); }

/* --- CẢI TIẾN LỊCH SỬ ĐƠN HÀNG GỌN GÀNG, HIỆN ĐẠI TƯƠNG LAI --- */
.history-box { margin: 0 8px; background: rgba(255,255,255,0.45); border: 1.5px solid rgba(255,255,255,0.5); border-radius:24px; padding:10px; box-shadow: 0 8px 25px rgba(0,0,0,0.02); backdrop-filter: blur(50px); }
body.theme-dark .history-box { background: rgba(31, 41, 55, 0.4); border-color: rgba(255,255,255,0.05); }

.order-item {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px; padding: 12px; margin-bottom: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
    position: relative; overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center;border-bottom:1px dashed var(--pink);

}
body.theme-dark .order-item { background: rgba(31, 41, 55, 0.45); border-color: rgba(255,255,255,0.05); }

.order-item::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--pink), var(--p3));
    border-radius: 4px 0 0 4px;border-bottom:1px dashed var(--pink);
}
.order-item:hover, .order-item:active {
    transform: translateY(-1px); box-shadow: 0 6px 15px var(--glow);border-bottom:1px solid var(--pink);

}

.order-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed rgba(0,0,0,0.05); padding-bottom: 6px; margin-bottom: 2px; }
body.theme-dark .order-top { border-bottom-color: rgba(255,255,255,0.08); }

.order-code-tech { font-family: monospace; font-weight: 800; color: var(--pink); font-size: 11px; }
.order-date-tech { font-size: 9px; color: #8b5cf6; font-weight: 800; }
.order-total-tech { font-weight: 600; font-size: 13px; color: var(--pink); }

.order-action-btns { display: flex; gap: 6px; width: 100%; margin-top: 4px;}
.btn-mini { flex: 1; padding: 8px; border-radius: 10px; border: none; font-weight: 800; font-size: 11px; cursor: pointer; transition: all 0.2s ease; display: flex; justify-content: center; align-items: center; gap: 4px; }
.btn-success { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2); }
.btn-danger { background: linear-gradient(135deg, #ef4444, #e11d48); color: #fff; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2); }
.btn-mini:active { transform: scale(0.93); }

/* TỐI ƯU GIAO DIỆN NẠP ZEM GIFT */
.gift-note-modern { background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.7)); border: 1.5px solid var(--glass-border); border-radius: 24px; padding: 16px; margin: 0 16px; box-shadow: 0 8px 20px rgba(0,0,0,0.04); text-align: center; backdrop-filter: blur(10px);}
body.theme-dark .gift-note-modern { background: linear-gradient(135deg, rgba(31,41,55,0.95), rgba(31,41,55,0.7)); border-color: #4b5563; }
.w-card-box { margin: 0 16px; background: rgba(255,255,255,0.9); padding: 16px; border-radius: 24px; border: 1.5px solid var(--glass-border); box-shadow: 0 8px 20px rgba(0,0,0,0.03); backdrop-filter: blur(10px);}
body.theme-dark .w-card-box { background: rgba(31,41,55,0.9); border-color: #4b5563;}
.upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; width: 100%; margin-top: 5px; }
.btn-upload-custom { border: 1.5px dashed var(--pink); color: var(--pink); background-color: rgba(184, 145, 99, 0.03); padding: 12px; border-radius: 16px; font-size: 12px; font-weight: 700; width: 100%; display: flex; justify-content: center; gap: 8px; cursor: pointer; transition: 0.3s;}
.btn-upload-custom:active { background-color: rgba(184, 145, 99, 0.1); transform: scale(0.98);}
.upload-btn-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; }
.preview-images-container { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0; scrollbar-width: none;}
.preview-images-container::-webkit-scrollbar { display: none; }
.preview-image-item { position: relative; min-width: 85px; height: 85px; border-radius: 16px; border: 1.5px solid #e5e7eb; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05);}
.preview-image-item img { width: 100%; height: 100%; object-fit: cover; }
.preview-image-item .btn-remove-img { position: absolute; top: 6px; right: 6px; background: rgba(230, 57, 70, 0.9); color: #fff; border: none; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.2);}

.admin{position:fixed; top:0; right:0; width:100%; max-width:420px; height:100%; background:#f9fafb; z-index:550; transform:translateX(105%); transition: transform .4s cubic-bezier(0.25, 0.8, 0.25, 1), visibility .4s; visibility: hidden; display:flex; flex-direction:column}
body.theme-dark .admin { background: #111827; }
.admin.open{transform:translateX(0); visibility: visible;}
.admin-head{display:flex; justify-content:space-between; align-items:center; padding:20px 16px; background: linear-gradient(135deg, var(--pink), var(--p4)); color:#fff; font-weight:900; font-size: 16px; border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; box-shadow: 0 4px 15px var(--glow);}
.admin-head button{background:rgba(255,255,255,.2); border:0; color:#fff; width:36px; height:36px; border-radius:12px; font-size:16px; font-weight: bold; cursor:pointer; transition: 0.2s;}
.admin-head button:active { transform: scale(0.9); background: rgba(255,255,255,0.3); }
.admin-tabs{display:flex; gap:8px; padding:16px; background: #f9fafb; border-bottom:1px solid #e5e7eb}
body.theme-dark .admin-tabs { background: #111827; border-color: #374151; }
.admin-tabs button{flex:1; padding:12px; border:0; border-radius:16px; background:#fff; font-weight:800; color:#71717a; cursor:pointer; font-size:11px; box-shadow: 0 2px 6px rgba(0,0,0,0.02); transition: 0.3s;}
body.theme-dark .admin-tabs button { background: #1f2937; color: #9ca3af; }
.admin-tabs button.active{background:var(--pink); color:#fff; box-shadow: 0 6px 15px var(--glow); transform: translateY(-2px);}
.atab{flex:1; overflow:auto; padding:0; background: #f9fafb;}
body.theme-dark .atab { background: #111827; }
.atab-inner { padding: 16px; }
.admin-search-bar { padding: 16px; background: #fff; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 10; border-radius: 0 0 20px 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.02);}
body.theme-dark .admin-search-bar { background: #1f2937; border-color: #374151; }
.atab table{width:100%; border-collapse:separate; border-spacing: 0; font-size:12px; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.03);}
body.theme-dark .atab table { background: #1f2937; }
.atab th{background:#f3f4f6; color:#374151; padding:14px 12px; text-align:left; font-weight:900; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px;}
body.theme-dark .atab th { background: #374151; color: #d1d5db; }
.atab td{padding:14px 12px; border-bottom:1px solid #f3f4f6; vertical-align:middle;}
body.theme-dark .atab td { border-bottom-color: #374151; }
.atab button{padding:6px 12px; border:0; border-radius:10px; background:var(--p3); color:#fff; font-weight:800; margin-right:4px; cursor:pointer; font-size:11px; transition: 0.2s;}
.atab button:active { transform: scale(0.95); }
.atab button.btn-reject, .atab button.minus { background: var(--hot); }
.atab button.btn-ban { background: #000; color:#fff; }

.modal{position:fixed; inset:0; background:rgba(17, 24, 39, 0.75); display:none; align-items:center; justify-content:center; z-index:2000; padding:20px; backdrop-filter:blur(10px); -webkit-backdrop-filter: blur(10px);}
.modal.show{display:flex}
.modal-card{background:#fff; border-radius:32px; padding:30px; text-align:center; max-width:340px; width:100%; box-shadow:0 25px 70px rgba(0,0,0,0.2); animation:pop .4s cubic-bezier(0.175, 0.885, 0.32, 1.275)}
body.theme-dark .modal-card { background: #1f2937; color: #fff; }
.modal-card h3{margin:0 0 16px; color:var(--dark); font-size:18px; font-weight: 900;}
body.theme-dark .modal-card h3 { color: #fff; }
#qr-img{width:200px; height:200px; border-radius:24px; border:1.5px solid #e5e7eb; padding:10px; margin:0 auto; box-shadow: 0 8px 20px rgba(0,0,0,0.05);}
#qr-info{margin:16px 0; font-weight:700; color:#4b5563; background:#f9fafb; padding:16px; border-radius:20px; font-size:13px}
body.theme-dark #qr-info { background: #374151; color: #d1d5db; }
.countdown{margin:10px 0 18px; font-weight:900; color:var(--hot); font-size: 15px;}
#qr-close{width:100%; padding:16px; border:0; border-radius:20px; background:#f3f4f6; color: var(--purple-dark); font-weight:900; font-size: 14px; cursor:pointer; transition: 0.2s;}
#qr-close:active { transform: scale(0.98); background: #e5e7eb; }
body.theme-dark #qr-close { background: #4b5563; color: #fff; }

.success{position:fixed; inset:0; background:rgba(255,255,255,0.7); display:none; align-items:center; justify-content:center; z-index:900; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.success.show{display:flex}
.success-card{ background: rgba(255, 255, 255, 0.95); padding: 40px 30px; border-radius: 36px; text-align: center; max-width: 300px; box-shadow: 0 30px 60px rgba(0,0,0,0.12); border: 1.5px solid var(--glass-border); animation: pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
body.theme-dark .success-card { background: rgba(31, 41, 55, 0.95); border-color: #4b5563; }
.success-icon-wrap { width: 70px; height: 70px; background: linear-gradient(135deg, #10b981, #059669); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4); color: #fff; font-size: 34px; font-weight: 900; border: 3px solid #fff; }
.success-card h3 { margin: 0 0 10px; color: #059669; font-size: 24px; font-weight: 900; letter-spacing: -0.5px; }
.success-card p { margin: 0; color: #6b7280; font-size: 13.5px; font-weight: 700; line-height: 1.5; }
body.theme-dark .success-card p { color: #9ca3af; }
@keyframes pop{0%{transform:scale(.7) translateY(20px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}

#floating-chat-btn { position:fixed; bottom:24px; right:24px; width:58px; height:58px; background:linear-gradient(135deg, var(--pink, #ff758c), #ff7eb3); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 10px 30px rgba(184, 145, 99, 0.5); z-index:9998; cursor:pointer; border: 3px solid #fff; transition: transform 0.2s, box-shadow 0.2s; animation: pulseChat 2s infinite;}
#floating-chat-btn:active { transform: scale(0.9); animation: none;}
@keyframes pulseChat { 0% { box-shadow: 0 0 0 0 rgba(184, 145, 99, 0.5); } 70% { box-shadow: 0 0 0 15px rgba(184, 145, 99, 0); } 100% { box-shadow: 0 0 0 0 rgba(184, 145, 99, 0); } }
#floating-chat-window { position:fixed; top:70px; right:16px; width:340px; max-width: calc(100% - 48px); height:450px; background:#fff; border-radius:28px; box-shadow:0 20px 50px rgba(0,0,0,0.25); z-index:9999; flex-direction:column; overflow:hidden; border: 1.5px solid var(--glass-border); display:none; }
body.theme-dark #floating-chat-window { background: #1f2937; border-color: #4b5563; }

.topup-methods-tabs { display: flex; gap: 6px; margin-bottom: 12px; background: rgba(0,0,0,0.04); padding: 4px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.02); }
body.theme-dark .topup-methods-tabs { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.05); }
.topup-tab { flex: 1; padding: 8px; border: none; border-radius: 12px; background: transparent; font-weight: 800; color: #71717a; font-size: 11.5px; cursor: pointer; transition: 0.3s; }
.topup-tab.active { background: #fff; color: var(--pink); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
body.theme-dark .topup-tab { color: #9ca3af; }
body.theme-dark .topup-tab.active { background: #374151; color: #fff; }

.topup-methods-tabs { display: flex; gap: 6px; margin-bottom: 12px; background: rgba(0,0,0,0.04); padding: 4px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.02); }
body.theme-dark .topup-methods-tabs { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.05); }
.topup-tab { flex: 1; padding: 8px; border: none; border-radius: 12px; background: transparent; font-weight: 800; color: #71717a; font-size: 11.5px; cursor: pointer; transition: 0.3s; }
.topup-tab.active { background: #fff; color: var(--pink); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
body.theme-dark .topup-tab { color: #9ca3af; }
body.theme-dark .topup-tab.active { background: #374151; color: #fff; }

.pricing-table-wrapper { overflow-x: auto; border-radius: 16px; border: 1.5px solid var(--glass-border); box-shadow: inset 0 2px 10px rgba(0,0,0,0.02); background: rgba(255,255,255,0.5); }
body.theme-dark .pricing-table-wrapper { border-color: #4b5563; background: rgba(31,41,55,0.5); }
.elegant-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: center; }
.elegant-table th { padding: 10px 4px; background: rgba(0,0,0,0.03); color: var(--purple-dark); border-bottom: 1.5px solid var(--glass-border); font-weight: 500; }
.elegant-table td { padding: 10px 4px; border-bottom: 1px dashed rgba(0,0,0,0.05); font-weight: 500; color: var(--dark); }
body.theme-dark .elegant-table th { background: rgba(0,0,0,0.2); color: #fff; border-bottom-color: #4b5563; }
body.theme-dark .elegant-table td { border-bottom-color: rgba(255,255,255,0.05); color: #d1d5db; }

 /* CSS cho Thông báo Loa Loa */
    
 /* CSS cho Thông báo Loa Loa */
    @keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-150%); } }
    @keyframes floatPopup { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } }
    
    .glass-popup {
        position: fixed; top: 10px; right: 25px; width: calc(100% - 32px); max-width: 300px; z-index: 1000;
        background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 20px;
        padding: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
        animation: floatPopup 4s ease-in-out infinite; display: none;
        flex-direction: column; gap: 8px;
    }
    
    .glass-popup-close {
        position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.05); border: none;
        border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-weight: 900;
        display: flex; align-items: center; justify-content: center; color: var(--pink); transition: 0.2s;
    }
    .glass-popup-close:hover { background: rgba(244, 63, 94, 0.1); color: var(--hot); }

/* HAMBURGER CUTE */
.hamburger-menu { display: flex; flex-direction: column; gap: 4px; cursor: pointer; padding: 8px 10px; background: rgba(255,255,255,0.3); border: 1px solid var(--glow); border-radius: 12px; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);}
.hamburger-menu:active { transform: scale(0.9) rotate(-5deg); opacity: 0.7;}
body.theme-dark .hamburger-menu { background: rgba(255,255,255,0.05); }
.hamburger-line { width: 18px; height: 2.5px; background-color: var(--purple-dark); border-radius: 4px; transition: 0.3s; }
body.theme-dark .hamburger-line { background-color: #fff; }

.head-actions-nav { display: flex; align-items: center; justify-content: space-between; border-top: 1px dashed var(--glow); padding-top: 12px; }

/* HIỆU ỨNG NÚT BẤM TAN DẦN KHI ACTIVE */
.header-cart-btn { 
  background: linear-gradient(135deg, var(--pink), var(--p3)); 
  border: 1px solid rgba(255,255,255,0.4); color: #fff; padding: 8px 16px; 
  border-radius: 20px; font-weight: 800; font-size: 11.5px; cursor: pointer; 
  display: flex; align-items: center; gap: 6px; 
  box-shadow: 0 8px 25px var(--glow); transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); text-transform: uppercase; letter-spacing: 0.5px;
}
.header-cart-btn:active { transform: scale(0.92); box-shadow: 0 2px 10px var(--glow); opacity: 0.6; filter: blur(0.5px); }
#cart-badge { background: #fff; color: var(--pink); min-width: 18px; height: 18px; border-radius: 50%; font-size: 10px; font-weight: 900; display: grid; place-items: center; padding: 0 4px; animation: bounceBadge 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; box-shadow: 0 3px 8px rgba(0,0,0,0.1); }

.wallet-badge-tech {
   display: inline-flex; align-items: center; gap: 3px;
   background: rgba(255, 255, 255, 0.6); padding: 3px 8px; border-radius: 12px;
   box-shadow: inset 0 1px 3px rgba(0,0,0,0.03); font-size: 10px; font-weight: 800; color: var(--pink);
   border: 1px solid var(--glow);
}
body.theme-dark .wallet-badge-tech { background: rgba(55,65,81,0.5); }

.logout-btn{ background: rgba(230, 57, 70, 0.1); border: 1px solid rgba(230, 57, 70, 0.2); color: var(--hot); padding: 6px 12px; border-radius: 14px; font-size: 10px; font-weight: 800; cursor: pointer; transition: all 0.3s; text-transform: uppercase; }
.logout-btn:active { transform: scale(0.9); opacity: 0.6; background: var(--hot); color: #fff;}

#admin-badge {
    position: absolute; top: -5px; right: -5px; background: linear-gradient(135deg, #ef4444, #e63946); color: white;
    font-size: 9px; font-weight: 900; padding: 2px 6px; border-radius: 10px;
    box-shadow: 0 4px 10px rgba(230, 57, 70, 0.4); border: 1.5px solid #fff; display: none;
}

/* SIDEBAR CONFIG */
.config-sidebar { position: fixed; top: 0; right: 0; width: 290px; height: 100%; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(45px) saturate(180%); -webkit-backdrop-filter: blur(45px) saturate(180%); z-index: 1500; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s; visibility: hidden; box-shadow: -15px 0 50px rgba(0,0,0,0.05); padding: 24px 20px; display: flex; flex-direction: column; gap: 20px; border-left: 1px solid var(--glow); overflow-y:auto; }
body.theme-dark .config-sidebar { background: rgba(17, 24, 39, 0.7); color: #fff; }
.config-sidebar.open { transform: translateX(0); visibility: visible; }
.config-title-bar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--glow); padding-bottom: 14px; }
.config-title-bar h4 { margin: 0; font-size: 15px; font-weight: 900; color: var(--purple-dark); text-transform: uppercase; letter-spacing: 0.5px;}
.close-sidebar-btn { background: rgba(255,255,255,0.5); border: 1px solid var(--glow); font-size: 14px; cursor: pointer; color: var(--dark); width: 32px; height: 32px; border-radius: 50%; font-weight: bold; display: flex; align-items: center; justify-content: center; transition: all 0.3s;}
.close-sidebar-btn:active { transform: scale(0.85); opacity: 0.6; }
body.theme-dark .close-sidebar-btn { background: rgba(255,255,255,0.1); color: #fff; }

/* TABS KẸO NGỌT MƯỢT MÀ */
.tabs { display:flex; gap:10px; margin: 0 14px 16px; padding: 8px; background: rgba(255,255,255,0.3); border-radius: 24px; position:sticky; top: 100px; z-index:30; overflow-x:auto; scrollbar-width:none; border: 1.5px solid var(--glow); box-shadow: 0 10px 30px rgba(0,0,0,0.03); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);}
body.theme-dark .tabs { background: rgba(31,41,55,0.3); }
.tabs::-webkit-scrollbar { display:none }
.tab { position:relative; flex:1; padding:12px 16px; border: 1px solid transparent; border-radius:18px; background: transparent; color: var(--purple-dark); opacity: 0.7; font-weight:800; font-size:12.5px; cursor:pointer; white-space:nowrap; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); text-align:center;}
.tab:active { transform: scale(0.92); opacity: 0.5; }
.tab.active { background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6)); color: var(--pink); box-shadow: 0 8px 20px var(--glow); opacity: 1; border-color: var(--glow); font-weight: 900;}
body.theme-dark .tab.active { background: var(--pink); color: #fff; border-color: transparent;}
.badge-new { position: absolute; top: -4px; right: -4px; background: linear-gradient(135deg, #ff6b6b, var(--hot)); color: #fff; font-size: 9px; padding: 3px 6px; border-radius: 10px; font-weight: 900; display: none; border: 1.5px solid #fff; box-shadow: 0 4px 10px rgba(230,57,70,0.4); }

main { flex: 1; padding-bottom: 30px; }

/* BUTTON ADD CUTE */
                 
.add-btn { margin-top:10px; width:90%; background-color: color-mix(in srgb, var(--p2) 20%, transparent); backdrop-filter: blur(60px); -webkit-backdrop-filter: blur(60px); 
color: var(--pink);opacity:0,5;
 border: 1px solid var(--glow); height: 28px; border-radius: 12px; font-weight:900; font-size:11px; cursor:pointer; transition:all 0.3s ease; padding: 0;box-shadow: 0 8px 32px rgba(0,0,0,0.06), inset 0 2px 10px rgba(255,255,255,0.6);}
.add-btn:active { transform: scale(0.85); opacity: 0.5; }
.add-btn:hover { background-color: color-mix(in srgb, var(--pink) 20%, transparent); backdrop-filter: blur(60px); -webkit-backdrop-filter: blur(60px); border: 2px dashed var(--glow);color: #fff; border-color: transparent; box-shadow: 0 6px 15px var(--glow); }

.sale-badge { position: absolute; top: -5px; right: -5px; background: linear-gradient(135deg, #ff6b6b, #e11d48); color: #fff; font-size: 9px; font-weight: 900; padding: 3px 6px; border-radius: 10px; box-shadow: 0 6px 12px rgba(225,29,72,0.4); z-index: 5; border: 1.5px solid #fff; }
.old-price { text-decoration: line-through; opacity: 0.6; font-size: 9.5px; margin-right: 4px; font-weight: 700; }

/* CART BOX KÍNH MỜ */
.cart-box h3 { margin-top: 0; font-size: 16px; color: var(--purple-dark); font-weight: 900; border-bottom: 1px dashed var(--glow); padding-bottom: 12px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.5px;}
.cart-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: rgba(255,255,255,0.5); border-radius: 20px; margin-bottom: 10px; box-shadow: 0 6px 15px rgba(0,0,0,0.02); border: 1px solid var(--glow); backdrop-filter: blur(10px);}
body.theme-dark .cart-item { background: rgba(55,65,81,0.4); }
.cart-qty { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.4); padding: 4px; border-radius: 14px; border: 1px solid var(--glow); }
body.theme-dark .cart-qty { background: rgba(31,41,55,0.5); }
.qty-btn { width: 26px; height: 26px; border-radius: 10px; border: none; background: #fff; font-weight: 900; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--pink); transition: all 0.3s;}
.qty-btn:active { transform: scale(0.85); opacity: 0.6; }
body.theme-dark .qty-btn { background: #4b5563; color: #fff;}
.cart-remove{background:rgba(230, 57, 70, 0.1); border:1px solid rgba(230, 57, 70, 0.2); color:var(--hot); width:28px; height:28px; border-radius:10px; font-size:14px; cursor:pointer; font-weight:900; display:flex; align-items:center; justify-content:center; transition: all 0.3s;}
.cart-remove:active { transform: scale(0.85); opacity: 0.6; background: var(--hot); color: #fff; }

/* INPUT & SELECT BO TRÒN CUTE */
input, select, textarea { width:100%; margin-top:12px; padding:14px 16px; border:1px solid var(--glow); border-radius:18px; font-family:"Quicksand"; font-size:11px; font-weight: 400; background:rgba(255,255,255,0.5); color: var(--purple-dark); outline:none; transition:all 0.3s; box-sizing: border-box; backdrop-filter: blur(10px);}
body.theme-dark input, body.theme-dark select, body.theme-dark textarea { background: rgba(55,65,81,0.4); color: #fff; }
input:focus, select:focus, textarea:focus { border-color: var(--pink); box-shadow:0 0 0 4px var(--glow); background: #fff;}
body.theme-dark input:focus, body.theme-dark select:focus, body.theme-dark textarea:focus { background: rgba(31,41,55,0.8); }

.total-row { display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:16px; border-top:1px dashed var(--glow); font-size:12px; font-weight:800; color: var(--purple-dark);}
body.theme-dark .total-row { color: #fff; }
#total-amount { color:var(--pink); font-size:22px; font-weight:900; letter-spacing: -0.5px; text-shadow: 0 4px 10px var(--glow);}

/* CHECKOUT BUTTON LỘN LẪY */
.checkout-btn { width:100%; margin-top:18px; padding:16px; border:1px solid rgba(255,255,255,0.3); border-radius:20px; background: linear-gradient(135deg, var(--pink), var(--p3)); color:#fff; font-weight:900; font-size:14px; box-shadow:0 12px 30px var(--glow); cursor:pointer; transition:all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); text-transform: uppercase; letter-spacing: 1px;}
.checkout-btn:active { transform: scale(0.95); opacity: 0.5; box-shadow:0 6px 15px var(--glow); }

/* FOOTER - LÀM ĐẬM HƠN 1 CHÚT NHƯ HEADER */
.footer-wrap { margin: 12px 16px; 
   border-radius: 28px; 
       background-color: color-mix(in srgb, var(--p3) 40%, transparent);
           backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); 
   border: 1.5px solid var(--glass-border); 
         box-shadow: 0 8px 32px rgba(0,0,0,0.06), inset 0 2px 10px rgba(255,255,255,0.6); 
   transition: all 0.3s ease;
margin: 20px 14px; text-align: center; padding: 20px; font-size: 11.5px; color: var(--purple-dark); font-weight: 800;box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}
body.theme-dark .footer-wrap { color: #d1d5db; }
.footer-wrap span { color: var(--pink); font-weight: 900; }
.card-warning { color: var(--hot); font-size: 11.5px; background: rgba(230, 57, 70, 0.08); border: 1px dashed rgba(230, 57, 70, 0.3); padding: 14px; border-radius: 18px; margin-top: 12px; font-weight: 800; line-height: 1.5;}

/* TOAST CHUẨN CUTE CHẠM LÀ MÊ */
#toast { position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; width: 85%; max-width: 300px; pointer-events: none; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.toast-item { display: flex; justify-content: space-between; align-items: center;
   margin: 12px 16px; 
   border-radius: 15px; 
       background-color: color-mix(in srgb, var(--p2) 80%, transparent);
           backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(50px);
   padding: 10px 12px; top: 12px;   box-shadow: 0 8px 32px rgba(0,0,0,0.06), inset 0 2px 10px rgba(255,255,255,0.6); 
   font-size:13px; text-transform:uppercase; letter-spacing:0.5px;color:var(--purple);
border: 2px dashed var(--glow); font-weight: 900; text-align: center; pointer-events: auto; font-size: 13.5px; animation: toastPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; display: flex; align-items: center; justify-content: center; gap: 8px; }
body.theme-dark .toast-item { background: rgba(31, 41, 55, 0.9); }
@keyframes toastPop { 0% { transform: scale(0.8) translateY(20px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }

/* LỊCH SỬ GIAO DỊCH CHUNG */
 .order-date { font-size: 9.5px; color: #6b7280; margin-bottom: 8px; font-weight: 700; display: flex; gap: 4px; align-items: center; }
 .order-total { font-weight: 900; color: var(--pink); font-size: 14px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; letter-spacing: -0.5px;}

   .order-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(to bottom, var(--pink), var(--p3)); border-radius: 6px 0 0 6px; }
 .order-item:hover { transform: translateY(-2px); box-shadow: 0 10px 25px var(--glow); }
 body.theme-dark .order-item { background: #1f2937; border-color: #374151; }
 .order-top { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 11px; color: var(--dark); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1.5px dashed rgba(0,0,0,0.06); }
 body.theme-dark .order-top { border-bottom-color: rgba(255,255,255,0.1); color: #fff; }
 .order-date { font-size: 8px; color: #6b7280; margin-bottom: 10px; font-weight: 600; display: flex; gap: 5px; align-items: center; }
 .order-total { font-weight: 800; color: var(--pink); font-size: 13px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; letter-spacing: -0.5px;}
 .order-action-btns { margin-top: 14px; display: flex; gap: 10px; border-top: none; padding-top: 0; }
 .btn-mini { flex: 1; padding: 7px; border-radius: 14px; border: none; font-weight: 800; font-size: 10px; cursor: pointer; transition: all 0.2s ease; display: flex; justify-content: center; align-items: center; gap: 6px; }
 .btn-success { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 6px 15px rgba(16, 185, 129, 0.3); }
 .btn-danger { background: linear-gradient(135deg, #ef4444, #e11d48); color: #fff; box-shadow: 0 6px 15px rgba(239, 68, 68, 0.3); }
 .btn-mini:active { transform: scale(0.95); }

    /* Bổ sung CSS cho thanh trượt Admin Tabs và ẩn thanh cuộn xấu xí */
    .admin-tabs { display: flex; overflow-x: auto; white-space: nowrap; padding-bottom: 8px; gap: 8px; scroll-behavior: smooth; }
    .admin-tabs::-webkit-scrollbar { height: 4px; }
    .admin-tabs::-webkit-scrollbar-track { background: transparent; }
    .admin-tabs::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
    .admin-tabs button { flex-shrink: 0; position: relative;}
@keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }
    .vibrate-btn { animation: shake 1s infinite; }

.qr-close-btn {
  position: absolute;
  top: -15px;
  right: -15px;
  background: rgba(244, 63, 94, 0.15);
  color: var(--hot, #f43f5e);
  border: none;
  font-size: 16px;
  font-weight: bold;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}
.qr-close-btn:hover {
  background: var(--hot, #f43f5e);
  color: #fff;
}
.qr-container-img {
    object-fit: contain;
  border-radius: 16px;
  border: 4px solid rgba(244, 63, 94, 0.1);
  background: #fff;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}
.qr-guideline-text {
  font-size: 11px;
  color: #6b7280;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2px;
  animation: pulseChat 2s infinite;
}
.qr-confirm-btn {
  background: linear-gradient(135deg, var(--pink, #ff7eb3), var(--p4, #8b5cf6));
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 20px;
  border: none;
  width: 100%;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}
.qr-confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(139, 92, 246, 0.45);
}
.btn-pay-now {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
  margin-top: 6px;
  text-transform: uppercase;
}
.btn-load-more {
  display: block;
  width: 100%;
  padding: 12px;
  background: rgba(244, 63, 94, 0.05);
  color: var(--pink, #ff7eb3);
  border: 1.5px dashed var(--pink, #ff7eb3);
  border-radius: 16px;
  font-weight: 800;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  margin-top: 15px;
  transition: all 0.2s ease;
}
.btn-load-more:hover {
  background: var(--pink, #ff7eb3);
  color: #fff;
}
/* CSS cho Phân trang Admin */
.admin-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 15px;
  flex-wrap: wrap;
}
.pagination-btn {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pagination-btn.active {
  background: var(--pink, #ff7eb3);
  color: #fff;
  border-color: var(--pink, #ff7eb3);
}
.pagination-btn:hover:not(.active) {
  background: #f3f4f6;
}
/* CSS cho Khung Upload Bằng Chứng Admin */
.admin-proof-box {
  background: #f9fafb;
  border: 1.5px dashed #d1d5db;
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 12px;
}
.admin-proof-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.proof-tab {
  flex: 1;
  padding: 6px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
}
.proof-tab.active {
  background: var(--pink, #ff7eb3);
  color: #fff;
  border-color: var(--pink, #ff7eb3);
}
.preview-proof-wrap {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.preview-proof-item {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd;
}
.preview-proof-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.preview-proof-item .btn-remove-proof {
  position: absolute;
  top: 1px;
  right: 1px;
  background: rgba(225, 29, 72, 0.8);
  color: white;
  border: none;
  font-size: 8px;
  border-radius: 30%;
  cursor: pointer;
  width: 14px;
  height: 14px;
}

/* === HỆ THỐNG NHIỆM VỤ PREMIUM 6.0 === */
.quest-container { margin-top: 18px; }
.quest-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.quest-title { font-size:15px; font-weight:900; color:var(--pink); display:flex; align-items:center; gap:6px; }
.quest-month-badge { background:linear-gradient(135deg,var(--pink),var(--p4)); color:#fff; padding:4px 10px; border-radius:12px; font-size:11px; font-weight:800; }

.quest-item {
  position:relative; display:flex; align-items:center; gap:12px; padding:5px;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
  border:1.5px solid var(--glow); border-radius:9px; margin-bottom:4px;
  box-shadow:0 3px 9px rgba(0,0,0,0.04); backdrop-filter:blur(12px);
  transition:all 0.3s ease; overflow:hidden;
}
.quest-item:hover { transform:translateY(-2px); box-shadow:0 10px 25px var(--glow); }
.quest-item.completed { border-color:#10b981; background:linear-gradient(135deg, rgba(16,185,129,0.08), rgba(255,255,255,0.9)); }
.quest-icon { width:42px; height:42px; border-radius:14px; background:linear-gradient(135deg,var(--p3),var(--pink)); display:grid; place-items:center; font-size:20px; color:#fff; box-shadow:0 4px 12px var(--glow); flex-shrink:0; }
.quest-info { flex:1; }
.quest-name { font-weight:800; font-size:12px; color:var(--purple-dark); margin-bottom:3px; }
.quest-desc { font-size:10px; color:#6b7280; font-weight:400; }
.quest-progress-wrap { margin-top:6px; }
.quest-progress { height:6px; background:rgba(0,0,0,0.06); border-radius:3px; overflow:hidden; }
.quest-progress-bar { height:100%; width:0%; background:linear-gradient(90deg,var(--pink),var(--p4)); transition:width 0.6s cubic-bezier(0.2,0.8,0.2,1); border-radius:3px; }
.quest-progress-text { font-size:10px; font-weight:800; color:var(--pink); margin-top:3px; text-align:right; }

.quest-reward { display:flex; align-items:center; gap:4px; font-weight:900; font-size:12px; color:var(--pink); margin-top:4px; }
.quest-reward img { width:14px; height:14px; }

.quest-claim-btn {
  padding:8px 14px; border:none; border-radius:14px;
  background:linear-gradient(135deg,#10b981,#059669); color:#fff; font-weight:900; font-size:11px;
  cursor:pointer; box-shadow:0 6px 15px rgba(16,185,129,0.35); transition:all 0.3s;
  animation: questShake 1.2s ease-in-out infinite; white-space:nowrap;
}
.quest-claim-btn:active { transform:scale(0.92); }
.quest-claim-btn.claimed { background:#9ca3af; animation:none; box-shadow:none; cursor:default; }

@keyframes questShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-1px) rotate(-1deg)} 75%{transform:translateX(1px) rotate(1deg)} }

.quest-daily-btn {
  width:70%; padding:5px; border-radius:18px; border:1.5px solid var(--glow);
  background:linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.5));
  font-weight:900; color:var(--pink); cursor:pointer; display:flex; justify-content:center; align-items:center; gap:8px;
  transition:all 0.3s; backdrop-filter:blur(10px);
}
.quest-daily-btn:active { transform:scale(0.97); }
.quest-daily-btn.done { background:#f3f4f6; color:#9ca3af; border-color:#e5e7eb; }

/* === STYLE GAMING MỚI CHO NHIỆM VỤ === */
.quest-item {
  background: linear-gradient(135deg, rgba(17,24,39,0.9), rgba(31,41,55,0.85));
  border: 1.5px solid rgba(99,102,241,0.4);
  box-shadow: 0 0 20px rgba(99,102,241,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
}
body:not(.theme-dark) .quest-item {
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,250,252,0.9));
  border-color: var(--glow);
}
.quest-item:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 12px 30px rgba(99,102,241,0.25); }
.quest-item.completed { border-color:#10b981; box-shadow: 0 0 25px rgba(16,185,129,0.3); }
.quest-icon { background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 0 15px rgba(99,102,241,0.5), inset 0 2px 4px rgba(255,255,255,0.2); animation: pulseGlow 2s infinite; }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 15px rgba(99,102,241,0.5); } 50% { box-shadow: 0 0 25px rgba(139,92,246,0.8); } }
.quest-name { color: #e5e7eb; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
body:not(.theme-dark) .quest-name { color: var(--purple-dark); text-shadow: none; }
.quest-progress-bar { background: linear-gradient(90deg, #6366f1, #ec4899, #f59e0b); box-shadow: 0 0 10px rgba(99,102,241,0.6); }
.quest-section-title { font-size:13px; font-weight:900; color:var(--pink); margin:16px 0 8px; padding:8px 12px; background:linear-gradient(90deg, rgba(99,102,241,0.1), transparent); border-left:3px solid var(--pink); border-radius:0 12px 12px 0; text-transform:uppercase; letter-spacing:0.5px; }

/* === FIX CUỘN XUỐNG FOOTER - HANG 2026 === */
html, body, #app { overscroll-behavior-y: auto !important; }
body { touch-action: pan-y !important; }
main, .container { padding-bottom: 120px !important; } /* tránh bị che bởi menu */

/* === FIX CHAT TO NHỎ GỌN + ĐỒNG BỘ MÀU - HANG 2026 === */
#floating-chat-window { 
  width: 270px !important; 
  height: 360px !important; 
  max-width: calc(100vw - 24px) !important;
  max-height: 60vh !important;
  bottom: 80px !important;
  right: 16px !important;
  border-radius: 20px !important;
}
#floating-chat-window .chat-messages { padding: 10px !important; gap: 6px !important; }
.chat-msg { font-size: 12px !important; padding: 8px 12px !important; line-height: 1.35 !important; border-radius: 14px !important; }
#floating-chat-window > div:first-child { padding: 10px 14px !important; font-size: 13px !important; background: linear-gradient(135deg, var(--pink), var(--p4)) !important; }
#floating-chat-window .chat-input-area { padding: 8px !important; gap: 6px !important; }
#floating-chat-window .chat-input-area input { padding: 8px 12px !important; font-size: 12px !important; border-radius: 16px !important; }
#floating-chat-window .chat-send-btn { padding: 0 14px !important; font-size: 12px !important; border-radius: 16px !important; }

/* Bong bóng chat đồng bộ màu theme */
#floating-chat-btn {
  background: linear-gradient(135deg, var(--pink), var(--p4)) !important;
  box-shadow: 0 10px 30px var(--glow) !important;
}
@keyframes pulseChat { 
  0% { box-shadow: 0 0 0 0 var(--glow); } 
  70% { box-shadow: 0 0 0 15px rgba(0,0,0,0); } 
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } 
}

@media (max-width: 480px) {
  #floating-chat-window {
    width: 90vw !important;
    height: 52vh !important;
    right: 5vw !important;
    bottom: 78px !important;
  }
  #floating-chat-btn { width: 50px !important; height: 50px !important; font-size: 22px !important; bottom: 18px !important; right: 18px !important; }
}
/* Nút chat custom - tông nâu be, nhỏ gọn */
#custom-crisp-btn{
  position:fixed; bottom:18px; right:18px; z-index:99999;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg, #d4c3b3, var(--p3) );
  box-shadow:0 6px 18px rgba(150,122,88,.28), 0 2px 6px rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;
  border:1.5px solid rgba(255,255,255,.6);
  backdrop-filter:blur(4px);
}
#custom-crisp-btn:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 10px 26px rgba(150,122,88,.35); }
#custom-crisp-btn:active{ transform:scale(.96); }
#custom-crisp-btn svg{ width:27px; height:27px; fill:#5c5246; }
#custom-crisp-btn .pulse{
  position:absolute; width:100%; height:100%; border-radius:50%;
  background:rgba(212,195,179,.5); animation:pulse 2s infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.45);opacity:0}100%{opacity:0}}
@media(max-width:480px){#custom-crisp-btn{width:46px;height:46px;bottom:14px;right:14px}#custom-crisp-btn svg{width:21px;height:21px}}

/* Ép ẩn mọi nút mặc định còn sót của Crisp - HẰNG FIX */
.crisp-client, #crisp-chatbox, .crisp-client * {
  /* giữ cho Crisp ẩn khi không mở */
}
.crisp-client .cc-1brb6, .crisp-client .cc-1m2mf, .crisp-client [data-crisp-launcher] {
  display:none !important; opacity:0 !important; visibility:hidden !important;
}
/* Khi Crisp đang ẩn, ép display none */
body:not(.crisp-open) .crisp-client { display:none !important; }


/* === NÂNG CẤP VÒNG QUAY KỲ DIỆU - HẰNG 2026 === */

#spin-btn { 
  background: linear-gradient(135deg, var(--pink), var(--p4)) !important; 
  box-shadow: 0 10px 25px var(--glow), inset 0 2px 0 rgba(255,255,255,0.3) !important; 
  font-weight:900 !important; letter-spacing:0.5px; position:relative; overflow:hidden; 
}
#spin-btn::before { 
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; 
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent); 
  transform:rotate(45deg); animation: shine 3s infinite; 
}
@keyframes shine { 0%{ left:-50% } 100%{ left:150% } }

#spin-result { 
  font-weight:900; font-size:15px; 
  background: linear-gradient(90deg, var(--pink), var(--p4)); 
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; 
  text-align:center; margin-top:12px; animation: resultPop 0.5s ease; 
}
@keyframes resultPop { 0%{ transform:scale(0.8); opacity:0 } 100%{ transform:scale(1); opacity:1 } }

.profile-tabs{
  display:flex; position:relative; background:#eef2ff;
  padding:2px; border-radius:14px; gap:4px;center
}
.profile-tabs button{
  flex:1; z-index:2; background:transparent; border:0;
  padding:2px; font-family:'Quicksand',sans-serif;
  font-weight:700; font-size:11px; color:#64748b;
  border-radius:10px; cursor:pointer; transition:.2s;
}
.profile-tabs button.active{ color:var(--pink); }
.profile-tabs button .dot{
  display:inline-block; width:1px; height:1px; margin-left:1px;
  background:#ef4444; border-radius:50%; opacity:0; transition:.2s;
}
.profile-tabs button.active .dot{ opacity:1; }

#tabri{
  position:absolute; top:4px; left:4px; height:calc(100% - 8px);
  width:0; background:#fff; border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transition:all .3s cubic-bezier(.2,.8,.2,1); z-index:1;
}
.profile-subtab{ display:none; }
.profile-subtab.active{ display:block; animation:fade .2s; }
@keyframes fade{ from{opacity:0;transform:translateY(6px)} to{opacity:1} }