/* ==========================================================================
   LangGo Careers — Trang Cẩm nang nghề nghiệp
   Khối bài nổi bật / lưới bài viết dùng chung posts-feed.css, font Anton dùng
   chung anton.css; file này chỉ có phần riêng: banner, hàng pill lọc danh mục,
   đầu trang danh mục con và nút "Xem thêm".
   ========================================================================== */

/* --------------------------------------------------------------------------
   BANNER — ảnh nền phủ kín, chữ và nút nằm nửa trái
   -------------------------------------------------------------------------- */
.cnnn-banner {
    position: relative;
    display: flex;
    align-items: center;
    /* Giữ đúng tỉ lệ bản design 1920x700 để chữ không trôi khỏi ảnh nền */
    aspect-ratio: 1920 / 700;
    min-height: 380px;
    overflow: hidden;
    font-family: var(--font-shell);
}

.cnnn-banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cnnn-banner__inner {
    position: relative;
    z-index: 1;
}

.cnnn-banner__title {
    margin: 0 0 18px;
    /* Đủ rộng cho dòng "NGHỀ NGHIỆP CỦA BẠN" nằm gọn một dòng ở cỡ chữ tối đa */
    max-width: 1000px;
    font-family: 'Anton', var(--font-shell);
    font-size: var(--fs-h1);
    font-weight: 400;
    /* Anton có thân chữ cao nên 1.1 làm hai dòng dính sát nhau */
    line-height: 1.32;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
}

.cnnn-banner__title span { display: block; }

.cnnn-banner__desc {
    max-width: 640px;
    margin: 0 0 26px;
    font-size: clamp(15px, 1.15vw, 20px);
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 1);
}

/* 3 nút mỗi hàng như bản design; max-width chặn để không tràn sang phần ảnh */
.cnnn-banner__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    max-width: 660px;
}

.cnnn-bbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 1);
    /* Bóng đổ ra ngoài + bóng lõm bên trong theo bản thiết kế */
    box-shadow:
        5px 9px 6.8px 0px rgba(0, 0, 0, 0.25),
        3px 3px 4.2px 0px rgba(0, 0, 0, 0.25) inset;
    color: var(--brand);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}

/* Hover chỉ nhấn thêm bóng ngoài, giữ nguyên bóng lõm kẻo nút đổi hình */
/* Nút của danh mục đang xem: đảo màu cho biết mình đang ở đâu */
.cnnn-bbtn.is-active {
    background: linear-gradient(180deg, #FDDA35 36.06%, #FE9C2B 100%);
    color: rgba(8, 8, 8, 1);
}

.cnnn-bbtn:hover {
    transform: translateY(-2px);
    box-shadow:
        5px 12px 12px 0px rgba(0, 0, 0, 0.3),
        3px 3px 4.2px 0px rgba(0, 0, 0, 0.25) inset;
    color: var(--brand);
}

/* --------------------------------------------------------------------------
   NHÃN "ĐƯỢC ĐỌC NHIỀU NHẤT"
   -------------------------------------------------------------------------- */

/* Cỡ chữ 28px không lọt khung 215x40 cố định của .cnnn-tag nên khung phải nới
   theo chữ; màu chữ rgba(8,8,8,1) đã có sẵn ở .cnnn-tag--gold. */
.cnnn-mostread__label {
    width: auto;
    min-width: 215px;
    height: auto;
    min-height: 48px;
    padding-inline: 24px;
    font-family: var(--font-shell);
    font-size: 28px;
    font-weight: 700;
    line-height: 105%;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   KHỐI THEO DANH MỤC CON — nhãn đỏ + 3 bài mỗi khối (trang cẩm nang gốc)
   -------------------------------------------------------------------------- */
.cnnn-cat {
    margin-top: 44px;
    margin-bottom: 44px;
}

.cnnn-cat:last-of-type {
    margin-bottom: 72px;
}

.cnnn-cat__head {
    margin-bottom: 20px;
    /* Nhãn là inline-flex, line-height 0 để không sinh khe trắng phía dưới */
    line-height: 0;
}

/* Hình dáng lấy từ .cnnn-tag--red trong posts-feed.css; ở đây chỉ thêm phần
   riêng của thẻ <a> mà .cnnn-tag (vốn dùng cho <span>) không có. */
.cnnn-cat__label {
    /* .cnnn-tag khoá cứng 215x40 — vừa cho "Nổi bật tuần này" nhưng tên danh mục
       dài như "Câu hỏi & kỹ năng phỏng vấn" thì tràn ra ngoài khung. Cho khung
       nới theo chữ và giữ 215px làm bề ngang tối thiểu. */
    width: auto;
    min-width: 215px;
    height: auto;
    min-height: 40px;
    padding-inline: 20px;
    white-space: nowrap;
    text-decoration: none;
    transition: filter .18s var(--ease);
}

.cnnn-cat__label:hover {
    filter: brightness(1.08);
    color: rgba(255, 255, 255, 1);
}

/* --------------------------------------------------------------------------
   HÀNG PILL LỌC DANH MỤC
   -------------------------------------------------------------------------- */
.cnnn-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 26px 0 32px;
}

.cnnn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 56px;
    padding: 10px 22px;
    border: 1px solid rgba(216, 216, 216, 1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 1);
    color: rgba(80, 80, 80, 1);
    font-family: var(--font-shell);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}

.cnnn-pill:hover { color: var(--brand); border-color: rgba(219, 31, 31, .5); }

.cnnn-pill.is-active {
    border-color: transparent;
    background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%);
    color: rgba(255, 255, 255, 1);
}

/* --------------------------------------------------------------------------
   NÚT "XEM THÊM" + trạng thái rỗng
   -------------------------------------------------------------------------- */
.cnnn-more-wrap {
    display: flex;
    justify-content: center;
    margin: 36px 0 72px;
}

/* .cnnn-more ở posts-feed.css là thẻ <a>; ở đây là <button> nên phải gỡ nền và
   viền mặc định của nút, phần còn lại thừa hưởng nguyên. */
.cnnn-more {
    border: 0;
    font-family: var(--font-shell);
    cursor: pointer;
}

.cnnn-more.is-loading { opacity: .7; cursor: wait; }

.cnnn-grid.is-loading { opacity: .5; pointer-events: none; }

.cnnn-empty {
    margin: 32px 0 64px;
    font-size: 16px;
    text-align: center;
    color: rgba(107, 114, 128, 1);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .cnnn-banner { aspect-ratio: auto; padding: 48px 0; }
    .cnnn-banner__desc { max-width: 100%; }
    .cnnn-banner__btns { max-width: 100%; }
    .cnnn-pill { min-width: 150px; min-height: 48px; font-size: 16px; }
}

@media (max-width: 600px) {
    .cnnn-bbtn { font-size: 14px; padding: 9px 16px; }
    .cnnn-pills { gap: 10px; }
    .cnnn-pill { min-width: 0; flex: 1 1 45%; font-size: 15px; }
}

/* ==========================================================================
   TRANG DANH MỤC CON — cột trái tin tuyển dụng, cột phải danh sách bài viết
   ========================================================================== */
.cnnnc-page {
    padding: 40px 20px 56px;
    font-family: var(--font-shell);
}

/* --------------------------------------------------------------------------
   ĐẦU TRANG DANH MỤC CON — thay vai trò banner đã bỏ
   -------------------------------------------------------------------------- */
.cnnnc-intro {
    padding: 4px 0 30px;
}

.cnnnc-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(120, 120, 120, 1);
}

.cnnnc-crumb a {
    color: rgba(120, 120, 120, 1);
    text-decoration: none;
    transition: color .18s var(--ease);
}

.cnnnc-crumb a:hover { color: var(--brand); }

.cnnnc-crumb i { font-size: 10px; color: rgba(190, 190, 190, 1); }

.cnnnc-crumb span[aria-current] { color: rgba(8, 8, 8, 1); font-weight: 600; }

.cnnnc-intro__title {
    position: relative;
    margin: 14px 0 0;
    padding-bottom: 16px;
    font-family: 'Anton', var(--font-shell);
    font-size: clamp(22px, 1.7vw, 32px);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(8, 8, 8, 1);
}

/* Gạch chân ngắn màu thương hiệu cho tiêu đề đỡ trơ trên nền trắng */
.cnnnc-intro__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 4px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--brand) 0%, #FE9C2B 100%);
}

/* Chuyển nhanh sang danh mục cẩm nang khác; mục đang xem tô nền đỏ */
.cnnnc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.cnnnc-tab {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border: 1px solid rgba(216, 216, 216, 1);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 1);
    color: rgba(80, 80, 80, 1);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.cnnnc-tab:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.cnnnc-tab.is-active,
.cnnnc-tab.is-active:hover {
    border-color: var(--brand);
    background: var(--brand);
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 6px 14px rgba(186, 0, 0, .25);
}

@media (max-width: 768px) {
    .cnnnc-intro { padding-bottom: 22px; }
    .cnnnc-tab { font-size: 14px; padding: 8px 14px; }
}

.cnnnc-head {
    margin-bottom: 24px;
    /* Nhãn là inline-flex, line-height 0 để không sinh khe trắng phía dưới */
    line-height: 0;
}

/* Cách khối "Bài viết nổi bật" phía trên ra cho hai cột dễ thở */
.cnnnc-wrap {
    margin-top: 44px;
    display: grid;
    grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

/* --------------------------------------------------------------------------
   Cột trái — tin tuyển dụng
   -------------------------------------------------------------------------- */
.cnnnc-side__title {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand);
}

.cnnnc-jobs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cnnnc-job {
    padding: 18px 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12.7px 0 rgba(126, 126, 126, .25);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.cnnnc-job:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px 0 rgba(126, 126, 126, .3);
}

.cnnnc-job__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.cnnnc-job__title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

.cnnnc-job__title a {
    color: rgba(0, 0, 0, 1);
    text-decoration: none;
}

.cnnnc-job__title a:hover { color: var(--brand); }

.cnnnc-job__badge {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: 8px;
    background: rgba(219, 31, 31, .1);
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.cnnnc-job__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(80, 80, 80, 1);
}

.cnnnc-job__meta i {
    width: 16px;
    margin-right: 6px;
    color: var(--brand);
    text-align: center;
}

/* Hạn nộp bám trái, mức lương + nút ứng tuyển dồn phải trên cùng một hàng */
.cnnnc-job__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 14px;
}

.cnnnc-job__deadline {
    margin-right: auto;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: rgba(80, 80, 80, 1);
}

.cnnnc-job__deadline i {
    width: 16px;
    margin-right: 6px;
    color: var(--brand);
    text-align: center;
}

.cnnnc-job__salary {
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    color: var(--brand);
}

.cnnnc-job__apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    border-radius: 8px;
    background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .18s var(--ease);
}

.cnnnc-job__apply:hover { filter: brightness(1.07); color: rgba(255, 255, 255, 1); }

/* --------------------------------------------------------------------------
   Cột phải — danh sách bài viết, chữ bên trái ảnh bên phải
   -------------------------------------------------------------------------- */
.cnnnc-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cnnnc-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 18px 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12.7px 0 rgba(126, 126, 126, .25);
    text-decoration: none;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.cnnnc-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px 0 rgba(126, 126, 126, .3);
}

.cnnnc-item__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.cnnnc-item__title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
    color: rgba(0, 0, 0, 1);
}

.cnnnc-item:hover .cnnnc-item__title { color: var(--brand); }

.cnnnc-item__date {
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: rgba(160, 160, 160, 1);
}

.cnnnc-item__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(80, 80, 80, 1);
}

.cnnnc-item__media {
    flex: 0 0 auto;
    width: 172px;
    height: 116px;
    border-radius: 8px;
    background: rgba(243, 243, 243, 1);
    overflow: hidden;
}

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

@media (max-width: 991px) {
    .cnnnc-wrap { margin-top: 30px; grid-template-columns: 1fr; gap: 24px; }
    .cnnnc-page { padding: 28px 20px 40px; }
}

@media (max-width: 575px) {
    .cnnnc-item { flex-direction: column-reverse; gap: 14px; }
    .cnnnc-item__media { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    .cnnnc-job__head { flex-direction: column; gap: 8px; }
    .cnnnc-job__foot { justify-content: space-between; }
}