@font-face {
    font-family: 'SVN-Poppins';
    src: url('../fonts/SVN-Poppins/SVN-Poppins Regular.otf');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Poppins';
    src: url('../fonts/SVN-Poppins/SVN-Poppins Italic.otf');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'SVN-Poppins';
    src: url('../fonts/SVN-Poppins/SVN-Poppins Medium.otf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Poppins';
    src: url('../fonts/SVN-Poppins/SVN-Poppins SemiBold.otf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Poppins';
    src: url('../fonts/SVN-Poppins/SVN-Poppins Bold.otf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Poppins';
    src: url('../fonts/SVN-Poppins/SVN-Poppins Bold Italic.otf');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'SVN-Poppins';
    src: url('../fonts/SVN-Poppins/SVN-Poppins ExtraBold.otf');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'VL MISSLEGATEES.OTF';
    src: url('../fonts/VL MISSLEGATEES.OTF');
    font-style: normal;
}

body {
    font-family: 'SVN-Poppins';
    background-color: #FFFBF2;
    font-size: 18px;
    color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a:hover{
    color: #bf8d35;
}

.content-content ul,
.content-content ol {
    list-style: inherit;
    padding-left: 20px;
}

.font-misslegate {
    font-family: 'VL MISSLEGATEES.OTF';
}


/*  */

.section-home .swiper-pagination {
    display: flex;
    flex-flow: column;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.section-home .swiper-pagination span {
    width: 10px;
    height: 10px;
    margin-block: 10px;
    display: inline-block;
    position: relative;
    background: #c38e2b;
}

span.swiper-pagination-bullet.swiper-pagination-bullet-active:after,
span.swiper-pagination-bullet:hover:after {
    opacity: 1!important;
    transition: 0.4s;
    transform: translate(-50%, -50%) scale(1)!important;
}

.section-home .swiper-pagination span:after {
    content: "";
    width: 20px;
    height: 20px;
    border: 1px solid #c38e2b;
    position: absolute;
    display: inline-block;
    border-radius: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    top: 50%;
    opacity: 0;
    transition: 0.4s;
}

.section-home {
    position: relative;
}

.scroll-bds::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
}

.scroll-bds::-webkit-scrollbar-thumb {
    background-color: #000;
    border: 2px solid #000;
}

.scroll-bds::-webkit-scrollbar {
    width: 5px;
    background-color: #F5F5F5;
}

.hover-img:hover img {
    transform: scale(1.1);
    transition: 0.4s;
}

.hover-img img {
    transition: 0.4s;
}

.hover-img {
    overflow: hidden;
}

@media (max-width: 1024px) and (min-width: 768px) {
    .md-hidden-5>*:nth-child(5) {
        display: none;
    }
}

@media (max-width: 991px) {
    .comment-home {
        width: 95%;
        overflow: hidden;
        margin-left: 5%;
    }
    .comment-home h4 {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 1024px) and (min-width: 992px) {
    .md-hidden-5>*:nth-child(5),
    .md-hidden-5>*:nth-child(4) {
        display: none;
    }
}

@media (max-width: 849px) and (min-width: 640px) {
    .tabBlock-content .grid>div:nth-child(3) {
        display: none;
    }
}

.pagination {
    display: flex;
    list-style: none;
    padding-left: 0;
    justify-content: center;
    margin: 30px 0;
    gap: 6px;
}

.page-item {
    display: inline-block;
}

.page-link {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    transition: all 0.25s ease-in-out;
    text-decoration: none;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
}

.page-link:hover {
    background-color: #f5f5f5;
    color: #000;
}

.page-item.active .page-link {
    background-color: #c38e2b;
    border-color: #c38e2b;
    color: #fff;
    font-weight: 600;
    pointer-events: none;
}

.page-item.disabled .page-link {
    color: #aaa;
    background-color: #f9f9f9;
    border-color: #ddd;
    cursor: not-allowed;
}

.content-content p,
.content-content li {
    margin-bottom: 15px;
}

.content-content {
    color: #222222;
}

@media (max-width: 767px) {
    .content-content img {
        max-width: 100%;
        height: auto!important;
    }
    .content-content h2 {
        font-size: 27px;
        line-height: 35px;
    }
}

.content-content blockquote::before {
    content: url("data:image/svg+xml;utf8,<svg width='50' height='43' viewBox='0 0 50 43' fill='none' xmlns='http://www.w3.org/2000/svg'><g opacity='0.15' clip-path='url(%23clip0_581_1530)'><path d='M21.7715 18.6362V37.2695H0.333984V18.37C0.333984 5.59286 14.1152 3.99572 14.1152 3.99572L15.9527 7.72239C15.9527 7.72239 9.82773 8.52096 8.60273 12.78C7.37773 15.9743 9.82774 18.6362 9.82774 18.6362H21.7715Z' fill='%23C38E2B'/><path d='M49.334 18.6364V37.2698H27.8965V18.3703C27.8965 5.59311 41.6777 3.99597 41.6777 3.99597L43.5152 7.72263C43.5152 7.72263 37.3902 8.52121 36.1652 12.7803C34.9402 15.9745 37.3902 18.6364 37.3902 18.6364H49.334Z' fill='%23C38E2B'/></g><defs><clipPath id='clip0_581_1530'><rect width='49' height='42.5905' fill='white' transform='matrix(-1 0 0 -1 49.334 42.5935)'/></clipPath></defs></svg>");
    display: inline-block;
    width: 50px;
    /* tương ứng kích thước SVG */
    height: 43px;
    margin-right: 10px;
    vertical-align: middle;
    position: absolute;
    top: -15px;
    left: -70px;
}

.content-content blockquote::after {
    content: url("data:image/svg+xml;utf8,<svg width='50' height='44' viewBox='0 0 50 44' fill='none' xmlns='http://www.w3.org/2000/svg'><g opacity='0.15' clip-path='url(%23clip0_581_1533)'><path d='M28.0625 24.5061V5.8728H49.5V24.7723C49.5 37.5495 35.7188 39.1466 35.7188 39.1466L33.8812 35.4199C33.8812 35.4199 40.0063 34.6214 41.2313 30.3623C42.4563 27.168 40.0062 24.5061 40.0062 24.5061H28.0625Z' fill='%23C38E2B'/><path d='M0.5 24.5061V5.8728H21.9375V24.7723C21.9375 37.5495 8.15625 39.1466 8.15625 39.1466L6.31875 35.4199C6.31875 35.4199 12.4438 34.6214 13.6688 30.3623C14.8938 27.168 12.4438 24.5061 12.4438 24.5061H0.5Z' fill='%23C38E2B'/></g><defs><clipPath id='clip0_581_1533'><rect width='49' height='42.5905' fill='white' transform='translate(0.5 0.549316)'/></clipPath></defs></svg>");
    display: inline-block;
    width: 50px;
    /* chiều rộng SVG */
    height: 44px;
    /* chiều cao SVG */
    margin-left: 10px;
    vertical-align: middle;
    position: absolute;
    right: 85px;
    bottom: 0px;
}

.content-content blockquote {
    position: relative;
    /* padding-inline: 65px; */
    margin-top: 25px;
    margin-bottom: 20px;
    text-indent: 85px;
}

.content-content h2 {
    font-size: 25px;
    line-height: 36px;
}

@media (min-width: 1366px) and (max-width: 1560px) {
    .th360-comment>div>div {
        -webkit-line-clamp: 2!important;
    }
}

.toggle-nav {
    position: unset;
    width: auto;
}

.hc-offcanvas-nav .nav-content>.nav-close:first-child a,
.hc-offcanvas-nav .nav-title+.nav-close a.has-label,
.hc-offcanvas-nav li.nav-close a,
.hc-offcanvas-nav .nav-back a {
    background: #fff;
    border-top: unset;
    border-bottom: unset;
}

.hc-offcanvas-nav .nav-container,
.hc-offcanvas-nav .nav-wrapper,
.hc-offcanvas-nav ul {
    background: #fff;
}

.hc-offcanvas-nav .nav-item-link,
.hc-offcanvas-nav li.nav-close a,
.hc-offcanvas-nav .nav-back a {
    padding: 14px 17px;
    font-size: 14px;
    color: #000;
    z-index: 1;
    background: rgba(0, 0, 0, 0);
    border-bottom: 1px solid #ddd;
    transition: background .1s ease;
}

.hc-offcanvas-nav .nav-content>.nav-close:first-child a,
.hc-offcanvas-nav .nav-title+.nav-close a.has-label,
.hc-offcanvas-nav li.nav-close a,
.hc-offcanvas-nav .nav-back a {
    background: #fff;
    border-top: unset;
    border-bottom: unset;
}

.hc-offcanvas-nav .nav-content>.nav-close a {
    font-size: 14px;
    color: #fff;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
    text-decoration: none;
    box-sizing: border-box;
}

.hc-offcanvas-nav .nav-close-button span::before,
.hc-offcanvas-nav .nav-close-button span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
}

.hc-offcanvas-nav .nav-wrapper>.nav-content>ul:first-of-type>li:first-child:not(.nav-back):not(.nav-close)>.nav-item-wrapper>.nav-item-link {
    border-top: 1px solid #ddd;
}

.hover-tamnhin .hover {
    transform: translateY(0);
    transition: 0.4s;
    width: 100%;
}

.hover-tamnhin>div {
    width: 100%;
    height: 100%;
    transition: 0.4s;
}

.hover-tamnhin:hover>div:first-child {
    transform: translateY(-100%);
    transition: 0.4s;
}

.hover-tamnhin:hover>.hover {
    transform: translateY(-100%);
}

@media (max-width: 1920px) and (min-width: 1500px) {
    #header-top {
        max-width: 1400px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    #header-top {
        padding-inline: 15px;
    }
    #listMenuBar>li:first-child {
        display: none;
    }
    #listMenuBar>li:not(:last-child) {
        border-bottom: 1px solid #ddd;
        padding-bottom: 13px;
        margin-bottom: 13px;
    }
    #listMenuBar {
        padding-bottom: 15px;
        margin-top: 4px;
    }
}

@media (max-width: 1024px) and (min-width: 768px) {
    #header-top {
        padding-inline: 20px;
    }
}

@media (max-width: 1366px) and (min-width: 1200px) {
    #header-top {
        max-width: 1170px;
        margin: 0 auto;
    }
}

@media (max-width: 2880px) and (min-width: 2000px) {
    .page-responsibility>div {
        max-width: 1920px;
        margin: 0 auto;
    }
}

.swiper-block-team .description,
.swiper-block-team .quote {
    opacity: 0;
    transition: 0.4s;
}

.swiper-block-team .swiper-slide-active .description,
.swiper-block-team .swiper-slide-active .quote {
    opacity: 1;
    transition: 0.4s;
}

.nav-search {
    position: absolute;
    top: 30px;
    right: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    transform: translate3d(0, 20px, 0);
    -webkit-transform: translate3d(0, 20px, 0);
    background-color: #fff;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border-top: 0;
    width: 342px;
    z-index: 11;
    padding: 15px 15px;
}

.nav-search.open {
    visibility: visible;
    opacity: 1;
    top: 27px;
}

.nav-search input[type=text] {
    width: 100%;
    height: 41px;
    border: 1px solid #ddd;
    padding-left: 10px;
    border-radius: 3px;
}

.nav-search input[type=submit] {
    height: 40px;
    background: #bf8d35;
    color: #fff;
    border: 1px solid #bf8d35;
    padding: 0 13px;
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 14px;
}

.loading-login:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><radialGradient id="a10" cx=".66" fx=".66" cy=".3125" fy=".3125" gradientTransform="scale(1.5)"><stop offset="0" stop-color="%23FF156D"></stop><stop offset=".3" stop-color="%23FF156D" stop-opacity=".9"></stop><stop offset=".6" stop-color="%23FF156D" stop-opacity=".6"></stop><stop offset=".8" stop-color="%23FF156D" stop-opacity=".3"></stop><stop offset="1" stop-color="%23FF156D" stop-opacity="0"></stop></radialGradient><circle transform-origin="center" fill="none" stroke="url(%23a10)" stroke-width="15" stroke-linecap="round" stroke-dasharray="200 1000" stroke-dashoffset="0" cx="100" cy="100" r="70"><animateTransform type="rotate" attributeName="transform" calcMode="spline" dur="2" values="360;0" keyTimes="0;1" keySplines="0 0 1 1" repeatCount="indefinite"></animateTransform></circle><circle transform-origin="center" fill="none" opacity=".2" stroke="%23FF156D" stroke-width="15" stroke-linecap="round" cx="100" cy="100" r="70"></circle></svg>');
    background-repeat: no-repeat;
    background-position: center;
}

.loading-login:before {
    content: "";
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: #00000061;
}

.content-content h1,
.content-content h2,
.content-content h3,
.content-content h4,
.content-content h5,
.content-content h6 {
    font-weight: 600;
    line-height: 1.3;
    margin: 1em 0 0.5em;
}


/* Responsive table: thêm scroll ngang */

.content-content table {
    display: block;
    /* overflow-x: auto; */
    /* white-space: nowrap; */
}


/* Responsive video iframe */

.content-content iframe {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    /* Giữ tỷ lệ */
    display: inline-block;
}


/* Khi ảnh nằm trong đoạn text được căn trái */

.content-content p[style*="text-align:left"] img {
    display: inline-block;
    margin: 0 auto 1em 0;
}

.content-content img {
    display: inline-block;
}


/* Khi ảnh nằm trong đoạn text được căn giữa */

.content-content p[style*="text-align:center"] img {
    display: inline-block;
    margin: 0 auto 1em auto;
}


/* Khi ảnh nằm trong đoạn text được căn phải */

.content-content p[style*="text-align:right"] img {
    display: inline-block;
    margin: 0 0 1em auto;
}

@media (max-width: 768px) {
    .content-content img {
        max-width: 100%;
        height: auto;
    }
}

.content-content table {
    width: 100%;
    border-collapse: collapse;
    /* gộp border thay vì tách */
    margin: 1em 0;
    /* font-size: 15px; */
}

.content-content th,
.content-content td {
    border: 1px solid #808080;
    /* giống border="1" */
    padding: 8px;
    /* thay cho cellpadding */
    text-align: left;
    vertical-align: middle;
}

.content-content th {
    background: #f5f5f5;
    font-weight: 600;
}


/* Nếu muốn giữ cellspacing (khoảng cách giữa ô) */

.content-content table.separate {
    border-collapse: separate;
    border-spacing: 5px;
    /* giống cellspacing="5" */
}


/* Responsive: cho phép scroll ngang trên màn hình nhỏ */

.content-content table {
    display: block;
    /* overflow-x: auto; */
    /* white-space: nowrap; */
}

textarea#postArea {
    height: 80px;
    padding-top: 25px;
}

.hover-menu:hover>.submenu {
    transform: rotateX(0deg);
    transition: 0.4s;
    transform-origin: top center;
}

.hover-menu .submenu {
    z-index: 999;
    position: absolute;
    background: #bf8d35;
    top: calc(100% + 18px);
    min-width: 250px;
    left: 0;
    padding: 15px 15px;
    transform: rotateX(90deg);
    transition: 0.4s;
    transform-origin: top center;
}

.hover-menu .submenu>li>a {
    padding-bottom: 12px;
    display: block;
    border-bottom: 1px solid;
    margin-bottom: 15px;
}

.hover-menu .submenu>li:last-child>a {
    margin-bottom: 0;
    border: unset;
    padding-bottom: 0;
}

.item-vanhoa:hover .box-image img {
    transform: scale(1.1);
    transition: 0.4s;
}

.item-vanhoa .box-image img {
    transition: 0.4s;
}

.hover-grid:hover>div:first-child {
    width: 50%;
    transition: 0.4s;
}

.hover-grid * {
    transition: 0.4s;
}

.hover-grid:hover>div:last-child {
    width: 50%;
    flex-direction: row!important;
    display: flex;
    flex-flow: column;
}

.hover-grid:hover>div:last-child .hover-img img {
    height: 100%!important;
}

.hover-grid:hover>div:last-child .hover-img {
    height: 100%;
}

/*#listMenuBar li:hover img{
    filter: brightness(0) invert(1);
}*/

#listMenuBar .hover-menu:hover > div a, #listMenuBar .hover-menu .submenu li:hover a{
    color: #fff09a;
}

.list-member .flex{
    margin: 0 -5px;
}

.list-member .flex .itemCus{
    padding: 0 5px;
    width: 100%;
    margin-top: 10px;
}

.list-member .flex .itemCus img{
    aspect-ratio: 158 / 175;
    object-fit: cover;
}

.main-modal .dd-title{
    line-height: 1.2;
}

.list-member .itemCus .title-item{
    background: linear-gradient(to bottom, transparent, #bf8d35b3);
    text-shadow: -1px 2px 0 black;
    padding: 10px 20px;
    font-size: 18px;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.list-member .itemCus a:hover .title-item{
    opacity: 1;
    visibility: visible;

}

.main-modal .bg-close-model{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.main-modal .box-comment li+ li{
    margin-top: 10px;
}

.main-modal .box-info svg{
    width: 24px;
    display: inline-block;
    margin-right: 5px;
    fill: #c38e2b;
}

.main-modal .box-comment svg{
    width: 20px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: sub;
    fill: #c38e2b;
}


.main-modal .box-customer .box-image img{
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.box-show-detailCb .grid{
    align-items: center;
}

.box-show-detailCb .box-image img{
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

.box-show-detailCb .item-title .dd-title{
    line-height: 1.2;
}

.box-show-detailCb ul li{
    color: #c38e2b;
}

.box-show-detailCb ul li img, .box-show-detailCb ul li svg{
    display: inline-block;
    width: 30px;
    vertical-align: middle;
}

.box-show-detailCb ul li svg{
    fill: #c38e2b;
}

.box-show-detailCb ul li + li{
    margin-top: 5px;
}

.box-show-detailCb ul li span{
    display: inline-block;
    margin-left: 5px;
}

.box-show-detailCb ul li.name span{
    font-size: 20px;
    font-weight: 700;
}

#scrollUp{
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 2px solid #c38e2b;
    border-radius: 50%;

}

#scrollUp svg{
    width: 20px;
    fill: #c38e2b;
}

.scrollTarget li a{
    transition: all 0.3;
}

.scrollTarget li:hover a{
    border-color: #c38e2b;
    background: #c38e2b;
    color: #fff;
}

.box-home-newHl a{
    color: #fff;
}

.img-hover-customer{
    transition: all 0.5s ease;
}

.img-hover-customer::before{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient( 0deg, transparent, transparent 30%, #bf8d3566);
    transform: rotate(-45deg);
    transition: all 0.5s ease;
    opacity: 0;
}

.img-hover-customer:hover{
    box-shadow: 0 0 20px #bf8d35cc;
    transform: scale(1.02);
}

.img-hover-customer:hover::before{
    opacity: 1;
    transform: rotate(-45deg) translateY(100%);
}

.main-modal .box-comment{
    overflow-y: auto;
    height: 300px;
}

.cus-cate-date1{
    gap: 12px;
}

.cus-cate-date1 li{
    max-width: 115px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    line-height: 24px;
}

/*.vanhoa .absolute.inline-flex.z-10{
    width: calc(100% - 44px);
}*/

.vanhoa .absolute.inline-flex.z-10 li{
    line-height: 1.2;
}

.vanhoa h4{
    line-height: 1.2;
}

@media(min-width: 768px){
    .list-member .flex .itemCus{
        width: calc(100% / 3);
    }

    .list-member .itemCus .title-item{
        padding: 5px;
    }

    .main-modal .box-customer .box-image{
        width: 100%;
    }

    .box-show-detailCb .box-image img{
        aspect-ratio: 4 / 3;
    }
}

@media(min-width: 1024px){

    .list-member .flex .itemCus{
        width: calc(100% / 7);
    }

    .list-member .flex .itemL1{
        width: calc(100% / 7 * 1.5);
    }

    .list-member .flex .itemL2{
        width: calc(100% / 7 * 2.25);
    }

    .list-member .itemCus .title-item{
        font-size: 14px;
    }

    .list-member .itemL1 .title-item, .list-member .itemL2 .title-item{
        font-size: 20px;
        padding: 10px 20px;
    }

    .box-show-detailCb .grid{
        gap: 40px;
    }

    .box-show-detailCb .box-image img{
        aspect-ratio: 3 / 2;
    }

}

@media(min-width: 1280px){
    .box-show-detailCb .item-title, .box-show-detailCb .itemAdd{
        padding-left: 30px;
    }

    .box-show-detailCb .box-image img{
        aspect-ratio: 2 / 1;
    }
}

@media(max-width: 1023px){
    .submenu{
        position: unset !important;
        transform: none !important;
        transition: unset !important;
        transform-origin: unset !important;
        display: none;
    }
}

.main-menu a{
    font-weight: 500;
}