:root {
    /* Text colors */
    --text-main: #222222;
    --text-header:#4D4D4D;
    --text-red: #ED1D26;
    /* text chính */
    /* tiêu đề */
    --text-invert: #FFFFFF;
    /* text trên nền tối */

    /* Background — light */
    --bg-site: #FAF0E4;
    /* nền tổng thể trang */
    --bg-section: #F0DFD0;
    /* nền block, section phụ */
    --bg-tag: #91131C;
    /* bg của label/tag */

    /* Background — dark (dùng chung header, footer, dark section) */
    --bg-dark:         #263145;   /* nền tối chính */
    --bg-dark-2:       #222B3D;   /* nền tối phụ / nội dung */
    --bg-dark-3:       #1A212F;   /* nền tối sâu / bottom bar */

    /* Text on dark */
    --text-on-dark:        #FFFFFF;
    --text-on-dark-muted:  #8D9097;

    /* Border on dark */
    --border-dark: #3C4658;
    --border-gray: #909090;
    /* Accent / Brand */
    --color-accent: #ED1D26;

    /* Background */
    --bg: #E8F6F4;
    --bg-darker: #D4E8E3;
    --bg-2: #F5EBE1;
    --bg-2-darker: #F0E2D5;
    --bg-2-darker2: #EAD8C8;
    --bg-moss: #8A8C5E;
    --bg-card: #fff;
    /* Border */
    --border-1: #E4DFD9;
    --border-2: #E1D8CD;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-11: 44px;
    --space-12: 48px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
*::before,
*::after {
  box-sizing: border-box;
}
body {
    font-family: "VNE1";
    line-height: 1.4;
    font-size:16px;
    background-color: #fff;
    color: var(--text-main);
}

input:focus {
    box-shadow: none;
    outline: none;
}

a:hover,
a:focus {
    text-decoration: none;
    outline: none;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all .3s;
}

ul,
li {
    list-style: none;
}

ul {
    padding: 0;
    margin: 0;
}

img {
    max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-bottom: 0;
}

p {
    margin-top: 0;
}
.clear-fix {
    clear: both;
}
img {
    max-width: 100%;
}
.bg-detail-news {
    background: rgba(240, 240, 240, 1);
}
.container {
    width: 100%;
    margin: 0 auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

@media (min-width: 576px) {
    .container {
        max-width: 100%;
    }
}
@media (min-width: 1400px) {
    .container {
        max-width: 1464px;
    }
}
.mb-1 {
    margin-bottom: var(--space-1);
}
.mb-2 {
    margin-bottom: var(--space-2);
}
.mb-3 {
    margin-bottom: var(--space-3);
}
.mb-4 {
    margin-bottom: var(--space-4);
}
.mb-5 {
    margin-bottom: var(--space-5);
}
.mb-6 {
    margin-bottom: var(--space-6);
}
.mb-7 {
    margin-bottom: var(--space-7);
}
.mb-8 {
    margin-bottom: var(--space-8);
}
.mb-9 {
    margin-bottom: var(--space-9);
}
.mb-10 {
    margin-bottom: var(--space-10);
}
.mb-11 {
    margin-bottom: var(--space-11);
}
.mb-12 {
    margin-bottom: var(--space-12);
}
.pt-0 {
    padding-top:0;
}

@media (max-width:991.98px) {
    .mb-12 {
        margin-bottom: var(--space-9);
    }
}

/* ── VNE1 ─────────────────────────────────────────────────── */
@font-face {
    font-family: "VNE1";
    src: url('../fonts/VNE1/VNE1-Regular.woff2') format('woff2'),
         url('../fonts/VNE1/VNE1-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "VNE1";
    src: url('../fonts/VNE1/VNE1-Italic.woff2') format('woff2'),
         url('../fonts/VNE1/VNE1-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: block;
}

@font-face {
    font-family: "VNE1";
    src: url('../fonts/VNE1/VNE1-Bold.woff2') format('woff2'),
         url('../fonts/VNE1/VNE1-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "VNE1";
    src: url('../fonts/VNE1/VNE1-BoldItalic.woff2') format('woff2'),
         url('../fonts/VNE1/VNE1-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: block;
}

@font-face {
    font-family: "VNE1";
    src: url('../fonts/VNE1/VNE1-MediumTitle.woff2') format('woff2'),
         url('../fonts/VNE1/VNE1-MediumTitle.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

/* ── VNE2 ─────────────────────────────────────────────────── */
@font-face {
    font-family: "VNE2";
    src: url('../fonts/VNE2/VNE2-Regular.woff2') format('woff2'),
         url('../fonts/VNE2/VNE2-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "VNE2";
    src: url('../fonts/VNE2/VNE2-Light.woff2') format('woff2'),
         url('../fonts/VNE2/VNE2-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "VNE2";
    src: url('../fonts/VNE2/VNE2-LightItalic.woff2') format('woff2'),
         url('../fonts/VNE2/VNE2-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: block;
}

@font-face {
    font-family: "VNE2";
    src: url('../fonts/VNE2/VNE2-Medium.woff2') format('woff2'),
         url('../fonts/VNE2/VNE2-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "VNE2Title";
    src: url('../fonts/VNE2/VNE2-MediumTitle.woff2') format('woff2'),
         url('../fonts/VNE2/VNE2-MediumTitle.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "VNE2";
    src: url('../fonts/VNE2/VNE2-Bold.woff2') format('woff2'),
         url('../fonts/VNE2/VNE2-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "VNE2";
    src: url('../fonts/VNE2/VNE2-BoldTitle.woff2') format('woff2'),
         url('../fonts/VNE2/VNE2-BoldTitle.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: block;
}




/* Nav , Pagination Swiper */
.ct-nav-slide {
    width: var(--space-8);
    height: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #E5E5E5;
    transition: all .3s;
    position: absolute;
    opacity: 1;
    bottom: 2px;
    z-index: 1;
    top: auto;
    cursor: pointer;
}
.ct-nav-slide:hover {
    border-color: #ED1D26;
}
.ct-nav-slide svg {
    display: none;
}
.ct-nav-slide:after {
    display: none !important;
}
.swiper-navigation-icon {
    display: none;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    display: none;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    display: none;
}
.group-pagination .swiper-button-prev {
    left: 0;
}
.group-pagination .swiper-button-next {
    right: 0;
}
.ct-pagination {
    height: 32px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 100px) !important;
    margin: 0 auto;
    bottom: 0 !important;
    top: 0 !important;
    z-index: 2;
}
.ct-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgb(34 34 34 / 20%);
    opacity: 1;
    border-radius: 10px;
    margin: 0 !important;
    transition: all 0.3s;
}
.ct-pagination .swiper-pagination-bullet-active {
    background: var(--text-red);
    width: 24px;
}
.group-pagination .swiper-button-next.swiper-button-disabled,.group-pagination .swiper-button-prev.swiper-button-disabled {
    opacity: 1;
}
.group-pagination {
    text-align: center;
    position: relative;
    margin-top: var(--space-4);
}

/*  End Nav , Pagination Swiper */
/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 48px;
}

.pagination__item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #E8E8E8;
    border-radius: 4px;
    color: #4E4E4E;
    background: #F8F8F8;
    transition: all 0.3s ease;
    font-size: 17px;
}
.pagination__item:hover {
    border-color: var(--color-accent, #ED1D26);
    color: var(--color-accent, #ED1D26);
}
.pagination__item.is-active {
    background: #F8F8F8;
    color: #4E4E4E;
}
.pagination__item--arrow {
    background: #F9F9F9;
}
.pagination.pagination--center {
    justify-content: center;
}
@media (max-width:767.98px) {
    .pagination {
         margin-top: 32px;
    }
    .pagination.pagination--center {
        justify-content: flex-start;
    }
}


/* title */
.text-bold {
    font-weight: 700;
}
.text-size-18 {
    font-size: 18px;
    line-height: 1.4;
    color: var(--text-main);
}
.text-size-16 {
    font-size: 16px;
    line-height: 1.4;
    color: var(--text-main);
}
.text-size-14 {
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-main);
}
.title-size-18,.title-size-18 a {
    font-size: 18px;
    line-height: 1.4;
    color: var(--text-main);
    transition: all .3s;
    display: inline-block;
}
.title-size-18:hover,.title-size-18:hover a {
    color: var(--text-red);
}
.title-size-20,.title-size-20 a {
    font-size: 20px;
    line-height: 1.4;
    color: var(--text-main);
    transition: all .3s;    
    display: inline-block;
}
.title-size-20:hover,.title-size-20:hover a {
    color: var(--text-red);
}
.title-size-22,.title-size-22 a {
    font-size: 22px;
    line-height: 1.4;
    color: var(--text-main);
    transition: all .3s;    
    display: inline-block;
}
.title-size-22:hover,.title-size-22:hover a {
    color: var(--text-red);
}
.title-size-24,.title-size-24 a {
    font-size: 24px;
    line-height: 1.4;
    color: var(--text-main);
    transition: all .3s; 
    display: inline-block;   
}
.title-size-24:hover,.title-size-24:hover a {
    color: var(--text-red);
}
.title-section {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    color: #111111;
    margin: 0;
    padding-top: 8px;
    display: inline-block;
    position: relative;
}
.title-border-center .title-section {
    text-align: center;
    width: 100%;
}
.title-border-center::before {
    left: 0;
    right: 0;
    margin: auto;
}
.title-border-center .title-section:before {
    height: 40px;
    width: calc(100% - 48px);
    border-radius: 4px;
    background: transparent;
    border: 1px solid #ED1D26;
    pointer-events: none;
    position: absolute;
    top: 17px;
    left: 0;
    right: 0;
    margin: auto;
}
.title-center .title-section {
    text-align: center;
    width: 100%;
}
.title-center .title-section:before {
    left: 0;
    right: 0;
    margin: auto;
}
.title-section a {
    display: inline-block;
    color: #222;
}
.title-section a:hover {
    color: #ed1d26;
}
.title-section a .text-primary {
    color: var(--text-red);
}
.title-section:before {
    content: '';
    position: absolute;
    top: 0;
    width: 80px;
    height: 4px;
    background: #ed1d26;
    left: 0;
}
.flex-title-news-general {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
.flex-title-news-general .title-section {
    flex: 1;
}
.flex-title-news-general .icon-view-news {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 2px;
}
@media (max-width:767.98px) {
    .title-section {
        font-size: 24px;
    }
}



/* size ảnh + item news */
.icon-title-new {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 3px;
    margin-right: 4px;
}
.new-item_vertical {
    position: relative;
}
.new-item_vertical .new-item__image {
    margin-bottom: 12px;
    width: 100%;
}
.new-item_horizontal {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}
.new-item_horizontal .new-item__image {
    width: 110px;
    height: 110px;
}
.new-item_horizontal .new-item__content {
    flex: 1;
}
.new-item--date {
    color: rgba(78, 78, 78, 1);
    font-size: 17px;
    line-height: 1.4;
    margin-bottom: 4px;
}
.new-item_horizontal:last-child {
    margin: 0;
}
.text-description {
    margin-top:var(--space-2);
}
.tag-news {
    position: relative;
    margin-bottom: var(--space-2);
}
.tag-news .text {
    color: var(--text-red);
    font-size: 14px;
    font-family: "VNE2";
    line-height: 1.2;
    margin: 0;
}
.news-item__thumb {
    display: block;
    font-size: 0;
}
.image-container {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
}
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: filter .35s ease;
    border-radius: 4px;
}
.image-container:hover img {
    transform: scale(1);
    filter: brightness(0.8);
}
.image-container--10x6 {
    aspect-ratio: 10 / 6;
}
.image-container--16x9 {
    aspect-ratio: 16 / 9;
}
.image-container--4x3 {
    aspect-ratio: 4 / 3;
}
.image-container--3x2 {
    aspect-ratio: 3 / 2;
}
.image-container--1x1 {
    aspect-ratio: 1 / 1;
}
.image-container--16x9 iframe {
    width: 100%;
    height: 100%;
}
@media (max-width:767.98px) {
    .new-item_horizontal {
        padding-bottom: var(--space-6);
        margin-bottom: var(--space-6);
        border-bottom: 1px solid #E5E5E5;
        width: 100%;
    }
    .new-item_horizontal:last-child {
        border: none;
        padding: 0;
        margin: 0;
    }
    .new-item_vertical {
        padding-bottom: var(--space-6);
        margin-bottom: var(--space-6);
        border-bottom: 1px solid #E5E5E5;
        width: 100%;
    }
    .text-description {
        color: #4E4E4E;
    }
}


/* ============================================================
   CATEGORY PAGE HEADER (Tiêu & Dùng)
   ============================================================ */
.category-page-header {
    padding: 24px 0;
    text-align: center;
}
.category-page-header .tag-news .text {
    font-size: 18px;
    font-family: "VNE1";
}
.category-page-header .nav-multimedia {
    justify-content: center;
    margin-bottom: 0;
}
.category-page-header__title {
    font-size: 48px;
    font-weight: 700;
    color: #222;
    margin-bottom: var(--space-3);
    line-height: 1.4;
}

.category-page-header__nav {
    display: flex;
    justify-content: center;
}

.category-page-header__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4) 32px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-page-header__list li a {
    font-size: 18px;
    color: #4E4E4E;
    font-weight: 400;
    transition: color 0.3s;
}

.category-page-header__list li a:hover {
    color: var(--color-accent, #ED1D26);
    text-decoration: underline;
}
@media (max-width: 767.98px) {
    .category-page-header {
        text-align: left;
        padding: var(--space-4) 0;
    }
    .category-page-header__title {
        font-size: 32px;
    }
    .category-page-header__list {
        flex-wrap: nowrap;
        gap: 0 24px;
        justify-content: flex-start;
        overflow-x: auto;
        width: calc(100% + 32px);
        margin: 0 -16px;
        padding: 0 16px;
        scrollbar-width: none;
        -ms-overflow-style: none; 
    }
    .category-page-header__list::-webkit-scrollbar {
        display: none;
    }
    .category-page-header__list li {
        white-space: nowrap;
    }
}