/* ==========================================================================
   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);
    /* Chu phu. Ban dau la .55, do tuong phan chi 3.7:1 tren nen #f2f2f3 — duoi nguong
       WCAG AA (4.5:1) cho chu thuong, va tren nen xam --ag-surface thi con 3.4:1. Do dung
       la hieu ung "chu xam tren nen mo mo" ma nguoi dung phan anh. .68 dua len ~5.5:1.
       Hai bien nay CHI duoc dung lam `color`, khong dung lam vien hay nen, nen doi gia tri
       o day khong cham toi bo cuc o bat ky dau. */
    --ag-muted: rgba(29, 31, 32, .68);
    --ag-muted-2: rgba(29, 31, 32, .82);
    --ag-head: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
    --ag-body: 'Barlow', system-ui, sans-serif;

    /* Thang co chu.
       Ban dau he thiet ke co 77 khai bao font-size tu 14px tro xuong — tieu de thi on nhung
       phan NOI DUNG (doan van, phu de, chu thich) nho toi muc kho doc, nhat la o hai trang
       nguoi dung phai doc lau: chi tiet tin va chi tiet bai viet. Dat thanh bien de lan chinh
       sau chi sua mot cho, thay vi lan lai tung khai bao. */
    --ag-fs-micro: 12px;   /* nhan VIET HOA gian chu: eyebrow, tag, nhan o nhap */
    --ag-fs-xs: 13px;      /* chu thich, dem, chip */
    --ag-fs-sm: 14.5px;    /* meta, moc thoi gian, nut nho */
    --ag-fs-md: 15.5px;    /* chu phu doc thanh cau */
    --ag-fs-base: 16px;    /* co chu nen cua trang */
    --ag-fs-prose: 17px;   /* than bai viet / mo ta tin — be mat doc chinh */
    --ag-fs-lead: 18px;    /* cau dan duoi tieu de */
    --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 38px) + 1px duong ke = 59, lam tron 60.
       Doi chieu cao logo thi PHAI doi so nay, khong thi khoi ghim (.ag-detail-head) hoac chui
       xuong duoi header hoac de ho mot khe. Tren man hep khong can lo: o do .ag-detail-head
       la `position: static`. */
    --ag-header-h: 60px;
}

/* --------------------------------------------------------------------------
   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: var(--ag-fs-base);
    /* 1.6 thay cho 1.55: chu to hon thi khoang dong cung phai no theo, khong thi cac doan
       van dai o trang chi tiet doc bi day. */
    line-height: 1.6;
}

.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: 28px;
}

.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;
}

/* Logo goc 500x137 (ti le 3,65:1), nen chi dat CHIEU CAO va de be ngang tu suy — dat ca hai
   la ep meo logo. 38px cao => 139px rong, can voi mot thanh header cao 60px; 30px truoc day
   de lai qua nhieu khoang trong tren duoi, logo trong nhu bi bo roi giua thanh. */
body.ag-body .jobguru-header-area .site-logo img {
    width: auto;
    height: 38px;
    max-width: 100%;
}

/* `.navIcon` CO Y khong nam trong nhom nay: no la nut mo menu tren dien thoai, khong phai
   mot muc menu. Gom chung vao day tung ep no xuong 14px — nut hamburger nho bang mot dong
   chu, dung sat mep man hinh, gan nhu khong bam trung. Kich thuoc cua no o khoi G7.10. */
body.ag-body .jobguru-header-area .header-menu ul li a,
body.ag-body .jobguru-header-area .header-right-menu ul li a {
    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: var(--ag-fs-xs);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ag-muted);
}

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

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

.ag-meta {
    font-size: var(--ag-fs-sm);
    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: var(--ag-fs-md);
    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: var(--ag-fs-sm);
}

.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: var(--ag-fs-micro);
    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: var(--ag-fs-md);
    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: var(--ag-fs-md);
    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: var(--ag-fs-micro);
    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: var(--ag-fs-xs);
    color: rgba(242, 242, 243, .6);
    margin-right: 4px;
}

.ag-page a.ag-hpop-item {
    font-size: var(--ag-fs-xs);
    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-jobcard-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Tin trong picklist noi bat: nen trang, vien xanh thuong hieu, gach nhan ben trai, nhan Featured */
.ag-jobcard--pick {
    background: var(--ag-paper);
    border-color: var(--ag-green);
    box-shadow: inset 4px 0 0 var(--ag-green), 0 6px 18px rgba(13, 77, 43, .10);
}

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

.ag-tag--pick {
    background: var(--ag-amber);
    color: var(--ag-text);
    font-weight: 600;
    letter-spacing: .02em;
}

.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: var(--ag-fs-md);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ag-jobcard-org-loc {
    font-size: var(--ag-fs-xs);
    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: var(--ag-fs-md);
    color: var(--ag-muted-2);
}

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

.ag-jobrow-when {
    font-size: var(--ag-fs-xs);
    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: var(--ag-fs-sm);
    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: var(--ag-fs-sm);
    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: var(--ag-fs-md);
    line-height: 1.55;
    color: var(--ag-muted-2);
}

.ag-blogcard-byline {
    font-size: var(--ag-fs-sm);
    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: var(--ag-fs-sm);
    color: var(--ag-muted);
    padding-top: 20px;
}

/* Breadcrumb la thu DAU TIEN trong mot khoi von da co dem tren (.ag-sec / .ag-sec-tight):
   cong ca hai thi tren dau trang co gan 60px trong khong, chi de mo dau bang mot dong chu
   13px. Khoi da lo phan dem roi, breadcrumb thoi khong dem them. */
.ag-sec > .ag-crumb:first-child,
.ag-sec-tight > .ag-crumb:first-child {
    padding-top: 0;
}

.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);
}

/* Tren dien thoai, dai breadcrumb an nguyen mot hang ma khong dua lai gia tri tuong xung:
   nguoi dung o man hep can thay NOI DUNG truoc. An o day — mot cho duy nhat — thay vi bo
   breadcrumb khoi tung blade, de trang them sau nay tu dong dung quy tac ma khong ai phai nho.
   Man rong van giu breadcrumb. */
@media (max-width: 640px) {
    .ag-crumb {
        display: none;
    }
}

.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: var(--ag-fs-sm);
    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;
}

/* Thanh cong cu nam ngay sau dau muc: .ag-sec-head da ke mot duong o day no roi, nen duong
   tren cua thanh cong cu la duong thu HAI — hai net song song cach nhau 28px voi mot dai
   trong o giua, khong ngan cach cai gi ca. Bo net tren va keo thanh cong cu len gan lai.
   Khi giua hai khoi co noi dung that (vi du mot thong bao) thi bo chon nay khong khop nua,
   va duong tren tro lai dung vai tro cua no. */
.ag-sec-head + .ag-toolbar {
    border-top: 0;
    margin-top: -10px;
    padding-top: 0;
}

.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: var(--ag-fs-micro);
    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: var(--ag-fs-md);
    outline: none;
    color: var(--ag-text);
}

/* Bo chon "Sort" kieu segmented */
.ag-seg {
    display: flex;
    /* Cho xuong hang. Bo loc trang thai o man "Tin cua toi" co toi tam muc; voi co chu doc
       duoc thi mot hang khong du cho tren man hep, ma `overflow:hidden` thi khong tran —
       no CAT mat cac muc cuoi, tuc la co bo loc nhung khong bam duoc. */
    flex-wrap: wrap;
    border: 1px solid rgba(29, 31, 32, .2);
    border-radius: var(--ag-r-ctrl);
    overflow: hidden;
}

.ag-page .ag-seg > * {
    font-size: var(--ag-fs-xs);
    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: var(--ag-fs-sm);
    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: var(--ag-fs-prose);
    line-height: 1.75;
    font-weight: 500;
    color: var(--ag-text);
    max-width: 74ch;
}

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

/* Noi dung dan tu noi khac (Word, trang tuyen dung goc, trinh soan thao) hay mang theo style
   noi dong: co chu rieng, phong chu rieng, va NEN TRANG. Tren nen #f2f2f3 cua trang, nhung
   mang nen trang noi dong tao ra vet loang lo, con chu thi giu nguyen co cu nen khong duoc
   huong thang co chu moi — cong lai dung la cam giac "mo mo, khong ro net".

   Co y KHONG ep mau chu o day: co noi dung to mau co chu dich (link, tu khoa nhan manh), ep
   het se lam hong chung. Chu xam nhat dan vao thi da duoc xu ly o tang --ag-muted. */
.ag-prose [style*="font-size"] {
    font-size: inherit !important;
}

.ag-prose [style*="font-family"] {
    font-family: inherit !important;
}

.ag-prose [style*="background"] {
    background: transparent !important;
}

.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: var(--ag-fs-md);
    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: var(--ag-fs-sm);
    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: var(--ag-fs-sm);
    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: var(--ag-fs-md);
    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: var(--ag-fs-xs);
    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: var(--ag-fs-xs);
    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: var(--ag-fs-md);
}

.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);
}

/* Tin picklist chen vao danh sach tim job: diem nhan HO PHACH (cung mau nhan Featured) de khong
   lan voi tin DANG CHON (vach xanh la). Khi chinh tin picklist duoc chon thi theo kieu dang chon. */
.ag-hit--pick {
    background: #fffbef;
    border-left-color: var(--ag-amber);
    box-shadow: inset 0 0 0 1px rgba(253, 181, 0, .45);
}

.ag-hit--pick:hover {
    background: #fff6dc;
}

.ag-hit--pick.is-active {
    background: var(--ag-tint-2);
    border-left-color: var(--ag-green);
    box-shadow: inset 0 0 0 1px rgba(24, 150, 82, .3);
}

.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: var(--ag-fs-sm);
    color: var(--ag-muted-2);
}

.ag-hit-facts {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: var(--ag-fs-xs);
    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: var(--ag-fs-base);
    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: var(--ag-fs-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ag-muted);
    margin-bottom: 4px;
}

.ag-fact-value {
    font-size: var(--ag-fs-base);
    word-break: break-word;
}

.ag-fact-note {
    font-size: var(--ag-fs-xs);
    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: var(--ag-fs-sm);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(29, 31, 32, .6);
    margin-bottom: 12px;
}

.ag-kv {
    display: grid;
    gap: 10px;
    font-size: var(--ag-fs-md);
}

.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: var(--ag-fs-sm);
    color: var(--ag-muted);
}

.ag-linkrow-side {
    font-size: var(--ag-fs-sm);
    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: var(--ag-fs-micro);
    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: var(--ag-fs-sm);
}

.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: var(--ag-fs-md);
}

.ag-byline-date {
    display: block;
    font-size: var(--ag-fs-sm);
    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: 36px;
    width: auto;
    max-width: 100%;
    margin-bottom: 16px;
}

.ag-foot-about {
    font-size: var(--ag-fs-sm);
    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);
}

/* `display: block` chu KHONG phai grid. Cot chan trang la mot <details>, ma trinh duyet
   gom phan noi dung cua <details> vao MOT o duy nhat — grid chi thay dung o do, nen ca day
   <a> (von la inline) chay lien thanh mot dong: "Job Employer Blog News".
   Cho tung <a> thanh block va dan cach bang margin thi dung voi ca <div> lan <details>. */
.ag-foot-col {
    display: block;
}

.ag-foot-col > a {
    display: block;
    margin-top: 8px;
}

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

.ag-foot-col a {
    font-size: var(--ag-fs-md);
    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: var(--ag-fs-sm);
    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);
    }
}

/* ==========================================================================
   GD 7 — Man "Tin cua toi" va bieu mau dang tin
   (aca-mining/docs/1-job-flow-redesign.md §7)

   Hai y do quyet dinh hinh dang cua khoi nay:

   1. Mot tin KHONG con la mot dong bang voi mot cai nhan trang thai. No la mot
      THE co DONG THOI GIAN: da gui -> dang duyet -> len site. Nguoi dung phai
      tra loi duoc "dang o dau, con bao lau, toi can lam gi" ma khong phai hoi ai.
   2. Bieu mau giu MOT trang (khong wizard — nguoi dang tin o day dang 1-5 tin mot
      nam, chia buoc chi lam ho mat phuong huong), nhung chia BON NHOM co danh so.

   Moi thu o day deu nam trong .ag-page nen khong dung cham cac trang chua chuyen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   G7.1 Danh sach tin cua toi
   -------------------------------------------------------------------------- */
.ag-posts {
    display: grid;
    gap: 16px;
}

.ag-post {
    background: var(--ag-paper);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    padding: 20px 22px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ag-post:hover {
    border-color: rgba(24, 150, 82, .45);
    box-shadow: 0 1px 3px rgba(29, 31, 32, .06);
}

/* Vien trai lam tin hieu trang thai doc duoc tu xa, truoc ca khi doc chu */
.ag-post--live {
    border-left: 3px solid var(--ag-green);
}

.ag-post--bad {
    border-left: 3px solid #c2410c;
}

.ag-post--wait {
    border-left: 3px solid var(--ag-amber);
}

.ag-post--draft {
    border-left: 3px solid var(--ag-line);
}

.ag-post-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.ag-post-headmain {
    flex: 1 1 320px;
    min-width: 0;
}

.ag-post-title {
    font-family: var(--ag-head);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 4px;
    letter-spacing: -.01em;
}

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

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

.ag-post-org {
    font-size: var(--ag-fs-md);
    color: var(--ag-muted);
}

/* Hang su kien nho: han nop, ma tham chieu, goi dich vu */
.ag-post-facts {
    display: flex;
    gap: 8px 18px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: var(--ag-fs-sm);
    color: var(--ag-muted);
}

.ag-post-fact b {
    color: var(--ag-muted-2);
    font-weight: 500;
}

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

/* --------------------------------------------------------------------------
   G7.2 Hang trang thai (§7.4) — thay cho mot cai nhan

   Xep NGANG chu khong doc. Ban doc dau tien xep moi moc mot dong, nen mot the tin
   cao them gan 100px chi de noi mot viec — danh sach 10 tin thanh mot cot dai
   phai cuon mai. Nay moi moc la mot cot hep dung HAI DONG:
       dong 1: bieu tuong + ten trang thai
       dong 2: mot dong mo ta ngan (moc thoi gian, hoac "con bao lau", hoac viec can lam)
   Ly do tu choi KHONG nam trong cot — no dai va quan trong, nen tach xuong mot
   khoi rieng chiem het be ngang ben duoi.

   Khong ve duong noi giua cac moc: hang nay biet xuong dong tren man hep, ma duong
   noi thi luon thua mot doan o cuoi moi hang. Thu tu va mau bieu tuong da du de doc
   ra tien trinh.
   -------------------------------------------------------------------------- */
.ag-track {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 0;
    margin: 14px 0 0;
    padding: 13px 0 0;
    border-top: 1px solid var(--ag-line-soft);
}

.ag-track-step {
    flex: 1 1 150px;
    min-width: 0;
    padding: 0 14px;
    border-left: 1px solid var(--ag-line-soft);
}

.ag-track-step:first-child {
    border-left: 0;
    padding-left: 0;
}

/* Dong 1: bieu tuong + ten trang thai */
.ag-track-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--ag-fs-sm);
    color: var(--ag-muted-2);
    min-width: 0;
}

.ag-track-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ag-track-dot {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--ag-muted);
}

/* Dong 2: mot dong mo ta ngan */
.ag-track-desc {
    font-size: var(--ag-fs-xs);
    color: var(--ag-muted);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Moc da xong */
.ag-track-step--done .ag-track-dot {
    color: var(--ag-green);
}

.ag-track-step--done .ag-track-label {
    color: var(--ag-text);
}

/* Moc dang dien ra — dong duy nhat duoc in dam trong mot the */
.ag-track-step--now .ag-track-dot {
    color: var(--ag-amber-h);
}

.ag-track-step--now .ag-track-label {
    color: var(--ag-text);
    font-weight: 600;
}

/* Moc chua toi */
.ag-track-step--todo .ag-track-dot,
.ag-track-step--todo .ag-track-label {
    color: var(--ag-muted);
}

/* Moc hong: bi tu choi / het han */
.ag-track-step--bad .ag-track-dot {
    color: #c2410c;
}

.ag-track-step--bad .ag-track-label {
    color: #c2410c;
    font-weight: 600;
}

/* Ly do tu choi — hien NGAY TREN THE, khong bat nguoi dung di tim email (§7.4).
   Nam ngoai hang moc va chiem het be ngang, vi no la mot cau day chu khong phai mot nhan. */
.ag-post-reason {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: var(--ag-hot-bg);
    border-radius: var(--ag-r-ctrl);
    font-size: var(--ag-fs-sm);
    line-height: 1.5;
    color: var(--ag-hot-fg);
}

.ag-post-reason b {
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   G7.3 Chan the: so lieu + hanh dong
   -------------------------------------------------------------------------- */
.ag-post-foot {
    display: flex;
    align-items: center;
    gap: 14px 20px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ag-line-soft);
}

.ag-post-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.ag-post-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--ag-fs-sm);
    color: var(--ag-muted);
}

.ag-post-stat b {
    font-family: var(--ag-head);
    font-size: 18px;
    font-weight: 600;
    color: var(--ag-text);
    line-height: 1;
}

.ag-post-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.ag-post-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: var(--ag-fs-sm);
    margin-top: 10px;
}

/* --------------------------------------------------------------------------
   G7.4 Khung xuong khi dang tai — giu nguyen chieu cao de trang khong nhay
   -------------------------------------------------------------------------- */
.ag-post-skel {
    background: var(--ag-paper);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    padding: 20px 22px;
}

.ag-post-skel > div {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--ag-surface) 25%, #f4f4f5 37%, var(--ag-surface) 63%);
    background-size: 400% 100%;
    animation: ag-skel-run 1.4s ease infinite;
    margin-bottom: 12px;
}

@keyframes ag-skel-run {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .ag-post-skel > div {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   G7.5 Bieu mau bon nhom (§7.3)
   -------------------------------------------------------------------------- */
.ag-form {
    display: grid;
    gap: 18px;
    /* chua cho thanh dinh duoi khong che mat truong cuoi cung */
    padding-bottom: 96px;
}

.ag-fset {
    background: var(--ag-paper);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    padding: 22px 24px 26px;
}

.ag-fset-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--ag-line-soft);
}

/* So thu tu nhom: cho nguoi dung biet con bao nhieu phan nua thi xong */
.ag-fset-num {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ag-tint);
    color: var(--ag-deep);
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ag-fset-title {
    font-family: var(--ag-head);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    margin: 2px 0 2px;
    letter-spacing: -.01em;
}

.ag-fset-note {
    font-size: var(--ag-fs-sm);
    color: var(--ag-muted);
    margin: 0;
}

.ag-fgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.ag-f--full {
    grid-column: 1 / -1;
}

.ag-f-label {
    display: block;
    font-size: var(--ag-fs-sm);
    font-weight: 500;
    color: var(--ag-muted-2);
    margin-bottom: 6px;
}

.ag-f-label .ag-req {
    color: #c2410c;
}

.ag-f-hint {
    display: block;
    font-size: var(--ag-fs-xs);
    color: var(--ag-muted);
    margin-top: 6px;
}

/* Cac widget co san (select2, tagsinput, datepicker, tinymce) deu bam vao
   .form-control / .form-select, nen day mau vao chinh hai class do thay vi
   doi markup — doi markup la doi luon cho bam cua chung. */
.ag-page .form-control,
.ag-page .form-select {
    border: 1px solid rgba(29, 31, 32, .2);
    border-radius: var(--ag-r-ctrl);
    /* `background-color`, TUYET DOI khong dung shorthand `background` o day.
       Bootstrap ve mui ten cua <select> va dau tich "hop le" bang background-image, nhung
       `background-repeat: no-repeat` cua no chi nam o rule goc `.form-select` (do uu tien
       0,1,0). Rule nay co do uu tien 0,2,0 nen mot shorthand `background` se dat lai CA BON
       thuoc tinh con lai ve mac dinh — repeat tro ve `repeat`. Hau qua: o trang thai da kiem
       tra, dau tich xanh lat kin ca o chon, con o trang thai binh thuong thi mat han mui ten. */
    background-color: var(--ag-paper);
    color: var(--ag-text);
    font-family: var(--ag-body);
    font-size: var(--ag-fs-sm);
    padding: 9px 12px;
    height: auto;
    box-shadow: none;
}

/* Chua cho mui ten. `padding` o tren la shorthand nen no xoa luon `padding-right: 2.25rem`
   cua Bootstrap; khong tra lai thi chu dai chay xuong duoi mui ten. Trang thai da kiem tra
   co rule rieng cua Bootstrap voi do uu tien cao hon, tu noi rong them cho dau tich. */
.ag-page .form-select {
    padding-right: 36px;
}

.ag-page .form-control:focus,
.ag-page .form-select:focus {
    border-color: var(--ag-green);
    box-shadow: 0 0 0 3px rgba(24, 150, 82, .12);
    outline: none;
}

.ag-page .form-control::placeholder {
    color: rgba(29, 31, 32, .38);
}

.ag-page .form-control:disabled,
.ag-page .form-control[readonly] {
    /* `background-color` vi cung ly do o tren: shorthand se dat lai ca repeat/position/size. */
    background-color: var(--ag-surface);
    color: var(--ag-muted);
}

/* Dau tich xanh "hop le" chi co nghia o o BAT BUOC.
   Mot <select> tuy chon dang o muc "- Select -" van thoa :valid (khong co rang buoc nao de
   vi pham), nen `.was-validated` dong dau tich vao o ma nguoi dung chua he cham toi — no noi
   "xong roi" ve mot thu chua co gi. Voi o chon thi giu nguyen mui ten va thu nho lop anh thu
   hai (dau tich) ve 0; voi o nhap thi lop valid chi co dau tich nen bo han.
   Do uu tien bang Bootstrap (0,5,0) va file nay nap sau, nen thang. */
.ag-page .was-validated .form-select:not([required]):valid {
    background-size: 16px 12px, 0 0;
    padding-right: 36px;
}

.ag-page .was-validated .form-control:not([required]):valid {
    background-image: none;
    padding-right: 12px;
}

/* Bootstrap chi hien .invalid-feedback khi co .is-invalid tren chinh input;
   bieu mau nay dung .was-validated cua form, nen noi them nhanh :invalid. */
.ag-page .was-validated .form-control:invalid,
.ag-page .was-validated .form-select:invalid,
.ag-page .form-control.is-invalid {
    border-color: #c2410c;
}

.ag-page .was-validated .form-control:invalid:focus,
.ag-page .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(194, 65, 12, .12);
}

.ag-page .invalid-feedback {
    font-size: var(--ag-fs-xs);
    color: #c2410c;
}

/* --------------------------------------------------------------------------
   G7.6 Thanh dinh duoi: goi dich vu + trang thai tu luu + nut
   -------------------------------------------------------------------------- */
.ag-stickybar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px 18px;
    flex-wrap: wrap;
    margin-top: 4px;
    padding: 14px 24px;
    background: var(--ag-paper);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    box-shadow: 0 -2px 14px rgba(29, 31, 32, .08);
}

.ag-stickybar-plan {
    font-size: var(--ag-fs-sm);
    color: var(--ag-muted);
}

.ag-stickybar-plan b {
    font-family: var(--ag-head);
    font-size: 16px;
    font-weight: 600;
    color: var(--ag-text);
}

.ag-stickybar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Chi bao tu luu — mot dong chu, khong phai mot hop thoai */
.ag-save {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--ag-fs-sm);
    color: var(--ag-muted);
    min-height: 20px;
}

.ag-save-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.ag-save--saved {
    color: var(--ag-green);
}

.ag-save--saving {
    color: var(--ag-amber-h);
}

.ag-save--saving .ag-save-dot {
    animation: ag-save-pulse 1s ease-in-out infinite;
}

@keyframes ag-save-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

.ag-save--error {
    color: #c2410c;
}

.ag-save--off,
.ag-save--waiting {
    color: var(--ag-muted);
}

/* Dai "khoi phuc ban chua luu" — chi hien khi trinh duyet giu duoc ban moi hon */
.ag-restore {
    display: flex;
    align-items: center;
    gap: 12px 16px;
    flex-wrap: wrap;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: var(--ag-warn-bg);
    border-radius: var(--ag-r-frame);
    color: var(--ag-warn-fg);
    font-size: var(--ag-fs-md);
}

.ag-restore b {
    font-weight: 600;
}

.ag-restore-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* --------------------------------------------------------------------------
   G7.7 Man hinh hep
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .ag-fgrid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .ag-post,
    .ag-fset,
    .ag-post-skel {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ag-fset {
        padding-top: 18px;
    }

    .ag-post-actions {
        margin-left: 0;
        width: 100%;
    }

    .ag-stickybar {
        padding: 12px 16px;
    }

    .ag-stickybar-actions {
        margin-left: 0;
        width: 100%;
    }

    .ag-stickybar-actions .ag-btn {
        flex: 1 1 auto;
    }

    /* Hai moc mot hang; moc dau moi hang khong co vien trai */
    .ag-track-step {
        flex: 1 1 calc(50% - 1px);
    }

    .ag-track-step:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }
}

/* --------------------------------------------------------------------------
   G7.8 Bang gia (Man 1) va man xac nhan - thanh toan (Man 3)
   §7.1 muc 8: "Biet gia sau khi da dien xong 16 truong". Bang gia nay dung
   TRUOC bieu mau, nen no phai tu no du de quyet dinh: ten goi, gia, va nhung
   gi di kem — khong bat nguoi dung bam vao doc them.
   -------------------------------------------------------------------------- */
.ag-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 8px;
}

.ag-plan {
    display: flex;
    flex-direction: column;
    background: var(--ag-paper);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    padding: 24px 22px 22px;
}

/* Goi duoc khuyen nghi: vien xanh + the noi tren canh tren */
.ag-plan--rec {
    position: relative;
    border-color: var(--ag-green);
    box-shadow: 0 0 0 3px rgba(24, 150, 82, .08);
}

.ag-plan-badge {
    position: absolute;
    top: -11px;
    left: 22px;
    background: var(--ag-green);
    color: #fff;
    font-family: var(--ag-head);
    font-size: var(--ag-fs-micro);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--ag-r-tag);
}

.ag-plan-name {
    font-family: var(--ag-head);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
}

.ag-plan-price {
    font-family: var(--ag-head);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 10px 0 2px;
}

.ag-plan-price small {
    font-size: var(--ag-fs-md);
    font-weight: 400;
    color: var(--ag-muted);
    letter-spacing: 0;
}

.ag-plan-unit {
    font-size: var(--ag-fs-sm);
    color: var(--ag-muted);
    margin: 0 0 16px;
}

.ag-plan-body {
    font-size: var(--ag-fs-md);
    line-height: 1.65;
    color: var(--ag-muted-2);
    border-top: 1px solid var(--ag-line-soft);
    padding-top: 16px;
}

.ag-plan-body ul {
    margin: 0;
    padding-left: 18px;
}

.ag-plan-foot {
    margin-top: auto;
    padding-top: 20px;
}

/* Man xac nhan: tom tat tin + goi, roi hai lua chon tra ngay / tra sau */
.ag-paybox {
    background: var(--ag-paper);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    padding: 24px;
}

.ag-paybox + .ag-paybox {
    margin-top: 18px;
}

.ag-paytotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid var(--ag-line);
    margin-top: 16px;
    padding-top: 16px;
}

.ag-paytotal b {
    font-family: var(--ag-head);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.ag-paynote {
    font-size: var(--ag-fs-sm);
    color: var(--ag-muted);
    margin: 10px 0 0;
}

/* Hai lua chon dat canh nhau, khong xep chong: tra ngay va tra sau la hai duong
   di ngang hang, khong phai mot nut chinh va mot link nho o goc. */
.ag-paychoice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

/* --------------------------------------------------------------------------
   G7.9 Lop phu "Xem truoc"

   Ban dau lop phu nay muon thang cac class cua trang chi tiet tin (.ag-detail-head,
   .ag-facts). Hai thu do vo ngay khi doi chu:

     - `.ag-detail-head` la `position: sticky; top: var(--ag-header-h)`. Moc dinh do
       tinh theo thanh header cua SITE. Dat trong mot hop thoai co vung cuon rieng,
       no dinh vao vung cuon cua hop thoai — tieu de treo lo lung cach mep tren dung
       52px, khong theo noi dung ma cung khong o dau ca.
     - `.ag-facts` la luoi CO DINH 4 cot voi thu ke bang `gap` mau xam. Xem truoc
       thuong chi co hai ba o, nen hai o con lai thanh mang xam rong.

   Nen lop phu co bo class rieng: khong vi tri dinh, luoi tu gian theo so o thuc te.
   `.ag-prose` thi dung lai duoc — no thuan kieu chu, khong mang vi tri nao.
   -------------------------------------------------------------------------- */
#previewModal .modal-content {
    border: 0;
    border-radius: var(--ag-r-frame);
    background: var(--ag-paper);
}

#previewModal .modal-header {
    align-items: center;
    padding: 15px 22px;
    border-bottom: 1px solid var(--ag-line);
}

#previewModal .modal-title {
    font-family: var(--ag-head);
    font-size: var(--ag-fs-sm);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ag-muted);
    margin: 0;
}

#previewModal .modal-body {
    padding: 26px 26px 32px;
    background: var(--ag-paper);
}

.ag-preview {
    font-family: var(--ag-body);
    font-size: var(--ag-fs-base);
    line-height: 1.6;
    color: var(--ag-text);
}

.ag-preview a {
    color: var(--ag-green);
}

.ag-preview-head {
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--ag-line);
}

.ag-preview-title {
    font-family: var(--ag-head);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.01em;
    margin: 0 0 6px;
    color: var(--ag-text);
}

.ag-preview-org {
    font-size: var(--ag-fs-base);
    color: var(--ag-muted-2);
}

/* Luoi thong tin: tu gian theo so o co that, khong de lai o trong */
.ag-preview-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--ag-line);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    overflow: hidden;
    margin: 0 0 24px;
}

.ag-preview-fact {
    background: var(--ag-paper);
    padding: 12px 15px;
    min-width: 0;
}

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

.ag-preview-fact-value {
    font-size: var(--ag-fs-md);
    color: var(--ag-text);
    overflow-wrap: anywhere;
}

/* Chua go gi thi noi ro la chua go gi, dung de mot mang trang kho hieu */
.ag-preview-empty {
    color: var(--ag-muted);
    font-style: italic;
}

@media (max-width: 640px) {
    #previewModal .modal-body {
        padding: 20px 16px 26px;
    }

    .ag-preview-title {
        font-size: 24px;
    }
}

/* ==========================================================================
   G7.10 Menu dien thoai

   Ba van de cua ban cu, deu la van de cham tay chu khong phai tham my:

   1. Nut mo menu chi to bang chinh ky tu "☰" va dat sat mep container. Vung bam
      thuc te khoang 20x20px o goc man hinh — duoi nguong 44x44 ma ca Apple lan
      Google deu khuyen, va o goc thi ngon tay cai con kho voi toi hon.
   2. Nut dong "×" dat `right: 0`, dinh hang vao canh phai cua tam.
   3. Cac muc menu la link tran, cao 44px ke ca padding, va `a:hover` to NGUYEN
      mot mang xanh dac — tren dien thoai khong co hover nen trang thai do chi
      xuat hien khi cham, nhay len mot cai roi tat.

   Khoi nay nam trong ag-redesign.css vi ca ba layout cua site (master, master_home,
   master_news) deu nap file nay sau cung — mot bo quy tac, moi trang giong nhau.
   ========================================================================== */
@media (max-width: 991px) {

    /* --- Nut mo menu: mot o cham 44x44, cach mep --- */
    body.ag-body .jobguru-header-area .menuRight span.navIcon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -8px;   /* quang le quang cua o cham, khong phai cua ky tu */
        padding: 0;
        font-size: 26px;
        line-height: 1;
        color: var(--ag-text);
        border-radius: var(--ag-r-ctrl);
        -webkit-tap-highlight-color: transparent;
    }

    body.ag-body .jobguru-header-area .menuRight span.navIcon:active {
        background: var(--ag-tint);
        color: var(--ag-green);
    }

    /* --- Tam menu --- */
    body.ag-body .sidenav {
        max-width: 340px;
        padding-top: 0;
        background: var(--ag-paper);
        box-shadow: -8px 0 28px rgba(29, 31, 32, .18);
        display: flex;
        flex-direction: column;
    }

    /* Nut dong: cung mot o cham 44x44, thut vao khoi goc */
    body.ag-body .sidenav .closebtn {
        position: absolute;
        top: 10px;
        right: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0 !important;
        font-size: 30px;
        line-height: 1;
        color: var(--ag-muted) !important;
        border-radius: var(--ag-r-ctrl);
    }

    body.ag-body .sidenav .closebtn:active {
        background: var(--ag-surface);
        color: var(--ag-text) !important;
    }

    /* Chua cho nut dong, roi moi toi danh sach */
    body.ag-body .sidenav #navigation {
        margin-top: 64px;
        overflow-y: auto;
    }

    body.ag-body .sidenav #jobguru_navigation .row,
    body.ag-body .sidenav #jobguru_navigation [class*="col-lg-"] {
        display: block;
        width: 100%;
        max-width: 100%;
        flex: none;
        padding: 0;
        margin: 0;
    }

    /* --- Muc menu: hang cao 52px, co duong ke mo, khong to mang dac --- */
    body.ag-body .sidenav ul li {
        display: block;
        border-bottom: 1px solid var(--ag-line-soft);
    }

    body.ag-body .sidenav ul li a,
    body.ag-body .sidenav a {
        display: flex;
        align-items: center;
        min-height: 52px;
        padding: 12px 22px !important;
        font-family: var(--ag-body);
        font-size: var(--ag-fs-md);
        font-weight: 500;
        line-height: 1.35;
        text-transform: none;
        color: var(--ag-text) !important;
        background: none;
    }

    body.ag-body .sidenav ul li a:active {
        background: var(--ag-tint);
        color: var(--ag-green) !important;
    }

    /* Trang dang xem: vach xanh ben trai thay cho mot mang xanh phu kin hang */
    body.ag-body .sidenav ul li.active > a {
        color: var(--ag-green) !important;
        box-shadow: inset 3px 0 0 var(--ag-green);
        background: var(--ag-tint-2);
    }

    /* --- Nut hanh dong (Post Job / Sign in / Sign up): la NUT, khong phai mot hang --- */
    body.ag-body .sidenav a.post-jobs,
    body.ag-body .sidenav a.signIn-btn,
    body.ag-body .sidenav a.signUp-btn {
        justify-content: center;
        margin: 14px 22px;
        padding: 12px 18px !important;
        min-height: 46px;
        border-radius: var(--ag-r-ctrl);
        font-family: var(--ag-head);
        font-weight: 600;
        font-size: 15px;
    }

    body.ag-body .sidenav a.post-jobs,
    body.ag-body .sidenav a.signUp-btn {
        background: var(--ag-green);
        color: #fff !important;
    }

    body.ag-body .sidenav a.signIn-btn {
        border: 1px solid var(--ag-line);
        color: var(--ag-text) !important;
    }

    body.ag-body .sidenav li:has(> a.post-jobs),
    body.ag-body .sidenav li:has(> a.signIn-btn),
    body.ag-body .sidenav li:has(> a.signUp-btn) {
        border-bottom: 0;
    }

    /* Menu tai khoan: tach khoi nhom dieu huong o tren */
    body.ag-body .sidenav .header-right-menu {
        margin-top: 8px;
        border-top: 1px solid var(--ag-line);
        padding-top: 8px;
    }

    body.ag-body .sidenav .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: auto;
        margin: 0 12px 10px;
        border: 1px solid var(--ag-line);
        border-radius: var(--ag-r-frame);
        box-shadow: none;
    }

    body.ag-body .sidenav .dropdown-menu .dropdown-item {
        min-height: 44px;
        padding: 10px 16px !important;
        font-size: var(--ag-fs-sm);
    }
}

/* ==========================================================================
   G7.11 Chan trang co/mo tren dien thoai

   Ba cot Job Seeker / Employer / Company khi xep chong tren man hep lam chan trang
   dai them gan mot man hinh — mot danh sach lien ket ma nguoi doc hiem khi can toi,
   nhung ai cuon xuong cuoi cung phai luot qua.

   Dung <details>/<summary>: co/mo la viec cua trinh duyet, khong can JS de HIEN noi
   dung. Script o footer.blade.php chi lam mot viec la dong chung lai khi man hep.
   ========================================================================== */

/* Man rong: <summary> chi la mot cai tieu de. Bo tam giac mac dinh va bo con tro
   bam, de khong ai tuong no mo ra duoc (o do no luon mo). */
.ag-foot-col > summary.ag-foot-col-title {
    list-style: none;
    cursor: default;
}

.ag-foot-col > summary.ag-foot-col-title::-webkit-details-marker {
    display: none;
}

@media (max-width: 860px) {
    /* `display: block` thay cho `grid`: mot vai trinh duyet khong an duoc phan noi
       dung cua <details> dang dong khi no duoc dat display khac block. */
    .ag-foot-col {
        display: block;
        border-bottom: 1px solid var(--ag-line);
    }

    .ag-foot-col > summary.ag-foot-col-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 52px;       /* o cham du rong, khong phai mot dong chu 13px */
        margin: 0;
        padding: 4px 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* Mui ten chi huong: quay xuong khi khoi dang mo */
    .ag-foot-col > summary.ag-foot-col-title::after {
        content: "";
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg);
        transform-origin: center;
        transition: transform .18s ease;
        margin-right: 4px;
    }

    .ag-foot-col[open] > summary.ag-foot-col-title::after {
        transform: rotate(45deg);
    }

    .ag-foot-col > a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 2px 0;
        /* 44px chieu cao da du dan cach; giu them margin cua ban desktop thi hang thua ra 8px */
        margin-top: 0;
    }

    /* Khoi dang mo: chua mot chut o day cho khoi khong dinh vao duong ke */
    .ag-foot-col[open] {
        padding-bottom: 10px;
    }
}

/* Khong long @media trong @media: hop le ve chuan nhung mot so bo phan tich (ke ca cong cu
   kiem cua chinh minh) doc sai pham vi, va nguoi doc thi kho lan ra khoi nao dang ap dung. */
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
    .ag-foot-col > summary.ag-foot-col-title::after {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   13. Insights (trang /insights) va khoi chi so o trang chu
   Chi so thi truong mang tinh tham khao; khong co so van hanh he thong (SSD aca-mining 9.5).
   -------------------------------------------------------------------------- */
.ag-ins-hero {
    padding: 8px 0 26px;
    max-width: 78ch;
}

.ag-ins-hero .ag-h1 {
    margin: 8px 0 12px;
}

.ag-ins-disclaimer {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-left: 3px solid var(--ag-amber);
    background: var(--ag-warn-bg);
    color: var(--ag-warn-fg);
    font-size: var(--ag-fs-sm);
    line-height: 1.5;
    border-radius: 0 var(--ag-r-ctrl) var(--ag-r-ctrl) 0;
}

.ag-ins-disclaimer--foot {
    margin-top: 40px;
    max-width: none;
}

/* thanh loc: cac select nam mot hang, xuong dong khi hep */
.ag-ins-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    padding: 16px 18px;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    background: var(--ag-tint-2);
    margin-bottom: 22px;
}

.ag-ins-filter {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 150px;
    min-width: 140px;
    margin: 0;
}

.ag-ins-filter > span {
    font-size: var(--ag-fs-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ag-muted);
}

.ag-ins-filter select {
    font-family: var(--ag-body);
    font-size: var(--ag-fs-sm);
    color: var(--ag-text);
    background: var(--ag-paper);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-ctrl);
    padding: 8px 10px;
    min-height: 38px;
}

.ag-ins-filter select:focus-visible {
    outline: 2px solid var(--ag-green);
    outline-offset: 1px;
}

.ag-ins-filter-actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.ag-ins-scope {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: baseline;
    margin-bottom: 18px;
}

.ag-ins-scope-line {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 18px;
}

.ag-ins-kpis {
    margin-bottom: 8px;
}

.ag-ins-kpis .ag-stat-value {
    font-size: 30px;
}

.ag-ins-sec {
    margin-top: 44px;
    min-width: 0;
}

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

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

.ag-ins-grid .ag-ins-sec {
    margin-top: 44px;
}

.ag-h2--sm {
    font-size: 26px;
}

.ag-h3--sm {
    font-size: 17px;
    margin: 8px 0 6px;
    color: var(--ag-muted-2);
}

.ag-ins-note {
    margin: -14px 0 14px;
    font-size: var(--ag-fs-sm);
    color: var(--ag-muted);
    max-width: 78ch;
    line-height: 1.5;
}

.ag-ins-note em {
    color: var(--ag-warn-fg);
    font-style: normal;
}

/* "Current state" - chi so hien trang, khong doi theo Time range */
.ag-ins-cur {
    display: inline-block;
    color: var(--ag-muted-2) !important;
    font-size: 12px;
    line-height: 1.4;
    border: 1px solid var(--ag-line);
    border-radius: 999px;
    padding: 1px 8px;
    margin-left: 4px;
    white-space: nowrap;
}

.ag-ins-fb {
    color: var(--ag-warn-fg);
}

.ag-ins-facts {
    font-size: var(--ag-fs-sm);
    color: var(--ag-muted-2);
    font-variant-numeric: tabular-nums;
}

.ag-chart {
    position: relative;
    height: 320px;
    padding: 12px 8px 4px 0;
    border: 1px solid var(--ag-line-soft);
    border-radius: var(--ag-r-frame);
    background: var(--ag-paper);
}

.ag-chart--tall {
    height: 400px;
}

.ag-chart--short {
    height: 230px;
}

.ag-chart canvas {
    width: 100% !important;
    height: 100% !important;
}

.ag-chart--empty,
.ag-ins-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ag-muted);
    font-size: var(--ag-fs-sm);
    text-align: center;
    background: var(--ag-surface);
}

.ag-ins-empty {
    padding: 28px;
    margin-bottom: 8px;
}

.ag-ins-empty-inline {
    padding: 16px;
    max-width: 40ch;
}

.ag-ins-delta {
    font-family: var(--ag-body);
    font-size: 13px;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
}

.ag-ins-delta--up {
    color: var(--ag-green);
}

.ag-ins-delta--down {
    color: var(--ag-hot-fg);
}

.ag-ins-pulse-text {
    font-size: var(--ag-fs-prose);
    line-height: 1.65;
    max-width: 72ch;
    margin: 0 0 12px;
}

.ag-ins-pulse-list {
    margin: 0 0 12px;
    padding-left: 20px;
    max-width: 72ch;
    font-size: var(--ag-fs-md);
    line-height: 1.55;
}

.ag-ins-pulse-list li {
    margin: 4px 0;
}

.ag-ins-inst {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.ag-ins-inst-card {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

.ag-ins-inst-row {
    font-size: var(--ag-fs-sm);
    color: var(--ag-muted-2);
}

.ag-ins-bar {
    height: 5px;
    background: var(--ag-surface);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}

.ag-ins-bar i {
    display: block;
    height: 100%;
    background: var(--ag-green);
    border-radius: 3px;
}

.ag-ins-methods {
    margin-top: 40px;
    padding: 14px 18px;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-frame);
    max-width: 80ch;
}

.ag-ins-methods summary {
    cursor: pointer;
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 17px;
}

.ag-ins-methods p {
    margin: 10px 0 0;
    font-size: var(--ag-fs-sm);
    line-height: 1.55;
    color: var(--ag-muted-2);
}

/* khoi trang chu: 2 hang x 3 the, cao ~2/3 khoi Featured Jobs */
.ag-ins-strip {
    display: grid;
    grid-template-columns: repeat(3, 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;
}

/* ".ag-page a" (0,1,1) manh hon mot class don, nen ghi ro a.ag-ins-tile de mau chu va hover khong bi de */
.ag-ins-tile,
.ag-page a.ag-ins-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 150px;
    padding: 20px 22px;
    background: var(--ag-bg);
    color: var(--ag-text);
    text-decoration: none;
    transition: background .15s ease;
}

.ag-ins-tile:hover,
.ag-ins-tile:focus-visible,
.ag-page a.ag-ins-tile:hover,
.ag-page a.ag-ins-tile:focus-visible {
    background: var(--ag-tint);
    color: var(--ag-text);
    text-decoration: none;
    outline: none;
}

.ag-page a.ag-ins-tile .ag-stat-label,
.ag-page a.ag-ins-tile .ag-ins-tile-sub {
    color: var(--ag-muted);
}

.ag-ins-tile-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.ag-ins-tile-value {
    font-family: var(--ag-head);
    font-weight: 600;
    font-size: 40px;
    line-height: 1;
    color: var(--ag-green);
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.ag-ins-tile-value--text {
    font-size: 24px;
    line-height: 1.15;
}

.ag-ins-spark {
    flex: 0 0 auto;
    width: 120px;
    height: 36px;
    opacity: .9;
}

.ag-ins-tile-sub {
    font-size: var(--ag-fs-sm);
    color: var(--ag-muted);
    margin-top: auto;
}

.ag-ins-strip-note {
    margin: 12px 0 0;
    font-size: var(--ag-fs-xs);
    color: var(--ag-muted);
}

@media (max-width: 1000px) {
    .ag-ins-tile-value {
        font-size: 34px;
    }
}

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

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

    .ag-chart--tall {
        height: 360px;
    }
}

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

    .ag-ins-tile {
        min-height: 0;
    }

    .ag-ins-filter {
        flex-basis: 100%;
    }

    .ag-chart,
    .ag-chart--tall {
        height: 300px;
    }
}

/* 13b. Thanh loc Insights bam dinh duoi header khi cuon, thu gon (is-stuck do JS gan) */
.ag-ins-filters-sentinel {
    height: 1px;
    margin-top: -1px;
}

.ag-ins-filters {
    position: sticky;
    top: var(--ag-header-h);
    z-index: 6;
    transition: padding .15s ease, box-shadow .15s ease;
}

.ag-ins-filters.is-stuck {
    padding: 8px 14px;
    gap: 8px 10px;
    background: var(--ag-paper);
    border-color: var(--ag-line);
    border-top-color: transparent;
    border-radius: 0 0 var(--ag-r-frame) var(--ag-r-frame);
    box-shadow: 0 8px 18px rgba(29, 31, 32, .10);
}

.ag-ins-filters.is-stuck .ag-ins-filter {
    flex-basis: 130px;
    min-width: 110px;
    gap: 0;
}

/* nhan van co cho trinh doc man hinh, chi an ve mat nhin */
.ag-ins-filters.is-stuck .ag-ins-filter > span,
.ag-ins-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ag-ins-filters.is-stuck .ag-ins-filter select {
    min-height: 32px;
    padding: 4px 8px;
    font-size: var(--ag-fs-xs);
}

.ag-ins-filters.is-stuck .ag-btn--sm {
    padding: 6px 12px;
    font-size: 13px;
}

.ag-ins-updating {
    font-size: var(--ag-fs-xs);
    color: var(--ag-green);
    font-weight: 600;
    white-space: nowrap;
    align-self: center;
}

.ag-ins-updating::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border: 2px solid var(--ag-green);
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -1px;
    animation: ag-ins-spin .8s linear infinite;
}

@keyframes ag-ins-spin {
    to { transform: rotate(360deg); }
}

/* trong luc tai lai theo bo loc moi: mo phan noi dung ben duoi de nguoi dung biet dang doi */
.ag-ins.is-loading .ag-ins-scope,
.ag-ins.is-loading .ag-ins-kpis,
.ag-ins.is-loading .ag-ins-sec,
.ag-ins.is-loading .ag-ins-grid {
    opacity: .45;
    pointer-events: none;
    transition: opacity .2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .ag-ins-updating::before { animation: none; }
    .ag-ins-filters { transition: none; }
}

/* Dong tom tat bo loc (JS tao): chi hien tren man hep khi thanh loc dang bam dinh, thay cho 5 o chon
   (5 o xep 2-3 hang se che nua man hinh dien thoai). Bam "Change" moi mo cac o chon ra (is-open). */
.ag-ins-filters-summary {
    display: none;
    flex: 1 1 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.ag-ins-filters-summary .ag-ins-filters-summary-txt {
    font-size: var(--ag-fs-xs);
    color: var(--ag-muted-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

@media (max-width: 860px) {
    .ag-ins-filters.is-stuck {
        padding: 8px 12px;
    }

    .ag-ins-filters.is-stuck .ag-ins-filters-summary {
        display: flex;
    }

    .ag-ins-filters.is-stuck:not(.is-open) .ag-ins-filter,
    .ag-ins-filters.is-stuck:not(.is-open) .ag-ins-filter-actions {
        display: none;
    }

    .ag-ins-filters.is-stuck.is-open .ag-ins-filter {
        flex-basis: calc(50% - 5px);
        min-width: 0;
    }
}

/* 13c. Danh so dau muc Insights: nhom (1. Hiring demand) va muc con (1.2 Demand by field) */
.ag-ins-group {
    margin: 64px 0 -22px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ag-text);
    font-size: 30px;
}

.ag-ins-num {
    color: var(--ag-green);
    font-variant-numeric: tabular-nums;
    margin-right: 10px;
}

.ag-h3--sm .ag-ins-num {
    margin-right: 6px;
}

@media (max-width: 640px) {
    .ag-ins-group {
        font-size: 26px;
        margin-top: 48px;
    }
}