/* =======================================================
   TABLET & IPAD (Màn hình từ 1024px trở xuống)
   ======================================================= */
@media (max-width: 1024px) {
    /* --- 1. Container: Giảm lề 2 bên --- */
    .container, 
    .site-footer .container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    /* --- 2. Lưới sản phẩm: Chuyển thành 3 cột --- */
    .product-gallery,
    .product-gallery.layout-4 {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* --- 3. Footer: Chia thành 2 cột --- */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    /* --- 4. Chi tiết sản phẩm --- */
    .product-layout {
        gap: 40px;
    }
    .product-title-large {
        font-size: 26px;
    }
}

/* =======================================================
   MOBILE (Điện thoại - Màn hình dưới 768px)
   ======================================================= */
@media (max-width: 768px) {

    /* --- 1. HEADER & MENU --- */
    .header-container {
        flex-wrap: wrap; /* Cho phép rớt dòng */
        padding: 10px 15px;
        gap: 15px;
    }

    .header-logo img {
        height: 30px; /* Logo nhỏ lại chút */
    }

    /* Biến menu thành thanh trượt ngang (Horizontal Scroll) hiện đại */
    .main-nav {
        order: 3; /* Đẩy xuống dòng dưới cùng */
        width: 100%;
        overflow-x: auto; /* Cho phép cuộn ngang */
        padding-bottom: 5px;
        border-top: 1px solid #f5f5f5;
        padding-top: 10px;
    }

    .main-nav .nav-list {
        width: max-content; /* Nội dung dài hơn màn hình */
        gap: 20px;
    }
    
    /* Ẩn thanh cuộn xấu xí */
    .main-nav::-webkit-scrollbar { display: none; }


    /* --- 2. LƯỚI SẢN PHẨM (GRID) --- */
    /* Mobile chuẩn thương mại điện tử là 2 cột */
    .product-gallery,
    .product-gallery.layout-2,
    .product-gallery.layout-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px; /* Khoảng cách nhỏ lại */
    }

    .product img, .image-wrapper {
        height: 200px !important; /* Giảm chiều cao ảnh cho cân đối */
    }

    .product .title {
        font-size: 14px;
        min-height: 40px; /* Đảm bảo tên dài không làm lệch khung */
    }

    .product .price {
        font-size: 14px;
    }

    /* --- 3. XỬ LÝ FILTER (QUAN TRỌNG) --- */
    /* Biến bảng filter thành cửa sổ trượt (Off-canvas) */
    .filters-panel {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 80%; /* Chiếm 80% màn hình */
        max-width: 300px;
        background: #fff;
        z-index: 2000; /* Nổi lên trên cùng */
        padding: 20px;
        overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0,0,0,0.2);
        
        /* Mặc định ẩn sang bên trái */
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    /* Class này sẽ được JS thêm vào khi bấm nút */
    .filters-panel.visible {
        transform: translateX(0); /* Trượt ra */
    }

    /* Khi mở filter trên mobile, KHÔNG ĐƯỢC đẩy nội dung sang phải */
    .product-gallery.shrink {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Thêm nút đóng giả lập cho mobile (nếu cần thiết kế thêm trong HTML) */
    .filters-panel::before {
        content: "SWIPE LEFT TO CLOSE";
        display: block;
        font-size: 10px;
        color: #999;
        margin-bottom: 20px;
        text-align: center;
    }


    /* --- 4. CHI TIẾT SẢN PHẨM --- */
    .product-layout {
        grid-template-columns: 1fr; /* 1 cột duy nhất */
        gap: 20px;
    }

    .product-info-side {
        position: static; /* Bỏ chế độ dính */
    }

    .product-title-large {
        font-size: 22px;
        margin-top: 10px;
    }

    .thumbnail-list {
        grid-template-columns: repeat(5, 1fr); /* 5 ảnh nhỏ 1 hàng */
    }


    /* --- 5. SERVICE PERKS (Mục quà tặng sinh nhật) --- */
    .perks-container {
        flex-direction: column; /* Xếp dọc */
    }
    
    .perks-image {
        order: -1; /* Đưa ảnh lên trên chữ */
        width: 100%;
        margin-bottom: 20px;
    }
    
    .perks-content {
        padding: 0 10px;
    }


    /* --- 6. FOOTER --- */
    .footer-grid {
        grid-template-columns: 1fr; /* 1 cột */
        gap: 40px;
    }
    
    .site-footer .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .footer-bottom {
        flex-direction: column-reverse; /* Copyright xuống dưới cùng */
        gap: 20px;
        align-items: center;
    }
}


/* =============================================
   TABLET & IPAD (Màn hình từ 1024px trở xuống)
   ============================================= */
@media (max-width: 1024px) {
    
    /* --- SỬA LỖI SERVICE PERKS KHÔNG ĐỀU --- */
    .perks-container {
        flex-direction: column; /* Xếp dọc: Ảnh trên, Chữ dưới */
        text-align: center;     /* Căn giữa nội dung văn bản */
        padding-left: 30px;     /* Tăng khoảng cách lề cho thoáng */
        padding-right: 30px;
    }

    .perks-image {
        order: -1;              /* Đẩy ảnh lên trên cùng */
        width: 100%;
        margin-bottom: 30px;    /* Tạo khoảng cách với chữ bên dưới */
        display: flex;
        justify-content: center; /* Căn giữa ảnh */
    }

    .perks-image img {
        width: 80%;             /* Giảm size ảnh chút cho đẹp trên iPad */
        max-width: auto;
        height: auto;
    }

    .perks-content {
        margin: 0 auto;         /* 👈 QUAN TRỌNG: Căn khối chữ vào giữa màn hình */
        width: 100%;
        max-width: 600px;       /* Giới hạn chiều rộng để chữ không bị tràn quá dài */
    }

    /* Căn chỉnh danh sách dấu chấm cho đẹp khi ở giữa */
    .perks-list {
        display: inline-block;  /* Gom danh sách lại thành khối để căn giữa */
        text-align: left;       /* Nội dung bên trong vẫn căn trái cho dễ đọc */
        margin-top: 15px;
    }
}