/**
 * Modal riêng cho popup "Ứng tuyển" (1592 "0 CV" + 1657 "≥2 CV") — thay
 * Popup Maker. viec/2026-10-05-chuyen-toan-bo-popup-khoi-plugin.
 *
 * Namespace riêng "am-" (Apply Modal) — KHÔNG trùng "rm-" (Register Modal,
 * đã dùng cho popup Đăng ký) và KHÔNG đụng "pum-"/"popmake-" (Popup Maker).
 *
 * Khác register-modal.css: ở đây có 2 overlay tồn tại đồng thời trong DOM
 * (#am-apply-modal-first, #am-apply-modal-second) vì logic jobApply() có
 * thể cần mở 1 trong 2 tuỳ số CV runtime (xem thiet-ke.md mục 2.2).
 *
 * UX ĐỒNG NHẤT cho cả 2 modal (quyết định Chủ tịch — khác với 2 bộ cấu hình
 * Popup Maker cũ, 1592 bật ESC/1657 tắt): ESC + click-outside BẬT cho cả 2.
 * Kích thước/animation giữ như cũ: medium 640px, fade 350ms, center top.
 */

.am-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2147483000; /* cao hơn mọi phần tử site, kể cả Popup Maker
                             (1999999999) — không cần trùng số cũ vì 12 popup
                             Popup Maker cũ vẫn còn tồn tại song song (chưa
                             xoá trong việc này) */
    opacity: 0;
    transition: opacity 350ms ease;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

.am-overlay.am-open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.am-overlay.am-visible {
    opacity: 1;
}

.am-container {
    position: relative;
    background-color: #fff;
    width: 100%;
    max-width: 640px;
    margin-top: 100px; /* tương đương location "center top" + position_top
                           100 của 2 popup Popup Maker cũ (1592/1657) */
    border-radius: 4px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.25);
    padding: 30px 25px;
    box-sizing: border-box;
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 350ms ease, opacity 350ms ease;
}

.am-overlay.am-visible .am-container {
    transform: translateY(0);
    opacity: 1;
}

.am-close {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 22px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #777;
    z-index: 1;
}

.am-close:hover,
.am-close:focus {
    color: #111;
}

.am-body {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}

/* Scroll-lock riêng cho modal Ứng tuyển, tách khỏi rm-scroll-lock để an
 * toàn nếu (về lý thuyết) cả 2 nhóm modal cùng mở — register-modal.js gỡ
 * class của riêng nó, không đụng tới class này và ngược lại. */
html.am-scroll-lock,
body.am-scroll-lock {
    overflow: hidden !important;
    height: 100%;
}

@media screen and (max-width: 640px) {
    .am-overlay {
        padding: 10px;
    }
    .am-container {
        margin-top: 40px;
        padding: 25px 18px;
    }
}

/* ==========================================================================
   Form ứng tuyển (services/apply-form.php, 2026-10-07)
   ========================================================================== */
.aj-apply { display: grid; gap: 14px; margin: 0; color: #16263b; font-size: 15px; line-height: 1.6; }
.aj-apply .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aj-apply__ttl { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.3; color: #16263b; }
.aj-apply__job { margin: -8px 0 0; font-weight: 700; color: #a8430f; }
.aj-apply__who { margin: 0; padding: 10px 14px; background: #f3f7fb; border-radius: 4px; font-size: 14px; color: #3b4a5c; }
.aj-apply__fs { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.aj-apply__fs legend, .aj-apply__lbl, .aj-apply__new label { margin: 0 0 2px; padding: 0; font-size: 14px; font-weight: 700; color: #16263b; }
.aj-apply__row { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 8px; }
.aj-apply select, .aj-apply input[type="text"], .aj-apply textarea {
  width: 100%; max-width: none; min-height: 44px; margin: 0; padding: 8px 12px;
  border: 1px solid #b8c6d3; border-radius: 4px; background: #fff; box-shadow: none;
  font: inherit; color: #16263b; box-sizing: border-box;
}
.aj-apply textarea { min-height: 84px; resize: vertical; }
.aj-apply select:focus, .aj-apply input:focus, .aj-apply textarea:focus { outline: none; border-color: #16263b; box-shadow: 0 0 0 3px rgba(194, 78, 23, .25); }
.aj-apply input[type="file"] { font-size: 14px; }
.aj-apply__new { display: grid; gap: 6px; padding: 12px 14px; border: 1px dashed #b8c6d3; border-radius: 4px; }
.aj-apply__new[hidden] { display: none; }
.aj-apply__hint { margin: 0; font-size: 13px; color: #4b525e; }
.aj-apply__hint a { color: #a8430f; font-weight: 700; }
.aj-apply__err { margin: 0; padding: 8px 12px; border-radius: 4px; background: #fcf0f1; color: #a00; font-size: 14px; }
.aj-apply__ok { margin: 0; padding: 10px 12px; border-radius: 4px; background: #edfaef; color: #00701a; font-weight: 700; }
.aj-apply__err[hidden], .aj-apply__ok[hidden], .aj-apply__job[hidden], .aj-apply__btn[hidden] { display: none; }
.aj-apply__btn {
  justify-self: start; min-height: 48px; padding: 0 30px; border: 0; border-radius: 999px;
  background: #c24e17; color: #fff; font: 700 15px/1 inherit; cursor: pointer;
}
.aj-apply__btn:hover { background: #9f3e10; }
.aj-apply__btn:disabled { opacity: .7; cursor: progress; }
@media (max-width: 560px) {
  .am-container { margin-top: 24px; padding: 24px 18px; }
  .aj-apply__row { grid-template-columns: minmax(0, 1fr); }
  .aj-apply__btn { justify-self: stretch; }
}