/* Import font chữ Inter hiện đại */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html, body {
    max-width: 100%;
    overflow-x: hidden; /* Chặn tuyệt đối hiện tượng cuộn ngang trên di động */
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
}

/* Khung Card chính hiệu ứng Glassmorphism dạng sáng */
.profile-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Hiệu ứng viền sáng hover gradient quanh ảnh */
.avatar-gradient {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
}

/* Nút bấm chính trên Card */
.btn-primary {
    background: linear-gradient(135deg, #2563eb, #0891b2);
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #0e7490);
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
}

/* Các nút liên kết phụ dưới Card */
.btn-secondary {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(191, 219, 254, 0.6);
    color: #1e3a8a;
    transition: all 0.2s ease;
}
.btn-secondary:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    transform: translateY(-1px);
}

/* Hiệu ứng chuyển động kéo dải Menu từ phải sang trái */
#topMenuContent {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

/* Chuyển động ẩn hiện tiêu đề */
#pageTitleContainer {
    transition: opacity 0.25s ease, transform 0.25s ease;
}