.archive-page-header h1.page-title {
    position: relative;
    padding: 34px;
    background: linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--primary-color), white 97%));
    border: 1px solid color-mix(in srgb, var(--primary-color), white 90%);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .045);
    transition: all .28s ease;
}

.archive-page-header h1.page-title::before {
    content: "";
    position: absolute;
    top: -18px;
    right: -18px;
    width: 150px;
    height: 150px;
    border-radius: 0 0 0 100%;
    background-image: radial-gradient(color-mix(in srgb, var(--primary-color), transparent 84%) 1.3px, transparent 1.3px);
    background-size: 14px 14px;
    opacity: .75;
}

/*Css 3 loại style */

/*1 cột*/
#post-list .row.large-columns-1 .col.post-item .box-blog-post {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    background: linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--primary-color), white 97%));
    border: 1px solid color-mix(in srgb, var(--primary-color), white 90%);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .045);
    transition: all .28s ease;
}

/* image */
#post-list .row.large-columns-1 .col.post-item .box-image {
    width: 40%;
    min-width: 40%;
    overflow: hidden;
}

/* text */
#post-list .row.large-columns-1 .col.post-item .box-text {
    width: 60%;
    padding: 22px 22px 18px;
    display: flex;
    align-items: center;
}

/*2 cột*/
#post-list .row.large-columns-2 .col.post-item .box-blog-post {
    position: relative;
    /*display: flex;*/
    align-items: stretch;
    gap: 0;
    background: linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--primary-color), white 97%));
    border: 1px solid color-mix(in srgb, var(--primary-color), white 90%);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .045);
    transition: all .28s ease;
}

/*3 cột*/
#post-list .row.large-columns-3 .col.post-item .box-blog-post {
    position: relative;
    /*display: flex;*/
    align-items: stretch;
    gap: 0;
    background: linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--primary-color), white 97%));
    border: 1px solid color-mix(in srgb, var(--primary-color), white 90%);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .045);
    transition: all .28s ease;
}

#post-list .row.large-columns-2 .col.post-item .box-image,
#post-list .row.large-columns-3 .col.post-item .box-image {
    width: 100%;
    min-width: 90%;
    overflow: hidden;
}

/* text */
#post-list .row.large-columns-2 .col.post-item .box-text,
#post-list .row.large-columns-3 .col.post-item .box-text {
    width: 100%;
    padding: 22px 22px 18px;
    display: flex;
    align-items: center;
}



/* css chung  */
#post-list .col.post-item {
    margin-bottom: 24px;
}

#post-list .col.post-item .col-inner {
    height: 100%;
}

/* hover */
#post-list .col.post-item .box-blog-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 42px rgba(0, 0, 0, .08);
    border-color: color-mix(in srgb, var(--primary-color), white 80%);
}

/* shape góc phải */
#post-list .col.post-item .box-blog-post::before {
    content: "";
    position: absolute;
    top: -18px;
    right: -18px;
    width: 150px;
    height: 150px;
    border-radius: 0 0 0 100%;
    background-image: radial-gradient(color-mix(in srgb, var(--primary-color), transparent 84%) 1.3px, transparent 1.3px);
    background-size: 14px 14px;
    opacity: .75;
}

/* shape trái dưới */
#post-list .col.post-item .box-blog-post::after {
    content: "";
    position: absolute;

    bottom: -30px;
    width: 170px;
    height: 90px;
    background: color-mix(in srgb, var(--primary-color), transparent 92%);
    border-radius: 60% 40% 70% 30% / 45% 55% 45% 55%;
    transform: rotate(-8deg);
}

#post-list .row.large-columns-1 .col.post-item .box-blog-post::after {
    left: 30%;
}

#post-list .row.large-columns-2 .col.post-item .box-blog-post::after,
#post-list .row.large-columns-3 .col.post-item .box-blog-post::after {
    left: -45px;
}

/* content nổi lên trên */
#post-list .col.post-item .box-blog-post>* {
    position: relative;
    z-index: 2;
}


#post-list .col.post-item .box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

#post-list .col.post-item .box-blog-post:hover .box-image img {
    transform: scale(1.06);
}



#post-list .col.post-item .box-text-inner {
    width: 100%;
}

/* title */
#post-list .col.post-item .post-title {
    margin: 0 0 12px;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -0.3px;
}

#post-list .col.post-item .post-title a {
    color: var(--fs-color-base);
    text-decoration: none;
    transition: .2s ease;
}

#post-list .col.post-item .post-title a:hover {
    color: var(--primary-color);
}

/* divider */
#post-list .col.post-item .is-divider {
    width: 58px;
    height: 4px;
    margin: 0 0 14px;
    background: linear-gradient(90deg, var(--primary-color), color-mix(in srgb, var(--primary-color), white 40%));
    border-radius: 999px;
}

/* excerpt */
#post-list .col.post-item .from_the_blog_excerpt {
    margin: 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.7;
}

.nav-pagination li a,
.nav-pagination li span {
    border: 1px solid color-mix(in srgb, var(--primary-color), white 40%) !important;
    padding-top: 2px;
    border-radius: 0 !important;
    margin: 0;
    color: var(--primary-color) !important;
    font-weight: normal !important;
}

@media only screen and (max-width: 768px) {

    /*Archive blog */
    #post-list .col.post-item .box-blog-post {
        flex-direction: column;
        border-radius: 16px;
    }

    #post-list .col.post-item .box-image,
    #post-list .col.post-item .box-text {
        width: 100%;
        min-width: 100%;
    }

    #post-list .col.post-item .box-text {
        padding: 18px;
    }

    #post-list .col.post-item .post-title {
        font-size: 19px;
    }

    #post-list .col.post-item .box-blog-post::before {
        width: 90px;
        height: 90px;
    }

    #post-list .col.post-item .box-blog-post::after {
        width: 105px;
        height: 105px;
        left: -30px;
    }
}