/* Căn chỉnh tổng thể */
.Follow {
    display: flex;               /* Sử dụng Flexbox để căn chỉnh các phần tử */
    justify-content: space-between; /* Đặt khoảng cách đều giữa các phần tử */
    align-items: center;         /* Căn giữa theo chiều dọc */            /* Thêm khoảng cách bên trong */
    background: linear-gradient(135deg, #006400, #8FBC8F);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Thêm bóng đổ */
    color:white;
}

/* Căn chỉnh phần tử Facebook1 */
.Facebook1 {
    display: flex;                /* Dùng Flexbox để căn giữa hình ảnh và văn bản */
    align-items: center;          /* Căn giữa theo chiều dọc */
    gap: 10px;                    /* Khoảng cách giữa ảnh và văn bản */
}

.Facebook1 a {
    display: flex;                /* Đảm bảo thẻ a bao bọc tất cả nội dung */
    text-decoration: none;        /* Loại bỏ gạch dưới từ liên kết */
    color: inherit;               /* Kế thừa màu sắc từ phần tử cha */
}

.Facebook1 img {
    width: 30px;                 /* Đặt kích thước ảnh nhỏ */
    height: 20px;                 /* Đảm bảo ảnh luôn vuông */
}

.Facebook1 p {
    font-size: 16px;              /* Cỡ chữ vừa phải */
    color: white;                  /* Màu chữ tối */
    margin: 0;                    /* Loại bỏ khoảng cách mặc định của thẻ p */
}

/* Căn chỉnh phần Login */
.Login {
    display: flex;
    align-items: center;          /* Căn giữa theo chiều dọc */
    gap: 10px;                    /* Khoảng cách giữa ảnh và văn bản */
}

.Login img {
    width: 30px;                 /* Đặt kích thước ảnh nhỏ */
    height: 30px;                 /* Đảm bảo ảnh luôn vuông */
}
.Login a{
    display: flex;                /* Đảm bảo thẻ a bao bọc tất cả nội dung */
    text-decoration: none;        /* Loại bỏ gạch dưới từ liên kết */
    color: inherit;   
}
.Login p {
    font-size: 16px;              /* Cỡ chữ vừa phải */
    color: white;                  /* Màu chữ tối */
    margin: 0;                    /* Loại bỏ khoảng cách mặc định của thẻ p */
}

/* Responsive */
@media (max-width: 768px) {
    .Follow {
        flex-direction: column;    /* Chuyển các phần tử thành cột trên màn hình nhỏ */
        align-items: flex-start;   /* Căn các phần tử về phía bên trái */
    }

    .Facebook1, .Login {
        width: 100%;                /* Đảm bảo các phần tử chiếm toàn bộ chiều rộng */
        justify-content: flex-start; /* Căn các phần tử về phía bên trái */
        margin-bottom: 10px;         /* Thêm khoảng cách giữa các phần tử */
    }
}
.logonet {
    display: flex;               /* Dùng Flexbox để căn chỉnh các phần tử */
    justify-content: flex-end; /* Căn đều các phần tử */
             /* Căn giữa theo chiều dọc */
    padding: 10px 20px;          /* Khoảng cách giữa các phần tử và viền */
    background-color: #fff;      /* Màu nền trắng cho khu vực logonet */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Thêm bóng đổ */
}

/* Logo */
.logonet a img {
    width: 50px;                 /* Kích thước logo */
    height: auto;                /* Giữ tỉ lệ cho logo */
}

/* Tạo khối tìm kiếm */
.search-container {
    display: flex;
    align-items: center;
    gap: 10px;                   /* Khoảng cách giữa input và hình ảnh tìm kiếm */
    flex-grow: 1;                /* Chiếm hết không gian còn lại */
}

.search-container input {
    padding: 5px 10px;           /* Khoảng cách bên trong input */
    border: 1px solid #ccc;      /* Viền xám cho input */
    border-radius: 4px;          /* Bo góc cho input */
    width: 200px;                /* Độ rộng cố định cho input */
}

.search-container img {
    width: 20px;                 /* Kích thước hình ảnh tìm kiếm */
    height: 20px;                /* Giữ hình ảnh vuông */
    cursor: pointer;            /* Thêm con trỏ khi hover vào hình */
}

/* Căn chỉnh phần liên hệ */
.contact-info {
    display: flex;
    gap: 20px;                   /* Khoảng cách giữa các phần liên hệ */
}

/* Căn chỉnh các phần hotline và kỹ thuật */
.contact-info .hotline, .contact-info .technical {
    display: flex;
    align-items: center;
    gap: 5px;                    /* Khoảng cách giữa icon và văn bản */
}

.contact-info img {
    width: 20px;                 /* Kích thước biểu tượng điện thoại */
    height: 20px;                /* Giữ biểu tượng vuông */
}

.contact-info p {
    margin: 0;                   /* Loại bỏ khoảng cách mặc định của thẻ p */
    font-size: 14px;             /* Cỡ chữ vừa phải */
    color: #ff0000;  
    font-weight: 600;               /* Màu chữ tối */
}

/* Responsive */
@media (max-width: 768px) {
    .logonet {
        flex-direction: column;   /* Chuyển layout thành cột trên màn hình nhỏ */
        align-items: flex-start;  /* Căn các phần tử về phía trái */
        padding: 15px;             /* Thêm padding trên màn hình nhỏ */
    }

    .search-container {
        width: 100%;               /* Đảm bảo input chiếm hết chiều rộng */
        margin-bottom: 10px;        /* Thêm khoảng cách dưới input */
    }

    .contact-info {
        flex-direction: column;    /* Căn các phần liên hệ thành cột */
        gap: 10px;                  /* Khoảng cách giữa hotline và kỹ thuật */
    }
}
.Header {
    position: fixed;
    top: 120px;               /* Khoảng cách từ trên cùng của trang */
    left: 50%;                /* Đặt phần tử bắt đầu từ giữa */
    transform: translateX(-50%); /* Dịch chuyển phần tử về phía bên trái nửa chiều rộng của nó để căn giữa */
    z-index: 1000;            /* Đảm bảo menu luôn hiển thị phía trên các phần tử khác */
 /* Màu nền của menu */
    padding: 10px 0;          /* Padding trên/dưới cho menu */
    width: auto;              /* Chiều rộng tự động để phù hợp với nội dung */
    background: url() no-repeat;

}

.Header ul {
    list-style: none;         /* Loại bỏ dấu chấm trước mỗi mục */
    display: flex;            /* Dùng Flexbox để căn chỉnh các mục menu theo chiều ngang */
    justify-content: center;  /* Căn giữa các mục trong menu */
    margin: 0;                /* Loại bỏ khoảng cách mặc định */
    padding: 0;               /* Loại bỏ padding mặc định */
}

.Header li {
    margin: 0 15px;           /* Khoảng cách giữa các mục menu */
    white-space: nowrap;      /* Ngăn không cho chữ xuống hàng */
}

.Header a {
    color: white;             /* Màu chữ */
    text-decoration: none;    /* Loại bỏ gạch dưới */
    font-size: 18px;          /* Cỡ chữ */
    font-weight: 500;         /* Độ đậm của chữ */
    display: block;           /* Đảm bảo liên kết chiếm toàn bộ chiều rộng của phần tử li */
    text-align: center;       /* Căn giữa văn bản */
    padding: 5px 10px;        /* Thêm padding để tăng không gian xung quanh chữ */
    white-space: nowrap;      /* Ngăn không cho chữ xuống hàng */
}
.Header ul li:hover{
    background-color: burlywood;
}
/* Căn chỉnh tổng thể cho phần HotSale */
.HotSale {
    display: flex;
    justify-content: center; 
    align-items: center;     
    flex-wrap: wrap;            
    gap: 20px;                   
    width: 100%;                  /* Sử dụng 100% chiều rộng để linh hoạt hơn */
    max-width: 1200px;            /* Giới hạn chiều rộng tối đa */
    margin: 0 auto;               /* Canh giữa phần HotSale */
    background: linear-gradient(135deg, #81C784, #4CAF50);
    padding: 15px;                /* Thêm padding để có không gian bên trong */
    box-sizing: border-box;       /* Đảm bảo padding không làm tăng chiều rộng */
    border-radius: 10px;
}

.Card {
    display: flex;
    flex-wrap: wrap;              
}

.card {
    display: flex;
    flex-direction: column; /* Đặt chiều của card là dọc (column) */
    justify-content: space-between; /* Căn giữa nội dung trong card */
    align-items: center; /* Căn giữa các thành phần theo chiều ngang */
    border-radius: 10px;
    overflow: hidden;
    padding: 10px; /* Đảm bảo có một chút khoảng cách bên trong */
    position: relative; /* Để căn chỉnh button một cách chính xác */
    width: 300px;
}

.card img {
    max-width: 100%;              /* Hình ảnh chiếm toàn bộ chiều rộng của card */
    height: auto;
}

.card .textt {
    padding: 10px;
    text-align: center;
}

.card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease; /* Thêm hiệu ứng mượt khi hover */
}
.card button {
    background-color: #007bff;        /* Màu nền của nút */
    color: white;                     /* Màu chữ */
    border: none;                     /* Xóa viền mặc định của nút */
    border-radius: 10px;              /* Bo tròn góc để tạo cảm giác mềm mại */
    padding: 5px 10px;               /* Padding để nút có diện tích rộng hơn và dễ bấm */
    font-size: 16px;                  /* Kích thước chữ */
    font-weight: 600;                 /* Đậm chữ để nút nổi bật hơn */
    cursor: pointer;                 /* Thay đổi con trỏ thành hình bàn tay khi di chuột vào nút */
    transition: all 0.3s ease;       
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3); /* Thêm bóng đổ nhẹ */
    align-self: center;
}

/* Hiệu ứng hover khi di chuột vào nút */
.card button:hover {
    background-color: #0056b3;        /* Màu nền thay đổi khi hover */
    transform: translateY(-3px);      /* Nút nâng lên khi hover */
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.4); /* Bóng đổ đậm hơn khi hover */
}
.Card a{
    color:black ;
    text-decoration: none;
}
/* Responsive */
@media (max-width: 768px) {
    .HotSale {
        padding: 10px;               /* Giảm padding cho màn hình nhỏ */
    }

    .Card {
        flex-direction: column;      /* Đặt các card theo chiều dọc trên các màn hình nhỏ */
        align-items: center;         /* Căn giữa các sản phẩm */
    }

    .card {
        width: 100%;                  /* Đặt chiều rộng thẻ sản phẩm 100% trên màn hình nhỏ */
        margin-bottom: 20px;          /* Thêm khoảng cách giữa các thẻ card */
    }
}


.service-item img{
    transition: transform 0.3s ease;
}
.service-item img:hover{
    transform: scale(1.05); /* Hiệu ứng zoom khi hover */
}
.BanChay {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    max-width: 1200px;
    border-radius: 10px;
    background: linear-gradient(135deg, #006400, #8FBC8F);
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
    
}
.card1 {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 200px;
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    flex-shrink: 0;
}

.card1:hover {
    transform: scale(1.05);
}

.card1 img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 2px solid #f1f1f1;
}

.textt1 {
    padding: 15px;
}

.textt1 p {
    color: #007BFF;
    font-weight: bold;
    margin: 10px 0 0;
    cursor: pointer;
    transition: color 0.3s;
}

.textt1 p:hover {
    color: #0056b3;
}

.BanChay a {
    text-decoration: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .BanChay {
        flex-direction: column; /* Đặt các sản phẩm theo cột */
        align-items: center;
        width: 100%;
    }

    .BanChay .Card1 {
        display: none; /* Ẩn tất cả các sản phẩm */
        max-width: 100%; /* Đảm bảo mỗi sản phẩm chiếm toàn bộ chiều rộng của .BanChay */
    }

    .BanChay .Card1:first-child {
        display: block; /* Chỉ hiển thị sản phẩm đầu tiên */
    }

    .card1 {
        max-width: 100%; /* Đảm bảo card chiếm toàn bộ chiều rộng của container */
    }

    .card1 img {
        height: auto; /* Để hình ảnh tự động điều chỉnh theo chiều rộng */
    }
}

   
    /* Định dạng cho các thông báo lỗi hoặc thành công */
    .message {
        margin-top: 20px;
        text-align: center;
        font-size: 16px;
    }
    
    .message.success {
        color: #28a745;
    }
    
    .message.error {
        color: #dc3545;
    }
    /* Thiết lập cho Menuflex */
.Menuflex {
    background: linear-gradient(135deg, #006400, #3CB371);
    position: relative;
    width: 100%;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* Khi menu có lớp .fixed thì sẽ dính vào đầu trang */
.Menuflex.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Định dạng cho menu ngang */
.Menuflex ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

.Menuflex ul li {
    margin: 0 20px;
}

.Menuflex ul li a {
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s, padding 0.3s; /* Thêm transition cho padding */
}

.Menuflex ul li a:hover {
    background-color: #2067b3;
    color: #fff;
}

/* Thêm một chút padding cho khi menu ở trạng thái fixed */
.Menuflex.fixed ul li a {
    padding: 10px 20px;
}


/* Thiết lập kiểu cho menu trên các thiết bị di động */
@media (max-width: 768px) {
    .Menuflex ul {
        display: none;
        width: 100%;
        flex-direction: column; 
        position: absolute;
        top: 50px;
        left: 0;
       background: linear-gradient(135deg, #006400, #3CB371);        z-index: 1000;
    }

    .Menuflex ul li {
        margin: 10px 0;
        text-align: center;
        width: 100%;
    }

    .Menuflex ul li a {
        padding: 15px;
    }

}

    .LienHe a{
        text-decoration: none;
        font-weight: 600;
    }
    
    /* Phần Thông Tin */
    .ThongTin {
        background-color: #f8f9fa; /* Màu nền sáng */
        border-top: 4px solid #007bff; /* Viền trên màu xanh dương */
    }
    
    .ThongTin b {
        font-weight: bold;
        color: #333;
    }
    
    .ThongTin p {
        font-size: 16px;
        color: #555;
        line-height: 1.6;
    }
    
    .ThongTin a {
        color: #007bff; /* Màu xanh dương cho liên kết */
        text-decoration: none; /* Không gạch chân */
    }
    
    .ThongTin a:hover {
        text-decoration: underline; /* Gạch chân khi hover */
    }
    
    .ThongTin .container {
        max-width: 1000px;
    }
    
    @media (max-width: 768px) {
        .ThongTin b {
            font-size: 18px; /* Font size lớn hơn cho tiêu đề */
        }
    
        .ThongTin p {
            font-size: 14px; /* Giảm kích thước chữ cho điện thoại */
        }
    }
    .LienHe {
        background-color: #f9f9f9; /* Màu nền nhẹ nhàng */
        border-top: 4px solid #007bff; /* Viền trên màu xanh dương */
    }
    
    .LienHe h6 {
        font-size: 22px;
        font-weight: bold;
        color: #333;
        margin-bottom: 0; /* Giảm khoảng cách dưới tiêu đề */
    }
    
    .LienHe p {
        font-size: 16px;
        color: #555;
        margin-bottom: 10px;
    }
    
    .LienHe .col-md-6 {
        padding: 15px;
    }
    
    .LienHe a {
        color: #007bff; /* Màu xanh dương cho số điện thoại */
        text-decoration: none; /* Không gạch chân */
    }
    
    .LienHe a:hover {
        text-decoration: underline; /* Gạch chân khi hover */
    }
    
    .LienHe .mb-3 {
        margin-bottom: 1rem;
    }
    
    @media (max-width: 768px) {
        .LienHe h6 {
            font-size: 20px;
        }
    
        .LienHe p {
            font-size: 14px;
        }
    }
    /* Tạo khoảng cách giữa các phần tử trong phần giới thiệu */
    .GioiThieu {
        background-color: #f9f9f9; /* Màu nền nhẹ nhàng */
        padding: 30px;
        width: 1200px;
        border:1px solid #ccc;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        margin-top: 30px;
        font-family: Arial, sans-serif;
        margin: 0 auto;
    }

/* Cấu trúc chung cho khu vực hiển thị tất cả sản phẩm */
.AllSp {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    background-color: #f4f4f4;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 10px;
}

/* Định dạng cho khu vực chứa các thẻ sản phẩm */
.Card2 {
    display: flex;
    flex-wrap: wrap;
}

/* Định dạng thẻ sản phẩm (card) */
.card2 {
    display: flex;
    flex-direction: column; /* Sắp xếp các phần tử trong card theo chiều dọc */
    justify-content: space-between; /* Căn giữa nội dung trong card */
    align-items: center; /* Căn giữa các phần tử theo chiều ngang */
    border: 1px solid #ccc; /* Đường viền mỏng cho card */
    border-radius: 10px; /* Bo tròn góc card */
    overflow: hidden;
    padding: 10px; /* Khoảng cách trong card */
    position: relative; /* Để căn chỉnh các phần tử nội bộ */
    width: 300px; /* Đặt chiều rộng cố định cho card */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hiệu ứng khi hover */
}

/* Hiệu ứng khi hover vào card */
.card2:hover {
    transform: translateY(-5px); /* Nâng lên khi hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Bóng đổ nhẹ khi hover */
}

/* Định dạng cho hình ảnh trong thẻ sản phẩm */
.card2 img {
    max-width: 100%; /* Đảm bảo hình ảnh chiếm hết chiều rộng card */
    height: auto; /* Giữ tỷ lệ chiều cao của hình ảnh */
}

/* Định dạng cho phần thông tin sản phẩm trong card */
.card2 .textt {
    padding: 10px;
    text-align: center; /* Căn giữa nội dung */
}

/* Định dạng cho nút "Xem Thêm" */
.card2 button {
    background-color: #007bff; /* Màu nền nút */
    color: white; /* Màu chữ trắng */
    border: none; /* Xóa viền của nút */
    border-radius: 10px; /* Bo tròn các góc */
    padding: 5px 10px; /* Padding để nút dễ click */
    font-size: 16px; /* Kích thước chữ */
    font-weight: 600; /* Đậm chữ */
    cursor: pointer; /* Con trỏ bàn tay khi hover */
    transition: all 0.3s ease; /* Hiệu ứng chuyển động mượt mà */
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3); /* Bóng đổ nhẹ */
    align-self: center; /* Căn giữa nút trong card */
}

/* Hiệu ứng khi hover vào nút "Xem Thêm" */
.card2 button:hover {
    background-color: #0056b3; /* Màu nền thay đổi khi hover */
    transform: translateY(-3px); /* Nút nâng lên khi hover */
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.4); /* Bóng đổ đậm hơn khi hover */
}

/* Định dạng cho các liên kết "Xem Thêm" */
.Card2 a {
    color: black;
    text-decoration: none;
}

/* Responsive cho các màn hình nhỏ */
@media (max-width: 768px) {
    .AllSp {
        padding: 10px; /* Giảm padding cho màn hình nhỏ */
    }

    .Card2 {
        flex-direction: column; /* Sắp xếp các card theo chiều dọc */
        align-items: center; /* Căn giữa các sản phẩm */
    }

    .card2 {
        width: 100%; /* Đặt chiều rộng thẻ sản phẩm là 100% trên màn hình nhỏ */
        margin-bottom: 20px; /* Khoảng cách giữa các thẻ sản phẩm */
    }
}

    /* Định dạng chung cho ul */
    
.AllSp ul {
    list-style-type: none;   /* Xóa dấu chấm trước các mục trong danh sách */
    padding: 0;              /* Xóa padding mặc định */
    display: flex;           /* Hiển thị danh sách theo hàng ngang */
    justify-content: center; /* Căn giữa các phần tử trong ul */
    gap: 10px;               /* Khoảng cách giữa các mục trong danh sách */
    margin-top: 20px;        /* Khoảng cách phía trên của danh sách */
}

/* Định dạng cho mỗi mục li */
.AllSp ul li {
    margin: 0 5px;           /* Khoảng cách giữa các mục li */
}

/* Định dạng cho mỗi liên kết a */
.AllSp ul li a {
    border: 1px solid;
    text-decoration: none;   /* Bỏ gạch dưới mặc định */
    color: black;          /* Màu chữ của liên kết */
    font-size: 18px;         /* Kích thước chữ của liên kết */
    font-weight: 500;        /* Đặt chữ đậm vừa phải */
    padding: 5px 15px;       /* Padding giúp liên kết có diện tích dễ click hơn */
    border-radius: 10px;     /* Bo tròn các góc của liên kết */
    transition: all 0.3s ease; /* Thêm hiệu ứng chuyển động khi hover */
}

/* Hiệu ứng hover cho liên kết */
.AllSp ul li a:hover {
    color: white;            /* Màu chữ thay đổi thành trắng khi hover */
    background-color: #73a3d6; /* Màu nền của liên kết khi hover */
    transform: translateY(-3px); /* Đẩy lên khi hover */
}

/* Responsive cho màn hình nhỏ */
@media (max-width: 768px) {
   .AllSp ul {
        gap: 5px;             /* Giảm khoảng cách giữa các mục trên màn hình nhỏ */
        margin-top: 10px;      /* Giảm khoảng cách trên */
    }

   .AllSp ul li a {
        font-size: 16px;       /* Giảm kích thước chữ trên màn hình nhỏ */
        padding: 5px 10px;     /* Giảm padding trên màn hình nhỏ */
    }
}
/* Định dạng chung cho container Service */
.Service {
    display: flex;                     /* Sử dụng flexbox để sắp xếp các mục theo hàng ngang */
    justify-content: space-between;    /* Khoảng cách đều giữa các item */
    flex-wrap: wrap;                   /* Cho phép các mục xuống dòng nếu không đủ chỗ */
    gap: 20px;                         /* Khoảng cách giữa các item */
    padding: 20px;                     /* Padding cho container */         /* Màu nền của container */
    box-sizing: border-box;            /* Đảm bảo padding không làm tăng kích thước của container */
}

/* Định dạng cho mỗi mục itemm */
.itemm {
    background-color: white;          /* Màu nền của mỗi mục */
    border-radius: 10px;               /* Bo tròn các góc của item */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* Thêm bóng đổ nhẹ để nổi bật */
    width: 23%;                        /* Chiều rộng của mỗi mục (tùy chỉnh cho phù hợp với số lượng mục) */
    min-width: 250px;                  /* Chiều rộng tối thiểu */
    padding: 15px;                     /* Padding bên trong mỗi item */
    text-align: center;                /* Căn giữa nội dung trong item */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hiệu ứng khi hover */
}

/* Định dạng cho hình ảnh trong item */
.itemm img {
    width: 100%;                       /* Hình ảnh chiếm toàn bộ chiều rộng của item */
    height: auto;                      /* Giữ tỷ lệ của hình ảnh */
    border-radius: 10px;               /* Bo tròn các góc của hình ảnh */
    margin-bottom: 15px;               /* Khoảng cách giữa hình ảnh và tiêu đề */
}

/* Định dạng cho tiêu đề b trong mỗi item */
.itemm b {
    font-size: 18px;                   /* Kích thước chữ tiêu đề */
    font-weight: bold;                 /* Làm chữ đậm */
    color: #333;                       /* Màu chữ tiêu đề */
    display: block;                    /* Đảm bảo tiêu đề chiếm một dòng riêng */
    margin-bottom: 10px;               /* Khoảng cách giữa tiêu đề và phần mô tả */
    
}


/* Định dạng cho đoạn văn (p) trong mỗi item */
.itemm a p {
    font-size: 14px;                   /* Kích thước chữ của mô tả */
    color: #666;                       /* Màu chữ của mô tả */
    line-height: 1.6;                  /* Giãn cách dòng cho dễ đọc */
    margin: 0;                          /* Xóa margin mặc định */
    text-decoration: none;

}


/* Hiệu ứng khi hover vào mỗi mục */
.itemm:hover {
    transform: translateY(-5px);       /* Nâng item lên khi hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Bóng đổ đậm hơn khi hover */
}

/* Responsive cho màn hình nhỏ */
@media (max-width: 768px) {
    .Service {
        padding: 10px;                 /* Giảm padding cho container */
        flex-direction: column;        /* Sắp xếp các mục theo chiều dọc */
        align-items: center;           /* Căn giữa các item */
    }

    .itemm {
        width: 90%;                    /* Đặt chiều rộng của mỗi mục là 90% trên màn hình nhỏ */
        margin-bottom: 20px;            /* Thêm khoảng cách giữa các item */
    }

    .itemm img {
        max-height: 370px;             /* Giới hạn chiều cao của hình ảnh */
    }
}
/* Định dạng chung cho container .fakenew */
.fakenew {
    display: flex;                     /* Sử dụng flexbox để sắp xếp các mục tin tức */
    justify-content: space-between;    /* Các mục sẽ có khoảng cách đều nhau */
    flex-wrap: wrap;                   /* Cho phép các mục xuống dòng nếu không đủ chỗ */
    gap: 20px;                         /* Khoảng cách giữa các mục */
    padding: 20px;                     /* Padding cho container */
    background-color: #f4f4f4;         /* Màu nền cho container */
              /* Đảm bảo padding không làm tăng kích thước container */
}

/* Định dạng cho mỗi mục tin tức .new */
.new {
    background-color: white;          /* Màu nền trắng cho mỗi mục tin tức */
    border-radius: 10px;               /* Bo tròn các góc của mục tin tức */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* Thêm bóng đổ nhẹ cho các mục tin tức */
    width: 22%;                        /* Chiều rộng của mỗi mục tin tức */
    min-width: 250px;                  /* Chiều rộng tối thiểu */
    padding: 15px;                     /* Padding bên trong mỗi mục tin tức */
    text-align: center;                /* Căn giữa nội dung trong mục */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hiệu ứng khi hover */
}

/* Định dạng cho hình ảnh trong mỗi mục tin tức */
.new img {
    width: 100%;                       /* Hình ảnh chiếm toàn bộ chiều rộng của mục */
    height: auto;                      /* Giữ tỷ lệ của hình ảnh */
    border-radius: 10px;               /* Bo tròn các góc của hình ảnh */
    margin-bottom: 10px;               /* Khoảng cách giữa hình ảnh và tiêu đề */
}

/* Định dạng cho tiêu đề b trong mỗi mục tin tức */
.new b {
    font-size: 16px;                   /* Kích thước chữ tiêu đề */
    font-weight: bold;                 /* Làm chữ đậm */
    color: #333;                       /* Màu chữ của tiêu đề */
    display: block;                    /* Đảm bảo tiêu đề chiếm một dòng riêng */
    margin-top: 10px;                  /* Khoảng cách giữa hình ảnh và tiêu đề */
    margin-bottom: 10px;               /* Khoảng cách giữa tiêu đề và phần mô tả */
}

/* Hiệu ứng khi hover vào mỗi mục tin tức */
.new:hover {
    transform: translateY(-5px);       /* Nâng mục lên khi hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Bóng đổ đậm hơn khi hover */
}

/* Responsive cho màn hình nhỏ */
@media (max-width: 768px) {
    .fakenew {
        padding: 10px;                 /* Giảm padding cho container */
        flex-direction: column;        /* Các mục sẽ được sắp xếp theo chiều dọc */
        align-items: center;           /* Căn giữa các mục tin tức */
    }

    .new {
        width: 90%;                    /* Đặt chiều rộng của mỗi mục là 90% trên màn hình nhỏ */
        margin-bottom: 20px;            /* Thêm khoảng cách giữa các mục tin tức */
    }
}
.Lmao {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    max-width: 600px;
    margin: 20px auto;
}

.Lmao p {
    margin-bottom: 15px;
}

.Lmao strong {
    color: #2C3E50;
    font-weight: bold;
}

.Lmao a {
    color: #2980B9;
    text-decoration: none;
}

.Lmao a:hover {
    text-decoration: underline;
}

.Lmao p:first-child {
    font-size: 16px;
    color: #555;
}

.Lmao p:last-child {
    font-size: 14px;
}

.card3 :hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease; /* Thêm hiệu ứng mượt khi hover */
}
/* Admin Panel Styles */
.admin-panel {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 30px auto;
}

.admin-panel h2 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

/* Form styles */
.admin-panel form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Label styles */
.admin-panel label {
    font-size: 16px;
    color: #555;
    font-weight: 500;
}

/* Input and Textarea */
.admin-panel input[type="file"],
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    outline: none;
}

/* Input hover and focus */
.admin-panel input[type="file"]:hover,
textarea:hover,
.admin-panel input[type="file"]:focus,
textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* Button styles */
.admin-panel button[type="submit"] {
    padding: 12px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: center;
}

/* Button hover effect */
.admin-panel button[type="submit"]:hover {
    background-color: #0056b3;
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-panel {
        width: 90%;
        padding: 15px;
    }

    .admin-panel h2 {
        font-size: 20px;
    }

    .admin-panel button[type="submit"] {
        width: 100%;
    }
}
.ChungToi {
    display: flex;
    justify-content: center; /* Đảm bảo các phần tử căn theo chiều dọc */
    align-items: center; /* Căn giữa theo chiều ngang */
    background-color: rgb(255, 255, 255); /* Nền sáng cho phần này */
    gap: 250px;
}

.Logoo img {
    width: 80px; /* Kích thước của logo */
    height: auto;
    margin-bottom: 10px; /* Khoảng cách giữa logo và phần tìm kiếm */
    margin-top:10px;
}

.TimKiem {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 5px 15px;
    background-color: white;
    width: 400px;
    margin-bottom: 10px; /* Khoảng cách giữa thanh tìm kiếm và phần hotline */
}

.TimKiem input {
    border: none;
    outline: none;
    padding: 5px 10px;
    font-size: 16px;
    width: 100%;
}

.TimKiem img {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 10px;
}

.HotLine {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    font-size: 16px;
    color: black;
    margin-bottom: 10px; /* Khoảng cách giữa hotline và kỹ thuật */
    color:red;
    font-weight:600;
}

.HotLine p  {
    margin: 0;
    margin-right: 10px;
}

.HotLine img  {
    width: 20px;
    height: 20px;
    margin-bottom:25px;
    cursor: pointer;
}

.HotLine p,  .HotLine img  {
    display: inline-block;
}