/* styles.css */
:root {
    --v-blue: #004488;
    --v-yellow: #FFCC00;
    --text-color: #333;
    --bg-light: #f4f7f6;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { color: var(--text-color); line-height: 1.6; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: 80px 0; }
.section-title { text-align: center; color: var(--v-blue); margin-bottom: 40px; font-size: 32px; text-transform: uppercase; }
.bg-light { background: var(--bg-light); }

/* 1. NAVBAR (Điều chỉnh nhỏ lại để chứa nhiều Menu) */
.navbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 5%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: fixed; width: 100%; top: 0; z-index: 1000;
}
.logo { font-size: 22px; font-weight: bold; color: var(--v-blue); }
.nav-menu { display: flex; list-style: none; gap: 20px; }
.nav-menu a { text-decoration: none; color: #555; font-size: 14px; font-weight: 600; }
.nav-menu a:hover { color: var(--v-blue); }
.btn-login { background: white; color: var(--v-blue); border: 2px solid var(--v-blue); padding: 8px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; }

/* 2. HERO SECTION */
.hero {
    margin-top: 60px; height: 60vh;
    background: linear-gradient(rgba(0,68,136,0.8), rgba(0,68,136,0.8)), url('https://images.unsplash.com/photo-1542296332-2e4473faf563?q=80&w=2070') center/cover;
    display: flex; align-items: center; justify-content: center; text-align: center; color: white;
}
.hero-text h1 { color: var(--v-yellow); font-size: 36px; margin-bottom: 10px; }
.search-box { margin-top: 20px; display: flex; max-width: 600px; margin-left: auto; margin-right: auto; }
.search-box input { flex: 1; padding: 15px; border: none; border-radius: 5px 0 0 5px; outline: none; }
.btn-search { background: var(--v-yellow); color: var(--v-blue); border: none; padding: 15px 30px; font-weight: bold; border-radius: 0 5px 5px 0; cursor: pointer; }

/* 3. SPLIT LAYOUT (Thành tích & Hình ảnh) */
.split-layout { display: flex; gap: 50px; align-items: center; }
.text-left { flex: 1; }
.text-left h2 { color: var(--v-blue); font-size: 30px; margin-bottom: 20px; }
.achievement-list p { margin-bottom: 15px; font-size: 16px; border-left: 4px solid var(--v-yellow); padding-left: 15px; }
.image-right { flex: 1; }
.img-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.img-placeholder { height: 200px; background: #ddd; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: #666; font-weight: bold; }

/* 4. JOURNEY CARDS (Hành trình) */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.journey-card { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-align: center; border-top: 5px solid var(--v-blue); }
.journey-card i { font-size: 40px; margin-bottom: 20px; }
.icon-yellow { color: var(--v-yellow); }
.icon-blue { color: var(--v-blue); }
.journey-card h3 { color: var(--v-blue); margin-bottom: 15px; }

/* 5. TESTIMONIALS (Người VAECO nói) */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.testimonial-card { background: #fff; padding: 30px; border-radius: 10px; border: 1px solid #eee; position: relative; }
.quote { font-style: italic; color: #555; margin-bottom: 20px; }
.author-info { display: flex; align-items: center; gap: 15px; }
.avatar { width: 50px; height: 50px; background: var(--v-blue); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }

/* 6. FOOTER */
.footer { background: #002244; color: white; padding: 50px 0; }
.footer h3 { color: var(--v-yellow); margin-bottom: 20px; }
.footer p { margin-bottom: 10px; opacity: 0.8; }
.social-links a { color: white; margin-left: 15px; text-decoration: none; font-weight: bold; }
/* --- CSS CHO PHẦN CƠ HỘI NGHỀ NGHIỆP CHI TIẾT --- */

.job-list-container {
    display: flex;
    flex-direction: column; /* Xếp các công việc theo chiều dọc từ trên xuống */
    gap: 20px;
    max-width: 900px; /* Giới hạn độ rộng để người đọc không bị mỏi mắt */
    margin: 0 auto; /* Căn giữa màn hình */
}

.job-card-detailed {
    background: white;
    border-radius: 12px;
    padding: 25px 30px;
    border-left: 6px solid var(--v-blue); /* Viền trái đặc trưng VAECO */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: 0.3s;
}

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

/* Hàng chứa Tiêu đề và Trạng thái thời gian */
.job-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 15px;
}

.job-title {
    color: var(--v-blue);
    font-size: 22px;
}

/* --- LOGIC XANH/ĐỎ CHO HẠN NỘP HỒ SƠ --- */
.job-status {
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
}

.status-active {
    background-color: #e6f4ea; /* Nền xanh nhạt */
    color: #1e8e3e; /* Chữ xanh lá cây */
}

.status-expired {
    background-color: #fce8e6; /* Nền đỏ nhạt */
    color: #d93025; /* Chữ đỏ */
}

/* Thông tin Địa điểm & Lương */
.job-meta-info {
    display: flex;
    gap: 30px;
    color: #555;
    font-size: 15px;
    margin-bottom: 15px;
    font-weight: 600;
}

.job-meta-info i {
    color: var(--v-blue);
    margin-right: 5px;
}

/* Mô tả ngắn gọn */
.job-short-desc {
    color: #666;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Chỉ cho phép hiển thị tối đa 2 dòng, dài quá tự có dấu ... */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hàng chứa nút bấm ở dưới cùng */
.job-action-row {
    display: flex;
    justify-content: flex-end; /* Đẩy các nút sang bên phải */
    align-items: center;
    gap: 20px;
}

.btn-text {
    color: var(--v-blue);
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
}

.btn-text:hover {
    text-decoration: underline;
}

.btn-apply-now {
    background-color: var(--v-yellow);
    color: var(--v-blue);
    border: none;
    padding: 10px 25px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-apply-now:hover {
    background-color: #e6b800; /* Vàng sậm hơn khi di chuột */
}

/* Nút bị vô hiệu hóa khi hết hạn */
.btn-disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
}
.btn-disabled:hover {
    background-color: #ccc; /* Không đổi màu khi hover */
}
/* --- CSS CHO TRANG JOB DETAIL --- */

/* Header của trang chi tiết */
.job-detail-header {
    margin-top: 60px;
    background-color: var(--v-dark-blue);
    padding: 40px 0;
    color: white;
}
.back-link {
    color: var(--v-yellow);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 15px;
}
.back-link:hover { text-decoration: underline; }
.job-detail-header h1 { font-size: 32px; color: white; }

/* Bố cục 2 cột: Trái (Nội dung) - Phải (Tóm tắt) */
.job-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start; /* Quan trọng để cột bên phải không bị kéo dài bằng cột trái */
}

/* Cột trái (70% chiều rộng) */
.job-main-content {
    flex: 2;
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.content-block { margin-bottom: 35px; }
.content-block h3 {
    color: var(--v-blue);
    font-size: 20px;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}
.content-block h3 i { color: var(--v-yellow); margin-right: 10px; }
.content-block ul { padding-left: 20px; color: #444; }
.content-block li { margin-bottom: 10px; }
.content-block p { color: #444; line-height: 1.7; }

/* Cột phải (30% chiều rộng) - Gắn Sticky để trượt theo màn hình */
.job-sidebar {
    flex: 1;
    position: sticky;
    top: 90px; /* Cách mép trên màn hình 90px khi cuộn chuột */
}

.summary-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    border-top: 5px solid var(--v-yellow);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.summary-card h3 { color: var(--v-dark-blue); margin-bottom: 25px; font-size: 20px; }

.info-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}
.info-icon {
    width: 40px; height: 40px;
    background: #f0f4f8; color: var(--v-blue);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.info-text { display: flex; flex-direction: column; }
.info-text strong { font-size: 13px; color: #777; text-transform: uppercase; margin-bottom: 3px; }
.info-text span { font-size: 15px; color: var(--v-dark-blue); font-weight: 600; }

.btn-apply-large {
    width: 100%;
    background: var(--v-blue);
    color: white;
    border: none;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    margin-top: 15px;
    cursor: pointer;
    transition: 0.3s;
}
.btn-apply-large:hover {
    background: var(--v-yellow);
    color: var(--v-dark-blue);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 204, 0, 0.4);
}
/* --- CSS CHO CỬA SỔ NỔI (MODAL) --- */
.modal-overlay {
    display: none; /* Ban đầu ẩn đi, chỉ hiện khi dùng JS bấm nút */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 34, 68, 0.8); /* Màu xanh VAECO làm mờ nền */
    z-index: 9999; /* Đảm bảo nằm trên cùng mọi thứ */
    overflow-y: auto; /* Cho phép cuộn nếu màn hình điện thoại nhỏ */
    padding: 20px 0;
}

.modal-box {
    background: white;
    width: 90%;
    max-width: 800px;
    margin: 20px auto;
    padding: 40px;
    border-radius: 12px;
    border-top: 8px solid var(--v-yellow);
    position: relative;
    box-shadow: 0 15px 50px rgba(0,0,0,0.3);
    animation: slideDown 0.4s ease-out; /* Hiệu ứng trượt xuống mượt mà */
}

@keyframes slideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-modal {
    position: absolute;
    top: 20px; right: 25px;
    font-size: 24px;
    color: #888;
    cursor: pointer;
    transition: 0.3s;
}
.close-modal:hover { color: red; transform: scale(1.2); }

.modal-title { color: var(--v-blue); text-align: center; font-size: 28px; margin-bottom: 20px; }

/* Thông tin vị trí cố định */
.job-readonly-info { background: var(--bg-light); padding: 15px 20px; border-radius: 8px; margin-bottom: 30px; border-left: 4px solid var(--v-blue); }
.job-readonly-info p { margin-bottom: 5px; font-size: 15px; }
.job-readonly-info span { color: var(--v-blue); font-weight: bold; }

/* Các ô nhập liệu */
.form-section-title { color: var(--v-blue); border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 20px; margin-top: 30px;}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.input-group { display: flex; flex-direction: column; }
.input-group label { font-size: 14px; font-weight: bold; color: #555; margin-bottom: 8px; }
.input-group input { padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-family: 'Inter', sans-serif; outline: none; }
.input-group input:focus { border-color: var(--v-blue); box-shadow: 0 0 5px rgba(0,68,136,0.2); }
.req { color: red; font-weight: bold; } /* Dấu sao màu đỏ */

/* Danh sách file đính kèm */
.file-note { font-size: 13px; color: #777; font-style: italic; margin-bottom: 15px; }
.file-upload-list { display: flex; flex-direction: column; gap: 15px; }
.file-item { display: flex; flex-direction: column; background: #f9f9f9; padding: 12px 15px; border-radius: 6px; border: 1px dashed #ccc; }
.file-item label { font-size: 14px; font-weight: 600; color: #444; margin-bottom: 8px; }
.file-item input[type="file"] { font-size: 13px; }
.highlight-optional { border-color: #a8d5ff; background: #f0f7ff; } /* Làm nổi bật mục 7 */

/* Nút Submit */
.btn-submit-final {
    width: 100%; margin-top: 40px; padding: 18px;
    background: var(--v-blue); color: white; border: none;
    font-size: 18px; font-weight: bold; border-radius: 8px; cursor: pointer; transition: 0.3s;
}
.btn-submit-final:hover { background: var(--v-yellow); color: var(--v-dark-blue); }