.right-sidebar {
    /* Cho right-sidebar sử dụng Flexbox */
    display: flex;

    /* Xếp các phần tử con theo chiều dọc */
    flex-direction: column;

    /* Đẩy top-area lên trên và bottom-area xuống dưới */
    justify-content: space-between;

    /* Căn các phần tử con về phía bên phải */
    align-items: flex-end;

    /* Tạo khoảng cách 0px ở bên trong sidebar */
    padding: 0px;

    /* Padding không làm tăng kích thước tổng của sidebar */
    box-sizing: border-box;
}

/* Top area */
.top-area {
    /* Xếp các phần tử bên trong top-area theo chiều dọc */
    display: flex;

    /* Xếp từ trên xuống dưới */
    flex-direction: column;

    /* Khoảng cách giữa các phần tử là 12px */
    gap: 12px;
}

/* Bottom area */
.bottom-area {
    /* Xếp các phần tử bên trong bottom-area theo chiều dọc */
    display: flex;

    /* Xếp từ trên xuống dưới */
    flex-direction: column;

    /* Khoảng cách giữa các phần tử là 12px */
    gap: 12px;
}

/* Thiết lập kiểu dáng chung cho tất cả social link */
.social-link {

    /* Chiều rộng của nút */
    width: 48px;

    /* Chiều cao của nút */
    height: 48px;

    /* Loại bỏ padding mặc định */
    padding: 0;

    /* Sử dụng Flexbox */
    display: flex;

    /* Căn icon theo chiều dọc */
    align-items: center;

    /* Căn icon theo chiều ngang */
    justify-content: center;

    /* Icon sử dụng màu trắng */
    color: white;

    /* Loại bỏ gạch chân của thẻ <a> */
    text-decoration: none;

    /* Tạo hiệu ứng chuyển động mượt khi hover */
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


/* Thiết lập kích thước SVG bên trong social link */
.social-link svg {

    /* Hiển thị SVG dạng block */
    display: block;

    /* Chiều rộng icon */
    width: 24px;

    /* Chiều cao icon */
    height: 24px;

    /* SVG lấy màu từ thuộc tính color của .social-link */
    fill: currentColor;
}

/* Màu nền cho Facebook */
.social-link.facebook {
    background-color: #1877F2;
}


/* Màu nền cho YouTube */
.social-link.youtube {
    background-color: #FF0000;
}

/* Màu nền cho X */
.social-link.x {
    background-color: #0F1419;
}

/* Màu nền cho LinkedIn */
.social-link.linkedin {
    background-color: #0A66C2;
}

/* Màu nền cho GitHub */
.social-link.github {
    background-color: #1F2328;
}


/* Hiệu ứng khi đưa chuột lên social link */
.social-link:hover {

    /* Làm nút hơi trong suốt */
    opacity: 0.85;
}