/* ========================================================================== */
/*           1. GLOBAL / BASE STYLES (Style chung cho toàn trang)             */
/* ========================================================================== */

.mobile-display {
    display: none;
    /* Ẩn phần tử này theo mặc định trên màn hình lớn. Nó sẽ được hiển thị trên mobile thông qua media query. */
}

a {
    text-decoration: none;
    /* Loại bỏ gạch chân mặc định của tất cả các thẻ liên kết (<a>). */
    color: black;
    /* Đặt màu chữ mặc định cho tất cả các thẻ liên kết (<a>) là màu đen. */
}

.container {
    display: flex;
    /* Bật chế độ Flexbox cho phần tử .container để kiểm soát bố cục các mục con bên trong. */
    flex-direction: column;
    /* Sắp xếp các mục con bên trong .container theo chiều dọc (từ trên xuống dưới). */
    margin: auto;
    /* Tự động căn giữa .container theo chiều ngang trên trang web. */
}

/* ========================================================================== */
/*           2. COMPONENT-SPECIFIC STYLES (Mặc định cho Desktop)              */
/* ========================================================================== */

/* --- BEGIN HEADER SECTION (Phần Đầu Trang - Header) --- */

.navbar {
    justify-content: center;
    /* Căn giữa các mục con bên trong navbar theo chiều ngang. */
    align-items: center;
    /* Căn giữa các mục con bên trong navbar theo chiều dọc. */
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    /* Tạo hiệu ứng đổ bóng cho navbar với hai lớp bóng khác nhau. */
    background-color: #fff;
    /* Đặt màu nền của navbar là màu trắng. */
    padding: 0 80px;
    /* Đặt đệm (padding) 0px cho trên/dưới và 80px cho trái/phải. */
    gap: 10px;
    /* Tạo khoảng cách 10px giữa các mục con trực tiếp trong navbar (khi sử dụng Flexbox/Grid). */
}

.navbar-logo {
    margin: auto 0;
    /* Căn giữa logo theo chiều dọc trong navbar. */
}

.navbar-logo img {
    width: auto;
    /* Đặt chiều rộng cố định cho hình ảnh logo là 202px. */
    /* aspect-ratio: 2.94;
    Đặt tỷ lệ khung hình cho hình ảnh (chiều rộng chia chiều cao).
    object-fit: cover;
    Đảm bảo hình ảnh bao phủ toàn bộ vùng chứa của nó, có thể cắt bớt nếu cần. */
}

.navbar-links,
.navbar-actions {
    display: flex;
    /* Bật chế độ Flexbox cho cả hai phần .navbar-links và .navbar-actions. */
    align-items: center;
    /* Căn giữa các mục con theo chiều dọc trong Flex container. */
    gap: 20px;
    /* Tạo khoảng cách 20px giữa các mục con trực tiếp. */
    font-size: 1rem;
    /* Đặt cỡ chữ là 16px. */
    line-height: 1.5rem;
    /* Đặt chiều cao dòng là 150% của cỡ chữ hiện tại. */
    font-weight: 500;
    /* Đặt độ đậm chữ là 600 (semi-bold). */
    font-family: "Google Sans", arial, sans-serif;
    color: #333333 !important;
    text-align: center;
    /* Căn giữa văn bản. */
    /*letter-spacing: 0.5px;
    /* Điều chỉnh khoảng cách giữa các ký tự là 0.5px. */
    padding: 0 12px;
    /* Đặt đệm 28px cho trên/dưới và 12px cho trái/phải. */
}

.navbar-links div {
    padding: 2px 0;
    /* Đặt đệm 2px cho trên/dưới và 0px cho trái/phải cho các thẻ div trong .navbar-links. */
    font-family: Inter, sans-serif;
    /* Sử dụng font "Inter" hoặc font không chân mặc định của hệ thống. */
}

.navbar-links div a:hover,
.navbar-links div a.active {
    border-bottom: 3px solid #FFC803;
    /* Khi di chuột qua (hover) hoặc khi liên kết đang hoạt động (active), thêm một đường viền dưới màu vàng dày 5px. */
}

.navbar-actions .action-search {
    display: flex;
    /* Bật chế độ Flexbox cho thanh tìm kiếm. */
    align-items: center;
    /* Căn giữa các mục con bên trong thanh tìm kiếm theo chiều dọc. */
    border: 1px solid rgba(145, 145, 145, 1);
    /* Thêm viền 1px màu xám đậm. */
    border-radius: 8px;
    /* Bo tròn các góc của thanh tìm kiếm 8px. */
    padding: 8px 12px;
    /* Đặt đệm bên trong 8px cho trên/dưới và 12px cho trái/phải. */
    font-size: 14px;
    /* Đặt cỡ chữ là 14px. */
    font-weight: 600;
    /* Đặt độ đậm chữ là 600 (semi-bold). */
    color: var(--Grey-gray-2, #919191);
    /* Đặt màu chữ là biến CSS --Grey-gray-2, nếu không có thì dùng #919191 (màu xám). */
    text-align: center;
    /* Căn giữa văn bản. */
    letter-spacing: 0.18px;
    /* Điều chỉnh khoảng cách giữa các ký tự là 0.18px. */
    line-height: 157%;
    /* Đặt chiều cao dòng là 157% của cỡ chữ hiện tại. */
    height: 25px;
    /* Đặt chiều cao cố định cho thanh tìm kiếm là 25px. */
}

.navbar-actions .action-search input {
    flex: 1;
    /* Cho phép trường input chiếm hết không gian còn lại trong Flex container. */
    border: none;
    /* Loại bỏ đường viền mặc định của input. */
    outline: none;
    /* Loại bỏ đường viền outline khi input được focus. */
    -webkit-box-orient: vertical;
    /* (Thuộc tính cũ, dùng cho Flexbox cũ của Webkit) Sắp xếp nội dung theo chiều dọc. */
    -webkit-line-clamp: 1;
    /* (Thuộc tính cũ, dùng cho Webkit) Giới hạn văn bản chỉ hiển thị trên một dòng. */
    text-overflow: ellipsis;
    /* Nếu văn bản quá dài, hiển thị dấu ba chấm (...) ở cuối. */
    margin: 0;
    /* Loại bỏ tất cả margin mặc định. */
    padding: 0;
    /* Loại bỏ tất cả padding mặc định. */
}

.navbar-actions .action-search img {
    width: 24px;
    /* Đặt chiều rộng cho hình ảnh icon tìm kiếm là 24px. */
    aspect-ratio: 1;
    /* Đặt tỷ lệ khung hình là 1:1 (hình vuông). */
    object-fit: cover;
    /* Đảm bảo hình ảnh bao phủ toàn bộ vùng chứa. */
}

.navbar-actions .user-actions {
    display: flex;
    /* Bật chế độ Flexbox cho phần hành động người dùng. */
    align-items: center;
    /* Căn giữa các mục con theo chiều dọc. */
    gap: 17px;
    /* Tạo khoảng cách 17px giữa các mục con. */
    border: 1px solid rgba(255, 200, 3, 1);
    /* Thêm viền 1px màu vàng. */
    border-radius: 8px;
    /* Bo tròn các góc 8px. */
    padding: 0 24px;
    /* Đặt đệm 0px cho trên/dưới và 24px cho trái/phải. */
}

.navbar-actions .user-actions img {
    width: 31px;
    /* Đặt chiều rộng cho hình ảnh trong phần hành động người dùng là 31px. */
    aspect-ratio: 1.03;
    /* Đặt tỷ lệ khung hình. */
    object-fit: cover;
    /* Đảm bảo hình ảnh bao phủ toàn bộ vùng chứa. */
}

.navbar-actions .user-actions .notification-icon {
    width: 24px;
    /* Đặt chiều rộng cho icon thông báo là 24px. */
    aspect-ratio: 1;
    /* Đặt tỷ lệ khung hình là 1:1 (hình vuông). */
    object-fit: cover;
    /* Đảm bảo hình ảnh bao phủ toàn bộ vùng chứa. */
    margin: auto 0;
    /* Căn giữa icon thông báo theo chiều dọc. */
}

/* --- END HEADER SECTION --- */


/* --- BEGIN CONTENT BODY SECTION (Phần Thân Nội Dung) --- */

.breadcrumb {
    display: flex;
    /* Bật chế độ Flexbox cho thanh điều hướng (breadcrumb). */
    gap: 8px;
    /* Tạo khoảng cách 8px giữa các mục con. */
    font: 14px Inter, sans-serif;
    /* Đặt cỡ chữ 14px và font "Inter" hoặc font không chân mặc định. */
    color: #919191;
    /* Đặt màu chữ là màu xám. */
    font-weight: 400;
    /* Đặt độ đậm chữ là 400 (normal). */
    margin-top: 30px;
    /* Đặt margin trên là 30px. */
}

.breadcrumb-item {
    display: flex;
    /* Bật chế độ Flexbox cho từng mục trong breadcrumb. */
}

.breadcrumb-item a {
    color: var(--Grey-gray-2, #919191);
    /* Đặt màu chữ của liên kết là biến CSS --Grey-gray-2, nếu không có thì dùng #919191 (màu xám). */
}

.breadcrumb-item.active {
    color: #000;
    /* Đặt màu chữ là màu đen cho mục breadcrumb đang hoạt động. */
    font-weight: 600;
    /* Đặt độ đậm chữ là 600 (semi-bold) cho mục đang hoạt động. */
}

/* --- END CONTENT BODY SECTION --- */


/* --- BEGIN FOOTER SECTION (Phần Chân Trang - Footer) --- */

.centered-container {
    align-items: center;
    /* Căn giữa các mục con theo chiều dọc. */
    align-self: stretch;
    /* Kéo dài phần tử này để chiếm toàn bộ chiều cao có thể. */
    box-shadow: 7px 0px 15px 0px rgba(0, 0, 0, 0.1);
    /* Tạo hiệu ứng đổ bóng. */
    background-color: darkgray;
    /* Đặt màu nền là nâu đen. */
    display: flex;
    /* Bật chế độ Flexbox. */
    justify-content: center;
    /* Căn giữa các mục con theo chiều ngang. */
    padding: 49px 60px;
    /* Đặt đệm 49px cho trên/dưới và 60px cho trái/phải. */
    color: #141414;
    /* Đặt màu chữ là màu trắng. */
}

.main-content {
    justify-content: space-between;
    /* Đặt khoảng cách đều giữa các mục con theo chiều ngang. */
    align-items: start;
    /* Căn chỉnh các mục con theo phía trên. */
    display: grid;
    /* Bật chế độ Grid layout. */
    grid-template-columns: auto auto auto auto auto auto auto;
    /* Định nghĩa 7 cột với chiều rộng tự động. */
    gap: 20px;
    /* Tạo khoảng cách 20px giữa các ô grid. */
}

.intro-section {
    align-items: start;
    /* Căn chỉnh các mục con theo phía trên. */
    align-self: stretch;
    /* Kéo dài phần tử này để chiếm toàn bộ chiều cao có thể. */
    display: flex;
    /* Bật chế độ Flexbox. */
    flex-direction: column;
    /* Sắp xếp các mục con theo chiều dọc. */
    font-size: 16px;
    /* Đặt cỡ chữ là 16px. */
    color: #333333;
    /* Đặt màu chữ là màu trắng. */
    font-weight: 400;
    /* Đặt độ đậm chữ là 400 (normal). */
    line-height: 120%;
    /* Đặt chiều cao dòng là 120% của cỡ chữ. */
    width: 320px;
    /* Đặt chiều rộng cố định là 320px. */
}

.intro-image {
    /*aspect-ratio: 3.03;
    /* Đặt tỷ lệ khung hình cho hình ảnh. */
    object-fit: auto;
    /* Tự động điều chỉnh kích thước hình ảnh để phù hợp. */
    object-position: center;
    /* Căn giữa hình ảnh trong vùng chứa của nó. */
    /* width: 202px;
    /* Đặt chiều rộng là 202px. */
    max-width: 100%;
    /* Đảm bảo chiều rộng tối đa không vượt quá 100% của phần tử cha. */
}

.intro-description {
    font-family: Inter, sans-serif;
    /* Sử dụng font "Inter" hoặc font không chân mặc định. */
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 25px;
    /* Đặt chiều cao dòng là 19px. */
    align-self: stretch;
    /* Kéo dài phần tử này để chiếm toàn bộ chiều cao có thể. */
    margin-top: 20px;
    /* Đặt margin trên là 24px. */
}

.intro-title,
.intro-subtitle {
    font-family: Inter, sans-serif;
    /* Sử dụng font "Inter" hoặc font không chân mặc định. */
    margin-top: 15px;
    /* Đặt margin trên là 15px. */
}

.link-section,
.support-section,
.contact-section,
.contractor-section,
.follow-us-section {
    display: flex;
    /* Bật chế độ Flexbox cho các phần này. */
    flex-direction: column;
    /* Sắp xếp các mục con theo chiều dọc. */
    font-size: 16px;
    /* Đặt cỡ chữ là 16px. */
    color: #333333;
    /* Đặt màu chữ là màu trắng. */
    font-weight: 400;
    /* Đặt độ đậm chữ là 400 (normal). */
    line-height: 120%;
    /* Đặt chiều cao dòng là 120% của cỡ chữ. */
}

.link-section a,
.support-section a,
.contractor-section a {
    color: #333333;
    /* Đặt màu chữ của liên kết trong các phần này là màu trắng. */
}

footer .section-title {
    font-family: Inter, sans-serif;
    /* Sử dụng font "Inter" hoặc font không chân mặc định. */
    font-weight: 700;
    /* Đặt độ đậm chữ là 700 (bold). */
    font-size: 16px;
    /* Đặt cỡ chữ là 16px. */
}

.link-item,
.support-item,
.contact-item,
.contractor-item,
.follow-us-item {
    font-family: Inter, sans-serif;
    /* Sử dụng font "Inter" hoặc font không chân mặc định. */
    margin-top: 16px;
    /* Đặt margin trên là 16px cho các mục này. */
}

.contact-info-section {
    display: flex;
    /* Bật chế độ Flexbox. */
    flex-direction: column;
    /* Sắp xếp các mục con theo chiều dọc. */
    font-size: 16px;
    /* Đặt cỡ chữ là 16px. */
    line-height: 120%;
    /* Đặt chiều cao dòng là 120% của cỡ chữ. */
}

footer .contact-info-title {
    color: #333333;
    /* Đặt màu chữ là màu trắng. */
    font-family: Inter, sans-serif;
    /* Sử dụng font "Inter" hoặc font không chân mặc định. */
    font-weight: 700;
    /* Đặt độ đậm chữ là 700 (bold). */
    font-size: 16px;
    /* Đặt cỡ chữ là 16px. */
}

.contact-info-row {
    display: flex;
    /* Bật chế độ Flexbox. */
    margin-top: 24px;
    /* Đặt margin trên là 24px. */
    gap: 16px;
    /* Tạo khoảng cách 16px giữa các mục con. */
    justify-content: space-between;
    /* Đặt khoảng cách đều giữa các mục con theo chiều ngang. */
}

.contact-info-key,
.contact-info-value {
    font-family: Inter, sans-serif;
    /* Sử dụng font "Inter" hoặc font không chân mặc định. */
}

.contact-info-key {
    color: #333333;
    /* Đặt màu chữ là màu trắng. */
    font-weight: 400;
    /* Đặt độ đậm chữ là 400 (normal). */
}

.contact-info-value {
    color: #000000;
    /* Đặt màu chữ là xanh dương. */
    font-weight: 600;
    /* Đặt độ đậm chữ là 600 (semi-bold). */
}

footer .contact-info-value a {
    color: #000000 !important;
    /* Đặt màu chữ của liên kết trong .contact-info-value là xanh dương, ghi đè các style khác. */
}

footer .social-media-icons {
    display: flex;
    /* Bật chế độ Flexbox. */
    margin-top: 17px;
    /* Đặt margin trên là 17px. */
    gap: 12px;
    /* Tạo khoảng cách 12px giữa các icon. */
    width: auto;
    /* Chiều rộng tự động. */
}

footer .social-media-icons img {
    width: 32px;
    /* Đặt chiều rộng của hình ảnh icon là 32px. */
    height: 32px;
    /* Đặt chiều cao của hình ảnh icon là 32px. */
}

.social-media-icon {
    aspect-ratio: 1;
    /* Đặt tỷ lệ khung hình là 1:1 (hình vuông). */
    object-fit: auto;
    /* Tự động điều chỉnh kích thước hình ảnh. */
    object-position: center;
    /* Căn giữa hình ảnh. */
    width: 32px;
    /* Đặt chiều rộng là 32px. */
}

.footer {
    align-self: stretch;
    /* Kéo dài phần tử này để chiếm toàn bộ chiều cao có thể. */
    background-color: #000;
    /* Đặt màu nền là màu đen. */
    display: flex;
    /* Bật chế độ Flexbox. */
    gap: 1px;
    /* Tạo khoảng cách 1px giữa các mục con. */
    font-size: 14px;
    /* Đặt cỡ chữ là 14px. */
    font-weight: 400;
    /* Đặt độ đậm chữ là 400 (normal). */
    letter-spacing: 0.18px;
    /* Điều chỉnh khoảng cách giữa các ký tự là 0.18px. */
    line-height: 22px;
    /* Đặt chiều cao dòng là 22px. */
    padding: 12px 80px;
    /* Đặt đệm 12px cho trên/dưới và 80px cho trái/phải. */
    color: #ffffff;
    /* Đặt màu chữ là màu trắng. */
}

.logo {
    aspect-ratio: 1;
    /* Đặt tỷ lệ khung hình là 1:1 (hình vuông). */
    object-fit: auto;
    /* Tự động điều chỉnh kích thước hình ảnh. */
    object-position: center;
    /* Căn giữa hình ảnh. */
    width: 24px;
    /* Đặt chiều rộng là 24px. */
    align-self: start;
    /* Căn chỉnh logo theo phía trên của vùng chứa Flex. */
}

.footer-content {
    font-family: Inter, sans-serif;
    /* Sử dụng font "Inter" hoặc font không chân mặc định. */
    flex: 1;
    /* Cho phép phần tử này chiếm hết không gian còn lại trong Flex container. */
}

.link {
    color: rgba(42, 38, 248, 1);
    /* Đặt màu chữ của các liên kết là xanh dương. */
}

/* --- END FOOTER SECTION --- */


/* ========================================================================== */
/*           3. MEDIA QUERIES (Điều chỉnh responsive cho các kích thước màn hình) */
/* ========================================================================== */

/* --- Mobile / Tablet styles (Áp dụng cho màn hình nhỏ hơn hoặc bằng 1429px) --- */
@media (max-width: 1429px) {

    /* Khi chiều rộng màn hình tối đa là 1429px (tức là từ 0 đến 1429px). */
    .mobile-hidden {
        display: none;
        /* Ẩn các phần tử có class này trên các màn hình nhỏ hơn 1430px. */
    }

    .mobile-display {
        display: block;
        /* Hiển thị các phần tử có class này trên các màn hình nhỏ hơn 1430px. */
    }

    /* Header Mobile */
    .header-mobile {
        width: 100%;
        /* Đặt chiều rộng của header mobile là 100%. */
    }

    .header-mobile-container {
        justify-content: space-between;
        /* Đặt khoảng cách đều giữa các mục con theo chiều ngang. */
        align-items: center;
        /* Căn giữa các mục con theo chiều dọc. */
        box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
        /* Tạo đổ bóng. */
        background-color: #fff;
        /* Màu nền trắng. */
        display: flex;
        /* Bật Flexbox. */
        padding: 8px 16px;
        /* Đặt đệm 8px cho trên/dưới và 16px cho trái/phải. */
    }

    .header-mobile .icon-image {
        aspect-ratio: 1;
        /* Tỷ lệ khung hình 1:1. */
        object-fit: auto;
        /* Tự động điều chỉnh kích thước. */
        object-position: center;
        /* Căn giữa ảnh. */
        width: 24px;
        /* Chiều rộng 24px. */
        align-self: stretch;
        /* Kéo dài theo chiều dọc. */
        margin: auto 0;
        /* Căn giữa theo chiều dọc. */
    }

    .header-mobile .main-image {
        aspect-ratio: auto;
        /* Tỷ lệ khung hình. */
        object-fit: auto;
        /* Tự động điều chỉnh kích thước. */
        object-position: center;
        /* Căn giữa ảnh. */
        width: 100px;
        /* Chiều rộng 119px. */
        align-self: stretch;
        /* Kéo dài theo chiều dọc. */
        max-width: 100%;
        /* Chiều rộng tối đa 100%. */
    }

    /* Footer Mobile */
    .centered-container {
        padding: 10px 10px;
        /* Đặt đệm 10px cho tất cả các phía. */
        margin-top: 15px;
        /* Đặt margin trên là 15px. */
    }

    .main-content {
        grid-template-columns: auto auto;
        /* Định nghĩa 2 cột với chiều rộng tự động. */
        gap: 10px;
        /* Tạo khoảng cách 10px giữa các ô grid. */
    }

    .intro-section {
        font-size: 12px;
        /* Cỡ chữ 12px. */
        width: calc(100% - 30px);
        /* Chiều rộng tính toán: 100% trừ đi 30px. */
        padding-left: 15px;
        /* Đệm trái 15px. */
        padding-right: 15px;
        /* Đệm phải 15px. */
        grid-column: span 2;
        /* Phần tử này chiếm 2 cột trong grid. */
    }

    .intro-description {
        margin-top: 14px;
        /* Margin trên 14px. */
    }

    .intro-title,
    .intro-subtitle {
        margin-top: 5px;
        /* Margin trên 5px. */
        font-size: 12px;
        /* Cỡ chữ 12px. */
        font-weight: normal;
        /* Độ đậm chữ bình thường. */
    }

    .link-section,
    .support-section,
    .contact-section,
    .contractor-section,
    .follow-us-section {
        font-size: 12px;
        /* Cỡ chữ 12px. */
        font-weight: normal;
        /* Độ đậm chữ bình thường. */
        min-width: 177px;
        /* Chiều rộng tối thiểu 177px. */
        padding-left: 15px;
        /* Đệm trái 15px. */
        padding-right: 0;
        /* Đệm phải 0. */
    }

    .follow-us-section {
        grid-column: span 2;
        /* Chiếm 2 cột trong grid. */
        margin: auto;
        /* Căn giữa theo chiều ngang. */
    }

    .follow-us-section h2 {
        text-align: center;
        /* Căn giữa tiêu đề h2. */
    }

    .follow-us-section img {
        width: 32px;
        /* Chiều rộng ảnh 32px. */
        height: 32px;
        /* Chiều cao ảnh 32px. */
    }

    footer .section-title {
        font-weight: 600;
        /* Độ đậm chữ 600. */
        font-size: 12px;
        /* Cỡ chữ 12px. */
        margin-bottom: 0;
        /* Margin dưới 0. */
    }

    .link-item,
    .support-item,
    .contact-item,
    .contractor-item,
    .follow-us-item {
        margin-top: 16px;
        /* Margin trên 16px. */
    }

    .contact-info-section {
        font-size: 12px;
        /* Cỡ chữ 12px. */
        width: auto;
        /* Chiều rộng tự động. */
        padding-left: 15px;
        /* Đệm trái 15px. */
        padding-right: 0;
        /* Đệm phải 0. */
    }

    footer .contact-info-title {
        font-size: 12px;
        /* Cỡ chữ 12px. */
    }

    .contact-info-row {
        margin-top: 15px;
        /* Margin trên 15px. */
        font-size: 12px;
        /* Cỡ chữ 12px. */
    }

    footer .social-media-icons {
        margin-top: 10px;
        /* Margin trên 10px. */
        justify-content: center;
        /* Căn giữa các icon. */
        padding-bottom: 0;
        /* Đệm dưới 0. */
        margin-bottom: -2px;
        /* Margin dưới -2px (dịch lên trên một chút). */
    }

    footer .social-media-icons img {
        width: 30px;
        /* Chiều rộng ảnh 30px. */
        height: 30px;
        /* Chiều cao ảnh 30px. */
    }

    .footer {
        padding: 15px 15px;
        /* Đặt đệm 15px cho tất cả các phía. */
    }

    .footer-content {
        font-size: 12px;
        /* Cỡ chữ 12px. */
        line-height: 20px;
        /* Chiều cao dòng 20px. */
        letter-spacing: 0.048px;
        /* Khoảng cách giữa các ký tự 0.048px. */
    }
}

/* --- Container width breakpoints (Điều chỉnh chiều rộng của .container) --- */

@media (min-width: 1px) {

    /* Khi chiều rộng màn hình từ 1px trở lên (áp dụng cho hầu hết các màn hình). */
    .header-desktop {
        display: none;
        /* Ẩn header desktop theo mặc định (nó sẽ được hiển thị lại ở breakpoint lớn hơn). */
    }
}

@media (min-width: 576px) {

    /* Khi chiều rộng màn hình từ 576px trở lên. */
    .container {
        max-width: 100%;
        /* Chiều rộng tối đa 540px. */
        margin-top: 0px;
        /* Margin trên 0px. */
    }
}

@media (min-width: 768px) {

    /* Khi chiều rộng màn hình từ 768px trở lên. */
    .container {
        max-width: 100%;
        /* Chiều rộng tối đa 720px. */
        margin-top: 0px;
        /* Margin trên 0px. */
    }
}

@media (min-width: 992px) {

    /* Khi chiều rộng màn hình từ 992px trở lên. */
    .container {
        max-width: 100%;
        /* Chiều rộng tối đa 960px. */
        margin-top: 0px;
        /* Margin trên 0px. */
    }
}

@media (min-width: 1200px) {

    /* Khi chiều rộng màn hình từ 1200px trở lên. */
    .container {
        max-width: 100%;
        /* Chiều rộng tối đa 1140px. */
        margin-top: 0px;
        /* Margin trên 0px. */
        min-height: calc(100vh - 500px);
        /* Chiều cao tối thiểu: 100% chiều cao của viewport trừ đi 500px. */
    }
}

/* --- Desktop specific layout (Áp dụng cho màn hình từ 1430px trở lên) --- */
@media (min-width: 1430px) {

    /* Khi chiều rộng màn hình tối thiểu là 1430px (cho màn hình desktop). */
    .container {
        max-width: 1370px;
        /* Chiều rộng tối đa 1370px. */
        margin-top: 85px;
        /* Margin trên 85px (để tạo khoảng trống cho header cố định). */
    }

    .header-desktop {
        display: flex;
        /* Hiển thị header desktop với Flexbox. */
        position: fixed !important;
        /* Đặt vị trí cố định trên màn hình, ghi đè các style khác. */
        z-index: 999;
        /* Đảm bảo header nằm trên các phần tử khác. */
        width: calc(100% - 160px);
        /* Chiều rộng tính toán: 100% của viewport trừ đi 160px (80px padding mỗi bên). */
        top: 0;
        /* Đặt ở phía trên cùng của viewport. */
        height: 85px;
        /* Chiều cao cố định là 85px. */
    }

    .header-desktop-container {
        max-width: 1370px;
        /* Chiều rộng tối đa 1370px. */
        width: 100%;
        /* Chiều rộng 100%. */
        display: flex;
        /* Bật Flexbox. */
        justify-content: space-between;
        /* Đặt khoảng cách đều giữa các mục con. */
    }

    .header-mobile {
        display: none;
        /* Ẩn header mobile trên màn hình desktop. */
    }

    .footer-content {
        max-width: 1370px;
        /* Chiều rộng tối đa 1370px. */
    }

    .footer {
        justify-content: center;
        /* Căn giữa các mục con trong footer theo chiều ngang. */
    }

    footer .main-content {
        width: 100%;
        /* Chiều rộng 100%. */
        max-width: 1370px;
        /* Chiều rộng tối đa 1370px. */
    }
}