body { 
    margin: 0; font-family: 'Inter', sans-serif; 
    background: #f3f4f6; color: black; /* Đã để chữ đen nền xám cho bạn thấy rõ */
    display: flex; justify-content: center; min-height: 100vh;
}

.main-container { width: 100%; max-width: 480px; padding: 40px 20px; display: flex; flex-direction: column; gap: 20px; }

/* Thẻ Glassmorphism - Để Opacity cao cho dễ nhìn */
.card { 
    background: rgba(255, 255, 255, 0.9); 
    border-radius: 24px; padding: 25px; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0,0,0,0.05);
}

/* Nút Social */
.soc-btn {
    width: 50px; height: 50px; background: #eee;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; font-size: 20px; color: #333; transition: 0.3s;
}
.soc-btn:hover { transform: scale(1.1); background: #ddd; }

/* Logic Hình 3 (Filter) */
.filter-bar { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid #ddd; }
.tab { cursor: pointer; font-weight: bold; color: #666; font-size: 14px; white-space: nowrap; }
.tab.active { color: #3b82f6; border-bottom: 2px solid #3b82f6; }

.item-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #eee; cursor: pointer; }

/* Admin Panel */
#admin-layer { 
    position: fixed; inset: 0; background: white; z-index: 9999; 
    display: none; flex-direction: column; color: black;
}
.admin-grid { display: grid; grid-template-columns: 1fr 350px; gap: 20px; padding: 20px; height: 100%; overflow: hidden; }
.scroll-area { overflow-y: auto; padding-right: 10px; }
.mockup { background: #000; border-radius: 40px; border: 8px solid #333; height: 600px; overflow-y: auto; }

.hidden { display: none !important; }