/* Thiết lập cơ bản */


/* Thanh điều hướng chính */
.navbar {
    background-color: #451DA0; /* Màu tím đậm của thanh navbar */
    color: white;
    display: flex; /* Dùng Flexbox để căn chỉnh các phần tử con */
    justify-content: space-between; /* Đẩy các nhóm phần tử ra hai bên */
    align-items: center;
    padding: 10px 238px; /* Padding trên dưới và hai bên */
    height: 64px; /* Chiều cao cố định */
}

/* --- Phần Trái: Logo --- */
.navbar-left {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Ngăn không cho co lại quá nhiều */
}

.logo-link {
    text-decoration: none;
    color: white;
    line-height: 1.2;
}

.logo {
    font-size: 20px;
    font-weight: bold;
    color: #00bcd4; /* Màu xanh neon cho logo (cần tinh chỉnh icon VietNam24h nếu muốn giống hệt) */
}

.slogan {
    font-size: 8px;
    font-weight: normal;
    text-transform: uppercase;
}

/* --- Phần Giữa: Menu Chính --- */
.nav-menu {
    list-style: none;
    display: flex;
    margin-left: 20px; /* Khoảng cách với logo */
    margin-right: auto; /* Đẩy phần tử tiếp theo về bên phải */
    padding-left: 30px; /* Tăng khoảng cách cho menu */
}

.nav-item {
    margin: 0 15px;
    position: relative;
    padding: 10px 0; /* Padding cho vùng hover */
}

.nav-item a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.arrow {
    font-size: 8px;
    margin-left: 5px;
    vertical-align: middle;
}

/* --- Phần Phải: Tài khoản và Ngôn ngữ --- */
.navbar-right {
    display: flex;
    align-items: center;
}

.user-area {
    text-align: right;
    margin-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.3); /* Đường phân cách mờ */
    padding-right: 15px;
}

.user-text {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7); /* Chữ nhỏ mờ */
}

.auth-link {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

.employer-area {
    padding: 15px 15px 15px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 64px; /* Chiều cao bằng navbar */
}

.employer-text {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2px; /* Đẩy chữ DÀNH CHO lên sát */
}

.recruiter-link {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.language-select {
    padding-left: 15px;
}

.flag-icon {
    width: 25px;
    height: 20px;
    vertical-align: middle;
}

/* SEARCH AND BANNER */
    /* --- Phần Tìm kiếm (Search Section) --- */
.search-section {
    background-color: #e3f2fd; /* Màu nền xanh nhạt cho section */
    padding: 50px 238px 70px 238px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Hộp tìm kiếm chính --- */
.search-bar-container {
    display: flex;
    align-items: stretch;
    background-color: white;
    border-radius: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    margin-bottom: 25px;
    height: 50px;
    overflow: hidden; /* Quan trọng để các góc tròn hoạt động đúng */
}

/* Input chính */
.search-input-group {
    flex-grow: 2; /* Chiếm nhiều không gian hơn */
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.search-input-group input {
    border: none;
    outline: none;
    flex-grow: 1;
    font-size: 16px;
    padding-left: 10px;
}

.search-icon {
    color: #999;
    font-size: 16px;
}

/* Dropdown Groups (Nghề nghiệp, Tỉnh thành) */
.search-dropdown-group {
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-left: 1px solid #eee;
    color: #555;
    flex-grow: 1;
    position: relative;
    max-width: 250px;
}

.search-dropdown-group select {
    border: none;
    outline: none;
    background: none;
    flex-grow: 1;
    font-size: 14px;
    color: #333;
    -webkit-appearance: none; /* Xóa style mặc định của dropdown */
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 20px; /* Chỗ cho mũi tên tùy chỉnh */
}

.search-dropdown-group .dropdown-icon {
    font-size: 14px;
    margin-right: 5px;
}

.search-dropdown-group .arrow-down {
    position: absolute;
    right: 15px;
    font-size: 18px;
    pointer-events: none; /* Quan trọng: cho phép click qua mũi tên vào select */
    top: 55%;
    transform: translateY(-50%);
}

/* Nút Tìm kiếm */
.search-button {
    background-color: #5A30B9;
    color: white;
    border: none;
    border-radius: 40px; /* Góc tròn bên phải */
    padding: 0 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-button:hover {
    background-color: #673ab7;
}

.search-button .button-icon {
    margin-right: 5px;
}

/* --- Các nút Truy cập nhanh --- */
.quick-links {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.quick-link {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.quick-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.link-icon {
    margin-right: 8px;
}

/* Style cho nút "Việc đi làm ngay" */
.quick-link.primary {
    background-color: white;
    border: 1px solid #f99037; /* Màu cam */
    color: #f99037;
    box-shadow: 0 4px 6px rgba(249, 144, 55, 0.2);
    margin-right: 100px;
}

/* Style cho nút "Việc không cần CV" */
.quick-link.secondary {
    background-color: white;
    border: 1px solid #29b6f6; /* Màu xanh dương */
    color: #29b6f6;
    box-shadow: 0 4px 6px rgba(41, 182, 246, 0.2);
    margin-left: 100px;
}

.badge {
    background-color: #f44336; /* Màu đỏ cho chữ HOT */
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
    line-height: 1;
}

/* --- Banner nổi bật --- */
.feature-banner-container {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    background-color: white;
}

.feature-banner {
    /* Đây là phần giả lập cho ảnh banner */
    background: linear-gradient(to right, #673ab7, #9c27b0); /* Màu tím gradient */
    min-height: 150px; /* Giả định chiều cao */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: white;
    
    /* Thay thế bằng hình ảnh thực tế nếu có: */
    /* background-image: url('path/to/your/banner-image.jpg'); */
    /* background-size: cover; */
    /* background-position: center; */
}

/* Nội dung giả lập banner nếu không có ảnh */
.banner-content {
    text-align: center;
    padding: 10px;
}

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

.banner-content h3 {
    font-size: 24px;
    margin: 5px 0;
    font-weight: 900;
}

.banner-content .powered-by {
    font-size: 10px;
    opacity: 0.8;
}
/* END SEARCH AND BANNER */

/* JOB LIST ONE */
/* =======================================
    PHẦN DANH SÁCH VIỆC LÀM (JOB LISTING)
   ======================================= */
.job-listing-section {
    padding: 30px 40px 50px 40px;
    background-color: #f8fbff;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.section-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 25px;
    align-self: flex-start;
    margin-left: 10%;
}

.fire-icon {
    color: #f44336;
    margin-right: 5px;
}

/* --- Thanh lọc và Bộ lọc Phụ --- */
.filter-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 80%;
    max-width: 1200px;
    margin-bottom: 20px;
    flex-wrap: nowrap;
}

/* --- Bộ lọc Dropdown Lớn (filter-dropdown-container) --- */
.filter-dropdown-container {
    position: relative;
    margin-right: 20px;
    flex-shrink: 0;
}

/* Nút kích hoạt Dropdown */
.filter-trigger {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 7px 15px;
    background-color: white;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
}

.filter-trigger .icon {
    font-size: 14px;
    color: #999;
    margin-right: 5px;
}

.filter-trigger .arrow-down-small {
    font-size: 16px;
    margin-left: 10px;
}

/* Bảng điều khiển Dropdown Panel (CHỈ CÒN 1 CỘT) */
.filter-panel {
    position: absolute;
    top: 45px;
    left: 0;
    width: 200px; /* Chiều rộng chỉ chứa cột trái */
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 100;
    
    display: none; /* Mặc định ẩn, sẽ hiện bằng JS */
}

/* --- Cột Trái: Các lựa chọn chính (Navigation) --- */
.filter-options-nav {
    width: 100%; /* Chiếm toàn bộ chiều rộng panel */
    background-color: white; /* Nền trắng */
    border-right: none;
    padding: 5px 0;
    overflow-y: auto;
}

.filter-tab {
    display: block;
    padding: 10px 15px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background-color 0.15s;
}

.filter-tab:hover {
    background-color: #e5e5e5;
}

/* Style khi Tab được chọn (active) */
.filter-tab.active {
    background-color: #f7f7f7; /* Nền nhạt cho mục đang chọn */
    font-weight: bold;
    color: #7e57c2;
    border-left: 3px solid #7e57c2;
    padding-left: 12px;
}

.filter-content-wrapper {
    display: none; /* Đã bị loại bỏ trong HTML */
}


/* --- VÙNG HIỂN THỊ BỘ LỌC THỨ CẤP (Thanh dưới ảnh) --- */
.sub-filter-display {
    display: flex;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    flex-grow: 1;
}

.sub-filter-options-wrapper {
    display: flex;
    overflow: hidden;
    position: relative;
    height: 38px;
}

/* Các nhóm lọc phụ */
.sub-filter-group {
    display: none;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

/* Để fix cứng, nhóm sub-location được đặt active trong HTML */
.sub-filter-group.active {
    display: flex;
}

/* Style chung cho các nút lọc phụ */
.sub-filter-option {
    background-color: white;
    border: 1px solid #ddd;
    color: #666;
    padding: 8px 15px;
    border-radius: 20px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    flex-shrink: 0;
}

/* Style cho nút Tất cả và nút đang được chọn */
.sub-filter-option.active {
    background-color: #7e57c2;
    color: white;
    border-color: #7e57c2;
    font-weight: bold;
}

.sub-filter-option.next-arrow {
    background: none;
    border: 1px solid #7e57c2;
    color: #7e57c2;
    font-weight: bold;
    font-size: 16px;
    padding: 6px 10px;
    flex-shrink: 0;
}

.custom-toast {
    position: fixed;
    right: 20px;
    top: 20px;
    background: #333;
    color: #fff;
    padding: 12px 18px;
    border-radius: 6px;
    opacity: 0;
    transition: 0.3s;
    z-index: 9999;
}

.custom-toast.show {
    opacity: 1;
    transform: translateY(10px);
}


/* --- Lưới Thẻ công việc (Job Cards Grid) --- */
.job-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 80%;
    max-width: 1200px;
}

.job-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.2s;
    height: 100%;
}

.job-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.job-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    line-height: 1.4;
    max-width: 85%;
}

.job-title:hover {
    color: #7e57c2;
}

.favorite-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #ccc;
}

.company-info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.company-logo {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    margin-right: 8px;
    object-fit: cover;
}

.company-name {
    font-size: 12px;
    color: #666;
}

.job-details {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #444;
}

.detail-item.salary {
    color: #f44336;
    font-weight: bold;
}

.detail-item.location {
    color: #777;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px dashed #eee;
}

.days-ago {
    font-size: 12px;
    color: #999;
}

.tag {
    background-color: #eee;
    color: #555;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 5px;
    font-weight: bold;
}

.tag.hot {
    background-color: #f44336;
    color: white;
}

/* --- Phân trang --- */
.pagination {
    display: flex;
    align-items: center;
    margin-top: 30px;
}

.pagination button {
    background-color: white;
    border: 1px solid #ddd;
    color: #7e57c2;
    font-size: 18px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.pagination button.active {
    background-color: #7e57c2;
    color: white;
    border-color: #7e57c2;
}

.page-info {
    font-size: 14px;
    color: #666;
    margin: 0 15px;
}
/* END JOB LIST ONE */

/* JOB LIST TWO(MỞ RỘNG)  */
/* --- Điều chỉnh Section "Việc đi làm ngay" --- */

/* Thay đổi màu biểu tượng lửa cho section này (từ cam sang đỏ/hồng nhạt) */
.immediate-jobs-section .section-title .fire-icon {
    color: #FF7043; /* Màu hồng cam nhạt */
}
/* override background-color */
.job-listing-section.immediate-jobs-section {
    background: #FFF3EC;
    background: linear-gradient(100deg, rgba(255, 243, 236, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

/* Biểu tượng "Việc đi làm ngay" trong ảnh mẫu có vẻ là màu hồng/đỏ nhạt hơn */
.immediate-icon {
    color: #F44336; /* Màu đỏ */
    /* Màu nền nhạt (tương tự như hiệu ứng trong ảnh) */
    background: #FFCDD2; 
    border-radius: 50%;
    padding: 2px 4px; /* Tăng padding để tạo hiệu ứng blob */
}

/* Style cho nút Xem tất cả */
.view-all-link {
    font-size: 16px;
    font-weight: 700;
    color: #7e57c2; /* Màu tím */
    text-decoration: none;
    margin-left: 910px; /* Khoảng cách với tiêu đề */
    padding-top: 30px;
}

.view-all-link:hover {
    text-decoration: underline;
}

/* Căn chỉnh lại tiêu đề để chứa link Xem tất cả */
.immediate-jobs-section .section-title {
    display: flex;
    align-items: center;
    /* Xóa margin-left để căn chỉnh lại nếu cần, hoặc giữ nguyên theo .job-listing-section */
}

/* Style cho tag "Không cần CV" trong section này */
.secondary-tag {
    background-color: #E0F2F1; /* Nền xanh nhạt */
    color: #00897B; /* Chữ xanh đậm */
}
/* END JOB LIST TWO */
/* FEATURED COMPANIES */

.featured-companies-section {
    padding: 70px 40px;
    background-color: #f8fbff; /* Nền trắng/xanh nhạt */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.featured-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 25px;
    align-self: flex-start;
    width: 80%; /* Giữ chiều rộng để căn chỉnh tiêu đề */
    max-width: 1250px;
    
    display: flex;
    justify-content: space-between; /* Đẩy tiêu đề và link xem tất cả ra hai bên */
    align-items: center;
    padding-left: 0; /* Đặt lại padding nếu bị kế thừa */
}

.featured-title .trophy-icon {
    color: #FFC107; /* Màu vàng của cup */
    font-size: 28px;
}

/* --- Lưới thẻ công ty (6 cột) --- */
.company-cards-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 cột bằng nhau */
    gap: 20px;
    width: 80%;
    max-width: 1200px;
    margin-top: 20px;
}

.company-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

/* Container logo */
.logo-container {
    height: 60px; /* Chiều cao cố định cho khu vực logo */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee; /* Đường kẻ mờ phân cách */
    width: 100%;
}

.company-logo-img {
    max-width: 100%;
    max-height: 40px;
    object-fit: contain;
}

/* Số lượng vị trí tuyển dụng */
.job-count {
    font-size: 13px;
    color: #666;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.job-count .icon {
    margin-right: 5px;
    font-size: 14px;
    color: #7e57c2; /* Màu tím cho icon túi xách */
}
/* END FEATURED COMPANIES */

/* CẨM NANG NGHỀ NGHIỆP */
.career-handbook-section {
    padding: 50px 40px;
    background-color: #F5F1FF; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.handbook-title {
    font-size: 30px;
    font-weight: 700;
    color: #333;
    margin-bottom: 40px;
    text-align: center;
    width: 100%;
}

/* --- Lưới các bài viết (3 cột) --- */
.handbook-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 cột bằng nhau */
    gap: 30px;
    width: 80%;
    max-width: 1200px;
}

.article-card {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.article-image-container {
    width: 100%;
    height: 180px; /* Chiều cao cố định cho ảnh */
    overflow: hidden;
}

.article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-card h3 {
    padding: 15px 15px 10px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}

.article-summary {
    padding: 0 15px 20px;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    /* Giới hạn số dòng cho tóm tắt */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Nút Xem thêm --- */
.view-more-container {
    margin-top: 40px;
}

.view-more-link {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #7e57c2;
    border-radius: 20px;
    background-color: white;
    color: #7e57c2;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.view-more-link:hover {
    background-color: #7e57c2;
    color: white;
}
/* END CẨM NANG NGHỀ NGHIỆP */
/* =======================================
   7. QUICK LINKS FOOTER (Content Section)
   ======================================= */
.quick-links-footer-section {
    background-color: white; /* Nền trắng */
    padding: 40px 0;
    /* Có thể có border-top nếu section trước có nền khác */
}

.quick-links-container {
    display: flex;
    justify-content: space-between;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-column {
    flex-basis: 30%; /* Mỗi cột chiếm khoảng 30% */
    padding: 0 10px;
}

.footer-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin-bottom: 15px;
}

.footer-list li {
    margin-bottom: 8px;
}

.footer-list a {
    text-decoration: none;
    font-size: 14px;
    color: #555;
    transition: color 0.2s;
}

.footer-list a:hover {
    color: #7e57c2; /* Màu tím khi hover */
}

.footer-link {
    text-decoration: none;
    font-size: 14px;
    color: #7e57c2; /* Màu tím */
    font-weight: 500;
}

.footer-link:hover {
    text-decoration: underline;
}