/* ==========================================================================
   LangGo Careers — Site Shell (header + footer)
   Pure CSS, no framework. Theme via :root variables.
   ========================================================================== */

/* Reddit Sans — self-host (variable font) để không phụ thuộc Google Fonts */
@font-face {
    font-family: 'Reddit Sans';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/reddit-sans/RedditSans-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Reddit Sans';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/reddit-sans/RedditSans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Reddit Sans';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/reddit-sans/RedditSans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --brand: #db1f1f;
    --brand-dark: #b3141a;
    --brand-2: #e51c30;
    --brand-soft: #fff1f1;

    --navy: #0a1529;
    --navy-2: #111f3a;
    --navy-3: #1b2c4d;

    --ink: #252525;
    --muted: #6b7280;
    --line: #e6e8ee;
    --bg: rgba(249, 249, 249, 1);
    --gold: #ffd071;

    --shell-max: 1280px;
    --nav-h: 72px;
    --radius: 10px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(10, 21, 41, .06);
    --shadow-md: 0 8px 24px rgba(10, 21, 41, .12);
    --ease: cubic-bezier(.4, .14, .3, 1);

    --font-shell: "Reddit Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* ----------------------------------------------------------------------
       THANG CHỮ DÙNG CHUNG CHO TOÀN SITE
       Mọi tiêu đề/section đều lấy từ đây, không đặt font-size rời rạc từng chỗ.
       Cột mốc: 1920 = cỡ tối đa (bản design), 1440 ≈ 75%, ~1024 chạm cỡ tối thiểu.
       Đặt ở shell.css vì file này nạp trên mọi trang; homepage.css / about.css
       chỉ tham chiếu, không khai báo lại.
       ---------------------------------------------------------------------- */
    --fs-h1: clamp(32px, 4.2vw, 80px);          /* tiêu đề hero          1440: 60 */
    --fs-h1-accent: clamp(34px, 4.5vw, 86px);   /* dòng nhấn của hero    1440: 65 */
    --fs-h2: clamp(24px, 2.4vw, 46px);          /* tiêu đề mọi section   1440: 35 */
    --fs-h3: clamp(17px, 1.4vw, 26px);          /* tiêu đề card lớn      1440: 20 */
    --fs-lead: clamp(15px, 1.25vw, 24px);       /* câu dẫn dưới tiêu đề  1440: 18 */
    --fs-body: 16px;                            /* chữ nội dung */
    --fs-small: 14px;                           /* chú thích, meta */
}

/* Base reset — cần cho trang UI mới không nạp Bootstrap (no_bootstrap) */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }

body { background-color: var(--bg); }

/* Shared container */
.shell {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: 20px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
    font-family: var(--font-shell);
    position: relative;
    z-index: 1000;
    background: var(--bg);
}

/* --- Row 1: contact + search + social --- */
.topbar {
    background: rgba(255, 255, 255, 1);
    border-bottom: 1px solid #f1eeee;
}

.topbar .shell {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 53px;
}

.topbar__contact {
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.topbar__contact a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--brand);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s var(--ease);
}

.topbar__contact a:hover { opacity: .72; }

.topbar__contact i {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    background: var(--brand);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
}

.topbar__search {
    position: relative;
    margin-inline: auto;
    flex: 0 0 316px;
    width: 316px;
    max-width: 316px;
}

.topbar__search input {
    width: 100%;
    height: 36px;
    border: 0;
    border-radius: 42px;
    background: #fff;
    color: var(--ink);
    padding: 0 16px 0 40px;
    font: inherit;
    font-size: 14px;
    outline: none;
    box-shadow: 0 1px 6px 0 rgba(219, 31, 31, .24);
    transition: box-shadow .2s var(--ease);
}

.topbar__search input::placeholder { color: #b9b1b1; }

.topbar__search input:focus {
    box-shadow: 0 1px 6px 0 rgba(219, 31, 31, .24), 0 0 0 3px rgba(219, 31, 31, .12);
}

.topbar__search button {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--brand);
    cursor: pointer;
    font-size: 14px;
}

.topbar__social {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.topbar__social a {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    transition: transform .2s var(--ease), background .2s var(--ease);
}

.topbar__social a:hover {
    background: var(--brand-dark);
    transform: translateY(-2px);
}

/* --- Row 2: achievements (red bar) --- */
.promobar {
    background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%);
    color: #fff;
    overflow: hidden;
}

.promobar__marquee {
    display: flex;
    width: max-content;
    animation: promo-scroll 28s linear infinite;
}

.promobar:hover .promobar__marquee { animation-play-state: paused; }

.promobar__track {
    display: flex;
    align-items: center;
    gap: 44px;
    padding-right: 44px;
    min-height: 40px;
    flex: 0 0 auto;
}

@keyframes promo-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .promobar__marquee { animation: none; }
}

.promo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
    white-space: nowrap;
}

.promo img {
    height: 20px;
    width: auto;
    flex: 0 0 auto;
    object-fit: contain;
}

.promo strong { font-weight: 900; }

/* --- Row 3: main nav (chỉ navbar dính khi cuộn — topbar + promobar cuộn đi) --- */
.navbar {
    position: relative;
    z-index: 1000;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 16px 0px rgba(219, 31, 31, 0.11);
}

.site-header.is-stuck .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: var(--shadow-sm);
    animation: navbar-drop .28s var(--ease);
}

@keyframes navbar-drop {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

.navbar__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--nav-h);
}

.navbar__brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.navbar__brand img {
    width: 174px;
    height: 18px;
    display: block;
}

.navbar__menu {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.menu {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu__item { position: relative; }

.menu__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 11px;
    height: var(--nav-h);
    color: var(--ink);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s var(--ease);
}

.menu__link .caret {
    font-size: 11px;
    opacity: .85;
    transition: transform .25s var(--ease);
}

.menu__item:hover > .menu__link,
.menu__link.active { color: var(--brand); }

.menu__item:hover > .menu__link .caret { transform: rotate(180deg); }

/* Submenu (desktop dropdown) */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    list-style: none;
    margin: 0;
    padding: 8px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    z-index: 10;
}

/* Bridge vô hình lấp khoảng trống giữa nav item và dropdown, chống flicker */
.menu__item--has-children::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    height: 6px;
}

.menu__item:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu a {
    display: block;
    padding: 10px 12px;
    border-radius: 7px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background .18s var(--ease), color .18s var(--ease);
}

.submenu a:hover,
.submenu a.active {
    background: var(--brand-soft);
    color: var(--brand);
}

/* Cẩm nang nghề nghiệp — mega dropdown */
.cate-child-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.submenu--mega {
    left: 50%;
    right: auto;
    width: auto;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    transform: translateX(-50%) translateY(6px);
}

.menu__item:hover > .submenu--mega {
    transform: translateX(-50%) translateY(0);
}

.mega__inner {
    display: flex;
    width: 850px;
    padding: 27px 28px;
    gap: 0;
}

.mega__inner--full { width: auto; min-width: 300px; }

.mega__left {
    width: 285px;
    flex-shrink: 0;
}

.mega__inner--full .mega__left { width: auto; }

.mega__left ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega__left ul li { margin: 0; padding: 0; }

.mega__left ul a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    line-height: 33px;
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .3s var(--ease);
}

.mega__left ul a:hover,
.mega__left ul a.active {
    color: var(--brand);
    background: transparent;
}

.mega__right {
    flex: 1;
    border-left: 1px solid #e8e8e8;
    padding-left: 35px;
    margin-left: 49px;
}

.mega__right h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 20px;
}

.submenu--mega .mega__post {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 17px;
    margin-bottom: 14px;
    padding: 0;
    border-radius: 0;
    text-decoration: none;
    align-items: flex-start;
}

.submenu--mega .mega__post:hover {
    background: transparent;
}

.mega__post img {
    width: 130px;
    height: 90px;
    max-height: none;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    background: #f0f0f0;
}

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

.mega__post-body h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    line-height: 21px;
    margin-bottom: 5px;
}

.mega__post-body p {
    font-size: 14px;
    font-weight: 400;
    color: var(--ink);
    line-height: 21px;
}

.submenu--mega .mega__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border-radius: 0;
    color: var(--brand);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 8px;
}

.submenu--mega .mega__more:hover {
    text-decoration: underline;
    background: transparent;
}

/* CTA: Tìm việc ngay */
.menu__item--cta { margin-left: 8px; }

.btn-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 178px;
    height: 45px;
    padding: 0 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%);
    color: #ffeb94 !important;
    font-family: "SVN-Gilroy", var(--font-shell);
    font-weight: 800;
    font-size: 18px;
    line-height: 21px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 -2px 10px 0 rgba(219, 31, 31, .44);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}

.btn-apply__arrow {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 235, 148, .2);
    color: #ffeb94;
    font-size: 12px;
    flex: 0 0 auto;
}

.btn-apply:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 -2px 10px 0 rgba(219, 31, 31, .44), 0 8px 18px rgba(157, 11, 15, .35);
}

/* Badge đếm số job yêu thích — nổi trên góc icon tym */
.nav-fav__heart {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.btn-apply .nav-fav__count {
    position: absolute;
    top: -9px;
    right: -11px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #fff;
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

/* Header trong drawer (logo + nút X) — chỉ hiện trên mobile */
.navbar__menu-head { display: none; }

/* Hamburger */
.navbar__toggle {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 0;
    border-radius: 10px;
    background: var(--brand);
    cursor: pointer;
    padding: 0;
    place-items: center;
}

.navbar__toggle i {
    color: #fff;
    font-size: 20px;
    line-height: 1;
}

/* Backdrop */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 21, 41, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s;
    z-index: 1099;
}

/* ==========================================================================
   RESPONSIVE — header
   ========================================================================== */
@media (max-width: 1200px) {
    .promo { font-size: 13px; }
    .promobar__track { gap: 12px; }
}

@media (max-width: 991px) {
    .promobar__marquee { animation-duration: 20s; }
    .promo { font-size: 12.5px; }
    .promobar__track { gap: 32px; padding-right: 32px; }

    .topbar .shell {
        flex-wrap: wrap;
        gap: 10px 12px;
        min-height: 0;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Hàng trên: 3 icon liên hệ (sđt / email / web) — chỉ hiện icon */
    .topbar__contact {
        order: 1;
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
    }
    .topbar__contact li { display: block; }
    .topbar__contact li a { font-size: 0; gap: 0; }
    .topbar__contact li a i { font-size: 17px; }
    /* Riêng số điện thoại: hiện cả số */
    .topbar__contact li:first-child a { font-size: 13px; }
    .topbar__contact li:first-child a i { margin-right: 4px; }

    /* Hàng dưới: 3 icon mxh bên trái + search bên phải */
    .topbar__social { order: 2; display: flex; align-items: center; gap: 5px; }
    .topbar__search { order: 3; flex: 1 1 auto; width: auto; max-width: none; }

    :root { --nav-h: 52px; }

    .navbar__toggle { display: grid; }

    .navbar__menu {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(78vw, 300px);
        background: #fff;
        display: block;
        overflow-y: auto;
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
        transform: translateX(-100%);
        transition: transform .32s var(--ease);
        box-shadow: 0 0 40px rgba(0, 0, 0, .2);
        z-index: 1100;
    }

    /* Nâng cả header (gồm backdrop + drawer) lên trên #floatCta (z-index:1001) khi mở */
    .site-header.is-open { z-index: 1102; }
    /* .navbar tạo stacking context riêng (z-index:1000) → drawer bên trong bị backdrop (1099) đè.
       Nâng navbar lên trên backdrop khi mở để drawer bấm được. */
    .site-header.is-open .navbar { z-index: 1100; }
    .site-header.is-open .navbar__menu { transform: translateX(0); }
    .site-header.is-open .nav-backdrop { opacity: 1; visibility: visible; }
    /* Đã có nút X trong header drawer → ẩn nút hamburger bên ngoài khi mở */
    .site-header.is-open .navbar__toggle { display: none; }

    .navbar__menu-head {
        display: flex; /* mobile: hiện; desktop bị ẩn bởi rule .navbar__menu-head{display:none} ngoài media */
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 4px 14px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--line);
    }

    .navbar__menu-logo img { display: block; height: 22px; width: auto; }

    .navbar__close {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 10px;
        background: var(--brand);
        color: #fff;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
    }

    .menu { flex-direction: column; align-items: stretch; gap: 2px; }
    .menu__item { position: static; }

    .menu__link {
        height: auto;
        padding: 13px 10px;
        border-radius: 8px;
        justify-content: space-between;
    }

    .menu__item.is-expanded > .menu__link .caret { transform: rotate(180deg); }

    .submenu {
        position: static;
        opacity: 0;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-left: 2px solid transparent;
        border-radius: 0;
        margin: 0 0 0 14px;
        padding: 0 0 0 8px;
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s var(--ease), opacity .25s var(--ease),
            padding .3s var(--ease), margin .3s var(--ease), border-color .3s var(--ease);
    }

    .menu__item.is-expanded > .submenu {
        max-height: 640px;
        opacity: 1;
        margin-bottom: 6px;
        padding-top: 2px;
        padding-bottom: 2px;
        border-left-color: var(--line);
    }

    .menu__link .caret { transition: transform .3s var(--ease); }

    /* Mega submenu ("Cẩm nang nghề nghiệp") → xếp dọc gọn trong drawer, không tràn/cắt chữ.
       Phải override cả :hover (sticky hover trên mobile) vì rule .menu__item:hover > .submenu--mega
       có specificity cao hơn, nếu không sẽ bị translateX(-50%) đẩy lệch trái. */
    .submenu--mega,
    .menu__item:hover > .submenu,
    .menu__item:hover > .submenu--mega { left: 0; transform: none; }
    .mega__inner,
    .mega__inner--full {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0;
    }
    .mega__left,
    .mega__inner--full .mega__left { width: auto; }
    .mega__left ul a {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.4;
        padding: 7px 0;
    }
    .mega__right { display: none; }

    .menu__item--cta { margin: 14px 0 0; }
    .btn-apply { width: 100%; height: 50px; justify-content: center; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    font-family: var(--font-shell);
    background: #15110f;
    color: #b3aca6;
    font-size: 14px;
    line-height: 1.65;
}

.site-footer a { color: inherit; text-decoration: none; }

.footer__top {
    padding-block: 56px 40px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 36px;
}

.footer__brand img { max-width: 180px; height: auto; margin-bottom: 18px; }

.footer__tagline { color: #9a928b; margin: 0 0 20px; max-width: 280px; }

.footer__social { display: flex; gap: 10px; }

.footer__social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #2b2420;
    color: #d6cfc9;
    font-size: 16px;
    transition: background .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
}

.footer__social a:hover { background: var(--brand); color: #fff; transform: translateY(-3px); }

.footer__col h3 {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    position: relative;
}

.footer__col h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: var(--brand);
}

.footer__block + .footer__block { margin-top: 24px; }

.footer__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 11px;
}

.footer__item i { color: var(--brand-2); font-size: 13px; margin-top: 5px; flex: 0 0 auto; }
.footer__item p { margin: 0; }
.footer__item a:hover { color: #fff; }

.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding: 18px 0; }

.footer__bottom .shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.footer__bottom p { margin: 0; font-size: 13px; color: #877e77; }

@media (max-width: 991px) {
    .footer__top { grid-template-columns: 1fr 1fr; gap: 28px; padding-block: 40px 28px; }
}

@media (max-width: 560px) {
    .footer__top { grid-template-columns: 1fr; gap: 22px; padding-block: 32px 24px; }
    .footer__tagline { max-width: none; }
    .footer__block + .footer__block { margin-top: 18px; }
    .footer__bottom { padding: 14px 0; }
    .footer__bottom .shell { justify-content: center; text-align: center; gap: 4px; }
}

/* ==========================================================================
   LangGo — override duy nhất so với shell.css của Langmaster.
   Logo Langmaster là wordmark 174×18 nên shell.css ép cứng width/height; logo
   LangGo có 2 dòng (LangGo + CAREER) nên phải để width tự do theo tỉ lệ ảnh,
   nếu không chữ bị bẹp. Chỉ khoá chiều cao cho khớp --nav-h.
   ========================================================================== */
.navbar__brand img { width: auto; height: 34px; }

@media (max-width: 991px) {
    .navbar__brand img { height: 26px; }
}

/* Site này vẫn nạp Bootstrap, mà `.navbar` trùng tên với class của Bootstrap:
   nó thêm padding .5rem trên/dưới (hàng menu cao 88px thay vì 72px) và ép
   display:flex. Trung hoà lại để khớp đúng --nav-h như bên Langmaster. */
.site-header .navbar {
    display: block;
    padding: 0;
}

/* Link "Job yêu thích" trên navbar — badge đếm dùng chung .nav-fav__count với
   .btn-apply nhưng đây là link thường nên cần style riêng cho badge. */
.menu__link--fav {
    /* Badge đếm nhô ra phải 12px nên cần gap rộng hơn để không đè lên chữ */
    gap: 18px;
}

.menu__link--fav .nav-fav__count {
    position: absolute;
    top: -8px;
    right: -12px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

/* --------------------------------------------------------------------------
   SCROLL REVEAL — nội dung mờ + trượt lên khi cuộn tới
   Đặt ở shell.css vì cả trang chủ, Về chúng tôi và Chính sách phúc lợi đều dùng.

   Mặc định của CSS là HIỆN. Class .reveal do JS gán cho từng phần tử ngay trước
   khi theo dõi nó, và chỉ với phần tử đang NẰM NGOÀI khung nhìn. Hệ quả:

   - JS không chạy, lỗi, bị chặn, hay trình duyệt thiếu IntersectionObserver
     -> không phần tử nào bị gán .reveal -> trang hiện đầy đủ. Bản trước làm
     ngược lại (CSS ẩn sẵn, chờ JS mở) nên chỉ cần JS trục trặc là cả khối nội
     dung biến mất — đúng lỗi "trang ra data rỗng".
   - Phần tử đã nằm trong khung nhìn lúc tải thì không bị đụng tới: không chớp
     nội dung, và phần tử LCP không bao giờ bị hoãn hiển thị.
   -------------------------------------------------------------------------- */
/* Dùng thuộc tính `translate` CHỨ KHÔNG phải `transform`.

   `transform` là một thuộc tính duy nhất: đặt `transform: translateY(24px)` lên
   phần tử vốn đã có `transform` là xoá sạch giá trị cũ. Rất nhiều phần tử ở đây
   dựa vào transform để ĐỊNH VỊ, ví dụ `.about-values__core` căn giữa vòng tròn
   bằng `transform: translate(-50%, -50%)` — ghi đè là khối rơi thẳng xuống góc
   dưới-phải. Các thẻ có hiệu ứng transform khi hover cũng bị mất theo.

   `translate` là thuộc tính riêng, được nhân vào cùng `transform` chứ không thay
   thế, nên hiệu ứng trượt cộng thêm mà không phá phép căn hay hover sẵn có.
   Trình duyệt quá cũ không hiểu `translate` thì bỏ qua — phần tử chỉ mờ dần vào,
   vẫn đúng vị trí. */
.reveal {
    opacity: 0;
    translate: 0 24px;
}

.reveal.is-revealed {
    opacity: 1;
    translate: none;
    /* Độ trễ do JS gán theo thứ tự trong cùng cha, cho các thẻ bật lần lượt. */
    transition: opacity .55s var(--ease), translate .55s var(--ease);
    transition-delay: var(--reveal-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.is-revealed {
        opacity: 1;
        translate: none;
        transition: none;
    }
}