/* 1. RESET CƠ BẢN */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
h1 {
    font-size: 20px; 
    color: white;       /* Header thường chữ trắng trên nền hồng */
    margin: 0;
}
h3 {
    font-size: 16px;    /* Chỉnh kích thước chữ nhỏ lại (mặc định thường là 18-20px) */
    margin: 10px 0;    /* Thu hẹp khoảng cách trên dưới */
    color: #ff1493;    /* Giữ màu hồng đặc trưng của shop */
    font-weight: bold; /* Để chữ đậm cho rõ ràng */
}

body {
    font-family: Arial, sans-serif;
    background-color: #fff5f8;
    display: grid;
    /* Dùng 1fr để phần sản phẩm tự co giãn, sidebar cố định 200px */
    grid-template-columns: 1fr 200px; 
    width: 100%;
    min-height: 100vh;
}

/* 2. HEADER & NAV */
header {
    background-color: #ff69b4;
    color: white;
    padding: 20px;
    text-align: center;
    grid-column: 1 / span 2;
}

nav {
    background-color: #ffb6c1;
    padding: 15px;
    text-align: center;
    grid-column: 1 / span 2;
}

nav ul { list-style: none; }
nav ul li { display: inline; margin-right: 20px; }
nav ul li a { text-decoration: none; color: white; font-weight: bold; }

/* 3. DANH SÁCH SẢN PHẨM (Mấu chốt để không phải zoom) */
.product-list {
    display: grid;
    /* auto-fill: Tự động xếp thêm cột nếu màn hình rộng, 
       minmax(200px, 1fr): Mỗi ô rộng ít nhất 200px và tự nở ra nếu dư chỗ */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 20px;
}

.product-card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    transition: 0.3s;
    /* QUAN TRỌNG: Bỏ min-height 500px, để nó tự theo nội dung */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-card:hover { transform: translateY(-5px); }

.product-card img {
    max-width: 100%;
    height: 150px; /* Giảm chiều cao ảnh một chút để tiết kiệm diện tích */
    object-fit: contain;
}

.product-card h2 { color: #ff1493; margin: 10px 0; font-size: 18px; }
.price { color: red; font-size: 18px; font-weight: bold; }

/* 4. SIDEBAR & FOOTER */
.sidebar {
    background-color: #ffc0cb;
    padding: 20px;
    /* Xóa min-height: 100% ở đây vì grid đã tự kéo dài nó */
}

.social-icons a {
    text-decoration: none;
    color: white;
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

.footer {
    background-color: #ff69b4;
    color: white;
    text-align: center;
    padding: 20px;
    grid-column: 1 / span 2;
    display: grid;
}

/* 5. RESPONSIVE (Tự khớp mọi màn hình) */
@media (min-width: 768px) {
    .footer { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    body {
        grid-template-columns: 1fr; /* Màn hình nhỏ thì sidebar nhảy xuống dưới */
    }
    .sidebar {
        grid-column: 1;
    }
}

/* 6. BUTTON */
.button {
    background-color: #ff1493;
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    border-radius: 12px;
    margin-top: 10px;
    cursor: pointer;
    width: 100%;
}

.button:hover { background-color: black; }