:root {
    /* Primary */
    --color-primary-900: #A72A28;
    --color-primary-300: #CA7D7C;
    /* Secondary */
    --color-secondary-900: #0A72BA;
    --color-secondary-300: #74A9D6;
    /* Neutral */
    --color-neutral-900: #0C0C20;
    --color-neutral-800: #1E1E1E;
    --color-neutral-600: #686868;
    --color-neutral-300: #AEAEAE;
    --color-neutral-200: #E8E8E8;
    --color-neutral-100: #F6FAF9;
    --color-neutral-0: #FFFFFF;
    /* Liner*/
    --liner-primary: linear-gradient(90.22deg, #821715 0%, #C72421 70%);
    /* Shadows */
    --shadow-lg: 0px 4px 8px rgba(0, 0, 0, 0.15); /* Opacity 15% */
    --shadow-md: 0px 4px 8px rgba(0, 0, 0, 0.10); /* Opacity 10% */
    --shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.10); /* Opacity 10% */
    /* Fonts */
    --font-highlight: "Playfair Display", serif;
    --font-body: "Roboto", sans-serif;
    --scroll-bar: 8px;
}
/* clip-path: polygon(0 0, 100% 0%, 84% 100%, 16% 100%); */
/* Category Header */
.category-header {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-neutral-200);
    margin: 32px 0;
}

.category-header__title {
    font: 700 32px var(--font-highlight);
    color: var(--color-secondary-900);
    text-align: center;
    margin-bottom: 16px;
}

.category-header__bar {
    border-bottom: 1px solid var(--color-neutral-200);
}

.category-header__main {
    margin-bottom: 24px;
}

.category-header__shape {
    width: 128px;
    height: 7px;
    margin: 0 auto;
    background-color: var(--color-primary-900);
    clip-path: polygon(0 0, 100% 0%, 93% 100%, 7% 100%);
}

.category-header__sub-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.category-header__sub-item {
    list-style: none;
    font: 500 16px var(--font-body);
    color: var(--color-primary-900);
    text-transform: uppercase;
}

    .category-header__sub-item > *:hover {
        color: #641918;
    }

    .category-header__sub-item > .nav-active {
        color: #862220;
    }

    .category-header__sub-item:nth-last-child(n+2) {
        border-right: 1px solid var(--color-neutral-200);
        padding-right: 16px;
    }

    .category-header__sub-item:nth-child(n+2) {
        margin-left: 16px;
    }

.category-main {
    --space: 32px;
    padding-bottom: var(--space);
    margin-bottom: var(--space);
    border-bottom: 1px solid var(--color-neutral-200);
}
/* News */
.category-news {
    display: grid;
    grid-template-columns: 77.41% 1fr;
    grid-template-rows: auto;
    column-gap: 24px;
    margin-bottom: 32px;
}

.category-news__side-bar {
    grid-column: 2/3;
    grid-row: 1/99;
    position: relative;
}

.category-news__main {
    margin: 16px 0;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--color-neutral-200);
}

.category-news__bullet-point {
    display: none;
}

.category-news__image-wrapper {
    margin-bottom: 16px;
    border-radius: 2px;
    overflow: hidden;
}

.category-news__icon-wrapper {
    --size: 40px;
    position: absolute;
    top: 8px;
    right: 8px;
    width: var(--size);
    height: var(--size);
    border-radius: 8px;
    background-color: #0C0C204D;
    display: flex;
    justify-content: center;
    align-items: center;
}

.category-news__icon-wrapper svg{
    --size: 24px;
    width: var(--size);
    height: var(--size);
}

.category-news__title {
    font: 500 16px var(--font-body);
    color: var(--color-neutral-800);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.category-news__title--highlight {
    font: 700 24px var(--font-highlight);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    margin-bottom: 8px;
}

.category-news__description {
    font-size: 16px;
    font-family: var(--font-body);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    color: var(--color-neutral-600);
}

.category-news__sub {
    display: flex;
}

    .category-news__sub > * {
        width: calc((100% / 3) - (23px * 2 / 3));
    }

        .category-news__sub > *:nth-last-child(n+2) {
            margin-right: 24px;
        }

.category-news__card--flex {
    display: flex;
    justify-content: space-between;
}

.category-news__image-wrapper--flex-item {
    width: 53.60%;
    margin-bottom: 0;
}

.category-news__info--flex-item {
    width: calc(100% - (53.59% + 24px));
}

.category-news > .category-news__content:nth-child(odd) .category-news__card {
    flex-direction: row-reverse;
}

.category-news__content {
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 3px solid var(--color-neutral-200);
}
/* Side Slider */
.category-news__track {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.category-news__slider {
    /* height: fit-content; */
    position: sticky;
    top: 66px;
}

    .category-news__slider > *:nth-last-child(n+2) {
        margin-bottom: 24px;
    }
/* Side Banner */
.category-news__side-banner {
    width: 100%;
    background-color: #65A7D5;
    border-radius: 2px;
    overflow: hidden;
}

    .category-news__side-banner a {
        line-height: 0 !important;
        display: block;
        width: 100%;
        height: 100%;
    }

.category-news__side-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Most View */
.most-view__list {
    margin-top: 16px;
}

.most-view__item {
    display: flex;
}

    .most-view__item:nth-last-child(n+2) {
        border-bottom: 1px dashed var(--color-neutral-200);
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

.most-view__count {
    position: relative;
    width: 44px;
}

.most-view__headlight {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font: 400 72px/149% "Pacifico";
    color: var(--color-neutral-200);
}

.most-view__info {
    margin-left: 16px;
    flex: 1;
}

.most-view__title {
    font: 500 16px/149% var(--font-body);
    color: var(--color-neutral-800);
    margin-bottom: 8px;
}

.most-view__post-time {
    font: 400 12px/149% var(--font-body);
    color: var(--color-neutral-600);
    text-align: end;
    margin-bottom: 0;
}
/* Section Header */
.section-header__title {
    font-size: 24px !important;
}
/* Newest */
.newest {
    grid-column: 1/2;
}

.newest__list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;
}

    .newest__list > *:nth-child(-n+3) {
        width: 100%;
        display: flex;
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px dashed var(--color-neutral-200);
    }

        .newest__list > *:nth-child(-n+3) .category-news__image-wrapper {
            width: 25.47%;
            margin-right: 16px;
            margin-bottom: 0;
        }

        .newest__list > *:nth-child(-n+3) .category-news__info {
            flex: 1;
        }

    .newest__list > *:nth-child(n+5) {
        width: calc((100% / 4) - (24px * 3 / 4));
        margin-right: 24px;
    }

        .newest__list > *:nth-child(n+5) {
            position: relative;
            --space: 16px;
            padding-bottom: var(--space);
            margin-bottom: var(--space);
        }

    .newest__list > *:nth-child(n+5):nth-child(4n+4)::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        transform:rotate(360deg);
        height: 1px;
        width: calc(100% * 4 + 24px * 3);
        border-bottom: 1px dashed var(--color-neutral-200);
    }

    .newest__list > *:nth-child(n+5):nth-child(4n+4) {
        margin-right: 0;
        position:relative;
    }

.newest-more__btn {
    display: block;
    margin: 0 auto;
    width: fit-content;
    padding: 8px 24px;
    background-color: var(--color-primary-900);
    border-radius: 24px;
    border: 1px solid var(--color-neutral-200);
    box-shadow: 0px 2px 4px 0px #0000001A;
    font: 500 16px var(--font-body);
    color: var(--color-neutral-0);
}

    .newest-more__btn:hover {
        color: var(--color-neutral-0);
    }

.news-section__banner.category-news__card {
    width: 100%;
    display: flex;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--color-neutral-200);
}

@media screen and (max-width: 576px) {
    .category-header__sub-list {
        display: none;
    }

    .category-header__title {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .category-header__shape {
        height: 5px;
    }

    .category-header__main {
        margin-bottom: 16px;
    }

    .category-header {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .category-main {
        --space: 16px;
        position: relative;
        border-bottom-width: 3px;
    }

    .category-news__content {
        position: relative;
    }

        .category-main::before,
        .category-news__content::before {
            content: "";
            position: absolute;
            height: 3px;
            width: 16px;
            left: -16px;
            bottom: -3px;
            background-color: var(--color-neutral-200);
        }

        .category-main::after,
        .category-news__content::after {
            content: "";
            position: absolute;
            height: 3px;
            width: 16px;
            right: -16px;
            bottom: -3px;
            background-color: var(--color-neutral-200);
        }

    .category-news {
        grid-template-columns: 1fr;
        margin-bottom: 16px;
    }

        .category-news .section-header__title {
            color: var(--color-primary-900);
            font: 500 16px var(--font-body) !important;
            text-transform: uppercase;
        }

    .category-news__side-bar {
        display: none;
    }

    .category-news__icon-wrapper {
        --size: 32px;
    }

        .category-news__icon-wrapper svg {
            --size: 20px;
        }

    .category-news__main .category-news__card {
        flex-direction: column !important;
    }

    .category-news__main .category-news__image-wrapper {
        margin-bottom: 16px;
    }

    .category-news__image-wrapper--flex-item,
    .category-news__info--flex-item {
        width: 100%;
    }

    .category-news__title--highlight {
        font-size: 20px;
    }

    .category-news__sub > *:nth-last-child(n+2) {
        margin-right: 0;
    }

    .category-news__sub {
        flex-direction: column;
    }

        .category-news__sub > * {
            width: 100%;
        }

        .category-news__sub .category-news__image-wrapper {
            display: none;
        }

    .category-news__bullet-point {
        display: block;
        margin-right: 8px;
        margin-top: 7px;
        width: 9px;
    }

    .category-news__sub .category-news__info {
        display: flex;
        flex: 1;
    }

    .category-news__sub > *:nth-last-child(n+2) {
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px dashed var(--color-neutral-200);
    }

    .newest__list > * .category-news__image-wrapper {
        width: 41.69% !important;
        min-width: 143px;
        margin-right: 16px;
        margin-bottom: 0;
    }

    .newest__list > *:nth-child(n+5) {
        display: flex;
        width: 100%;
        margin-right: 0;
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px dashed var(--color-neutral-200);
    }

    .newest__list > *:nth-child(5n)::after {
        width: 100%;
    }

    .newest__list .category-news__description {
        display: none;
    }

    .newest__list > *:nth-child(n+5):nth-child(4n+4)::after {
        display: none;
    }
    /* ,
    .newest-more*/
    .newest__list > *:nth-child(n+5) .category-news__info {
        flex: 1;
    }

    .newest .newest__list > *:nth-last-child(2) > *:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border: none;
    }
}