/*
Theme Name: DLK
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
@font-face {
  font-family: "Flaticon";
  src: url("fonts/flaticon_sakira.eot");
  src: url("fonts/flaticon_sakira.eot?#iefix") format("embedded-opentype"),
       url("fonts/flaticon_sakira.woff2") format("woff2"),
       url("fonts/flaticon_sakira.woff") format("woff"),
       url("fonts/flaticon_sakira.ttf") format("truetype"),
       url("fonts/flaticon_sakira.svg#flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon";
    src: url("fonts/flaticon_sakira.svg#Flaticon") format("svg");
  }
}

/* Product thumbnail scroll detail styles */
.product-thumbnail-scroll-detail {
    position: relative;
    width: 100%;
    height: 800px; /* Chiều cao cố định để tạo khung vuông */
    overflow: hidden;
    background-color: #f8f8f8;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.product-thumbnail-scroll-detail:hover {
    transform: translateY(-5px);
}

/* Ảnh trong product-thumbnail-scroll-detail */
.product-thumbnail-scroll-detail img {
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: top;
    /* Tốc độ nhanh khi hết hover (lăn lên) */
    transition: transform 2s ease-out !important;
    transform: translateY(0);
    display: block;
}

/* Khi hover, ảnh scroll xuống chậm */
.product-thumbnail-scroll-detail:hover img {
    /* Tốc độ chậm khi hover (lăn xuống) */
    transition: transform 8s ease-in-out !important;
    transform: translateY(calc(-100% + 300px));
}

/* Product thumbnail detail bình thường */
.product-thumbnail-detail {
    position: relative;
    width: 100%;
    background-color: #f8f8f8;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.product-thumbnail-detail:hover {
    transform: translateY(-5px);
}

.product-thumbnail-detail img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Product box styles */
        .product-small {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .product-small:hover {
            transform: translateY(-5px);
        }

        /* Box image - quan trọng nhất */
        .box-image {
            position: relative;
            width: 100%;
            height: 300px; /* Chiều cao cố định để tạo khung vuông */
            overflow: hidden;
            background-color: #f8f8f8;
        }

        .image-fade_in_back {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .image-fade_in_back a {
            display: block;
            width: 100%;
            height: 100%;
        }

        /* Hiệu ứng scroll ảnh */
        .box-image img {
            width: 100%;
            height: auto;
            min-height: 100%;
            object-fit: cover;
            object-position: top;
            /* Tốc độ nhanh khi hết hover (lăn lên) */
            transition: transform 2s ease-out !important;
            transform: translateY(0);
        }

        /* Khi hover, ảnh scroll xuống chậm */
        .box-image:hover img {
            /* Tốc độ chậm khi hover (lăn xuống) */
            transition: transform 8s ease-in-out !important;
            transform: translateY(calc(-100% + 300px));
        }


.section-danh-gia .flickity-prev-next-button{
    opacity: 1 !important;
        top: unset !important;
        width: 57px;
    height: 57px;
        bottom: -47px;
}
.section-danh-gia .flickity-prev-next-button svg path{
       fill: black !important;
}
.section-danh-gia .flickity-prev-next-button.previous{
left: 44%;
}
.section-danh-gia .flickity-prev-next-button.next{
left: 52%;
}
.form-lien-he .wpcf7-submit{
    margin-right: 0px;
    width: 100%;
    background: #000000;
    border: 3px solid #FD6759;
}
.form-lien-he input{
    min-height: 3.8em;
}
.section-danh-gia .flickity-prev-next-button svg{
        transition: unset;
    padding: 18px;
        fill: black;
    border: unset;
    background: #e7e7e7;
    border-radius: 10px;
    font-size: 14px;
}
.div-lien-he-header span{
    padding-right: 10px;
    font-size: 15px;
}
.div-lien-he-header span i{
    font-size: 18px;
    color: #FF8B46;
}
.pxl-icon-active i.flaticon:not(.text-gradient) {
    display: inline-flex;
}

[class^="flaticon-"]:not(.text-gradient):not(.text-white), [class*=" flaticon-"]:not(.text-gradient):not(.text-white) {
    display: inline-flex;
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
  font-family: Flaticon;
  font-size: inherit;
  font-style: normal;
  font-weight: normal;
}

.flaticon-pin:before {
    content: "\f101";
}
.flaticon-telephone:before {
    content: "\f102";
}
.flaticon-email:before {
    content: "\f103";
}
.flaticon-group:before {
    content: "\f104";
}
.flaticon-gift:before {
    content: "\f105";
}
.flaticon-cloud-light:before {
    content: "\f106";
}
.flaticon-security:before {
    content: "\f107";
}
.flaticon-down-right-arrow:before {
    content: "\f108";
}
.flaticon-quote:before {
    content: "\f109";
}
.flaticon-arrow-multi:before {
    content: "\f10a";
}
.flaticon-arrow-right:before {
    content: "\f10b";
}
.flaticon-search:before {
    content: "\f10c";
}
.flaticon-avatar:before {
    content: "\f10d";
}
.flaticon-calendar:before {
    content: "\f10e";
}
.flaticon-chat:before {
    content: "\f10f";
}
.flaticon-right-arrow1:before {
    content: "\f110";
}
.flaticon-right-arrow2:before {
    content: "\f111";
}
.flaticon-verify:before {
    content: "\f112";
}
.flaticon-telephone-1:before {
    content: "\f113";
}
.flaticon-star:before {
    content: "\f114";
}
.flaticon-right-arrow:before {
    content: "\f115";
}
.flaticon-location:before {
    content: "\f116";
}
.flaticon-calendar-1:before {
    content: "\f117";
}
.flaticon-suitcase:before {
    content: "\f118";
}
.flaticon-user-group:before {
    content: "\f119";
}
.flaticon-suitcase-1:before {
    content: "\f11a";
}
.flaticon-user:before {
    content: "\f11b";
}
.flaticon-clock:before {
    content: "\f11c";
}
.flaticon-statistics:before {
    content: "\f11d";
}
.flaticon-check-mark:before {
    content: "\f11e";
}
.flaticon-plus:before {
    content: "\f11f";
}
.flaticon-star-1:before {
    content: "\f120";
}
.flaticon-quote-1:before {
    content: "\f121";
}
.flaticon-web-design:before {
    content: "\f122";
}
.flaticon-illustration:before {
    content: "\f123";
}
.flaticon-settings:before {
    content: "\f124";
}
.flaticon-laptop:before {
    content: "\f125";
}
.flaticon-smartphone:before {
    content: "\f126";
}
.flaticon-seo:before {
    content: "\f127";
}
.flaticon-mobile-app:before {
    content: "\f128";
}
.flaticon-development:before {
    content: "\f129";
}
.flaticon-mobile-development:before {
    content: "\f12a";
}
.flaticon-megaphone:before {
    content: "\f12b";
}
.flaticon-web-design-1:before {
    content: "\f12c";
}
.flaticon-web-design-2:before {
    content: "\f12d";
}
.flaticon-comment:before {
    content: "\f12e";
}
.flaticon-list:before {
    content: "\f12f";
}
.flaticon-diamond:before {
    content: "\f130";
}
.flaticon-edit:before {
    content: "\f131";
}
.flaticon-share:before {
    content: "\f132";
}
.flaticon-link:before {
    content: "\f133";
}
.flaticon-right-arrow-3:before {
    content: "\f134";
}
.flaticon-global-marketing:before {
    content: "\f135";
}
.flaticon-target:before {
    content: "\f136";
}
.flaticon-content-marketing:before {
    content: "\f137";
}
.flaticon-ads-marketing:before {
    content: "\f138";
}
.flaticon-location-pin:before {
    content: "\f139";
}
.flaticon-phone-call:before {
    content: "\f13a";
}
.flaticon-right-up:before {
    content: "\f13b";
}
.flaticon-presentation:before {
    content: "\f13c";
}
.flaticon-pie-chart:before {
    content: "\f13d";
}
.flaticon-market-analysis:before {
    content: "\f13e";
}
.flaticon-diagram:before {
    content: "\f13f";
}
.flaticon-strategy:before {
    content: "\f140";
}
.flaticon-refund:before {
    content: "\f141";
}
.flaticon-trust:before {
    content: "\f142";
}
.flaticon-arrow-right-1:before {
    content: "\f143";
}
.flaticon-next:before {
    content: "\f144";
}
.flaticon-protected:before {
    content: "\f145";
}
.flaticon-down-right-arrow-1:before {
    content: "\f146";
}
.flaticon-rating:before {
    content: "\f147";
}
.flaticon-play:before {
    content: "\f148";
}
.flaticon-idea:before {
    content: "\f149";
}
.flaticon-brand-identity:before {
    content: "\f14a";
}
.flaticon-right-arrow-1:before {
    content: "\f14b";
}
.flaticon-target-1:before {
    content: "\f14c";
}
.flaticon-marketing:before {
    content: "\f14d";
}
.flaticon-global-marketing-1:before {
    content: "\f14e";
}
.flaticon-curve:before {
    content: "\f14f";
}
.flaticon-clipboard:before {
    content: "\f150";
}
.flaticon-edit-1:before {
    content: "\f151";
}
.flaticon-check:before {
    content: "\f152";
}
.flaticon-shape-1:before {
    content: "\f153";
}
.flaticon-straight-quotes:before {
    content: "\f154";
}
.portfolio-box:before {
    content: "Xem thêm";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: #FF9A3E;
    border-radius: 99px;
    font-size: 18px;
    font-weight: 500;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 10;
    animation: floating 3s ease-in-out infinite;
    box-shadow: 0 0 0 3px #FF9A3E, 0 0 0 5px #FF5266;
}

.portfolio-box:hover:before {
    opacity: 1;
}

@keyframes floating {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0px);
    }
    50% {
        transform: translate(-50%, -50%) translateY(-10px);
    }
}
.div-thumbnail{
    padding-bottom: 20px;
}
.section-du-an .portfolio-element-wrapper .row-isotope .col:nth-child(1) .box-image .image-cover{
    padding-top: 75% !important;
}
.section-du-an .portfolio-element-wrapper .row-isotope .col:nth-child(6) .box-image .image-cover{
    padding-top: 60% !important;
}
.section-du-an .portfolio-element-wrapper .row-isotope .col:nth-child(5) .box-image .image-cover{
    padding-top: 85% !important;
}
.div-bang-gia.div-1 > .col-inner{
    padding: 24px;
        background-color: transparent;
    background-image: linear-gradient(180deg, #00DAFF 0%, #004EFF 100%);
    border-radius: 10px;
    box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.15);
}
.has-shadow>.col>.col-inner {
    background-color: #fff;
    border-radius: 20px;
}
.div-bang-gia.div-2 > .col-inner{ 
    padding: 24px;
background-color: transparent;
    background-image: linear-gradient(180deg, #FF9A3E 0%, #FF5266 100%);
    border-radius: 10px;
    box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.15);
}
.div-bang-gia.div-3 > .col-inner{
    padding: 24px;
background-color: transparent;
    background-image: linear-gradient(180deg, #FF00CC 0%, #8400FF 100%);
    border-radius: 10px;
    box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.15);
}
.div-bang-gia ul{

list-style: none;
}
.div-bang-gia ul li:before{
    content: "\f00c";
    padding-right: 5px;
    font-family: "Font Awesome 6 Pro";

}
.div-gia span{
    font-size: 40px;
    font-weight: bold;
}
.div-gia{
border-bottom: 1px solid #cdcdcd80;
    padding-bottom: 10px;
    margin-bottom: 18px !important;
}
.div-bang-gia a.button{
    padding: 7px;
    display: block;
    width: 100%;
}
.div-bang-gia ul li{
    text-align: left;
}
.div-bang-gia ,.div-bang-gia p,.div-bang-gia h3,.div-bang-gia ul li{
    color: white;
}

.div-bang-gia.div-1 .uc_ispt_container_icon{
        color: #00DAFF;
}
.div-bang-gia.div-2 .uc_ispt_container_icon{
        color:#FF9A3E;
}
.div-bang-gia.div-3 .uc_ispt_container_icon{
        color: #FF00CC;
}

.div-bang-gia .uc_ispt_container_icon {
        width: 80px;
    height: 80px;
    border-radius: 100px;
    margin-top: 0px;
    background-color: #f4f4f4;

    font-size: 40px;
    display: flex
;

    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1em;
    overflow: hidden;
}
.particles-js-container{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.div-anh-video::after{
content: '';
    position: absolute;
    bottom: -50%;
    left: -48px;
    width: 100%;
    height: 100%;
    background-image: url(images/h10-shape2.png);
    background-size: auto;
    /* background-position: center; */
    background-repeat: no-repeat;
    z-index: -1;
}
.div-anh-video .overlay{
    background: transparent !important
}
.post-sidebar .widget,#shop-sidebar .widget{
        background: #F5F6F6;
    -webkit-box-shadow: 0 10px 31px 10px rgba(12, 34, 113, 0.07);
    -khtml-box-shadow: 0 10px 31px 10px rgba(12, 34, 113, 0.07);
    -moz-box-shadow: 0 10px 31px 10px rgba(12, 34, 113, 0.07);
    -ms-box-shadow: 0 10px 31px 10px rgba(12, 34, 113, 0.07);
    -o-box-shadow: 0 10px 31px 10px rgba(12, 34, 113, 0.07);
box-shadow: 0 1px 12px -2px rgb(12 34 113 / 18%);    padding: 20px;

    border-radius: 20px;
}
.ul-lien-he li{
    margin-left: 0px !important;
    list-style: none;
}
.ul-lien-he li i{
    padding-right: 5px;
}
.footer-section ul li{
    border-top: unset !important;
}
.footer-section iframe{
    border: 2px solid #E63A27 !important;
    border-radius: 10px;
}
.row-form .wpcf7-submit{
    text-align: center;
    width: 100%;
    margin-right: 0px;
border-radius: 99px;
background:#0C2271 ;
}
.box-dien-thoai img {
    margin-top: -15px !important;
    -webkit-animation: tada 1500ms ease-out infinite;
    -khtml-animation: tada 1500ms ease-out infinite;
    -moz-animation: tada 1500ms ease-out infinite;
    -ms-animation: tada 1500ms ease-out infinite;
    -o-animation: tada 1500ms ease-out infinite;
    animation: tada 1500ms ease-out infinite;


}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}
.footer-section{
    padding-top: 350px !important;
        background-color: #FFFFFF;
    background-image: url(images/h10-bg-footer.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
}

.footer-section .icon-box h3{
    margin-bottom: 0px;
}
.footer-section .icon-box{
    align-items: center;
}
.footer-section  .widget_nav_menu{
    padding-left: 0px;
    padding-right: 0px;
}
.footer-section  .widget_nav_menu li a:before{
        padding-right: 5px;
content:"\f105";
 font-family: fl-icons;
}
.footer-section h3{
        font-size: 25px;
    font-weight: 500;
}
.wpcf7-spinner{
    display: none;
}
.absolute-footer .copyright-footer{
    border-top: 1px solid #cdcdcd;
    padding-top: 20px;
}
.row-form-ngoai form{
    margin-bottom: 0px;
}
.row-form-ngoai{
        border: 2px dashed #cdcdcd;
    padding: 24px;
    margin-left: 10px;
    margin-right: 10px;

    width: calc(100% - 20px);
}
.row-form input{
    min-height: 46px;
    border-radius: 99px;
}
.row-form .col{
    padding-bottom: 0px;
}
.flaticon{
        font-family: Flaticon;
    font-size: inherit;
    font-style: normal;
    font-weight: normal;
}
.flaticon-icon-42:before {
  content: "\e929";
}
.flaticon-icon-43:before {
  content: "\e92a";
}
.flaticon-icon-33:before {
  content: "\e920";
}
.flaticon-icon-34:before {
  content: "\e921";
}
.flaticon-icon-36:before {
  content: "\e923";
}
.flaticon-icon-37:before {
  content: "\e924";
}
.flaticon-icon-38:before {
  content: "\e925";
}
.flaticon-icon-39:before {
  content: "\e926";
}
.flaticon-icon-40:before {
  content: "\e927";
}
.flaticon-icon-22:before {
  content: "\e915";
}
.flaticon-icon-1:before {
  content: "\e900";
}
.flaticon-icon-2:before {
  content: "\e901";
}
.flaticon-icon-3:before {
  content: "\e902";
}
.flaticon-icon-4:before {
  content: "\e903";
}
.flaticon-icon-5:before {
  content: "\e904";
}
.flaticon-icon-6:before {
  content: "\e905";
}
.flaticon-icon-7:before {
  content: "\e906";
}
.flaticon-icon-8:before {
  content: "\e907";
}
.flaticon-icon-10:before {
  content: "\e909";
}
.flaticon-icon-11:before {
  content: "\e90a";
}
.flaticon-icon-12:before {
  content: "\e90b";
}
.flaticon-icon-13:before {
  content: "\e90c";
}
.flaticon-icon-14:before {
  content: "\e90d";
}
.flaticon-icon-15:before {
  content: "\e90e";
}
.flaticon-icon-16:before {
  content: "\e90f";
}
.flaticon-icon-18:before {
  content: "\e911";
}
.flaticon-icon-20:before {
  content: "\e913";
}
.flaticon-icon-21:before {
  content: "\e914";
}
.flaticon-icon-23:before {
  content: "\e916";
}
.flaticon-icon-24:before {
  content: "\e917";
}
.flaticon-icon-25:before {
  content: "\e918";
}
.flaticon-icon-27:before {
  content: "\e91a";
}
.flaticon-icon-28:before {
  content: "\e91b";
}
.flaticon-icon-30:before {
  content: "\e91d";
}
.flaticon-icon-31:before {
  content: "\e91e";
}
.flaticon-icon-32:before {
  content: "\e91f";
}
.is-divider{
background-color:var(--primary-color) ;
}
.post-item .is-divider{display: none;}
.portfolio-box{
    position: relative ;
    overflow: hidden;
        border-radius: 20px !important;
}
.portfolio-box .box-text{
   
                padding: 100px 25px 30px;

    z-index: 999;
}
.portfolio-box:hover .box-text:after{
    top: 110px;
    opacity: 1;
}
.portfolio-box:hover .box-text:before{
top: -27px;
    opacity: 1;
}

.portfolio-box .portfolio-box-title {
        text-transform: inherit;
    font-size: 20px;
    font-weight: 500;
    opacity: 0;
    transform: translateY(30px); /* Di chuyển xuống dưới 30px */
    transition: all 0.3s ease-in-out; /* Hiệu ứng mượt mà */
}

.portfolio-box:hover .portfolio-box-title {
    opacity: 1;
    transform: translateY(0); /* Trở về vị trí ban đầu */
}
.header-main  .menu-item .nav-dropdown li a{
    text-transform: initial;
    font-weight: 500;
    font-size: 16px;
    color: black;
}
.portfolio-box-category{
    margin-top: 14px !important;
    text-shadow: unset;
    opacity: 1;
}
.portfolio-box-category .show-on-hover{
    color: black;
    text-transform: initial;
    font-size: 16px;
    padding: 7px 17px;
    border-radius: 99px;
    background: #00F1F4;
    text-shadow: unset;
}
.portfolio-box .box-image,.portfolio-box .box-image img{
    border-radius: 20px;
}
.section-ve-chung-toi .overlay-icon:before{
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.63);
    border-radius: 50%;
    animation: pxl_pulse_border 1500ms ease-out infinite;
    -webkit-animation: pxl_pulse_border 1500ms ease-out infinite;
    z-index: -2;
    border-radius: inherit;
}
.section-ve-chung-toi .overlay-icon{
        opacity: 1;
        line-height: 3.8em !important;
        height: 4em;
    width: 4em !important;
    background-image: linear-gradient(to right, #FF9A3E, #FF5266);
    border: unset;
}
.section-ve-chung-toi{
    min-height: 1100px;
 background-image: url(https://tech-solutions.monamedia.net/wp-content/uploads/2023/11/10-bg-04.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.section-gioi-thieu .pxl-item--icon i{
    font-size: 60px;
}
.div-gioi-thieu-1 .pxl-item--icon{
background-color: #00F0FF;
background-image: linear-gradient(to right, #00F0FF, #004EFF);
}
.div-gioi-thieu-2 .pxl-item--icon{
    background-color: #FF9A3E;
background-image: linear-gradient(to right, #FF9A3E, #FF5266);
}
.div-gioi-thieu-3 .pxl-item--icon{
    background-color: #85C335;
background-image: linear-gradient(to right, #85C335, #DCF188);
}

.section-gioi-thieu  .pxl-item--icon{
    width: 108px;
    height: 108px;
    display: inline-flex
;
    justify-content: center;
    align-items: center;
    border-radius: 30px;

    font-size: 62px;
    color: #fff;
    margin-bottom: 20px;
}
.section-gioi-thieu .div-gioi-thieu  > .col-inner .pxl-item--icon i{
        -webkit-transition: all 300ms linear 0ms;
    -khtml-transition: all 300ms linear 0ms;
    -moz-transition: all 300ms linear 0ms;
    -ms-transition: all 300ms linear 0ms;
    -o-transition: all 300ms linear 0ms;
    transition: all 300ms linear 0ms;
}
.section-gioi-thieu .div-gioi-thieu:hover .pxl-item--icon i {
    -webkit-transform: rotateY(360deg);
    -khtml-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
}
.box-dien-thoai .icon-inner{
    background: var(--primary-color);
}
.row-danh-gia > .col > .col-inner{
        background-color: #FAFBFB;
    -webkit-box-shadow: 0 3px 15px rgba(12, 34, 113, 0.09);
    -khtml-box-shadow: 0 3px 15px rgba(12, 34, 113, 0.09);
    -moz-box-shadow: 0 3px 15px rgba(12, 34, 113, 0.09);
    -ms-box-shadow: 0 3px 15px rgba(12, 34, 113, 0.09);
    -o-box-shadow: 0 3px 15px rgba(12, 34, 113, 0.09);
    box-shadow: 0 3px 15px rgba(12, 34, 113, 0.09);
    padding: 22px;
    border-radius: 10px;
}
.row-danh-gia > .col > .col-inner .icon-box{
margin-bottom: 20px;}
.row-danh-gia .icon-box img{
        border-radius: 99px;
        padding-top: 0px;
}
.row-danh-gia{
    opacity: 1 !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}
.div-right ul{

}
.div-right ul li{
        list-style: none;
    display: inline-block;
    width: 45%;
    margin-left: 0px;
    font-weight: 500;
    font-size: 17px;
    color: #131B29;
margin-bottom: 15px;

}
.div-right ul li:before{
        content: "\f058";
            font-family: "Font Awesome 6 Pro";
               color: var(--primary-color);
               padding-right: 4px;
}
.product-category  .box-image{
    border-radius: 20px;
}
.section-quy-trinh .img .overlay,.section-quy-trinh img,.section-quy-trinh .img-inner {
    border-radius: 10px;
}

.blog-archive .post-item .box-text h5{
    font-size: 25px;
    margin-bottom: 20px;
}
.blog-archive .post-item .box-text{
        -webkit-border-radius: 0 0 8px 8px;
    -khtml-border-radius: 0 0 8px 8px;
    -moz-border-radius: 0 0 8px 8px;
    -ms-border-radius: 0 0 8px 8px;
    -o-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    padding: 20px;
    padding-bottom: 35px;
    border: 1px solid #eee;
}

.post-item a.button{
    font-weight: 500;
    font-size: 17px;
    margin-bottom: 0px;
    text-transform: initial;
        font-weight: 500;
    font-size: 17px;
    margin-bottom: 0px;
    text-transform: initial;
    margin-top: 10px;
    border: unset;
    border-radius: 99px;
    padding: 0px 10px;
    color: white;
    background-image: linear-gradient(to right, #FF9A3E, #FF5266);
}
.post-item a.button:before{
       padding-right: 5px;
    content: "\f061";
        font-family: "Font Awesome 6 Pro";
}

.portfolio-element-wrapper .nav li a{
    font-size: 16px;
    text-transform: initial;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 10px;
    color: black;
    font-weight: 500;
}
.portfolio-element-wrapper .nav li.active a,.portfolio-element-wrapper .nav li:hover a{
    background: var(--primary-color);
    color: white;
}
.post-item .post-meta{
    font-size: 14px;
}
.post-item h5{
    font-size: 20px;
}
.section-doi-ngu .box .social-icons a {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hiện social icons khi hover vào box */
.section-doi-ngu .box:hover .social-icons {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hiện từng icon với delay khác nhau */
.section-doi-ngu .box:hover .social-icons a:nth-child(1) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.1s;
}

.section-doi-ngu .box:hover .social-icons a:nth-child(2) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.2s;
}

.section-doi-ngu .box:hover .social-icons a:nth-child(3) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.3s;
}

.section-doi-ngu .box:hover .social-icons a:nth-child(4) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.4s;
}

/* Hiệu ứng hover cho từng icon */
.section-doi-ngu .box .social-icons a:hover {
    transform: translateY(-5px) scale(1.1);
    transition: all 0.2s ease !important;
    transition-delay: 0s !important;
}

/* Tùy chọn: Hiệu ứng fade out khi không hover */
.section-doi-ngu .box .social-icons a {
    transition-delay: 0s; /* Reset delay khi fade out */
}
.section-doi-ngu .box-image,.section-doi-ngu .box-image img{
    border-radius: 10px;
}
.section-doi-ngu .box-image{
    margin-bottom: 10px;
}

.section-doi-ngu .box-image .overlay{
    background: transparent;
}
.section-dich-vu .post-item .box-text{
    padding-top: 30px;
}

.section-dich-vu .post-item{
    padding-bottom: 0px;
}
.section-dem-nguoc .p-count{
        margin-top: 15px;
        line-height: 65px;
    font-size: 50px;
    font-weight: bold;
    margin-bottom: 0px;
}
.div-du-an > .col-inner .p-count,.div-du-an > .col-inner .p-count .count-up{
        -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #004EFF,#00F0FF );
}
.div-khach-hang > .col-inner .p-count,.div-khach-hang > .col-inner .p-count .count-up{
        -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
      background-image: linear-gradient(to right, #FF9A3E, #F25668);

}
.div-chi-nhanh > .col-inner .p-count,.div-chi-nhanh > .col-inner .p-count .count-up{
        -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
      background-image: linear-gradient(to right, #609817, #8A8F7C);

}
.div-hai-long > .col-inner .p-count,.div-hai-long > .col-inner .p-count .count-up {
        -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
      background-image: linear-gradient(to right, #8400FF, #FF00CC);
}
.div-box-dich-vu .pxl-post--icon:hover{
          background-image: linear-gradient(to right, #FF9A3E, #F25668);

}
.div-box-dich-vu .pxl-post--icon:hover i{
        background-image: linear-gradient(to right, #FFffff, #FFffff);

}
.div-box-dich-vu .pxl-post--icon i{
        background-clip: text;
    -o-background-clip: text;
    -ms-background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -o-text-fill-color: transparent;
    -ms-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
        background-color: transparent;
    background-image: linear-gradient(to right, #FF9A3E, #FF5266);
}
.div-box-dich-vu .pxl-post--icon{

width: 108px;
    height: 108px;
    background-color: #f6f6f6;
    border-radius: 30px;
    display: inline-flex
;
    justify-content: center;
    align-items: center;
    font-size: 60px;
    position: relative;
    z-index: 1;
    color: #fff;
    margin-bottom: 22px;
    -webkit-transition: all 300ms linear 0ms;
    -khtml-transition: all 300ms linear 0ms;
    -moz-transition: all 300ms linear 0ms;
    -ms-transition: all 300ms linear 0ms;
    -o-transition: all 300ms linear 0ms;
    transition: all 300ms linear 0ms;
}
.section-slide .banner h1,.section-slide .banner h2{
      font-size: 64px;
    text-transform: initial;
    line-height: 78px;
}
h3, h4, h5, h6, .heading-font {
    font-weight: 500 !important;
    font-style: normal;
}
.row-quy-trinh .box:hover .box-image{
      position: relative;
    transform: rotateY(0deg);
    opacity: 1;
}
.row-quy-trinh .box{
     -webkit-transition: all 300ms linear 0ms;
    -khtml-transition: all 300ms linear 0ms;
    -moz-transition: all 300ms linear 0ms;
    -ms-transition: all 300ms linear 0ms;
    -o-transition: all 300ms linear 0ms;
    transition: all 300ms linear 0ms; 
}
.row-quy-trinh .box:hover{
        -webkit-transform: translateY(50px);
    -khtml-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
}
  
.row-quy-trinh .box:hover .pxl-item--number{
position: absolute;
    top: -214px;
    z-index: 555555;
    right: 0px;
}
.row-quy-trinh{
    min-height: 360px;
}
.row-quy-trinh .col{
    padding-bottom: 0px !important;
}
.row-quy-trinh .box .box-image{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 226px;
    margin: 0 auto;
    z-index: 99;

    flex-wrap: wrap;
    align-items: flex-end;
    transform: rotateY(90deg);
    opacity: 0;
    -webkit-transition: all 300ms linear 0ms;
    -khtml-transition: all 300ms linear 0ms;
    -moz-transition: all 300ms linear 0ms;
    -ms-transition: all 300ms linear 0ms;
    -o-transition: all 300ms linear 0ms;
    transition: all 300ms linear 0ms;

}
.row-quy-trinh .box-quy-trinh-1:before,.row-quy-trinh .box-quy-trinh-2:before,.row-quy-trinh .box-quy-trinh-3:before{
     content: '';
    position: absolute;
    bottom: -4px;
    right: -199px;
    width: 100%;
    height: 100%;
    background-image: url(images/line-process-1.png);
    background-size: auto;
    /* background-position: center; */
    background-repeat: no-repeat;
    z-index: -1;

}
.row-quy-trinh .box .box-image .image-cover{
    background: white;
    border-radius: 20px;
}
.section-dich-vu .slider-wrapper .row{
    opacity: 1;
    margin-left: 0px !important;
    margin-right: 0px !important;
}
.row-quy-trinh .box-quy-trinh-1 .pxl-item--number{
    background-image: linear-gradient(to right, #FF9A3E, #F25668);
}
.row-quy-trinh .box-quy-trinh-2 .pxl-item--number{
        background-image: linear-gradient(to right, #004EFF, #00F0FF);
}
.row-quy-trinh .box-quy-trinh-3 .pxl-item--number{
        background-image: linear-gradient(to right, #85C335, #DCF188);
}
.row-quy-trinh .box-quy-trinh-4 .pxl-item--number{
    background-image: linear-gradient(to right, #8400FF, #FF00CC);
}
.row-quy-trinh .pxl-item--number {
        margin-bottom: 30px;
    background: #FF9A3E;
    font-size: 30px;
    color: #fff;
    font-weight: 700;
    border-radius: 30px;
    -webkit-transition: all 300ms linear 0ms;
    -khtml-transition: all 300ms linear 0ms;
    -moz-transition: all 300ms linear 0ms;
    -ms-transition: all 300ms linear 0ms;
    -o-transition: all 300ms linear 0ms;
    transition: all 300ms linear 0ms;
    width: 83px;
    height: 83px;
    line-height: 83px;
    display: inline-block;}
    .product-small.box, .category-page-row .product-small .product-small, .section-mau-web .product-small {
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 0 40px 0 rgb(16 155 98 / .12);
    -webkit-box-shadow: 0 0 40px 0 rgb(16 155 98 / .12);
    -moz-box-shadow: 0 0 40px 0 rgb(16 155 98 / .12);
    -o-box-shadow: 0 0 40px 0 rgb(16 155 98 / .12);
    -os-box-shadow: 0 0 40px 0 rgb(16 155 98 / .12);
}
.section-lien-he .box-dien-thoai .icon-box-text{
    font-size: 23px;
}
.section-lien-he .box-dien-thoai{
        background-color: #fff;
    padding: 15px 19px;
    border-radius: 50px;
    box-shadow: 0 10px 81px rgba(0, 0, 0, 0.09);
    /* min-width: 415px; */
    position: absolute;
    top: 50%;
    z-index: 44444;
    right: -31%;
    width: 400px;
}
 .div-du-an > .col-inner{
    padding: 6px;
    border-radius: 15px;
    background-image: linear-gradient(to right,#00f0ff1c, #004eff3d);}.div-khach-hang > .col-inner{
    padding: 6px;
    border-radius: 15px;
    background-image: linear-gradient(to right, #ff9a3e57, #f256687a);}
.div-chi-nhanh > .col-inner{
     padding: 6px;
    border-radius: 15px;
background-image: linear-gradient(to right, #6098174a, #8a8f7c7a);}
.div-hai-long > .col-inner{
    padding: 6px;
    border-radius: 15px;
background-image: linear-gradient(to right, #8400ff47, #ff00cc5e);}
.div-gioi-thieu{
    padding-bottom: 0px;
}
span.amount {
    color: red;
}
.section-dem-nguoc .pxl-item--icon i{
color: var(--primary-color);
    font-size: 45px;
    background: white;
    padding: 20px;
    border-radius: 99px;
    /* margin-bottom: 20px; */
    display: block;
    width: 92px;
    height: 92px;
    margin: auto;
    line-height: 56px;
}
.row-dich-vu .col{
    padding-bottom: 0px;
}
.row-dich-vu{
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 11px 70px rgba(12, 12, 12, 0.06);
    padding: 50px;
}
.button-lien-he:hover{

}
.button-lien-he{
    text-transform: initial;
   border: 2px solid #FD6759;
}
.form-lien-he > .col-inner{
        box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.05);
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 55px 70px 60px 70px;
    background: white;
    border-radius: 60px;
}
.section-tin-tuc .post-item .box{
border-radius: 40px;
    position: relative;
    overflow: hidden;


    background-color: #fff;
    border: 1px solid #e5edfc;
    -webkit-box-shadow: 0 5px 10px rgba(3, 21, 99, 0.12);
    -khtml-box-shadow: 0 5px 10px rgba(3, 21, 99, 0.12);
    -moz-box-shadow:0 5px 10px rgba(3, 21, 99, 0.12);
    -ms-box-shadow:00 5px 10px rgba(3, 21, 99, 0.12);
    -o-box-shadow: 0 5px 10px rgba(3, 21, 99, 0.12);
    box-shadow: 0 5px 10px rgba(3, 21, 99, 0.12);
    -webkit-transition: all 300ms linear 0ms;
    -khtml-transition: all 300ms linear 0ms;
    -moz-transition: all 300ms linear 0ms;
    -ms-transition: all 300ms linear 0ms;
    -o-transition: all 300ms linear 0ms;
    transition: all 300ms linear 0ms;
}
.section-tin-tuc .post-item .box .box-text{
    padding: 15px;
}
.section-tin-tuc .post-item .box .box-text:before{
      content: '';
    display: block;
    width: 101%;
    height: 114px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 370 105'%3E%3Cpath d='M-2,81C33.959,63.669,69.514,54.924,105,55c45.547,0.1,72.086,15.068,110,0,31.572-12.548,36.579-31.914,68-45,26.52-11.045,56.439-11.832,89-4V106H-1Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -89px;
    left: -1px;
        z-index: 5;
}

.section-tin-tuc .post-item .box .box-text:after{
      content: '';
    display: block;
    width: 100%;
    height: 109px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 370 105'%3E%3Cdefs%3E%3ClinearGradient id='gradient1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%2300f0ff;stop-opacity:1'/%3E%3Cstop offset='100%25' style='stop-color:%23004eff;stop-opacity:1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23gradient1)' d='M-2,81C33.959,63.669,69.514,54.924,105,55c45.547,0.1,72.086,15.068,110,0,31.572-12.548,36.579-31.914,68-45,26.52-11.045,56.439-11.832,89-4V106H-1Z'/%3E%3C/svg%3E");    background-repeat: no-repeat;
    background-size: contain;
     background-repeat: no-repeat;
    position: absolute;
    top: -102px;
    left: 0;
    transform: scale(1.06) rotate(-3.5deg);
    opacity: 0.8;
    z-index: 0;
}
.section-tin-tuc .post-item .box .box-text p.cat-label  {
    display: contents;
    color: #E63A27;
    opacity: 1;

}
.title-small{
        display: inline;
  background-image: linear-gradient(to right, #FF9A3E,#FF5266);
    background-color: transparent;
        background-clip: text;
    -o-background-clip: text;
    -ms-background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -o-text-fill-color: transparent;
    -ms-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    border-radius: 99px;
    text-transform: uppercase;
    font-weight: normal;
    padding: 8px 0px;
    font-weight: bold !important;
    text-transform: initial;
    font-size: 20px;
}
.title-home{
        font-size: 37px;
    font-weight: 500;
    line-height: 49px;
    margin-top: 8px;
}



.featured-title {
    background-color: transparent !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}
.section-header .woocommerce-breadcrumb{
    font-weight: bold;
    font-size: 18px;
    padding: 10px 20px ;
    border-radius: 99px;
    background-image: linear-gradient(to right, #FF9A3E, #FF5266);
    
}
.title-top{
    font-size: 19px;
}
.product-small .hover-slide-in a.nut-xem {
    border-radius: 4px;
    padding: 6px 29px;
    display: block !important;
    /* width: 106%; */
    margin-bottom: 8px;
}
.product-small .hover-slide-in .xem-them {
    padding-top: 50%;
}
.product-small .hover-slide-in a.nut-xem-chi-tiet:before {
    content: "\f067";
    font-weight: normal;
    padding-right: 4px;
    font-family: "Font Awesome 6 Pro"
}
.product-small .hover-slide-in a.nut-xem-them:before {
    content: "\f06e";
    font-weight: normal;
    padding-right: 4px;
    font-family: "Font Awesome 6 Pro"
}
.product-small .hover-slide-in {
    height: 100%;
    background: #0e0e0eb3;
    vertical-align: middle;
}
.xem-them .nut-xem-them {
    background: #F38523 !important;
}
.header-nav-main > li > a:hover:before,.header-nav-main > li > a:hover:after{
    -webkit-transform: scaleX(1);
    -khtml-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}
.header-nav-main > li > a:before{
        left: 0;
    width: 14px;
}
.header-nav-main > li > a:after{
       width: 33px;
        left: 20px !important;
}

.header-nav-main > li > a:before,.header-nav-main > li > a:after{
        content: '';
    position: absolute;
   bottom: -4px;
    height: 5px;
        border-radius: 5px;
    background-image: linear-gradient(to right, #FF9A3E, #FF5266);

    left: 0;
    -webkit-transition: all 300ms linear 0ms;
    -khtml-transition: all 300ms linear 0ms;
    -moz-transition: all 300ms linear 0ms;
    -ms-transition: all 300ms linear 0ms;
    -o-transition: all 300ms linear 0ms;
    transition: all 300ms linear 0ms;
    -webkit-transform: scaleX(0);
    -khtml-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    transform-origin: left center;

}
.header-nav-main > li > a{
    color: black;
}
.section-header{
    margin-top: -130px;
}
.section-header h1{
        font-size: 62px;
}
.stuck .header-bg-color{
    background-color: white !important;
}
.header-bg-color{
    background: transparent !important;
}
    .stuck .header-main .header-inner{
            padding-top: unset !important;
              padding-bottom: unset !important;
        border-radius: unset;
    
        min-height: unset;
        background: unset;
        border: unset;
    } 
.header-top {
    background-color: transparent;}
@media(min-width: 1023px){
    .form-lien-he > .col-inner {
  
    padding-right: 170px !important;

}
    .div-anh-lien-he .img{
    width: 113% !important;
    margin-left: -94px !important;
    }
    .header-main .header-inner{
            border: 2px solid #676767;
    border-radius: 70px;
    background: white;
    padding: 13px 30px !important;
    min-height: 114px;
    }
    .tab-xay-dung .nav-vertical {
  
        width: 30% !important;
    }
}


/*
* Element Name: UX BUilder Marquee
* Discover More: https://flelements.com/
* Author: Obelix Media
*/
.obelix-marquee-wrapper .obelix-marquee {
    --obelix-text-dark-gray: #555353;
    --marquee-gap: 0px;
    --obelix-duration: 30s;
    --obelix-scroll-distance: calc(100% + var(--marquee-gap));
    --obelix-color-white: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    gap: var(--marquee-gap);
    position: relative;
}

.obelix-marquee-wrapper .obelix-marquee.is-vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: var(--box-height, 400px);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.obelix-marquee-wrapper .obelix-marquee .obelix-scroll-text {
    line-height: 1.65;
    text-align: center;
}

.obelix-marquee-wrapper .obelix-marquee .obelix-scroll-text, .obelix-marquee-wrapper .obelix-marquee .obelix-marquee-group i {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

.obelix-marquee-wrapper .obelix-marquee .obelix-marquee-group svg {
    height: auto;
    width: 2rem;
    fill: currentColor;
}

.obelix-marquee-wrapper .obelix-marquee .obelix-text-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--marquee-gap);
}

.obelix-marquee-wrapper .obelix-marquee.is-vertical.icon-right .obelix-text-wrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.obelix-marquee-wrapper .obelix-marquee.is-vertical.icon-bottom .obelix-text-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.obelix-marquee-wrapper .marquee-icon {
    --icon-width: 1.5rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* Image icon */
.obelix-marquee-wrapper .marquee-icon.is-image {
    width: calc(var(--icon-width) * 2);
}

.obelix-marquee-wrapper .marquee-icon img {
    /* height: var(--icon-width, 3rem); */
    width: 100%;
    max-width: unset;
}

/* Svg inline icon */
.obelix-marquee-wrapper .marquee-icon.is-image svg {
    width: var(--icon-width);
}

.obelix-marquee-wrapper .marquee-icon.is-image svg > * {
    fill: currentColor!important;
}

/* Library icon */
.obelix-marquee-wrapper i.marquee-icon {
    font-size: var(--icon-width);
}

.obelix-marquee .obelix-scroll-image img {
    height: var(--image-ratio);
    width: auto;
    max-width: unset;
}

.obelix-marquee-wrapper .is-vertical .obelix-scroll-image img {
    width: var(--image-ratio);
    height: auto;
}

@-webkit-keyframes obelix-scroll-x {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(calc(-1 * var(--obelix-scroll-distance)));
        transform: translateX(calc(-1 * var(--obelix-scroll-distance)));
    }
}
@keyframes pxl_pulse_border {
  0% {
    transform: scale(1);
    opacity: 0.67;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
@-webkit-keyframes pxl_pulse_border {
  0% {
    transform: scale(1);
    opacity: 0.67;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
@keyframes obelix-scroll-x {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(calc(-1 * var(--obelix-scroll-distance)));
        transform: translateX(calc(-1 * var(--obelix-scroll-distance)));
    }
}

@-webkit-keyframes obelix-scroll-y {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(calc(-1 * var(--obelix-scroll-distance)));
        transform: translateY(calc(-1 * var(--obelix-scroll-distance)));
    }
}

@keyframes obelix-scroll-y {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(calc(-1 * var(--obelix-scroll-distance)));
        transform: translateY(calc(-1 * var(--obelix-scroll-distance)));
    }
}

@-webkit-keyframes fade {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes fade {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Wrapper Styles */
.obelix-marquee-wrapper .obelix-marquee-group {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    gap: var(--marquee-gap);
    white-space: nowrap;
    -webkit-animation: obelix-scroll-x var(--obelix-duration) linear infinite;
    animation: obelix-scroll-x var(--obelix-duration) linear infinite;
}

.obelix-marquee.is-vertical .obelix-marquee-group {
    -webkit-animation-name: obelix-scroll-y;
    animation-name: obelix-scroll-y;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.obelix-marquee-wrapper .is-vertical.v-align-left .obelix-marquee-group {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    text-align: left;
}

.obelix-marquee-wrapper .is-vertical.v-align-right .obelix-marquee-group {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    text-align: right;
}

.obelix-marquee-wrapper .obelix-marquee.reverse .obelix-marquee-group {
    animation-direction: reverse;
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
}

/* Text effect */
.obelix-marquee-wrapper .stroke .obelix-scroll-text.odd {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px;
}

.obelix-marquee-wrapper .gold .obelix-scroll-text {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(18%, #dec58d), color-stop(24%, #d8c08c), color-stop(26%, #cfc09f), color-stop(27%, #cfc09f), color-stop(40%, #ffecb3), color-stop(78%, #af8734));
    background: -o-linear-gradient(top, #dec58d 18%, #d8c08c 24%, #cfc09f 26%, #cfc09f 27%, #ffecb3 40%, #af8734 78%);
    background: linear-gradient(to bottom, #dec58d 18%, #d8c08c 24%, #cfc09f 26%, #cfc09f 27%, #ffecb3 40%, #af8734 78%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    position: relative;
}

.obelix-marquee-wrapper .is-vertical.v-align-left {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.obelix-marquee-wrapper .is-vertical.v-align-right {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.obelix-marquee-wrapper .is-vertical.v-align-left .obelix-scroll-text {
    text-align: left;
}

.obelix-marquee-wrapper .is-vertical.v-align-right .obelix-scroll-text {
    text-align: right;
}

/* Shadow */
.obelix-marquee-wrapper .obelix-marquee.has-shadow::before, .obelix-marquee-wrapper .obelix-marquee.has-shadow::after {
    position: absolute;
    content: "";
    z-index: 1;
    pointer-events: none;
}

.obelix-marquee-wrapper .has-shadow.is-vertical::before, .obelix-marquee-wrapper .has-shadow.is-vertical::after {
    width: 100%;
    height: var(--shadow-width, 20%);
}

.obelix-marquee-wrapper .has-shadow.is-horizontal::before, .obelix-marquee-wrapper .has-shadow.is-horizontal::after {
    height: 100%;
    width: var(--shadow-width, 20%);
}

.obelix-marquee-wrapper .has-shadow.is-vertical::before {
    bottom: 0;
    left: 0;
    background-image: -webkit-gradient(linear, left bottom, left top, from(var(--shadow-color, #fff)), to(rgba(255, 255, 255, 0)));
    background-image: -o-linear-gradient(bottom, var(--shadow-color, #fff), rgba(255, 255, 255, 0));
    background-image: linear-gradient(to top, var(--shadow-color, #fff), rgba(255, 255, 255, 0));
}

.obelix-marquee-wrapper .has-shadow.is-vertical::after {
    top: 0;
    left: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--shadow-color, #fff)), to(rgba(0, 0, 0, 0)));
    background-image: -o-linear-gradient(top, var(--shadow-color, #fff), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to bottom, var(--shadow-color, #fff), rgba(0, 0, 0, 0));
}

.obelix-marquee-wrapper .has-shadow.is-horizontal::before {
    left: 0;
    top: 0;
    bottom: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(var(--shadow-color, #fff)), to(rgba(0, 0, 0, 0)));
    background-image: -o-linear-gradient(left, var(--shadow-color, #fff), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to right, var(--shadow-color, #fff), rgba(0, 0, 0, 0));
}

.obelix-marquee-wrapper .has-shadow.is-horizontal::after {
    right: 0;
    top: 0;
    bottom: 0;
    background-image: -webkit-gradient(linear, right top, left top, from(var(--shadow-color, #fff)), to(rgba(0, 0, 0, 0)));
    background-image: -o-linear-gradient(right, var(--shadow-color, #fff), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to left, var(--shadow-color, #fff), rgba(0, 0, 0, 0));
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .obelix-marquee-wrapper .obelix-marquee-group {
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }
}


@media(max-width: 855px){
    .section-video .video-overlay, .section-video .video-bg {
        display: block !important;
    }
    .div-du-an,.div-khach-hang,.div-chi-nhanh,.div-hai-long{
        padding-bottom: 10px !important;
    }
    .transparent #logo img {
    max-height: 64px !important;
}
    .transparent .header-main {
            background: white;
    height: 60px !important;
}
    .section-slide .text-box{
        width: 80% !important;
    }

    .div-anh-video::after{
        display: none;
    }
    .section-slide .banner h1, .section-slide .banner h2 {
    font-size: 25px;
    text-transform: initial;
    line-height: 27px;
}

    .section-slide .banner{
        padding-top: 370px !important;
    }
    .section-du-an{
        padding-bottom: 10px !important;
    }
    .title-tab {
    font-size: 22px;
    font-weight: 500;
}
    .tab-xay-dung .tab-panels .panel .row {

    margin-left: 0px !important;
    margin-right: 0px !important;
}
    .section-quy-trinh{
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .div-text-icon p{
        font-size: 90%;
    }
    .section-dem-nguoc .p-count {
    margin-top: 15px;
    line-height: 45px;
    font-size: 40px;

    margin-bottom: 0px;
}
    .div-right{
        padding-top: 25px;
    }
    .tab-xay-dung .tab-panels .panel .row {
   
    padding: 10px;}
   .section-du-an .portfolio-element-wrapper .row-isotope .col{
        padding-left: 0px !important;
        padding-right: 0px !important;
                padding-bottom: 10px !important;
    }
    .row-quy-trinh .box-quy-trinh-1:before, .row-quy-trinh .box-quy-trinh-2:before, .row-quy-trinh .box-quy-trinh-3:before{
        display: none;
    }
     .portfolio-element-wrapper .nav li{
        margin: 0px 3px;
     }
    .portfolio-element-wrapper .nav li a {
    font-size: 14px;
    text-transform: initial;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 10px;
    color: black;
    font-weight: 500;
    margin-bottom: 6px;
}
.footer-section{
    padding-top: 30px !important;
    background-image: unset;
}
.section-lien-he{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
.section-lien-he .box-dien-thoai {

    padding: 12px 14px;
    border-radius: 50px;
    box-shadow: 0 10px 81px rgba(0, 0, 0, 0.09);

    position: relative !important ;
    top: unset !important;
    z-index: 44444;
    right: unset !important;
    width: unset !important;
}
.form-lien-he > .col-inner {
    box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.05);
    padding: 20px;

    border-radius: 20px;
}
.header-main {
        background: white;
}
.single-post .woocommerce-breadcrumb {
    font-size: 0 !important; /* Ẩn tất cả text */
}
.div-anh-lien-he .box-dien-thoai .icon-box-img{
width: 55px !important;
}
.section-slide p br{
    display: none;
}
.single-post .woocommerce-breadcrumb a,
.single-post .woocommerce-breadcrumb .divider {
    font-size: 14px; /* Hiển thị lại font size cho links và dividers */
}
.section-lien-he .box-dien-thoai .icon-box-text {
    font-size: 17px;
}
.section-header  .page-title-inner {
    min-height: 300px !important;
    padding-top: 120px;
}
.section-header .woocommerce-breadcrumb {
           font-weight: bold;
        font-size: 15px;
        padding: 9px 15px !important;
        border-radius: 99px;
        display: inline-block;
        background-image: linear-gradient(to right, #FF9A3E, #FF5266);
        text-transform: inherit;
}
.ul-lien-he li {
    margin-left: 0px !important;
    list-style: none;
}
.section-header h1 {
    font-size: 30px;
}
.form-lien-he input {
    min-height: 3.2em;
}
.section-du-an .portfolio-element-wrapper .row-isotope .col .box-image .image-cover {
    padding-top: 75% !important;
}
.portfolio-box:before{
    display: none;
}
.row-quy-trinh h3{
    font-size: 17px;
}
.row-quy-trinh .box:hover .pxl-item--number {
    position: relative;
    top: unset;
    z-index: 555555;
    right: unset;
}
.row-quy-trinh .box:hover {
    -webkit-transform: unset;
    -khtml-transform: unset;
    -moz-transform: unset;
    -ms-transform: unset;
    -o-transform: unset;
    transform: unset;
}
.row-quy-trinh .box:hover .box-image{
    display: none !important;
}
.section-ve-chung-toi  .obelix-marquee {
    --marquee-gap: 2.3rem !important;
}
.section-danh-gia .col{
    padding-bottom: 0px !important;
}
.section-danh-gia{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
.title-small{
    font-size: 16px;
}
    .title-home {
    font-size: 23px;
    font-weight: 500;
    line-height: 35px;
    margin-top: 10px;
}
    .section-dich-vu{
    
        padding-bottom: 20px !important;
    }
    .div-right ul li {
 
    display: inline-block;
    width: 100%;}
    .section-giai-phap{
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .div-image-giai-phap .pxl-inner-meta {
    display: flex
;
    align-items: center;
    -webkit-transform: unset;
    -khtml-transform: unset;
    -moz-transform: unset;
    -ms-transform: unset;
    -o-transform: unset;
    transform: unset;
}
    .div-image-giai-phap .div-chu-doc .col-inner {
    min-height: unset;
}
    .div-image-giai-phap .pxl-item--meta {
    position: relative;
    bottom: unset;
    left: unset;
    z-index: 2;
    writing-mode: unset;
    transform-origin: unset;
}
}
/* End UX BUilder Marquee */