/* Container bao ngoài */
.service-detail-container {
    padding: 20px 0;
    max-width: 900px;
    margin: 0 auto;
}

/* Thanh tiêu đề màu đỏ phía trên */
.service-banner-title {
    background-color: #A50000; /* Màu đỏ thương hiệu */
    color: white;
    text-align: center;
    padding: 12px 20px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

    .service-banner-title h2 {
        font-size: 22px;
        font-weight: bold;
        margin: 0;
    }

/* Hệ thống lưới sản phẩm */
.product-layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Mặc định 2 cột như trong ảnh */
    gap: 30px; /* Khoảng cách giữa các ô */
}

/* Từng ô sản phẩm */
.product-card {
    border: solid 1px #808080;
    padding: 20px 0;
    text-align: center;
    transition: transform 0.3s ease;

    /* Thiết lập Flexbox để căn giữa nội dung bên trong card */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Khung ảnh sản phẩm */
.product-image {
    width: 85%;
    aspect-ratio: 4 / 3; /* Giữ tỉ lệ ảnh đồng nhất */
    overflow: hidden;
    margin: 0 auto 15px auto;
    /* Căn giữa ảnh bên trong khung 4/3 */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9; /* Thêm nền nhẹ để lộ rõ phần 20% trống (tùy chọn) */
}

.product-card.full-image {
    padding-top: 0 !important;
    padding-bottom: 15px; /* Giữ khoảng cách chân trang cho đẹp */
}

/* Kiểu đặc biệt khi lvhd = "thep" (Ảnh tràn khung) */
.product-card.full-image .product-image {
    width: 100%;
    margin-bottom: 15px;
}

    .product-image img {
        /* Để ảnh tràn 100% của cái khung 80% đã định nghĩa ở trên */
        width: 100%;
        height: 100%;
        object-fit: cover; /* Đảm bảo ảnh lấp đầy khung mà không bị méo */
    }

/* Tên sản phẩm phía dưới ảnh */
.product-name {
    font-size: 18px;
    font-weight: bold;
    color: #444;
    text-transform: uppercase;
    margin-top: 10px;
}

/* 2. ĐIỀU KIỆN ĐẶC BIỆT: Chỉ dành cho Cáp điện ống gió */
/* Khi card là full-image VÀ tiêu đề h3 đang bị ẩn hoàn toàn */
.product-card.full-image:has(.product-name.d-none) {
    padding-bottom: 0 !important;
}

    .product-card.full-image:has(.product-name.d-none) .product-image {
        margin-bottom: 0 !important;
    }

/* Đảm bảo ảnh không có khe hở li ti phía dưới */
.product-image img {
    display: block;
}

/* Class để ẩn tên sản phẩm (nếu không dùng Bootstrap) */
.d-none {
    display: none !important;
}

    /* Responsive: Trên di động chuyển về 1 cột */
    @media (max-width: 768px) {
        .product-layout-grid {
        grid-template-columns: 1fr;
    }
}

/* Container cho trang dự án */

/* Container bao ngoài */
.project-detail-container {
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* Thanh tiêu đề màu đỏ phía trên */
.project-banner-title {
    background-color: #A50000; /* Màu đỏ thương hiệu */
    color: white;
    text-align: center;
    padding: 12px 20px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.project-layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 cột như ảnh mẫu */
    gap: 30px;
}

.project-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 15px; /* Bo góc cho cả khung card */
    overflow: hidden;
    transition: all 0.3s ease;
    text-align: center;
}

    .project-card:hover {
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        transform: translateY(-5px);
    }

/* Khung ảnh dự án - Tỉ lệ nằm ngang */
.project-image {
    width: 100%;
    aspect-ratio: 16 / 9; /* Chiều rộng lớn hơn chiều cao */
    overflow: hidden;
}

    .project-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Nếu bạn muốn bo góc chỉ cho ảnh mà không dùng overflow:hidden ở card */
        border-radius: 15px 15px 0 0;
    }

/* Tên dự án */
.project-title {
    padding: 15px;
    font-size: 17px;
    font-weight: 600;
    color: #444;
    line-height: 1.4;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fcfcfc;
}

/* Responsive cho mobile */
@media (max-width: 768px) {
    .project-layout-grid {
        grid-template-columns: 1fr;
    }
}

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    font-family: Arial, sans-serif;
    gap: 15px; /* Khoảng cách giữa số và dấu / */
}

/* Kiểu dáng cho các con số */
.page-number {
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    color: #ccc; /* Màu xám cho các trang không được chọn */
    transition: color 0.3s ease;
}

    /* Trang đang xem (Active) */
    .page-number.active {
        color: #000; /* Màu đen đậm như ảnh mẫu */
    }

    .page-number:hover {
        color: #A50000; /* Hiệu ứng hover màu đỏ thương hiệu của bạn */
    }

/* Kiểu dáng cho dấu gạch chéo / */
.page-divider {
    font-size: 22px;
    color: #ddd;
    font-weight: 300;
}

* Container bao ngoài */
.news-detail-container {
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* Thanh tiêu đề màu đỏ phía trên */
.news-banner-title {
    background-color: #A50000; /* Màu đỏ thương hiệu */
    color: white;
    text-align: center;
    padding: 12px 20px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.news-layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding: 20px 0;
}

.news-card {
    background: #fff;
    border-bottom: 1px solid #eee; /* Chỉ kẻ gạch dưới cho nhẹ nhàng */
    padding-bottom: 20px;
}

.news-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 15px;
}

    .news-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

/* Hiệu ứng zoom ảnh khi hover vào toàn card */
.news-card:hover img {
    transform: scale(1.05);
}

.news-content-wrap {
    text-align: left; /* Tin tức nên để căn trái cho dễ đọc */
}

.news-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 10px 0 5px 0;
    line-height: 1.4;
}

.news-title-link {
    text-decoration: none;
}

    .news-title-link:hover .news-title {
        color: #A50000;
    }

.news-date {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

.news-intro {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    /* Giới hạn intro trong 3 dòng */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-detail-container {
    background-color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.news-detail-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
    margin-bottom: 10px;
    line-height: 1.3;
}

.news-detail-date {
    font-size: 14px;
    color: #888;
    margin-bottom: 20px;
}

.news-divider {
    border-top: 1px solid #eee;
    margin-bottom: 30px;
}

.news-detail-intro {
    font-size: 18px;
    font-weight: 500;
    color: #444;
    line-height: 1.6;
    margin-bottom: 25px;
    font-style: italic;
}

.news-detail-content {
    white-space: pre-line; /* Giúp trình duyệt tự xuống dòng khi gặp ký tự \n */
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    text-align: justify;
}

    /* Định dạng ảnh bên trong nội dung nếu có */
    .news-detail-content img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 20px auto;
    }

.btn-back {
    display: inline-block;
    color: #A50000;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

    .btn-back:hover {
        color: #333;
        transform: translateX(-5px);
    }