/* Reset mặc định */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Cài đặt chung cho body */
body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #000;
}

.container {
    width: 90%;
    margin: 0 auto;
}

/* Header */
.header {
    background-color: #ffffff;
    color: #000000;
    padding: 0.5rem 0;
    text-align: center;
    position: none; /* Giữ header cố định khi cuộn */
    top: 0;
    width: 100%;
    z-index: 1000; /* Đảm bảo header luôn nằm trên các phần tử khác */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Thêm bóng đổ cho header */
}


.header-top {
    text-align: right;
    padding: 0.5rem 0;
}

.header-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    flex-wrap: wrap;
}

.logo-container {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.logo-img {
    height: 80px;
    margin-right: 15px;
    mix-blend-mode: multiply;

}

.logo {
    font-size: 2rem;
    font-weight: 500;
    color: #0056b3;
    text-align: center;
}

/* Thông tin công ty */
.company-info {
    text-align: center;
    margin-bottom: 0.5rem;
}

.company-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000000;
}

.flag {
    width: 30px;
    height: auto;
    margin-right: 10px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.flag:hover {
    opacity: 0.8;
}

/* Menu điều hướng */
.nav-links {
    display: flex;
    justify-content: center;
    list-style: none;
}

.nav-links li {
    margin: 0 1rem;
}

.nav-links a {
    color: #000000;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #0056b3;
}

/* Dropdown menu */
.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    list-style: none;
    padding: 0.5rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.dropdown-content li {
    margin: 0.5rem 0;
}

.dropdown-content a {
    color: #000;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    display: block;
    transition: background-color 0.3s ease;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
    color: #0056b3;
}

.dropdown:hover .dropdown-content {
    display: block;
    transform: translateY(10px);
}

/* Hero section */
.hero {
    background-image: url('images/hero.jpg');
    background-size: cover;
    background-position: center;
    color: #000000;
    text-align: center;
    padding: 5rem 0;
    transition: background-position 0.5s ease;
}

.hero:hover {
    background-position: bottom;
}

.hero h2 {
    font-size: 2.5rem;
}

.hero p {
    font-size: 1.5rem;
    margin: 1rem 0;
}

.btn {
    background-color: #0056b3;
    color: #fff;
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    font-weight: 500;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #ffcc00;
    color: #000;
}

/* Products section */
.products {
    padding: 4rem 0;
    background-color: #0056b3;
    color: #000000;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

.product-card {
    background-color: #f9f9f9;
    padding: 1.5rem;
    text-align: center;
    border-radius: 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-20px);
}

.product-card img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    mix-blend-mode: multiply;
}

.product-card h3 {
    font-size: 1.5rem;
    margin: 1rem 0;
}

.product-card a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.product-card a:hover {
    text-decoration: underline;
    color: #0056b3;
}

/* About Section */
.about {
    padding: 4rem 0; 
    background-color: #ffffff;
    color: #000000;
}

.about .section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
    font-weight: 700;
}

.about p {
    font-size: 1.2rem; 
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-align: justify; 
}

/* Đối tác */
.news {
    background-color: #0056b3;
    padding: 20px 0;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.partners {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.flip-container {
    perspective: 999999px;
}

.flip-card {
    width: 150px;
    height: 150px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.flip-card:hover {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background-color: #ffffff;
}

.flip-card-front {
    z-index: 2;
}

.flip-card-back {
    transform: rotateY(180deg);
    z-index: 1; /* Đảm bảo hiển thị mặt sau khi thẻ lật */
}

.partner-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}




/* Danh sách giá trị cốt lõi */
.about ul {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
}

.about ul li {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    line-height: 1.6;
    color: #0056b3;
    list-style-type: disc;
}

/* Contact Section */
.contact {
    padding: 4rem 2rem; /* Thêm khoảng cách hai bên */
    background-color: #f9f9f9;
    color: #000000;
}

.contact p {
    font-size: 1.2rem; 
    line-height: 0.5;
    margin-bottom: 1.5rem;
}

.video-wrapper {
    /* box-shadow: 10px 14px 16px rgba(0, 0, 0, 0.1); */
    border-radius: 8px;
    display: flex;
    justify-content: center; /* Căn giữa theo chiều ngang */
    align-items: center; /* Căn giữa theo chiều dọc nếu cần */
    margin: 20px 0; /* Thêm khoảng cách phía trên và dưới */

}

.contact-info {
    display: flex; /* Sử dụng Flexbox để sắp xếp nội dung */
    flex-direction: column; /* Đặt hướng sắp xếp theo chiều dọc */
    gap: 0.5rem; /* Thêm khoảng cách giữa các mục */
}

.contact-info p {
    font-size: 1.2rem; 
    line-height: 1.5; /* Điều chỉnh khoảng cách giữa các dòng */
    margin: 0; /* Loại bỏ margin để sử dụng gap của Flexbox */
}

.contact-info a {
    color: #000000; /* Giữ màu xanh của liên kết */
    text-decoration: none; /* Loại bỏ gạch chân */
}

.contact-info a:hover{
    text-decoration: underline ;
    color: #0056b3;
}

#contact {
    background-color: #f8f9fa; /* Màu nền xám nhạt hiện đại */
}

/* Sử dụng Flexbox để tạo bố cục 2 cột */
#contact .container {
    display: flex;
    gap: 3rem; /* Khoảng cách giữa 2 cột */
    align-items: center; /* Canh giữa các cột theo chiều dọc */
    flex-wrap: wrap; /* Cho phép xuống dòng trên màn hình nhỏ */
}

/* Định dạng cho cột thông tin và cột bản đồ */
.contact-info-wrapper, .map-container {
    flex: 1 1 400px; /* Tự động co giãn nhưng chiều rộng cơ bản là 400px */
}

/* Định dạng bản đồ */
.map-container iframe {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 8px; /* Bo góc cho bản đồ */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Thêm bóng đổ nhẹ */
}

/* Định dạng cho từng dòng thông tin */
.contact-info-wrapper p {
    margin-bottom: 1.2rem;
    font-size: 1.1rem;
    display: flex; /* Bật flexbox để icon và text nằm trên một hàng */
    align-items: flex-start; /* Canh icon và text theo lề trên */
    line-height: 1.7; /* Tăng khoảng cách dòng cho dễ đọc */
}

/* Định dạng cho icon */
.contact-info-wrapper i {
    margin-right: 15px; /* Khoảng cách giữa icon và text */
    color: #0056b3; /* Màu xanh chủ đạo */
    font-size: 1.2rem;
    margin-top: 5px; /* Căn chỉnh icon cho đẹp hơn */
    width: 20px; /* Cố định chiều rộng icon */
    text-align: center;
}

/* Định dạng cho các đường link */
.contact-info-wrapper a {
    color: #0056b3;
    text-decoration: none;
    font-weight: 500;
}
.contact-info-wrapper a:hover {
    text-decoration: underline;
}

/* Footer */
.footer {
    background-color: #003366;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

.footer p {
    margin: 0;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
    .header {
        background-color: #ffffff;
        color: #000000;
        padding: 1rem 0;
        text-align: center;
        position: relative;
    }
    .header-bottom {
        flex-direction: column;
        align-items: center; /* Canh giữa logo và các mục */
        text-align: center;
    }

    .logo-container {
        margin-left: 0; /* Căn giữa logo */
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr); /* Hiển thị 2 sản phẩm mỗi dòng */
    }

    .about p, .about ul li {
        font-size: 1rem; /* Giảm kích thước chữ */
    }

    .btn {
        padding: 0.6rem 1rem; /* Giảm padding cho nút */
        font-size: 1rem;
    }

    .container {
        width: 95%; /* Tăng chiều rộng container cho tablet */
    }

    .contact-info p {
        font-size: 1rem; /* Giảm kích thước chữ */
    }

    .nav-links {
        flex-direction: column;
        align-items: center;
    }

    .nav-links li {
        margin: 10px 0;
    }
    
    
}

@media (max-width: 480px) {
    .header {
        background-color: #ffffff;
        color: #000000;
        padding: 1rem 0;
        text-align: center;
        position: relative;
    }
    .product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .hero h2 {
        font-size: 1.8rem; /* Giảm kích thước tiêu đề */
    }

    .hero p {
        font-size: 1.2rem; /* Giảm kích thước đoạn văn */
    }

    .btn {
        font-size: 0.9rem; /* Giảm kích thước chữ nút */
        padding: 0.5rem 1rem;
    }

    .logo {
        font-size: 1.5rem; /* Giảm kích thước logo */
    }

    .about ul li, .about p {
        font-size: 0.9rem; /* Giảm kích thước chữ */
    }

    .section-title {
        font-size: 1.5rem; /* Giảm kích thước tiêu đề */
    }

    .container {
        width: 100%; /* Tối đa hóa chiều rộng trên điện thoại */
        padding: 0 10px; /* Thêm khoảng cách hai bên */
    }

    .nav-links li {
        margin: 8px 0;
    }

    .header-bottom {
        flex-direction: column;
        align-items: center;
    }

    .contact-info p {
        font-size: 0.9rem; /* Giảm kích thước chữ cho thông tin liên hệ */
    }

    .info-table th, .info-table td {
        font-size: 0.9rem; /* Giảm kích thước bảng */
        padding: 6px; /* Giảm padding trong bảng */
    }

    .search-container {
        display: flex;
        flex-direction: column; /* Xếp các phần tử theo chiều dọc */
        width: 100%; /* Chiếm hết chiều rộng khung chứa */
        align-items: center; /* Căn giữa phần tử */
        gap: 10px; /* Khoảng cách giữa input và button */
    }
    
    #search-input {
        width: 100%; /* Chiều rộng 100% cho ô nhập */
        box-sizing: border-box; /* Đảm bảo padding không làm tràn khung */
        padding: 10px; /* Tạo khoảng cách bên trong cho input */
    }
    
    button {
        width: 30%; /* Chiều rộng 100% cho nút bấm */
        padding: 10px; /* Tạo khoảng cách bên trong cho nút */
        font-size: 16px; /* Kích thước chữ nút */
        background-color: #007bff; /* Màu xanh của nút */
        color: white; /* Màu chữ */
        border: none; /* Bỏ viền */
        cursor: pointer; /* Đổi chuột thành dạng pointer khi hover */
    }
    
    button:hover {
        background-color: #0056b3; /* Đổi màu khi hover */
    }
    .SP {
        flex-direction: column; /* Sắp xếp các sản phẩm theo chiều dọc */
        align-items: center;
        width: 100%;
        flex-wrap: wrap;
    }
    .map-container {
        position: relative;
        width: 100%;  /* Chiều rộng 100% để phù hợp với màn hình */
        height: 0; /* Chiều cao ban đầu là 0 */
        padding-bottom: 56.25%; /* Tỷ lệ khung hình 16:9 */
        overflow: hidden; /* Ẩn phần tràn ra ngoài */
    }

    .map-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;  /* Chiều rộng 100% để phù hợp với khung chứa */
        height: 100%; /* Chiều cao 100% để phù hợp với khung chứa */
        border: 0;    /* Không hiển thị viền */
    }

    /* Mũi tên cuộn trang */
    .scroll-to-top-btn {
        position: fixed;
        bottom: 15px; /* Thay đổi vị trí nút */
        right: 15px;
        background-color: #3498db;
        color: white;
        border: none;
        border-radius: 50%;
        padding: 0; /* Đặt padding về 0 để nội dung nằm chính giữa */
        font-size: 20px; /* Thay đổi kích thước font */
        width: 40px; /* Kích thước hình tròn */
        height: 40px; /* Kích thước hình tròn */
        display: flex; /* Sử dụng flexbox */
        align-items: center; /* Căn giữa theo chiều dọc */
        justify-content: center; /* Căn giữa theo chiều ngang */
        cursor: pointer;
        display: none; /* Ẩn nút mặc định, sẽ hiển thị khi cuộn trang */
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s ease;
    }
    .scroll-to-top-btn {
        width: 50px; /* Đặt kích thước nút */
        height: 50px; /* Đặt kích thước nút */
        font-size: 20px; /* Giảm kích thước font */
        padding: 0; /* Xóa padding để nút có hình dạng tròn hơn */
    }
}

/* Table styles */
.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
}

.info-table th, .info-table td {
    border: 1px solid #ddd;
    padding: 8px;
}

.info-table th {
    background-color: #f2f2f2;
}

/* Thanh tìm kiếm */
.search-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

#search-input {
    width: 300px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 20px;
    
}

button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

/* Thanh sản phẩm  */
.SP {
    display: flex;
    justify-content: left;
    list-style: none;
    padding: 5px;
}

.SP li {
    margin: 0 1rem;
}

.SP a {
    color: #000000;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.SP a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Hiệu ứng slide */
.hero {
    position: relative;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 1s ease;
}

.hero-slide.hidden {
    opacity: 0;
    z-index: -1;
}

.hero-slide.active {
    opacity: 1;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    z-index: 3;
    font-size: 24px;
    transition: background-color 0.3s ease;
}

.nav-arrow:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.left-arrow {
    left: 20px;
}

.right-arrow {
    right: 20px;
}
/* Modal */
#imageModal {
    display: none; /* Ẩn modal theo mặc định */
    position: fixed; /* Vị trí cố định */
    z-index: 1000; /* Đảm bảo modal nằm trên cùng */
    left: 0;
    top: 0;
    width: 100%; /* Chiều rộng toàn màn hình */
    height: 100%; /* Chiều cao toàn màn hình */
    overflow: auto; /* Cho phép cuộn nếu nội dung lớn hơn màn hình */
    background-color: rgba(0, 0, 0, 0.8); /* Nền tối với độ trong suốt */
}

/* Ảnh trong modal */
#modalImage {
    display: block;
    margin: auto; /* Tự động căn giữa */
    max-width: 90%; /* Giới hạn chiều rộng tối đa */
    max-height: 90%; /* Giới hạn chiều cao tối đa */
}

/* Nút đóng modal */
#closeModal {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}



/* CSS cho nút cuộn về đầu trang */
.scroll-to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100; /* Đảm bảo nút nằm phía trên các phần tử khác */
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 50%;
    padding: 10px 15px;
    font-size: 24px;
    cursor: pointer;
    display: none; /* Ẩn nút mặc định, sẽ hiển thị khi cuộn trang */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

.scroll-to-top-btn:hover {
    background-color: #2980b9;
}


/* zalo */
.zalo-btn {
    position: fixed;
    bottom: 70px; /* Đặt nút Zalo cách nút cuộn về đầu trang */
    left: 15px; 
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Thêm hiệu ứng chuyển động */
}

.zalo-btn:hover {
    background-color: #006bb3;
    transform: scale(1.3); /* Phóng to nút khi di chuột qua */
}

.zalo-icon {
    width: 34px; /* Kích thước icon Zalo */
    height: 34px;
}


/* Cấu trúc cơ bản cho danh sách */
ul.SP {
    list-style-type: none; /* Ẩn dấu chấm trước các mục */
    padding: 0;
    margin: 0;
}

ul.SP li {
    display: inline-block;
    margin-right: 20px;
    position: relative; /* Giữ vị trí cho dropdown */
}

ul.SP li a {
    text-decoration: none;
    color: black;
    font-size: 1.2rem;
}

ul.SP li a:hover {
    color: #006bb3ed;
    padding: 20px;
}

/* Cấu hình cho dropdown */
ul.SP li .dropdown-content {
    display: none; /* Ẩn danh sách con khi không hover */
    position: absolute; /* Đặt dropdown bên dưới mục cha */
    background-color: #f9f9f9;
    width: auto; /* Điều chỉnh nền theo cỡ chữ tự động */
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
    padding: 1px 1px; /* Giảm padding để không gian nền gọn gàng */
    border-radius: 4px;
    white-space: nowrap; /* Ngăn không cho text xuống dòng */
}

ul.SP li .dropdown-content li {
    display: block;
    padding: 4px 8px;
}

ul.SP li .dropdown-content li a {
    color: black;
    font-size: 1rem;
}

ul.SP li .dropdown-content li a:hover {
    color: #006bb3ed;
    padding: 7px 1px; /* Giảm padding để không gian nền gọn gàng */
}

ul.SP li:hover .dropdown-content {
    display: block; /* Hiển thị danh sách khi hover trên máy tính */
}

ul.SP li .dropdown-content li a:hover {
    background-color: #ddd;
}

/* Style for devices that do not support hover (touch devices) */
@media (hover: none) {
    ul.SP li .dropdown-content {
        position: relative;
    }

}
/* =================================================================== */
/* === KHỐI MÃ RESPONSIVE NÂNG CAO CHO TOÀN TRANG WEB === */
/* =================================================================== */

/* --- Dành cho Máy tính bảng (chiều rộng tối đa 1024px) --- */
@media (max-width: 1024px) {
    .header-bottom {
        flex-direction: column;
        gap: 1.5rem; /* Thêm khoảng cách giữa các khối */
    }

    .nav-links {
        flex-wrap: wrap; /* Cho phép các mục menu xuống dòng nếu không đủ chỗ */
        gap: 0.5rem 1.5rem;
    }

    .product-grid {
        /* Hiển thị 3 sản phẩm mỗi hàng trên tablet */
        grid-template-columns: repeat(3, 1fr);
    }

    .partners {
        gap: 1rem; /* Giảm khoảng cách logo đối tác */
    }

    .flip-card {
        width: 120px;
        height: 120px;
    }

    .contact .container {
        flex-direction: column;
        gap: 2rem;
    }
}

/* --- Dành cho Điện thoại di động (chiều rộng tối đa 768px) --- */
@media (max-width: 768px) {
    .container {
        width: 95%; /* Tăng chiều rộng container để nội dung thoáng hơn */
    }

    h1.logo {
        font-size: 1.8rem;
    }
    
    .company-name {
        font-size: 1rem;
    }

    .nav-links {
        flex-direction: column;
        gap: 1rem;
    }

    .product-grid {
        /* Hiển thị 2 sản phẩm mỗi hàng */
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .product-card {
        padding: 1rem;
    }

    .product-card:hover {
        transform: none; /* Tắt hiệu ứng nhấc lên trên thiết bị cảm ứng */
    }

    .section-title {
        font-size: 1.8rem;
    }

    .about p, .about li {
        font-size: 1rem;
    }

    .flip-card {
        width: 90px;
        height: 90px;
    }

    .flip-card:hover {
        transform: none; /* Tắt hiệu ứng lật trên thiết bị cảm ứng */
    }
    
    .search-container {
        flex-direction: column;
        width: 90%;
        gap: 0.5rem;
    }

    #search-input {
        width: 100%;
        font-size: 1rem;
    }

    .search-container button {
        width: 50%;
    }
    
    .zalo-btn {
        width: 45px;
        height: 45px;
        bottom: 65px;
        left: 15px;
    }
    
    .zalo-icon {
        width: 30px;
        height: 30px;
    }
    
    .scroll-to-top-btn {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
}

/* --- Dành cho Điện thoại di động màn hình nhỏ (chiều rộng tối đa 480px) --- */
@media (max-width: 480px) {
    .product-grid {
        /* Hiển thị 1 sản phẩm mỗi hàng cho màn hình rất nhỏ */
        grid-template-columns: 1fr;
    }
    
    .contact-info p, .contact-info a {
        font-size: 0.9rem;
    }
    
    .footer p {
        font-size: 0.8rem;
    }
}

/* Thêm vào file style_form.css */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

#search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.search-result-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.search-result-item:hover {
    background-color: #f5f5f5;
}

.search-result-item div:first-child {
    font-weight: bold;
    color: #006bb3;
}

/* Highlight từ khóa tìm kiếm */
.highlight {
    background-color: #ffeb3b;
    font-weight: bold;
    padding: 0 2px;
    border-radius: 2px;
}

/* Tối ưu hiển thị kết quả tìm kiếm */
.search-container {
    position: relative;
}

#search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    display: none;
    margin-top: 5px;
}

.search-result-item {
    padding: 8px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
}

.search-result-item:hover {
    background-color: #f5f9ff;
}