/* ===== RESET CƠ BẢN ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ===== BODY – LAYOUT CHÍNH ===== */
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: antiquewhite;

    display: grid;
    grid-template-columns: 70% 30%; /* Nội dung + sidebar */
    max-width: 1200px;
    margin: 0 auto;
    gap: 10px;
}

/* ===== HEADER ===== */
header {
    background-color: cornflowerblue;
    color: darkgray;
    padding: 20px;
    text-align: center;
    grid-column: 1 / span 2; /* Trải 2 cột */
}

/* ===== NAV ===== */
nav {
    background-color: darkgray;
    color: darkred;
    padding: 10px;
    grid-column: 1 / span 2;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav ul li {
    cursor: pointer;
}

/* ===== DANH SÁCH SẢN PHẨM ===== */
.product-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* ❌ lfr → ✅ 1fr */
    gap: 20px;
    padding: 20px;
    grid-column: 1;
}

.product-card {
    background-color: darkslategray;
    border: 1px solid teal;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    color: white;
}

.product-card img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* ===== SIDEBAR ===== */
.sidebar {
    background-color: teal;
    color: tomato;
    padding: 15px;
    grid-column: 2;
}

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

/* ===== FOOTER ===== */
.footer {
    background-color: thistle;
    color: black;
    text-align: center;
    padding: 20px;
    grid-column: 1 / span 2;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.footer-item {
    padding: 10px;
}

/* ===== BUTTON ===== */
.button {
    background-color: brown;
    border: none;
    color: white;
    padding: 9px 14px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

/* Các kiểu bo góc button */
.button.radius-2 {
    border-radius: 2px;
}

.button.radius-8 {
    border-radius: 8px;
}

.button.radius-12 {
    border-radius: 12px;
}

.button.circle {
    border-radius: 50%;
}

/* ===== RESPONSIVE – MOBILE ===== */
@media (max-width: 576px) {
    body {
        grid-template-columns: 1fr;
    }

    .product-list {
        grid-template-columns: 1fr;
    }

    .sidebar {
        grid-column: 1;
    }

    .footer {
        grid-template-columns: 1fr;
    }
}