/* Thêm vào file responsive.css của bạn */

/* 💻 Máy tính bảng (<= 992px) */
/* @media (max-width: 992px) {
  .product-grid {
    
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .perks-list {
    gap: 20px;
  }
} */

/* 📱 Di động (<= 768px) */
/* @media (max-width: 768px) {
  .product-grid {
    
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .collection-hero h1 {
    font-size: 28px;
  }

  
  .collection-controls {
    flex-direction: column;
    gap: 20px;
    align-items: stretch; 
  }
  .collection-controls .sort-group {
    justify-content: space-between;
  }
  .sort-group label {
    display: none; 
  } */

  /* Cho các perks xuống dòng */
  /* .perks-list {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
  .collection-perks h2 {
    font-size: 20px;
  } */

  /* Ẩn nút "Quick Add" trên di động (khó hover) */
  /* .quick-add-btn {
    display: none;
  }
  .product-title {
    font-size: 15px;
  }
  .product-price {
    font-size: 14px;
  }
} */


/* =============================================
   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 {
        /* 👇 QUAN TRỌNG: ĐỂ ẢNH TO RA SÁT LỀ */
        width: 100%;            /* Ảnh chiếm 100% chiều rộng khung chứa */
        max-width: none;        /* Bỏ giới hạn chiều rộng tối đa (nếu có) */
        height: auto;           /* Chiều cao tự động */
        
        /* (Tùy chọn) Thêm bo góc nhẹ nếu thấy ảnh to quá bị cứng */
        /* border-radius: 12px; */ 
    }

    .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;
    }
}



/* =============================================
   MOBILE (Điện thoại - Dưới 768px)
   ============================================= */
@media (max-width: 768px) {

    /* --- 1. SỬA LOGO VÀ HEADER --- */
    .header-container {
        display: flex;
        flex-wrap: wrap;           /* Cho phép xuống dòng */
        justify-content: space-between; /* 👈 QUAN TRỌNG: Logo sang trái, Icon sang phải */
        align-items: center;
        padding: 10px 20px;        /* Căn lề 2 bên cho thoáng */
    }

    .header-logo {
        order: 1;                  /* Logo nằm đầu */
        flex: 0 0 auto;            /* Không co giãn */
        margin-bottom: 5px;
    }
    
    /* Chỉnh logo nhỏ lại chút cho cân đối mobile */
    .header-logo img {
        height: 30px; 
    }

    .header-actions {
        order: 2;                  /* Icon giỏ hàng nằm thứ 2 (bên phải) */
        display: flex;
        gap: 15px;
        position: static;          /* Bỏ absolute để canh chỉnh tự nhiên */
    }

    /* Menu trượt ngang nằm dòng dưới cùng */
    .main-nav {
        order: 3;
        width: 100%;
        margin-top: 10px;          /* Cách Logo một chút */
        padding-top: 10px;
        border-top: 1px solid #eee;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .main-nav .nav-list {
        padding-left: 0;
        gap: 20px;
        justify-content: flex-start;
    }
    
    /* Ẩn thanh cuộn menu */
    .main-nav::-webkit-scrollbar { display: none; }


    /* --- 2. SỬA LỖI FILTER BỊ CHE (OVERLAP) --- */
    /* Lý do: Header mobile cao hơn Header PC (do có 2 dòng), 
       nên cần đẩy nội dung xuống nhiều hơn.
    */
    .products-toolbar {
        /* Tăng margin-top lên để thoát khỏi vùng Header cố định */
        /* Giá trị này = Chiều cao Header Mobile + khoảng hở thêm */
        margin-top: 100px !important; 
        
        flex-direction: column;    /* Xếp dọc Filter và Sort */
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 30px;
        padding: 0 20px;
        border: none;              /* Bỏ viền khung cho đỡ rối trên mobile */
    }

    .toolbar-left {
        width: 100%;
        justify-content: space-between; /* Căn đều nút Filter và Sort */
    }

    /* Ẩn nút chọn layout (lưới) vì mobile mặc định 2 cột */
    .toolbar-right {
        display: none; 
    }


    /* --- 3. PRODUCT GALLERY (GIỮ NGUYÊN CODE CŨ) --- */
    .product-gallery,
    .product-gallery.layout-2, 
    .product-gallery.layout-4 {
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 10px;
        margin: 0;
    }

    .product img, 
    .image-wrapper {
        height: 200px !important; 
    }
    
    .product .title { font-size: 14px; }
    .product .price { font-size: 13px; }


    /* --- 4. FILTER PANEL (ẨN/HIỆN NHƯ ĐÃ LÀM) --- */
    .filters-panel {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 85%;
        max-width: 320px;
        background: #fff;
        z-index: 3000;
        padding: 20px;
        padding-top: 60px;
        box-shadow: 4px 0 15px rgba(0,0,0,0.1);
        transform: translateX(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }

    .filters-panel.visible {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }
    
    /* Thêm lớp phủ đen (Overlay) nếu muốn */
    .filters-panel.visible::before {
        content: '';
        position: fixed;
        top: 0; left: 100%;
        width: 100vw; height: 100%;
        background: rgba(0,0,0,0.5);
    }
    
    .close-filter-mobile {
        position: absolute;
        top: 15px; right: 15px;
        background: transparent;
        border: none;
        font-size: 24px;
        color: #8b1e14;
    }

    /* --- 5. FOOTER & PERKS (GIỮ NGUYÊN) --- */
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-bottom { flex-direction: column-reverse; gap: 20px; }
    .perks-container { flex-direction: column; }
    .perks-image { order: -1; width: 100%; }
}