/*Reset CSS để loại bỏ các mặc định của trình duyệt*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*Thiết lập font chung cho trang web*/
body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f2f2f2;
    display: grid;
    grid-template-columns: 70% 30%;
    /*Chia trang thành 2 cột*/
    max-width: max-content;
    /*Độ rộng tối đa của trang web*/
    margin: 0 auto;
    /*Canh giữa trang web trên màn hình*/
}

/*Phần tiêu đề trang web*/
header{
    background-color: #c7cc19;
    color: #fff;
    padding: 20px;
    text-align: center;
    grid-column: 1 /span 2;
    /*Trải đều qua cả 2 cột*/
}

nav{
    background-color: #ffa486;
    color: #fff;
    text-align: center;
    padding: 10px;
    grid-column: 1 /span 2;
    /*Trải đều qua cả 2 cột*/
}

nav ul{
    list-style: none;
}

nav ul li{
    display: inline;
    margin-right: 20px;
}

/*Phần danh sách sản phẩm*/
div.product-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /*Hiển thị 3 sản phẩm trên mỗi hàng*/
    gap: 20px;
    /*Khoảng cách giữa các sản phẩm*/
    padding: 20px;
    grid-column: 1;
    /*Chỉ nằm ở cột đầu tiên*/
}

div.product-card{
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px; 
    width: 100%;
    text-align: center;
    /*Căn giữa nội dung trong sản phẩm*/

    transition: 
        transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    /*Giúp chuyển đọng mượt hơn*/
}

.product-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.product-card img {
    transition: transform 0.45s ease;
}
.product-card:hover img {
    transform: scale(1.05);
}

.product-card img{
    max-width: 100%;
    height: auto;
}

/*Phần sidebar*/
div.sidebar{
    background-color: #199cff;
    color: #fff;
    padding: 10px;
    grid-column: 2;
    /*Chỉ nằm ở cột thứ 2*/
}

div.social-icons{
    margin-top: 20px;
}

div.social-icons a{
    color: #fff;
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
}

/*Chỉnh lại bó cục cho màn hình thiết bị di động*/
@media (max-width: 576px) {
    .product-list{
        grid-template-columns: 1fr;
        /*Hiển thị 1 sản phẩm trên mỗi hàng*/
    }

    .product-card{
        width: 100%;
        margin-bottom: 20px;
    }

    .sidebar{
        grid-column: 1/ span 2;
        /*Trải đều qua cả 2 cột*/
    }

    /*Chỉnh lại bố cục cho phần footer*/
    .footer{
        grid-template-columns: 1fr;
        /*1 cột xếp chồng lên nhau trên màn hình di động*/
    }
}

/*Phần footer*/
.footer{
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
    grid-column: 1 /span 2;
    /*trải đều qua 2 cột */
    display: grid;
}

/*cột phần footer*/
.footer-items{
    padding: 10px;
}

/*chỉnh layout cho máy tính*/
@media (min-width: 768px) {
    .footer{
        grid-template-columns: repeat(3, 1fr);
        /*3 cột trên máy tính*/
    }
}

.button{
    background-color: #04AA6D;
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
}

.button4{
    border-radius: 12px;
}

.button4:hover{
    background-color: #0b5ed7;   /* xanh đậm hơn */
}

.button4:active{
    background-color: #084298;   /* xanh đậm hơn nữa */
    transform: scale(0.95);      /* hiệu ứng nhấn */
}

a:hover{
    color:  red;
}
div.social-icons a:hover{
    background-color: #084298;
}