/* ==========================================================================
   AcademicGates — redesign layer (ag-redesign)
   Nguon: ag-redesign.zip (he thiet ke "Industry" + ag-round.css cua AcademicGates)

   Mau lay tu logo AcademicGates: xanh #189652 (goc), #0EB95E (hover),
   xanh dam #0D4D2B (nen truong, chu tren nen nhat), ho phach #FDB500 (nhan manh).
   Chu: Barlow Condensed cho tieu de, Barlow cho noi dung.
   Bo goc: khung/the 8px - control don 6px - tag 4px - nhom control bo ngoai 6px,
   cac phan tu ben trong vuong goc de mot input dinh lien nut doc nhu MOT vat the.

   Toan bo class deu co tien to .ag- va phan lon nam trong pham vi .ag-page nen
   khong dung cham toi cac trang chua chuyen giao dien.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600&display=swap');

:root {
    --ag-bg: #f2f2f3;
    --ag-surface: #e9e9ea;
    --ag-paper: #fff;
    --ag-text: #1d1f20;
    --ag-green: #189652;
    --ag-green-h: #0eb95e;
    --ag-deep: #0d4d2b;
    --ag-amber: #fdb500;
    --ag-amber-h: #e5a400;
    --ag-tint: #e7f6ed;
    --ag-tint-2: #f7fbf8;
    --ag-warn-bg: #fff3d6;
    --ag-warn-fg: #8a4b00;
    --ag-hot-bg: #ffe9de;
    --ag-hot-fg: #c2410c;
    --ag-line: rgba(29, 31, 32, .16);
    --ag-line-soft: rgba(29, 31, 32, .1);
    --ag-muted: rgba(29, 31, 32, .55);
    --ag-muted-2: rgba(29, 31, 32, .78);
    --ag-head: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
    --ag-body: 'Barlow', system-ui, sans-serif;
    --ag-r-frame: 8px;
    --ag-r-ctrl: 6px;
    --ag-r-tag: 4px;
    --ag-wrap: 1240px;
    /* chieu cao thanh header dinh cua site, dung lam moc cho cac khoi sticky.
       = padding 10px x2 + phan cao nhat trong hang (logo 30px) + 1px duong ke */
    --ag-header-h: 52px;
}

/* --------------------------------------------------------------------------
   1. Nen trang
   -------------------------------------------------------------------------- */
body.ag-body {
    background: var(--ag-bg);
    color: var(--ag-text);
    font-family: var(--ag-body);
}

.ag-page {
    background: var(--ag-bg);
    color: var(--ag-text);
    font-family: var(--ag-body);
    font-size: 15px;
    line-height: 1.55;
}

.ag-page a {
    color: var(--ag-green);
    text-decoration: none;
}

.ag-page a:hover {
    color: var(--ag-green-h);
}

.ag-page :focus-visible {
    outline: 2px solid var(--ag-green);
    outline-offset: 2px;
}

.ag-page ::selection {
    background: var(--ag-tint);
}

.ag-wrap {
    max-width: var(--ag-wrap);
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.ag-sec {
    padding-top: 72px;
}

.ag-sec-tight {
    padding-top: 40px;
}

.ag-sec-last {
    padding-bottom: 8px;
}

/* --------------------------------------------------------------------------
   1b. Thanh header cua site (markup cu, giu nguyen theo yeu cau)
       Ban goc dat header o position:absolute + nen trong suot de no chong len
       banner anh toi mau. Voi hero xanh dam cua thiet ke moi thi header trong
       suot lai trung mau voi hero, con o cac trang khac thi header de len ca
       noi dung. O day dua header tro lai dong chay cua trang: nen sang, co
       duong ke duoi va dinh lai khi cuon — dung nhu Site Header trong ban ve.
   -------------------------------------------------------------------------- */
body.ag-body .jobguru-header-area.stick-top,
body.ag-body .jobguru-header-area.forsticky.sticky {
    position: sticky;
    top: 0;
    left: auto;
    width: 100%;
    padding: 10px 0;
    /* z-index co y de nguyen theo ban goc (.stick-top 12, .forsticky.sticky 1999)
       de khong doi thu tu chong lop voi menu mobile va cac modal */
    background: var(--ag-paper);
    border-bottom: 1px solid var(--ag-line);
    box-shadow: none;
}

body.ag-body .jobguru-header-area .site-logo img {
    width: auto;
    height: 30px;
}

body.ag-body .jobguru-header-area .header-menu ul li a,
body.ag-body .jobguru-header-area .header-right-menu ul li a,
body.ag-body .jobguru-header-area .navIcon {
    color: var(--ag-text);
    font-family: var(--ag-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

body.ag-body .jobguru-header-area .header-menu ul li a:hover,
body.ag-body .jobguru-header-area .header-right-menu ul li a:hover,
body.ag-body .jobguru-header-area .header-menu ul li.active > a {
    color: var(--ag-green);
}

body.ag-body .jobguru-header-area.stick-top .post-jobs,
body.ag-body .jobguru-header-area.stick-top.sticky .post-jobs,
body.ag-body .jobguru-header-area.stick-top .signIn-btn,
body.ag-body .jobguru-header-area.stick-top .signUp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--ag-r-ctrl);
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: .01em;
    text-transform: none;
    padding: 7px 13px;
}

body.ag-body .jobguru-header-area.stick-top .post-jobs,
body.ag-body .jobguru-header-area.stick-top.sticky .post-jobs,
body.ag-body .jobguru-header-area.stick-top .signIn-btn {
    background: var(--ag-green);
    border: 1px solid var(--ag-green);
    color: #fff !important;
}

body.ag-body .jobguru-header-area.stick-top .post-jobs:hover,
body.ag-body .jobguru-header-area.stick-top.sticky .post-jobs:hover,
body.ag-body .jobguru-header-area.stick-top .signIn-btn:hover {
    background: var(--ag-green-h);
    border-color: var(--ag-green-h);
}

body.ag-body .jobguru-header-area.stick-top .signUp-btn {
    background: var(--ag-amber);
    border: 1px solid var(--ag-amber);
    color: var(--ag-text) !important;
}

body.ag-body .jobguru-header-area.stick-top .signUp-btn:hover {
    background: var(--ag-amber-h);
    border-color: var(--ag-amber-h);
}

/* Trang dung nen sang (trang) thay vi nen #f2f2f3 mac dinh — hien dung cho
   trang chi tiet job, de dong bo voi cac cot da chuyen sang trang o trang tim viec. */
body.ag-body-paper,
body.ag-body-paper .ag-page {
    background: var(--ag-paper);
}

/* Bang thong tin nhanh / bang so lieu ve duong ke bang cach de ho 1px giua cac o
   tren mot nen mau duong ke. Cac o phai lay dung mau nen cua trang, khong thi
   chung thanh nhung o xam noi len giua nen trang. */
body.ag-body-paper .ag-fact,
body.ag-body-paper .ag-stat {
    background: var(--ag-paper);
}

/* --------------------------------------------------------------------------
   2. Chu
   -------------------------------------------------------------------------- */
/* Mac dinh cho moi tieu de trong pham vi trang. Do uu tien cua ".ag-page h1"
   la (0,1,1) — cao hon mot class don — nen bat ky component nao muon dat mau
   hoac khoang cach rieng deu phai viet kem ".ag-page" (xem cac rule ben duoi),
   neu khong se bi rule nay nuot mat. */
.ag-page h1,
.ag-page h2,
.ag-page h3,
.ag-page h4,
.ag-h1,
.ag-h2,
.ag-h3 {
    font-family: var(--ag-head);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ag-text);
    margin: 0;
}

.ag-h1 {
    font-size: clamp(34px, 5.6vw, 56px);
    line-height: 1.02;
    letter-spacing: -.02em;
}

.ag-h2 {
    font-size: 36px;
    line-height: 1.08;
}

.ag-h3 {
    font-size: 26px;
    line-height: 1.15;
}

.ag-kicker {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ag-muted);
}

.ag-eyebrow {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ag-green);
}

.ag-lead {
    font-size: 17px;
    line-height: 1.6;
    color: var(--ag-muted-2);
    margin: 0;
    max-width: 62ch;
}

.ag-meta {
    font-size: 13px;
    color: var(--ag-muted);
}

/* Dau muc mot khoi noi dung: tieu de + duong ke + link "xem tat ca" */
.ag-sec-head {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--ag-line);
    padding-bottom: 14px;
    margin-bottom: 28px;
}

.ag-sec-head > .ag-h2 {
    flex: 1 1 240px;
}

.ag-sec-head .ag-sec-link {
    font-size: 14px;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Nut & tag
   -------------------------------------------------------------------------- */
.ag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    padding: 11px 22px;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-ctrl);
    background: transparent;
    color: var(--ag-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ag-btn:hover {
    border-color: var(--ag-green);
    color: var(--ag-green);
}

/* ".ag-page a" co do uu tien (0,1,1), cao hon mot class don, nen moi component
   duoc dat tren the <a> phai viet kem "a" thi mau rieng cua no moi giu duoc. */
.ag-page a.ag-btn {
    color: var(--ag-text);
}

.ag-page a.ag-btn:hover {
    color: var(--ag-green);
}

.ag-btn--primary,
.ag-page a.ag-btn--primary {
    background: var(--ag-green);
    border-color: var(--ag-green);
    color: #fff;
}

.ag-btn--primary:hover,
.ag-page a.ag-btn--primary:hover {
    background: var(--ag-green-h);
    border-color: var(--ag-green-h);
    color: #fff;
}

.ag-btn--amber,
.ag-page a.ag-btn--amber {
    background: var(--ag-amber);
    border-color: var(--ag-amber);
    color: var(--ag-text);
}

.ag-btn--amber:hover,
.ag-page a.ag-btn--amber:hover {
    background: var(--ag-amber-h);
    border-color: var(--ag-amber-h);
    color: var(--ag-text);
}

.ag-btn--dark,
.ag-page a.ag-btn--dark {
    background: var(--ag-text);
    border-color: var(--ag-text);
    color: var(--ag-amber);
}

.ag-btn--dark:hover,
.ag-page a.ag-btn--dark:hover {
    background: var(--ag-deep);
    border-color: var(--ag-deep);
    color: #fff;
}

.ag-btn--sm {
    padding: 8px 14px;
    font-size: 13px;
}

.ag-btn--lg {
    padding: 13px 28px;
    font-size: 18px;
}

.ag-btn--block {
    width: 100%;
}

.ag-btn[disabled],
.ag-btn.disabled {
    opacity: .45;
    cursor: not-allowed;
}

.ag-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1.5;
    padding: 3px 8px;
    border-radius: var(--ag-r-tag);
    background: var(--ag-tint);
    color: var(--ag-deep);
    white-space: nowrap;
}

.ag-tag--warn {
    background: var(--ag-warn-bg);
    color: var(--ag-warn-fg);
}

.ag-tag--hot {
    background: var(--ag-hot-bg);
    color: var(--ag-hot-fg);
}

.ag-tag--ghost,
.ag-page a.ag-tag--ghost {
    background: transparent;
    border: 1px solid var(--ag-line);
    color: var(--ag-muted-2);
}

.ag-page a.ag-tag--ghost:hover {
    border-color: var(--ag-green);
    color: var(--ag-green);
}

/* Nhom control: bo goc o vo ngoai, cac con vuong goc */
.ag-group {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(29, 31, 32, .2);
    border-radius: var(--ag-r-ctrl);
    background: var(--ag-surface);
    overflow: hidden;
}

.ag-group > *,
.ag-group > * > * {
    border-radius: 0 !important;
}

/* Vong focus mac dinh cua .ag-page co do uu tien (0,2,0), cao hon ".ag-group input"
   (0,1,1) nen van duoc ve; roi "overflow: hidden" cua .ag-group cat mat canh tren
   duoi cua no, chi con lai hai vach xanh doc hai ben o nhap — trong nhu loi hien thi.
   Nen o day bo han vong focus cua tung con, va bao hieu focus tren CA KHOI:
   box-shadow cua chinh .ag-group khong bi overflow cua no cat. */
.ag-page .ag-group :focus,
.ag-page .ag-group :focus-visible {
    outline: none;
}

.ag-group:focus-within {
    border-color: var(--ag-green);
    box-shadow: 0 0 0 3px rgba(24, 150, 82, .16);
}

/* Nut van can dau hieu focus rieng — dung vien trong (inset) nen khong bi cat */
.ag-page .ag-group .ag-group-btn:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9);
}

.ag-page .ag-group .ag-searchbar-clear:focus-visible {
    box-shadow: inset 0 0 0 2px var(--ag-green);
}

.ag-group input,
.ag-group select {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    outline: none;
    min-width: 0;
    padding: 9px 14px;
    color: var(--ag-text);
}

.ag-group button:not(.ag-searchbar-clear),
.ag-group .ag-group-btn {
    border: 0;
    background: var(--ag-green);
    color: #fff;
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 16px;
    padding: 0 22px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s ease;
}

.ag-group button:not(.ag-searchbar-clear):hover,
.ag-group .ag-group-btn:hover {
    background: var(--ag-green-h);
    color: #fff;
}

/* --------------------------------------------------------------------------
   4. Khung (the) & monogram
   -------------------------------------------------------------------------- */
.ag-frame {
    position: relative;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    background: transparent;
}

.ag-frame--tint {
    background: var(--ag-tint-2);
}

.ag-frame--paper {
    background: var(--ag-paper);
}

.ag-frame--pad {
    padding: 20px;
}

/* Monogram 2 chu cai — dung khi to chuc khong co logo, va lam khung anh logo */
.ag-mono,
.ag-page a.ag-mono {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(24, 150, 82, .3);
    border-radius: var(--ag-r-ctrl);
    background: var(--ag-tint);
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .02em;
    color: var(--ag-deep);
    overflow: hidden;
    text-align: center;
    line-height: 1;
}

.ag-mono img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.ag-mono--xs {
    width: 36px;
    height: 36px;
    font-size: 13px;
}

/* Icon icomoon (the linh vuc o trang chu) khong doc theo co chu monogram */
.ag-mono [class^="icon-"],
.ag-mono [class*=" icon-"] {
    font-size: 18px;
    line-height: 1;
    color: var(--ag-green);
}

.ag-mono--sm {
    width: 44px;
    height: 44px;
    font-size: 14px;
}

.ag-mono--md {
    width: 58px;
    height: 58px;
    font-size: 21px;
}

.ag-mono--lg {
    width: 64px;
    height: 64px;
    font-size: 19px;
}

.ag-mono--xl {
    width: 104px;
    height: 104px;
    font-size: 36px;
    border-radius: var(--ag-r-frame);
}

/* --------------------------------------------------------------------------
   5. Hero trang chu
   -------------------------------------------------------------------------- */
.ag-hero {
    background: var(--ag-deep);
    color: var(--ag-bg);
    border-bottom: 1px solid var(--ag-line);
}

.ag-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 56px;
    align-items: end;
    padding-top: 76px;
    padding-bottom: 64px;
}

/* Khoi o tim kiem nam duoi luoi hero */
.ag-hero-search {
    padding-bottom: 56px;
}

.ag-hero .ag-kicker {
    color: var(--ag-amber);
    display: block;
    margin-bottom: 18px;
}

.ag-page .ag-hero-title,
.ag-hero-title {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: clamp(42px, 8vw, 70px);
    line-height: .98;
    letter-spacing: -.02em;
    margin: 0 0 18px;
    color: #fff;
    text-wrap: balance;
}

/* Meta tag cua site co the con the mau cu ben trong h1; hero lay mau tu thiet ke */
.ag-hero-title span {
    color: inherit !important;
}

.ag-hero-sub {
    font-size: 18px;
    line-height: 1.5;
    max-width: 46ch;
    margin: 0;
    color: rgba(242, 242, 243, .86);
}

.ag-hero-stat {
    display: grid;
    gap: 10px;
}

.ag-hero-stat-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.ag-hero-num {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 56px;
    line-height: 1;
    color: var(--ag-amber);
}

.ag-hero-stat-label,
.ag-hero-stat-note {
    font-size: 14px;
    color: rgba(242, 242, 243, .8);
    line-height: 1.6;
}

.ag-hero-rule {
    height: 1px;
    background: rgba(242, 242, 243, .25);
    margin: 6px 0;
}

/* Thanh tim kiem lon o hero */
.ag-hsearch {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: stretch;
    background: var(--ag-bg);
    border: 1px solid rgba(242, 242, 243, .4);
    border-radius: var(--ag-r-frame);
    overflow: hidden;
}

.ag-hsearch > * {
    border-radius: 0 !important;
}

.ag-hfield {
    display: grid;
    gap: 2px;
    padding: 12px 16px;
    border-right: 1px solid var(--ag-line);
    min-width: 0;
    margin: 0;
}

.ag-hfield > span {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(29, 31, 32, .6);
}

.ag-hfield input,
.ag-hfield select {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ag-text);
    min-width: 0;
    width: 100%;
    padding: 0;
}

/* Cac o nay la mot phan cua thanh tim kiem lien khoi, ke vong focus quanh tung o
   se ve them mot duong vien khong co trong ban thiet ke. Bo vong do va bao hieu
   focus bang cach lam sang o dang go — van thay ro ma khong them net ke nao. */
.ag-hfield input:focus,
.ag-hfield select:focus,
.ag-hfield input:focus-visible,
.ag-hfield select:focus-visible {
    outline: none;
    box-shadow: none;
}

.ag-hfield:focus-within {
    background: rgba(255, 255, 255, .55);
}

.ag-hsearch-go {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ag-amber);
    color: var(--ag-text);
    padding: 0 30px;
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: .02em;
    border: 0;
    cursor: pointer;
    transition: background .15s ease;
}

.ag-page a.ag-hsearch-go,
.ag-page a.ag-hsearch-go:hover {
    color: var(--ag-text);
}

.ag-hsearch-go:hover {
    background: var(--ag-amber-h);
}

.ag-hpop {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    align-items: center;
}

.ag-hpop-label {
    font-size: 12px;
    color: rgba(242, 242, 243, .6);
    margin-right: 4px;
}

.ag-page a.ag-hpop-item {
    font-size: 12px;
    color: var(--ag-bg);
    border: 1px solid rgba(242, 242, 243, .35);
    border-radius: var(--ag-r-ctrl);
    padding: 4px 12px;
}

.ag-page a.ag-hpop-item:hover {
    background: rgba(242, 242, 243, .12);
    color: #fff;
}

/* --------------------------------------------------------------------------
   6. Luoi & the noi dung
   -------------------------------------------------------------------------- */
.ag-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 26px;
}

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

.ag-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

/* The job (Featured Jobs) */
.ag-jobcard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    background: transparent;
    transition: border-color .15s ease;
}

.ag-jobcard:hover {
    border-color: var(--ag-green);
}

.ag-jobcard-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.ag-page a.ag-jobcard-title {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 23px;
    line-height: 1.15;
    color: var(--ag-text);
}

.ag-page a.ag-jobcard-title:hover {
    color: var(--ag-green);
}

.ag-jobcard-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ag-line-soft);
}

.ag-jobcard-org {
    min-width: 0;
    flex: 1;
}

.ag-jobcard-org-name {
    font-size: 14px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ag-jobcard-org-loc {
    font-size: 12px;
    color: var(--ag-muted);
}

/* Dong job (Latest Jobs) */
.ag-jobrow {
    display: grid;
    grid-template-columns: 44px minmax(0, 2.2fr) minmax(0, 1.2fr) 150px 110px;
    gap: 20px;
    align-items: center;
    padding: 18px 8px;
    border-bottom: 1px solid var(--ag-line-soft);
    color: var(--ag-text);
    transition: background .15s ease;
}

.ag-page a.ag-jobrow {
    color: var(--ag-text);
}

.ag-jobrow:hover {
    background: rgba(24, 150, 82, .05);
}

.ag-jobrow-title {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
}

.ag-jobrow-org {
    font-size: 14px;
    color: var(--ag-muted-2);
}

.ag-jobrow-loc {
    font-size: 13px;
    color: var(--ag-muted);
}

.ag-jobrow-when {
    font-size: 12px;
    color: var(--ag-green);
    text-align: right;
}

/* The to chuc (Featured Universities) */
.ag-unicard {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    background: transparent;
    transition: border-color .15s ease;
}

.ag-page a.ag-unicard {
    color: var(--ag-text);
}

.ag-unicard:hover {
    border-color: var(--ag-green);
}

.ag-unicard-body {
    min-width: 0;
    flex: 1;
}

.ag-unicard-name {
    display: block;
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.15;
}

.ag-unicard-meta {
    display: block;
    font-size: 13px;
    color: var(--ag-muted);
}

/* The to chuc trong trang danh sach */
.ag-co-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.ag-cocard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    background: transparent;
    color: var(--ag-text);
    transition: border-color .15s ease;
}

.ag-page a.ag-cocard {
    color: var(--ag-text);
}

.ag-cocard:hover {
    border-color: var(--ag-green);
}

.ag-cocard-top {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.ag-cocard-name {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 21px;
    line-height: 1.15;
    min-width: 0;
}

.ag-cocard-loc {
    font-size: 13px;
    color: var(--ag-muted-2);
    min-height: 1em;
}

.ag-cocard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--ag-line-soft);
}

.ag-cocard-jobs {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 15px;
    color: var(--ag-green);
}

/* Ngan keo cho bo loc thu gon tren thanh cong cu */
.ag-dropdown {
    position: relative;
}

.ag-dropdown-panel {
    display: none;
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    width: 300px;
    max-width: calc(100vw - 48px);
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px 16px 12px;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    background: var(--ag-bg);
    box-shadow: 0 12px 32px rgba(43, 43, 45, .18);
}

.ag-dropdown.is-open .ag-dropdown-panel {
    display: block;
}

.ag-dropdown.is-open .ag-dropdown-toggle {
    border-color: var(--ag-green);
    color: var(--ag-green);
}

/* Trong ngan keo, khung nhom loc khong can duong ke tren cung */
.ag-dropdown-panel .ag-fgroup-title {
    border-bottom: 1px solid var(--ag-line-soft);
}

.ag-dropdown-panel .ag-fgroup {
    max-height: none;
}

/* Trang thai rong dung chung cho danh sach job / to chuc / blog */
.ag-empty {
    grid-column: 1 / -1;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    background: transparent;
    padding: 28px;
}

/* The bai viet */
.ag-blogcard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--ag-text);
}

.ag-page a.ag-blogcard {
    color: var(--ag-text);
}

.ag-blogcard-img {
    display: block;
    height: 190px;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    overflow: hidden;
    background: var(--ag-surface);
}

.ag-blogcard-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.ag-blogcard:hover .ag-blogcard-img img {
    transform: scale(1.03);
}

.ag-blogcard-title {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 23px;
    line-height: 1.15;
}

.ag-blogcard:hover .ag-blogcard-title {
    color: var(--ag-green);
}

.ag-blogcard-excerpt {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ag-muted-2);
}

.ag-blogcard-byline {
    font-size: 13px;
    color: var(--ag-muted);
    margin-top: auto;
}

/* Bai dan dau trang blog */
.ag-bloglead {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 40px;
    align-items: center;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--ag-line);
    margin-bottom: 34px;
    color: var(--ag-text);
}

.ag-page a.ag-bloglead {
    color: var(--ag-text);
}

.ag-bloglead .ag-blogcard-img {
    height: 340px;
}

.ag-bloglead-title {
    display: block;
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.06;
    margin-bottom: 14px;
}

.ag-bloglead:hover .ag-bloglead-title {
    color: var(--ag-green);
}

/* Dai dang ky nhan job qua email */
.ag-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
    padding: 36px 40px;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
}

.ag-page .ag-band-title,
.ag-band-title {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 28px;
    margin: 0 0 6px;
}

.ag-band p {
    margin: 0;
    font-size: 15px;
    color: var(--ag-muted-2);
}

/* --------------------------------------------------------------------------
   7. Breadcrumb, phan trang, chip loc
   -------------------------------------------------------------------------- */
.ag-crumb {
    font-size: 13px;
    color: var(--ag-muted);
    padding-top: 20px;
}

.ag-page .ag-crumb a {
    color: var(--ag-muted);
}

.ag-page .ag-crumb a:hover {
    color: var(--ag-green);
}

.ag-crumb-sep {
    padding: 0 4px;
}

.ag-crumb-now {
    color: var(--ag-text);
}

.ag-pagefoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 34px 0 8px;
}

/* Phan trang do Laravel render (ul.pagination) mac lai theo ngon ngu thiet ke */
.ag-pag .pagination {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ag-pag .pagination .page-item > .page-link,
.ag-pag .pagination li > a,
.ag-pag .pagination li > span {
    display: block;
    font-size: 13px;
    font-family: var(--ag-body);
    padding: 7px 13px;
    border: 1px solid rgba(29, 31, 32, .2);
    border-radius: var(--ag-r-ctrl);
    background: transparent;
    color: var(--ag-text);
    box-shadow: none;
}

/* Trang dang xem duoc render la <li class="active"><a><span>1</span></a>, nen span ben trong
   khong duoc mang lai vien cua chinh no */
.ag-pag .pagination li > a > span,
.ag-pag .pagination li > a > span:hover {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
}

.ag-pag .pagination li > a:hover {
    border-color: var(--ag-green);
    color: var(--ag-green);
}

.ag-pag .pagination .active > .page-link,
.ag-pag .pagination li.active > a {
    background: var(--ag-green);
    border-color: var(--ag-green);
    color: #fff;
}

.ag-pag .pagination .disabled > .page-link,
.ag-pag .pagination li.disabled > span {
    opacity: .45;
}

/* Thanh cong cu tren luoi ket qua */
.ag-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 0;
    border-top: 1px solid var(--ag-line);
    border-bottom: 1px solid var(--ag-line);
    margin-bottom: 30px;
}

.ag-field {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(29, 31, 32, .2);
    border-radius: var(--ag-r-ctrl);
    padding: 8px 12px;
    background: var(--ag-surface);
}

.ag-field > span {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ag-muted);
    white-space: nowrap;
}

.ag-field select,
.ag-field input {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    outline: none;
    color: var(--ag-text);
}

/* Bo chon "Sort" kieu segmented */
.ag-seg {
    display: flex;
    border: 1px solid rgba(29, 31, 32, .2);
    border-radius: var(--ag-r-ctrl);
    overflow: hidden;
}

.ag-page .ag-seg > * {
    font-size: 12px;
    padding: 5px 12px;
    cursor: pointer;
    color: var(--ag-text);
    border-radius: 0 !important;
    border-left: 1px solid rgba(29, 31, 32, .2);
    background: transparent;
    white-space: nowrap;
}

.ag-page .ag-seg > *:first-child {
    border-left: 0;
}

.ag-page .ag-seg > *:hover {
    background: rgba(24, 150, 82, .08);
    color: var(--ag-green);
}

/* nsapp.css co ".f-sort-choose .selected { color: var(--bs-primary) !important }"
   khien chu trong o dang chon bi xanh nhat chim vao nen xanh — ep lai mau trang. */
.ag-page .ag-seg > .selected,
.ag-page .ag-seg > .active {
    background: var(--ag-green);
    color: #fff !important;
    font-weight: 500;
}

/* Chip danh muc (blog) */
.ag-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--ag-line);
    padding-bottom: 18px;
    margin-bottom: 34px;
}

.ag-page a.ag-chip {
    font-size: 13px;
    padding: 6px 14px;
    border: 1px solid rgba(29, 31, 32, .2);
    border-radius: var(--ag-r-ctrl);
    color: var(--ag-text);
    white-space: nowrap;
}

.ag-page a.ag-chip:hover {
    border-color: var(--ag-green);
    color: var(--ag-green);
}

.ag-page a.ag-chip.active {
    background: var(--ag-green);
    border-color: var(--ag-green);
    color: #fff;
}

/* --------------------------------------------------------------------------
   8. Noi dung bai viet / mo ta job (HTML do nguoi dung nhap)
   -------------------------------------------------------------------------- */
.ag-prose {
    font-size: 16px;
    line-height: 1.75;
    font-weight: 500;
    color: var(--ag-text);
    max-width: 74ch;
}

.ag-prose > *:first-child {
    margin-top: 0;
}

.ag-prose h1,
.ag-prose h2,
.ag-prose h3,
.ag-prose h4 {
    font-family: var(--ag-head);
    font-weight: 600;
    color: var(--ag-text);
    margin: 32px 0 12px;
    line-height: 1.15;
}

.ag-prose h1 { font-size: 32px; }
.ag-prose h2 { font-size: 28px; }
.ag-prose h3 { font-size: 23px; }
.ag-prose h4 { font-size: 20px; }

.ag-prose p {
    margin: 0 0 18px;
}

.ag-prose ul,
.ag-prose ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.ag-prose li {
    margin-bottom: 6px;
    list-style-type: inherit;
}

/* style.css tat dau muc cho moi <li> tren toan site, nen phai bat lai o day */
.ag-prose ul {
    list-style: disc outside;
}

.ag-prose ol {
    list-style: decimal outside;
}

.ag-prose ul ul {
    list-style: circle outside;
}

.ag-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ag-r-frame);
}

.ag-prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.ag-prose th,
.ag-prose td {
    border: 1px solid var(--ag-line);
    padding: 8px 10px;
    text-align: left;
}

.ag-prose blockquote {
    margin: 24px 0;
    padding: 16px 20px;
    border-left: 3px solid var(--ag-green);
    background: var(--ag-tint-2);
    border-radius: 0 var(--ag-r-frame) var(--ag-r-frame) 0;
}

.ag-prose-wide {
    max-width: none;
}

/* Bang cham cho vung noi dung co the tran ngang */
.ag-scroll-x {
    overflow-x: auto;
}

/* Rieng trang tim viec: header cua site cuon di mat theo trang thay vi ghim lai.
   Nho vay khi cuon xuong, dau cot chi tiet job la thu duy nhat bam o dinh trang
   (top: 0) — khong phai xep chong duoi mot thanh header van dang chiem cho.
   --ag-header-h dat ve 0 de moi moc ghim trong trang tinh theo dinh man hinh. */
body.ag-body-jobsearch {
    --ag-header-h: 0px;
}

body.ag-body-jobsearch .jobguru-header-area.stick-top,
body.ag-body-jobsearch .jobguru-header-area.forsticky.sticky {
    position: relative;
    top: auto;
    box-shadow: none;
}

/* Bo cuc trang tim viec chay sat hai mep man hinh va ket thuc bang duong ke cua
   split view, nen khoang 80px cua .ag-foot bien thanh mot dai trong tho lo giua
   danh sach va footer. Cho footer noi thang vao. */
body.ag-body-jobsearch .ag-foot {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   9. Trang tim viec — split view 3 pane
   -------------------------------------------------------------------------- */
.ag-jobsearch {
    background: var(--ag-paper);
    color: var(--ag-text);
    font-family: var(--ag-body);
}

.ag-searchbar-icon {
    display: grid;
    place-items: center;
    flex: none;
    color: var(--ag-green);
}

.ag-searchbar-input {
    flex: 1;
    min-width: 0;
}

.ag-group .f-j-clear-search {
    display: flex;
    align-items: center;
}

.ag-searchbar-clear {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--ag-r-ctrl);
    background: transparent;
    color: var(--ag-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.ag-searchbar-clear:hover {
    background: rgba(29, 31, 32, .1);
    color: var(--ag-text);
}

.ag-searchbar-clear svg {
    display: block;
}

.ag-searchbar-clear.is-on {
    display: flex;
}

/* Vo split view. Ba cot dung chung THANH CUON CHINH CUA TRANG: khong cot nao co
   thanh cuon rieng, de nguoi dung chi phai keo mot cho. Cot loc va dau cot chi
   tiet duoc ghim (sticky) nen van theo mat nguoi doc khi cuon. */
.ag-split {
    display: grid;
    grid-template-columns: 250px minmax(340px, 1fr) minmax(0, 1.35fr);
    align-items: stretch;
    position: relative;
    border-top: 1px solid var(--ag-line);
}

/* --- cot loc --- */
/* Cot loc cuon cung trang. Khong ghim (sticky) vi noi dung bo loc thuong cao hon
   mot man hinh: ghim lai se phai cho no mot thanh cuon rieng, dung thu ma ca
   trang nay dang tim cach bo di. */
.ag-filter {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    border-right: 1px solid var(--ag-line);
    background: var(--ag-paper);
}

.ag-filter-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--ag-line);
    flex: none;
}

.ag-filter-head-title {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ag-filter-body {
    padding: 0 20px 24px;
    flex: 1;
}

.ag-filter-close,
.ag-filter-apply {
    display: none;
}

/* Nhom loc: dung lai markup <h6 class=ag-fgroup-title><a class=cat-group-title> + <ul class=ag-fgroup> */
.ag-fgroup-title {
    margin: 0;
    border-bottom: 1px solid var(--ag-line-soft);
}

.ag-page .ag-fgroup-title > a {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 13px 0;
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ag-text);
}

.ag-page .ag-fgroup-title > a:hover {
    color: var(--ag-green);
}

.ag-page .ag-fgroup-title > a > i {
    margin-left: auto;
    color: var(--ag-muted);
    font-size: 12px;
}

.ag-fgroup {
    list-style: none;
    margin: 0;
    padding: 4px 0 6px;
}

/* Mac dinh cat bot danh sach dai dung so muc cua ban ve, nen khong can thanh cuon.
   Bam nut "Show all" moi mo rong — luc do moi gioi han chieu cao va cho cuon.

   Dieu kien ":not(.is-expanded)" nam ngay trong rule an, thay vi viet mot rule
   hien rieng cho trang thai mo rong: rule an co do uu tien (0,4,1), mot rule
   ".ag-fgroup.is-expanded > li" chi (0,2,1) nen se thua va nut "Show all" mat
   tac dung. Cho dieu kien vao chinh rule an thi khong con cuoc tranh nao. */
.ag-fgroup:not(.is-expanded)[data-limit="5"] > li:nth-child(n+6),
.ag-fgroup:not(.is-expanded)[data-limit="7"] > li:nth-child(n+8) {
    display: none;
}

/* Ngoai le: muc dang duoc chon luon hien, ke ca khi nam ngoai phan cat bot.
   Do uu tien (0,4,2) — nhinh hon rule an (0,4,1) — nen thang. */
.ag-fgroup:not(.is-expanded)[data-limit] > li:has(> a.selected) {
    display: list-item;
}

.ag-fgroup.is-expanded {
    max-height: 320px;
    overflow-y: auto;
}

.ag-fgroup-more {
    display: inline-block;
    margin: 2px 0 12px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    color: var(--ag-green);
    cursor: pointer;
}

.ag-fgroup-more:hover {
    color: var(--ag-green-h);
    text-decoration: underline;
}

.ag-fgroup li {
    margin: 0;
}

.ag-page .ag-fgroup li > a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: var(--ag-r-ctrl);
    color: var(--ag-text);
    cursor: pointer;
}

.ag-page .ag-fgroup li > a:hover {
    background: rgba(24, 150, 82, .07);
}

.ag-page .ag-fgroup li > a > i {
    flex: none;
    margin-top: 2px;
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(29, 31, 32, .3);
    border-radius: 3px;
    font-size: 9px;
    color: transparent;
    background: #fff;
}

.ag-page .ag-fgroup li > a.selected {
    background: var(--ag-tint);
    color: var(--ag-deep);
    font-weight: 500;
}

.ag-page .ag-fgroup li > a.selected > i {
    background: var(--ag-green);
    border-color: var(--ag-green);
    color: #fff;
}

.ag-fgroup .count {
    margin-left: auto;
    font-size: 12px;
    color: var(--ag-muted);
}

/* Cac dieu kien loc dang ap dung, hien ngay duoi dau cot loc.
   padding-top de chip dau tien khong dinh vao duong ke cua dau cot. */
.ag-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 16px 0 6px;
}

.ag-filter-chips:empty {
    padding: 0;
}

.ag-fchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
    background: var(--ag-tint);
    color: var(--ag-deep);
    border: 1px solid rgba(24, 150, 82, .28);
    border-radius: var(--ag-r-ctrl);
    padding: 4px 9px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ag-fchip-x {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 11px;
    height: 11px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .75;
    cursor: pointer;
}

.ag-fchip-x:hover {
    opacity: 1;
}

.ag-fchip-x svg {
    display: block;
}

/* --- cot danh sach --- */
.ag-list {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--ag-line);
}

.ag-list-search {
    padding: 14px 20px;
    border-bottom: 1px solid var(--ag-line);
    flex: none;
}

.ag-searchform {
    width: 100%;
}

.ag-searchform-field {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0 14px;
}

/* Khoang cach trai da do .ag-searchform-field lo, o nhap khong tu them nua */
.ag-group .ag-searchbar-input {
    padding: 10px 0;
}

.ag-list-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ag-line);
    flex: none;
}

.ag-list-count {
    font-size: 14px;
}

.ag-list-count b {
    font-family: var(--ag-head);
    font-size: 18px;
    font-weight: 600;
}

.ag-list-body {
    flex: 1;
}

.ag-filter-toggle {
    display: none;
}

/* Mot dong ket qua */
.ag-hit {
    display: block;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ag-line-soft);
    border-left: 3px solid transparent;
    cursor: pointer;
    color: var(--ag-text);
    transition: background .12s ease;
}

.ag-page a.ag-hit {
    color: var(--ag-text);
}

.ag-hit:hover {
    background: rgba(24, 150, 82, .05);
}

.ag-hit.is-active {
    background: var(--ag-tint-2);
    border-left-color: var(--ag-green);
}

.ag-hit-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    align-items: center;
}

.ag-hit-title {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.15;
    margin-bottom: 6px;
}

.ag-hit-org {
    font-size: 13px;
    color: var(--ag-muted-2);
}

.ag-hit-facts {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 12px;
    color: rgba(29, 31, 32, .5);
}

/* Khung xuong khi dang tai */
.ag-skel {
    background: linear-gradient(90deg, rgba(29, 31, 32, .07), rgba(29, 31, 32, .12), rgba(29, 31, 32, .07));
    background-size: 200% 100%;
    animation: ag-shimmer 1.2s linear infinite;
    border-radius: var(--ag-r-tag);
}

@keyframes ag-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* --- cot chi tiet --- */
.ag-detail {
    align-self: stretch;
    background: var(--ag-paper);
    min-width: 0;
}

.ag-detail-head {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(29, 31, 32, .14);
    position: sticky;
    top: var(--ag-header-h);
    background: var(--ag-paper);
    z-index: 5;
}

.ag-page .ag-detail-title,
.ag-detail-title {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 31px;
    line-height: 1.1;
    margin: 0 0 6px;
}

.ag-detail-org {
    font-size: 15px;
    color: var(--ag-muted-2);
}

.ag-detail-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    align-items: center;
    flex-wrap: wrap;
}

/* Trang thai thu gon cua dau cot chi tiet.
   Khi nguoi doc cuon xuong, JS gan .is-compact: khoi nay xep lai thanh MOT hang
   chi con logo + ten job + Apply now / Save / Open full page. Nhan vi tri va dong
   "to chuc - quoc gia" duoc an di vi chung da doc o tren roi, giu lai chi lam
   thanh dinh day len va che mat noi dung job. */
.ag-detail-head {
    transition: padding .18s ease, box-shadow .18s ease;
}

.ag-detail-head.is-compact {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 9px 30px;
    box-shadow: 0 6px 16px rgba(29, 31, 32, .07);
}

.ag-detail-head.is-compact .ag-titlebar {
    flex: 1;
    min-width: 0;
    gap: 12px;
    align-items: center;
    margin-bottom: 0;
    flex-wrap: nowrap;
}

.ag-detail-head.is-compact .ag-titlebar-body {
    flex: 1 1 auto;
    min-width: 0;
}

.ag-detail-head.is-compact .ag-eyebrow,
.ag-detail-head.is-compact .ag-detail-org {
    display: none;
}

.ag-detail-head.is-compact .ag-mono--lg {
    width: 34px;
    height: 34px;
    font-size: 12px;
}

.ag-page .ag-detail-head.is-compact .ag-detail-title {
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ag-detail-head.is-compact .ag-detail-actions {
    flex: none;
    gap: 8px;
    margin-top: 0;
}

.ag-detail-head.is-compact .ag-btn {
    padding: 7px 14px;
    font-size: 14px;
}

/* Man hinh hep: dau cot khong ghim nua nen cung khong can ban thu gon */
@media (max-width: 980px) {
    .ag-detail-head.is-compact .ag-detail-title {
        font-size: 17px;
    }

    .ag-detail-head.is-compact .ag-sec-link {
        display: none;
    }
}

.ag-detail-body {
    padding: 26px 30px 60px;
}

.ag-detail-empty {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 80px 30px;
    color: var(--ag-muted);
}

/* Bang thong tin nhanh (deadline / dia diem / hop dong / ma tham chieu) */
.ag-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: rgba(29, 31, 32, .14);
    border: 1px solid rgba(29, 31, 32, .14);
    border-radius: var(--ag-r-frame);
    overflow: hidden;
    margin-bottom: 28px;
}

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

.ag-fact {
    background: var(--ag-bg);
    padding: 14px 16px;
    min-width: 0;
}

.ag-detail .ag-fact {
    background: var(--ag-paper);
}

.ag-fact-label {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ag-muted);
    margin-bottom: 4px;
}

.ag-fact-value {
    font-size: 15px;
    word-break: break-word;
}

.ag-fact-note {
    font-size: 12px;
    color: var(--ag-muted);
}

.ag-fact-note--warn {
    color: var(--ag-warn-fg);
}

/* Khoi noi dung rut gon + nut mo rong.
   JS do chieu cao that cua noi dung roi dat max-height con 55%; phan bi cat duoc
   phu mot lop mo dan tu trong suot ve nen giay, nen chu nhat dan chu khong bi
   cham dut dot ngot — nguoi doc thay ngay la con nua o duoi. */
.ag-clamp {
    position: relative;
}

.ag-clamp-inner {
    overflow: hidden;
    transition: max-height .28s ease;
}

.ag-clamp-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 190px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .78) 46%,
            var(--ag-paper) 78%);
    /* lop phu chi de nhin, khong chan chuot; rieng cai nut thi bam duoc */
    pointer-events: none;
}

.ag-clamp-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: .01em;
    color: var(--ag-green);
    background: var(--ag-paper);
    border: 1px solid rgba(24, 150, 82, .45);
    border-radius: var(--ag-r-ctrl);
    padding: 10px 22px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(29, 31, 32, .1);
    transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.ag-clamp-btn:hover {
    background: var(--ag-green);
    border-color: var(--ag-green);
    color: #fff;
    box-shadow: 0 6px 18px rgba(24, 150, 82, .28);
}

.ag-clamp-btn-chev {
    transition: transform .22s ease;
}

/* Da mo: bo lop mo dan, nut tro ve dong chay binh thuong duoi noi dung */
.ag-clamp.is-open .ag-clamp-inner {
    max-height: none !important;
}

.ag-clamp.is-open .ag-clamp-foot {
    position: static;
    height: auto;
    background: none;
    padding-top: 22px;
}

.ag-clamp.is-open .ag-clamp-btn-chev {
    transform: rotate(180deg);
}

/* Noi dung von da ngan thi khong cat, cung khong hien nut */
.ag-clamp.is-short .ag-clamp-foot {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .ag-clamp-inner,
    .ag-clamp-btn,
    .ag-clamp-btn-chev {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   10. Trang chi tiet (job / to chuc / bai viet)
   -------------------------------------------------------------------------- */
.ag-detailgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 44px;
    align-items: start;
    padding-top: 28px;
}

.ag-side {
    position: sticky;
    top: 88px;
    display: grid;
    gap: 20px;
}

.ag-side-title {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(29, 31, 32, .6);
    margin-bottom: 12px;
}

.ag-kv {
    display: grid;
    gap: 10px;
    font-size: 14px;
}

.ag-kv > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.ag-kv dt,
.ag-kv-k {
    color: var(--ag-muted);
    font-weight: 400;
}

.ag-kv-v {
    text-align: right;
    min-width: 0;
    word-break: break-word;
}

/* Dau trang chi tiet */
.ag-titlebar {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ag-titlebar-body {
    min-width: 0;
    flex: 1 1 320px;
}

.ag-page h1.ag-detail-h1 {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: clamp(30px, 4.6vw, 44px);
    line-height: 1.05;
    letter-spacing: -.015em;
    margin: 0 0 8px;
}

.ag-org-line {
    font-size: 15px;
    color: var(--ag-muted-2);
}

.ag-page .ag-org-line a {
    color: var(--ag-text);
}

.ag-page .ag-org-line a:hover {
    color: var(--ag-green);
}

/* Danh sach "viec tuong tu" / "vi tri dang tuyen" */
.ag-linklist {
    margin-top: 4px;
}

.ag-linkrow {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: baseline;
    padding: 14px 8px;
    border-bottom: 1px solid var(--ag-line-soft);
    color: var(--ag-text);
    transition: background .15s ease;
}

.ag-page a.ag-linkrow {
    color: var(--ag-text);
}

.ag-linkrow:hover {
    background: rgba(24, 150, 82, .05);
}

.ag-linkrow-title {
    display: block;
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
}

.ag-linkrow-sub {
    font-size: 13px;
    color: var(--ag-muted);
}

.ag-linkrow-side {
    font-size: 13px;
    color: var(--ag-muted);
    white-space: nowrap;
    text-align: right;
}

.ag-linkrow-side--hot {
    color: var(--ag-hot-fg);
}

/* Bang so lieu to chuc */
.ag-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1px;
    background: rgba(29, 31, 32, .14);
    border: 1px solid rgba(29, 31, 32, .14);
    border-radius: var(--ag-r-frame);
    overflow: hidden;
    margin-bottom: 38px;
}

.ag-stat {
    background: var(--ag-bg);
    padding: 16px 18px;
}

.ag-stat-label {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ag-muted);
    margin-bottom: 4px;
}

.ag-stat-value {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.1;
    word-break: break-word;
}

.ag-stat-value--green {
    color: var(--ag-green);
}

/* Bai viet: cot muc luc + than bai */
.ag-article {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.ag-toc {
    position: sticky;
    top: 88px;
    font-size: 13px;
}

.ag-toc-list {
    display: grid;
    gap: 9px;
    border-left: 1px solid rgba(29, 31, 32, .14);
    padding-left: 14px;
}

.ag-page .ag-toc-list a {
    color: var(--ag-muted);
    line-height: 1.35;
}

.ag-page .ag-toc-list a:hover,
.ag-page .ag-toc-list a.is-active {
    color: var(--ag-green);
}

.ag-article-head {
    max-width: 860px;
    margin-bottom: 30px;
}

.ag-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid var(--ag-line);
}

.ag-byline-name {
    font-size: 14px;
}

.ag-byline-date {
    display: block;
    font-size: 13px;
    color: var(--ag-muted);
}

.ag-hero-img {
    height: clamp(240px, 38vw, 460px);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    overflow: hidden;
    margin-bottom: 44px;
    background: var(--ag-surface);
}

.ag-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ag-cover {
    height: clamp(160px, 22vw, 260px);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    overflow: hidden;
    margin-bottom: 26px;
    background: var(--ag-tint);
    display: grid;
    place-items: center;
}

.ag-cover img {
    max-width: 60%;
    max-height: 70%;
    object-fit: contain;
}

/* Dai CTA cuoi bai */
.ag-cta {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
    padding: 26px 28px;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    background: var(--ag-tint-2);
    margin: 44px 0 0;
}

.ag-cta-body {
    flex: 1 1 300px;
}

/* --------------------------------------------------------------------------
   10b. Widget dung chung (blog/job/news o cot phai) chua duoc viet lai
        Chung van dung markup Bootstrap cu va con duoc dung o cac trang khac,
        nen o day chi hoa lai ben trong .ag-page: bo do do bong, bo goc va kieu chu
        theo he moi, khong dung toi markup.
   -------------------------------------------------------------------------- */
.ag-page .card {
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    background: transparent;
    box-shadow: none !important;
}

.ag-page .card.border-0 {
    border: 1px solid var(--ag-line) !important;
}

.ag-page .card-body {
    padding: 18px 20px;
}

.ag-page h3.text-dark-85,
.ag-page h3.text-dark,
.ag-page h4.text-dark {
    font-family: var(--ag-head);
    font-weight: 600;
    letter-spacing: -.01em;
}

.ag-page .featured-list,
.ag-page .list-group {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.ag-page .sidebr-pro-widget {
    padding: 12px 0;
    border-bottom: 1px solid var(--ag-line-soft);
}

.ag-page .sidebr-pro-widget:last-child {
    border-bottom: 0;
}

.ag-page .blog-thumb-info-content h4 {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.2;
    margin: 0 0 4px;
}

.ag-page .blog-thumb-info-image img,
.ag-page .w_c_item_pic img {
    border-radius: var(--ag-r-tag);
}

/* Cac nut pill cu con sot trong widget/modal doc lech han so voi he moi */
.ag-page .btn.rounded-pill,
.ag-page .btn-outline-primary,
.ag-page .btn-primary {
    border-radius: var(--ag-r-ctrl);
    font-family: var(--ag-head);
    font-weight: 600;
}

.ag-page .btn-primary {
    background: var(--ag-green);
    border-color: var(--ag-green);
}

.ag-page .btn-primary:hover {
    background: var(--ag-green-h);
    border-color: var(--ag-green-h);
}

.ag-page .btn-outline-primary {
    border-color: var(--ag-line);
    color: var(--ag-text);
}

.ag-page .btn-outline-primary:hover {
    background: transparent;
    border-color: var(--ag-green);
    color: var(--ag-green);
}

/* --------------------------------------------------------------------------
   11. Footer + nut cuon len dau trang
   -------------------------------------------------------------------------- */
.ag-foot {
    margin-top: 80px;
    border-top: 1px solid var(--ag-line);
    background: var(--ag-surface);
    color: var(--ag-text);
    font-family: var(--ag-body);
}

.ag-foot-grid {
    max-width: var(--ag-wrap);
    margin: 0 auto;
    padding: 48px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
}

.ag-foot-brand img {
    height: 28px;
    width: auto;
    margin-bottom: 16px;
}

.ag-foot-about {
    font-size: 13px;
    color: rgba(29, 31, 32, .65);
    line-height: 1.6;
    margin: 0 0 16px;
}

.ag-foot-about a {
    color: rgba(29, 31, 32, .65);
}

.ag-foot-about a:hover {
    color: var(--ag-green);
}

.ag-foot-col {
    display: grid;
    gap: 8px;
    align-content: start;
}

.ag-foot-col-title {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(29, 31, 32, .6);
    margin-bottom: 4px;
}

.ag-foot-col a {
    font-size: 14px;
    color: var(--ag-text);
    text-decoration: none;
}

.ag-foot-col a:hover {
    color: var(--ag-green);
}

/* Giu lai icon Facebook / LinkedIn theo yeu cau */
.ag-foot-social {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ag-foot-social li {
    display: flex;
}

.ag-foot-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    /* line-height 0: anh la inline nen mac dinh bi day len theo duong co so cua
       dong chu, lam icon "bam" len canh tren cua nut thay vi nam giua */
    line-height: 0;
    font-size: 0;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-ctrl);
    background: transparent;
    transition: border-color .15s ease, background .15s ease;
}

.ag-foot-social a:hover {
    border-color: var(--ag-green);
    background: var(--ag-tint);
}

.ag-foot-social img {
    display: block;
    width: 18px;
    height: 18px;
    max-width: 18px;
    object-fit: contain;
    margin: 0;
}

.ag-foot-bottom {
    border-top: 1px solid var(--ag-line);
}

.ag-foot-bottom-in {
    max-width: var(--ag-wrap);
    margin: 0 auto;
    padding: 18px 24px;
    font-size: 13px;
    color: var(--ag-muted);
}

.ag-foot-bottom-in p {
    margin: 0;
}

/* Nut cuon len dau trang — giu lai theo yeu cau.
   Truoc day nut chi duoc dinh kieu trong home6-style.css nen ngoai trang chu no roi
   xuong cuoi noi dung; o day dinh kieu day du de nut chay giong nhau tren moi trang.
   main.js gan class .active khi cuon qua 200px. */
body .btntoTop {
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 9999;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: var(--ag-green);
    border: 1px solid var(--ag-green);
    border-radius: var(--ag-r-ctrl);
    color: #fff;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 6px 20px rgba(29, 31, 32, .25);
    transition: opacity .3s ease, visibility .3s ease, background .15s ease, border-color .15s ease;
}

body .btntoTop.active {
    opacity: 1;
    visibility: visible;
}

body .btntoTop:hover {
    background: var(--ag-green-h);
    border-color: var(--ag-green-h);
}

body .btntoTop i,
body .btntoTop.active.btntoTop:hover:before {
    color: #fff;
}

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    .ag-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    }

    .ag-filter {
        display: none;
    }

    .ag-filter-toggle {
        display: inline-flex;
    }

    /* Ngan keo mo phu len dung cot danh sach, khong phu ca man hinh */
    .ag-split.is-filters-open .ag-filter {
        display: flex;
        position: absolute;
        align-self: start;
        top: 0;
        left: 0;
        z-index: 14;
        width: min(320px, 100%);
        max-height: 76vh;
        border-right: 1px solid var(--ag-line);
        border-bottom: 1px solid var(--ag-line);
        border-radius: 0 0 var(--ag-r-frame) 0;
        background: var(--ag-paper);
        box-shadow: 0 12px 32px rgba(43, 43, 45, .2);
    }

    .ag-split.is-filters-open .ag-filter-body {
        overflow-y: auto;
    }

    .ag-split.is-filters-open .ag-filter-close {
        display: inline-grid;
    }

    .ag-split.is-filters-open .ag-filter-apply {
        display: block;
    }
}

@media (max-width: 1040px) {
    .ag-detailgrid {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    .ag-side {
        position: static;
    }
}

@media (max-width: 1000px) {
    .ag-co-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ag-article {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .ag-toc {
        position: static;
    }

    .ag-toc-list {
        border-left: 0;
        padding-left: 0;
    }

    .ag-bloglead {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .ag-bloglead .ag-blogcard-img {
        height: 260px;
    }

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

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

@media (max-width: 980px) {
    .ag-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        padding-top: 56px;
        padding-bottom: 44px;
    }

    .ag-hsearch {
        grid-template-columns: minmax(0, 1fr);
    }

    .ag-hfield {
        border-right: 0;
        border-bottom: 1px solid var(--ag-line);
    }

    .ag-hsearch-go {
        padding: 16px 22px;
        justify-content: center;
    }

    .ag-jobrow {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 5px 14px;
    }

    .ag-jobrow > :first-child {
        grid-row: span 4;
    }

    .ag-jobrow-when {
        text-align: left;
    }

    .ag-band {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 28px 24px;
    }

    .ag-band form {
        flex-wrap: wrap;
    }

    .ag-foot-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px;
    }

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

@media (max-width: 860px) {
    .ag-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .ag-list {
        border-right: 0;
    }

    /* Bo han cot chi tiet: xep no xuong duoi danh sach thi moi lan xem mot job
       la mot lan cuon xuong roi cuon nguoc len — bam vao job se mo thang
       trang chi tiet (xu ly trong JS cua trang). */
    .ag-detail {
        display: none;
    }

    .ag-detail-head {
        position: static;
    }

    .ag-detail-head {
        position: static;
    }
}

@media (max-width: 640px) {
    .ag-grid-3,
    .ag-grid-4,
    .ag-co-grid {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .ag-h2 {
        font-size: 30px;
    }

    .ag-detail-head,
    .ag-detail-body {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 560px) {
    .ag-foot-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ag-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}