* {
   margin: 0;
   padding: 0;
   /* font: inherit; */
   box-sizing: border-box;
}

body {
   line-height: 1.5;
}

img,
picture,
video,
canvas,
svg {
   display: block;
   max-width: 100%;
}

input,
button,
textarea,
select {
   outline: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
   overflow-wrap: break-word;
}

input[type="number"] {
   -moz-appearance: textfield;
}

a {
   color: unset;
   text-decoration: none;
   background-color: transparent;
}

/* .pb-20 {
    padding-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.pt-15 {
    padding-top: 15px;
} */

.text-white {
   color: white;
}

.pr {
   position: relative;
}

.pa {
   position: absolute;
}

.df {
   display: flex;
}

.aic {
   align-items: center;
}

.jcsb {
   justify-content: space-between;
}

.jcc {
   justify-content: center;
}

.font-heading {
   font-family: var(--bold-font);
   color: white;
}

.fdc {
   flex-direction: column;
}

.fdr {
   flex-direction: row;
}

.db {
   display: block;
}

.td {
   text-decoration: none;
}

.fixed {
   position: fixed;
   top: 0;
   left: 0;
   animation: smoothScroll 1s forwards;
}

@keyframes smoothScroll {
   0% {
      transform: translateY(-40px);
   }

   100% {
      transform: translateY(0px);
   }
}


:root {
   --primary-font: "Be Vietnam Pro";
   --bold-font: "Be Vietnam Pro";
   --light-font: "Be Vietnam Pro";
   --primary-color: #146420;
   --secondary-color: #A34400;
   --button-color: #146420;
}

html {
   font-family: var(--primary-font);
   scroll-behavior: smooth;
}

body {
   font-family: var(--primary-font);
   position: relative;
   font-weight: 300;
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

@keyframes fadeOut {
   from {
      opacity: 1;
   }

   to {
      opacity: 0;
   }
}

.header .header-top {
   background-color: var(--secondary-color);
   color: white;
   font-family: var(--light-font);
   font-size: 16px;
   transition: all .3s linear;
   z-index: 20;
   width: 100%;

   -webkit-transition: all 0.5s ease;
   -moz-transition: position 10s;
   -ms-transition: position 10s;
   -o-transition: position 10s;
   transition: all 0.5s ease;
}

.header .header-top .list-social .item-social {
   margin-right: 12px;
   transition: all .3s;
}

.header .header-top .list-social .item-social:hover {
   color: #ca3737;
}

.header .header-top-wrap {
   padding-top: 10px;
   padding-bottom: 10px;
}

.header .search-bar input[type=text] {
   /* background: transparent; */
   color: #081b29;
   border: none;
   height: 35px;
   width: 100%;
   padding-right: 30px;
   padding-left: 12px;
   transition: all .25s;
   border-radius: 6px;
}

.header .search-bar {
   width: 100%;
   position: relative;
   z-index: 10;
}

.header .search-bar .search-btn {
   border: none;
   position: absolute;
   top: 10px;
   right: 16px;
   color: #081b29;
   background-color: transparent;
   transition: all .25s linear;
   cursor: pointer;
}

.header .search-bar .search-btn:hover {
   transform: scale(1.2) rotateZ(90deg);
   color: #444444;
}

/* .header .search-bar input[type="text"]:focus {
    background: #555555;
    color: #999999;
} */

.header .header-nav {
   background-color: #fff;
   color: #333;
   font-size: 17px;
   padding: 5px 0;
   box-shadow: 0px 2px 10px -3px rgb(0 0 0 / 65%);
}

.header .header-logo {
   display: block;
   width: 240px;
}

.header .nav #header-menu {
   display: flex;
   list-style: none;
}

.header .nav #header-menu>li {
   margin: 0 12px;
   position: relative;
}

.header .nav #header-menu li::after {
   content: "";
   width: 0%;
   position: absolute;
   left: 0;
   bottom: -5px;
   border-bottom: 3px solid #fff;
   transition: width .4s;
}

.header .nav #header-menu>li:hover::after {
   width: 100%;
}

.header .nav #header-menu li a {
   padding: 21px 0;
   text-transform: uppercase;
   transition: all .25s;
   font-weight: 400;
}

.header .nav #header-menu>li:hover .sub-menu {
   opacity: 1;
   visibility: visible;
}

.header .nav .sub-menu {
   position: absolute;
   width: 300px;
   height: auto;
   background-color: #fff;
   z-index: 2;
   color: #081b29;
   padding: 24px;
   border-radius: 12px;
   box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
   list-style: none;
   top: 150%;
   opacity: 0;
   transition: all .4s;
   visibility: hidden;
}

.header .nav .sub-menu>li+li {
   margin-top: 12px;
}

.header .nav .sub-menu>li {
   transition: margin-left .4s;
}

.header .nav .sub-menu>li:hover {
   margin-left: 6px;
}

.header .nav .sub-menu::after {
   content: "";
   position: absolute;
   border: 10px solid #fff;
   width: 20px;
   height: 20px;
   top: -20px;
   border-bottom-color: #fff;
   border-left-color: transparent;
   border-right-color: transparent;
   border-top: transparent;
}

.header .header-hotline a {
   margin: 0 12px;
}

/* menu mobile */
.mobile-btn {
   display: none;
}

.menu-mobile {
   display: none;
}

.slick-dots {
   display: flex;
   justify-content: center;
   margin: 0;
   list-style-type: none;
   position: absolute;
   bottom: 10px;
   left: 50%;
   transform: translate(-50%);
}

.slick-dots li {
   margin: 0 0.25rem;
}

.slick-dots button {
   display: block;
   width: 1rem;
   height: 1rem;
   padding: 0;
   border: none;
   border-radius: 100%;
   background-color: var(--secondary-color);
   text-indent: -9999px;
   cursor: pointer;
   opacity: .7;
}

.slick-dots li.slick-active button {
   background-color: #EBEBEB;
   opacity: 1;
}

/* ------ Main ------- */
.new-product {
   margin-top: 68px;
   margin-bottom: 48px;
}


.new-product .heading h2 span::after {
   border: 22px solid var(--secondary-color);
   border-top-color: transparent;
   border-left-color: transparent;
   left: -43px;
}

.heading h2 {
   text-align: center;
   font-size: 32px;
   color: var(--primary-color);
   position: relative;
   margin-bottom: 24px;
   font-family: var(--light-font);
   text-transform: uppercase;
}

.heading h2 span {
   color: #fff;
   background-color: var(--secondary-color);
   padding: 4px 18px 2px 8px;
   position: relative;
}

.heading h2 span::after {
   content: "";
   position: absolute;
   top: 0;
   right: -43px;
   height: 0;
   width: 0;
   border: 22px solid var(--secondary-color);
   border-top-color: transparent;
   border-right-color: transparent;
}

/* .new-product .heading h2::after {
    content: "";
    position: absolute;
    border-top: 1px solid #ebebeb;
    top: 50%;
    transform: translate(-50%);
    left: 0;
    width: 40%;
} */

.product-detail {
   border: 1px solid #ebebeb;
   width: 100%;
   height: 100%;
   padding: 12px;
   border-radius: 12px;
   transition: transform .5s, border .5s;
}

.product-detail:hover {
   transform: translateY(-10px);
   border-color: var(--primary-color);
}

.product-detail:hover .detail-btn {
   background-color: var(--primary-color);
}

/* .product-detail .detail-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 12px;
    z-index: -1;
} */

.product-detail img {
   height: 280px;
   width: 100%;
   object-fit: cover;
   border-radius: 12px;
}

.product-detail .name {
   padding-top: 12px;
   padding-bottom: 0px;
   text-align: center;
   font-size: 18px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   display: block;
   width: 100%;
}

.product-detail .category {
   font-size: 15px;
   font-family: var(--bold-font);
   text-align: center;
   margin-bottom: 12px;
   display: block;
   width: 100%;
   transition: all .25s linear;
}

.product-detail .category:hover {
   color: #888888;
}

.product-detail .detail-btn {
   width: 100%;
   padding: 6px 0;
   cursor: pointer;
   display: block;
   text-align: center;
   color: #fff;
   background-color: var(--button-color);
   border-radius: 12px;
   transition: all .5s;
   position: relative;
}

.categories {
   margin-bottom: 40px;
}

.categories .heading h2 {
   text-align: left;
   margin-bottom: 40px;
   margin-top: 60px;
}

.categories .heading h2 span {
   padding: 4px 8px 2px 18px;
}

.categories .heading h2 span::after {
   right: -43px;
   /*     border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: var(--secondary-color); */
   border: 22px solid var(--secondary-color);
   border-top-color: transparent;
   border-right-color: transparent;
}

.categories .category-detail {
   border: 1px solid #ebebeb;
   padding: 12px;
   transition: all .45s;
   border-radius: 12px;
   height: 100%;
}

.categories .category-detail:hover {
   box-shadow: 0px 0px 20px #0000;
   border-color: var(--primary-color);
   transform: translateY(-10px);
}

.categories .category-detail .category-img img {
   width: 100%;
   height: 240px;
   object-fit: cover;
   border-radius: 12px;
}

.categories .category-detail .category-name {
   font-size: 18px;
   margin-top: 12px;
   text-align: center;
   text-transform: capitalize;
   font-weight: bold;
}

.categories .category-detail .category-item-count {
   text-align: center;
   font-family: var(--light-font);
}

.process {
   background-color: #fffaf4;
   padding-top: 71px;
   padding-bottom: 81px;
}

.process .process-heading h1 {
   text-align: center;
   font-size: 36px;
   position: relative;
   margin-bottom: 90px;
}

.process .process-heading h1:before {
   content: "";
   position: absolute;
   bottom: -24px;
   left: 50%;
   transform: translate(-50%);
   border-bottom: 1px solid #d2d0d0;
   width: 50%;
}

.process .list-process {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.process .item-process {
   display: flex;
   justify-content: center;
   align-items: center;
}

.process .item-process .arrow-down {
   display: none;
}

.process .item-process .process-detail img {
   border: 2px dashed var(--primary-color);
   border-radius: 50%;
   padding: 4px;
}

.process .item-process:last-child i {
   /* display: none; */
   visibility: hidden;
}

.process .item-process .process-detail p {
   text-align: center;
   font-size: 20px;

}

.process .item-process i {
   font-size: 32px;
   color: var(--primary-color);
   border-color: var(--primary-color);
   margin-left: 20px;
   margin-bottom: 12px;
}


.benefits .benefits-body {
   background-repeat: no-repeat;
   background-size: cover;
   padding-bottom: 60px;
}

.benefits .benefit-header {
   text-align: center;
   padding-top: 60px;
   color: white;
   padding-bottom: 30px;
}

.benefits .benefit-header h2 {
   font-size: 28px;
   margin-bottom: 12px;
}

.benefits .benefit-header .motto,
.benefits .benefit-header .benefit-desc {
   font-size: 18px;
   font-family: var(--light-font);
}

.benefits .benefit-header img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* .benefit-body {
    margin-top: -165px;
} */

.benefits .benefit-detail {
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
   text-align: justify;
   height: 100%;
   padding: 12px 16px;
   font-size: 16px;
   color: #fff;
   border-radius: 12px;
}

.benefits .benefit-detail img {
   margin: 0 auto;
}

.benefits .benefit-detail .benefit-title {
   text-align: center;
   font-weight: bold;
   margin-top: 12px;
   margin-bottom: 6px;
}

.reviews {
   margin-bottom: 45px;
}

/* .reviews .heading h2 {
	margin-top: 230px;
} */

.reviews .reviews-wraper {
   margin-top: 40px;
}


.reviews .reviews-wraper .review-item {
   height: 100%;
   background-color: #fff;
   position: relative;
}

.reviews .reviews-wraper .review-text {
   padding: 25px 25px 32px 25px;
   background-color: transparent;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
   /* background-image: linear-gradient(100deg, var(--primary-color) 0%, var(--secondary-color) 100%); */
   border-radius: 15px;
   position: relative;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 18px;
   background-color: #ebebeb;
   height: 168px;
}

.reviews .reviews-wraper .review-quote-icon {
   position: absolute;
   bottom: 68px;
   right: 26px;
   font-size: 40px;
}

.reviews .reviews-wraper .review-quote-icon i {
   color: var(--secondary-color);
}

.reviews .reviews-wraper .reivewer {
   display: flex;
   align-items: center;
   margin-top: 16px;
}

.reviews .reviews-wraper .reivewer .reviewer-detail {
   margin-left: 12px;
}

.reviews .reviews-wraper .reviewer-img {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   object-fit: cover;
}

.reviews .reviews-wraper .reviewer-img img {
   object-fit: cover;
   width: 100%;
   height: 100%;
}

.reviews .reviews-wraper .reviewer-name {
   font-size: 18px;
}

.reviews .reviews-wraper .reviewer-customer {
   font-size: 16px;
   font-family: var(--light-font);
}

.reviews .slick-dots {
   position: unset;
   transform: none;
   margin-top: 36px;
}

.reviews .slick-dots button {
   background-color: var(--primary-color);
}

.reviews .slick-slide {
   margin: 0 28px;
}

/* about */
.about .heading h2 {
   text-align: right;
   margin-bottom: 40px;
}

.about .heading h2 span {
   padding: 4px 8px 2px 18px;
}

.about .heading h2 span::after {
   left: -43px;
   border-top-color: transparent;
   border-left-color: transparent;
   border-right-color: var(--secondary-color);
}

.about .about-body-header h3 {
   text-align: center;
   font-size: 20px;
   margin-bottom: 18px;
   font-weight: bold;
}

.about .about-content {
   margin-bottom: 60px;
   margin-bottom: 60px;
   border: 1px solid #ebebeb;
   border-radius: 12px;
   padding: 24px;
   background-color: #f8efea;
}

.about .about-content p {
   font-size: 18px;
}

.post-wrapper {
   margin-top: 40px;
   margin-bottom: 60px;
}

.posts .main-post .post-thumb {
   display: inline-block;

}

.posts .main-post .post-wrap {
   border-radius: 12px;
   overflow: hidden;
}

.posts .main-post .post-title {
   position: absolute;
   bottom: 24px;
   width: 100%;
   height: 25%;
   bottom: 0;
   left: 0;
   right: 0;
   cursor: pointer;
   background: linear-gradient(to top, var(--primary-color), transparent);
   font-size: 20px;
   transition: 0.5s;
   border-radius: 12px;
   flex-direction: column;
   padding: 0 24px;
   color: white;
   transition: all .5s;
}

.posts .list-post .post-item {
   border-radius: 12px;
   overflow: hidden;
   position: relative;
}

.posts .list-post .post-item img {
   height: 198px;
   width: 100%;
   object-fit: cover;
   border-radius: 12px;
}

.posts .list-post .post-item .post-thumb {
   display: inline-block;
   width: 100%;
}

.posts .list-post .post-item .post-title {
   position: absolute;
   background: linear-gradient(to top, var(--primary-color), transparent);
   bottom: 0;
   height: 50%;
   width: 100%;
   color: white;
   font-size: 16px;
   padding: 0 12px;
   transition: all .5s;
}

.posts .list-post .post-item:hover .post-title {
   height: 60%;
}

.posts .main-post:hover .post-title {
   height: 35%;
}

.footer {}

.footer .footer-content {
   border-bottom: 1px solid #ebebeb;
   padding-bottom: 30px;
}

.footer .footer-top {
   background-color: var(--secondary-color);
   padding-top: 60px;
   color: white;
}

.footer .footer-heading {
   font-size: 18px;
   margin-bottom: 32px;
   position: relative;
}

.footer-heading::after {
   content: '';
   position: absolute;
   bottom: -6px;
   left: 0;
   border-bottom: 2px solid #ebebeb;
   width: 50px;
}

.footer-top .about-us {
   padding-right: 80px;
}

.footer-top .company-info .item-info {
   font-size: 16px;
   margin-bottom: 12px;
}

.footer-top .company-info .item-info i {
   margin-top: 6px;
   margin-right: 8px;
}

.footer-top .list-category,
.footer .list-link {
   list-style: none;
   font-size: 16px;
}

.footer-top .list-category li,
.footer .list-link li {
   margin-bottom: 12px;
   transition: all .25s;
}

.footer-top .list-category li:hover,
.footer-top .list-link li:hover {
   margin-left: 6px;
}

.footer .footer-bottom {
   background-color: var(--primary-color);
}

.footer .footer-top .social {
   margin-top: 50px;
   text-align: center;
}

.footer .footer-top .social .list-social {
   margin-bottom: 14px;
}

.footer .footer-top .social .item-social {
   width: 48px;
   height: 48px;
   display: inline-block;
   border: 1px solid #ebebeb;
   border-radius: 50%;
   margin: 0 6px;
   transition: all .4s;
}

.footer .footer-top .social .item-social:hover {
   transform: scale(1.2);
}

.footer .footer-top .social .item-social i {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
}

.quatrang {
   list-style: none;
}

.quatrang li {
   background-color: #f1f1f1;
   margin: 0 8px;
   font-size: 18px;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   border: 1px solid #ebebeb;
}

.quatrang li.current {
   background-color: var(--primary-color);
   color: white;
}

.quatrang li span,
.quatrang li a {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   font-size: 18px;
}


/* -------- Sub Header --------*/

.header .header-bottom {
   padding: 54px 0;
   text-align: center;
   background-color: #f8efea;
}

.header .header-bottom .headline-heading {
   font-size: 32px;
   text-transform: capitalize;
   margin-bottom: 12px;
}

.header .header-bottom .breadcrum {
   display: flex;
}

.header .header-bottom .current-page {
   margin-left: 4px;
}

.products,
.product-infomation {
   margin-top: 60px;
   margin-bottom: 60px;
   position: relative;
}

.list-categories,
.sidebar {
   border-radius: 12px;
   padding: 24px;
   border: 1px solid #ebebeb;
}

.list-categories {
   position: sticky;
   top: 60px;
}

/* -------- Trang Danh Muc-------- */

.list-categories .heading,
.sidebar .heading {
   font-size: 16px;
   margin-bottom: 12px;
   text-align: center;
   position: relative;
}

.list-categories .heading::after,
.list-categories .heading::before,
.sidebar .heading::after,
.sidebar .heading::before {
   position: absolute;
   content: '';
   border-top: 1px solid #ebebeb;
   width: 45px;
   top: 55%;
   transform: translateY(-50%);
   right: 0;
}

.list-categories .heading::before,
.sidebar .heading::before {
   left: 0;
}

.list-categories .item-category {
   margin-bottom: 12px;
   margin-left: 12px;
   font-weight: bold;
   border-bottom: 1px solid #ebebeb;
   padding-bottom: 12px;
}

/* -------- Trang Chi Tiet San Pham-------- */

.-infomation .product-info {
   width: 100%;
   height: 100%;
}

.product-infomation .product-info .wp-post-image {
   width: 100%;
   object-fit: cover;
   height: 500px;
   margin-bottom: 20px;

}

.product-infomation .product-info .main-img .slick-slide {
   height: 475px;
   margin-bottom: 25px;
   object-fit: cover;
   border-radius: 18px;
}


.product-infomation .product-info .gallery .slick-slide {
   height: 101px;
   object-fit: cover;
   margin: 0 12px;
}

.product-infomation .product-info .gallery {
   display: flex;
   justify-content: space-between;
}

.product-infomation .product-info .gallery .gallery-img {
   width: 100px;
   height: 100 px;
   object-fit: cover;
   cursor: pointer;
   border-radius: 10px;
}

.product-infomation .details .detail-name {
   font-size: 22px;
   font-weight: bold;
   margin-bottom: 12px;
   position: relative;
}

.product-infomation .details .detail-name::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -7px;
   width: 64px;
   border-bottom: 3px solid #ebebeb;
}

.product-infomation .details .detail-category {
   font-size: 17px;
   font-weight: bold;
   color: #666666;
   transition: all .4s;
}

.product-infomation .details .detail-category:hover {
   color: #999999;
}

.product-infomation .phone-btn {
   margin-top: 19px;
   display: inline-block;
   background-color: #e45b5b;
   padding: 12px 24px;
   border-radius: 12px;
   color: white;
   font-size: 17px;
}

.product-infomation .phone-btn i {
   margin-right: 6px;
   transition: transform .4s;
}

.product-infomation .phone-btn:hover i {
   transform: rotateZ(45deg);
}

.product-infomation .product-desc,
.product-infomation .products-related {
   margin-top: 36px;
   border-top: 1px solid #ebebeb;
   padding-top: 12px;
}

.product-infomation .product-desc h3,
.product-infomation .products-related h3 {
   font-weight: bold;
   text-align: center;
}

.product-infomation .product-desc table {
   padding-top: 32px;
   width: 100%;
}

.product-infomation .product-desc th,
.product-infomation .product-desc td {
   padding: 8px 0;
}

.product-infomation .product-desc table tr {
   border-top: 1px solid #ebebeb;
   border-bottom: 1px solid #ebebeb;
}

.product-infomation .product-desc th {
   font-size: 16px;
   width: 170px;
}

.product-infomation .product-desc td {
   font-size: 14px;
   text-align: left;
}


.product-infomation .products-related h3 {
   margin-bottom: 30px;
}

.product-infomation .products-related .slick-initialized .slick-slide {
   margin: 0 18px;
}

.product-infomation .product-detail img {
   height: 224px;
}

.product-infomation .product-detail .name {
   height: 66px;
}

/* Trang chi tiết bài viết */
.post-detail {
   margin-top: 60px;
   margin-bottom: 60px;
}

.post-detail .post-detail-content {
   border: 1px solid #ebebeb;
   padding: 40px 25px 36px;
   border-radius: 12px;
}

.post-detail .post-detail-content h1 {
   text-align: center;
   font-weight: bold;
   font-size: 22px;
   margin-bottom: 16px;
}

.post-detail .post-detail-content .post-on {
   text-align: center;
   font-size: 16px;
   font-weight: bold;
   color: #666666;
   margin-bottom: 20px;
}

.post-detail .post-detail-content .post-on a {
   transition: all .25s;
}

.post-detail .post-detail-content .post-on a:hover {
   color: var(--primary-color);
}

.post-detail .post-detail-content p {
   margin-bottom: 18px;
}

.post-detail .post-detail-content img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.post-detail .related-post {
   margin-top: 45px;
}

.post-detail .related-post h4 {
   font-size: 20px;
   margin-bottom: 18px;
   font-weight: bold;
}

.post-detail .related-post .related-post-content-wrap img {
   width: 100%;
   height: 100%;
}

.single-product__icon-share__wrapper .single-product__icon-share+.single-product__icon-share {
   margin-left: 10px;
}

.share-on {
   margin-top: 34px;
}

.single-product__icon-share__wrapper span {
   padding-right: 10px;
}

.single-product__icon-share {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   color: white;
   margin: 0 6px;
}

.facebook-share {
   background-color: #4e71a8;
}

.twitter-share {
   background-color: #1cb7eb;
}

.linkedin-share {
   background-color: #1686b0;
}

.pinterest-share {
   background-color: #ca3737;
}

.sidebar {
   position: sticky;
   top: 40px;
}

.sidebar .item-most-viewed {
   width: 100%;
   height: 100%;
}

.sidebar .item-most-viewed+.item-most-viewed {
   margin-top: 18px;
   border-top: 1px solid #ebebeb;
   padding-top: 18px;
}

.sidebar .item-most-viewed img {
   width: 80px;
   height: 100%;
   object-fit: cover;
   margin-right: 16px;
   border-radius: 8px;
}

.sidebar .item-most-viewed .post-title {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   transition: color .25s linear;
   font-size: 15px;
   font-weight: bold;
}

.sidebar .item-most-viewed .post-title:hover {
   color: var(--primary-color);
}

.sidebar .item-most-viewed .post-date {
   font-size: 15px;
}

/* pagination button */

.pagin-btn {
   display: flex;
   align-items: center;
}

.pagin-icon {
   border: 1px solid #ebebeb;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 40px;
   height: 100%;
   /* background-color: #ca3737; */
   cursor: pointer;
   transition: all .5s;
}

.pagin-icon:hover {
   border-color: var(--primary-color);
}

.pagin-icon i {
   font-size: 40px;
   color: #d2d2d2;
   transition: all .5s;
}

.right .pagin-icon {
   margin-left: 18px;
   border-radius: 0 8px 8px 0;
}

.pagin-icon:hover i {
   color: var(--primary-color);
}

.left .pagin-icon {
   margin-right: 18px;
   border-radius: 8px 0 0 8px;
}

.name-btn {
   margin-bottom: 12px;
}

.right .pagin-detail {
   text-align: right;
}

.left .pagin-detail {
   text-align: left;
}

.name-btn {
   font-size: 16px;
   font-weight: bold;
   color: #d2d2d2;
   margin-bottom: 12px;
   transition: .4s;
}

.name-btn:hover {
   color: var(--primary-color);
}

.pagin-detail p {
   font-size: 16px;
   transition: .4s;
}

.pagin-detail p:hover {
   color: var(--primary-color);
}

/*-------- Trang tin tuc --------*/
.news {
   margin-top: 60px;
   margin-bottom: 60px;
}

.news .news-detail {
   border: 1px solid #ebebeb;
   padding: 12px;
   overflow: hidden;
   border-radius: 12px;
   transition: border .3s linear, transform .3s linear;
}

.news .news-detail:hover {
   border-color: var(--primary-color);
   transform: translateY(-10px);
}

.news .news-detail img {
   height: 240px;
   width: 100%;
   object-fit: cover;
   border-radius: 12px;

}



.news .post-title {
   font-size: 16px;
   font-weight: bold;
   /* padding: 12px 0; */
   text-align: left;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   transition: color .25s linear;
   /* position: relative; */
}

.news .post-title::after {
   position: absolute;
   /* content: ""; */
   width: 64px;
   border: 2px solid #ebebeb;
   bottom: 4px;
   left: 0;
}

.news .excerpt p {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
}

/* Trang giới thiệu */
.about-us-content {
   border: 1px solid #ebebeb;
   border-radius: 12px;
   margin: 60px 0;
   padding: 25px;
   background-color: #fffaf4;
}

.about h1,
.about h2,
.about h3,
.about h4,
.about h5,
.about h6 {
   margin-bottom: 10px;
}

.about p,
.about ul,
.about form {
   margin-bottom: 20px;
}

.about li {
   margin-left: 20px;
   margin-bottom: 10px;
}

/* page contact */
.contact-us {
   width: 100%;
   background-color: #fff;
   margin-top: 80px;
}

.contact-us .contact-map {
   height: 338px;
   width: 100%;
}

.contact-us .contact-map iframe {
   border: 0;
   width: 100%;
   height: 100%;
   border-radius: 20px;
}

.contact-us .contact-brand {
   border: 1px solid #ebebeb;
   border-radius: 20px;
   background-color: #f8efea;
   padding: 20px 24px;
   height: 100%;
}

.contact-us .contact-brand h3 {
   font-size: 25px;
   color: var(--secondary-color);
   border-bottom: 1px solid rgba(174, 174, 174, .2);
   padding-bottom: 6px;
   font-family: var(--bold-font);

}

.contact-us .contact-brand .contact-sub-title {
   margin-bottom: 16px;
   margin-top: 4px;
}

.contact-us .item-info+.item-info {
   margin-top: 10px;
   border-top: 1px solid rgba(174, 174, 174, .2);
   padding-top: 10px;
}

.contact-us .item-info span {
   width: 160px;
   font-weight: bold;
}

.contact-us .item-info p {
   /* padding-bottom: 8px;
    margin-top: 12px; */
   font-size: 16px;
   width: 100%;
}

.contact-us .contact-us-form {
   margin-top: 87px;
}

.contact-us .contact-us-form {
   width: 100%;
   height: 100%;
   margin-bottom: 48px;
}

.contact-us .contact-us-form .form-title {
   font-family: var(--bold-fond);
   color: var(--secondary-color);
   font-size: 25px;
   text-align: center;
   margin-bottom: 36px;
}

.contact-us .contact-us-form .form-contact input {
   width: 100%;
   font-size: 16px;
   padding: 10px 20px;
   margin-bottom: 8px;
   border-radius: 12px;
   border: 1px solid #ebebeb;
   transition: all .4s;
}

.contact-us .contact-us-form .form-contact input:focus,
.contact-us .contact-us-form .form-contact textarea:focus {
   border-color: var(--primary-color);
}

.contact-us .contact-us-form .form-contact textarea {
   width: 100%;
   border: 1px solid #e9e9e9;
   border-radius: 12px;
   min-height: 116px;
   /* margin-bottom: 40px; */
   padding: 10px 20px;
   transition: all .4s;
}

.contact-us .contact-us-form .form-contact .form-group.invalid input {
   border-color: var(--secondary-color);
}


.contact-us .form-contact .form-message.invalid {
   visibility: visible;
}

.contact-us .form-contact .form-message {
   display: inline-block;
   width: 100%;
   margin: 0 auto;
   font-size: 16px;
   text-align: center;
   color: #e00000d3;
   visibility: hidden;
   margin-bottom: 8px;
}


::placeholder {
   color: #d0cece;
   opacity: 1;
}

:-ms-input-placeholder {
   color: #eaeaea;
}

::-ms-input-placeholder {
   color: #eaeaea;
}

.contact-us .contact-us-form .form-contact button {
   margin: 0 auto;
   padding: 10px 84px;
   border-radius: 12px;
   border: none;
   outline: none;
   background-color: var(--button-color);
   color: white;
   cursor: pointer;
   font-size: 20px;
   transition: all .5s;
}

.contact-us .contact-us-form .form-contact button:hover img {
   transform: translateX(200px);
}

.contact-us .contact-us-form .form-contact .form-alert {
   text-align: center;
   color: #00a120;
   margin-bottom: 12px;
}

/* loader */
/* loading animation */

.lds-ellipsis {
   display: block;
   position: relative;
   width: 27px;
   height: 27px;
   left: 45%;
   transform: translate(-50%);
   top: -25px;
   visibility: hidden;
}

.lds-ellipsis div {
   position: absolute;
   top: 33px;
   width: 13px;
   height: 13px;
   border-radius: 50%;
   background: var(--button-color);
   animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
   left: 8px;
   animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
   left: 8px;
   animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
   left: 32px;
   animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
   left: 56px;
   animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
   0% {
      transform: scale(0);
   }

   100% {
      transform: scale(1);
   }
}

@keyframes lds-ellipsis3 {
   0% {
      transform: scale(1);
   }

   100% {
      transform: scale(0);
   }
}

@keyframes lds-ellipsis2 {
   0% {
      transform: translate(0, 0);
   }

   100% {
      transform: translate(24px, 0);
   }
}

.about-section {
   padding: 80px 0;
   overflow: hidden;
}

.sub-title {
   font-weight: 700;
   color: #333;
   letter-spacing: 1px;
   margin-bottom: 15px;
   display: block;
}

.main-title {
   color: var(--primary-color);
   font-weight: 300;
   font-size: 2.5rem;
   line-height: 1.2;
   margin-bottom: 25px;
}

.description {
   color: var(--text-gray);
   font-size: 0.95rem;
   line-height: 1.6;
   margin-bottom: 30px;
}

.btn-outline-custom {
   border: 1px solid var(--primary-color);
   color: var(--primary-color);
   padding: 10px 30px;
   border-radius: 50px;
   text-decoration: none;
   transition: all 0.3s ease;
   display: inline-block;
}

.btn-outline-custom:hover {
   background: var(--primary-color);
   color: #fff;
}

/* Right Side Panels */
.feature-box {
   position: relative;
   height: 550px;
   border-radius: 4px;
   overflow: hidden;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   padding-bottom: 40px;
   text-decoration: none;
   transition: transform 0.3s ease;
}

.feature-box:hover {
   transform: translateY(-5px);
}

.feature-box .bg-img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   z-index: 1;
   transition: scale 0.5s ease;
}

.feature-box:hover .bg-img {
   scale: 1.1;
}

.feature-box .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.7) 100%);
   z-index: 2;
}

.feature-content {
   position: relative;
   z-index: 3;
   text-align: center;
   color: #fff;
   padding: 0 15px;
}

.feature-content p {
   font-size: 13px;
}

.description ul {
   list-style-position: inside;
   padding-left: 10px;
}

.feature-content i {
   font-size: 2.5rem;
   margin-bottom: 15px;
   display: block;
}

.feature-content span {
   font-weight: 700;
   text-transform: uppercase;
   font-size: 1rem;
   letter-spacing: 1px;
   line-height: 1.4;
   display: block;
   margin-bottom: 10px;
}

/* Responsive fix */
@media (max-width: 991px) {
   .feature-box {
      height: 400px;
      margin-bottom: 15px;
   }
}

.newsletter-section {
   background-color: #ddf7e1;
   padding: 35px 0;
   font-family: 'Be Vietnam Pro', sans-serif;
}

/* Định dạng tên công ty */
.company-name {
   color: var(--primary-color);
   font-size: 1.35rem;
   font-weight: 700;
   line-height: 1.2;
}

.logo-wrapper img {
   width: 55px;
   height: auto;
}

/* Định dạng text "Đăng ký nhận bản tin" */
.newsletter-title {
   color: #333;
   font-size: 1rem;
   white-space: nowrap;
}

/* Tùy chỉnh Input Group */
.newsletter-form {
   width: 100%;
   max-width: 450px;
}

.newsletter-form .input-group {
   background-color: #fff;
   border-radius: 10px;
   overflow: hidden;
   padding: 5px;
   /* Tạo khoảng cách giữa viền và nội dung bên trong */
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.newsletter-form .form-control {
   border: none;
   padding: 12px 20px;
   font-size: 0.95rem;
   box-shadow: none !important;
}

.newsletter-form .form-control::placeholder {
   color: #999;
}

/* Nút đăng ký */
.btn-subscribe {
   background-color: var(--primary-color) !important;
   color: #fff !important;
   border: none;
   border-radius: 8px !important;
   /* Bo góc riêng cho nút theo ảnh */
   padding: 10px 30px;
   font-weight: 700;
   font-size: 0.9rem;
   transition: all 0.3s ease;
}

.btn-subscribe:hover {
   background-color: #c94a33 !important;
   transform: scale(1.02);
}

/* Mobile Responsive */
@media (max-width: 768px) {
   .company-name {
      font-size: 1.1rem;
   }

   .newsletter-form {
      max-width: 100%;
   }
}