/* archive */
 article.archive-article::after {
     content: "";
     width: 100%;
     height: 4px;
     position: relative;
     opacity: 0;
     background-color: #F6821F;
     transition: 0.3s all;
     display: block;
     

 }
 article.archive-article:hover::after{
     opacity: 1;
     transform: translateY(10px);
 }
 article.archive-article:hover .posts-thumb img {
     transform: scale(1.2);
 }

 article.archive-article .posts-thumb img {
     overflow: hidden;
     transform: scale(1);
     transition: 0.3s all;
 }

 /*  */
 .section-banner::after {
     content: "";
     background: linear-gradient(0deg, rgba(27, 125, 24, 0.60) 0%, rgba(27, 125, 24, 0.60) 100%);
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
 }

 .section-content {
     background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.60) 33.21%, rgba(255, 255, 255, 0.60) 70.08%, #FFF 100%), url('https://bess.hvg.edu.vn/wp-content/uploads/2025/11/d38af44dc983d0d2e4c594452ff0bffdf9197085-scaled.jpg') lightgray 50% / cover no-repeat;
     background-position: center;
     background-size: cover;
     padding: 60px 0;
 }

 .menu-du-an {
     margin-top: 40px;
 }

 .nav-du-an {
     list-style: none;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 24px;
 }

 .nav-du-an li a {
     border-radius: 58px;
     border: 1px solid rgba(0, 89, 169, 0.08);
     background: #FFF;
     /* background: linear-gradient(180deg, #FFA151 0%, #F6821F 100%); */
     /* border: 1px solid rgba(255, 255, 255, 0.28); */
     color: var(--text-color-2);
     box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12);
     padding: 20px 24px;
     display: flex;
     justify-content: center;
     border-radius: 40px;
     font-weight: 600;
 }

 .nav-du-an li a:hover,
 .nav-du-an li.current-menu-item a {
     border-radius: 40px;
     border: 1px solid rgba(255, 255, 255, 0.28);
     background: linear-gradient(180deg, #FFA151 0%, #F6821F 100%);
     box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12);
     color: #fff;
 }

 .list-du-an {
     margin-top: 40px;
 }

 .du-an-item {
     padding: 0 0 12px 12px;
     position: relative;
     overflow: hidden;

 }

 .du-an-item::after,
 .du-an-item::before,
 .du-an-item .entry-thumb::after,
 .du-an-item .entry-thumb::before {
     content: "";
     position: absolute;
 }

 .du-an-item::after {

     background-image: url(./images/du-an-after.svg);
     width: 61px;
     height: 71px;
     top: 8px;
     right: 9px;
     z-index: 4;
 }

 .du-an-item::before {
     width: 160px;
     height: 160px;
     border: solid 3px var(--color-1);
     bottom: 0;
     left: 0;
     z-index: 1;
 }

 .du-an-item:hover::before {
     background-color: var(--color-1);
 }

 .du-an-item:hover article {
     position: relative;
 }

 .du-an-item:hover article::after {
     content: "";
     background: linear-gradient(0deg, rgba(7, 25, 2, 0.40) 0%, rgba(7, 25, 2, 0.40) 100%);
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     right: 0;
     padding-left: 12px;
     padding-bottom: 12px;
     z-index: 3;
     transition: 0.3s all;
 }

 .du-an-item .entry-thumb {
     position: relative;

 }

 .du-an-item .entry-thumb img {
     object-fit: cover;
     aspect-ratio: 1/1;
     position: relative;
     z-index: 2;
     transition: 0.3s all;
 }

 .du-an-item:hover .entry-thumb img {
     transform: scale(1.2);
 }

 .du-an-item .entry-content {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translate(-50%, 0);
     z-index: 2;
     width: 90%;
     padding-left: 12px;
     display: flex;
     flex-direction: column;
     align-content: center;
     align-items: center;
     opacity: 0;
     gap: 24px;
     z-index: 5;
     transition: 0.3s all;
     /* height: 100%; */
     justify-content: center;
 }


 .du-an-item:hover .entry-content {
     opacity: 1;
 }

 .du-an-item .entry-content a::after {
     content: "";
     width: 100%;
     height: 200%;
     position: absolute;
     top: -100%;
     left: 0;
     z-index: 5;
 }

 .cs-pagination .nav-links {
     display: flex;
 }

 .cs-pagination .page-numbers {
     padding: 12px;
     width: 40px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     color: #B5B5B5;
     font-weight: 500;
 }

 .cs-pagination .prev.page-numbers,
 .cs-pagination .next.page-numbers {
     color: var(--color-1);
     padding: 12px 0;
     width: auto;
     gap: 8px;

 }

 .cs-pagination .prev.page-numbers {
     margin-right: 40px;
 }

 .cs-pagination .next.page-numbers {
     margin-left: 40px;
 }

 .cs-pagination .page-numbers.current,
 .cs-pagination .page-numbers:hover {
     background-color: var(--color-1);
     color: #fff;
 }

 .cs-pagination .prev.page-numbers:hover,
 .cs-pagination .next.page-numbers:hover {
     background-color: transparent;
     color: var(--color-1);
 }

 .cs-pagination .prev.page-numbers svg path {
     stroke: var(--color-1);
 }

 /* Single */
 .single-du-an .section-banner {
     height: 500px;
     background-repeat: no-repeat;
     background-size: cover;
 }

 .single-du-an .page-header {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 5;

 }

 @media screen and (min-width:1200px) {
     .single-du-an .section-banner {
         height: 600px;
     }
 }


 .section-project-gallery {
     background-color: var(--color-2);
     padding: 60px 0;
 }

 .section-project-gallery .box-right {
     display: flex;
     flex-direction: column;
     height: 100%;
     justify-content: center;
 }

 @media screen and (min-width:1200px) {
     .section-project-gallery .box-right {
         padding-left: 60px;
     }
 }

 .project_gallery .mySwiper2 .gallery-image {
     aspect-ratio: 632 / 400;
     object-fit: cover;
 }

 .project_gallery .mySwiper2 .gallery-image img {
     width: 100%;
 }


 @media screen and (min-width:1200px) {
     .project_gallery .mySwiper {
         padding: 10px 52px 0 52px;

     }
 }

 .project_gallery .mySwiper img {
     max-width: 120px;
     height: 120px;

 }

 .project_gallery .swiper-button-next {
     right: 0;
 }

 .project_gallery .swiper-button-prev {
     left: 0;
 }

 .project_gallery .swiper-button-next,
 .project_gallery .swiper-button-prev,
 .related-projects .swiper-button-next,
 .related-projects .swiper-button-prev {
     bottom: 42px;
     top: auto;
     background-color: rgba(210, 210, 210, 0.32);
     background-image: none;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: 50px;
 }

 .project_gallery .swiper-button-next::after,
 .related-projects .swiper-button-next::after {
     content: "\f105";
 }

 .project_gallery .swiper-button-prev::after,
 .related-projects .swiper-button-prev::after {
     content: "\f104";
 }

 .project_gallery .swiper-button-next::after,
 .project_gallery .swiper-button-prev::after,
 .related-projects .swiper-button-next::after,
 .related-projects .swiper-button-prev::after {

     font-family: var(--fa-family);
     font-weight: 900;
     font-size: 20px;
     color: #fff;
 }

 .project_gallery .mySwiper .swiper-slide img {
     border: solid 1px rgba(38, 38, 38, 0.06);
 }

 .project_gallery .mySwiper .swiper-slide.swiper-slide-thumb-active img {
     border: solid 1px var(--color-1);
 }

 .box-meta .list-meta {
     display: grid;
     gap: 10px;
     grid-template-columns: repeat(2, 1fr);
     margin-bottom: 20px;
 }

 @media screen and (max-width:768px) {
     .box-meta .list-meta {
         grid-template-columns: repeat(1, 1fr);
     }
 }

 .section-project-gallery .desc p {
     color: #fff;
 }

 .section-project-details .box-text {
     height: 100%;
     display: flex;
     flex-direction: column;
     padding: 10% 10%;
 }

 @media screen and (max-width:990px) {
     .section-project-details .row {
         flex-direction: column-reverse;
     }
 }

 .related-projects {
     padding: 60px 0;
 }

 .related-projects .swiper-button-next,
 .related-projects .swiper-button-prev {
     bottom: auto;
     top: 50%;
     border: solid 1px rgba(246, 130, 31, 0.6);
     background-color: #fff;
 }

 .related-projects .swiper-button-next::after,
 .related-projects .swiper-button-prev::after {
     color: var(--color-3);
 }

 @media screen and (min-width:1200px) {
     .related-projects .swiper-button-next {
         right: -50px;
     }

     .related-projects .swiper-button-prev {
         left: -50px;
     }
 }