/* Products Section */
.products {
    background: white;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    color: #0066cc;
    margin-bottom: 3rem;
}

.product-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
    margin-bottom: 3rem;
}

.product-card {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 3px solid transparent;
}

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 102, 204, 0.2);
    }

    .product-card.active {
        border-color: #0066cc;
        background: #e6f2ff;
    }

.product-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.product-card h3 {
    font-size: 1.5rem;
    color: #0066cc;
    margin-bottom: 0.5rem;
}

.product-card p {
    color: #666;
}

.product-list {
    display: none;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 2rem;
    margin-top: 2rem;
}

    .product-list.active {
        display: block;
        animation: fadeIn 0.5s;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.product-item {
    background: white;
    padding: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

    .product-item h4 {
        color: #0066cc;
        margin-bottom: 0.5rem;
    }
    /* Hover toàn bộ thẻ */
    .product-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 102, 204, 0.2);
    }

/* Projects Section */
.projects {
    background: #f8f9fa;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.project-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

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

.project-image {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.project-info {
    padding: 1.5rem;
}

    .project-info h3 {
        color: #0066cc;
        margin-bottom: 0.5rem;
    }

    .project-info p {
        color: #666;
    }
.pool1 {
    height: 26vh;
    width: auto;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}
.product-pool1 {
    padding: 1.5rem;
}
    .product-pool1 h4 {
        font-size: clamp(16px, 2vw, 22px);
        font-weight: bold;
        line-height: 1.4em;
        height: 2.8em;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
    }

    .product-pool1 p {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.4em;
        height: 4.2em;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        white-space: normal;
        color: rgb(102, 102, 102);
    }

.art {
    
    height: 130px;
    width: 215px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

.boat {
    background: url("./Img/1 (2).jpg")center/cover no-repeat;
    height: 130px;
    width: 215px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}
.text-justify{
    text-align:justify;
}

.category-slider-wrapper {
    position: relative;
    margin: 20px 0;
    padding: 10px 30px;
    overflow: hidden;
}

.product-categories {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 2rem;
    margin-bottom: 3rem;
}

.product-card {
    flex-shrink: 0;
    width: calc((100% - 4rem) / 3);
}

.slider-arrow-sp {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid #d7cccc4d;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 5px;
    border: none;
    cursor: pointer;
}

.product-category-prev {
    left: 0px;
}

.product-category-next {
    right: 0px;
}

/*SLIDER DETAIL*/
.product-slider-container {
    position: relative;
    overflow: hidden;
}

.product-items {
    display: flex;
    transition: transform 0.3s ease-in-out;
    width: fit-content;
    padding: 20px 0;
}

    .product-items a {
        min-width: calc(25% - 33px);
        /*margin-right: 22px;*/
    }

/*.product-item {
    min-width: calc(25% - 15px);
    margin-right: 20px;
}*/

/* Nút điều hướng sản phẩm con */
.slider-arrow-detail {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid #d7cccc4d;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    padding-bottom: 5px;
    border: none;
    cursor: pointer;
}

.product-item-prev {
    left: 0;
}

.product-item-next {
    right: 0;
}

@media (max-width: 1024px) {
    .product-card {
        width: 100%;
    }

    .product-items a {
        min-width: 100%;
    }
}

/* Container chứa các sản phẩm chi tiết */
.product-items {
    display: flex; /* Bắt buộc để trượt ngang */
    flex-wrap: nowrap; /* Không xuống dòng */
    width: 100%;
    transition: transform 0.3s ease-in-out;
    /* Thiết lập khoảng cách cố định (gap) để đồng bộ với JS */
    /* Lưu ý: Nếu dùng gap ở đây thì JS phải cộng thêm gap vào itemWidth */
    gap: 20px;
    padding: 20px 0;
}

    /* Thẻ bao ngoài (thẻ a) */
    .product-items a {
        /* --- CÔNG THỨC CHO DESKTOP (Hiển thị 4 thẻ) --- */
        /* Giả sử muốn hiện 4 thẻ/hàng */
        /* Tổng gap = 20px * 3 khoảng trống = 60px */
        /* Width 1 thẻ = (100% - 60px) / 4 */
        width: calc((100% - 60px) / 4);
        /* Ngăn thẻ bị co lại */
        flex-shrink: 0;
        /* Reset margin cũ nếu có */
        margin-right: 0;
        min-width: auto; /* Bỏ min-width cũ đi */
        text-decoration: none; /* Bỏ gạch chân thẻ a */
    }

/* Thẻ con bên trong (để đảm bảo giao diện đẹp) */
.product-item {
    height: 100%; /* Để các thẻ cao bằng nhau */
    /* ... giữ nguyên các style khác (shadow, radius...) */
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    /* Tablet: Hiển thị 2 thẻ */
    .product-items a {
        width: calc((100% - 20px) / 2); /* 2 thẻ trừ 1 gap 20px */
    }
}

@media (max-width: 768px) {
    /* Mobile: Hiển thị 1 thẻ */
    .product-items a {
        width: 100%;
    }

    .product-items {
        /*gap: 0;*/ /* Mobile có thể bỏ gap cho dễ tính toán */
    }
}