: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;
}
/* Arrow buttons */
.slider-nav__left {
    left: 0;
}

.slider-nav__right {
    right: 0;
}

.slider-nav__left,
.slider-nav__right {
    position: absolute;
    z-index: 20;
    cursor: pointer;
    width: 53px;
    height: 53px;
    background: #0C0C204D;
    border-radius: 50%;
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}
    /* Custom next arrow */
    .slider-nav__right::after {
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.90998 20.67C8.71998 20.67 8.52998 20.6 8.37998 20.45C8.08998 20.16 8.08998 19.68 8.37998 19.39L14.9 12.87C15.38 12.39 15.38 11.61 14.9 11.13L8.37998 4.60999C8.08998 4.31999 8.08998 3.83999 8.37998 3.54999C8.66998 3.25999 9.14998 3.25999 9.43998 3.54999L15.96 10.07C16.47 10.58 16.76 11.27 16.76 12C16.76 12.73 16.48 13.42 15.96 13.93L9.43998 20.45C9.28998 20.59 9.09998 20.67 8.90998 20.67Z" fill="white"/></svg>');
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* Custom prev arrow */
    .slider-nav__left::after {
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.09 3.32998C15.28 3.32998 15.47 3.39998 15.62 3.54998C15.91 3.83998 15.91 4.31998 15.62 4.60998L9.10002 11.13C8.62002 11.61 8.62002 12.39 9.10002 12.87L15.62 19.39C15.91 19.68 15.91 20.16 15.62 20.45C15.33 20.74 14.85 20.74 14.56 20.45L8.04002 13.93C7.53002 13.42 7.24002 12.73 7.24002 12C7.24002 11.27 7.52002 10.58 8.04002 10.07L14.56 3.54998C14.71 3.40998 14.9 3.32998 15.09 3.32998Z" fill="white"/></svg>');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .slider-nav__left:hover,
    .slider-nav__right:hover {
        background: rgba(0,0,0,0.4);
    }

/* Pagination bullets at bottom */
.swiper-pagination {
    bottom: 0px !important;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--color-neutral-200);
    opacity: 1;
    border-radius: 50%;
    margin: 0 4px !important;
    transition: all 0.3s;
}

.swiper-pagination-bullet-active {
    width: 34px;
    background: var(--color-primary-900);
    border-radius: 12px;
}

.home-page {
    background-color: var(--color-neutral-0);
}

/*Highlight Banner*/
.banner_hightlight {
    margin-bottom: 16px !important;
}
/* Highlight */
.highlight {
    display: flex;
    padding-bottom: 32px;
    margin-bottom: 24px;
    border-bottom: 3px solid var(--color-neutral-200);
}

.highlight__post-col {
    width: 24%;
    padding-right: 16px;
}

.highlight__side-post {
    position: relative;
    border-radius: 2px;
    overflow: hidden;
}

    .highlight__side-post:nth-last-child(n+2) {
        margin-bottom: 16px;
    }

.highlight__side-image-wrapper > *::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, #000000 -29.94%, rgba(0, 0, 0, 0) 61.73%);
}

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

.highlight__icon {
    width: 24px;
    height: 24px;
}

.highlight__icon svg{
    width: 24px;
    height: 24px;
}

.highlight__side-text-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 16px;
    z-index: 3;
}

.highlight__side-title {
    font: 500 16px/149% var(--font-body);
    color: var(--color-neutral-0);
    margin-bottom: 0;
}

.highlight__side-title--two-line {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.highlight__main-col {
    width: 49.76%;
    padding: 0 16px;
    border-left: 1px solid var(--color-neutral-200);
    border-right: 1px solid var(--color-neutral-200);
    display: flex;
    flex-direction: column;
}

.highlight__slider {
    flex: 1;
    padding-bottom: 24px;
    border-bottom: 1px dashed var(--color-neutral-200);
}

.highlight-button-prev,
.highlight-button-next {
    top: 30%;
}

.highlight-button-prev {
    left: 5px;
}

.highlight-button-next {
    right: 5px;
}
/* Slide card */
.highlight__slider-image-wrapper {
    margin-bottom: 24px;
    border-radius: 2px;
}

.highlight__slider-title {
    font: 700 32px/149% var(--font-highlight);
    text-align: center;
    margin-bottom: 8px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.highlight__slider-description {
    color: var(--color-neutral-600);
    font: 400 16px/149% var(--font-body);
    text-align: center;
    margin-bottom: 48px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.highlight__sub-post {
    display: flex;
    margin-top: 16px;
}

.highlight__sub-image-wrapper {
    width: 48.5%;
    margin-right: 16px;
    border-radius: 2px;
    overflow: hidden;
}

.highlight__sub-text-wrapper {
    flex: 1;
}

.highlight__sub-title {
    font: 500 16px/149% var(--font-body);
    margin-bottom: 0px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.author-post__title-wrapper {
    display: flex;
}

.author-post__title {
    font: 500 16px/149% var(--font-body);
    color: var(--color-neutral-800);
    margin-bottom: 0;
    margin-left: 8px;
}

.author-post__info-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 8px;
}

.author-post__name {
    font: 700 16px/149% var(--font-body);
    margin-bottom: 4px;
}

.author-post__position {
    font: 400 12px/149% var(--font-body);
    margin-bottom: 0;
    text-align: right;
    color: var(--color-neutral-600);
}

.author-post__avatar {
    width: 50px;
    height: 50px;
    margin-left: 8px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--color-primary-900);
}

    .author-post__avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .author-post__avatar > * {
        width: 100%;
        object-fit: cover;
    }

.highlight__side-col {
    flex: 1;
    padding-left: 16px;
}

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

.highlight__banner-wrapper > * {
    max-height: 160px;
    width: 100%;
}

.highlight__republic-of-vietnam img {
    width: 100%;
    max-height: 138px;
    object-fit: contain;
    cursor: pointer;
}

.highlight__banner {
    width: 100%;
    margin-top: 16px;
    border-radius: 2px;
    overflow: hidden;
}

    .highlight__banner img {
        width: 100%;
        max-height: 138px;
        object-fit: contain;
        cursor: pointer;
    }

/* Spotlight */
.spotlight-button-prev {
    left: -8%;
}

.spotlight-button-next {
    right: -8%;
}

.spotlight-pagination {
    position: absolute;
    bottom: -38px !important;
}

.spotlight__list {
    position: relative;
    margin-top: 24px;
    margin-bottom: 66px;
}

.spotlight__item {
    position: relative;
}

.spotlight__image-wrapper {
    border-radius: 4px;
    overflow: hidden;
}

    .spotlight__image-wrapper > *::after {
        content: "";
        position: absolute;
        z-index: 2;
        inset: 0;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 54.33%);
    }

.spotlight__icon-wrapper {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #0C0C204D;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spotlight__icon {
    width: 24px;
    height: 24px;
}

.spotlight__caption {
    position: absolute;
    z-index: 3;
    bottom: 16px;
    left: 16px;
    right: 16px;
    font: 500 18px/149% var(--font-body);
    color: var(--color-neutral-0);
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Special Publication */
.special-publication .section-header__bottom-line {
    border-color: rgba(255, 255, 255, .3);
}

.special-publication {
    padding: 24px 0;
    position: relative;
    margin-bottom: 32px;
}

.special-publication__background {
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: calc(100vw - var(--scroll-bar));
    height: 100%;
}

.special-publication__background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6) contrast(1.1);
}

.special-publication .section-header__title {
    font-weight: 800;
    font-size: 49px;
    color: var(--color-neutral-0);
}

.special-publication__content {
    position: relative;
    z-index: 2;
}

.special-publication__description {
    margin-top: 24px;
    margin-bottom: 210px;
}

.special-publication__text {
    font: 700 32px/149% var(--font-highlight);
    color: var(--color-neutral-0);
}

.special-publication__list {
    position: relative;
    padding: 24px 30px;
    border-radius: 4px;
    background: #1E1E1E80;
}

.special-publication__image-wrapper {
    position: relative;
}

    .special-publication__image-wrapper::before {
        content: "";
        display: block;
        padding-top: 139.16%; /* 398 / 286 × 100% */
    }

.special-publication__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.special-publication__caption {
    font: 500 16px/149% var(--font-body);
    color: var(--color-neutral-0);
    margin-top: 8px;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.special-publication-button-prev {
    left: -12%;
    top: 2%;
}

.special-publication-button-next {
    right: -12%;
    top: 2%;
}

/* News */
.news-section {
    margin-bottom: 32px;
    display: grid;
    column-gap: 24px;
    grid-template-columns: 74.52% 1fr;
    grid-template-rows: auto;
}

    .news-section .science-news {
        grid-column: 1/2;
        grid-row: 1/2;
    }

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

    .news-section__side-bar .section-header__title {
        font-size: 24px;
    }

.news-section > *:nth-child(3) .news-section__main .news-section__card,
.news-section > *:nth-child(6) .news-section__main .news-section__card {
    flex-direction: row-reverse;
}

.news-section__content {
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 3px solid var(--color-neutral-200);
}

.news-section__category-list {
    display: flex;
    align-items: center;
    margin: 24px 0;
    padding: 0;
    padding-bottom: 24px;
    border-bottom: 1px dashed var(--color-neutral-200);
}

.news-section__category-list--two-col {
    flex-wrap: wrap;
    row-gap: 8px;
}

    .news-section__category-list--two-col > * {
        width: 50%;
        margin-left: 0 !important;
        overflow: hidden;
        white-space: nowrap;
    }

        .news-section__category-list--two-col > * a {
            display: block;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
        }

        .news-section__category-list--two-col > *:nth-child(even) {
            padding-left: 16px;
        }

        .news-section__category-list--two-col > *:last-child {
            margin-left: 0 !important;
        }

.news-section__category {
    list-style: none;
    color: var(--color-primary-900);
}

    .news-section__category:nth-child(n+2) {
        margin-left: 16px;
    }

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

.news-section__category-text {
    font: 500 16px/149% var(--font-body);
    text-transform: uppercase;
    margin-bottom: 0;
}

    .news-section__category-text:hover {
        color: #641918;
    }

.news-section__main {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px dashed var(--color-neutral-200);
}

.news-section__card--flex {
    display: flex;
}

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

.news-section__image-wrapper--highlight {
    width: 53.59%;
    margin-right: 24px;
    margin-bottom: 0;
}

.news-section__card--reverse {
    flex-direction: row-reverse;
}

    .news-section__card--reverse .news-section__image-wrapper--highlight {
        margin-right: 0;
        margin-left: 24px;
    }

    .news-section__card--reverse .news-section__icon-wrapper {
        right: 8px;
        left: initial;
    }

.news-section__icon-wrapper {
    position: absolute;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    top: 8px;
    right: 8px;
    border-radius: 8px;
    background: #0C0C204D;
}

    .news-section__icon-wrapper .news-section__icon {
        height: 24px;
        width: 24px;
    }

    .news-section__icon-wrapper .news-section__icon svg{
        height: 24px;
        width: 24px;
    }

.news-section__main .news-section__info {
    flex: 1;
}

.news-section__title {
    flex: 1;
    font: 500 16px/149% var(--font-body);
    color: var(--color-neutral-800);
}

.news-section__title--highlight {
    font: 700 24px/149% var(--font-highlight);
    margin-bottom: 8px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.news-section__description {
    font: 400 16px/149% var(--font-body);
    color: var(--color-neutral-600);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.news-section__sub {
    display: flex;
    justify-content: space-between;
}

    .news-section__sub > * {
        width: calc((100% / 3) - (24px / 2));
    }

        .news-section__sub > *:nth-child(3):not(:last-child) {
            display: none;
        }

.news-section__item {
    display: flex;
}

.news-section__bullet-point {
    height: 9px;
    width: 9px;
    margin-right: 8px;
    margin-top: 7px;
}

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

/* Tab */
.news-section__tab {
    margin-bottom: 32px;
}

.tabset > label {
    display: none;
}

.tab-panels {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.tab-panel {
    flex: 1;
}

.news-tabs__block {
    flex: 1;
    border: 1px solid var(--color-primary-900);
    border-radius: 2px;
    background-color: var(--color-neutral-100);
    padding: 8px 15px;
}

.news-tabs__title {
    font: 700 16px/149% var(--font-body);
    color: var(--color-secondary-900);
    text-align: center;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-neutral-200);
}

.news-tabs__desc {
    font: 500 16px/149% var(--font-body);
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
}

    .news-tabs__desc:not(:last-child) {
        margin-bottom: 8px;
    }

.news-tabs__status {
    color: var(--color-neutral-800);
}

.news-tabs__price {
    color: var(--color-primary-900);
}

.news-tabs__desktop .news-tabs__block:nth-last-child(n+2) {
    margin-right: 24px;
}

/* Banner */
.news-section__banner {
    max-height: 120px;
    margin-bottom: 32px;
}

.news-section__banner-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.news-section__banner ~ .news-section__banner {
    margin-bottom: 0;
}

/* Side Slider */
.news-section__track {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

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

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

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

.news-section__side-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/* 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;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.most-view__post-time {
    font: 400 12px/149% var(--font-body);
    color: var(--color-neutral-600);
    text-align: end;
    margin-bottom: 0;
}

/* Weather */
.weather {
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    padding: 16px;
}

.weather__background {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .weather__background > * {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.weather__blur {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.3);
}

.weather__info {
    position: relative;
    z-index: 3;
    color: var(--color-neutral-0);
}

    .weather__info > *:nth-last-child(n+2) {
        margin-bottom: 16px;
    }
/* Remove default arrow (Chrome, Edge, Safari) */
.custom-select__field {
    -webkit-appearance: none;
    appearance: none;
    /* width: 100%; */
    /*padding-right: 40px;*/
    height: 36px;
    border-radius: 4px;
    border: none;
    outline: none;
    /*background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M19.92 8.9502L13.4 15.4702C12.63 16.2402 11.37 16.2402 10.6 15.4702L4.07996 8.9502' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;*/
    background-size: 24px;
    cursor: pointer;
    font: 700 24px/149% var(--font-body);
    color: inherit;
}

    .custom-select__field option {
        color: var(--color-neutral-800);
    }
    /* Remove arrow in Firefox */
    .custom-select__field::-ms-expand {
        display: none;
    }

.weather__place {
    text-align: center;
}

.weather__content{
    display: flex;
    justify-content: center;
}

.weather__text {
    text-align: center;
    font: 500 16px/149% var(--font-body);
    margin-bottom: 0;
}

    .weather__text.weather__description::first-letter {
        text-transform: capitalize;
    }

.weather__temperature {
    font: 900 56px/149% var(--font-body);
    margin-right: 8px;
    margin-bottom: 0;
}

.weather__main-icon {
    max-width: 88px;
    max-height: 88px;
}

.weather__item {
    display: flex;
}

.weather__sub-icon {
    width: 32px;
    height: 32px;
    margin-right: 8px;
}

.weather__item > *:nth-child(2) {
    width: 33.58%;
    margin-right: 8px;
    text-align: left;
}

/* News Magazine */
.news-section__main-magazine {
    display: flex;
}

    .news-section__main-magazine > *:first-child {
        width: 65.85%;
        margin-right: 24px;
    }

.news-section__main-list {
    flex: 1;
}

    .news-section__main-list > * {
        position: relative;
    }

        .news-section__main-list > * .magazine__title {
            font-weight: 700;
            font-size: 18px;
        }

.magazine--highlight {
    display: flex;
    justify-content: space-between;
}

    .magazine--highlight > * {
        width: calc(100% - 12px);
    }

        .magazine--highlight > *:first-child {
            margin-right: 24px;
        }

.magazine__image-wrapper {
    position: relative;
    border-radius: 2px;
    overflow: hidden;
}

    .magazine__image-wrapper > *::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(360deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 2;
    }

    .magazine__image-wrapper::before {
        content: "";
        display: block;
        padding-bottom: 139%;
    }

.magazine__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    object-fit: cover;
}

.magazine__info--flex {
    display: flex;
}

.magazine__title {
    font: 500 16px/149%var(--font-body);
    margin-bottom: 0;
}

.magazine__title--highlight {
    font: 700 24px/149% var(--font-highlight);
    color: var(--color-neutral-800);
    margin-bottom: 8px;
}

.magazine__icon {
    width: 9px;
    margin-right: 8px;
    margin-top: 7px;
}

.magazine__title > *:last-child {
    flex: 1;
}

.magazine__post-date {
    font: 400 16px/149% var(--font-body);
    color: var(--color-neutral-600);
}

.news-section__sub-magazine {
    margin-top: 24px;
}

.news-section__sub-magazine {
    display: flex;
    justify-content: space-between;
}

    .news-section__sub-magazine > * {
        position: relative;
        width: calc((100% / 4) - (24px * 3) / 4);
    }

.magazine__info--float {
    position: absolute;
    z-index: 3;
    bottom: 16px;
    left: 16px;
    right: 16px;
}

    .magazine__info--float .magazine__title {
        color: var(--color-neutral-0);
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

.news-section__content--dash {
    border-bottom-style: dashed;
}

/* Footer Adjective */
.footer-adjactive {
    padding-top: 32px;
    position: relative;
}

.background {
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: calc(100vw - var(--scroll-bar));
    height: 100%;
    background-image: url('/asset/images/place_background.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    transform: scaleX(-1);
}

    .background::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(360deg, #0A72BA 0%, #053354 131.48%);
        opacity: .8;
    }

.background-tag {
    position: absolute;
    left: -301px;
    max-width: 285px;
    max-height: 75px;
    z-index: 2;
}
/* Media */
.media-section {
    position: relative;
    padding-bottom: 66px;
}

    .media-section .section-header__title {
        color: var(--color-neutral-0);
    }

.media-container {
    margin-top: 24px;
    display: flex;
}

.media-button-next {
    right: 8px;
}

.media-button-prev {
    left: 8px;
}

.media-content {
    position: relative;
    width: calc(76.5% - 24px);
    margin-right: 24px;
}

.media__slider-image-wrapper {
    border-radius: 2px;
    overflow: hidden;
}

    .media__slider-image-wrapper > *::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        background: linear-gradient(360deg, #000000 -43.77%, rgba(0, 0, 0, 0) 100%);
    }

.media__slider-icon-wrapper {
    position: absolute;
    z-index: 3;
    /*top: 50%;
    left: 50%;*/
    top: 8px;
    right: 8px;
    /*transform: translate(-50%,-50%);*/
    width: 80px;
    height: 80px;
    background: #0C0C204D;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media__slider-icon {
    width: 48px;
    height: 48px;
}

.media__slider-icon svg{
    width: 48px;
    height: 48px;
}

.media__slider-post {
    position: relative;
}

.media__slider-info {
    position: absolute;
    z-index: 3;
    bottom: 24px;
    left: 24px;
    right: 24px;
}

.media__slider-title {
    font: 700 24px/149% var(--font-highlight);
    color: var(--color-neutral-0);
    margin-bottom: 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.media-list {
    flex: 1;
}

    .media-list > *:nth-last-child(n+2) {
        margin-bottom: 16px;
    }

.media-post {
    position: relative;
}

.media__image-wrapper > *::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(360deg, #000000 -38.16%, rgba(0, 0, 0, 0) 100%);
}

.media__icon-wrapper {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0C0C204D;
    border-radius: 4.8px;
}

.media__text-wrapper {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
}

.media__title {
    font: 500 16px/149% var(--font-body);
    margin-bottom: 0;
    color: var(--color-neutral-0);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.media-pagination {
    bottom: -32px !important;
}

/* Partner */
.partner-section {
    --size: 5px;
    position: relative;
    background-color: var(--color-neutral-0);
    padding: 24px 0 32px;
}

    .partner-section::before {
        content: "";
        width: calc(100vmax - var(--scroll-bar));
        height: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        background: var(--color-neutral-0);
        box-shadow: 0 0 0 100vmax var(--color-neutral-0);
        clip-path: inset(0 -100vmax);
    }

    .partner-section .section-header {
        position: relative;
    }

.partner__list {
    margin-top: 24px;
    position: relative;
    display: flex;
    align-items: start;
}

    .partner__list > *:nth-last-child(n+2) {
        margin-right: 56px;
    }

.partner__item {
    height: 100px;
}

.partner__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mobile-content {
    display: none;
}

@media only screen and (max-width:1550px) {
    .spotlight-button-prev,
    .special-publication-button-prev {
        left: -6%;
    }

    .spotlight-button-next,
    .special-publication-button-next {
        right: -6%;
    }
}

@media screen and (max-width: 992px) {
    .mobile-content {
        display: flex;
    }

    .highlight__sub-post,
    .highlight-button-prev,
    .highlight-button-next,
    .highlight__side-image-wrapper > *::after,
    .author-post,
    .highlight__republic-of-vietnam,
    .spotlight-button-prev,
    .spotlight-button-next,
    .special-publication-button-prev,
    .special-publication-button-next,
    .section-header__more,
    .news-section__category-list,
    .news-section__side-banner,
    .weather {
        display: none;
    }

    /*Highlight Banner*/
    .banner_hightlight {
        margin-bottom: 8px !important;
    }

    /* Highlight */
    .highlight {
        flex-direction: column;
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

        .highlight > * {
            width: 100%;
        }

    .highlight__main-col {
        order: 1;
        border: none;
        padding: 0;
        margin-bottom: 16px;
    }

    .highlight__slider-description {
        margin-bottom: 34px;
    }

    .highlight__slider {
        padding-bottom: 16px;
    }

    .highlight__icon-wrapper {
        width: 32px;
        height: 32px;
    }

    .highlight__icon {
        width: 16px;
        height: 16px;
    }

    .highlight__icon svg {
        width: 16px;
        height: 16px;
    }

    .highlight__post-col {
        order: 2;
        padding-right: 0;
    }

        .highlight__post-col > *:nth-child(-n+3) {
            display: flex;
        }

            .highlight__post-col > *:nth-child(-n+3) .highlight__side-image-wrapper {
                width: 43.73%;
                margin-right: 16px;
            }

        .highlight__post-col > *:nth-last-child(-n+2) .highlight__side-image-wrapper {
            margin-bottom: 16px;
        }

        .highlight__post-col > *:nth-last-child(-n+2) .highlight__side-title {
            font-weight: 700;
            font-size: 18px;
        }

        .highlight__post-col > *:nth-child(3) {
            padding-bottom: 0;
            border-bottom: none;
        }

        .highlight__post-col > *:last-child {
            margin-bottom: 16px;
        }

    .highlight__side-title--two-line {
        -webkit-line-clamp: 3;
    }

    .highlight__side-text-wrapper {
        flex: 1;
        position: static;
        padding: 0;
    }

    .highlight__side-post {
        padding-bottom: 16px;
        border-bottom: 1px dashed var(--color-neutral-200);
    }

    .highlight__side-title {
        color: var(--color-neutral-800);
    }

    .highlight__side-col {
        order: 3;
    }
    /* Spotlight */
    .spotlight__list {
        margin-top: 16px;
        margin-bottom: 40px;
        width: calc(100% + 16px);
        margin-right: -16px;
    }

    .spotlight-pagination {
        bottom: -29px !important;
    }
    /* Special Publication */
    .special-publication .section-header__title {
        font-weight: 700;
        font-size: 24px;
    }

    .special-publication__description {
        margin-bottom: 130px;
    }

    .special-publication__text,
    .news-section__title--highlight {
        font-size: 20px;
    }

    .special-publication__list {
        margin-left: -16px;
        margin-right: -16px;
        border-radius: 0;
    }

    .special-publication {
        margin-bottom: 16px;
    }
    /* News Section */
    .news-section__mobile-hide {
        display: none;
    }

    .news-section {
        grid-template-columns: 100%;
        column-gap: 0;
        margin-bottom: 16px;
    }

        .news-section > *:nth-child(3) .news-section__main .news-section__card,
        .news-section > *:nth-child(6) .news-section__main .news-section__card {
            flex-direction: column;
        }

        .news-section > * {
            position: relative;
        }

            .news-section > *::after {
                content: "";
                position: absolute;
                z-index: 1;
                height: 3px;
                width: 16px;
                left: -16px;
                bottom: -3px;
                background-color: var(--color-neutral-200);
            }

            .news-section > *::before {
                content: "";
                position: absolute;
                z-index: 1;
                height: 3px;
                width: 16px;
                right: -16px;
                bottom: -3px;
                background-color: var(--color-neutral-200);
            }

    .news-section__content,
    .news-section__tab {
        margin-bottom: 16px;
        padding-bottom: 16px;
    }

    .news-section__side-bar {
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 3px solid var(--color-neutral-200);
        grid-column: 1/2;
        /* grid-row-start: 7; */
        grid-row: 6/7;
    }

    .news-section__track {
        position: static;
    }

    .news-section__main {
        margin-top: 16px;
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

    .news-section__card--flex {
        flex-direction: column;
    }

    .news-section__image-wrapper--highlight {
        width: 100%;
        margin-right: 0;
        margin-bottom: 16px;
    }

    .news-section__icon-wrapper {
        width: 32px;
        height: 32px;
    }

    .news-section__icon {
        width: 16px;
        height: 16px;
    }

    .news-section__sub {
        flex-direction: column;
    }

        .news-section__sub > * {
            width: 100%;
        }

        .news-section__sub > .news-section__card {
            display: flex;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px dashed var(--color-neutral-200);
        }

            .news-section__sub > .news-section__card .news-section__image-wrapper {
                width: 43.73%;
                min-width: 143px;
                border-radius: 2px;
                overflow: hidden;
                margin-right: 16px;
                margin-bottom: 0;
            }

            .news-section__sub > .news-section__card .news-section__info {
                flex: 1;
            }

        .news-section__sub > *:nth-child(3):not(:last-child) {
            display: flex;
        }

    .news-section__card--reverse .news-section__image-wrapper--highlight {
        margin-left: 0;
    }

    .news-section__card--reverse .news-section__icon-wrapper {
        right: 8px;
        left: initial;
    }

    .news-section__main-magazine {
        margin-top: 16px;
    }

    .news-section__more {
        margin-top: 16px;
        justify-content: center;
    }

        .news-section__more > * {
            display: flex;
            align-items: center;
        }

    .news-section__more-text {
        font: 500 16px var(--font-body);
        color: var(--color-secondary-900);
        text-transform: uppercase;
    }

    .news-section__more-icon {
        height: 24px;
        width: 24px;
        margin-left: 8px;
    }

    .news-section__content:has(>.news-section__main-magazine) {
        border-bottom: none;
        padding-bottom: 0;
    }

        .news-section__content:has(>.news-section__main-magazine)::after,
        .news-section__content:has(>.news-section__main-magazine)::before,
        .news-section__banner::after,
        .news-section__banner::before,
        .news-section__sub-magazine,
        .magazine__post-date,
        .media-button-prev,
        .media-button-next,
        .media-pagination,
        .media__image-wrapper > *::after,
        .partner-section::before {
            display: none;
        }

    .news-section__main-magazine > *:first-child {
        width: calc(50% - 8px);
        margin-right: 16px;
    }

    .magazine--highlight > *:first-child {
        margin-right: 0;
        flex: 1;
    }

    .magazine--highlight {
        position: relative;
    }

        .magazine--highlight .magazine__info,
        .magazine__info--float {
            position: absolute;
            width: auto;
            z-index: 3;
            bottom: 8px;
            left: 8px;
            right: 8px;
        }

    .magazine__title--highlight,
    .news-section__main-list > * .magazine__title {
        font: 500 16px var(--font-body);
        color: var(--color-neutral-0);
        margin-bottom: 0;
    }

    /* Nav Tabs */
    .news-section__tab {
        border-bottom: 3px solid var(--color-neutral-200);
    }

    .tabset {
        text-align: center;
        background-color: #D4EDFF;
    }

        .tabset input:checked + label {
            color: var(--color-neutral-0);
            background-color: var(--color-secondary-900);
            border-radius: 8px;
        }

        .tabset > label {
            cursor: pointer;
            margin: 8px 0;
            font: 700 16px var(--font-body);
            color: var(--color-neutral-600);
            display: inline-block;
            padding: 8px 24px;
        }

        .tabset .tab-panel {
            display: none;
        }

    .tab-panels > *:nth-last-child(n+2) {
        margin-right: 0;
    }
    /* Media */
    .background {
        background-position: top left;
        background-size: auto 100%;
        transform: none;
    }

    .background-tag {
        left: initial;
        right: 16px;
    }

        .background-tag > * {
            height: 42px;
            max-width: 160px;
        }

    .media-section {
        padding-bottom: 32px;
    }

    .media-container {
        margin-top: 16px;
        flex-direction: column;
    }

    .media-content {
        width: 100%;
        margin-right: 0;
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px dashed rgba(232, 232, 232, 0.5);
    }

    .media__slider-info {
        position: static;
        margin-top: 8px;
    }

    .media__slider-title {
        font-size: 20px;
    }

    .media__slider-icon-wrapper {
        width: 50px;
        height: 50px;
    }

    .media__slider-icon {
        width: 24px;
        height: 24px;
    }

    .media__slider-icon svg{
        width: 24px;
        height: 24px;
    }

    .media__text-wrapper {
        position: static;
        flex: 1;
    }

    .media-post {
        display: flex;
    }

    .media-list > *:nth-last-child(n+2) {
        padding-bottom: 16px;
        border-bottom: 1px dashed rgba(232, 232, 232, 0.5);
    }

    .media__image-wrapper {
        width: 43.73% !important;
        min-width: 143px;
        margin-right: 16px;
    }

    .partner-section {
        padding: 16px 0;
    }

    .partner__list {
        margin-top: 16px;
    }
}