/* =========================================================
   JOBS.CSS - Giao diện danh sách và chi tiết việc làm
   Trung tâm Dịch vụ Việc làm Đồng Nai
   Dùng cho: Views/Jobs/Index.cshtml và Details.cshtml
   ========================================================= */

:root {
        --job-primary: #075db7;
        --job-primary-dark: #063f81;
        --job-primary-soft: #eaf4ff;
        --job-accent: #10a3a0;
        --job-accent-soft: #e8fbf8;
        --job-danger: #dc3545;
        --job-warning: #f59e0b;
        --job-success: #14965d;
        --job-text: #14213d;
        --job-muted: #68768d;
        --job-border: #dce7f2;
        --job-surface: #ffffff;
        --job-page: #f4f8fc;
        --job-shadow: 0 18px 55px rgba(23, 51, 84, 0.10);
        --job-shadow-hover: 0 24px 70px rgba(5, 76, 143, 0.18);
    }

    .job-board-page {
        min-height: 100vh;
        padding: 34px 0 64px;
        background:
            radial-gradient(circle at 0% 0%, rgba(19, 122, 214, 0.12), transparent 30%),
            radial-gradient(circle at 100% 20%, rgba(16, 163, 160, 0.09), transparent 28%),
            linear-gradient(180deg, #f7fbff 0%, var(--job-page) 55%, #edf5fb 100%);
        color: var(--job-text);
    }

    .job-board-container {
        max-width: 1380px;
    }

    .job-hero {
        position: relative;
        min-height: 360px;
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
        align-items: center;
        gap: 44px;
        overflow: hidden;
        padding: 54px 58px;
        margin-bottom: 28px;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 34px;
        background:
            linear-gradient(135deg, rgba(3, 62, 125, .99), rgba(3, 104, 179, .98) 52%, rgba(10, 156, 164, .94));
        box-shadow: 0 30px 80px rgba(5, 76, 143, .28);
        isolation: isolate;
    }

    .job-hero__pattern {
        position: absolute;
        inset: 0;
        z-index: -3;
        opacity: .22;
        background-image:
            linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px);
        background-size: 38px 38px;
        mask-image: linear-gradient(to right, transparent, black 30%, black);
    }

    .job-hero__glow {
        position: absolute;
        z-index: -2;
        border-radius: 999px;
        filter: blur(2px);
    }

    .job-hero__glow--one {
        width: 350px;
        height: 350px;
        top: -190px;
        left: 23%;
        background: rgba(108, 207, 255, .28);
    }

    .job-hero__glow--two {
        width: 280px;
        height: 280px;
        right: -80px;
        bottom: -130px;
        background: rgba(78, 255, 215, .23);
    }

    .job-hero__content {
        position: relative;
        z-index: 2;
        max-width: 770px;
    }

    .job-hero__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 7px 13px 7px 8px;
        border: 1px solid rgba(255,255,255,.22);
        border-radius: 999px;
        color: rgba(255,255,255,.92);
        background: rgba(255,255,255,.11);
        backdrop-filter: blur(12px);
        font-size: .84rem;
        font-weight: 700;
        letter-spacing: .02em;
    }

    .job-hero__eyebrow-icon {
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        color: #0b5ea6;
        background: #fff;
    }

    .job-hero h1 {
        max-width: 780px;
        margin: 20px 0 15px;
        color: #fff;
        font-size: clamp(2.15rem, 4vw, 3.65rem);
        font-weight: 850;
        line-height: 1.08;
        letter-spacing: -.04em;
    }

    .job-hero h1 span {
        color: #82f3dd;
    }

    .job-hero__content > p {
        max-width: 680px;
        margin: 0;
        color: rgba(255,255,255,.82);
        font-size: 1.04rem;
        line-height: 1.75;
    }

    .job-hero__stats {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 28px;
    }

    .job-stat {
        display: flex;
        align-items: center;
        gap: 11px;
        min-width: 145px;
        padding: 11px 15px;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 17px;
        background: rgba(255,255,255,.10);
        backdrop-filter: blur(14px);
    }

    .job-stat__icon {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        color: #0e659f;
        background: rgba(255,255,255,.94);
    }

    .job-stat strong,
    .job-stat small {
        display: block;
    }

    .job-stat strong {
        color: #fff;
        font-size: .95rem;
        line-height: 1.1;
    }

    .job-stat small {
        margin-top: 4px;
        color: rgba(255,255,255,.68);
        font-size: .72rem;
    }

    .job-hero__visual {
        position: relative;
        z-index: 2;
        min-height: 250px;
        display: grid;
        place-items: center;
    }

    .job-hero__visual-card {
        width: min(100%, 350px);
        padding: 25px;
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 27px;
        background: rgba(255,255,255,.94);
        box-shadow: 0 30px 65px rgba(0,0,0,.18);
        transform: rotate(-2.5deg);
    }

    .visual-card__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
    }

    .visual-card__top > span:first-child {
        width: 55px;
        height: 55px;
        display: grid;
        place-items: center;
        border-radius: 17px;
        color: #fff;
        background: linear-gradient(135deg, var(--job-primary), var(--job-accent));
        font-size: 1.4rem;
    }

    .visual-card__badge {
        padding: 7px 11px;
        border-radius: 999px;
        color: #087050;
        background: #ddf9ee;
        font-size: .72rem;
        font-weight: 800;
    }

    .visual-card__line {
        width: 70%;
        height: 10px;
        margin-bottom: 11px;
        border-radius: 999px;
        background: #dbe8f4;
    }

    .visual-card__line--lg {
        width: 94%;
        height: 15px;
        background: #20324d;
    }

    .visual-card__tags {
        display: flex;
        gap: 7px;
        margin: 22px 0;
    }

    .visual-card__tags span {
        width: 72px;
        height: 25px;
        border-radius: 999px;
        background: #eaf3fb;
    }

    .visual-card__tags span:nth-child(2) { width: 90px; }
    .visual-card__tags span:nth-child(3) { width: 60px; }

    .visual-card__button {
        width: 100%;
        height: 42px;
        border-radius: 13px;
        background: linear-gradient(90deg, var(--job-primary), #1888d6);
    }

    .job-hero__floating {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 13px;
        border: 1px solid rgba(255,255,255,.62);
        border-radius: 13px;
        color: #18314d;
        background: rgba(255,255,255,.94);
        box-shadow: 0 14px 30px rgba(1,42,86,.18);
        font-size: .78rem;
        font-weight: 800;
        animation: jobFloat 4.5s ease-in-out infinite;
    }

    .job-hero__floating i {
        color: var(--job-primary);
    }

    .job-hero__floating--one {
        top: 10px;
        right: -8px;
    }

    .job-hero__floating--two {
        bottom: 6px;
        left: 0;
        animation-delay: -2s;
    }

    .job-hero__admin {
        position: absolute;
        top: 22px;
        right: 22px;
        z-index: 4;
    }

    .job-btn {
        position: relative;
        z-index: 2;
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 10px 17px;
        border: 1px solid transparent;
        border-radius: 13px;
        text-decoration: none;
        font-weight: 750;
        transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    }

    .job-btn:hover {
        transform: translateY(-2px);
    }

    .job-btn--light {
        color: #0a5b9d;
        background: #fff;
        box-shadow: 0 12px 28px rgba(0,0,0,.13);
    }

    .job-btn--primary {
        color: #fff;
        background: linear-gradient(135deg, var(--job-primary), #0b83cf);
        box-shadow: 0 12px 28px rgba(7,93,183,.22);
    }

    .job-btn--primary:hover {
        color: #fff;
        box-shadow: 0 16px 34px rgba(7,93,183,.30);
    }

    .job-btn--ghost {
        color: #53627a;
        border-color: #d6e2ee;
        background: #fff;
    }

    .job-btn--ghost:hover {
        color: var(--job-primary);
        border-color: #a9cbe8;
        background: #f7fbff;
    }

    .job-btn--excel {
        color: #fff;
        background: linear-gradient(135deg, #118652, #13a368);
        box-shadow: 0 12px 28px rgba(17,134,82,.19);
    }

    .job-btn--excel:hover { color: #fff; }

    .job-filter-card {
        position: relative;
        z-index: 5;
        padding: 27px;
        margin-bottom: 20px;
        border: 1px solid rgba(197, 215, 232, .82);
        border-radius: 26px;
        background: rgba(255,255,255,.94);
        box-shadow: var(--job-shadow);
        backdrop-filter: blur(12px);
    }

    .job-filter-card__heading,
    .job-list-heading {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 20px;
    }

    .job-filter-card__heading {
        align-items: center;
        margin-bottom: 22px;
    }

    .job-section-kicker {
        display: block;
        margin-bottom: 5px;
        color: var(--job-primary);
        font-size: .76rem;
        font-weight: 850;
        letter-spacing: .10em;
        text-transform: uppercase;
    }

    .job-filter-card__heading h2,
    .job-list-heading h2,
    .job-empty-state h2 {
        margin: 0;
        color: var(--job-text);
        font-size: clamp(1.45rem, 2.5vw, 2rem);
        font-weight: 850;
        letter-spacing: -.025em;
    }

    .job-filter-status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 12px;
        border-radius: 999px;
        color: #075c9e;
        background: #eaf5ff;
        font-size: .78rem;
        font-weight: 750;
    }
    .job-filter-grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 14px;
        align-items: end;
    }

    .job-field {
        min-width: 0;
    }

    .job-field--wide,
    .job-field--country,
    .job-field--business-sector,
    .job-field--worktype,
    .job-field--priority,
    .job-field--from-date,
    .job-field--to-date {
        grid-column: span 6;
    }

    .job-field--month,
    .job-field--year {
        grid-column: span 3;
    }

    .job-field--business-sector .form-select {
        width: 100%;
        min-width: 0;
    }

    .job-field label {
        display: block;
        margin-bottom: 8px;
        color: #45536b;
        font-size: .79rem;
        font-weight: 800;
    }

    .job-input-wrap {
        position: relative;
    }

    .job-input-wrap > i {
        position: absolute;
        top: 50%;
        left: 15px;
        z-index: 2;
        color: #6d8198;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .job-input-wrap .form-control,
    .job-input-wrap .form-select {
        height: 51px;
        padding-left: 43px;
        border: 1px solid #d8e4ef;
        border-radius: 14px;
        color: #20324c;
        background-color: #f9fbfd;
        font-size: .91rem;
        font-weight: 600;
        box-shadow: none;
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .job-input-wrap .form-control:focus,
    .job-input-wrap .form-select:focus {
        border-color: #76b5e7;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(7,93,183,.10);
    }

    .job-input-wrap--select .form-select {
        padding-right: 35px;
    }

    .job-filter-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 19px;
        padding-top: 18px;
        border-top: 1px solid #e7eef5;
    }

    .active-filters {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 12px 15px;
        margin-bottom: 22px;
        border: 1px solid #dce8f2;
        border-radius: 16px;
        background: rgba(255,255,255,.78);
    }

    .active-filters__title {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-right: 3px;
        color: #53627a;
        font-size: .8rem;
        font-weight: 800;
    }

    .filter-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 999px;
        color: #07599c;
        background: #eaf5ff;
        font-size: .76rem;
        font-weight: 750;
    }

    .job-list-heading {
        margin: 34px 0 18px;
    }

    .job-list-heading p {
        margin: 7px 0 0;
        color: var(--job-muted);
    }

    .job-list-heading__note {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 9px 13px;
        border: 1px solid #dbe7f2;
        border-radius: 999px;
        color: #607087;
        background: rgba(255,255,255,.78);
        font-size: .78rem;
        font-weight: 700;
    }

    .live-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #1eb870;
        box-shadow: 0 0 0 5px rgba(30,184,112,.12);
        animation: jobPulse 2s ease-in-out infinite;
    }

    .job-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .job-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 22px;
        overflow: hidden;
        border: 1px solid var(--job-border);
        border-radius: 24px;
        background: var(--job-surface);
        box-shadow: 0 10px 35px rgba(28, 54, 83, .075);
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .job-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        opacity: 0;
        background: linear-gradient(90deg, var(--job-primary), var(--job-accent));
        transition: opacity .25s ease;
    }

    .job-card:hover {
        transform: translateY(-6px);
        border-color: #a9cbe8;
        box-shadow: var(--job-shadow-hover);
    }

    .job-card:hover::before { opacity: 1; }

    .job-card--pinned {
        border-color: #86bde7;
        background: linear-gradient(180deg, #ffffff 0%, #f8fcff 100%);
    }

    .job-card--expired {
        opacity: .83;
        filter: grayscale(.08);
    }

    .job-card__overlay-link {
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .job-card__topbar,
    .job-card__company-row,
    .job-card__salary,
    .job-card__meta,
    .job-card__description,
    .job-card__footer {
        position: relative;
        z-index: 2;
        pointer-events: none;
    }

    .job-card__topbar,
    .job-card__company-row,
    .job-card__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .job-card__badges {
        min-height: 27px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 9px;
        border-radius: 999px;
        font-size: .67rem;
        font-weight: 850;
        letter-spacing: .01em;
        white-space: nowrap;
    }

    .status-badge--pinned { color: #07589c; background: #e4f2ff; }
    .status-badge--expired { color: #586273; background: #edf0f3; }
    .status-badge--very-urgent { color: #fff; background: linear-gradient(135deg, #d5233b, #f04158); }
    .status-badge--urgent { color: #8a4a00; background: #fff0cd; }
    .status-badge--ending { color: #a43131; background: #ffe7e7; }
    .status-badge--new { color: #087046; background: #ddf7e9; }

    .job-card__posted {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: #8793a5;
        font-size: .69rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .job-card__company-row {
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 17px;
    }

    .company-logo {
        flex: 0 0 66px;
        width: 66px;
        height: 66px;
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid #d9e5ef;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 8px 22px rgba(24,58,91,.08);
    }

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

    .company-logo--fallback {
        color: #fff;
        border-color: transparent;
        background: linear-gradient(135deg, var(--job-primary), var(--job-accent));
        font-size: 1.55rem;
        font-weight: 900;
    }

    .job-card__title-wrap {
        min-width: 0;
        flex: 1;
    }

    .job-card h3 {
        margin: 2px 0 7px;
        font-size: 1.12rem;
        font-weight: 850;
        line-height: 1.38;
    }

    .job-card h3 a {
        position: relative;
        z-index: 3;
        display: -webkit-box;
        overflow: hidden;
        color: var(--job-text);
        text-decoration: none;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        pointer-events: auto;
    }

    .job-card h3 a:hover { color: var(--job-primary); }

    .job-card__company {
        display: -webkit-box;
        overflow: hidden;
        margin: 0;
        color: #6a788d;
        font-size: .79rem;
        line-height: 1.45;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .job-card__company i {
        margin-right: 5px;
        color: #8da0b5;
    }

    .job-card__salary {
        display: flex;
        align-items: center;
        gap: 11px;
        margin: 18px 0 14px;
        padding: 12px;
        border: 1px solid #cfeadf;
        border-radius: 15px;
        background: linear-gradient(135deg, #f0fbf6, #f6fffc);
    }

    .job-card__salary-icon {
        width: 39px;
        height: 39px;
        display: grid;
        place-items: center;
        flex: 0 0 39px;
        border-radius: 12px;
        color: #fff;
        background: linear-gradient(135deg, #118657, #1eb97a);
    }

    .job-card__salary small,
    .job-card__salary strong,
    .meta-item small,
    .meta-item strong {
        display: block;
    }

    .job-card__salary small {
        color: #688174;
        font-size: .67rem;
        font-weight: 700;
    }

    .job-card__salary strong {
        margin-top: 2px;
        color: #0e7a4d;
        font-size: .93rem;
        font-weight: 850;
    }

    .job-card__meta {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .meta-item {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 9px;
        border: 1px solid #e5edf4;
        border-radius: 13px;
        background: #fafcfe;
    }

    .meta-item__icon {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        color: var(--job-primary);
        background: var(--job-primary-soft);
        font-size: .76rem;
    }

    .meta-item > div {
        min-width: 0;
    }

    .meta-item small {
        color: #8a96a6;
        font-size: .58rem;
        font-weight: 700;
    }

    .meta-item strong {
        overflow: hidden;
        margin-top: 2px;
        color: #46556c;
        font-size: .69rem;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .job-card__description {
        display: -webkit-box;
        overflow: hidden;
        min-height: 58px;
        margin: 15px 0 0;
        color: #66758a;
        font-size: .79rem;
        line-height: 1.62;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .job-card__footer {
        align-items: center;
        margin-top: auto;
        padding-top: 17px;
        border-top: 1px solid #e7eef5;
    }

    .deadline-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        color: #627188;
        font-size: .7rem;
        font-weight: 800;
        white-space: nowrap;
    }

    .deadline-normal { color: #075da6; }
    .deadline-neutral { color: #6d7888; }
    .deadline-urgent { color: #c33434; }
    .deadline-expired { color: #6d737c; }

    .job-card__actions {
        position: relative;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: 7px;
        pointer-events: auto;
    }

    .icon-action {
        width: 35px;
        height: 35px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        text-decoration: none;
        font-size: .76rem;
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .icon-action:hover { transform: translateY(-2px); }
    .icon-action--edit { color: #935c00; background: #fff0c8; }
    .icon-action--delete { color: #b92e3b; background: #ffe7e9; }

    .job-detail-button {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 12px;
        border-radius: 11px;
        color: #fff;
        background: linear-gradient(135deg, var(--job-primary), #1186d2);
        box-shadow: 0 9px 18px rgba(7,93,183,.18);
        text-decoration: none;
        font-size: .73rem;
        font-weight: 850;
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .job-detail-button:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(7,93,183,.27);
    }

    .job-empty-state {
        padding: 65px 25px;
        border: 1px dashed #b9ccde;
        border-radius: 28px;
        background: rgba(255,255,255,.76);
        text-align: center;
    }

    .job-empty-state__icon {
        width: 82px;
        height: 82px;
        display: grid;
        place-items: center;
        margin: 0 auto 19px;
        border-radius: 24px;
        color: var(--job-primary);
        background: linear-gradient(135deg, #e5f3ff, #e8fbf8);
        font-size: 2rem;
    }

    .job-empty-state p {
        max-width: 520px;
        margin: 12px auto 22px;
        color: var(--job-muted);
        line-height: 1.7;
    }

    .job-pagination-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-top: 28px;
        padding: 15px 18px;
        border: 1px solid #dce7f1;
        border-radius: 18px;
        background: rgba(255,255,255,.88);
    }

    .job-pagination-info {
        color: #65738a;
        font-size: .82rem;
    }

    .job-pagination {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .job-pagination li a,
    .job-pagination li span {
        width: 39px;
        height: 39px;
        display: grid;
        place-items: center;
        border: 1px solid #d9e5ef;
        border-radius: 11px;
        color: #4d5d73;
        background: #fff;
        text-decoration: none;
        font-size: .8rem;
        font-weight: 800;
        transition: all .2s ease;
    }

    .job-pagination li a:hover {
        color: var(--job-primary);
        border-color: #9dc7e9;
        background: #f2f8ff;
        transform: translateY(-2px);
    }

    .job-pagination li.active a {
        color: #fff;
        border-color: transparent;
        background: linear-gradient(135deg, var(--job-primary), #1588d1);
        box-shadow: 0 8px 18px rgba(7,93,183,.25);
    }

    .job-pagination li.disabled {
        opacity: .45;
        pointer-events: none;
    }

    .job-pagination li.pagination-dots span {
        border-color: transparent;
        background: transparent;
    }

    @keyframes jobFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }

    @keyframes jobPulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(.8); opacity: .55; }
    }

    @media (max-width: 1200px) {
        .job-filter-grid {
            grid-template-columns: repeat(12, minmax(0, 1fr));
        }

        .job-field--wide,
        .job-field--country,
        .job-field--business-sector,
        .job-field--worktype,
        .job-field--priority,
        .job-field--from-date,
        .job-field--to-date {
            grid-column: span 6;
        }

        .job-field--month,
        .job-field--year {
            grid-column: span 3;
        }

        .job-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 991.98px) {
        .job-hero {
            grid-template-columns: 1fr;
            min-height: 0;
            padding: 42px 38px;
        }

        .job-hero__visual {
            display: none;
        }

        .job-hero__content {
            max-width: none;
        }
        .job-filter-grid {
            grid-template-columns: repeat(12, minmax(0, 1fr));
        }

        .job-field--wide,
        .job-field--country,
        .job-field--business-sector,
        .job-field--worktype,
        .job-field--priority,
        .job-field--from-date,
        .job-field--to-date {
            grid-column: span 6;
        }

        .job-field--month,
        .job-field--year {
            grid-column: span 3;
        }
    }

    @media (max-width: 767.98px) {
        .job-board-page {
            padding-top: 18px;
        }

        .job-hero {
            padding: 34px 24px;
            border-radius: 26px;
        }

        .job-hero h1 {
            font-size: 2.2rem;
        }

        .job-hero__stats {
            display: grid;
            grid-template-columns: 1fr;
        }

        .job-stat {
            width: 100%;
        }

        .job-hero__admin {
            position: static;
            margin-top: 20px;
        }

        .job-filter-card {
            padding: 20px;
            border-radius: 22px;
        }

        .job-filter-card__heading,
        .job-list-heading,
        .job-pagination-wrap {
            align-items: flex-start;
            flex-direction: column;
        }
        .job-filter-grid {
            grid-template-columns: 1fr;
        }

        .job-field--wide,
        .job-field--country,
        .job-field--business-sector,
        .job-field--worktype,
        .job-field--priority,
        .job-field--from-date,
        .job-field--to-date,
        .job-field--month,
        .job-field--year {
            grid-column: span 1;
        }

        .job-filter-actions .job-btn {
            width: 100%;
        }

        .job-list-heading__note {
            align-self: flex-start;
        }

        .job-grid {
            grid-template-columns: 1fr;
        }

        .job-pagination-wrap {
            align-items: center;
        }

        .job-pagination-info {
            width: 100%;
            text-align: center;
        }

        .job-pagination {
            max-width: 100%;
            overflow-x: auto;
            padding-bottom: 4px;
        }
    }

    @media (max-width: 480px) {
        .job-board-container {
            padding-left: 12px;
            padding-right: 12px;
        }

        .job-hero {
            padding: 29px 19px;
        }

        .job-hero h1 {
            font-size: 1.88rem;
        }

        .job-card {
            padding: 18px;
            border-radius: 20px;
        }

        .job-card__topbar,
        .job-card__footer {
            align-items: flex-start;
            flex-direction: column;
        }

        .job-card__posted {
            align-self: flex-end;
            margin-top: -26px;
        }

        .job-card__meta {
            grid-template-columns: 1fr;
        }

        .meta-item strong {
            font-size: .76rem;
        }

        .job-card__footer {
            gap: 14px;
        }

        .job-card__actions {
            width: 100%;
        }

        .job-detail-button {
            flex: 1;
            justify-content: center;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .job-hero__floating,
        .live-dot {
            animation: none;
        }

        .job-card,
        .job-btn,
        .job-detail-button,
        .icon-action,
        .job-pagination li a {
            transition: none;
        }
    }

/* =========================================================
   JOB DETAILS
   ========================================================= */

:root {
        --jd-primary: #075fb5;
        --jd-primary-dark: #03447f;
        --jd-primary-soft: #eaf4ff;
        --jd-cyan: #11a7c7;
        --jd-green: #15a46d;
        --jd-orange: #f08a24;
        --jd-purple: #7357d8;
        --jd-danger: #d94155;
        --jd-text: #10243e;
        --jd-muted: #64748b;
        --jd-border: #dce8f3;
        --jd-bg: #f4f8fc;
        --jd-white: #ffffff;
        --jd-shadow: 0 20px 55px rgba(15, 62, 104, .10);
    }

    .job-detail-page {
        position: relative;
        overflow: hidden;
        min-height: 100vh;
        padding: 28px 0 70px;
        background:
            radial-gradient(circle at 8% 12%, rgba(17, 167, 199, .10), transparent 28%),
            radial-gradient(circle at 90% 3%, rgba(7, 95, 181, .09), transparent 26%),
            var(--jd-bg);
        color: var(--jd-text);
    }

    .job-detail-container {
        position: relative;
        z-index: 1;
        max-width: 1240px;
    }

    .job-breadcrumb {
        display: flex;
        align-items: center;
        gap: 9px;
        overflow: hidden;
        margin-bottom: 18px;
        color: var(--jd-muted);
        font-size: .88rem;
        white-space: nowrap;
    }

    .job-breadcrumb a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #48647f;
        font-weight: 650;
        text-decoration: none;
        transition: color .2s ease;
    }

    .job-breadcrumb a:hover { color: var(--jd-primary); }
    .job-breadcrumb > i { color: #9db0c1; font-size: .72rem; }
    .job-breadcrumb span { overflow: hidden; text-overflow: ellipsis; }

    .job-detail-hero {
        position: relative;
        isolation: isolate;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 28px;
        align-items: center;
        overflow: hidden;
        margin-bottom: 28px;
        padding: 34px;
        border: 1px solid rgba(255,255,255,.55);
        border-radius: 30px;
        background: linear-gradient(128deg, #073f79 0%, #075fb5 50%, #0b89ae 100%);
        box-shadow: 0 28px 65px rgba(3, 68, 127, .24);
        color: #fff;
    }

    .job-detail-hero__pattern {
        position: absolute;
        z-index: -1;
        inset: 0;
        opacity: .17;
        background-image:
            linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
        background-size: 34px 34px;
        mask-image: linear-gradient(to left, #000, transparent 84%);
    }

    .job-detail-hero__glow {
        position: absolute;
        z-index: -1;
        border-radius: 999px;
        filter: blur(1px);
    }

    .job-detail-hero__glow--one {
        top: -135px;
        right: 9%;
        width: 340px;
        height: 340px;
        background: rgba(108, 233, 255, .20);
    }

    .job-detail-hero__glow--two {
        right: -80px;
        bottom: -150px;
        width: 290px;
        height: 290px;
        background: rgba(255,255,255,.13);
    }

    .job-detail-hero__main {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 24px;
        align-items: center;
        min-width: 0;
    }

    .job-detail-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 112px;
        height: 112px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.45);
        border-radius: 28px;
        background: rgba(255,255,255,.16);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 17px 40px rgba(0,0,0,.14);
        color: #fff;
        font-size: 2.65rem;
        font-weight: 850;
        backdrop-filter: blur(12px);
    }

    .job-detail-logo--image { background: #fff; }
    .job-detail-logo img { width: 100%; height: 100%; padding: 10px; object-fit: contain; }
    .job-detail-logo__fallback { width: 100%; height: 100%; align-items: center; justify-content: center; }

    .job-detail-hero__content { min-width: 0; }
    .job-detail-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

    .job-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 11px;
        border: 1px solid rgba(255,255,255,.24);
        border-radius: 999px;
        background: rgba(255,255,255,.14);
        color: #fff;
        font-size: .76rem;
        font-weight: 760;
        line-height: 1;
        backdrop-filter: blur(8px);
    }

    .job-status-badge--pinned { background: rgba(121, 197, 255, .20); }
    .job-status-badge--new { background: rgba(45, 214, 143, .24); }
    .job-status-badge--urgent { background: rgba(255, 185, 57, .27); }
    .job-status-badge--very-urgent,
    .job-status-badge--expired { background: rgba(255, 91, 114, .27); }
    .job-status-badge--deadline { background: rgba(255, 196, 79, .25); }

    .job-detail-hero h1 {
        max-width: 760px;
        margin: 0 0 8px;
        color: #fff;
        font-size: clamp(1.8rem, 3.1vw, 2.75rem);
        font-weight: 850;
        letter-spacing: -.035em;
        line-height: 1.14;
    }

    .job-detail-company {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 18px;
        color: rgba(255,255,255,.87);
        font-size: 1rem;
        font-weight: 650;
    }

    .job-detail-meta { display: flex; flex-wrap: wrap; gap: 10px; }

    .job-detail-meta span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 12px;
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 12px;
        background: rgba(255,255,255,.10);
        color: rgba(255,255,255,.93);
        font-size: .84rem;
        font-weight: 650;
        backdrop-filter: blur(8px);
    }

    .job-detail-meta__salary { color: #eaffc9 !important; }

    .job-detail-hero__actions {
        display: grid;
        gap: 10px;
        width: 220px;
    }

    .job-detail-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 48px;
        padding: 11px 16px;
        border: 1px solid transparent;
        border-radius: 14px;
        font-size: .91rem;
        font-weight: 760;
        text-decoration: none;
        transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
    }

    .job-detail-btn:hover { transform: translateY(-2px); }

    .job-detail-btn--apply {
        background: #fff;
        box-shadow: 0 12px 28px rgba(0,0,0,.16);
        color: var(--jd-primary-dark);
    }

    .job-detail-btn--apply:hover { color: var(--jd-primary-dark); box-shadow: 0 16px 34px rgba(0,0,0,.20); }

    .job-detail-btn--share,
    .job-detail-btn--edit {
        border-color: rgba(255,255,255,.28);
        background: rgba(255,255,255,.12);
        color: #fff;
        backdrop-filter: blur(8px);
    }

    .job-detail-btn--share:hover,
    .job-detail-btn--edit:hover { background: rgba(255,255,255,.20); color: #fff; }

    .job-detail-btn--disabled {
        cursor: not-allowed;
        border-color: rgba(255,255,255,.18);
        background: rgba(255,255,255,.13);
        color: rgba(255,255,255,.77);
    }

    .job-detail-btn--disabled:hover { transform: none; }

    .job-detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 370px;
        gap: 24px;
        align-items: start;
    }

    .job-detail-main { display: grid; gap: 20px; }

    .job-content-card,
    .job-location-card,
    .job-summary-card,
    .job-contact-card {
        border: 1px solid var(--jd-border);
        border-radius: 24px;
        background: rgba(255,255,255,.96);
        box-shadow: var(--jd-shadow);
    }

    .job-content-card {
        position: relative;
        overflow: hidden;
        padding: 26px 28px 28px;
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .job-content-card::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, var(--jd-primary), var(--jd-cyan));
        content: "";
    }

    .job-content-card:hover { transform: translateY(-3px); box-shadow: 0 25px 60px rgba(15, 62, 104, .13); }

    .job-content-card__heading {
        display: flex;
        align-items: center;
        gap: 14px;
        padding-bottom: 18px;
        border-bottom: 1px solid #eaf0f5;
    }

    .job-content-card__icon {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 15px;
        background: var(--jd-primary-soft);
        color: var(--jd-primary);
        font-size: 1.18rem;
    }

    .job-content-card__icon--purple { background: #f0edff; color: var(--jd-purple); }
    .job-content-card__icon--orange { background: #fff2e5; color: var(--jd-orange); }
    .job-content-card__icon--green { background: #e9f8f1; color: var(--jd-green); }

    .job-content-card__kicker,
    .job-summary-card__kicker {
        display: block;
        margin-bottom: 3px;
        color: var(--jd-primary);
        font-size: .69rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .job-content-card h2,
    .job-location-card h2,
    .job-summary-card h2,
    .job-contact-card h2 {
        margin: 0;
        color: var(--jd-text);
        font-size: 1.22rem;
        font-weight: 810;
        letter-spacing: -.02em;
    }

    .job-content-card__body {
        padding-top: 19px;
        color: #334b64;
        font-size: .97rem;
        line-height: 1.85;
        white-space: pre-line;
    }

    .job-location-card {
        display: flex;
        gap: 17px;
        align-items: flex-start;
        padding: 24px 27px;
        background: linear-gradient(135deg, #fff 0%, #f1f8ff 100%);
    }

    .job-location-card__icon {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 17px;
        background: linear-gradient(135deg, var(--jd-primary), var(--jd-cyan));
        box-shadow: 0 12px 26px rgba(7,95,181,.20);
        color: #fff;
        font-size: 1.2rem;
    }

    .job-location-card span { color: var(--jd-primary); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
    .job-location-card h2 { margin-top: 4px; }
    .job-location-card p { margin: 8px 0 0; color: var(--jd-muted); font-size: .88rem; line-height: 1.6; }

    .job-detail-sidebar {
        position: sticky;
        top: 98px;
        display: grid;
        gap: 18px;
    }

    .job-summary-card { padding: 24px; }

    .job-summary-card__top {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: center;
        padding-bottom: 18px;
        border-bottom: 1px solid #eaf0f5;
    }

    .job-summary-card__briefcase {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--jd-primary), var(--jd-cyan));
        color: #fff;
        box-shadow: 0 10px 22px rgba(7,95,181,.19);
    }

    .job-summary-list { display: grid; gap: 3px; padding: 14px 0 4px; }

    .job-summary-item {
        display: grid;
        grid-template-columns: 39px minmax(0, 1fr);
        gap: 11px;
        align-items: center;
        padding: 10px 8px;
        border-radius: 13px;
        transition: background .2s ease;
    }

    .job-summary-item:hover { background: #f5f9fd; }

    .job-summary-item__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 39px;
        height: 39px;
        border-radius: 12px;
        background: #edf5fc;
        color: var(--jd-primary);
    }

    .job-summary-item small,
    .job-contact-list small {
        display: block;
        margin-bottom: 2px;
        color: #8091a3;
        font-size: .71rem;
        font-weight: 650;
    }

    .job-summary-item strong {
        display: block;
        overflow-wrap: anywhere;
        color: #253d56;
        font-size: .88rem;
        font-weight: 760;
        line-height: 1.35;
    }

    .job-summary-item em { display: block; margin-top: 3px; color: var(--jd-orange); font-size: .71rem; font-style: normal; font-weight: 740; }
    .job-summary-item--salary .job-summary-item__icon { background: #e9f8f1; color: var(--jd-green); }
    .job-summary-item--salary strong { color: var(--jd-green); font-size: .95rem; }
    .job-summary-item--deadline .job-summary-item__icon { background: #fff4e8; color: var(--jd-orange); }
    .job-summary-item--deadline.is-expired .job-summary-item__icon { background: #ffedf0; color: var(--jd-danger); }
    .job-summary-item--deadline.is-expired em { color: var(--jd-danger); }

    .job-sidebar-apply-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 49px;
        margin-top: 14px;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--jd-primary), var(--jd-cyan));
        box-shadow: 0 14px 27px rgba(7,95,181,.22);
        color: #fff;
        font-weight: 790;
        text-decoration: none;
        transition: transform .22s ease, box-shadow .22s ease;
    }

    .job-sidebar-apply-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 32px rgba(7,95,181,.28); color: #fff; }

    .job-contact-card { padding: 22px; }

    .job-contact-card__heading {
        display: flex;
        gap: 12px;
        align-items: center;
        padding-bottom: 15px;
        border-bottom: 1px solid #eaf0f5;
    }

    .job-contact-card__heading > span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: #e9f8f1;
        color: var(--jd-green);
        font-size: 1.05rem;
    }

    .job-contact-card__heading small { color: var(--jd-green); font-size: .69rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }

    .job-contact-list { display: grid; gap: 8px; padding: 14px 0; }

    .job-contact-list > div,
    .job-contact-list > a {
        display: grid;
        grid-template-columns: 34px minmax(0,1fr);
        gap: 10px;
        align-items: center;
        padding: 9px;
        border-radius: 12px;
        color: inherit;
        text-decoration: none;
        transition: background .2s ease;
    }

    .job-contact-list > a:hover { background: #f3f8fc; }
    .job-contact-list > div > i,
    .job-contact-list > a > i { color: var(--jd-primary); }
    .job-contact-list strong { display: block; overflow-wrap: anywhere; color: #2b435a; font-size: .86rem; font-weight: 750; }

    .job-contact-card__note {
        display: flex;
        gap: 8px;
        margin: 0;
        padding: 12px;
        border-radius: 12px;
        background: #fff8e8;
        color: #84631c;
        font-size: .75rem;
        font-weight: 620;
        line-height: 1.5;
    }

    .job-contact-card__note i { flex: 0 0 auto; margin-top: 2px; }

    .job-back-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 46px;
        border: 1px solid var(--jd-border);
        border-radius: 14px;
        background: rgba(255,255,255,.78);
        color: #4d667e;
        font-size: .86rem;
        font-weight: 740;
        text-decoration: none;
        transition: border-color .2s ease, background .2s ease, color .2s ease;
    }

    .job-back-link:hover { border-color: #b9d3ea; background: #fff; color: var(--jd-primary); }

    .job-copy-toast {
        position: fixed;
        z-index: 1100;
        right: 24px;
        bottom: 24px;
        display: flex;
        align-items: center;
        gap: 9px;
        max-width: calc(100vw - 32px);
        padding: 13px 17px;
        border-radius: 14px;
        background: #102f4b;
        box-shadow: 0 18px 45px rgba(0,0,0,.22);
        color: #fff;
        font-size: .86rem;
        font-weight: 700;
        opacity: 0;
        pointer-events: none;
        transform: translateY(16px);
        transition: opacity .25s ease, transform .25s ease;
    }

    .job-copy-toast.is-visible { opacity: 1; transform: translateY(0); }
    .job-copy-toast i { color: #55dc9f; }

    @media (max-width: 1100px) {
        .job-detail-layout { grid-template-columns: minmax(0, 1fr) 335px; }
        .job-detail-hero { grid-template-columns: 1fr; }
        .job-detail-hero__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    }

    @media (max-width: 900px) {
        .job-detail-page { padding-top: 20px; }
        .job-detail-layout { grid-template-columns: 1fr; }
        .job-detail-sidebar { position: static; grid-row: 1; }
        .job-summary-card { order: 1; }
        .job-contact-card { order: 2; }
        .job-back-link { order: 3; }
    }

    @media (max-width: 700px) {
        .job-detail-hero { padding: 25px 21px; border-radius: 24px; }
        .job-detail-hero__main { grid-template-columns: 86px minmax(0,1fr); gap: 17px; }
        .job-detail-logo { width: 86px; height: 86px; border-radius: 22px; font-size: 2rem; }
        .job-detail-hero h1 { font-size: 1.72rem; }
        .job-detail-hero__actions { grid-template-columns: 1fr 1fr; }
        .job-detail-btn--apply,
        .job-detail-btn--disabled { grid-column: 1 / -1; }
        .job-content-card { padding: 23px 21px 25px; }
    }

    @media (max-width: 520px) {
        .job-detail-page { padding-bottom: 45px; }
        .job-breadcrumb { font-size: .78rem; }
        .job-detail-hero__main { grid-template-columns: 1fr; }
        .job-detail-logo { width: 82px; height: 82px; }
        .job-detail-meta span { width: 100%; }
        .job-detail-hero__actions { grid-template-columns: 1fr; }
        .job-detail-btn--apply,
        .job-detail-btn--disabled { grid-column: auto; }
        .job-content-card__heading { align-items: flex-start; }
        .job-location-card { padding: 21px; }
        .job-location-card__icon { width: 46px; height: 46px; }
        .job-summary-card,
        .job-contact-card { padding: 20px 17px; }
        .job-copy-toast { right: 16px; bottom: 16px; }
    }

    @media (prefers-reduced-motion: reduce) {
        .job-content-card,
        .job-detail-btn,
        .job-sidebar-apply-btn,
        .job-copy-toast { transition: none !important; }
    }


/* =========================================================
   JOB EDIT V3
   Dùng cho Views/Jobs/Edit.cshtml
   ========================================================= */

.je3-page {
    --je3-primary: #075db7;
    --je3-primary-dark: #063f81;
    --je3-cyan: #10a3a0;
    --je3-ink: #10243e;
    --je3-muted: #64748b;
    --je3-line: #dce7f2;
    --je3-soft: #eaf4ff;
    min-height: calc(100vh - 80px);
    padding: 36px 0 60px;
    background:
        radial-gradient(circle at 6% 3%, rgba(7, 93, 183, .10), transparent 25%),
        radial-gradient(circle at 94% 8%, rgba(16, 163, 160, .08), transparent 22%),
        linear-gradient(180deg, #f8fbfe 0%, #f3f8fc 100%);
}

.je3-page *,
.je3-page *::before,
.je3-page *::after {
    box-sizing: border-box;
}

.je3-container {
    max-width: 1320px;
}

.je3-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 38px;
    min-height: 290px;
    padding: 46px;
    margin-bottom: 22px;
    border-radius: 33px;
    color: #fff;
    background:
        linear-gradient(115deg, rgba(3, 63, 125, .99), rgba(7, 105, 181, .96) 56%, rgba(16, 163, 160, .92));
    box-shadow: 0 28px 68px rgba(5, 76, 143, .25);
}

.je3-hero::before,
.je3-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.je3-hero::before {
    width: 540px;
    height: 540px;
    right: -210px;
    top: -340px;
    background: rgba(255, 255, 255, .11);
}

.je3-hero::after {
    width: 300px;
    height: 300px;
    right: 210px;
    bottom: -245px;
    border: 46px solid rgba(255, 255, 255, .07);
}

.je3-hero-content,
.je3-hero-card {
    position: relative;
    z-index: 2;
}

.je3-hero-content {
    max-width: 790px;
}

.je3-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.je3-hero h1 {
    margin: 18px 0 12px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 850;
    letter-spacing: -1px;
}

.je3-hero h1 span {
    display: block;
    color: #8ef0dd;
}

.je3-hero-content > p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: 15.5px;
    line-height: 1.75;
}

.je3-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.je3-hero-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .11);
    color: rgba(255, 255, 255, .95);
    font-size: 13px;
    font-weight: 700;
}

.je3-hero-card {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 330px;
    flex: 0 0 330px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 24px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(13px);
}

.je3-hero-logo {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 20px;
    color: var(--je3-primary);
    background: #fff;
    font-size: 24px;
    font-weight: 850;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .15);
}

.je3-hero-logo img {
    width: 100%;
    height: 100%;
    padding: 7px;
    object-fit: contain;
}

.je3-hero-card-info {
    min-width: 0;
}

.je3-hero-card-info small,
.je3-hero-card-info strong {
    display: block;
}

.je3-hero-card-info small {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
}

.je3-hero-card-info strong {
    max-width: 205px;
    overflow: hidden;
    margin-bottom: 8px;
    color: #fff;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.je3-status-pill,
.je3-pin-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.je3-status-active { color: #087046; background: #dcfce7; }
.je3-status-paused { color: #92400e; background: #fef3c7; }
.je3-status-filled { color: #1d4ed8; background: #dbeafe; }
.je3-status-expired { color: #b91c1c; background: #fee2e2; }
.je3-status-neutral { color: #475569; background: #e2e8f0; }

.je3-pin-badge {
    color: #8a4a00;
    background: #fff0cd;
}

.je3-stepbar {
    position: sticky;
    top: 14px;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    padding: 13px;
    margin-bottom: 24px;
    border: 1px solid var(--je3-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 36px rgba(15, 62, 104, .09);
    backdrop-filter: blur(12px);
}

.je3-step {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 11px 13px;
    border-radius: 15px;
    color: #52657b;
    text-decoration: none;
    transition: .2s ease;
}

.je3-step > span {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    flex: 0 0 auto;
    border-radius: 11px;
    color: var(--je3-primary);
    background: var(--je3-soft);
    font-size: 12px;
    font-weight: 850;
}

.je3-step strong,
.je3-step small {
    display: block;
}

.je3-step strong {
    color: var(--je3-ink);
    font-size: 13px;
}

.je3-step small {
    margin-top: 2px;
    color: #8493a6;
    font-size: 11px;
}

.je3-step:hover,
.je3-step.is-active {
    color: var(--je3-primary);
    background: #edf7ff;
}

.je3-step.is-active > span {
    color: #fff;
    background: linear-gradient(135deg, var(--je3-primary), #1389cf);
    box-shadow: 0 8px 18px rgba(7, 93, 183, .24);
}

.je3-form-error,
.je3-validation-summary {
    margin-bottom: 20px;
    border: 1px solid #fecaca;
    border-radius: 17px;
    background: #fff1f2;
    box-shadow: 0 10px 28px rgba(190, 24, 93, .06);
}

.je3-form-error {
    display: flex;
    align-items: center;
    gap: 9px;
}

.je3-validation-summary:empty,
.je3-validation-summary.validation-summary-valid {
    display: none;
}

.je3-validation-summary ul {
    margin: 0;
    padding-left: 19px;
}

.je3-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.je3-main {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.je3-section {
    scroll-margin-top: 110px;
    padding: 28px;
    border: 1px solid var(--je3-line);
    border-radius: 27px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 17px 42px rgba(15, 62, 104, .08);
}

.je3-section-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 19px;
    margin-bottom: 23px;
    border-bottom: 1px solid #edf2f7;
}

.je3-section-icon {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    flex: 0 0 auto;
    border-radius: 15px;
    color: var(--je3-primary);
    background: var(--je3-soft);
    font-size: 21px;
}

.je3-section-heading h3 {
    margin: 0 0 4px;
    color: var(--je3-ink);
    font-size: 21px;
    font-weight: 820;
}

.je3-section-heading p {
    margin: 0;
    color: var(--je3-muted);
    font-size: 13px;
}

.je3-label {
    display: block;
    margin-bottom: 8px;
    color: #26384e;
    font-size: 13px;
    font-weight: 760;
}

.je3-field {
    position: relative;
}

.je3-field > i {
    position: absolute;
    left: 16px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    color: var(--je3-primary);
    font-size: 16px;
    pointer-events: none;
}

.je3-textarea-field > i {
    top: 18px;
    transform: none;
}

.je3-field .form-control,
.je3-field .form-select {
    width: 100%;
    min-height: 52px;
    padding-left: 47px;
    border: 1px solid #d7e3ee;
    border-radius: 15px;
    color: var(--je3-ink);
    background: #fbfdff;
    font-size: 14px;
    font-weight: 550;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.je3-field .form-select {
    padding-right: 42px;
}

.je3-field .form-control:hover,
.je3-field .form-select:hover {
    border-color: #a9cce6;
    background: #fff;
}

.je3-field .form-control:focus,
.je3-field .form-select:focus {
    border-color: #6bb2e6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(7, 93, 183, .10);
}

.je3-textarea-field .form-control {
    min-height: 145px;
    padding-top: 14px;
    resize: vertical;
}

.je3-page .required-mark {
    color: #dc2626;
}

.je3-page .text-danger.small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
}

.je3-page .input-validation-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .10) !important;
}

.je3-logo-upload {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 142px;
    padding: 20px;
    border: 1px dashed #92bfe2;
    border-radius: 21px;
    background:
        linear-gradient(145deg, #fbfdff, #f4f9fd);
}

.je3-logo-preview-wrap {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid #d7e4ef;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 11px 27px rgba(24, 58, 91, .08);
}

.je3-logo-preview {
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
}

.je3-logo-placeholder {
    color: var(--je3-primary);
    font-size: 36px;
}

.je3-logo-upload-info {
    flex: 1;
    min-width: 0;
}

.je3-logo-upload-info .form-control {
    min-height: 47px;
    border: 1px solid #d7e3ee;
    border-radius: 13px;
    background: #fff;
}

.je3-logo-upload-info small {
    display: block;
    margin-top: 8px;
    color: var(--je3-muted);
}

.je3-pin-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid #d7e3ee;
    border-radius: 15px;
    background: #f8fbfe;
}

.je3-actionbar {
    position: sticky;
    bottom: 14px;
    z-index: 18;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 18px;
    border: 1px solid var(--je3-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 18px 48px rgba(15, 62, 104, .15);
    backdrop-filter: blur(14px);
}

.je3-action-note {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.je3-action-note > i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 13px;
    color: #118652;
    background: #ddf7e9;
    font-size: 18px;
}

.je3-action-note strong,
.je3-action-note span {
    display: block;
}

.je3-action-note strong {
    color: var(--je3-ink);
    font-size: 13px;
}

.je3-action-note span {
    margin-top: 2px;
    color: var(--je3-muted);
    font-size: 11.5px;
}

.je3-action-buttons {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.je3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 45px;
    padding: 11px 16px;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 820;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.je3-btn:hover {
    transform: translateY(-2px);
}

.je3-btn-back {
    color: #334155;
    border-color: #e2e8f0;
    background: #f8fafc;
}

.je3-btn-back:hover {
    color: var(--je3-primary);
    background: #edf7ff;
}

.je3-btn-save {
    color: #fff;
    background: linear-gradient(135deg, #118652, #13a368);
    box-shadow: 0 12px 24px rgba(17, 134, 82, .21);
}

.je3-btn-save:hover {
    color: #fff;
    background: linear-gradient(135deg, #0f7649, #118b58);
}

.je3-sidebar {
    position: sticky;
    top: 108px;
    display: grid;
    gap: 17px;
}

.je3-side-card {
    padding: 21px;
    border: 1px solid var(--je3-line);
    border-radius: 23px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 15px 36px rgba(15, 62, 104, .08);
}

.je3-preview-card {
    text-align: center;
}

.je3-preview-logo {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 15px;
    overflow: hidden;
    border: 1px solid #d8e5ef;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, var(--je3-primary), var(--je3-cyan));
    font-size: 29px;
    font-weight: 850;
    box-shadow: 0 14px 30px rgba(7, 93, 183, .17);
}

.je3-preview-logo img {
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
    background: #fff;
}

.je3-preview-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--je3-primary);
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .65px;
    text-transform: uppercase;
}

.je3-preview-card h2 {
    margin: 0;
    color: var(--je3-ink);
    font-size: 18px;
    line-height: 1.35;
    font-weight: 820;
}

.je3-preview-card > p {
    margin: 6px 0 13px;
    color: var(--je3-muted);
    font-size: 12px;
}

.je3-preview-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
}

.je3-side-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    margin-bottom: 14px;
    border-bottom: 1px solid #edf2f7;
}

.je3-side-title > span {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 auto;
    border-radius: 14px;
    color: var(--je3-primary);
    background: var(--je3-soft);
    font-size: 18px;
}

.je3-side-title small,
.je3-side-title h3 {
    display: block;
}

.je3-side-title small {
    color: #8a98aa;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .45px;
}

.je3-side-title h3 {
    margin: 2px 0 0;
    color: var(--je3-ink);
    font-size: 15px;
    font-weight: 800;
}

.je3-summary-list {
    display: grid;
    gap: 10px;
}

.je3-summary-list > div {
    padding: 11px 12px;
    border-radius: 13px;
    background: #f8fbfe;
}

.je3-summary-list span,
.je3-summary-list strong {
    display: block;
}

.je3-summary-list span {
    margin-bottom: 3px;
    color: #8090a4;
    font-size: 10.5px;
    font-weight: 650;
}

.je3-summary-list strong {
    color: #26384e;
    font-size: 12px;
    line-height: 1.45;
    word-break: break-word;
}

.je3-tip-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.je3-tip-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 13px;
    color: #b45309;
    background: #fef3c7;
    font-size: 18px;
}

.je3-tip-card h3 {
    margin: 1px 0 6px;
    color: var(--je3-ink);
    font-size: 14px;
    font-weight: 800;
}

.je3-tip-card p {
    margin: 0;
    color: var(--je3-muted);
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 1199.98px) {
    .je3-workspace {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .je3-hero-card {
        width: 295px;
        flex-basis: 295px;
    }
}

@media (max-width: 991.98px) {
    .je3-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 36px;
    }

    .je3-hero-card {
        width: 100%;
        flex-basis: auto;
    }

    .je3-workspace {
        grid-template-columns: 1fr;
    }

    .je3-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .je3-tip-card {
        grid-column: 1 / -1;
    }

    .je3-actionbar {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .je3-page {
        padding-top: 22px;
    }

    .je3-hero {
        min-height: auto;
        padding: 27px 22px;
        border-radius: 24px;
    }

    .je3-hero h1 {
        font-size: 29px;
    }

    .je3-stepbar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .je3-step small {
        display: none;
    }

    .je3-section {
        padding: 21px;
        border-radius: 22px;
    }

    .je3-logo-upload {
        align-items: stretch;
        flex-direction: column;
    }

    .je3-logo-preview-wrap {
        width: 100%;
        height: 150px;
    }

    .je3-actionbar {
        align-items: stretch;
        flex-direction: column;
    }

    .je3-action-buttons {
        width: 100%;
    }

    .je3-btn {
        flex: 1 1 0;
    }

    .je3-sidebar {
        grid-template-columns: 1fr;
    }

    .je3-tip-card {
        grid-column: auto;
    }
}

@media (max-width: 479.98px) {
    .je3-hero-meta {
        display: grid;
    }

    .je3-stepbar {
        grid-template-columns: 1fr;
    }

    .je3-action-note {
        display: none;
    }

    .je3-action-buttons {
        flex-direction: column-reverse;
    }

    .je3-btn {
        width: 100%;
    }
}


/* =========================================================
   JOB DELETE V3 - ĐỒNG BỘ JOB EDIT
   Dùng cho Views/Jobs/Delete.cshtml
   ========================================================= */

.jd3-page {
    --jd3-primary: #075db7;
    --jd3-primary-dark: #063f81;
    --jd3-cyan: #10a3a0;
    --jd3-danger: #dc2626;
    --jd3-danger-dark: #b91c1c;
    --jd3-danger-soft: #fee2e2;
    --jd3-ink: #10243e;
    --jd3-muted: #64748b;
    --jd3-line: #dce7f2;
    min-height: calc(100vh - 80px);
    padding: 36px 0 60px;
    background:
        radial-gradient(circle at 6% 3%, rgba(7, 93, 183, .10), transparent 25%),
        radial-gradient(circle at 94% 8%, rgba(16, 163, 160, .08), transparent 22%),
        linear-gradient(180deg, #f8fbfe 0%, #f3f8fc 100%);
}

.jd3-page *,
.jd3-page *::before,
.jd3-page *::after {
    box-sizing: border-box;
}

.jd3-container {
    max-width: 1320px;
}

.jd3-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 38px;
    min-height: 290px;
    padding: 46px;
    margin-bottom: 24px;
    border-radius: 33px;
    color: #fff;
    background:
        linear-gradient(115deg, rgba(3, 63, 125, .99), rgba(7, 105, 181, .96) 56%, rgba(16, 163, 160, .92));
    box-shadow: 0 28px 68px rgba(5, 76, 143, .25);
}

.jd3-hero::before,
.jd3-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.jd3-hero::before {
    width: 540px;
    height: 540px;
    right: -210px;
    top: -340px;
    background: rgba(255, 255, 255, .11);
}

.jd3-hero::after {
    width: 300px;
    height: 300px;
    right: 210px;
    bottom: -245px;
    border: 46px solid rgba(255, 255, 255, .07);
}

.jd3-hero-content,
.jd3-hero-company {
    position: relative;
    z-index: 2;
}

.jd3-hero-content {
    max-width: 790px;
}

.jd3-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.jd3-hero h1 {
    margin: 18px 0 12px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 850;
    letter-spacing: -1px;
}

.jd3-hero h1 span {
    display: block;
    color: #8ef0dd;
}

.jd3-hero-content > p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: 15.5px;
    line-height: 1.75;
}

.jd3-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.jd3-hero-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .11);
    color: rgba(255, 255, 255, .95);
    font-size: 13px;
    font-weight: 700;
}

.jd3-hero-company {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 330px;
    flex: 0 0 330px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 24px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(13px);
}

.jd3-hero-logo {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 20px;
    color: var(--jd3-primary);
    background: #fff;
    font-size: 24px;
    font-weight: 850;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .15);
}

.jd3-hero-logo img,
.jd3-job-logo img {
    width: 100%;
    height: 100%;
    padding: 7px;
    object-fit: contain;
}

.jd3-hero-company-info {
    min-width: 0;
}

.jd3-hero-company-info small,
.jd3-hero-company-info strong {
    display: block;
}

.jd3-hero-company-info small {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
}

.jd3-hero-company-info strong {
    max-width: 205px;
    overflow: hidden;
    margin-bottom: 8px;
    color: #fff;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jd3-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.jd3-status-active { color: #087046; background: #dcfce7; }
.jd3-status-paused { color: #92400e; background: #fef3c7; }
.jd3-status-filled { color: #1d4ed8; background: #dbeafe; }
.jd3-status-expired { color: #b91c1c; background: #fee2e2; }
.jd3-status-neutral { color: #475569; background: #e2e8f0; }

.jd3-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.jd3-main-card,
.jd3-side-card {
    border: 1px solid var(--jd3-line);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 17px 42px rgba(15, 62, 104, .08);
}

.jd3-main-card {
    padding: 30px;
    border-radius: 28px;
}

.jd3-danger-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid #edf2f7;
}

.jd3-danger-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    border-radius: 19px;
    color: var(--jd3-danger);
    background: linear-gradient(145deg, #fff1f2, var(--jd3-danger-soft));
    font-size: 26px;
    box-shadow: 0 12px 28px rgba(220, 38, 38, .12);
}

.jd3-danger-heading span {
    display: block;
    margin-bottom: 3px;
    color: var(--jd3-danger);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .65px;
    text-transform: uppercase;
}

.jd3-danger-heading h2 {
    margin: 0 0 6px;
    color: var(--jd3-ink);
    font-size: 24px;
    font-weight: 850;
}

.jd3-danger-heading p {
    margin: 0;
    color: var(--jd3-muted);
    font-size: 13px;
    line-height: 1.6;
}

.jd3-job-card {
    padding: 21px;
    margin-bottom: 18px;
    border: 1px solid #dce8f3;
    border-radius: 22px;
    background:
        linear-gradient(145deg, #fbfdff, #f6f9fc);
}

.jd3-job-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #e7eef5;
}

.jd3-job-logo {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid #d8e5ef;
    border-radius: 19px;
    color: #fff;
    background: linear-gradient(135deg, var(--jd3-primary), var(--jd3-cyan));
    font-size: 22px;
    font-weight: 850;
}

.jd3-job-title {
    min-width: 0;
    flex: 1;
}

.jd3-job-title > span {
    display: block;
    margin-bottom: 3px;
    color: #7d8da0;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.jd3-job-title h3 {
    margin: 0;
    color: var(--jd3-ink);
    font-size: 19px;
    font-weight: 830;
    line-height: 1.35;
}

.jd3-job-title p {
    margin: 4px 0 0;
    color: var(--jd3-muted);
    font-size: 12px;
}

.jd3-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.jd3-summary-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 13px;
    border: 1px solid #e3ebf3;
    border-radius: 15px;
    background: #fff;
}

.jd3-summary-icon {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    flex: 0 0 auto;
    border-radius: 12px;
    color: var(--jd3-primary);
    background: #eaf4ff;
}

.jd3-summary-icon-green { color: #15803d; background: #dcfce7; }
.jd3-summary-icon-orange { color: #c2410c; background: #ffedd5; }
.jd3-summary-icon-purple { color: #6d28d9; background: #ede9fe; }
.jd3-summary-icon-red { color: #b91c1c; background: #fee2e2; }

.jd3-summary-item small,
.jd3-summary-item strong {
    display: block;
}

.jd3-summary-item small {
    margin-bottom: 3px;
    color: #8090a4;
    font-size: 10.5px;
    font-weight: 650;
}

.jd3-summary-item strong {
    overflow: hidden;
    color: #26384e;
    font-size: 12px;
    line-height: 1.4;
    text-overflow: ellipsis;
    word-break: break-word;
}

.jd3-warning-box {
    padding: 17px 18px;
    margin-bottom: 22px;
    border: 1px solid #fed7aa;
    border-radius: 18px;
    background: #fff7ed;
}

.jd3-warning-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #9a3412;
    font-size: 13px;
}

.jd3-warning-box ul {
    display: grid;
    gap: 7px;
    padding-left: 19px;
    margin: 0;
    color: #7c2d12;
    font-size: 12px;
    line-height: 1.5;
}

.jd3-delete-form {
    display: flex;
    justify-content: flex-end;
    gap: 11px;
    padding-top: 21px;
    border-top: 1px solid #edf2f7;
}

.jd3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 47px;
    padding: 11px 17px;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 820;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.jd3-btn:hover {
    transform: translateY(-2px);
}

.jd3-btn-back {
    color: #334155;
    border-color: #e2e8f0;
    background: #f8fafc;
}

.jd3-btn-back:hover {
    color: var(--jd3-primary);
    background: #edf7ff;
}

.jd3-btn-delete {
    color: #fff;
    background:
        linear-gradient(135deg, var(--jd3-danger), var(--jd3-danger-dark));
    box-shadow: 0 13px 26px rgba(220, 38, 38, .22);
}

.jd3-btn-delete:hover {
    color: #fff;
    background:
        linear-gradient(135deg, #b91c1c, #991b1b);
    box-shadow: 0 17px 31px rgba(185, 28, 28, .28);
}

.jd3-sidebar {
    position: sticky;
    top: 108px;
    display: grid;
    gap: 17px;
}

.jd3-side-card {
    padding: 21px;
    border-radius: 23px;
}

.jd3-side-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    margin-bottom: 14px;
    border-bottom: 1px solid #edf2f7;
}

.jd3-side-title > span {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 auto;
    border-radius: 14px;
    color: var(--jd3-primary);
    background: #eaf4ff;
    font-size: 18px;
}

.jd3-side-title small,
.jd3-side-title h3 {
    display: block;
}

.jd3-side-title small {
    color: #8a98aa;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .45px;
}

.jd3-side-title h3 {
    margin: 2px 0 0;
    color: var(--jd3-ink);
    font-size: 15px;
    font-weight: 800;
}

.jd3-side-list {
    display: grid;
    gap: 10px;
}

.jd3-side-list > div {
    padding: 11px 12px;
    border-radius: 13px;
    background: #f8fbfe;
}

.jd3-side-list span,
.jd3-side-list strong {
    display: block;
}

.jd3-side-list span {
    margin-bottom: 3px;
    color: #8090a4;
    font-size: 10.5px;
    font-weight: 650;
}

.jd3-side-list strong {
    color: #26384e;
    font-size: 12px;
    line-height: 1.45;
    word-break: break-word;
}

.jd3-protection-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.jd3-protection-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 auto;
    border-radius: 14px;
    color: #b45309;
    background: #fef3c7;
    font-size: 18px;
}

.jd3-protection-card h3 {
    margin: 1px 0 6px;
    color: var(--jd3-ink);
    font-size: 14px;
    font-weight: 800;
}

.jd3-protection-card p {
    margin: 0;
    color: var(--jd3-muted);
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 991.98px) {
    .jd3-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 36px;
    }

    .jd3-hero-company {
        width: 100%;
        flex-basis: auto;
    }

    .jd3-workspace {
        grid-template-columns: 1fr;
    }

    .jd3-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .jd3-page {
        padding-top: 22px;
    }

    .jd3-hero {
        min-height: auto;
        padding: 27px 22px;
        border-radius: 24px;
    }

    .jd3-hero h1 {
        font-size: 29px;
    }

    .jd3-main-card {
        padding: 21px;
        border-radius: 22px;
    }

    .jd3-danger-heading {
        align-items: flex-start;
    }

    .jd3-summary-grid {
        grid-template-columns: 1fr;
    }

    .jd3-sidebar {
        grid-template-columns: 1fr;
    }

    .jd3-delete-form {
        flex-direction: column-reverse;
    }

    .jd3-btn {
        width: 100%;
    }
}

@media (max-width: 479.98px) {
    .jd3-hero-meta {
        display: grid;
    }

    .jd3-job-card-top {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .jd3-job-card-top > .jd3-status-pill {
        margin-left: 80px;
    }
}


/* =========================================================
   JOB DATE FILTERS
   ========================================================= */
.job-input-wrap input[type="date"] {
    color-scheme: light;
}

.job-input-wrap input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .7;
}

.job-input-wrap input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

.job-input-wrap .form-select{min-width:0;white-space:nowrap;font-size:.85rem;}
.job-field--business-sector {
    min-width: 230px;
}

    .job-field--business-sector .form-select {
        font-size: 0.84rem;
        padding-right: 36px;
    }
/* =========================================================
   DARK MODE V2 - JOBS / JOB DETAILS
   ========================================================= */
html[data-theme="dark"] .job-board-page {
    --job-primary: #65b8ff;
    --job-primary-dark: #abd9ff;
    --job-primary-soft: #173a5c;
    --job-accent: #4adacb;
    --job-accent-soft: #153d3b;
    --job-text: #f3f7fd;
    --job-muted: #b4c3d5;
    --job-border: #32475f;
    --job-surface: #172438;
    --job-page: #0b1322;
    --job-shadow: 0 18px 55px rgba(0,0,0,.26);
    --job-shadow-hover: 0 24px 70px rgba(0,0,0,.38);
}

html[data-theme="dark"] .job-filter-card,
html[data-theme="dark"] .active-filters,
html[data-theme="dark"] .job-card,
html[data-theme="dark"] .job-empty-state,
html[data-theme="dark"] .job-pagination-wrap,
html[data-theme="dark"] .job-list-heading__note {
    color: var(--job-text);
    background: rgba(23,36,56,.97);
    border-color: var(--job-border);
}

html[data-theme="dark"] .job-card--pinned {
    background: linear-gradient(180deg, #192a40, #142236);
    border-color: #487ca6;
}

html[data-theme="dark"] .job-card h3 a,
html[data-theme="dark"] .job-filter-card__heading h2,
html[data-theme="dark"] .job-list-heading h2,
html[data-theme="dark"] .job-empty-state h2 {
    color: var(--job-text) !important;
}
html[data-theme="dark"] .job-card__company,
html[data-theme="dark"] .job-card__description,
html[data-theme="dark"] .job-list-heading p,
html[data-theme="dark"] .job-list-heading__note,
html[data-theme="dark"] .deadline-pill {
    color: var(--job-muted) !important;
}

html[data-theme="dark"] .job-field label {
    color: #d7e2ef !important;
}
html[data-theme="dark"] .job-input-wrap .form-control,
html[data-theme="dark"] .job-input-wrap .form-select {
    color: #eff5ff;
    background-color: #101c2d;
    border-color: #354b66;
}
html[data-theme="dark"] .job-input-wrap .form-control::placeholder {
    color: #91a3b8;
}
html[data-theme="dark"] .job-input-wrap > i {
    color: #82bfee;
}

html[data-theme="dark"] .meta-item {
    background: #111d2f;
    border-color: #2d4159;
}
html[data-theme="dark"] .meta-item small {
    color: #9aabbe !important;
}
html[data-theme="dark"] .meta-item strong {
    color: #e2eaf4 !important;
}

/* Ô lương giữ tông sáng để nổi bật: dùng chữ tối rõ ràng */
html[data-theme="dark"] .job-card__salary {
    background: linear-gradient(135deg, #dff7eb, #ccefdc);
    border-color: #8fd1ad;
}
html[data-theme="dark"] .job-card__salary small {
    color: #3f6853 !important;
}
html[data-theme="dark"] .job-card__salary strong {
    color: #08643d !important;
}

html[data-theme="dark"] .company-logo {
    background: #fff;
    border-color: #46617c;
}

html[data-theme="dark"] .job-pagination li a,
html[data-theme="dark"] .job-pagination li span {
    color: #dce8f5;
    background: #111d2f;
    border-color: #32475f;
}

/* Chi tiết việc làm */
html[data-theme="dark"] .job-detail-page {
    --jd-text: #f3f7fd;
    --jd-muted: #b4c3d5;
    --jd-border: #32475f;
    --jd-bg: #0b1322;
    --jd-white: #172438;
    --jd-primary-soft: #173a5c;
    --jd-shadow: 0 20px 55px rgba(0,0,0,.27);
}
html[data-theme="dark"] .job-content-card,
html[data-theme="dark"] .job-location-card,
html[data-theme="dark"] .job-summary-card,
html[data-theme="dark"] .job-contact-card {
    color: var(--jd-text);
    background: linear-gradient(145deg, #172438, #111d2f);
    border-color: var(--jd-border);
}
html[data-theme="dark"] .job-content-card h2,
html[data-theme="dark"] .job-location-card h2,
html[data-theme="dark"] .job-summary-card h2,
html[data-theme="dark"] .job-contact-card h2,
html[data-theme="dark"] .job-summary-item strong {
    color: var(--jd-text) !important;
}
html[data-theme="dark"] .job-content-card__body,
html[data-theme="dark"] .job-location-card p,
html[data-theme="dark"] .job-summary-item small,
html[data-theme="dark"] .job-contact-list small {
    color: var(--jd-muted) !important;
}
html[data-theme="dark"] .job-summary-item:hover {
    background: #1b2b40;
}