@charset "utf-8";

a,
body {
    color: var(--black);
}

a,
a:hover {
    text-decoration: none;
}

.container,
.no-padder,
body,
ul {
    padding: 0;
}

.border-l-r,
.border-left {
    border-left: 1px solid #fff;
}

.border-l-r,
.border-right {
    border-right: 1px solid #fff;
}

.fb-login,
.fb-row {
    height: 40px;
}

.a-top-logo,
.fb-login,
.fb-login a {
    position: relative;
    float: left;
}

#slide,
menu {
    top: 0;
    right: 0;
    width: 0;
}

#slide,
#upper-slide,
.slide-right {
    min-height: 100vh;
}

.section-project,
.section-project .column-round-outline,
.section-project .div-block-24 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
}

.a-right-f:hover,
.top-contact a:hover {
    text-decoration: underline;
}

.col-intro-h3 h1 {
    color: var(--primary-color) !important;
    font-size: 20px;
}

:root {
    --primary-color: #075951;
    --second-color: #e7c415;
    --third-color: #372e2c;
    --white: white;
    --black: black;
    --bg-block: #fff9f8;
    --primary-font: "SFUFutura";
    --secondary-font: "Tourney-Black";
    --wrapper: 192rem;
    --container: 117rem;
}

*,
:after,
:before {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    margin: 0;
    font-family: var(--primary-font);
    font-size: 14px;
    background: var(--white);
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

ul {
    margin: 0;
    list-style: none;
}

.box-project:nth-of-type(4n),
.m-n,
.row {
    margin: 0;
}

a,
button,
li {
    transition: .2s linear;
    -webkit-transition: .2s linear;
    -o-transition: .2s linear;
    -moz-transition: .2s linear;
}

.inner-info textarea:focus,
button:focus,
input {
    outline: 0;
}

.no-padder-left {
    padding-left: 0;
}

.nav-show ul li:last-child,
.news .article-event-blog,
.no-padder-right {
    padding-right: 0;
}

.padder-t-b-xs {
    padding-top: 5px;
    padding-bottom: 5px;
}

.padder-t-b-sm {
    padding-top: 10px;
    padding-bottom: 10px;
}

.padder-t-b-md {
    padding-top: 15px;
    padding-bottom: 15px;
}

.padder-t-b-lg {
    padding-top: 20px;
    padding-bottom: 20px;
}

.p-l-5 {
    padding-left: 5px;
}

.p-l-10 {
    padding-left: 10px;
}

.p-l-15 {
    padding-left: 15px;
}

.p-l-20 {
    padding-left: 20px;
}

.p-l-25 {
    padding-left: 25px;
}

.p-r-5 {
    padding-right: 5px;
}

.p-r-10 {
    padding-right: 10px;
}

.p-r-15 {
    padding-right: 15px;
}

.p-r-20 {
    padding-right: 20px;
}

.p-r-25 {
    padding-right: 25px;
}

.p-t-5 {
    padding-top: 5px;
}

.news .col-news-inner .extend,
.p-t-10 {
    padding-top: 10px;
}

.p-t-15 {
    padding-top: 15px;
}

.p-t-20 {
    padding-top: 20px;
}

.p-t-25 {
    padding-top: 25px;
}

.p-b-5 {
    padding-bottom: 5px;
}

.p-b-10,
menu ul.linkss li.ng-has-child1 {
    padding-bottom: 10px;
}

.p-b-15 {
    padding-bottom: 15px;
}

.p-b-20 {
    padding-bottom: 20px;
}

.p-b-25 {
    padding-bottom: 25px;
}

.m-l-n {
    margin-left: 0;
}

.categories li:last-child,
.col-navigation-content ul li:last-child,
.m-r-n {
    margin-right: 0;
}

.m-l-5,
.nav-show ul li a i,
.zoom span {
    margin-left: 5px;
}

.m-l-sm {
    margin-left: 10px;
}

.m-l-md,
.toggle__label-icon.toggle-icon-position-right {
    margin-left: 15px;
}

.m-l-lg {
    margin-left: 20px;
}

.m-l-max {
    margin-left: 25px;
}

.m-r-5 {
    margin-right: 5px;
}

.m-r-sm {
    margin-right: 10px;
}

.m-r-md {
    margin-right: 15px;
}

.m-r-lg {
    margin-right: 20px;
}

.m-r-max {
    margin-right: 25px;
}

.m-t-5 {
    margin-top: 5px;
}

.m-t-sm {
    margin-top: 10px;
}

.m-t-md {
    margin-top: 15px;
}

.m-t-lg {
    margin-top: 20px;
}

.m-t-max {
    margin-top: 25px;
}

.m-b-5 {
    margin-bottom: 5px;
}

.m-b-10 {
    margin-bottom: 10px;
}

.m-b-15 {
    margin-bottom: 15px;
}

.m-b-20,
.solution-block {
    margin-bottom: 20px;
}

.m-b-25 {
    margin-bottom: 25px;
}

.m-b-50,
.section-blogs .item-news {
    margin-bottom: 50px;
}

.m-r-4per {
    margin-right: 4%;
}

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

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

.text-center {
    text-align: center;
}

.text-bold {
    font-weight: 700;
}

.bd-t-5b {
    border-top: 1px solid #5b5b5d;
}

.bd-b-5b {
    border-bottom: 1px solid #5b5b5d;
}

.n-bd-r {
    border-right: none !important;
}

.bg-rgba {
    background: rgba(0, 0, 0, .4);
}

.bg-grey {
    background: #f2f2f2;
}

.bg-grey-ee {
    background: #eee;
}

.bg-green-46 {
    background: #46a040;
}

.bg-green-3b {
    background: #3bb44a;
}

#slide,
.bg-black-29,
.bot-shadow .menu-icon span,
.package.active::after,
.package:hover::after {
    background: var(--primary-color);
}

.bg-black-00 {
    background: #191919;
}

.bg-green-9c {
    background: #9cc639;
}

.bg-green-76 {
    background: #76bb2c;
}

.bg-orange {
    background: #fcb040;
}

.bg-blue {
    background: #4ba6cf;
}

.bg-blue-2b {
    background: #2b465d;
}

.bg-blue-02 {
    background: #029292;
}

.bg-red {
    background: #dc2b51;
}

.bg-caro {
    background: url(../images/bg_02.png) top left;
}

.fb-row a:hover i,
.green-0f {
    color: var(--primary-color);
}

.black-29,
.box-logo ul li a:hover {
    color: #292929;
}

.fb-row a:hover,
.nav-show ul li a:hover,
.ul-navigation-2 li>.ul-drop-list-2>li:hover {
    background: #fff;
}

.fb-row a i,
.package.active .textClr a small,
.package.active .textClr a span,
.package.active .ul_pkg ul li,
.package.active .ul_pkg ul li:before,
.package.active h3,
.package.active h4,
.package.active i:before,
.package:hover .text-list li:before,
.package:hover .textClr a small,
.package:hover .textClr a span,
.package:hover .ul_pkg ul li,
.package:hover .ul_pkg ul li:before,
.package:hover h3,
.package:hover h4,
.package:hover i:before,
.section-service .column-services .button-content span,
.section-service .column-services ul li a,
.section-service .column-services ul.heading-title,
.top-contact,
.top-contact a {
    color: #fff;
}

.fb-login {
    text-align: center;
    width: 20%;
}

.fb-login a {
    width: 100%;
    text-align: center;
    padding: 13px 0;
}

.top-col-contact {
    height: 40px;
    padding: 10px 0;
}

.top-col-contact p {
    line-height: 20px;
    font-size: 1em;
}

header.header {
    position: relative;
    float: none;
    width: 100%;
    border-bottom: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0);
    top: 0;
    left: 0;
    z-index: 99999;
}

.a-top-logo {
    width: 100% !important;
    padding: 5px !important;
}

#slide,
.menu-icon,
menu,
menu ul.linkss.slide-in {
    position: absolute;
}

.a-top-logo img {
    width: 150px;
    font-size: 1px;
    line-height: 50px;
    cursor: pointer;
    float: right;
}

.header.bot-shadow .logo-fix {
    width: 150px;
}

.none-sc .a-top-logo {
    z-index: 9999;
}

menu {
    z-index: 1;
    -webkit-margin-before: 0;
    -webkit-padding-start: 0;
}

menu.bg-menu {
    background: #0000009e;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

menu ul.linkss.slide-in {
    top: 140px;
}

.ng-scope a:focus,
.ng-scope a:hover,
.ng-scope.active>a,
.section-service .column-services ul li a:hover,
menu ul.linkss #email-contact a,
menu ul.linkss #phone-contact a,
menu ul.linkss li a:hover {
    color: var(--second-color);
}

#upper-slide {
    height: 100%;
    background: #372e2c;
    transition: width .6s cubic-bezier(.1, .7, .1);
    width: 0;
    float: right;
    opacity: 1;
}

#slide {
    height: 100%;
    transition: width .3s cubic-bezier(.1, .7, .1);
}

.upper-slide-right {
    width: 700px !important;
    height: 100%;
    min-height: 100vh;
}

.slide-right {
    width: 650px !important;
    height: 100%;
}

.menu-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: auto;
    cursor: pointer;
    z-index: 9999;
    right: 35px;
}

.header .menu_content .linkss {
    text-align: right;
    padding: 15px 0;
    display: flex;
    float: right;
}

.header .menu_content .linkss li {
    padding: 0 15px;
    transform: translateX(-100px);
}

.header .menu_content .linkss li a {
    font-size: 17px;
    color: var(--primary-color);
    font-weight: 500;
    padding: 20px 0;
}

.header .menu_content .linkss li a:hover {
    color: var(--second-color);
}

.menu-icon span {
    position: relative;
    top: 25px;
    display: block;
    width: 20px;
    height: 3px;
    background: var(--primary-color);
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
    -webkit-transition: background .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.17, .67, .3, 1.33);
    transition: transform .3s cubic-bezier(.17, .67, .3, 1.33), background .3s cubic-bezier(.4, 0, 0, 1), -webkit-transform .3s cubic-bezier(.17, .67, .3, 1.33);
}

.menu-icon span:after,
.menu-icon span:before {
    position: absolute;
    content: "";
}

.menu-icon span:after,
.menu-icon span:before {
    width: 40px;
    height: 3px;
    background-color: var(--primary-color);
    display: block;
}

.bot-shadow .menu-icon span,
.bot-shadow .menu-icon span:after,
.bot-shadow .menu-icon span:before {
    background-color: var(--primary-color);
}

.bot-shadow .menu-icon.active span:after,
.bot-shadow .menu-icon.active span:before {
    background-color: #fff;
}

.menu-icon span:before {
    margin-top: -12px;
}

.menu-icon:hover span:before {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
}

.menu-icon:hover span:after {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
}

.menu-icon.active:hover span:before {
    background-color: #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition-delay: 0s, .2s;
    transition-delay: 0s, .2s;
}

.menu-icon.active:hover span:after {
    background-color: #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition-delay: 0s, .2s;
    transition-delay: 0s, .2s;
}

.menu-icon.active span {
    background-color: rgba(0, 0, 0, 0) !important;
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
}

.menu-icon span:before {
    -webkit-transition-property: margin, -webkit-transform;
    transition-property: margin, transform;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-delay: .2s, 0s;
    transition-delay: .2s, 0s;
}

.menu-icon.active span:before {
    margin-top: 0;
    background-color: #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition-delay: 0s, .2s;
    transition-delay: 0s, .2s;
}

.menu-icon span:after {
    margin-top: 12px;
    -webkit-transition-property: margin, -webkit-transform;
    transition-property: margin, transform;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-delay: .2s, 0s;
    transition-delay: .2s, 0s;
}

.menu-icon.active span:after {
    margin-top: 0;
    background-color: #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition-delay: 0s, .2s;
    transition-delay: 0s, .2s;
}

ul.linkss {
    list-style: none;
}

menu ul.linkss {
    right: 0;
    transition: right .7s cubic-bezier(.1, .7);
    opacity: 0;
}

.linkss.slide-in {
    right: 230px;
    opacity: 1;
}

menu ul.linkss li {
    line-height: 42px;
    color: #fff;
    font-size: 24px;
}

menu ul.linkss li a {
    line-height: 42px;
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 1px;
}

.linkss li {
    transform: translateX(150px);
}

.slide-in li {
    transform: translateX(0);
}

.slide-in li:nth-child(n + 1) {
    transition: transform .1s;
}

.slide-in li:nth-child(2) {
    transition: transform .3s;
}

.slide-in li:nth-child(3) {
    transition: transform .5s;
}

.slide-in li:nth-child(4) {
    transition: transform .7s;
}

.slide-in li:nth-child(5) {
    transition: transform .9s;
}

.slide-in li:nth-child(6) {
    transition: transform 1.3s;
}

.slide-in li:nth-child(7) {
    transition: transform 1.5s;
}

.slide-in li:nth-child(8) {
    transition: transform 1.7s;
}

.ng-scope .ul-has-child1 li.ng-has-child2 a {
    font-size: 15px;
}

.none-sc,
.testimonials-slider .carousel {
    overflow: hidden;
}

.none-sc .bot-shadow {
    background: rgb(255 255 255 / 0%) !important;
    box-shadow: none !important;
}

.ng-scope {
    position: relative;
    display: block;
}

.ng-scope a .svg {
    height: 20px !important;
    width: 20px !important;
    position: relative;
    right: -47px;
    top: 50%;
    transform: translate(0, -50%);
}

.ng-scope a .svg:after,
.ng-scope a .svg:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    background-color: currentColor;
    transition: transform .4s ease-in-out, opacity .4s ease-in-out;
}

.ng-scope a .svg:before {
    width: 20px;
    height: 3px;
    opacity: 1;
    border-radius: 3px;
}

.ng-scope a .svg:after {
    width: 3px;
    height: 20px;
    border-radius: 3px;
}

.ng-scope a .svg.active:after,
.ng-scope a .svg.active:before {
    transform: translate(-50%, -50%) rotate(90deg);
}

.ng-scope a .svg.active:before {
    opacity: 0;
}

.ng-scope .ul-has-child1,
.ng-scope .ul-has-child1 li .ul-has-child2 {
    display: none;
    padding-left: 0;
    padding-right: 0;
}

.ng-scope .ul-has-child1 li a {
    padding-left: 15px;
    line-height: 42px;
    font-size: 20px;
}

.ng-scope .ul-has-child1 li .ul-has-child2 li a {
    padding-left: 22.5px;
    font-weight: 400;
}

.menu_content .linkss {
    transform: translateX(-100px);
}

.menu_content .linkss li.ng-scope {
    transform: translateX(0);
}

.menu_content .linkss .ng-scope:hover .ul-has-child1 {
    display: block;
    padding: 15px;
    position: absolute;
    background: #fff;
    width: 370px;
    transform: translateX(-150px);
    top: 45px;
    text-align: left;
}

.col-navigation-content>ul>li:hover>ul,
.diamond.is-visible .content-logo .title_diamond,
.emerald.is-visible .content-logo .title_emeral,
.ng-scope.ng-has-child1.active .ul-drop-list.ul-has-child1,
.package-nugget-info span svg,
.recr-content.active .work_items_content,
.ruby.is-visible .content-logo .title_ruby,
.ul-navigation li:hover .ul-drop-list {
    display: block;
}

.ng-scope.sale-menu>a {
    color: #ff5f89;
    font-weight: 700;
    text-transform: uppercase;
}

.ul-navigation li .ul-drop-list {
    position: absolute;
    left: 0;
    top: 100%;
    width: 200px;
    background: #303030;
    z-index: 9999;
    display: none;
}

.ul-navigation li>.ul-drop-list>li {
    position: relative;
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #545454;
}

.ul-navigation li>.ul-drop-list>li a {
    color: #fff;
    padding: 8px 15px;
}

.col-navigation-content>ul>li>ul li:hover a,
.ul-navigation li>.ul-drop-list>li:hover a {
    color: #a4ce41;
}

.ul-navigation-2 li .ul-drop-list-2 {
    position: relative;
    float: left;
    width: calc(100% - 40px);
    margin: 0 0 0 20px;
}

.ul-navigation-2 li>.ul-drop-list-2>li {
    position: relative;
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
}

.ul-navigation-2 li>.ul-drop-list-2>li a {
    color: #fff;
    margin: 0;
    padding-left: 10px;
}

.news .no-padder-left .img h3:hover,
.ul-navigation-2 li>.ul-drop-list-2>li:hover a {
    color: #46a040;
}

.info-slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .1);
    color: #fff;
}

.info-slide h1,
.info-slide h3,
.info-slide p {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
}

.info-slide h1 {
    font-size: 3.75em;
    margin: 0 0 30px;
}

.info-slide h3 {
    font-size: 2em;
    margin: 0;
}

.info-slide p a {
    position: relative;
    float: left;
    font-size: 1.5625em;
    line-height: 22px;
    color: #fff;
    padding: 10px 30px;
    border: 2px solid #fff;
    border-radius: 23px;
}

.slide-a-detail {
    margin-right: 55px;
    margin-left: calc((100% - 137px) / 2);
}

.info-slide p a:hover,
.nav-xs ul li a:hover {
    background: #fff;
    color: var(--primary-color);
}

.two-half-images {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 90vh;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #141517;
}

.left-image,
.right-image {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    width: 50%;
    -webkit-box-pack: center;
    background-position: 50% 50%;
    background-size: cover;
}

.left-image {
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-repeat: no-repeat;
}

.right-image {
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.black-background {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: background-color .7s ease-out;
    -moz-transition: background-color .7s ease-out;
    -o-transition: background-color .7s ease-out;
    transition: background-color .7s ease-out;
}

.black-background .left-header,
.black-background .right-header {
    opacity: 0;
    transition: .4s ease-out .2s;
}

.section-about-information.logo-design,
.section-service {
    transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}

.black-background:hover .left-header,
.black-background:hover .right-header {
    opacity: 1;
    transition: .2s ease-out;
}

.left-header,
.right-header {
    width: 60%;
    font-family: SFUFutura;
    color: #fff;
    font-weight: 500;
    text-transform: none;
    font-size: 58px;
}

.col-footer,
.info-banner a,
.logo-info-banner h3,
.nav-show ul li a {
    font-family: Arial, Helvetica, sans-serif;
}

.right-header:hover {
    color: var(--white);
}

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

    .left-image,
    .right-image,
    .two-half-images {
        display: block;
        height: 50vh
    }

    .left-image,
    .right-image {
        width: 100%;
        background-position: 100%;
        background-size: contain;
        background-repeat: no-repeat
    }

    .left-header {
        width: 70%;
        font-size: 50px
    }
}

.align-middle,
.contact-us .row,
.faqs-sec .row,
.global-achievements .row,
.home-banner .row,
.section-about-information .row {
    align-items: center;
}

.section-about-information .row,
.section_thuong_hieu .secsion-service .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}

.section-about-information,
.why-need {
    padding: 70px 0 0;
}

.section-about-information .container.home-page,
.section-project .container.home-page,
.section-service .container.home-page,
.vertical-tabs-section .container.home-page {
    max-width: 100% !important;
    width: 100% !important;
}

.section-about-information .container.home-page_ {
    max-width: 1250px;
    width: 100%;
}

.section-about-information .container.home-page .row>div:first-child {
    padding: 0 60px 0 0 !important;
    display: flex;
    align-content: center;
    align-items: flex-end;
}

.section-about-information .container.home-page .inner-content {
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
}

.section-about-information .mega-para {
    padding: 15px 0;
    color: #424242;
    font-size: 19px;
    font-weight: 400;
    font-family: SFUFutura;
}

.mega-para {
    font-size: 19px;
    line-height: 38px;
}

.our-services,
.section-about-information .button-couple-lg {
    padding-bottom: 50px;
}

.section-about-information .container.home-page .mega-para {
    margin: 30px 0 50px;
    width: 90%;
    max-width: 90%;
}

.section-about-information .home-about {
    transform: translate(-10px, 0);
}

.section-about-information.logo-design {
    background-image: url(../../../../uploads/2021/04/create_logo_shape.webp);
    background-position: top center !important;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -110px;
    margin-bottom: 0;
    padding: 100px 0 0;
}

.section-about-information.web-dev {
    background-image: url(../../../../uploads/2021/04/webdevelopment_about_bg.webp);
    background-position: top center;
    background-repeat: no-repeat;
    margin-top: -135px;
    margin-bottom: 0;
    padding: 140px 0 0;
    background-size: 100%;
}

.primary-heading-box .main-heading {
    color: var(--primary-color);
    font-size: 58px;
    line-height: 1.1;
}

.primary-heading-box .main-heading,
.primary-heading-box .sub-heading {
    font-weight: 800;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

.section-service {
    padding: 5% 0 2%;
}

.section-service .home-page .panel-heading,
.section-service .home-page .title-service {
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
}

.recr-content h3,
.section-service .home-page h4.panel-title a {
    color: #000;
    font-size: 44px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 2;
}

.vert-tab-content h2,
.vert-tab-content h4 {
    font-weight: 700;
    color: #000a19;
    text-align: left;
    letter-spacing: 0;
}

.section-service .home-page .panel-title>a,
.section-service .home-page .panel-title>a:active {
    display: block;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 3px;
    text-decoration: none;
}

.section-service .home-page .toggle__control .toggle__label-text {
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

.section-service .home-page .toggle__control .toggle__label-icon .icon-normal {
    color: #000;
    background-color: #02010100;
    font-size: 60px;
    width: 85px;
    height: 85px;
}

.section-service .home-page .toggle__control .toggle__label-icon .tabs-icon svg {
    display: block;
    width: 65px;
    height: 65px;
    fill: currentColor;
    transition: .5s;
}

.recr-content.active .panel-heading.toggle__control,
.recr-content.active h3,
.section-faqs .faq .question.show button i.fa-plus,
.section-service .panel-heading.active,
.section-service .toggle__label-text.collapsed,
.toggle__label-icon .icon-active,
.work_items_content {
    display: none;
}

.section-service .home-page .toggle__control:hover .toggle__label-icon .tabs-icon svg {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    color: var(--primary-color);
}

.section-service .home-page .panel-default>.panel-heading {
    background: 0 0;
    padding: 50px 0;
}

.project_menu .search_project .form-control,
.section-service .home-page .recr-content {
    border: none;
}

.section-service .home-page .panel-group .panel-heading+.panel-collapse>.panel-body {
    border-top: none;
}

.section-service .recr-content.active {
    background-image: url(/upload/new/woman-tablet.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    transition: background .2s, border .2s, border-radius .2s, box-shadow .2s;
    padding: 5% 3%;
    min-height: 375px;
    display: block;
}

.section-service .recr-content .panel-body {
    max-width: 1250px;
    min-height: 375px;
    margin: auto;
    display: flex;
    position: relative;
    align-items: center;
}

.section-service .recr-content .services-background-overlay {
    background-color: #000;
    opacity: .7;
    transition: background .2s, border-radius .2s, opacity .2s;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    min-height: 375px;
}

.section-service .column-services {
    display: flex;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    align-items: center;
    width: 100%;
}

.section-service .column-services .services-heading ul.heading-title {
    padding-left: 130px;
}

.section-service .column-services .services-heading span.heading-title {
    color: #fff;
    font-size: 44px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 2;
    margin-bottom: 20px;
    transition: background .3s, border .3s, border-radius .3s, box-shadow .3s, transform var(--e-transform-transition-duration, .4s);
}

.button-link,
.section-service .button-link {
    display: inline-block;
    line-height: 1;
    font-size: 15px;
    padding: 0;
    color: #fff;
    fill: #fff;
    text-align: center;
    transition: .3s;
}

.button-content,
.section-service .column-services .button-content {
    display: flex;
    justify-content: center;
    padding: 20px 20px 20px 0;
}

.button-content .button-icon,
.section-service .column-services .button-content .button-icon {
    flex-grow: 0;
    order: 15;
}

.section-service .column-services .button-content span.button-text {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 20px;
    flex-grow: 1;
    order: 10;
    display: inline-block;
}

.section-service .column-services .button-icon {
    transition: .3s;
    transform: rotate(0);
    color: #fff;
    background-color: var(--second-color);
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 100%;
    padding: 3px;
    margin-left: 15px;
    order: 15;
}

.button-link:hover .button-icon,
.section-service .column-services .button-link:hover .button-icon {
    background-color: #fff;
    color: #000;
    transition: .3s;
    transform: rotate(45deg);
}

.button-icon svg,
.section-service .column-services .button-icon svg {
    width: 16px;
    height: auto;
}

.section-service .heading-title {
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 1px;
    word-spacing: 1px;
}

.section-service .column-services ul li {
    position: relative;
    display: block;
    font-size: 18px;
    margin-bottom: 12px;
    padding-left: 30px;
}

.section-service .column-services ul li:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    left: 0;
    top: 10px;
}

.section-service .column-services ul li:after {
    content: "";
    position: absolute;
    height: 6px;
    width: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: transparent transparent #000 #000;
    left: 5px;
    top: 15px;
    transform: rotate(-38deg);
}

.vert-tab>div {
    margin: 0;
    width: 100%;
    height: 100%;
    transition: .5s;
    overflow: hidden;
}

.recr-content {
    background: #fff;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 36px 28px;
    margin-top: 36px;
    border: 1px solid;
}

.vert_tab_image_wrrapeer {
    display: flex;
    align-items: center;
}

.vert-tab-content h2 {
    font-size: 74px;
    line-height: 81px;
    margin-bottom: 30px;
}

.vert-tab-content h4 {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 20px;
}

.vert-tab-content p {
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0;
    text-align: left;
    max-width: 96%;
    color: #000a19;
    margin-left: 0;
    margin-right: auto;
}

.package .innerPage .text-list li,
.project_menu input.form-control.typeahead,
.recr-content.active,
.vert-tab-content {
    width: 100%;
}

.recr-content.active {
    background: #fff;
    border-color: #ababc8;
}

.recr-content img {
    max-width: 100%;
    height: 426px;
}

@media (min-width:768px) {
    .section-service .column-services .services-col-50 {
        width: 50%
    }
}

.section-service .home-page .recr-content {
    border-style: solid;
    margin: 0;
    border-color: #737373;
    border-radius: 0;
}

.section-service .home-page .recr-content._0 {
    border-style: solid;
    border-width: 1px 0;
    border-color: #737373;
    border-radius: 0;
}

.section-service .home-page .recr-content._1,
.section-service .home-page .recr-content._2,
.section-service .home-page .recr-content._3 {
    border-width: 0 0 1px;
}

.section-faqs .block.block-how-2 .how-step .step-title {
    color: var(--primary-color);
    position: relative;
    font-size: 30px;
    color: var(--primary-color);
    font-weight: 500;
    margin: 0 0 24px;
    line-height: initial;
}

.section-faqs .large-offset-left {
    padding-right: 5rem;
}

.section-faqs {
    background: linear-gradient(180deg, #f3f5f9 20.45%, rgba(0, 0, 0, 0) 56%);
    padding: 40px 0 20px;
}

.section-faqs .block.block-title h3 {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--primary-color);
    display: block;
    padding: 0;
    margin-bottom: 30px;
}

.section-faqs .block.how-step {
    padding: 5rem 0;
}

.section-faqs .tab-list_big_title ul.step-features {
    list-style: none;
    margin: 0;
    line-height: inherit;
    margin-bottom: 30px;
}

.section-faqs .tab-list_big_title .step-title .number {
    font-size: 64px;
    position: absolute;
    top: -36px;
    left: -70px;
}

.section-faqs .large-offset-right {
    padding-left: 5rem;
}

.section-faqs .tab-list_big_title .step-features i {
    margin-left: -28px;
    margin-right: 8px;
    color: var(--primary-color);
}

@media screen and (max-width:63.9375em) {
    .section-faqs .block.block-how-2 .how-step .step-title {
        text-align: center
    }

    .section-faqs .block.block-how-2 .how-step .step-title .number {
        font-size: 35px;
        position: initial;
        display: block
    }

    .section-faqs .block.block-how-2 .how-step .step-features i {
        margin-left: 0
    }
}

.section-faqs .step-features li {
    font-size: 17px;
    line-height: 2;
    padding-left: 30px;
}

.section-faqs .faqs h3 {
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 400;
}

.section-bang-gia .nav-tabs,
.section-faqs .faq:last-child .question {
    border-bottom: none;
}

.section-faqs .section-faqs .faq .question {
    border-bottom: 1px solid #ebedf1;
    padding: 16px 0;
}

.link--ani-arrow,
.section-faqs .faq .question.show button i.fa-minus,
.testimonials-slider .carousel button:hover .onHover,
svg.i-ani-arrow-icon {
    display: inline-block;
}

.section-faqs .faq .question .question-title {
    margin: 16px 0;
    color: inherit;
    font-weight: 500;
    font-size: 17px;
}

.section-faqs .faq .question button {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: 0 0;
    padding: 0 64px 0 0;
    border: 0;
    border-radius: 0;
    line-height: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    top: 0;
    outline: 0;
    text-align: left;
    font-weight: 600;
    color: #262626;
    line-height: inherit;
    cursor: pointer;
}

.section-faqs .faq .question button i.fa {
    position: absolute;
    right: 0;
    display: block;
    color: var(--primary-color);
    font-size: 22px;
    font-weight: 400;
    line-height: inherit;
}

.section-faqs .faq .question .answer {
    max-height: 0;
    overflow: hidden;
}

.section-faqs .faq .question.show .answer {
    margin-top: 15px;
    max-height: 1000px;
}

.section-faqs .faq .question .answer p {
    color: #4c4c4d;
    font-weight: 300;
    margin-bottom: 16px;
    line-height: 1.5;
    font-size: 17px;
}

.section-faqs .faq .question .answer p a {
    font-weight: 400;
}

.section-service-1 .slider_test {
    width: 100000px;
    transform: translateX(0);
    animation: 8.03951s linear infinite marqueeAnimation-13247680;
}

@media (min-width:1200px) {
    .section-service-1 .ul-damme {
        display: flex
    }

    .section-service-1 .ul-damme li {
        white-space: nowrap
    }
}

.section-service-3.section-text-animation-slide {
    background-color: var(--primary-color);
    padding: 100px 100px 50px;
    position: relative;
}

.section-service-3 .text-animation-slide {
    position: relative;
}

.section-service-3 .text-animation-slide .text-slide {
    opacity: 0;
    padding-left: 0;
    position: absolute;
}

@media (min-width:670px) {
    .section-service-3 .text-animation-slide {
        display: contents
    }

    .section-service-3 .text-animation-slide .text-slide {
        padding-left: 1rem
    }
}

.section-service-3 .text-animation-slide span {
    font-size: 60px;
    font-weight: 400;
}

.section-service-3.section-text-animation-slide .container {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 1450px;
    width: 100%;
}

.section-service-3 .block-column {
    flex-grow: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.section-service-3 .thiet-ke-logo {
    padding: 70px 0 20px;
}

.section-service-3.section-text-animation-slide .heading-service h1 {
    font-weight: 400;
    color: #fff;
    font-size: 30px;
}

.section-service-3 .des-service p {
    font-weight: 400;
    color: #fff;
    font-size: 20px;
}

.section-service-3 .des-service p strong,
.section-service-3 .des-service p strong a {
    color: var(--second-color);
    font-weight: 500;
}

.section-service-3.section-text-animation-slide h2 {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    font-size: 60px;
    font-weight: 500;
    position: relative;
}

.section-service-3 .text-slide {
    position: absolute;
    opacity: 0;
}

.section-service-3 .letter {
    position: relative;
    float: left;
    transform: translateZ(25px);
    transform-origin: 50% 50% 25px;
}

.section-service-3 .letter.out {
    transform: rotateX(90deg);
    transition: transform .32s cubic-bezier(.55, .055, .675, .19);
}

.section-service-3 .letter.behind {
    transform: rotateX(-90deg);
}

.section-service-3 .letter.in {
    transform: rotateX(0);
    transition: transform .38s cubic-bezier(.175, .885, .32, 1.275);
}

.section-service-3 .wisteria {
    color: #8e44ad;
}

.section-service-3 .belize {
    color: #2980b9;
}

.section-service-3 .pomegranate {
    color: #c0392b;
}

.section-service-3 .green {
    color: #16a085;
}

.section-service-3 .midnight {
    color: #2c3e50;
}

.section-bang-gia {
    padding: 50px 0 0;
}

.main-bg-color {
    background-color: var(--primary-color);
    position: relative;
    color: #fff;
    padding: 0 0 150px;
}

.section-bang-gia .container-fluid {
    max-width: 1438px;
    width: 100%;
    margin: 0 auto;
}

.section-bang-gia .nav-tabs .nav-link.active {
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
}

.section-bang-gia .nav-tabs .nav-link {
    margin-right: 1rem;
    border-radius: .25rem;
    border: 1px solid var(--primary-color);
}

.section-bang-gia h2 {
    font-size: 45px;
    line-height: 56px;
    text-align: center;
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 60px;
}

.package,
.package h3,
.package h4,
.package ul+h4 {
    font-weight: 600;
}

.package h3,
.package h5 {
    text-transform: uppercase;
}

.packageImg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

.megapackage,
.package,
.package h3 {
    position: relative;
}

.package.paralax-image {
    min-height: 500px;
}

.package {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
    -ms-transition: none !important;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    padding-left: 50px !important;
    z-index: 2;
    color: rgba(var(--main-bg-color), 1);
    font-size: 12px;
    text-transform: capitalize;
}

.package::before {
    width: 96%;
    height: 96%;
    left: 0;
    bottom: 0;
    background: #676767;
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(-10deg);
    transform: rotateY(-10deg);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    transition: .2s linear;
}

.main-bg-color .orderbtn:after,
.package .btn:after,
.package::after,
.price_btn .btn:after {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(-10deg);
    z-index: -1;
    width: 100%;
    content: "";
    right: 0;
    top: 0;
    height: 100%;
}

.package::after {
    background: #fefeff;
    position: absolute;
    bottom: 0;
    left: 0;
    transform-style: preserve-3d;
    transform: rotateY(-10deg);
    -webkit-box-shadow: 0 0 1px transparent;
    box-shadow: 0 0 1px transparent;
}

.package .textClr a small,
.package .textClr a span {
    color: #000;
    font-size: 16px;
}

.package h3,
.package h3 i::before {
    color: #373737;
}

.megapackage {
    background-repeat: no-repeat;
    background-position: 26% bottom;
    background-size: 66%;
}

.package h3 {
    font-size: 40px;
    line-height: 1;
    min-height: 60px;
    margin-bottom: 20px;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    align-items: center;
}

.section-clients-masonry__list__item__bg img,
.section-clients-masonry__list__item__logo img {
    display: none !important;
}

.package h4 {
    margin-top: 1rem;
    font-size: 18px;
    line-height: 1;
}

.package h5,
.section-clients-masonry__filter__right {
    font-weight: 700;
}

.package h3.title-goi-rieng {
    font-size: 30px;
}

.package .package_type h3 svg {
    margin-left: 50px;
    position: absolute;
    transform: translate(180px, 0);
}

.package.active,
.package:hover {
    box-shadow: 12px 0 0 var(--second-color);
    color: #fff;
}

.package .textClr {
    margin-top: 2rem;
    border-top: 1px solid var(--primary-color);
    margin-bottom: 30px;
}

.package.active .textClr,
.package:hover .textClr {
    border-top: 1px solid #fff;
}

.package h3 i {
    font-size: 2rem;
    float: left;
    margin-right: 1rem;
}

.package ul+h4 {
    margin-top: 20px;
    font-size: 18px;
    line-height: 1;
}

.package .ul_pkg {
    max-height: 420px;
    width: 100%;
    overflow: auto;
    margin-top: 30px;
}

.package .btn-2,
.price_btn .btn-2 {
    padding: 8px 32px;
    outline: 0;
}

.main-bg-color .orderbtn,
.package .btn,
.price_btn .btn {
    padding: 8px 32px 8px 3rem;
    font-weight: 600;
    position: relative;
    z-index: 2;
    text-transform: capitalize;
    border: none;
}

.package .btn-2:focus,
.price_btn .btn-2:focus {
    outline: 0;
    box-shadow: none;
}

.package .btn-2,
.package.active .btn-2,
.package:hover .btn-2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    position: relative;
    text-transform: capitalize;
    color: #000;
    font-size: 16px;
}

.price_btn .btn-2,
.price_btn.active .btn-2,
.price_btn:hover .btn-2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    position: relative;
    text-transform: capitalize;
    color: #000;
    font-size: 16px;
}

.package .btn-2:before,
.price_btn .btn-2::before {
    left: -5px;
    bottom: -5px;
}

.package .btn,
.price_btn .btn {
    -webkit-transition: background-color .1s ease-out;
    -moz-transition: background-color .1s ease-out;
    -o-transition: background-color .1s ease-out;
    transition: background-color .1s ease-out;
    color: #000;
    -webkit-perspective: 400px;
    perspective: 1000px;
}

.main-bg-color .orderbtn:after,
.package .btn:after,
.price_btn .btn:after {
    position: absolute;
    bottom: 0;
    left: 0;
    transform-style: preserve-3d;
    transform: rotateY(-20deg);
    -webkit-box-shadow: 0 0 10px transparent;
    box-shadow: 0 0 10px transparent;
    transition: .2s linear;
}

.main-bg-color .orderbtn:before,
.package .btn:before,
.price_btn .btn:before {
    width: 92%;
    height: 92%;
    left: -10px;
    bottom: -10px;
    background: rgb(231 196 21 / 49%);
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(-10deg);
    transform: rotateY(-10deg);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    transition: .2s linear;
}

.main-bg-color .btn-1:after,
.mfp-content button,
.package .btn-1:after,
.price_btn .btn-1:after {
    background: var(--second-color);
}

.package .btn-2,
.package .btn-2:hover,
.price_btn .btn-2:hover {
    color: #000;
}

.main-bg-color .orderbtn:hover:before,
.package .btn:hover:before,
.price_btn .btn:hover:before {
    -webkit-filter: blur(0);
    transition: .5s linear;
    filter: blur(0);
}

.main-bg-color .orderbtn:hover:after,
.package .btn:hover:after,
.price_btn .btn:hover:after {
    transition: .5s linear;
    transform: rotateY(0);
}

.main-bg-color .orderbtn {
    font-size: 16px;
    -webkit-transition: background-color .1s ease-out;
    -moz-transition: background-color .1s ease-out;
    -o-transition: background-color .1s ease-out;
    transition: background-color .1s ease-out;
    color: rgba(var(--second-color), 1);
    -webkit-perspective: 400px;
    perspective: 1000px;
    margin-top: 50px;
}

@-webkit-keyframes floating {
    0% {
        height: 0;
        width: 3px
    }

    50% {
        height: 100%;
        width: 3px
    }

    100% {
        width: 100%
    }
}

@-webkit-keyframes floatingLine {
    0% {
        height: 0;
        width: 4px
    }

    50% {
        height: 100%;
        width: 4px
    }

    100% {
        width: 100%
    }
}

.package .btn-2:after,
.price_btn .btn-2:after {
    background: #e7c415;
    content: "";
}

.package .ul_pkg::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
}

.package .ul_pkg::-webkit-scrollbar {
    width: 5px;
}

.package .ul_pkg::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 10px;
}

.package .ul_pkg ul {
    padding: 0;
    margin: 0;
}

.package .ul_pkg ul li {
    width: 100%;
    margin-top: 10px;
    position: relative;
    font-weight: 600;
    display: inline-block;
    font-size: 14px;
    color: #373737;
}

.package i:before {
    animation: 44s infinite textMulticolor;
}

.package .text-list li:before,
.package .ul_pkg ul li:before {
    font-family: icon-moon !important;
    speak-as: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e901";
    margin-right: 1rem;
    color: var(--green-color);
    animation: 44s infinite textMulticolor;
}

.package h3 small {
    text-transform: capitalize;
}

.package .icon {
    position: relative;
    z-index: 1;
    padding: 3rem .5rem 2rem;
    text-align: center;
    border-radius: .5rem;
    background: #f8f9fc;
    font-size: .75rem;
    margin: 1.5rem auto;
}

.package .icon i {
    font-size: 3rem;
    color: var(--primary-color);
}

.package .icon h5 {
    font-size: 1rem;
}

.package .text-list li {
    width: 48%;
    display: inline-block;
    margin-right: 2%;
    position: relative;
    font-weight: 600;
    font-size: 14px;
    padding: 7px;
}

.package .ul_pkg h5,
.package .ul_pkg ul+h5,
.package .ul_pkg ul+strong,
.package .web-ul_pkg h5,
.package .web-ul_pkg ul+h5,
.package.web-ul_pkg ul+strong {
    margin-top: 1rem;
    display: block;
    padding-left: 1.3rem;
}

.package h5 {
    font-size: 1.2rem;
}

.home-slide,
.package a.underLine {
    cursor: pointer;
}

.megapackage .my-auto h2 {
    color: #fff;
    font-size: 58px;
    margin-bottom: 30px;
    line-height: 71px;
}

.megapackage .my-auto p {
    color: #fff;
    font-size: 18px;
}

.project-sam,
.row-logo-content,
.section-clients-masonry {
    padding: 50px 0;
}

.section-clients-masonry h2.heading-project,
.section-project-masonry h2.heading-project {
    font-size: 45px;
    margin-bottom: 50px;
    line-height: 56px;
    padding: 50px 0 0;
    text-align: center;
    font-weight: 500;
    text-transform: capitalize;
}

.section-clients-masonry__list,
.section-project-masonry__list {
    margin: -4px;
}

.section-clients-masonry__list__item {
    padding: 4px;
    overflow: hidden;
    width: 100%;
}

.section-clients-masonry__list.loading+.section-clients-masonry__list__load-more,
.section-clients-masonry__list__item.show-logo .section-clients-masonry__list__item__logo,
.section-clients-masonry__list__item:hover .section-clients-masonry__list__item__content {
    opacity: 1;
}

.section-clients-masonry__list__item.show-logo .section-clients-masonry__list__item__logo+.section-clients-masonry__list__item__bg {
    opacity: 0;
}

.box-project .show-detail,
.section-clients-masonry__list__item.grid-sizer {
    padding: 0;
}

.section-clients-masonry__list__item__inner {
    position: relative;
    overflow: hidden;
}

.section-clients-masonry__list__item__bg {
    padding-top: 71.4285714286%;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
}

.section-clients-masonry__list__item__bg:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .7s;
    transition: .7s;
    background: #171717;
}

.mfp-fade.mfp-bg.mfp-removing,
.mfp-fade.mfp-wrap.mfp-removing .mfp-content,
.section-clients-masonry__list__item__bg.loaded:before,
.section-clients-masonry__list__load-more {
    opacity: 0;
}

.section-clients-masonry__list__item__logo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: 50%;
    opacity: 0;
    z-index: 5;
    -webkit-transition: .3s;
    transition: .3s;
}

.section-clients-masonry__list__item__content {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    padding: 15px;
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0;
    z-index: 10;
}

.col-footer p a:hover,
.col-footer ul li a:hover,
.p-white,
.section-clients-masonry__list__item__content:hover {
    color: #fff;
}

h2.section-clients-masonry__list__item__content__title {
    font-size: 24px;
    text-align: left;
    color: #fff;
}

.section-clients-masonry__list__item__content__cat {
    font-size: 16px;
    color: #fff;
    overflow: hidden;
    position: absolute;
    bottom: 15px;
    left: 15px;
}

.section-clients-masonry__list__item__content__cat__title {
    font-weight: 700;
    font-size: 16px;
}

.section-clients-masonry__list__item__content__cat ul {
    margin-left: -20px;
}

.section-clients-masonry__list__item__content__cat ul li {
    position: relative;
    padding-left: 20px;
    padding-right: 8px;
}

.section-clients-masonry__list__item__content__cat ul li:before {
    content: "/";
    display: block;
    position: absolute;
    left: 0;
}

.section-clients-masonry__list__item__content__expand {
    position: absolute;
    display: block;
    bottom: 15px;
    right: 15px;
}

.section-clients-masonry__list__item__content__expand img {
    width: 59px;
}

.section-clients-masonry__list__load-more img {
    width: 100px;
    height: auto;
    margin: 0 auto;
    display: none !important;
}

.section-clients-masonry .see-all,
.section-project-masonry .see-all {
    margin-top: 30px;
    padding-right: 20px;
}

@media (min-width:768px) {
    .section-clients-masonry__list {
        margin-left: -4px;
        margin-right: -4px
    }

    .section-clients-masonry__list__item {
        width: 50%;
        padding-left: 4px;
        padding-right: 4px
    }

    .section-clients-masonry__list__item__content__cat {
        width: calc(100% - 60px)
    }

    .section-clients-masonry__list__item__content__cat__title {
        margin-top: 25px
    }

    .section-clients-masonry__list__item__content__cat ul {
        width: 100%
    }

    .section-videos__list__item:hover .section-clients-masonry__list__item__content {
        opacity: 1
    }

    .section-videos__list__item .section-clients-masonry__list__item__content {
        left: 4px;
        right: 4px;
        width: auto
    }

    .section-clients-masonry__filter {
        margin-bottom: 65px
    }

    .section-clients-masonry__filter__right {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        text-align: center
    }

    .section-clients-masonry__filter__right ul {
        margin-left: -30px
    }
}

@media (min-width:1025px) {

    .section-clients-masonry__list__item--big .section-clients-masonry__list__item__content__expand,
    .section-clients-masonry__list__item__content__expand {
        right: 24px;
        bottom: 24px
    }

    .section-clients-masonry__list__item--panel {
        width: 33.3333333333%;
        float: left !important
    }

    .section-clients-masonry__list__item--panel:nth-child(13n + 2) {
        width: 66.6666666667%
    }

    .section-clients-masonry__list__item--panel:nth-child(13n + 10),
    .section-clients-masonry__list__item--panel:nth-child(13n + 5),
    .section-clients-masonry__list__item--panel:nth-child(13n + 9) {
        clear: left;
        width: 33.3333333333%
    }

    .section-clients-masonry__list__item--panel:nth-child(13n + 8) {
        width: 66.6666666667%;
        float: right !important
    }

    .section-clients-masonry__list__item--panel:nth-child(13n + 11) {
        width: 33.3333333333%;
        clear: left
    }

    .section-clients-masonry__list__item--panel:nth-child(13n + 12),
    .section-clients-masonry__list__item--panel:nth-child(13n + 13) {
        width: 33.3333333333%
    }

    .section-clients-masonry__list__item--big .section-clients-masonry__list__item__bg {
        padding-top: 72.959%
    }

    .section-clients-masonry__list__item--big .section-clients-masonry__list__item__content {
        padding-top: 44px
    }

    .section-clients-masonry__list__item--big .section-clients-masonry__list__item__content__cat {
        bottom: 24px
    }

    .section-clients-masonry__list__item--small .section-clients-masonry__list__item__bg {
        padding-top: 72.7272727273%
    }

    .section-clients-masonry__list__item__content {
        padding: 40px
    }

    .section-clients-masonry__list__item__content__title {
        font-size: 32px
    }

    .section-clients-masonry__list__item__content__cat {
        left: 30px;
        bottom: 20px;
        font-size: 20px;
        width: calc(100% - 115px)
    }

    .section-clients-masonry__list__item__content__cat ul li,
    .section-clients-masonry__list__item__content__cat__title {
        font-size: 20px
    }

    .section-clients-masonry .see-all {
        padding-right: 0;
        padding-left: 0;
        text-align: left;
        margin: 50px auto
    }

    .section-clients-masonry__filter {
        margin-bottom: 40px;
        font-size: 20px
    }

    .section-clients-masonry__filter__left {
        padding-left: 80px
    }
}

.see-all {
    text-align: right;
    white-space: nowrap;
    line-height: 1;
}

.section-project-masonry .see-all a,
.section-project-masonry .view-more a,
.see-all a {
    display: inline-block;
    font-size: 20px;
}

.section-project-masonry .see-all a:before,
.section-project-masonry .view-more a:before,
.see-all a:before {
    content: "";
}

.see-all a:hover .see-all__icon {
    -webkit-transform: translate(10px, -10px);
    transform: translate(10px, -10px);
}

.see-all__icon {
    display: inline-block;
    vertical-align: bottom;
    margin-left: 20px;
    -webkit-transition: .3s;
    transition: .3s;
}

.see-all__icon img {
    height: 17px;
    width: auto;
    display: block;
}

.section-clients-masonry__filter,
.section-project-masonry__filter {
    font-size: 18px;
    margin-bottom: 45px;
}

.section-clients-masonry__filter__right ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.section-clients-masonry__filter__right ul li {
    position: relative;
}

.section-clients-masonry__filter__right ul li.active,
.section-clients-masonry__filter__right ul li:hover {
    color: #9c9b9b;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content,
.section-clients-masonry__filter__right ul li.active:before,
.section-clients-masonry__filter__right ul li:hover:before {
    opacity: 1;
}

.a-view-more .skin-image-op0-when--white,
.package-popup .content-logo .title_diamond,
.package-popup .content-logo .title_emeral,
.package-popup .content-logo .title_ruby,
.section-clients-masonry__filter__right ul li:first-child span,
.section-clients-masonry__filter__right ul li:first-child:before,
.testimonials-slider .carousel button .onHover,
.testimonials-slider .carousel button:hover span:not(.onHover),
.view-more-a .skin-image-op0-when--white {
    display: none;
}

.section-clients-masonry__filter__right ul li a {
    display: block;
    padding-left: 25px;
    padding-right: 25px;
    position: relative;
    font-weight: 500;
}

.category-dropdown .ul-drop-list.ul-has-child1 li.ng-scope.ng-has-child2 a:hover,
.section-clients-masonry__filter__right ul li a:hover,
.ul-paging li a:hover {
    color: var(--second-color);
}

.col-navigation-content ul li a:hover,
.info-box-project a:hover,
.section-clients-masonry__filter__right ul li.active a,
.section-project a.let-s-chat-link.project-link:hover .p-project.black {
    color: var(--primary-color);
}

.section-clients-masonry__filter__right ul li span,
.section-clients-masonry__filter__right ul li:before {
    position: absolute;
    width: 2px;
    height: 15px;
    display: block;
    bottom: 5px;
    left: 0;
}

.section-clients-masonry__filter__right ul li:before {
    z-index: 2;
    content: "";
    background: #9c9b9b;
    opacity: 1;
}

.testimonials {
    background: linear-gradient(90deg, var(--c1, #f6d365), var(--c2, #fda085) 51%, var(--c1, #f6d365)) var(--x, 0) / 200%;
    --c1: #085951;
    --c2: #0e9a8c;
    padding: 70px 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.testimonials2 {
    background: #f4f4f7;
}

.testimonials .row {
    align-items: center;
    margin: 20px auto 0;
}

.testimonials h2.main-heading {
    font-size: 45px;
    margin-bottom: 50px;
    line-height: 56px;
    padding: 0;
    text-align: center;
    font-weight: 500;
    text-transform: capitalize;
}

.testimonials-slider .carousel-inner {
    background-image: url(http://localhost:8888/giaiphapprofile/upload/files/testi_user_bg.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100%;
    min-height: 400px;
    margin-top: 80px;
    padding: 20px 25px;
    overflow: visible;
}

.testimonials-slider .logo-wrapper {
    max-width: 116px;
    width: 116px;
    height: 116px;
    margin: -80px auto 50px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: rgba(50, 50, 93, .25) 0 6px 12px -2px, rgba(0, 0, 0, .3) 0 3px 7px -3px;
    background: #fff;
    position: relative;
}

.bg-white2 .swiper-button-next,
.bg-white2 .swiper-button-prev,
.blogs-slider .swiper-button-next,
.blogs-slider .swiper-button-prev {
    top: 50%;
    padding: 0;
    cursor: pointer;
    background: var(--primary-color);
    line-height: 40px;
    opacity: 0;
    text-align: center;
    width: 30px;
    z-index: 2;
    outline: 0;
}

.testimonials-slider .logo-wrapper img {
    position: absolute;
    width: 100%;
    max-height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.testimonials-slider .review-text p {
    color: var(--black);
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}

.reviewer-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
}

.review-card .name,
.reviewer-info .client-name {
    color: var(--black);
}

.reviewer-info span {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: var(--black);
}

.carousel-control-next,
.carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 0;
    opacity: .5;
    transition: opacity .15s;
}

.ruby-popup,
.white-popup {
    background: #fff;
    padding: 5px;
    margin: 50px auto;
    height: 100%;
    max-width: 800px;
    position: relative;
}

.testimonials-slider .carousel .buttons {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
}

.testimonials-slider .carousel button {
    opacity: 1;
    position: unset;
    padding: 0;
    min-width: unset;
    width: unset;
    font-size: 0;
    cursor: pointer;
}

.testimonials-slider .owl-carousel .owl-nav {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    text-align: center;
}

.testimonials-slider .owl-carousel .owl-nav button {
    opacity: 1;
    position: unset;
    padding: 0;
    min-width: unset;
    font-size: 0;
    height: 42px;
    width: 42px;
}

.testimonials-slider .carousel .bg-arrow_hovered_left {
    width: 42px;
    height: 42px;
    background: url("http://localhost:8888/giaiphapprofile/upload/new/arrows-left-right.png");
}

.testimonials-slider .carousel .bg-arrow_hovered_right {
    width: 42px;
    height: 42px;
    background: url("http://localhost:8888/giaiphapprofile/upload/new/arrows-left-right.png") -42px 0;
}

.testimonials-slider .carousel .bg-arrow_simple_left {
    width: 42px;
    height: 42px;
    display: block;
    background: url("http://localhost:8888/giaiphapprofile/upload/new/arrows-left-right.png") -84px 0;
}

.testimonials-slider .carousel .bg-arrow_simple_right {
    width: 42px;
    height: 42px;
    display: block;
    background: url("http://localhost:8888/giaiphapprofile/upload/new/arrows-left-right.png") -126px 0;
}

.white-popup {
    transition: 1s;
    width: 70%;
    overflow: auto;
}

.gallery-icon.landscape img {
    border-style: none;
    height: auto;
    max-width: 100%;
}

.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: .15s ease-out;
    -moz-transition: .15s ease-out;
    transition: .15s ease-out;
}

.blogs-slider .item-image-news,
.news-box .news-inner-img {
    height: 275px;
    position: relative;
    margin-bottom: 20px;
}

.blogs-slider .item-image-news img {
    width: auto;
    max-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.bg-white2 .tab-content:hover .swiper-button-next,
.bg-white2:hover .swiper-button-next,
.blogs-slider:hover .swiper-button-next {
    right: 5px;
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.bg-white2 .tab-content:hover .swiper-button-next.swiper-button-disabled,
.bg-white2:hover .swiper-button-next.swiper-button-disabled,
.bg-white2:hover .swiper-button-prev.swiper-button-disabled,
.blogs-slider:hover .swiper-button-next.swiper-button-disabled,
.blogs-slider:hover .swiper-button-prev.swiper-button-disabled {
    opacity: .35;
}

.bg-white2 .swiper-button-next,
.blogs-slider .swiper-button-next {
    font-size: 0;
    position: absolute;
    display: block;
    height: 40px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: #fff;
    border: none;
    border-radius: 0;
    right: -35px;
    -webkit-transition: .25s;
    transition: .25s;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
}

.blogs-slider .swiper-button-next:after,
.blogs-slider .swiper-button-prev:after {
    font-size: 24px;
    line-height: 40px;
}

.bg-white2 .swiper-button-prev,
.blogs-slider .swiper-button-prev {
    font-size: 0;
    position: absolute;
    display: block;
    height: 40px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: #fff;
    border: none;
    border-radius: 0;
    left: -35px;
    -webkit-transition: .25s;
    transition: .25s;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
}

.bg-white2:hover .swiper-button-prev,
.blogs-slider:hover .swiper-button-prev {
    left: 5px;
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.bg-white2 .swiper-button-next:after,
.bg-white2 .swiper-button-prev:after {
    font-size: 40px;
    line-height: 30px;
}

.mfp-fade.mfp-bg.mfp-ready,
.no-touch .package-nugget-info a:hover {
    opacity: .8;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    transition: .4s ease-out;
}

.mfp-ready .gallery-item {
    margin: 0;
    text-align: center;
}

#ruby-popup .wrap-form {
    position: relative;
    top: 0;
    padding: 20px;
}

#ruby-popup .bgwhite {
    background: #fff0;
    padding: 35px 0 0;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: none;
}

.wrap-form .title {
    color: #fff;
    font-size: 30px;
    margin-bottom: 20px;
}

.ruby-popup {
    transition: 1s;
    width: fit-content;
    overflow: hidden;
}

.logo-contact-form img {
    max-width: 250px;
    width: auto;
    margin: auto;
}

.content-logo {
    margin-top: 40px;
}

.content-logo h3 {
    text-align: center;
    color: #fff;
    font-size: 30px;
    margin: 10px 0;
    display: inline-flex;
}

.bgwhite {
    background: #fff0;
}

.wrap-form input[type="email"],
.wrap-form input[type="number"],
.wrap-form input[type="tel"],
.wrap-form input[type="text"],
.wrap-form textarea {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 0 solid #ddd;
    margin-top: 10px;
    margin-bottom: 25px;
    height: 40px;
    resize: none;
    width: 100%;
    font-size: 16px;
    padding: 0 15px;
}

.mfp-content button,
.wrap-form button {
    padding: 10px 50px;
    margin-top: 15px;
    cursor: pointer;
}

.mfp-close-btn-in button.mfp-close {
    color: #fff;
    font-size: 40px;
}

.result-success {
    font-size: 16px;
    color: #fff;
}

@media only screen and (max-width:768px) {
    .section-about-information {
        padding: 30px 0 0
    }

    .section-about-information .mega-para {
        width: 100%;
        max-width: 100%;
        margin: 20px auto
    }

    .section-about-information .inner-content,
    .step-title {
        padding: 0
    }

    .section-about-information .row>div,
    .section-about-information .row>div:first-child {
        padding: 12px !important
    }

    .section-about-information .home-about {
        transform: translate(20px, 0);
        width: 100%;
        max-width: 400px
    }

    .primary-heading-box .main-heading {
        font-size: 36px
    }

    .section-about-information .container.home-page .mega-para {
        margin: 0;
        width: 100%;
        max-width: 100%;
        font-size: 16px
    }

    .ruby-popup {
        width: 100%;
        height: 100%
    }
}

.package-nugget-info,
.package-popup-trigger {
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.mfp-content button {
    color: #2c2524;
    font-size: 18px;
    border: 0;
    border-radius: 5px;
    transition: .3s ease-out;
    -moz-transition: .3s ease-out;
    -webkit-transition: .3s ease-out;
    -o-transition: .3s ease-out;
    font-weight: 500;
}

.package-popup .img-replace {
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    color: transparent;
    white-space: nowrap;
}

.package-nugget-info {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}

.package-nugget-info a {
    position: relative;
    font-size: 14px;
    color: #5e6e8d;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    transition: .2s;
}

.package-nugget-info span {
    vertical-align: middle;
    display: inline-block;
}

.package-nugget-info .package-nugget-info-arrow {
    fill: #5e6e8d;
}

.package-popup-trigger {
    display: block;
    width: 170px;
    margin: 3em auto;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 50em;
    background: #35a785;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .07);
}

.section-project,
.section-project .column-round-outline,
.section-project .div-block-project,
.section-project .div-block-project.project-home {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
}

.package-popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(94, 110, 141, .9);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .3s, visibility 0s .3s;
    -moz-transition: opacity .3s, visibility 0s .3s;
    transition: opacity .3s, visibility 0s .3s;
    z-index: 99999999;
}

.package-popup.is-visible {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity .3s, visibility;
    -moz-transition: opacity .3s, visibility;
    transition: opacity .3s, visibility;
}

.diamond.is-visible .package-popup-container,
.emerald.is-visible .package-popup-container,
.ruby.is-visible .package-popup-container {
    background-position: center center;
    background-repeat: no-repeat;
    max-width: 100%;
    min-height: 600px;
    padding: 30px 5px;
    margin: 100px auto;
    transition: 1s;
    background-size: cover;
    position: relative;
}

.package-popup-container {
    position: relative;
    width: 90%;
    max-width: 400px;
    margin: 4em auto;
    background: #fff;
    border-radius: .25em .25em .4em .4em;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-backface-visibility: hidden;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s;
}

.ruby.is-visible .package-popup-container {
    background-image: url(https://thuyan.com.vn/upload/images/banner-dich-vu/DIAMOND-03.webp);
}

.emerald.is-visible .package-popup-container {
    background-image: url(https://thuyan.com.vn/upload/images/banner-dich-vu/DIAMOND-01.webp);
}

.diamond.is-visible .package-popup-container {
    background-image: url(https://thuyan.com.vn/upload/images/banner-dich-vu/DIAMOND-02.webp);
}

.package-popup-container .wrap-form p {
    padding: 3em 1em;
}

.wrap-form button {
    background: #e7c415;
    color: #2c2524;
    font-size: 15px;
    border: 0;
    border-radius: 5px;
    transition: .3s ease-out;
    -moz-transition: .3s ease-out;
    -webkit-transition: .3s ease-out;
    -o-transition: .3s ease-out;
    font-weight: 700;
}

.package-popup-container .package-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
}

.package-popup-container .package-popup-close::after,
.package-popup-container .package-popup-close::before {
    content: "";
    position: absolute;
    top: 12px;
    width: 14px;
    height: 3px;
    background-color: var(--white);
}

.package-popup-container .package-popup-close::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 8px;
}

.package-popup-container .package-popup-close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 8px;
}

.is-visible .package-popup-container {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

@media only screen and (min-width:1170px) {
    .package-popup-trigger {
        margin: 6em auto
    }

    .package-popup-container {
        margin: 8em auto
    }
}

.diamond_btn button,
.emerald_btn button,
.ruby_btn button {
    width: 100%;
    background: #fff0;
    border: none;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

.section-project {
    display: flex;
    width: 100vw;
    height: 100%;
    padding: 0 20px 100px;
    margin: 40px 0;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.section-project .column-round-outline {
    display: flex;
    width: 33.333%;
    height: 700px;
    min-height: auto;
    margin-right: 0;
    margin-left: 0;
    padding: 0 35px;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    border: 1px #000;
    border-radius: 20px;
}

.section-project .caswde-study-image {
    overflow: hidden;
    width: calc((100vw - 120px) / 3);
    height: calc((100vw - 120px) / 3);
    max-width: none;
    padding-right: 20px;
    -o-object-fit: cover;
    object-fit: cover;
}

.section-project .column-round-outline.project-info {
    height: calc((100vw - 120px) / 3);
    margin-top: 80px;
    margin-right: 35px;
    margin-bottom: 80px;
    padding-top: 0;
    padding-right: 35px;
    padding-bottom: 0;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.section-project .div-block-project.project-home {
    display: flex;
    height: 100%;
    max-height: 90vh;
    padding-bottom: 40px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.section-project .div-block-project {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 50%;
    padding-top: 0;
    padding-bottom: 0;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.section-project .heading-project {
    padding-bottom: 40px;
    font-size: 40px;
}

.section-project .div-block-24 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    max-height: 500px;
    padding-left: 10px;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.section-project .paragraph-project {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.4;
}

.section-project .project-link {
    max-width: 100%;
    display: inline-block;
}

.section-project .p-project.black {
    font-size: 23px;
    font-weight: 400;
    color: #000;
    letter-spacing: 4px;
}

.section-project .slider-arrow-icon.home {
    overflow: visible;
    width: 40px;
    height: auto;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    color: #000;
    -o-object-fit: fill;
    object-fit: fill;
}

.section-project .slider-arrow-icon {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 10%;
    height: 100%;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.section-project .let-s-chat-link.project-link .project {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    margin-right: 10px;
    margin-left: 10px;
    padding: 60px 0;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #141517;
}

.section-project .let-s-chat-link .project {
    margin-right: 0;
    margin-left: 0;
    border-bottom-color: #141517;
}

.section-project .column-round-outline.project-home {
    padding: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
    margin: 80px 10px 80px 0;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 0;
    background-position: 50% 50%;
    background-size: cover;
    -o-object-fit: fill;
    object-fit: fill;
}

.section-project a.let-s-chat-link.project-link .slider-arrow-icon {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
    transition: .3s;
}

.section-project a.let-s-chat-link.project-link:hover .slider-arrow-icon {
    transform: translate3d(0, 0, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
}

.bot-row-service {
    padding: 45px 0;
}

.list-service {
    position: relative;
    float: left;
    width: 15%;
    color: #fff;
    margin-right: 5%;
}

.info-banner,
.info-banner h1,
.list-service h2,
.list-service span {
    width: 100%;
    position: relative;
}

.list-service h2 {
    float: left;
    text-align: left;
    font-size: 4em;
    line-height: 70px;
    margin: 0 0 5px;
}

.list-service span {
    float: left;
    text-align: left;
    font-size: 1.125em;
    color: #fff;
}

.project-sam h2 {
    font-size: 40px;
    color: var(--primary-color);
    font-weight: 500;
    text-align: center;
    margin-bottom: 40px;
}

.info-banner {
    text-align: center;
    padding: 140px 0;
    color: #fff;
}

.info-banner h2 {
    margin-bottom: 50px;
    color: #fff;
}

.info-banner h1 {
    float: left;
    text-align: center;
    font-size: 3.5em;
    margin: 0 0 45px;
}

.info-banner a {
    position: relative;
    float: left;
    color: #fff;
    font-size: 1.875em;
    padding: 15px 40px;
    border: 2px solid #fff;
    width: 600px;
    margin-left: calc((100% - 600px) / 2);
    text-align: center;
}

.info-banner a:hover {
    background: #fff;
    color: #3bb44a;
}

.section-our-clients .section-our-clients__title {
    font-size: 40px;
    color: #212c3d;
    font-weight: 500;
    margin-bottom: 50px;
    padding: 0 40px;
}

.section-introduction-2 .post,
.section-our-clients {
    padding-left: 10px;
    padding-right: 10px;
}

.skin-image-list__item {
    height: 85px;
    position: relative;
}

.skin-image-list__item img {
    width: auto;
    max-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: filter .3s ease-in-out;
    cursor: pointer;
}

.skin-image-list__item img:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.section-blogs h2 {
    font-size: 40px;
    color: #212c3d;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 50px;
    padding: 0 40px;
}

.section-blogs .item-content-news.hoho {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-blogs .item-news .date-news {
    font-size: 14px;
    font-weight: 200;
    position: relative;
}

.section-blogs .date-news {
    font-size: 14px;
    color: #999;
    margin-top: 5px;
    margin-bottom: 0;
}

.section-blogs .item-news h3,
.section-blogs .item-news h3 a {
    font-size: 18px;
    font-weight: 500;
}

.section-blogs .button-plus {
    background-image: url(http://localhost:8888/giaiphapprofile/upload/files/butt-plus.png);
    background-size: 100% 100%;
    height: 26px;
    width: 26px;
    display: inline-block;
}

@media (max-width:768px) {
    .section-service .title-service h2 {
        padding: 35px 0;
        font-size: 45px
    }

    .section-service .column-services .services-heading span.heading-title {
        font-size: 30px
    }

    .section-service .column-services .button-content span.button-text {
        font-size: 15px
    }

    .section-service .column-services {
        display: block;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        align-items: center;
        width: 100%
    }

    .section-service .column-services .services-col-50 {
        width: 100%
    }

    .section-service .column-services .services-heading ul.heading-title {
        padding-left: 20px
    }

    .section-service .column-services ul.heading-title>li {
        position: relative;
        display: block;
        font-size: 15px;
        margin-bottom: 12px;
        padding-left: 30px
    }

    .section-service .home-page h4.panel-title a {
        font-size: 35px;
        line-height: 1.5
    }

    .section-service .home-page .toggle__control .toggle__label-icon .tabs-icon svg {
        display: block;
        width: 55px;
        height: 55px;
        fill: currentColor;
        transition: .5s
    }

    .section-faqs .large-offset-left {
        padding: 15px
    }

    .section-blogs h2 {
        margin-top: 10px;
        transform: translate(0, 0)
    }

    .section-blogs .item-news img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }
}

.row-footer {
    padding: 55px 0 15px;
}

.col-footer {
    color: #a9a9a9;
}

.col-footer a {
    position: relative;
    color: #a9a9a9;
    float: left;
}

.col-footer p {
    position: relative;
    float: left;
    width: 100%;
    text-align: left;
    font-size: .875em;
}

.col-footer p span {
    position: relative;
    float: left;
    margin-right: 2px;
}

.p-white a[href^="tel:"] {
    color: #fff;
    text-decoration: none;
}

.col-footer h3 {
    position: relative;
    float: left;
    width: 100%;
    font-size: 1.75em;
    font-weight: 700;
    color: #46a147;
    text-align: left;
    margin: 15px 0 20px;
}

.news-inner a,
.ul-paging li.active a {
    font-weight: 600;
}

-slide .ul-slider li img,
.a-box-img,
.a-box-img img,
.box-logo ul,
.box-project-img,
.box-project-img img,
.col-footer ul,
.col-map,
.nav-xs ul,
.nav-xs ul li,
.new-inner-img a {
    position: relative;
    float: left;
    width: 100%;
}

#triangle-down,
.phone-m {
    position: absolute;
    display: none;
}

.col-footer ul li {
    position: relative;
    float: left;
    width: 100%;
    border-bottom: 1px solid #a9a9a9;
}

.col-footer ul li a {
    position: relative;
    float: left;
    width: 100%;
    font-size: 1em;
}

.logo-footer img {
    width: 250px;
}

.phone-m {
    border: 1px solid #25982b;
    left: 10px;
    bottom: 52px;
    background: #fff;
    width: 40%;
    padding: 5px 5px 5px 11px;
    font-size: 16px;
}

.phone-m a:active,
.phone-m a:focus,
.phone-m a:hover {
    color: #25982b;
    text-decoration: none;
}

#triangle-down {
    bottom: 47px;
    z-index: 1000;
    width: 0;
    height: 0;
    left: 16px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #fff;
}

.footer-support {
    background-color: #fefefe;
    color: #000;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    width: 100%;
    padding: 15px 0;
    min-height: 30px;
    border-top: 1px solid #ccc;
    text-align: center;
    z-index: 1000;
}

.p-out,
.row-bot-footer p {
    position: relative;
    float: left;
}

.modal-dialog.modal-lg {
    margin-top: 58px;
}

@media screen and (min-width:1024px) {

    .footer-support,
    div#coccoc-alo-phoneIcon {
        display: none
    }
}

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

    .footer-support .ico,
    .footer-support .ycbg {
        display: inline-block;
        background-color: #25982b;
        color: #fff
    }

    .footer-support {
        background-color: rgba(0, 0, 0, .5);
        text-align: left;
        padding: 10px 0;
        border-top: 0
    }

    .footer-support .ico {
        font-size: 20px;
        margin-right: 5px;
        margin-left: 7px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        line-height: 24px;
        text-align: center;
        border: 0;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box
    }

    .footer-support .fa {
        display: inline-block;
        font: 14px/1 FontAwesome;
        font-size: inherit;
        margin-top: 7px;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

    .footer-support .ycbg {
        padding: 0 15px;
        line-height: 36px;
        height: 36px;
        font-size: 16px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box
    }
}

@media (max-width:1024px) {

    .bg-white2 .swiper-button-next,
    .bg-white2 .swiper-button-prev,
    .blogs-slider .swiper-button-next,
    .swiper-button-prev {
        display: none !important
    }

    .chat-box,
    .coccoc-alo-phone,
    div#at-share-dock a {
        display: none
    }
}

.row-bot-footer p {
    text-align: left;
    color: #a9a9a9;
    padding: 15px 0;
    margin: 0;
}

.row-bot-footer p a {
    color: #a9a9a9;
}

.leave-mess {
    position: fixed;
    right: 10px;
    bottom: 0;
    height: 30px;
    background: #e98124;
    border-radius: 5px 5px 0 0;
}

.a-left-f,
.a-right-f,
.box-logo,
.box-logo-text,
.logo-content-info {
    position: relative;
    float: left;
}

.a-left-f {
    padding: 7px 8px;
}

.a-right-f {
    padding: 5px 20px 5px 10px;
    font-size: 1em;
    line-height: 20px;
    background: #f98f33;
    border-radius: 0 5px 0 0;
    color: #fff;
}

.a-right-f:hover {
    background: #e98124;
    color: #fff;
}

.a-contact {
    color: #fff;
    background: #46a040;
    margin-left: calc((100% - 240px) / 2);
}

.logo-content-info,
.row-logo-content h2 {
    text-align: center;
    margin: 0 0 30px;
    width: 100%;
}

.a-contact:hover {
    background: #fff;
    color: #46a040;
}

.row-logo-content h2 {
    font-size: 2.25em;
    color: #fff;
}

.logo-content-info {
    font-size: 1.125em;
    color: #606060;
    line-height: 180%;
}

.box-logo,
.box-logo ul li a,
.most-commented li a {
    color: #555;
}

.box-logo {
    width: 100%;
    background: #fff;
    min-height: 530px;
}

.box-logo-text {
    width: 100%;
    padding: 25px;
}

.box-logo ul li,
.box-logo-img {
    width: 100%;
    padding: 10px 0;
    position: relative;
    float: left;
    text-align: center;
}

.box-logo h3 {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 2.5em;
    margin: 0 0 20px;
    color: #76c133;
}

.box-logo ul li {
    border-bottom: 1px solid #555;
}

.border-img {
    position: relative;
    float: left;
    width: 120px;
    height: 120px;
    margin-left: calc((100% - 120px) / 2);
    border: 8px solid #65a62b;
    border-radius: 50%;
    background: #fff;
}

.border-img i {
    font-size: 4em;
    line-height: 60px;
    color: #76c133;
    margin-top: calc(50% - 30px);
}

.bg-blue-2b .border-img {
    border: 8px solid #3f617f;
}

.bg-blue-2b .border-img img {
    width: 60px;
    height: 60px;
    margin-top: calc(50% - 30px);
}

.bg-blue-02 .border-img {
    border: 8px solid #067878;
}

.bg-blue-02 .border-img i {
    color: #029292;
}

.a-box-contact {
    position: absolute;
    left: calc((100% - 170px) / 2);
    bottom: 20px;
    padding: 10px 30px;
    margin: 15px 0 0;
    border-radius: 5px;
    color: #fff;
}

.a-box-contact:hover {
    color: #fff;
    background: var(--primary-color) !important;
}

.logo-info-banner {
    position: relative;
    float: left;
    width: 100%;
    padding: 70px 0 60px;
    color: #fff;
}

.logo-info-banner h1 {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 3.9375em;
    margin: 0 0 15px;
}

.logo-info-banner h3 {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 1.5em;
    margin: 0 0 35px;
}

.logo-info-banner form {
    color: #9f9f9f;
    font-size: 1.125em;
}

.logo-info-banner input[type="text"] {
    width: 420px;
    height: 55px;
    margin-bottom: 15px;
    padding-left: 20px;
}

.logo-info-banner button[type="button"] {
    color: #fff;
    background: #76bb2c;
    font-size: 2em;
    line-height: 35px;
    padding: 10px 70px;
    border: 1px solid #76bb2c;
    border-radius: 5px;
    margin-top: 15px;
}

.logo-info-banner button[type="button"]:hover {
    border: solid 1px var(--primary-color);
    background: var(--primary-color);
}

.row-project-content {
    padding: 0 0 35px;
}

.col-navigation-content {
    color: #5b5b5b;
    font-size: 1.125em;
    padding-top: 20px;
    margin-bottom: 40px;
    height: 60px;
}

.col-navigation-content>ul {
    display: block;
    text-align: center;
}

.section-project-masonry__list__item__bg img,
.section-project-masonry__list__item__logo img {
    display: none !important;
}

.col-navigation-content>ul li {
    display: inline-block;
    margin-right: 45px;
}

.col-navigation-content ul li a {
    color: #5b5b5b;
    padding-top: 20px;
    padding-bottom: 20px;
}

.col-navigation-content>ul>li>ul {
    position: absolute;
    top: 100%;
    width: 250px;
    background: #303030;
    z-index: 9999;
    display: none;
}

.col-navigation-content>ul>li>ul>li {
    position: relative;
    float: left;
    width: 100%;
    border-bottom: 1px solid #eee;
}

.col-navigation-content>ul>li>ul li a {
    position: relative;
    float: left;
    width: 100%;
    padding: 10px;
    text-align: left;
    color: #fff;
    font-size: .9em;
}

.box-project {
    position: relative;
    float: left;
    width: 22%;
    background: #fff;
}

.box-project-list .show-detail i {
    padding-top: 45%;
}

.info-box-project {
    position: relative;
    float: left;
    width: 100%;
    padding: 15px 0;
}

.info-box-project a {
    position: relative;
    float: left;
    width: 100%;
    color: #292929;
    font-size: 1.25em;
    line-height: 23px;
    margin-bottom: 10px;
}

.info-box-project p {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    color: #888;
    margin: 0;
}

.a-view-more,
.view-more-a {
    position: relative;
    font-size: 1.3125em;
    color: #000;
    padding: 14px 25px;
    border-radius: 26px;
    line-height: 20px;
    margin: 30px auto;
    border: 1px solid #000;
}

.a-view-more:hover,
.view-more-a:hover {
    background: var(--primary-color);
    border: solid 1px var(--primary-color);
    color: #fff;
}

.a-view-more:hover .skin-image-op0-when--white,
.view-more-a:hover .skin-image-op0-when--white {
    display: block;
    height: 17px;
}

.a-view-more:hover .skin-image-op0-when--black,
.view-more-a:hover .skin-image-op0-when--black {
    display: none;
}

.section-project-masonry__list__item {
    padding: 4px;
    overflow: hidden;
    width: 100%;
}

.section-project-masonry__list.loading+.section-project-masonry__list__load-more,
.section-project-masonry__list__item.show-logo .section-project-masonry__list__item__logo,
.section-project-masonry__list__item:hover .section-project-masonry__list__item__content {
    opacity: 1;
}

.section-project-masonry__list__item.show-logo .section-project-masonry__list__item__logo+.section-project-masonry__list__item__bg {
    opacity: 0;
}

.section-project-masonry__list__item.grid-sizer,
.section_thuong_hieu #service-feature-section .service-description {
    padding: 0;
}

.section-project-masonry__list__item__inner {
    position: relative;
    overflow: hidden;
}

.section-project-masonry__list__item__bg {
    padding-top: 71.4285714286%;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
}

.section-project-masonry__list__item__bg:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .7s;
    transition: .7s;
    background: #171717;
}

.section-project-masonry__list__item__bg.loaded:before {
    opacity: 0;
}

.section-project-masonry__list__item__logo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: 50%;
    opacity: 0;
    z-index: 5;
    -webkit-transition: .3s;
    transition: .3s;
}

.section-project-masonry__list__item__content {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    padding: 15px;
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0;
    z-index: 10;
}

.button-content span,
.nav-show ul li:hover a,
.section-project-masonry__list__item__content:hover,
.section_thuong_hieu #service-feature-section .service-title.service-text-light {
    color: #fff;
}

h2.section-project-masonry__list__item__content__title {
    font-size: 24px;
    text-align: left;
    color: #fff;
}

.section-project-masonry__list__item__content__cat {
    font-size: 16px;
    color: #fff;
    overflow: hidden;
    position: absolute;
    bottom: 15px;
    left: 15px;
}

.section-project-masonry__list__item__content__cat__title {
    font-weight: 700;
    font-size: 16px;
}

.section-project-masonry__list__item__content__cat ul {
    margin-left: -20px;
}

.section-project-masonry__list__item__content__cat ul li {
    position: relative;
    padding-left: 20px;
    padding-right: 8px;
}

.section-project-masonry__list__item__content__cat ul li:before {
    content: "/";
    display: block;
    position: absolute;
    left: 0;
}

.section-project-masonry__list__item__content__expand {
    position: absolute;
    display: block;
    bottom: 15px;
    right: 15px;
}

.section-project-masonry__list__item__content__expand img {
    width: 59px;
}

.section-project-masonry__list__load-more {
    opacity: 0;
}

.section-project-masonry__list__load-more img {
    width: 100px;
    height: auto;
    margin: 0 auto;
    display: none !important;
}

@media (min-width:768px) {
    .section-our-clients {
        padding-left: 0;
        padding-right: 0
    }

    .section-project-masonry__list {
        margin-left: -4px;
        margin-right: -4px
    }

    .section-project-masonry__list__item {
        width: 50%;
        padding-left: 4px;
        padding-right: 4px
    }

    .section-project-masonry__list__item__content__cat {
        width: calc(100% - 60px)
    }

    .section-project-masonry__list__item__content__cat__title {
        margin-top: 25px
    }

    .section-project-masonry__list__item__content__cat ul {
        width: 100%
    }

    .section-videos__list__item:hover .section-project-masonry__list__item__content {
        opacity: 1
    }

    .section-videos__list__item .section-project-masonry__list__item__content {
        left: 4px;
        right: 4px;
        width: auto
    }

    .section-project-masonry__filter {
        margin-bottom: 65px
    }

    .section-project-masonry__filter__right {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        text-align: center
    }

    .section-project-masonry__filter__right ul {
        margin-left: -30px
    }
}

@media (min-width:1025px) {

    .section-project-masonry__list__item--big .section-project-masonry__list__item__content__expand,
    .section-project-masonry__list__item__content__expand {
        right: 24px;
        bottom: 24px
    }

    .section-project-masonry__list__item--panel {
        width: 33.3333333333%;
        float: left !important
    }

    .section-project-masonry__list__item--panel:nth-child(13n + 2) {
        width: 66.6666666667%
    }

    .section-project-masonry__list__item--panel:nth-child(13n + 10),
    .section-project-masonry__list__item--panel:nth-child(13n + 5),
    .section-project-masonry__list__item--panel:nth-child(13n + 9) {
        clear: left;
        width: 33.3333333333%
    }

    .section-project-masonry__list__item--panel:nth-child(13n + 8) {
        width: 66.6666666667%;
        float: right !important
    }

    .section-project-masonry__list__item--panel:nth-child(13n + 11) {
        width: 33.3333333333%;
        clear: left
    }

    .section-project-masonry__list__item--panel:nth-child(13n + 12),
    .section-project-masonry__list__item--panel:nth-child(13n + 13) {
        width: 33.3333333333%
    }

    .section-project-masonry__list__item--big .section-project-masonry__list__item__bg {
        padding-top: 72.959%
    }

    .section-project-masonry__list__item--big .section-project-masonry__list__item__content {
        padding-top: 44px
    }

    .section-project-masonry__list__item--big .section-project-masonry__list__item__content__cat {
        bottom: 24px
    }

    .section-project-masonry__list__item--small .section-project-masonry__list__item__bg {
        padding-top: 72.7272727273%
    }

    .section-project-masonry__list__item__content {
        padding: 40px
    }

    .section-project-masonry__list__item__content__title {
        font-size: 32px
    }

    .section-project-masonry__list__item__content__cat {
        left: 30px;
        bottom: 20px;
        font-size: 20px;
        width: calc(100% - 115px)
    }

    .section-project-masonry__list__item__content__cat ul li,
    .section-project-masonry__list__item__content__cat__title {
        font-size: 20px
    }

    .section-project-masonry .see-all {
        padding-right: 0;
        margin: auto;
        text-align: left
    }

    .section-project-masonry__filter {
        margin-bottom: 40px;
        font-size: 20px
    }

    .section-project-masonry__filter__left {
        padding-left: 80px
    }
}

.project_menu .filter-project-service .search-bar {
    background-color: #e6eeed;
    margin-bottom: 30px;
    padding: 8px 0;
}

.project_menu .filter-project-service,
.project_menu .filter-project-service .search-bar .container {
    position: relative;
    height: 48px;
}

.project_menu .filter-project-service .search-bar ul,
.project_menu .filter-project-service .search-service ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.project_menu .project_menu .search_project .form-control {
    box-shadow: 0 0 0 transparent;
}

.project_menu .search_project .form-control input {
    border-radius: 0;
    height: 25px;
    padding: 0 0 0 7px;
}

.project_menu .search_project .input-search input {
    padding: 0 0 0 20px;
    letter-spacing: 1px;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
    height: 48px;
    border-radius: 0;
    display: block;
}

.project_menu .search_project .form-control input::-webkit-input-placeholder {
    color: #d2d2d2;
}

.project_menu .search_project .form-control input::-moz-placeholder {
    color: #d2d2d2;
}

.project_menu .search_project .form-control input:-ms-input-placeholder {
    color: #d2d2d2;
}

.project_menu .search_project .form-control input:-moz-placeholder {
    color: #d2d2d2;
}

.project_menu .filter-project-service .search-bar ul li.search-form {
    width: 290px;
    height: 48px;
    position: relative;
}

.project_menu .filter-project-service .search-bar ul li,
.project_menu .filter-project-service .search-bar ul li.linhvuc {
    float: left;
    height: 48px;
    line-height: 48px;
    text-align: left;
}

.project_menu .filter-project-service .search-bar ul li.sort {
    float: right;
    height: 48px;
    line-height: 48px;
    text-align: left;
}

.project_menu .filter-project-service .search-bar ul li.sort div.mega-full {
    position: absolute;
    height: 0;
    right: 0;
    background-color: #fff;
    z-index: 1000;
    padding: 0;
    display: block;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    -webkit-box-shadow: 0 0 2px 0 #919191;
    -moz-box-shadow: 0 0 2px 0 #919191;
    box-shadow: 0 0 2px 0 #919191;
}

.project_menu .filter-project-service .search-bar ul li.linhvuc div.mega-full,
.section-project-masonry .category-dropdown .drop-service li div.mega-full {
    top: 120%;
    left: 15px;
    right: 15px;
    background-color: #fff;
    z-index: 1000;
    overflow: hidden;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    position: absolute;
    display: block;
    visibility: hidden;
}

.section-project-masonry .category-dropdown .drop-service li.open div.mega-full,
.section-project-masonry .category-dropdown .drop-service li:hover div.mega-full {
    visibility: visible;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    top: 120%;
}

.section-project-masonry .category-dropdown .drop-service li div.mega-full {
    width: 300px;
    padding: 15px 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-box-shadow: 0 0 2px 0 #919191;
    -moz-box-shadow: 0 0 2px 0 #919191;
    box-shadow: 0 0 2px 0 #919191;
}

.section-project-masonry .category-dropdown .drop-service li div.mega-full ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 48px;
}

.section-project-masonry .category-dropdown .drop-service li div.mega-full ul li {
    float: left;
    height: 48px;
    line-height: 48px;
    text-align: left;
    font-size: 16px;
}

.project_menu .filter-project-service .search-bar ul li.linhvuc {
    padding-left: 25px;
    padding-right: 25px;
}

.project_menu .filter-project-service .search-bar ul li.linhvuc a,
.project_menu .filter-project-service .search-bar ul li.sort a {
    color: #333;
    font-size: 16px;
    cursor: pointer;
    position: relative;
}

.project_menu .filter-project-service .search-bar ul li.linhvuc div.mega-full {
    height: 0;
    padding: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-box-shadow: 0 0 2px 0 #919191;
    -moz-box-shadow: 0 0 2px 0 #919191;
    box-shadow: 0 0 2px 0 #919191;
}

.project_menu .filter-project-search-service .search-service ul li a:hover,
.project_menu .filter-project-service .search-bar ul li.linhvuc a:hover,
.project_menu .filter-project-service .search-bar ul li.sort a:hover {
    color: #085951;
}

.project_menu .filter-project-service .search-bar ul li.open.linhvuc a:after,
.project_menu .filter-project-service .search-bar ul li.open.sort a:after,
.project_menu .filter-project-service .search-bar ul li:hover.linhvuc a:after,
.project_menu .filter-project-service .search-bar ul li:hover.sort a:after {
    content: "";
    display: inline-block;
    height: 0;
    width: 0;
    border: 10px solid transparent;
    border-bottom-color: #fff;
    position: absolute;
    bottom: -16px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    z-index: 1001;
}

.project_menu .filter-project-service .search-bar ul li.open div.mega-full,
.project_menu .filter-project-service .search-bar ul li:hover div.mega-full {
    visibility: visible;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    top: 100%;
    height: auto;
    padding: 15px 0;
}

.project_menu .filter-project-search-service .search-service {
    text-align: center;
    padding: 50px 0 10px;
}

.project_menu .filter-project-search-service .search-service ul li {
    display: inline-block;
    font-size: 13px;
    cursor: pointer;
    margin: 5px 10px;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

.project_menu .filter-project-search-service .search-service ul li a {
    margin: 5px 10px;
    font-size: 16px;
    color: #333;
}

.project_menu .input-search input[type="text"]::placeholder {
    color: #085951;
    opacity: 1;
}

.project_menu .input-search input[type="text"]::-ms-input-placeholder {
    color: #085951;
}

@media only screen and (max-width:767px) {
    .project_menu .filter-project-search-service .search-service {
        padding: 10px 0
    }

    .project_menu .filter-project-service .search-bar ul li.open div.mega-full,
    .project_menu .filter-project-service .search-bar ul li:hover div.mega-full {
        top: 130px;
        height: 500px;
        overflow: auto
    }

    .project_menu .filter-project-service .search-bar ul li.open.linhvuc a:after,
    .project_menu .filter-project-service .search-bar ul li.open.sort a:after,
    .project_menu .filter-project-service .search-bar ul li:hover.linhvuc a:after,
    .project_menu .filter-project-service .search-bar ul li:hover.sort a:after {
        display: none
    }

    .project_menu .filter-project-service .search-bar .search-menu-top ul li {
        height: 100%;
        line-height: 24px
    }

    .filter-project-search-service .search-name-service {
        padding: 0
    }

    .section-du-an .case-sudy-project .title_content h3 {
        font-size: 32px
    }

    .section-du-an .case-sudy-project .title_content p {
        font-size: 16px;
        margin: 0;
        padding: 0 15px
    }

    .section-du-an .case-sudy-project {
        padding: 20px 0 75px
    }

    .project_menu .filter-project-search-service .search-service ul li {
        display: block
    }

    .project_menu .filter-project-search-service .search-service ul li a {
        font-size: 13px;
        color: #333
    }

    .project_menu .filter-project-service .search-bar .sapxep a,
    .project_menu .filter-project-service .search-bar ul li.linhvuc a {
        font-size: 14px
    }
}

.project_menu .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.video-inner {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.video-inner video {
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: auto;
    height: 100%;
}

.plus i,
.plus-s i {
    left: -5.5px;
    top: 4.5px;
    z-index: 999;
}

.section-project-masonry .see-all {
    white-space: nowrap;
    line-height: 1;
    width: 100%;
    text-align: center;
}

.section-project-masonry .see-all a:hover .see-all__icon,
.section-project-masonry .view-more a:hover .see-all__icon {
    -webkit-transform: translate(5px, -5px);
    transform: translate(5px, -5px);
}

.section-project-masonry .view-more {
    text-align: right;
    white-space: nowrap;
    position: relative;
    float: left;
    font-size: 1.3125em;
    color: #000;
    padding: 14px 25px;
    border-radius: 26px;
    line-height: 20px;
    margin: 30px auto;
}

.section-project-masonry .see-all .a-view-more:hover .skin-image-op0-when--white,
.section_thuong_hieu .section-clients-masonry .see-all a:hover .skin-image-op0-when--white {
    display: block;
    position: relative;
    float: left;
}

.section-project-masonry .see-all__icon,
.section_thuong_hieu .section-clients-masonry .see-all .see-all__icon {
    display: inline-block;
    vertical-align: bottom;
    margin-left: 5px;
    -webkit-transition: .3s;
    transition: .3s;
}

.section-project-masonry .see-all__icon img {
    height: 17px;
    width: auto;
    display: block;
}

.clear-left,
.outer-news {
    clear: left;
}

.lazy-load-bg-image {
    background-image: url(https://bratus.co/wp-content/themes/bratus/assets/img/default-image.png);
}

.masonry-item-overlay {
    background-color: #272727;
}

.section-project-masonry__filter__right {
    font-weight: 700;
}

.section-project-masonry__filter__right ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.section-project-masonry__filter__right ul li,
.section_thuong_hieu .service-parent-left .column-wrapper {
    position: relative;
}

.section-project-masonry__filter__right ul li.active,
.section-project-masonry__filter__right ul li:hover {
    color: #9c9b9b;
}

.btn-next:hover,
.btn-prev:hover,
.section-project-masonry__filter__right ul li.active:before,
.section-project-masonry__filter__right ul li:hover:before,
.section_thuong_hieu #service-feature-section .show-on-scroll-1 .service-title {
    opacity: 1;
}

.section-project-masonry__filter__right ul li:first-child span,
.section-project-masonry__filter__right ul li:first-child:before {
    display: none;
}

.section-project-masonry__filter__right ul li a {
    display: block;
    padding-left: 25px;
    padding-right: 25px;
    position: relative;
}

.most-commented li a:hover,
.nav-show .ul-navigation-2 li a:hover,
.nav-show .ul-navigation-2 li a:hover span,
.news .col-news-inner h3:hover,
.news-inner a:hover,
.news-tittle:hover,
.section-project-masonry__filter__right ul li a:hover,
.section-project-masonry__filter__right ul li.active a {
    color: var(--primary-color);
}

.section-project-masonry__filter__right ul li span,
.section-project-masonry__filter__right ul li:before {
    position: absolute;
    width: 2px;
    height: 15px;
    display: block;
    bottom: 5px;
    left: 0;
}

.section-project-masonry__filter__right ul li:before {
    z-index: 2;
    content: "";
    background: #9c9b9b;
    opacity: 1;
}

.category-dropdown {
    padding: 0 0 50px;
    min-width: 100%;
    width: 100%;
}

.section-project-category {
    padding: 5px 0;
    background-color: #e6eeed;
    margin-bottom: 30px;
}

.category-dropdown__inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.category-dropdown .category-item {
    cursor: pointer;
    font-size: 22px;
    color: var(--primary-color);
    position: relative;
    display: block;
}

.category-dropdown .ng-scope .ul-has-child1 {
    position: absolute;
    top: 50px;
    left: 130px;
    padding: 20px 0;
    border-radius: 12px;
    right: 20px;
    max-width: 350px;
    background-color: #f5f6fa;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    -webkit-transform-origin: 100% bottom;
    transform-origin: 100% bottom;
    transition: transform .35s cubic-bezier(.165, .84, .44, 1);
    transition: transform .35s cubic-bezier(.165, .84, .44, 1), -webkit-transform .35s cubic-bezier(.165, .84, .44, 1);
    -webkit-transition: transform .35s cubic-bezier(.165, .84, .44, 1);
    -moz-transition: transform .35s cubic-bezier(.165, .84, .44, 1);
    -ms-transition: transform .35s cubic-bezier(.165, .84, .44, 1);
    -o-transition: transform .35s cubic-bezier(.165, .84, .44, 1);
    z-index: 99;
}

.category-dropdown .ul-drop-list.ul-has-child1 li.ng-scope.ng-has-child2 a {
    font-size: 18px;
    color: var(--primary-color);
}

.category-dropdown .category-dropdown__inner .ul-drop,
.ul-paging,
.ul-project-detail-slide li {
    text-align: center;
}

.category-dropdown .category-dropdown__inner .ul-drop .ng-scope {
    display: inline-block;
    font-size: 18px;
    cursor: pointer;
    margin: 5px 10px;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}
.category-dropdown .category-dropdown__inner .ul-drop .ng-scope:hover, .category-dropdown .category-dropdown__inner .ul-drop .ng-scope.active {
      background-color: #075951;
    color: #FFF;
    border-radius: 20px;
    padding: 4px 20px 7px 20px;
}
.category-dropdown .category-dropdown__inner .ul-drop .ng-scope:hover a, .category-dropdown .category-dropdown__inner .ul-drop .ng-scope.active a{
    color: #FFF;
}
.category-dropdown .category-dropdown__inner .ng-scope {
    position: relative;
    display: block;
    text-align: left;
}

.category-dropdown .category-dropdown__inner .ng-scope a .svg {
    height: 20px !important;
    width: 20px !important;
    position: relative;
    right: -47px;
    top: 12%;
    transform: translate(0, -50%);
}

.category-dropdown ul.category-dropdown__inner .ng-scope a .svg:after,
.category-dropdown ul.category-dropdown__inner .ng-scope a .svg:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    background-color: currentColor;
    transition: transform .4s ease-in-out, opacity .4s ease-in-out;
}

.project__detail {
    padding-bottom: 50px;
    margin-top: 100px;
    margin-bottom: 50px;
}

.project__detail .info-project,
.project__detail-content {
    margin: 40px auto;
    max-width: 90%;
}

.project__detail .project__detail-content h1 {
    font-size: 30px;
    font-weight: 500;
    text-align: center;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: auto;
    max-height: 100%;
    padding: 0;
    color: #075951;
    line-height: 1.3;
    text-transform: uppercase;
}

.project__detail .info-project label {
    font-size: 16px;
    color: #075951;
    padding-bottom: 0;
    font-weight: 500;
    position: relative;
}

.project__detail .info-project h4 {
    margin: 10px 0;
}

.project__detail .row_project_detail-navigation .col-navigation-content {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    text-align: center;
}

.project__detail .row_project_detail-navigation .col-navigation-content ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
}

#image-popup,
#image-popup a img,
.col-slide-news img,
.mid-section .mid-section__heading,
.project__detail .row_project_detail-content .project__detail-image img,
.svg-container.contain-svg svg {
    width: 100%;
}

.project__detail .row_project_detail-content .project__detail-content {
    padding-top: 20px;
    padding-bottom: 20px;
}

.project__detail .row_project_detail-content .project__detail-content p,
.section_thuong_hieu .service-parent-buttom a.buttom-service-view span {
    font-size: 16px;
}

.project__detail .row_project_detail-content .project__detail-content .content-text h2 {
    font-size: 30px;
    color: #212c3d;
    font-weight: 500;
}

.project__detail .row_project_detail-content .project__detail-content .content-text .item-info label {
    color: #000;
}

.icon-fb,
.icon-google,
.plus {
    position: relative;
    float: left;
    height: 20px;
}

.icon-fb {
    width: 45px;
    padding: 2px;
    background: #3d57a9;
    border-radius: 3px;
}

.col-news-inner,
.col-slide-news,
.icon-google,
.plus,
.plus i,
.plus-s,
.plus-s i {
    background: #fff;
}

.icon-fb i {
    position: relative;
    float: left;
    color: #fff;
}

.icon-fb i span {
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    margin-left: 4px;
}

.plus {
    position: relative;
    float: left;
    width: 25px;
    height: 20px;
    border: 1px solid #9ca1ad;
    border-radius: 3px;
    margin-left: 7px;
    padding-left: 7px;
}

.plus i {
    position: absolute;
    color: #9ca1ad;
    line-height: 8px;
}

.icon-google,
.icon-google i {
    color: #dc3418;
    position: relative;
    float: left;
}

.plus span,
.plus-s span {
    position: relative;
    float: left;
    line-height: 20px;
}

.icon-google {
    padding: 2px 5px;
    border: 1px solid #d7d7d7;
    border-radius: 3px;
    margin-left: 5px;
    font-size: 13px;
}

.plus-s {
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    border: 1px solid #d1d1d1;
    border-radius: 3px;
    margin-left: 7px;
    padding-left: 5px;
}

.plus-s i,
.zoom {
    position: absolute;
}

.plus-s i {
    color: #d1d1d1;
    line-height: 8px;
}

.zoom {
    top: 0;
    right: 0;
    font-size: 1.125em;
    cursor: pointer;
}

.col-news-inner h3,
.col-slide-news {
    position: relative;
    width: 100%;
    float: left;
}

.wrapper-slide-news {
    padding: 0 0 20px;
    background-color: #fff;
    margin: 50px 0;
}

.col-slide-news h3 {
    font-size: 2em;
    margin: 0;
    padding: 10px;
    background: #fff;
}

.col-news-inner {
    margin: 10px 0 30px;
}

.col-news-inner h3 {
    margin: 20px 0;
    font-size: 2.5em;
    color: #46a040;
}

.news .article-event-blog h3 {
    padding-bottom: 20px;
    margin-top: 0;
    text-transform: uppercase;
    font-size: 2.25em;
}

.news .article-event-blog .line-horizotal {
    background: #ebebeb;
    height: 2px;
    margin-top: 18px;
}

.news .col-news-inner {
    background: #ebebeb;
    box-shadow: -3px 3px 1px #a5a5a5;
    padding: 10px;
    margin: 0 0 30px;
}

@media screen and (min-width:768px) and (max-width:980px) {
    .news .brand {
        padding-left: 25px
    }
}

.news-box .news-inner-img img {
    width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.news .col-news-inner h3 {
    font-size: 1.5em;
    color: #515151;
    margin-top: 0;
    margin-bottom: 10px;
}

.news-inner-img a img {
    width: 100%;
    border-radius: 5px 0 0 5px;
    margin-top: 5px;
}

.news-inner a {
    color: #333;
    line-height: 1.2;
    font-size: 17px;
    margin-top: 10px;
    margin-bottom: 15px;
    height: 42px;
}

.news-inner p {
    line-height: 155%;
    text-align: left;
    position: relative;
    float: left;
    width: 100%;
    padding: 10px 0;
}

.news-tittle {
    font-size: 2em;
}

.news-inner ul {
    position: relative;
    float: left;
    width: 100%;
    margin: 10px 0;
    padding: 0;
}

.news-inner ul li {
    position: relative;
    float: left;
    width: 100%;
    padding: 5px 0;
}

.post-content .image-blogs {
    margin: 40px 0;
}

.post-content h1 {
    font-size: 24px;
    font-weight: 500;
    color: #212c3d;
}

.post-content p,
.post-content span {
    /*font-size: 16px;*/
    /*font-weight: 200;*/
    color: #212c3d;
    font-family: var(--primary-font);
}

.col-contact {
    margin: 20px 0 40px;
}

.col-contact h3 {
    position: relative;
    float: left;
    width: 100%;
    font-size: 1.5em;
    margin: 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #aaa;
}

.inner-info {
    margin-bottom: 10px;
    margin-right: 10%;
}

.inner-info span {
    position: relative;
    float: left;
    width: 20%;
}

.inner-info input[type="text"] {
    position: relative;
    width: 70%;
    padding: 8px;
}

.inner-info textarea {
    width: 70%;
}

.send-content {
    position: relative;
    float: right;
    padding: 10px 30px;
    background: #075951;
    color: #fff;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 140px;
}

.list-menu,
.nav-show,
.send-content:hover {
    background: var(--primary-color);
}

.send-content:hover {
    color: #fff;
}

.col-map iframe {
    position: relative;
    float: left;
    width: 100%;
    height: 400px;
}

.list-menu {
    position: absolute;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    display: none;
}

.nav-show,
.nav-show ul li {
    padding: 0;
    position: relative;
    width: 100%;
}

.nav-show {
    float: left !important;
    max-height: inherit !important;
    display: none;
    height: 300px;
    overflow-y: scroll;
    overflow-x: none !important;
    z-index: 9999;
    margin-bottom: 5px;
}

.nav-xs,
.show-detail {
    position: absolute;
    display: none;
    left: 0;
}

.nav-show ul li {
    float: left;
    border-radius: 5px;
    transition: none;
    -webkit-transition: none;
    -o-transition: none;
    -moz-transition: none;
}

.nav-show ul li a {
    position: relative;
    float: left;
    width: 100%;
    color: #fff;
    font-size: 1em;
    line-height: 30px;
    padding-left: 10px;
    border-bottom: 1px solid #fff;
}

.nav-show li a span {
    position: relative;
    float: left;
    width: 100%;
    color: #fff;
    font-size: .9375em;
    line-height: 30px;
}

.col-navigation-content-xs {
    border-top: 1px solid #5b5b5d;
    border-bottom: 1px solid #5b5b5d;
    color: #5b5b5b;
    font-size: 1.125em;
    padding: 5px 0;
    margin-bottom: 40px;
    background: #fff;
    display: none;
}

.categories li a:hover,
.nav-xs {
    background: var(--primary-color);
}

.icon-nav-xs i {
    position: relative;
    float: right;
    color: var(--primary-color);
    font-size: 2em;
    cursor: pointer;
}

.nav-xs {
    top: 110%;
    width: 100%;
    z-index: 9999;
    padding: 5px 0;
}

.icon-border,
.nav-xs ul li a,
.nav-xs ul li>ul,
.show-detail a,
.show-detail i {
    position: relative;
    float: left;
}

.nav-xs ul li a {
    width: 100%;
    color: #fff;
    border-bottom: 1px solid #fff;
    padding: 3px 10px;
}

.nav-xs ul li>ul {
    width: calc(100% - 30px);
    margin: 0 15px;
}

.icon-border {
    width: 140px;
    height: 140px;
    margin-left: calc((100% - 140px) / 2);
    border-radius: 100%;
    text-align: center;
}

.icon-border i {
    font-size: 5.6em;
    margin-top: calc(50% - 35px);
    color: #fff;
}

.scroll-top {
    position: fixed;
    right: 10px;
    bottom: 10px;
    height: 40px;
    width: 40px;
    border-radius: 5px;
    background: rgba(0, 0, 0, .5);
    text-align: center;
    cursor: pointer;
    display: none;
    z-index: 9999999;
}

.show-detail,
.show-detail a,
.show-detail i {
    width: 100%;
    height: 100%;
}

.scroll-top i {
    color: #fff;
    font-size: 2em;
    line-height: 25px;
    margin-top: 6px;
}

.show-detail {
    top: 0;
    padding: 0 15px;
    overflow: hidden;
    z-index: 999;
}

.btn-next,
.btn-prev {
    position: absolute;
    top: 50%;
    z-index: 99999;
    opacity: .5;
}

.show-detail a {
    background: rgba(0, 0, 0, .4);
}

.show-detail i {
    padding-top: 35%;
    font-size: 25px;
}

.btn-prev {
    left: 0;
}

.btn-next {
    right: 0;
}

.text-white {
    color: #fff !important;
}

.bot-shadow {
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}

.seperator {
    background-color: #303030;
    height: 2px;
    position: relative;
    width: 22px;
    display: block;
    margin: 10px auto 15px;
}

.solution-block h3 {
    color: var(--primary-color);
    font-size: 1.5em;
    margin: 0;
}

.solution-block .seperator {
    background-color: #029292;
}

.solution-block p {
    color: #555;
    font-size: 1em;
    text-align: justify;
}

.categories li {
    float: left;
    color: #666;
    margin-right: 4px;
    margin-bottom: 4px;
}

.most-commented li,
.sidebar-box {
    margin-bottom: 20px;
    position: relative;
    width: 100%;
    float: left;
}

.categories li a {
    display: block;
    color: #666;
    padding: 8px 9px;
    border: 1px solid #e0e0e0;
    font-size: .9em;
}

.categories li a:hover {
    border: 1px solid #fff;
    color: #fff;
}

.sidebar-box h3 {
    font-size: 1.4em;
    color: var(--primary-color);
    border-bottom: solid 1px var(--primary-color);
    padding-bottom: 10px;
}

.most-commented li {
    margin-left: 10px;
    color: #888 !important;
}

.timeago {
    position: relative;
    float: left;
    width: 100%;
    margin-top: 5px;
}

.post-content h3 {
    position: relative;
    float: left;
    width: 100%;
    margin: 20px 0;
    font-size: 2.8em;
    color: #46a040;
}

.ul-paging li {
    display: inline-block;
    font-size: 1.25em;
}

.ul-paging li a {
    color: var(--primary-color);
    padding: 0 5px;
}

.eng,
.vie {
    width: inherit !important;
    padding-right: 0 !important;
}

.eng {
    margin-right: 0 !important;
}

.eng span {
    line-height: 15px;
    border-right: 1px solid #373737;
    padding-right: 10px !important;
    margin-top: 7.5px;
}

.about-content p,
.mid-section__content__text p {
    line-height: 30px;
    font-size: 22px;
}

input.has-error {
    border: 1px solid red !important;
}

.mailto {
    padding: 10px 30px;
    background: #fff;
    border-radius: 5px;
    color: #46a040;
    border: 1px solid #46a040;
}

.fancybox-lock .fancybox-overlay,
.fancybox-opened {
    z-index: 9999999999 !important;
}

.p-out i.fa-building,
.p-out i.fa-print {
    font-size: 1.2em;
}

.p-out i.fa-mobile-phone {
    font-size: 1.75em;
}

.p-btn {
    position: absolute !important;
    bottom: 2em;
    left: 0;
    width: 100% !important;
}

.next-bx-pager,
.prev-bx-pager {
    position: absolute;
    width: 2em;
    height: 80px;
    cursor: pointer;
}

.prev-bx-pager {
    left: -5px;
}

.next-bx-pager i,
.prev-bx-pager i {
    margin-top: 25px;
    font-size: 2em;
    color: var(--primary-color);
}

.next-bx-pager {
    right: -5px;
}

.fancybox-inner,
.fancybox-outer {
    width: 100% !important;
}

.icon-footer-contact {
    font-size: 1.5em;
}

.fancybox-inner {
    overflow: hidden !important;
}

.chat-face-b-link {
    position: fixed;
    right: 10px;
    top: 285px;
    z-index: 123;
}

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

    .section-project,
    .section-project .caswde-study-image {
        padding: 0
    }

    .section-project .div-block-24 {
        height: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 0;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .section-project .div-block-project.project-home {
        height: 100%;
        max-height: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        min-width: 33.333%
    }

    .section-project .column-round-outline.project-info {
        width: 100%;
        height: auto;
        margin-right: 0;
        padding: 0 0 30px;
        margin-top: 30px;
        margin-bottom: 10px
    }

    .section-project .column-round-outline {
        width: 100%
    }

    .section-project .column-round-outline.project-home {
        overflow: visible;
        height: 100%;
        margin: 10px;
        padding: 0;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        border-radius: 0;
        background-position: 50% 50%;
        background-size: cover;
        -o-object-fit: fill;
        object-fit: fill
    }

    .section-project .column-round-outline.project-home_01 {
        width: 100%;
        height: 350px;
        margin-top: 20px;
        margin-right: 0;
        padding-top: 110px;
        padding-bottom: 110px
    }

    body .chat-face-b-link:hover+.box-chat {
        display: none !important
    }
}

.chat-face-b-link:hover+.box-chat {
    display: block !important;
    right: 56px;
}

.box-chat:hover {
    right: 56px;
}

.box-chat {
    transition: All 1s;
    -webkit-transition: All 1s;
    -moz-transition: All 1s;
    -o-transition: All 1s;
    position: fixed;
    right: -256px;
    top: 285px;
}

.modal-dialog.modal-lg span {
    color: #fff;
    margin-right: 10px;
    font-size: 45px;
}

.mid-section .mid-section__heading h2,
.top-section h1.about-heading-title {
    font-size: 72px;
    line-height: 82px;
    letter-spacing: 1px;
    color: #000;
    text-transform: uppercase;
    font-weight: 400;
}

.bg-rgba .logo-info-banner {
    padding-top: 23px;
}

.top-section {
    padding: 150px 0 50px;
}

.section-banner .container,
.top-section .container.about-page {
    max-width: 1250px;
}

.about-heading {
    max-width: 900px;
}

.about-content {
    width: var(--container-widget-width, 520px);
    max-width: 520px;
    --container-widget-width: 520px;
    --container-widget-flex-grow: 0;
    justify-content: flex-end;
    float: right;
}

.section-banner {
    position: relative;
    padding: 3% 3% 6%;
}

.section-banner .row {
    text-align: center;
    justify-content: center;
}

.section-banner .section-banner_bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
    padding: 5%;
    width: 100%;
    height: 100%;
}

.section-banner .section-banner_bg .section-banner_bg__image img {
    height: auto;
    max-width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    width: 87%;
    vertical-align: middle;
    display: inline-block;
}

.mid-section .mid-section__heading h2 {
    padding-left: 100px;
    padding-bottom: 50px;
}

.mid-section .mid-section__content {
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 50px;
}

.mid-section__content__text {
    width: var(--container-widget-width, 720px);
    max-width: 720px;
    --container-widget-width: 720px;
    --container-widget-flex-grow: 0;
    justify-content: flex-end;
}

.section-contact__column {
    display: flex;
    padding: 100px 0;
}

.section-contact__column .section-contact__column_left {
    width: 60%;
}

.section-contact__column .section-contact__column_right {
    width: 40%;
    display: flex;
    align-content: flex-end;
    align-items: flex-end;
    justify-content: flex-end;
}

.section-contact__column_right_test {
    margin: 90px 0 0;
}

.section-contact__column_right_test p {
    font-size: 22px;
}

.section-contact___column_left_heading h1 {
    font-size: 72px;
    font-weight: 400;
}

.button-content span.button-text {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 20px;
    flex-grow: 1;
    order: 10;
    display: inline-block;
}

.button-icon {
    transition: .3s;
    transform: rotate(0);
    color: var(--primary-color);
    background-color: var(--second-color);
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 100%;
    padding: 3px;
    margin-left: 15px;
    order: 15;
}

.divider {
    display: flex;
}

.divider-separator {
    width: 100%;
    border-top: 1px solid #000;
    display: flex;
    margin: 0;
    direction: ltr;
}

@media screen and (max-width:768px) {
    .section-about-information .container.home-page .row>div:first-child {
        padding: 0 !important
    }

    .news .no-padder-left,
    .news .no-padder-left .img {
        padding: 0
    }

    .news .article-event-blog {
        padding-left: 0
    }

    .news .group {
        padding-bottom: 20px
    }

    .news .no-padder-left .img h3 {
        font-size: 1.5em
    }

    .mid-section__content__text p,
    .top-section .about-content p {
        font-size: 16px;
        line-height: 30px
    }

    .mid-section__content__text,
    .section-contact__column .section-contact__column_left,
    .section-contact__column .section-contact__column_right,
    .top-section .about-content {
        width: 100%
    }

    .top-section h1.about-heading-title p {
        font-size: 30px;
        line-height: 40px
    }

    .mid-section .mid-section__content,
    .mid-section .mid-section__heading {
        padding: 10px 25px
    }

    .mid-section .mid-section__heading h2 {
        font-size: 30px;
        line-height: 40px;
        padding-left: 0;
        padding-bottom: 0
    }

    .section-contact__column {
        display: block;
        padding: 55px 0
    }

    .section-contact___column_left_heading h1 {
        font-size: 40px;
        font-weight: 400
    }

    .section-contact .section-contact__column_right_test p {
        font-size: 20px;
        margin-bottom: 20px
    }

    .section-contact__column_right_test p {
        font-size: 16px
    }

    .section-contact .button-content span.button-text {
        font-size: 18px
    }

    .section-contact__column_right_test {
        margin: 50px 0 0
    }
}

.section-contact {
    padding: 100px 0;
    width: 90%;
    margin: auto;
}

.section-contact .container {
    max-width: 1250px;
    width: 100%;
}

.section-contact h2 {
    font-size: 64px;
    font-weight: 300;
}

.section-contact p {
    font-size: 24px;
    margin-bottom: 50px;
}

.contact-button__link {
    --tw-text-opacity: 1;
    background-color: transparent;
    color: rgb(0 0 0 / var(--tw-text-opacity));
    display: inline-block;
    font-family: GraphikMedium, helvetica, sans-serif;
    font-size: 1em;
    letter-spacing: .5px;
    padding: calc(.45em + 2px) 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.link--ani-arrow {
    height: 2rem;
    line-height: 2rem;
    margin-bottom: 1.5rem;
}

.link--ani-arrow svg.i-ani-arrow-icon {
    height: 28px;
    left: -.25rem;
    position: relative;
    top: -.0625rem;
    transition: transform .2s ease-in;
    vertical-align: middle;
}

.link--ani-arrow .arrow-icon--circle {
    stroke-dasharray: 95;
    stroke-dashoffset: 95;
    transition: stroke-dashoffset .2s ease-in;
}

.link--ani-arrow:hover svg.i-ani-arrow-icon {
    transform: translate3d(5px, 0, 0);
}

.link--ani-arrow:hover .arrow-icon--circle {
    stroke-dashoffset: 0;
}

.svg-container.offset-svg {
    height: 100%;
    position: relative;
    width: 100%;
}

.svg-container.offset-svg svg {
    position: absolute;
}

.svg-container.contain-svg {
    position: relative;
    width: 100%;
}

@media (min-width:0) and (max-width:670px) {
    .flower-set {
        height: 175px !important
    }
}

.flower-set svg .flower-petal {
    fill-opacity: 0;
    stroke-width: .2;
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    -moz-animation: 3s ease-in-out 1s forwards DASH3;
    -webkit-animation: 3s ease-in-out 1s forwards DASH3;
    animation: 3s ease-in-out 1s forwards DASH3;
    fill-opacity: 0;
    transition: 2s ease-out;
}

@keyframes DASH3 {
    0% {
        stroke-dashoffset: 800
    }

    80% {
        stroke-dashoffset: 0;
        fill-opacity: 0
    }

    100% {
        stroke-dashoffset: 0;
        fill-opacity: 1
    }
}

@-webkit-keyframes DASH3 {
    0% {
        stroke-dashoffset: 800
    }

    80% {
        stroke-dashoffset: 0;
        fill-opacity: 0
    }

    100% {
        stroke-dashoffset: 0;
        fill-opacity: 1
    }
}

@-moz-keyframes DASH3 {
    0% {
        stroke-dashoffset: 800
    }

    80% {
        stroke-dashoffset: 0;
        fill-opacity: 0
    }

    100% {
        stroke-dashoffset: 0;
        fill-opacity: 1
    }
}

.flower-set svg {
    bottom: 0;
    height: 100%;
    right: 0;
    width: auto;
}

.flower-set svg .flower-petal.bottom-petal {
    transition-delay: .3s;
}

.flower-set svg .flower-petal.mid-petal {
    transition-delay: .7s;
}

.flower-set svg .flower-petal.top-petal {
    transition-delay: 1s;
}

.flower-bloom svg .flower-petal {
    fill-opacity: 1;
}

.section_thuong_hieu .section-clients-masonry .see-all {
    padding-right: 0;
    padding-left: 0;
    text-align: center;
    margin: 50px auto;
}

.section_thuong_hieu .section-clients-masonry .see-all a {
    position: relative;
    float: left;
    font-size: 1.3125em;
    color: #000;
    padding: 14px 25px;
    border-radius: 26px;
    line-height: 20px;
    margin: 30px auto;
    border: 1px solid;
}

.section_thuong_hieu .section-clients-masonry .see-all a:hover {
    background: #075951;
    border: 1px solid #075951;
    color: #fff;
}

.section_thuong_hieu .section-clients-masonry .see-all a .skin-image-op0-when--white,
.section_thuong_hieu .section-clients-masonry .see-all a:hover .skin-image-op0-when--black {
    display: none;
}

.section_thuong_hieu .service-parent-buttom a.buttom-service-view:hover {
    color: #e7c415 !important;
    --x: 100%;
}

.section_thuong_hieu .secsion-service-left.show-on-scroll-1 {
    transition: .7s cubic-bezier(.85, 0, .12, 1);
    transition-delay: .3s;
    transition-duration: .7s;
    min-height: 491px;
    overflow: hidden;
    clip-path: inset(0 100% 0 0);
    visibility: hidden;
}

.section_thuong_hieu .secsion-service-left.show-on-scroll-1.is-visible,
.section_thuong_hieu .secsion-service-right.show-on-scroll-1.is-visible {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transform: skewY(0);
}

.section_thuong_hieu .secsion-service-right.show-on-scroll-1 {
    transition: .7s cubic-bezier(.85, 0, .12, 1);
    transition-duration: .7s;
    transition-delay: .3s;
    min-height: 491px;
    overflow: hidden;
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
}

.section_thuong_hieu .service-parent {
    padding: 100px 0 50px;
    position: relative;
    z-index: 10;
    overflow: hidden;
    clear: both;
}

.section_thuong_hieu .service-parent-text p {
    color: #353535;
}

.section_thuong_hieu .column-wrapper {
    display: table-cell;
    vertical-align: middle;
}

@media only screen and (min-width:960px) {

    .section_thuong_hieu .service-parent .container,
    .section_thuong_hieu .service-section .container {
        width: 90%;
        max-width: 1360px;
        padding: 0
    }
}

.section_thuong_hieu .column-content h2 {
    font-weight: 500;
}

.section_thuong_hieu .service-parent-left {
    padding-left: 30px;
    padding-right: 30px;
}

.section_thuong_hieu .service-parent-left,
.section_thuong_hieu .service-parent-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-start;
    align-content: center;
}

.section_thuong_hieu .service-parent-module-left,
.section_thuong_hieu .service-parent-module-right {
    margin: 30px 0;
}

.section_thuong_hieu .service-parent-module-left {
    background-color: #f7f7f7;
}

.section_thuong_hieu .service-parent-buttom a.buttom-service-view {
    position: absolute;
    flex: 1 1 auto;
    display: block;
    bottom: -45px;
    margin: 0 auto;
    width: auto;
    padding: 10px 25px;
    z-index: 1;
    text-align: center;
    text-transform: uppercase;
    transition: .5s;
    background: linear-gradient(90deg, var(--c1, #f6d365), var(--c2, #fda085) 51%, var(--c1, #f6d365)) var(--x, 0) / 200%;
    color: #fff;
    box-shadow: 3px 4px 10px 0 rgba(166, 168, 166, .94);
    border-radius: 50px;
    --c1: #085951;
    --c2: #0e9a8c;
}

.section_thuong_hieu .svg-icon {
    width: 90px;
}

@-webkit-keyframes content_fade_left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes content_fade_left {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100px)
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@-o-keyframes content_fade_left {
    0% {
        opacity: 0;
        -o-transform: translateX(-100px)
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0)
    }
}

@keyframes content_fade_left {
    0% {
        opacity: 0;
        transform: translateX(-100px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@-webkit-keyframes content_fade_right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes content_fade_right {
    0% {
        opacity: 0;
        -moz-transform: translateX(100px)
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@-o-keyframes content_fade_right {
    0% {
        opacity: 0;
        -o-transform: translateX(100px)
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0)
    }
}

@keyframes content_fade_right {
    0% {
        opacity: 0;
        transform: translateX(100px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@-webkit-keyframes grve_right_to_left_transition {
    0% {
        -webkit-transform: translateX(100%);
        visibility: hidden
    }

    100% {
        -webkit-transform: translateX(0);
        visibility: visible
    }
}

@-moz-keyframes grve_right_to_left_transition {
    0% {
        -moz-transform: translateX(100%);
        visibility: hidden
    }

    100% {
        -moz-transform: translateX(0);
        visibility: visible
    }
}

@-o-keyframes grve_right_to_left_transition {
    0% {
        -o-transform: translateX(100%);
        visibility: hidden
    }

    100% {
        -o-transform: translateX(0);
        visibility: visible
    }
}

@keyframes grve_right_to_left_transition {
    0% {
        transform: translateX(100%);
        visibility: hidden
    }

    100% {
        transform: translateX(0);
        visibility: visible
    }
}

@-webkit-keyframes clipping_right_in {
    from {
        -webkit-transform: translateX(100%)
    }

    to {
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes clipping_right_in {
    from {
        -moz-transform: translateX(100%)
    }

    to {
        -moz-transform: translateX(0)
    }
}

@-o-keyframes clipping_right_in {
    from {
        -o-transform: translateX(100%)
    }

    to {
        -o-transform: translateX(0)
    }
}

@keyframes clipping_right_in {
    from {
        transform: translateX(100%)
    }

    to {
        transform: translateX(0)
    }
}

@-webkit-keyframes clipping_left_in {
    from {
        -webkit-transform: translateX(-100%)
    }

    to {
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes clipping_left_in {
    from {
        -moz-transform: translateX(-100%)
    }

    to {
        -moz-transform: translateX(0)
    }
}

@-o-keyframes clipping_left_in {
    from {
        -o-transform: translateX(-100%)
    }

    to {
        -o-transform: translateX(0)
    }
}

@keyframes clipping_left_in {
    from {
        transform: translateX(-100%)
    }

    to {
        transform: translateX(0)
    }
}

.section_thuong_hieu .service-parent-wrapper {
    -webkit-animation: 1s cubic-bezier(.85, 0, .12, 1) both clipping_right_in;
    -moz-animation: 1s cubic-bezier(.85, 0, .12, 1) both clipping_right_in;
    -o-animation: 1s cubic-bezier(.85, 0, .12, 1) both clipping_right_in;
    animation: 1s cubic-bezier(.85, 0, .12, 1) both clipping_right_in;
}

.section_thuong_hieu .service-container.container {
    width: 90%;
    max-width: 1360px;
}

.section_thuong_hieu #service-feature-section .service-title-content-wrapper.service-content-large,
.section_thuong_hieu .service-page-title .service-title-content-wrapper.service-content-large {
    max-width: 1170px;
}

.section_thuong_hieu #service-feature-section .service-title-content-wrapper {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.section_thuong_hieu #service-feature-section .service-title {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    font-weight: 700;
    font-style: normal;
    font-size: 68px;
    text-transform: none;
    line-height: 100px;
    letter-spacing: 0;
}

.section_thuong_hieu a.service-btn {
    font-size: 16px;
    display: inline-block;
    padding: 10px 25px;
    line-height: 1.4;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    vertical-align: top;
    margin-top: 3px;
    margin-bottom: 3px;
    outline: 0;
    text-align: center;
    cursor: pointer;
    border: 1px solid #fff;
    color: #fff;
    box-sizing: border-box;
    word-wrap: break-word;
    -webkit-appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    -webkit-transition: color .5s, background-color .5s, background-size .5s, border-color .5s;
    -moz-transition: color .5s, background-color .5s, background-size .5s, border-color .5s;
    -o-transition: color .5s, background-color .5s, background-size .5s, border-color .5s;
    -ms-transition: color .5s, background-color .5s, background-size .5s, border-color .5s;
    transition: color .5s, background-color .5s, background-size .5s, border-color .5s;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

.section_thuong_hieu a.service-btn:hover {
    background-color: #fff;
    border-color: #fff;
    color: #085951;
}

.section_thuong_hieu #service-feature-section {
    background: center top/cover no-repeat #075951;
    height: 90%;
    bottom: 10%;
    right: 0;
    left: 0;
    top: 0;
}

.section_thuong_hieu #service-feature-section,
.section_thuong_hieu .service-page-title {
    position: relative;
    overflow: hidden;
    z-index: 1;
    clear: both;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.section_thuong_hieu #service-feature-section .service-wrapper,
.section_thuong_hieu .service-page-title .service-wrapper {
    display: table;
    width: 100%;
    position: relative;
    z-index: 5;
}

.section_thuong_hieu #service-feature-section .service-content,
.section_thuong_hieu .service-page-title .service-content {
    display: table-cell;
    width: 100%;
}

.section_thuong_hieu .service-content.service-align-center-center,
.section_thuong_hieu .service-content.service-align-left-center,
.section_thuong_hieu .service-content.service-align-right-center {
    vertical-align: middle;
}

@media only screen and (max-width:5119px) {
    .section_thuong_hieu #service-header.service-responsive-overlapping+#service-feature-section .service-wrapper {
        padding-top: 72px
    }
}

.section_thuong_hieu #service-feature-section .service-description p {
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    text-transform: none;
    line-height: 34px;
    letter-spacing: 0;
    color: #fff;
}

.section_thuong_hieu #service-feature-section .service-title-content-wrapper.service-bg-none .service-title {
    opacity: 1;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

.section_thuong_hieu #service-feature-section.service-large-height,
.section_thuong_hieu #service-feature-section.service-large-height .service-wrapper,
.section_thuong_hieu .service-page-title.service-large-height,
.section_thuong_hieu .service-page-title.service-large-height .service-wrapper {
    height: 600px;
}

.section_thuong_hieu .service-parent-text li {
    font-size: 18px;
}

.section_thuong_hieu .secsion-service-left .service-parent-wrapper .service-parent-content.fix-content {
    padding-left: 120px;
}

.section_thuong_hieu@charset "utf-8";

a,
body {
    color: var(--black);
}

a,
a:hover {
    text-decoration: none;
}

.container,
.no-padder,
body,
ul {
    padding: 0;
}

.border-l-r,
.border-left {
    border-left: 1px solid #fff;
}

.border-l-r,
.border-right {
    border-right: 1px solid #fff;
}

.fb-login,
.fb-row {
    height: 40px;
}

.a-top-logo,
.fb-login,
.fb-login a {
    position: relative;
    float: left;
}

#slide,
menu {
    top: 0;
    right: 0;
    width: 0;
}

#slide,
#upper-slide,
.slide-right {
    min-height: 110vh;
}

@media only screen and (max-width: 768px) {
   #slide, .slide-right {
        min-height: 120vh;
    }
}

.section-project,
.section-project .column-round-outline,
.section-project .div-block-24 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
}

.a-right-f:hover,
.top-contact a:hover {
    text-decoration: underline;
}

.col-intro-h3 h1 {
    color: var(--primary-color) !important;
    font-size: 20px;
}

:root {
    --primary-color: #075951;
    --second-color: #e7c415;
    --third-color: #372e2c;
    --white: white;
    --black: black;
    --bg-block: #fff9f8;
    --primary-font: "SFUFutura";
    --secondary-font: "Tourney-Black";
    --wrapper: 192rem;
    --container: 117rem;
}

*,
:after,
:before {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    margin: 0;
    font-family: var(--primary-font);
    font-size: 14px;
    background: var(--white);
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

ul {
    margin: 0;
    list-style: none;
}

.box-project:nth-of-type(4n),
.m-n,
.row {
    margin: 0;
}

a,
button,
li {
    transition: .2s linear;
    -webkit-transition: .2s linear;
    -o-transition: .2s linear;
    -moz-transition: .2s linear;
}

.inner-info textarea:focus,
button:focus,
input {
    outline: 0;
}

.no-padder-left {
    padding-left: 0;
}

.nav-show ul li:last-child,
.news .article-event-blog,
.no-padder-right {
    padding-right: 0;
}

.padder-t-b-xs {
    padding-top: 5px;
    padding-bottom: 5px;
}

.padder-t-b-sm {
    padding-top: 10px;
    padding-bottom: 10px;
}

.padder-t-b-md {
    padding-top: 15px;
    padding-bottom: 15px;
}

.padder-t-b-lg {
    padding-top: 20px;
    padding-bottom: 20px;
}

.p-l-5 {
    padding-left: 5px;
}

.p-l-10 {
    padding-left: 10px;
}

.p-l-15 {
    padding-left: 15px;
}

.p-l-20 {
    padding-left: 20px;
}

.p-l-25 {
    padding-left: 25px;
}

.p-r-5 {
    padding-right: 5px;
}

.p-r-10 {
    padding-right: 10px;
}

.p-r-15 {
    padding-right: 15px;
}

.p-r-20 {
    padding-right: 20px;
}

.p-r-25 {
    padding-right: 25px;
}

.p-t-5 {
    padding-top: 5px;
}

.news .col-news-inner .extend,
.p-t-10 {
    padding-top: 10px;
}

.p-t-15 {
    padding-top: 15px;
}

.p-t-20 {
    padding-top: 20px;
}

.p-t-25 {
    padding-top: 25px;
}

.p-b-5 {
    padding-bottom: 5px;
}

.p-b-10,
menu ul.linkss li.ng-has-child1 {
    padding-bottom: 10px;
}

.p-b-15 {
    padding-bottom: 15px;
}

.p-b-20 {
    padding-bottom: 20px;
}

.p-b-25 {
    padding-bottom: 25px;
}

.m-l-n {
    margin-left: 0;
}

.categories li:last-child,
.col-navigation-content ul li:last-child,
.m-r-n {
    margin-right: 0;
}

.m-l-5,
.nav-show ul li a i,
.zoom span {
    margin-left: 5px;
}

.m-l-sm {
    margin-left: 10px;
}

.m-l-md,
.toggle__label-icon.toggle-icon-position-right {
    margin-left: 15px;
}

.m-l-lg {
    margin-left: 20px;
}

.m-l-max {
    margin-left: 25px;
}

.m-r-5 {
    margin-right: 5px;
}

.m-r-sm {
    margin-right: 10px;
}

.m-r-md {
    margin-right: 15px;
}

.m-r-lg {
    margin-right: 20px;
}

.m-r-max {
    margin-right: 25px;
}

.m-t-5 {
    margin-top: 5px;
}

.m-t-sm {
    margin-top: 10px;
}

.m-t-md {
    margin-top: 15px;
}

.m-t-lg {
    margin-top: 20px;
}

.m-t-max {
    margin-top: 25px;
}

.m-b-5 {
    margin-bottom: 5px;
}

.m-b-10 {
    margin-bottom: 10px;
}

.m-b-15 {
    margin-bottom: 15px;
}

.m-b-20,
.solution-block {
    margin-bottom: 20px;
}

.m-b-25 {
    margin-bottom: 25px;
}

.m-b-50,
.section-blogs .item-news {
    margin-bottom: 50px;
}

.m-r-4per {
    margin-right: 4%;
}

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

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

.text-center {
    text-align: center;
}

.text-bold {
    font-weight: 700;
}

.bd-t-5b {
    border-top: 1px solid #5b5b5d;
}

.bd-b-5b {
    border-bottom: 1px solid #5b5b5d;
}

.n-bd-r {
    border-right: none !important;
}

.bg-rgba {
    background: rgba(0, 0, 0, .4);
}

.bg-grey {
    background: #f2f2f2;
}

.bg-grey-ee {
    background: #eee;
}

.bg-green-46 {
    background: #46a040;
}

.bg-green-3b {
    background: #3bb44a;
}

#slide,
.bg-black-29,
.bot-shadow .menu-icon span,
.package.active::after,
.package:hover::after {
    background: var(--primary-color);
}

.bg-black-00 {
    background: #191919;
}

.bg-green-9c {
    background: #9cc639;
}

.bg-green-76 {
    background: #76bb2c;
}

.bg-orange {
    background: #fcb040;
}

.bg-blue {
    background: #4ba6cf;
}

.bg-blue-2b {
    background: #2b465d;
}

.bg-blue-02 {
    background: #029292;
}

.bg-red {
    background: #dc2b51;
}

.bg-caro {
    background: url(../images/bg_02.png) top left;
}

.fb-row a:hover i,
.green-0f {
    color: var(--primary-color);
}

.black-29,
.box-logo ul li a:hover {
    color: #292929;
}

.fb-row a:hover,
.nav-show ul li a:hover,
.ul-navigation-2 li>.ul-drop-list-2>li:hover {
    background: #fff;
}

.fb-row a i,
.package.active .textClr a small,
.package.active .textClr a span,
.package.active .ul_pkg ul li,
.package.active .ul_pkg ul li:before,
.package.active h3,
.package.active h4,
.package.active i:before,
.package:hover .text-list li:before,
.package:hover .textClr a small,
.package:hover .textClr a span,
.package:hover .ul_pkg ul li,
.package:hover .ul_pkg ul li:before,
.package:hover h3,
.package:hover h4,
.package:hover i:before,
.section-service .column-services .button-content span,
.section-service .column-services ul li a,
.section-service .column-services ul.heading-title,
.top-contact,
.top-contact a {
    color: #fff;
}

.fb-login {
    text-align: center;
    width: 20%;
}

.fb-login a {
    width: 100%;
    text-align: center;
    padding: 13px 0;
}

.top-col-contact {
    height: 40px;
    padding: 10px 0;
}

.top-col-contact p {
    line-height: 20px;
    font-size: 1em;
}

header.header {
    position: relative;
    float: none;
    width: 100%;
    border-bottom: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0);
    top: 0;
    left: 0;
    z-index: 99999;
}

.a-top-logo {
    width: 100% !important;
    padding: 5px !important;
}

#slide,
.menu-icon,
menu,
menu ul.linkss.slide-in {
    position: absolute;
}

.a-top-logo img {
    width: 150px;
    font-size: 1px;
    line-height: 50px;
    cursor: pointer;
    float: right;
}

.header.bot-shadow .logo-fix {
    width: 150px;
}

.none-sc .a-top-logo {
    z-index: 9999;
}

menu {
    z-index: 1;
    -webkit-margin-before: 0;
    -webkit-padding-start: 0;
}

menu.bg-menu {
    background: #0000009e;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

menu ul.linkss.slide-in {
    top: 140px;
    transition: right .7s;
}

.ng-scope a:focus,
.ng-scope a:hover,
.ng-scope.active>a,
.section-service .column-services ul li a:hover,
menu ul.linkss #email-contact a,
menu ul.linkss #phone-contact a,
menu ul.linkss li a:hover {
    color: var(--second-color);
}

#upper-slide {
    height: 100%;
    background: #372e2c;
    transition: width .6s cubic-bezier(.1, .7, .1);
    width: 0;
    float: right;
    opacity: 1;
}

#slide {
    height: 100%;
    transition: width .3s cubic-bezier(.1, .7, .1);
}

.upper-slide-right {
    width: 700px !important;
    height: 100%;
    min-height: 100vh;
}

.slide-right {
    width: 650px !important;
    height: 100%;
}

ul.linkss {
    list-style: none;
}

menu ul.linkss {
    right: 0;
    transition: right .7s cubic-bezier(.1, .7);
    opacity: 0;
}

.linkss.slide-in {
    right: 140px;
    opacity: 1;
    width: 400px;
}

menu ul.linkss li {
    line-height: 42px;
    color: #fff;
    font-size: 24px;
}

menu ul.linkss li a {
    line-height: 42px;
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 1px;
}

.linkss li {
    transform: translateX(150px);
}

.slide-in li {
    transform: translateX(0);
}

.slide-in li:nth-child(n + 1) {
    transition: transform .1s;
}

.slide-in li:nth-child(2) {
    transition: transform .3s;
}

.slide-in li:nth-child(3) {
    transition: transform .5s;
}

.slide-in li:nth-child(4) {
    transition: transform .7s;
}

.slide-in li:nth-child(5) {
    transition: transform .9s;
}

.slide-in li:nth-child(6) {
    transition: transform 1.3s;
}

.slide-in li:nth-child(7) {
    transition: transform 1.5s;
}

.slide-in li:nth-child(8) {
    transition: transform 1.7s;
}

.none-sc,
.testimonials-slider .carousel {
    overflow: hidden;
}

.none-sc .bot-shadow {
    background: rgb(255 255 255 / 0%) !important;
    box-shadow: none !important;
}

.ng-scope {
    position: relative;
    display: block;
}

.ng-scope a .svg {
    height: 20px !important;
    width: 20px !important;
    position: relative;
    right: -47px;
    top: 50%;
    transform: translate(0, -50%);
}

.ng-scope a .svg:after,
.ng-scope a .svg:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    background-color: currentColor;
    transition: transform .4s ease-in-out, opacity .4s ease-in-out;
}

.ng-scope a .svg:before {
    width: 20px;
    height: 3px;
    opacity: 1;
    border-radius: 3px;
}

.ng-scope a .svg:after {
    width: 3px;
    height: 20px;
    border-radius: 3px;
}

.ng-scope a .svg.active:after,
.ng-scope a .svg.active:before {
    transform: translate(-50%, -50%) rotate(90deg);
}

.ng-scope a .svg.active:before {
    opacity: 0;
}

.col-navigation-content>ul>li:hover>ul,
.diamond.is-visible .content-logo .title_diamond,
.emerald.is-visible .content-logo .title_emeral,
.ng-scope.ng-has-child1.active .ul-drop-list.ul-has-child1,
.package-nugget-info span svg,
.recr-content.active .work_items_content,
.ruby.is-visible .content-logo .title_ruby,
.ul-navigation li:hover .ul-drop-list {
    display: block;
}

.ng-scope.sale-menu>a {
    color: #ff5f89;
    font-weight: 700;
    text-transform: uppercase;
}

.ul-navigation li .ul-drop-list {
    position: absolute;
    left: 0;
    top: 100%;
    width: 200px;
    background: #303030;
    z-index: 9999;
    display: none;
}

.ul-navigation li>.ul-drop-list>li {
    position: relative;
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #545454;
}

.ul-navigation li>.ul-drop-list>li a {
    color: #fff;
    padding: 8px 15px;
}

.col-navigation-content>ul>li>ul li:hover a,
.ul-navigation li>.ul-drop-list>li:hover a {
    color: #a4ce41;
}

.ul-navigation-2 li .ul-drop-list-2 {
    position: relative;
    float: left;
    width: calc(100% - 40px);
    margin: 0 0 0 20px;
}

.ul-navigation-2 li>.ul-drop-list-2>li {
    position: relative;
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
}

.ul-navigation-2 li>.ul-drop-list-2>li a {
    color: #fff;
    margin: 0;
    padding-left: 10px;
}

.news .no-padder-left .img h3:hover,
.ul-navigation-2 li>.ul-drop-list-2>li:hover a {
    color: #46a040;
}

.info-slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .1);
    color: #fff;
}

.info-slide h1,
.info-slide h3,
.info-slide p {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
}

.info-slide h1 {
    font-size: 3.75em;
    margin: 0 0 30px;
}

.info-slide h3 {
    font-size: 2em;
    margin: 0;
}

.info-slide p a {
    position: relative;
    float: left;
    font-size: 1.5625em;
    line-height: 22px;
    color: #fff;
    padding: 10px 30px;
    border: 2px solid #fff;
    border-radius: 23px;
}

.slide-a-detail {
    margin-right: 55px;
    margin-left: calc((100% - 137px) / 2);
}

.info-slide p a:hover,
.nav-xs ul li a:hover {
    background: #fff;
    color: var(--primary-color);
}

.two-half-images {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 90vh;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #141517;
}

.left-image,
.right-image {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    width: 50%;
    -webkit-box-pack: center;
    background-position: 50% 50%;
    background-size: cover;
}

.left-image {
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-repeat: no-repeat;
}

.right-image {
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.black-background {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: background-color .7s ease-out;
    -moz-transition: background-color .7s ease-out;
    -o-transition: background-color .7s ease-out;
    transition: background-color .7s ease-out;
}

.black-background .left-header,
.black-background .right-header {
    opacity: 0;
    transition: .4s ease-out .2s;
}

.section-about-information.logo-design,
.section-service {
    transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}

.black-background:hover .left-header,
.black-background:hover .right-header {
    opacity: 1;
    transition: .2s ease-out;
}

.left-header,
.right-header {
    width: 60%;
    font-family: SFUFutura;
    color: #fff;
    font-weight: 500;
    text-transform: none;
    font-size: 58px;
}

.col-footer,
.info-banner a,
.logo-info-banner h3,
.nav-show ul li a {
    font-family: Arial, Helvetica, sans-serif;
}

.right-header:hover {
    color: var(--white);
}

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

    .left-image,
    .right-image,
    .two-half-images {
        display: block;
        height: 50vh
    }

    .left-image,
    .right-image {
        width: 100%;
        background-position: 100%;
        background-size: contain;
        background-repeat: no-repeat
    }

    .left-header {
        width: 70%;
        font-size: 50px
    }
}

.align-middle,
.contact-us .row,
.faqs-sec .row,
.global-achievements .row,
.home-banner .row,
.section-about-information .row {
    align-items: center;
}

.section-about-information .row,
.section_thuong_hieu .secsion-service .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}

.section-about-information,
.why-need {
    padding: 70px 0 0;
}

.section-about-information .container.home-page,
.section-project .container.home-page,
.section-service .container.home-page,
.vertical-tabs-section .container.home-page {
    max-width: 100% !important;
    width: 100% !important;
}

.section-about-information .container.home-page .row>div:first-child {
    padding: 0 60px 0 0 !important;
    display: flex;
    align-content: center;
    align-items: flex-end;
}

.section-about-information .container.home-page .inner-content {
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
}

.section-about-information .mega-para {
    padding: 15px 0;
    color: #424242;
    font-size: 19px;
    font-weight: 400;
    font-family: SFUFutura;
}

.mega-para {
    font-size: 19px;
    line-height: 38px;
}

.our-services,
.section-about-information .button-couple-lg {
    padding-bottom: 50px;
}

.section-about-information .container.home-page .mega-para {
    margin: 30px 0 50px;
    width: 90%;
    max-width: 90%;
}

.section-about-information .home-about {
    transform: translate(-10px, 0);
}

.section-about-information .home-about img {
    border-radius: 12px;
    max-width: 90%;
}

.section-about-information.logo-design {
    background-image: url(../../../../uploads/2021/04/create_logo_shape.webp);
    background-position: top center !important;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -110px;
    margin-bottom: 0;
    padding: 100px 0 0;
}

.section-about-information.web-dev {
    background-image: url(../../../../uploads/2021/04/webdevelopment_about_bg.webp);
    background-position: top center;
    background-repeat: no-repeat;
    margin-top: -135px;
    margin-bottom: 0;
    padding: 140px 0 0;
    background-size: 100%;
}

.primary-heading-box .main-heading {
    color: var(--primary-color);
    font-size: 58px;
    line-height: 1.1;
}

.primary-heading-box .main-heading,
.primary-heading-box .sub-heading {
    font-weight: 800;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

.section-service {
    padding: 5% 0 2%;
}

.section-service .title-service h2 {
    font-weight: 500;
    padding: 0 0 75px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    color: var(--primary-color);
    font-size: 80px;
    line-height: 1.1;
    /* text-transform: uppercase; */
}

.section-service .home-page .panel-heading,
.section-service .home-page .title-service {
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
}

.recr-content h3,
.section-service .home-page h4.panel-title a {
    color: #000;
    font-size: 44px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 2;
}

.vert-tab-content h2,
.vert-tab-content h4 {
    font-weight: 700;
    color: #000a19;
    text-align: left;
    letter-spacing: 0;
}

.section-service .home-page .panel-title>a,
.section-service .home-page .panel-title>a:active {
    display: block;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 3px;
    text-decoration: none;
}

.section-service .home-page .toggle__control .toggle__label-text {
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

.section-service .home-page .toggle__control .toggle__label-icon .icon-normal {
    color: #000;
    background-color: #02010100;
    font-size: 60px;
    width: 85px;
    height: 85px;
}

.section-service .home-page .toggle__control .toggle__label-icon .tabs-icon svg {
    display: block;
    width: 65px;
    height: 65px;
    fill: currentColor;
    transition: .5s;
}

.recr-content.active .panel-heading.toggle__control,
.recr-content.active h3,
.section-faqs .faq .question.show button i.fa-plus,
.section-service .panel-heading.active,
.section-service .toggle__label-text.collapsed,
.toggle__label-icon .icon-active,
.work_items_content {
    display: none;
}

.section-service .home-page .toggle__control:hover .toggle__label-icon .tabs-icon svg {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    color: var(--primary-color);
}

.section-service .home-page .panel-default>.panel-heading {
    background: 0 0;
    padding: 50px 0;
}

.project_menu .search_project .form-control,
.section-service .home-page .recr-content {
    border: none;
}

.section-service .home-page .panel-group .panel-heading+.panel-collapse>.panel-body {
    border-top: none;
}

.section-service .recr-content.active {
    background-image: url(/upload/new/woman-tablet.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    transition: background .2s, border .2s, border-radius .2s, box-shadow .2s;
    padding: 5% 3%;
    min-height: 375px;
    display: block;
}

.section-service .recr-content .panel-body {
    max-width: 1250px;
    min-height: 375px;
    margin: auto;
    display: flex;
    position: relative;
    align-items: center;
}

.section-service .recr-content .services-background-overlay {
    background-color: #000;
    opacity: .7;
    transition: background .2s, border-radius .2s, opacity .2s;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    min-height: 375px;
}

.section-service .column-services {
    display: flex;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    align-items: center;
    width: 100%;
}

.section-service .column-services .services-heading ul.heading-title {
    padding-left: 130px;
}

.section-service .column-services .services-heading span.heading-title {
    color: #fff;
    font-size: 44px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 2;
    margin-bottom: 20px;
    transition: background .3s, border .3s, border-radius .3s, box-shadow .3s, transform var(--e-transform-transition-duration, .4s);
}

.button-link,
.section-service .button-link {
    display: inline-block;
    line-height: 1;
    font-size: 15px;
    padding: 0;
    color: #fff;
    fill: #fff;
    text-align: center;
    transition: .3s;
}

.button-content,
.section-service .column-services .button-content {
    display: flex;
    justify-content: center;
    padding: 20px 20px 20px 0;
}

.button-content .button-icon,
.section-service .column-services .button-content .button-icon {
    flex-grow: 0;
    order: 15;
}

.section-service .column-services .button-content span.button-text {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 20px;
    flex-grow: 1;
    order: 10;
    display: inline-block;
}

.section-service .column-services .button-icon {
    transition: .3s;
    transform: rotate(0);
    color: #fff;
    background-color: var(--second-color);
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 100%;
    padding: 3px;
    margin-left: 15px;
    order: 15;
}

.button-link:hover .button-icon,
.section-service .column-services .button-link:hover .button-icon {
    background-color: #fff;
    color: #000;
    transition: .3s;
    transform: rotate(45deg);
}

.button-icon svg,
.section-service .column-services .button-icon svg {
    width: 16px;
    height: auto;
}

.section-service .heading-title {
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 1px;
    word-spacing: 1px;
}

.section-service .column-services ul li {
    position: relative;
    display: block;
    font-size: 18px;
    margin-bottom: 12px;
    padding-left: 30px;
}

.section-service .column-services ul li:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    left: 0;
    top: 10px;
}

.section-service .column-services ul li:after {
    content: "";
    position: absolute;
    height: 6px;
    width: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: transparent transparent #000 #000;
    left: 5px;
    top: 15px;
    transform: rotate(-38deg);
}

.vert-tab>div {
    margin: 0;
    width: 100%;
    height: 100%;
    transition: .5s;
    overflow: hidden;
}

.recr-content {
    background: #fff;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 36px 28px;
    margin-top: 36px;
    border: 1px solid;
}

.vert_tab_image_wrrapeer {
    display: flex;
    align-items: center;
}

.vert-tab-content h2 {
    font-size: 74px;
    line-height: 81px;
    margin-bottom: 30px;
}

.vert-tab-content h4 {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 20px;
}

.vert-tab-content p {
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0;
    text-align: left;
    max-width: 96%;
    color: #000a19;
    margin-left: 0;
    margin-right: auto;
}

.package .innerPage .text-list li,
.project_menu input.form-control.typeahead,
.recr-content.active,
.vert-tab-content {
    width: 100%;
}

.recr-content.active {
    background: #fff;
    border-color: #ababc8;
}

.recr-content img {
    max-width: 100%;
    height: 426px;
}

@media (min-width:768px) {
    .section-service .column-services .services-col-50 {
        width: 50%
    }
}

.section-service .home-page .recr-content {
    border-style: solid;
    margin: 0;
    border-color: #737373;
    border-radius: 0;
}

.section-service .home-page .recr-content._0 {
    border-style: solid;
    border-width: 1px 0;
    border-color: #737373;
    border-radius: 0;
}

.section-service .home-page .recr-content._1,
.section-service .home-page .recr-content._2,
.section-service .home-page .recr-content._3 {
    border-width: 0 0 1px;
}

.section-faqs .block.block-how-2 .how-step .step-title {
    color: var(--primary-color);
    position: relative;
    font-size: 30px;
    color: var(--primary-color);
    font-weight: 500;
    margin: 0 0 24px;
    line-height: initial;
}

.section-faqs .large-offset-left {
    padding-right: 5rem;
}

.section-faqs {
    background: linear-gradient(180deg, #f3f5f9 20.45%, rgba(0, 0, 0, 0) 56%);
    padding: 40px 0 20px;
}

.section-faqs .block.block-title h3 {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--primary-color);
    display: block;
    padding: 0;
}

.section-faqs .block.how-step {
    padding: 5rem 0;
}

.section-faqs .block.block-how-2 ul.step-features {
    list-style: none;
    margin: 0;
    line-height: inherit;
}

.section-faqs .block.block-how-2 .how-step .step-title .number {
    font-size: 64px;
    position: absolute;
    top: -36px;
    left: -70px;
}

.section-faqs .large-offset-right {
    padding-left: 5rem;
    padding-right: 0;
}

.section-faqs .block.block-how-2 .how-step .step-features i {
    margin-left: -28px;
    margin-right: 8px;
    color: var(--primary-color);
}

@media screen and (max-width:63.9375em) {
    .section-faqs .block.block-how-2 .how-step .step-title {
        text-align: center
    }

    .section-faqs .block.block-how-2 .how-step .step-title .number {
        font-size: 35px;
        position: initial;
        display: block
    }

    .section-faqs .block.block-how-2 .how-step .step-features i {
        margin-left: 0
    }
}

.section-faqs .step-features li {
    font-size: 17px;
    line-height: 2;
}

.section-faqs .faqs h3 {
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 400;
}

.section-bang-gia .nav-tabs,
.section-faqs .faq:last-child .question {
    border-bottom: none;
}

.section-faqs .section-faqs .faq .question {
    border-bottom: 1px solid #ebedf1;
    padding: 16px 0;
}

.link--ani-arrow,
.section-faqs .faq .question.show button i.fa-minus,
.testimonials-slider .carousel button:hover .onHover,
svg.i-ani-arrow-icon {
    display: inline-block;
}

.section-faqs .faq .question .question-title {
    margin: 16px 0;
    color: inherit;
    font-weight: 500;
    font-size: 17px;
}

.section-faqs .faq .question button {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: 0 0;
    padding: 0 64px 0 0;
    border: 0;
    border-radius: 0;
    line-height: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    top: 0;
    outline: 0;
    text-align: left;
    font-weight: 600;
    color: #262626;
    line-height: inherit;
    cursor: pointer;
}

.section-faqs .faq .question button i.fa {
    position: absolute;
    right: 0;
    display: block;
    color: var(--primary-color);
    font-size: 22px;
    font-weight: 400;
    line-height: inherit;
}

.section-faqs .faq .question .answer {
    max-height: 0;
    overflow: hidden;
}

.section-faqs .faq .question.show .answer {
    margin-top: 15px;
    max-height: 1000px;
}

.section-faqs .faq .question .answer p {
    color: #4c4c4d;
    font-weight: 300;
    margin-bottom: 16px;
    line-height: 1.5;
    font-size: 17px;
}

.section-faqs .faq .question .answer p a {
    font-weight: 400;
}

.section-service-1 .slider_test {
    width: 100000px;
    transform: translateX(0);
    animation: 8.03951s linear infinite marqueeAnimation-13247680;
}

@media (min-width:1200px) {
    .section-service-1 .ul-damme {
        display: flex
    }

    .section-service-1 .ul-damme li {
        white-space: nowrap
    }
}

.section-service-3.section-text-animation-slide {
    background-color: var(--primary-color);
    padding: 100px 100px 50px;
    position: relative;
}

.section-service-3 .text-animation-slide {
    position: relative;
}

.section-service-3 .text-animation-slide .text-slide {
    opacity: 0;
    padding-left: 0;
    position: absolute;
}

@media (min-width:670px) {
    .section-service-3 .text-animation-slide {
        display: contents
    }

    .section-service-3 .text-animation-slide .text-slide {
        padding-left: 1rem
    }
}

.section-service-3 .text-animation-slide span {
    font-size: 60px;
    font-weight: 400;
}

.section-service-3.section-text-animation-slide .container {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 1450px;
    width: 100%;
}

.section-service-3 .block-column {
    flex-grow: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.section-service-3 .thiet-ke-logo {
    padding: 70px 0 20px;
}

.section-service-3.section-text-animation-slide .heading-service h1 {
    font-weight: 400;
    color: #fff;
    font-size: 30px;
}

.section-service-3 .des-service p {
    font-weight: 400;
    color: #fff;
    font-size: 20px;
}

.section-service-3 .des-service p strong,
.section-service-3 .des-service p strong a {
    color: var(--second-color);
    font-weight: 500;
}

.section-service-3.section-text-animation-slide h2 {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    font-size: 60px;
    font-weight: 500;
    position: relative;
}

.section-service-3 .text-slide {
    position: absolute;
    opacity: 0;
}

.section-service-3 .letter {
    position: relative;
    float: left;
    transform: translateZ(25px);
    transform-origin: 50% 50% 25px;
}

.section-service-3 .letter.out {
    transform: rotateX(90deg);
    transition: transform .32s cubic-bezier(.55, .055, .675, .19);
}

.section-service-3 .letter.behind {
    transform: rotateX(-90deg);
}

.section-service-3 .letter.in {
    transform: rotateX(0);
    transition: transform .38s cubic-bezier(.175, .885, .32, 1.275);
}

.section-service-3 .wisteria {
    color: #8e44ad;
}

.section-service-3 .belize {
    color: #2980b9;
}

.section-service-3 .pomegranate {
    color: #c0392b;
}

.section-service-3 .green {
    color: #16a085;
}

.section-service-3 .midnight {
    color: #2c3e50;
}

.section-bang-gia {
    padding: 50px 0 0;
}

.main-bg-color {
    background-color: var(--primary-color);
    position: relative;
    color: #fff;
    padding: 0 0 150px;
}

.section-bang-gia .container-fluid {
    max-width: 1438px;
    width: 100%;
    margin: 0 auto;
}

.section-bang-gia .nav-tabs .nav-link.active {
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
}

.section-bang-gia .nav-tabs .nav-link {
    margin-right: 1rem;
    border-radius: .25rem;
    border: 1px solid var(--primary-color);
}

.section-bang-gia h2 {
    font-size: 45px;
    line-height: 56px;
    text-align: center;
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 60px;
}

.package,
.package h3,
.package h4,
.package ul+h4 {
    font-weight: 600;
}

.package h3,
.package h5 {
    text-transform: uppercase;
}

.packageImg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

.megapackage,
.package,
.package h3 {
    position: relative;
}

.package.paralax-image {
    min-height: 500px;
}

.package {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
    -ms-transition: none !important;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    padding-left: 50px !important;
    z-index: 2;
    color: rgba(var(--main-bg-color), 1);
    font-size: 12px;
    text-transform: capitalize;
}

.package::before {
    width: 96%;
    height: 96%;
    left: 0;
    bottom: 0;
    background: #676767;
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(-10deg);
    transform: rotateY(-10deg);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    transition: .2s linear;
}

.main-bg-color .orderbtn:after,
.package .btn:after,
.package::after,
.price_btn .btn:after {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(-10deg);
    z-index: -1;
    width: 100%;
    content: "";
    right: 0;
    top: 0;
    height: 100%;
}

.package::after {
    background: #fefeff;
    position: absolute;
    bottom: 0;
    left: 0;
    transform-style: preserve-3d;
    transform: rotateY(-10deg);
    -webkit-box-shadow: 0 0 1px transparent;
    box-shadow: 0 0 1px transparent;
}

.package .textClr a small,
.package .textClr a span {
    color: #000;
    font-size: 16px;
}

.package h3,
.package h3 i::before {
    color: #373737;
}

.megapackage {
    background-repeat: no-repeat;
    background-position: 26% bottom;
    background-size: 66%;
}

.package h3 {
    font-size: 40px;
    line-height: 1;
    min-height: 60px;
    margin-bottom: 20px;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    align-items: center;
}

.section-clients-masonry__list__item__bg img,
.section-clients-masonry__list__item__logo img {
    display: none !important;
}


.main-bg-color .orderbtn:after,
.package .btn:after,
.price_btn .btn:after {
    position: absolute;
    bottom: 0;
    left: 0;
    transform-style: preserve-3d;
    transform: rotateY(-20deg);
    -webkit-box-shadow: 0 0 10px transparent;
    box-shadow: 0 0 10px transparent;
    transition: .2s linear;
}

.main-bg-color .orderbtn:before,
.package .btn:before {
    width: 92%;
    height: 92%;
    left: -10px;
    bottom: -10px;
    background: rgb(231 196 21 / 49%);
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(-10deg);
    transform: rotateY(-10deg);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    transition: .2s linear;
}

.main-bg-color .btn-1:after,
.mfp-content button,
.package .btn-1:after {
    background: var(--second-color);
}

.package .btn-2,
.package .btn-2:hover {
    color: #000;
}

.main-bg-color .orderbtn:hover:before,
.package .btn:hover:before {
    -webkit-filter: blur(0);
    transition: .5s linear;
    filter: blur(0);
}

.main-bg-color .orderbtn:hover:after,
.package .btn:hover:after {
    transition: .5s linear;
    transform: rotateY(0);
}

.main-bg-color .orderbtn {
    font-size: 16px;
    -webkit-transition: background-color .1s ease-out;
    -moz-transition: background-color .1s ease-out;
    -o-transition: background-color .1s ease-out;
    transition: background-color .1s ease-out;
    color: rgba(var(--second-color), 1);
    -webkit-perspective: 400px;
    perspective: 1000px;
    margin-top: 50px;
}

@-webkit-keyframes floating {
    0% {
        height: 0;
        width: 3px
    }

    50% {
        height: 100%;
        width: 3px
    }

    100% {
        width: 100%
    }
}

@-webkit-keyframes floatingLine {
    0% {
        height: 0;
        width: 4px
    }

    50% {
        height: 100%;
        width: 4px
    }

    100% {
        width: 100%
    }
}

.package .btn-2:after {
    background: #e7c415;
}

.price_btn a::after {
    background: #e7c415;
    content: "";
}

.package .ul_pkg::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
}

.package .ul_pkg::-webkit-scrollbar {
    width: 5px;
}

.package .ul_pkg::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 10px;
}

.package .ul_pkg ul {
    padding: 0;
    margin: 0;
}

.package .ul_pkg ul li {
    width: 100%;
    margin-top: 10px;
    position: relative;
    font-weight: 600;
    display: inline-block;
    font-size: 14px;
    color: #373737;
}

.package i:before {
    animation: 44s infinite textMulticolor;
}

.package .text-list li:before,
.package .ul_pkg ul li:before {
    font-family: icon-moon !important;
    speak-as: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e901";
    margin-right: 1rem;
    color: var(--green-color);
    animation: 44s infinite textMulticolor;
}

.package h3 small {
    text-transform: capitalize;
}

.package .icon {
    position: relative;
    z-index: 1;
    padding: 3rem .5rem 2rem;
    text-align: center;
    border-radius: .5rem;
    background: #f8f9fc;
    font-size: .75rem;
    margin: 1.5rem auto;
}

.package .icon i {
    font-size: 3rem;
    color: var(--primary-color);
}

.package .icon h5 {
    font-size: 1rem;
}

.package .text-list li {
    width: 48%;
    display: inline-block;
    margin-right: 2%;
    position: relative;
    font-weight: 600;
    font-size: 14px;
    padding: 7px;
}

.package .ul_pkg h5,
.package .ul_pkg ul+h5,
.package .ul_pkg ul+strong,
.package .web-ul_pkg h5,
.package .web-ul_pkg ul+h5,
.package.web-ul_pkg ul+strong {
    margin-top: 1rem;
    display: block;
    padding-left: 1.3rem;
}

.package h5 {
    font-size: 1.2rem;
}

.home-slide,
.package a.underLine {
    cursor: pointer;
}

.megapackage .my-auto h2 {
    color: #fff;
    font-size: 58px;
    margin-bottom: 30px;
    line-height: 71px;
}

.megapackage .my-auto p {
    color: #fff;
    font-size: 18px;
}

.project-sam,
.row-logo-content,
.section-clients-masonry {
    padding: 50px 0;
}

.section-clients-masonry h2.heading-project,
.section-project-masonry h2.heading-project {
    font-size: 45px;
    margin-bottom: 50px;
    line-height: 56px;
    padding: 50px 0 0;
    text-align: center;
    font-weight: 500;
    text-transform: capitalize;
}

.section-clients-masonry__list,
.section-project-masonry__list {
    margin: -4px;
}

.section-clients-masonry__list__item {
    padding: 4px;
    overflow: hidden;
    width: 100%;
}

.section-clients-masonry__list.loading+.section-clients-masonry__list__load-more,
.section-clients-masonry__list__item.show-logo .section-clients-masonry__list__item__logo,
.section-clients-masonry__list__item:hover .section-clients-masonry__list__item__content {
    opacity: 1;
}

.section-clients-masonry__list__item.show-logo .section-clients-masonry__list__item__logo+.section-clients-masonry__list__item__bg {
    opacity: 0;
}

.box-project .show-detail,
.section-clients-masonry__list__item.grid-sizer {
    padding: 0;
}

.section-clients-masonry__list__item__inner {
    position: relative;
    overflow: hidden;
}

.section-clients-masonry__list__item__bg {
    padding-top: 71.4285714286%;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
}

.section-clients-masonry__list__item__bg:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .7s;
    transition: .7s;
    background: #171717;
}

.mfp-fade.mfp-bg.mfp-removing,
.mfp-fade.mfp-wrap.mfp-removing .mfp-content,
.section-clients-masonry__list__item__bg.loaded:before,
.section-clients-masonry__list__load-more {
    opacity: 0;
}

.section-clients-masonry__list__item__logo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: 50%;
    opacity: 0;
    z-index: 5;
    -webkit-transition: .3s;
    transition: .3s;
}

.section-clients-masonry__list__item__content {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    padding: 15px;
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0;
    z-index: 10;
}

.col-footer p a:hover,
.col-footer ul li a:hover,
.p-white,
.section-clients-masonry__list__item__content:hover {
    color: #fff;
}

h2.section-clients-masonry__list__item__content__title {
    font-size: 24px;
    text-align: left;
    color: #fff;
}

.section-clients-masonry__list__item__content__cat {
    font-size: 16px;
    color: #fff;
    overflow: hidden;
    position: absolute;
    bottom: 15px;
    left: 15px;
}

.section-clients-masonry__list__item__content__cat__title {
    font-weight: 700;
    font-size: 16px;
}

.section-clients-masonry__list__item__content__cat ul {
    margin-left: -20px;
}

.section-clients-masonry__list__item__content__cat ul li {
    position: relative;
    padding-left: 20px;
    padding-right: 8px;
}

.section-clients-masonry__list__item__content__cat ul li:before {
    content: "/";
    display: block;
    position: absolute;
    left: 0;
}

.section-clients-masonry__list__item__content__expand {
    position: absolute;
    display: block;
    bottom: 15px;
    right: 15px;
}

.section-clients-masonry__list__item__content__expand img {
    width: 59px;
}

.section-clients-masonry__list__load-more img {
    width: 100px;
    height: auto;
    margin: 0 auto;
    display: none !important;
}

.section-clients-masonry .see-all,
.section-project-masonry .see-all {
    margin-top: 30px;
    padding-right: 20px;
}

@media (min-width:768px) {
    .section-clients-masonry__list {
        margin-left: -4px;
        margin-right: -4px
    }

    .section-clients-masonry__list__item {
        width: 50%;
        padding-left: 4px;
        padding-right: 4px
    }

    .section-clients-masonry__list__item__content__cat {
        width: calc(100% - 60px)
    }

    .section-clients-masonry__list__item__content__cat__title {
        margin-top: 25px
    }

    .section-clients-masonry__list__item__content__cat ul {
        width: 100%
    }

    .section-videos__list__item:hover .section-clients-masonry__list__item__content {
        opacity: 1
    }

    .section-videos__list__item .section-clients-masonry__list__item__content {
        left: 4px;
        right: 4px;
        width: auto
    }

    .section-clients-masonry__filter {
        margin-bottom: 65px
    }

    .section-clients-masonry__filter__right {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        text-align: center
    }

    .section-clients-masonry__filter__right ul {
        margin-left: -30px
    }
}

@media (min-width:1025px) {

    .section-clients-masonry__list__item--big .section-clients-masonry__list__item__content__expand,
    .section-clients-masonry__list__item__content__expand {
        right: 24px;
        bottom: 24px
    }

    .section-clients-masonry__list__item--panel {
        width: 33.3333333333%;
        float: left !important
    }

    .section-clients-masonry__list__item--panel:nth-child(13n + 2) {
        width: 66.6666666667%
    }

    .section-clients-masonry__list__item--panel:nth-child(13n + 10),
    .section-clients-masonry__list__item--panel:nth-child(13n + 5),
    .section-clients-masonry__list__item--panel:nth-child(13n + 9) {
        clear: left;
        width: 33.3333333333%
    }

    .section-clients-masonry__list__item--panel:nth-child(13n + 8) {
        width: 66.6666666667%;
        float: right !important
    }

    .section-clients-masonry__list__item--panel:nth-child(13n + 11) {
        width: 33.3333333333%;
        clear: left
    }

    .section-clients-masonry__list__item--panel:nth-child(13n + 12),
    .section-clients-masonry__list__item--panel:nth-child(13n + 13) {
        width: 33.3333333333%
    }

    .section-clients-masonry__list__item--big .section-clients-masonry__list__item__bg {
        padding-top: 72.959%
    }

    .section-clients-masonry__list__item--big .section-clients-masonry__list__item__content {
        padding-top: 44px
    }

    .section-clients-masonry__list__item--big .section-clients-masonry__list__item__content__cat {
        bottom: 24px
    }

    .section-clients-masonry__list__item--small .section-clients-masonry__list__item__bg {
        padding-top: 72.7272727273%
    }

    .section-clients-masonry__list__item__content {
        padding: 40px
    }

    .section-clients-masonry__list__item__content__title {
        font-size: 32px
    }

    .section-clients-masonry__list__item__content__cat {
        left: 30px;
        bottom: 20px;
        font-size: 20px;
        width: calc(100% - 115px)
    }

    .section-clients-masonry__list__item__content__cat ul li,
    .section-clients-masonry__list__item__content__cat__title {
        font-size: 20px
    }

    .section-clients-masonry .see-all {
        padding-right: 0;
        padding-left: 0;
        text-align: left;
        margin: 50px auto
    }

    .section-clients-masonry__filter {
        margin-bottom: 40px;
        font-size: 20px
    }

    .section-clients-masonry__filter__left {
        padding-left: 80px
    }
}

.see-all {
    text-align: right;
    white-space: nowrap;
    line-height: 1;
}

.section-project-masonry .see-all a,
.section-project-masonry .view-more a,
.see-all a {
    display: inline-block;
    font-size: 20px;
}

.section-project-masonry .see-all a:before,
.section-project-masonry .view-more a:before,
.see-all a:before {
    content: "";
}

.see-all a:hover .see-all__icon {
    -webkit-transform: translate(10px, -10px);
    transform: translate(10px, -10px);
}

.see-all__icon {
    display: inline-block;
    vertical-align: bottom;
    margin-left: 20px;
    -webkit-transition: .3s;
    transition: .3s;
}

.see-all__icon img {
    height: 17px;
    width: auto;
    display: block;
}

.section-clients-masonry__filter,
.section-project-masonry__filter {
    font-size: 18px;
    margin-bottom: 45px;
}

.section-clients-masonry__filter__right ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.section-clients-masonry__filter__right ul li {
    position: relative;
}

.section-clients-masonry__filter__right ul li.active,
.section-clients-masonry__filter__right ul li:hover {
    color: #9c9b9b;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content,
.section-clients-masonry__filter__right ul li.active:before,
.section-clients-masonry__filter__right ul li:hover:before {
    opacity: 1;
}

.a-view-more .skin-image-op0-when--white,
.package-popup .content-logo .title_diamond,
.package-popup .content-logo .title_emeral,
.package-popup .content-logo .title_ruby,
.section-clients-masonry__filter__right ul li:first-child span,
.section-clients-masonry__filter__right ul li:first-child:before,
.testimonials-slider .carousel button .onHover,
.testimonials-slider .carousel button:hover span:not(.onHover),
.view-more-a .skin-image-op0-when--white {
    display: none;
}

.section-clients-masonry__filter__right ul li a {
    display: block;
    padding-left: 25px;
    padding-right: 25px;
    position: relative;
    font-weight: 500;
}

.category-dropdown .ul-drop-list.ul-has-child1 li.ng-scope.ng-has-child2 a:hover,
.section-clients-masonry__filter__right ul li a:hover,
.ul-paging li a:hover {
    color: var(--second-color);
}

.col-navigation-content ul li a:hover,
.info-box-project a:hover,
.section-clients-masonry__filter__right ul li.active a,
.section-project a.let-s-chat-link.project-link:hover .p-project.black {
    color: var(--primary-color);
}

.section-clients-masonry__filter__right ul li span,
.section-clients-masonry__filter__right ul li:before {
    position: absolute;
    width: 2px;
    height: 15px;
    display: block;
    bottom: 5px;
    left: 0;
}

.section-clients-masonry__filter__right ul li:before {
    z-index: 2;
    content: "";
    background: #9c9b9b;
    opacity: 1;
}

.testimonials {
    background: linear-gradient(90deg, var(--c1, #f6d365), var(--c2, #fda085) 51%, var(--c1, #f6d365)) var(--x, 0) / 200%;
    --c1: #085951;
    --c2: #0e9a8c;
    padding: 70px 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.testimonials2 {
    background: #f4f4f7;
}

.testimonials .row {
    align-items: center;
    margin: 20px auto 0;
}

.testimonials h2.main-heading {
    font-size: 45px;
    margin-bottom: 50px;
    line-height: 56px;
    padding: 0;
    text-align: center;
    font-weight: 500;
    text-transform: capitalize;
}

.testimonials-slider .carousel-inner {
    background-image: url(http://localhost:8888/giaiphapprofile/upload/new/testi_user_bg.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100%;
    min-height: 400px;
    margin-top: 80px;
    padding: 20px 25px;
    overflow: visible;
}

.testimonials-slider .logo-wrapper {
    max-width: 116px;
    width: 116px;
    height: 116px;
    margin: -80px auto 50px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: rgba(50, 50, 93, .25) 0 6px 12px -2px, rgba(0, 0, 0, .3) 0 3px 7px -3px;
    background: #fff;
    position: relative;
}

.bg-white2 .swiper-button-next,
.bg-white2 .swiper-button-prev,
.blogs-slider .swiper-button-next,
.blogs-slider .swiper-button-prev {
    top: 50%;
    padding: 0;
    cursor: pointer;
    background: var(--primary-color);
    line-height: 40px;
    opacity: 0;
    text-align: center;
    width: 30px;
    z-index: 2;
    outline: 0;
}

.testimonials-slider .logo-wrapper img {
    position: absolute;
    width: 100%;
    max-height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.testimonials-slider .review-text p {
    color: var(--black);
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}

.reviewer-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
}

.review-card .name,
.reviewer-info .client-name {
    color: var(--black);
}

.reviewer-info span {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: var(--black);
}

.carousel-control-next,
.carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 0;
    opacity: .5;
    transition: opacity .15s;
}

.ruby-popup,
.white-popup {
    background: #fff;
    padding: 5px;
    margin: 50px auto;
    height: 100%;
    max-width: 800px;
    position: relative;
}

.testimonials-slider .carousel .buttons {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
}

.testimonials-slider .carousel button {
    opacity: 1;
    position: unset;
    padding: 0;
    min-width: unset;
    width: unset;
    font-size: 0;
    cursor: pointer;
}

.testimonials-slider .owl-carousel .owl-nav {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    text-align: center;
}

.testimonials-slider .owl-carousel .owl-nav button {
    opacity: 1;
    position: unset;
    padding: 0;
    min-width: unset;
    font-size: 0;
    height: 42px;
    width: 42px;
}

.white-popup {
    transition: 1s;
    width: 70%;
    overflow: auto;
}

.gallery-icon.landscape img {
    border-style: none;
    height: auto;
    max-width: 100%;
}

.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: .15s ease-out;
    -moz-transition: .15s ease-out;
    transition: .15s ease-out;
}

.blogs-slider .item-image-news,
.news-box .news-inner-img {
    height: 275px;
    position: relative;
    margin-bottom: 20px;
}

.blogs-slider .item-image-news img {
    width: auto;
    max-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.bg-white2 .tab-content:hover .swiper-button-next,
.bg-white2:hover .swiper-button-next,
.blogs-slider:hover .swiper-button-next {
    right: 5px;
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.bg-white2 .tab-content:hover .swiper-button-next.swiper-button-disabled,
.bg-white2:hover .swiper-button-next.swiper-button-disabled,
.bg-white2:hover .swiper-button-prev.swiper-button-disabled,
.blogs-slider:hover .swiper-button-next.swiper-button-disabled,
.blogs-slider:hover .swiper-button-prev.swiper-button-disabled {
    opacity: .35;
}

.bg-white2 .swiper-button-next,
.blogs-slider .swiper-button-next {
    font-size: 0;
    position: absolute;
    display: block;
    height: 40px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: #fff;
    border: none;
    border-radius: 0;
    right: -35px;
    -webkit-transition: .25s;
    transition: .25s;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
}

.blogs-slider .swiper-button-next:after,
.blogs-slider .swiper-button-prev:after {
    font-size: 24px;
    line-height: 40px;
}

.bg-white2 .swiper-button-prev,
.blogs-slider .swiper-button-prev {
    font-size: 0;
    position: absolute;
    display: block;
    height: 40px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: #fff;
    border: none;
    border-radius: 0;
    left: -35px;
    -webkit-transition: .25s;
    transition: .25s;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
}

.bg-white2:hover .swiper-button-prev,
.blogs-slider:hover .swiper-button-prev {
    left: 5px;
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.bg-white2 .swiper-button-next:after,
.bg-white2 .swiper-button-prev:after {
    font-size: 40px;
    line-height: 30px;
}

.mfp-fade.mfp-bg.mfp-ready,
.no-touch .package-nugget-info a:hover {
    opacity: .8;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    transition: .4s ease-out;
}

.mfp-ready .gallery-item {
    margin: 0;
    text-align: center;
}

#ruby-popup .wrap-form {
    position: relative;
    top: 0;
    padding: 20px;
}

#ruby-popup .bgwhite {
    background: #fff0;
    padding: 35px 0 0;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: none;
}

.wrap-form .title {
    color: #fff;
    font-size: 30px;
    margin-bottom: 20px;
}

.ruby-popup {
    transition: 1s;
    width: fit-content;
    overflow: hidden;
}

.logo-contact-form img {
    max-width: 250px;
    width: auto;
    margin: auto;
}

.content-logo {
    margin-top: 40px;
}

.content-logo h3 {
    text-align: center;
    color: #fff;
    font-size: 30px;
    margin: 10px 0;
    display: inline-flex;
}

.bgwhite {
    background: #fff0;
}

.wrap-form input[type="email"],
.wrap-form input[type="number"],
.wrap-form input[type="tel"],
.wrap-form input[type="text"],
.wrap-form textarea {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 0 solid #ddd;
    margin-top: 10px;
    margin-bottom: 25px;
    height: 40px;
    resize: none;
    width: 100%;
    font-size: 16px;
    padding: 0 15px;
}

.mfp-content button,
.wrap-form button {
    padding: 10px 50px;
    margin-top: 15px;
    cursor: pointer;
}

.mfp-close-btn-in button.mfp-close {
    color: #fff;
    font-size: 40px;
}

.result-success {
    font-size: 16px;
    color: #fff;
}

@media only screen and (max-width:768px) {
    .section-about-information {
        padding: 30px 0 0
    }

    .section-about-information .mega-para {
        width: 100%;
        max-width: 100%;
        margin: 20px auto
    }

    .section-about-information .inner-content,
    .step-title {
        padding: 0
    }

    .section-about-information .row>div,
    .section-about-information .row>div:first-child {
        padding: 12px !important
    }

    .section-about-information .home-about {
        transform: translate(20px, 0);
        width: 100%;
        max-width: 400px
    }

    .primary-heading-box .main-heading {
        font-size: 36px
    }

    .section-about-information .container.home-page .mega-para {
        margin: 0;
        width: 100%;
        max-width: 100%;
        font-size: 16px
    }

    .ruby-popup {
        width: 100%;
        height: 100%
    }
}

.package-nugget-info,
.package-popup-trigger {
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.mfp-content button {
    color: #2c2524;
    font-size: 18px;
    border: 0;
    border-radius: 5px;
    transition: .3s ease-out;
    -moz-transition: .3s ease-out;
    -webkit-transition: .3s ease-out;
    -o-transition: .3s ease-out;
    font-weight: 500;
}

.package-popup .img-replace {
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    color: transparent;
    white-space: nowrap;
}

.package-nugget-info {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}

.package-nugget-info a {
    position: relative;
    font-size: 14px;
    color: #5e6e8d;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    transition: .2s;
}

.package-nugget-info span {
    vertical-align: middle;
    display: inline-block;
}

.package-nugget-info .package-nugget-info-arrow {
    fill: #5e6e8d;
}

.package-popup-trigger {
    display: block;
    width: 170px;
    margin: 3em auto;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 50em;
    background: #35a785;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .07);
}

.section-project,
.section-project .column-round-outline,
.section-project .div-block-project,
.section-project .div-block-project.project-home {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
}

.package-popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(94, 110, 141, .9);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .3s, visibility 0s .3s;
    -moz-transition: opacity .3s, visibility 0s .3s;
    transition: opacity .3s, visibility 0s .3s;
    z-index: 99999999;
}

.package-popup.is-visible {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity .3s, visibility;
    -moz-transition: opacity .3s, visibility;
    transition: opacity .3s, visibility;
}

.diamond.is-visible .package-popup-container,
.emerald.is-visible .package-popup-container,
.ruby.is-visible .package-popup-container {
    background-position: center center;
    background-repeat: no-repeat;
    max-width: 100%;
    min-height: 600px;
    padding: 30px 5px;
    margin: 100px auto;
    transition: 1s;
    background-size: cover;
    position: relative;
}

.package-popup-container {
    position: relative;
    width: 90%;
    max-width: 400px;
    margin: 4em auto;
    background: #fff;
    border-radius: .25em .25em .4em .4em;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-backface-visibility: hidden;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s;
}

.ruby.is-visible .package-popup-container {
    background-image: url(https://thuyan.com.vn/upload/images/banner-dich-vu/DIAMOND-03.webp);
}

.emerald.is-visible .package-popup-container {
    background-image: url(https://thuyan.com.vn/upload/images/banner-dich-vu/DIAMOND-01.webp);
}

.diamond.is-visible .package-popup-container {
    background-image: url(https://thuyan.com.vn/upload/images/banner-dich-vu/DIAMOND-02.webp);
}

.package-popup-container .wrap-form p {
    padding: 3em 1em;
}

.wrap-form button {
    background: #e7c415;
    color: #2c2524;
    font-size: 15px;
    border: 0;
    border-radius: 5px;
    transition: .3s ease-out;
    -moz-transition: .3s ease-out;
    -webkit-transition: .3s ease-out;
    -o-transition: .3s ease-out;
    font-weight: 700;
}

.package-popup-container .package-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
}

.package-popup-container .package-popup-close::after,
.package-popup-container .package-popup-close::before {
    content: "";
    position: absolute;
    top: 12px;
    width: 14px;
    height: 3px;
    background-color: var(--white);
}

.package-popup-container .package-popup-close::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 8px;
}

.package-popup-container .package-popup-close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 8px;
}

.is-visible .package-popup-container {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

@media only screen and (min-width:1170px) {
    .package-popup-trigger {
        margin: 6em auto
    }

    .package-popup-container {
        margin: 8em auto
    }
}

.diamond_btn button,
.emerald_btn button,
.ruby_btn button {
    width: 100%;
    background: #fff0;
    border: none;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

.section-project {
    display: flex;
    width: 100vw;
    height: 100%;
    padding: 0 20px 20px;
    margin: 40px 0;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.section-project .column-round-outline {
    display: flex;
    width: 33.333%;
    height: 700px;
    min-height: auto;
    margin-right: 0;
    margin-left: 0;
    padding: 0 35px;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    border: 1px #000;
    border-radius: 20px;
}

.section-project .caswde-study-image {
    overflow: hidden;
    width: calc((100vw - 120px) / 3);
    height: calc((100vw - 120px) / 3);
    max-width: none;
    padding-right: 20px;
    -o-object-fit: cover;
    object-fit: cover;
}

.section-project .column-round-outline.project-info {
    height: calc((100vw - 120px) / 3);
    margin-top: 80px;
    margin-right: 35px;
    margin-bottom: 80px;
    padding-top: 0;
    padding-right: 35px;
    padding-bottom: 0;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.section-project .div-block-project.project-home {
    display: flex;
    height: 100%;
    max-height: 90vh;
    padding-bottom: 40px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.section-project .div-block-project {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 50%;
    padding-top: 0;
    padding-bottom: 0;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.section-project .heading-project {
    padding-bottom: 40px;
    font-size: 40px;
}

.section-project .div-block-24 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    max-height: 500px;
    padding-left: 10px;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.section-project .paragraph-project {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.4;
}

.section-project .project-link {
    max-width: 100%;
    display: inline-block;
}

.section-project .p-project.black {
    font-size: 23px;
    font-weight: 400;
    color: #000;
    letter-spacing: 4px;
}

.section-project .slider-arrow-icon.home {
    overflow: visible;
    width: 40px;
    height: auto;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    color: #000;
    -o-object-fit: fill;
    object-fit: fill;
}

.section-project .slider-arrow-icon {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 10%;
    height: 100%;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.section-project .let-s-chat-link.project-link .project {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    margin-right: 10px;
    margin-left: 10px;
    padding: 60px 0;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #141517;
}

.section-project .let-s-chat-link .project {
    margin-right: 0;
    margin-left: 0;
    border-bottom-color: #141517;
}

.section-project .column-round-outline.project-home {
    padding: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
    margin: 80px 10px 80px 0;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 0;
    background-position: 50% 50%;
    background-size: cover;
    -o-object-fit: fill;
    object-fit: fill;
}

.section-project a.let-s-chat-link.project-link .slider-arrow-icon {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
    transition: .3s;
}

.section-project a.let-s-chat-link.project-link:hover .slider-arrow-icon {
    transform: translate3d(0, 0, 0) scale3d(1.2, 1.2, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0deg, 0deg);
}

.bot-row-service {
    padding: 45px 0;
}

.list-service {
    position: relative;
    float: left;
    width: 15%;
    color: #fff;
    margin-right: 5%;
}

.info-banner,
.info-banner h1,
.list-service h2,
.list-service span {
    width: 100%;
    position: relative;
}

.list-service h2 {
    float: left;
    text-align: left;
    font-size: 4em;
    line-height: 70px;
    margin: 0 0 5px;
}

.list-service span {
    float: left;
    text-align: left;
    font-size: 1.125em;
    color: #fff;
}

.project-sam h2 {
    font-size: 40px;
    color: var(--primary-color);
    font-weight: 500;
    text-align: center;
    margin-bottom: 40px;
}

.info-banner {
    text-align: center;
    padding: 140px 0;
    color: #fff;
}

.info-banner h2 {
    margin-bottom: 50px;
    color: #fff;
}

.info-banner h1 {
    float: left;
    text-align: center;
    font-size: 3.5em;
    margin: 0 0 45px;
}

.info-banner a {
    position: relative;
    float: left;
    color: #fff;
    font-size: 1.875em;
    padding: 15px 40px;
    border: 2px solid #fff;
    width: 600px;
    margin-left: calc((100% - 600px) / 2);
    text-align: center;
}

.info-banner a:hover {
    background: #fff;
    color: #3bb44a;
}

.section-our-clients .section-our-clients__title {
    font-size: 40px;
    color: #212c3d;
    font-weight: 500;
    margin-bottom: 50px;
    padding: 0 40px;
}

.section-introduction-2 .post,
.section-our-clients {
    padding-left: 10px;
    padding-right: 10px;
}

.skin-image-list__item {
    height: 85px;
    position: relative;
}

.skin-image-list__item img {
    width: auto;
    max-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: filter .3s ease-in-out;
    cursor: pointer;
}

.skin-image-list__item img:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.section-blogs h2 {
    font-size: 40px;
    color: #212c3d;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 50px;
    padding: 0 40px;
}

.section-blogs .item-content-news.hoho {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-blogs .item-news .date-news {
    font-size: 14px;
    font-weight: 200;
    position: relative;
}

.section-blogs .date-news {
    font-size: 14px;
    color: #999;
    margin-top: 5px;
    margin-bottom: 0;
}

.section-blogs .item-news h3,
.section-blogs .item-news h3 a {
    font-size: 18px;
    font-weight: 500;
}

.section-blogs .button-plus {
    background-image: url(http://localhost:8888/giaiphapprofile/upload/files/butt-plus.png);
    background-size: 100% 100%;
    height: 26px;
    width: 26px;
    display: inline-block;
}

@media (max-width:768px) {
    .section-service .title-service h2 {
        padding: 35px 0;
        font-size: 45px
    }

    .section-service .column-services .services-heading span.heading-title {
        font-size: 30px
    }

    .section-service .column-services .button-content span.button-text {
        font-size: 15px
    }

    .section-service .column-services {
        display: block;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        align-items: center;
        width: 100%
    }

    .section-service .column-services .services-col-50 {
        width: 100%
    }

    .section-service .column-services .services-heading ul.heading-title {
        padding-left: 20px
    }

    .section-service .column-services ul.heading-title>li {
        position: relative;
        display: block;
        font-size: 15px;
        margin-bottom: 12px;
        padding-left: 30px
    }

    .section-service .home-page h4.panel-title a {
        font-size: 35px;
        line-height: 1.5
    }

    .section-service .home-page .toggle__control .toggle__label-icon .tabs-icon svg {
        display: block;
        width: 55px;
        height: 55px;
        fill: currentColor;
        transition: .5s
    }

    .section-faqs .large-offset-left {
        padding: 15px
    }

    .section-blogs h2 {
        margin-top: 10px;
        transform: translate(0, 0)
    }

    .section-blogs .item-news img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }
}

.row-footer {
    padding: 55px 0 15px;
}

.col-footer {
    color: #a9a9a9;
}

.col-footer a {
    position: relative;
    color: #a9a9a9;
    float: left;
}

.col-footer p {
    position: relative;
    float: left;
    width: 100%;
    text-align: left;
    font-size: .875em;
}

.col-footer p span {
    position: relative;
    float: left;
    margin-right: 2px;
}

.p-white a[href^="tel:"] {
    color: #fff;
    text-decoration: none;
}

.col-footer h3 {
    position: relative;
    float: left;
    width: 100%;
    font-size: 1.75em;
    font-weight: 700;
    color: #46a147;
    text-align: left;
    margin: 15px 0 20px;
}

.news-inner a,
.ul-paging li.active a {
    font-weight: 600;
}

-slide .ul-slider li img,
.a-box-img,
.a-box-img img,
.box-logo ul,
.box-project-img,
.box-project-img img,
.col-footer ul,
.col-map,
.nav-xs ul,
.nav-xs ul li,
.new-inner-img a {
    position: relative;
    float: left;
    width: 100%;
}

#triangle-down,
.phone-m {
    position: absolute;
    display: none;
}

.col-footer ul li {
    position: relative;
    float: left;
    width: 100%;
    border-bottom: 1px solid #a9a9a9;
}

.col-footer ul li a {
    position: relative;
    float: left;
    width: 100%;
    font-size: 1em;
}

.logo-footer img {
    width: 250px;
}

.phone-m {
    border: 1px solid #25982b;
    left: 10px;
    bottom: 52px;
    background: #fff;
    width: 40%;
    padding: 5px 5px 5px 11px;
    font-size: 16px;
}

.phone-m a:active,
.phone-m a:focus,
.phone-m a:hover {
    color: #25982b;
    text-decoration: none;
}

#triangle-down {
    bottom: 47px;
    z-index: 1000;
    width: 0;
    height: 0;
    left: 16px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #fff;
}

.footer-support {
    background-color: #fefefe;
    color: #000;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    width: 100%;
    padding: 15px 0;
    min-height: 30px;
    border-top: 1px solid #ccc;
    text-align: center;
    z-index: 1000;
}

.p-out,
.row-bot-footer p {
    position: relative;
    float: left;
}

.modal-dialog.modal-lg {
    margin-top: 58px;
}

@media screen and (min-width:1024px) {

    .footer-support,
    div#coccoc-alo-phoneIcon {
        display: none
    }
}

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

    .footer-support .ico,
    .footer-support .ycbg {
        display: inline-block;
        background-color: #25982b;
        color: #fff
    }

    .footer-support {
        background-color: rgba(0, 0, 0, .5);
        text-align: left;
        padding: 10px 0;
        border-top: 0
    }

    .footer-support .ico {
        font-size: 20px;
        margin-right: 5px;
        margin-left: 7px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        line-height: 24px;
        text-align: center;
        border: 0;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box
    }

    .footer-support .fa {
        display: inline-block;
        font: 14px/1 FontAwesome;
        font-size: inherit;
        margin-top: 7px;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

    .footer-support .ycbg {
        padding: 0 15px;
        line-height: 36px;
        height: 36px;
        font-size: 16px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box
    }
}

@media (max-width:1024px) {

    .bg-white2 .swiper-button-next,
    .bg-white2 .swiper-button-prev,
    .blogs-slider .swiper-button-next,
    .swiper-button-prev {
        display: none !important
    }

    .chat-box,
    .coccoc-alo-phone,
    div#at-share-dock a {
        display: none
    }
}

.row-bot-footer p {
    text-align: left;
    color: #a9a9a9;
    padding: 15px 0;
    margin: 0;
}

.row-bot-footer p a {
    color: #a9a9a9;
}

.leave-mess {
    position: fixed;
    right: 10px;
    bottom: 0;
    height: 30px;
    background: #e98124;
    border-radius: 5px 5px 0 0;
}

.a-left-f,
.a-right-f,
.box-logo,
.box-logo-text,
.logo-content-info {
    position: relative;
    float: left;
}

.a-left-f {
    padding: 7px 8px;
}

.a-right-f {
    padding: 5px 20px 5px 10px;
    font-size: 1em;
    line-height: 20px;
    background: #f98f33;
    border-radius: 0 5px 0 0;
    color: #fff;
}

.a-right-f:hover {
    background: #e98124;
    color: #fff;
}

.a-contact {
    color: #fff;
    background: #46a040;
    margin-left: calc((100% - 240px) / 2);
}

.logo-content-info,
.row-logo-content h2 {
    text-align: center;
    margin: 0 0 30px;
    width: 100%;
}

.a-contact:hover {
    background: #fff;
    color: #46a040;
}

.row-logo-content h2 {
    font-size: 2.25em;
    color: #fff;
}

.logo-content-info {
    font-size: 1.125em;
    color: #606060;
    line-height: 180%;
}

.box-logo,
.box-logo ul li a,
.most-commented li a {
    color: #555;
}

.box-logo {
    width: 100%;
    background: #fff;
    min-height: 530px;
}

.box-logo-text {
    width: 100%;
    padding: 25px;
}

.box-logo ul li,
.box-logo-img {
    width: 100%;
    padding: 10px 0;
    position: relative;
    float: left;
    text-align: center;
}

.box-logo h3 {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 2.5em;
    margin: 0 0 20px;
    color: #76c133;
}

.box-logo ul li {
    border-bottom: 1px solid #555;
}

.border-img {
    position: relative;
    float: left;
    width: 120px;
    height: 120px;
    margin-left: calc((100% - 120px) / 2);
    border: 8px solid #65a62b;
    border-radius: 50%;
    background: #fff;
}

.border-img i {
    font-size: 4em;
    line-height: 60px;
    color: #76c133;
    margin-top: calc(50% - 30px);
}

.bg-blue-2b .border-img {
    border: 8px solid #3f617f;
}

.bg-blue-2b .border-img img {
    width: 60px;
    height: 60px;
    margin-top: calc(50% - 30px);
}

.bg-blue-02 .border-img {
    border: 8px solid #067878;
}

.bg-blue-02 .border-img i {
    color: #029292;
}

.a-box-contact {
    position: absolute;
    left: calc((100% - 170px) / 2);
    bottom: 20px;
    padding: 10px 30px;
    margin: 15px 0 0;
    border-radius: 5px;
    color: #fff;
}

.a-box-contact:hover {
    color: #fff;
    background: var(--primary-color) !important;
}

.logo-info-banner {
    position: relative;
    float: left;
    width: 100%;
    padding: 70px 0 60px;
    color: #fff;
}

.logo-info-banner h1 {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 3.9375em;
    margin: 0 0 15px;
}

.logo-info-banner h3 {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 1.5em;
    margin: 0 0 35px;
}

.logo-info-banner form {
    color: #9f9f9f;
    font-size: 1.125em;
}

.logo-info-banner input[type="text"] {
    width: 420px;
    height: 55px;
    margin-bottom: 15px;
    padding-left: 20px;
}

.logo-info-banner button[type="button"] {
    color: #fff;
    background: #76bb2c;
    font-size: 2em;
    line-height: 35px;
    padding: 10px 70px;
    border: 1px solid #76bb2c;
    border-radius: 5px;
    margin-top: 15px;
}

.logo-info-banner button[type="button"]:hover {
    border: solid 1px var(--primary-color);
    background: var(--primary-color);
}

.row-project-content {
    padding: 0 0 35px;
}

.col-navigation-content {
    color: #5b5b5b;
    font-size: 1.125em;
    padding-top: 20px;
    margin-bottom: 40px;
    height: 60px;
}

.col-navigation-content>ul {
    display: block;
    text-align: center;
}

.section-project-masonry__list__item__bg img,
.section-project-masonry__list__item__logo img {
    display: none !important;
}

.col-navigation-content>ul li {
    display: inline-block;
    margin-right: 45px;
}

.col-navigation-content ul li a {
    color: #5b5b5b;
    padding-top: 20px;
    padding-bottom: 20px;
}

.col-navigation-content>ul>li>ul {
    position: absolute;
    top: 100%;
    width: 250px;
    background: #303030;
    z-index: 9999;
    display: none;
}

.col-navigation-content>ul>li>ul>li {
    position: relative;
    float: left;
    width: 100%;
    border-bottom: 1px solid #eee;
}

.col-navigation-content>ul>li>ul li a {
    position: relative;
    float: left;
    width: 100%;
    padding: 10px;
    text-align: left;
    color: #fff;
    font-size: .9em;
}

.box-project {
    position: relative;
    float: left;
    width: 22%;
    background: #fff;
}

.box-project-list .show-detail i {
    padding-top: 45%;
}

.info-box-project {
    position: relative;
    float: left;
    width: 100%;
    padding: 15px 0;
}

.info-box-project a {
    position: relative;
    float: left;
    width: 100%;
    color: #292929;
    font-size: 1.25em;
    line-height: 23px;
    margin-bottom: 10px;
}

.info-box-project p {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    color: #888;
    margin: 0;
}

.a-view-more,
.view-more-a {
    position: relative;
    font-size: 1.3125em;
    color: #000;
    padding: 14px 25px;
    border-radius: 26px;
    line-height: 20px;
    margin: 30px auto;
    border: 1px solid #000;
}

.a-view-more:hover,
.view-more-a:hover {
    background: var(--primary-color);
    border: solid 1px var(--primary-color);
    color: #fff;
}

.a-view-more:hover .skin-image-op0-when--white,
.view-more-a:hover .skin-image-op0-when--white {
    display: block;
    height: 17px;
}

.a-view-more:hover .skin-image-op0-when--black,
.view-more-a:hover .skin-image-op0-when--black {
    display: none;
}

.section-project-masonry__list__item {
    padding: 4px;
    overflow: hidden;
    width: 100%;
}

.section-project-masonry__list.loading+.section-project-masonry__list__load-more,
.section-project-masonry__list__item.show-logo .section-project-masonry__list__item__logo,
.section-project-masonry__list__item:hover .section-project-masonry__list__item__content {
    opacity: 1;
}

.section-project-masonry__list__item.show-logo .section-project-masonry__list__item__logo+.section-project-masonry__list__item__bg {
    opacity: 0;
}

.section-project-masonry__list__item.grid-sizer,
.section_thuong_hieu #service-feature-section .service-description {
    padding: 0;
}

.section-project-masonry__list__item__inner {
    position: relative;
    overflow: hidden;
}

.section-project-masonry__list__item__bg {
    padding-top: 71.4285714286%;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
}

.section-project-masonry__list__item__bg:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .7s;
    transition: .7s;
    background: #171717;
}

.section-project-masonry__list__item__bg.loaded:before {
    opacity: 0;
}

.section-project-masonry__list__item__logo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: 50%;
    opacity: 0;
    z-index: 5;
    -webkit-transition: .3s;
    transition: .3s;
}

.section-project-masonry__list__item__content {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    padding: 15px;
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0;
    z-index: 10;
}

.button-content span,
.nav-show ul li:hover a,
.section-project-masonry__list__item__content:hover,
.section_thuong_hieu #service-feature-section .service-title.service-text-light {
    color: #fff;
}

h2.section-project-masonry__list__item__content__title {
    font-size: 24px;
    text-align: left;
    color: #fff;
}

.section-project-masonry__list__item__content__cat {
    font-size: 16px;
    color: #fff;
    overflow: hidden;
    position: absolute;
    bottom: 15px;
    left: 15px;
}

.section-project-masonry__list__item__content__cat__title {
    font-weight: 700;
    font-size: 16px;
}

.section-project-masonry__list__item__content__cat ul {
    margin-left: -20px;
}

.section-project-masonry__list__item__content__cat ul li {
    position: relative;
    padding-left: 20px;
    padding-right: 8px;
}

.section-project-masonry__list__item__content__cat ul li:before {
    content: "/";
    display: block;
    position: absolute;
    left: 0;
}

.section-project-masonry__list__item__content__expand {
    position: absolute;
    display: block;
    bottom: 15px;
    right: 15px;
}

.section-project-masonry__list__item__content__expand img {
    width: 59px;
}

.section-project-masonry__list__load-more {
    opacity: 0;
}

.section-project-masonry__list__load-more img {
    width: 100px;
    height: auto;
    margin: 0 auto;
    display: none !important;
}

@media (min-width:768px) {
    .section-our-clients {
        padding-left: 0;
        padding-right: 0;
        padding-top: 80px;
    }

    .section-project-masonry__list {
        margin-left: -4px;
        margin-right: -4px
    }

    .section-project-masonry__list__item {
        width: 50%;
        padding-left: 4px;
        padding-right: 4px
    }

    .section-project-masonry__list__item__content__cat {
        width: calc(100% - 60px)
    }

    .section-project-masonry__list__item__content__cat__title {
        margin-top: 25px
    }

    .section-project-masonry__list__item__content__cat ul {
        width: 100%
    }

    .section-videos__list__item:hover .section-project-masonry__list__item__content {
        opacity: 1
    }

    .section-videos__list__item .section-project-masonry__list__item__content {
        left: 4px;
        right: 4px;
        width: auto
    }

    .section-project-masonry__filter {
        margin-bottom: 65px
    }

    .section-project-masonry__filter__right {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        text-align: center
    }

    .section-project-masonry__filter__right ul {
        margin-left: -30px
    }
}

@media (min-width:1025px) {

    .section-project-masonry__list__item--big .section-project-masonry__list__item__content__expand,
    .section-project-masonry__list__item__content__expand {
        right: 24px;
        bottom: 24px
    }

    .section-project-masonry__list__item--panel {
        width: 33.3333333333%;
        float: left !important
    }

    .section-project-masonry__list__item--panel:nth-child(13n + 2) {
        width: 66.6666666667%
    }

    .section-project-masonry__list__item--panel:nth-child(13n + 10),
    .section-project-masonry__list__item--panel:nth-child(13n + 5),
    .section-project-masonry__list__item--panel:nth-child(13n + 9) {
        clear: left;
        width: 33.3333333333%
    }

    .section-project-masonry__list__item--panel:nth-child(13n + 8) {
        width: 66.6666666667%;
        float: right !important
    }

    .section-project-masonry__list__item--panel:nth-child(13n + 11) {
        width: 33.3333333333%;
        clear: left
    }

    .section-project-masonry__list__item--panel:nth-child(13n + 12),
    .section-project-masonry__list__item--panel:nth-child(13n + 13) {
        width: 33.3333333333%
    }

    .section-project-masonry__list__item--big .section-project-masonry__list__item__bg {
        padding-top: 72.959%
    }

    .section-project-masonry__list__item--big .section-project-masonry__list__item__content {
        padding-top: 44px
    }

    .section-project-masonry__list__item--big .section-project-masonry__list__item__content__cat {
        bottom: 24px
    }

    .section-project-masonry__list__item--small .section-project-masonry__list__item__bg {
        padding-top: 72.7272727273%
    }

    .section-project-masonry__list__item__content {
        padding: 40px
    }

    .section-project-masonry__list__item__content__title {
        font-size: 32px
    }

    .section-project-masonry__list__item__content__cat {
        left: 30px;
        bottom: 20px;
        font-size: 20px;
        width: calc(100% - 115px)
    }

    .section-project-masonry__list__item__content__cat ul li,
    .section-project-masonry__list__item__content__cat__title {
        font-size: 20px
    }

    .section-project-masonry .see-all {
        padding-right: 0;
        margin: auto;
        text-align: left
    }

    .section-project-masonry__filter {
        margin-bottom: 40px;
        font-size: 20px
    }

    .section-project-masonry__filter__left {
        padding-left: 80px
    }
}

.project_menu .filter-project-service .search-bar {
    background-color: #e6eeed;
    margin-bottom: 30px;
    padding: 8px 0;
}

.project_menu .filter-project-service,
.project_menu .filter-project-service .search-bar .container {
    position: relative;
    height: 48px;
}

.project_menu .filter-project-service .search-bar ul,
.project_menu .filter-project-service .search-service ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.project_menu .project_menu .search_project .form-control {
    box-shadow: 0 0 0 transparent;
}

.project_menu .search_project .form-control input {
    border-radius: 0;
    height: 25px;
    padding: 0 0 0 7px;
}

.project_menu .search_project .input-search input {
    padding: 0 0 0 20px;
    letter-spacing: 1px;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
    height: 48px;
    border-radius: 0;
    display: block;
}

.project_menu .search_project .form-control input::-webkit-input-placeholder {
    color: #d2d2d2;
}

.project_menu .search_project .form-control input::-moz-placeholder {
    color: #d2d2d2;
}

.project_menu .search_project .form-control input:-ms-input-placeholder {
    color: #d2d2d2;
}

.project_menu .search_project .form-control input:-moz-placeholder {
    color: #d2d2d2;
}

.project_menu .filter-project-service .search-bar ul li.search-form {
    width: 290px;
    height: 48px;
    position: relative;
}

.project_menu .filter-project-service .search-bar ul li,
.project_menu .filter-project-service .search-bar ul li.linhvuc {
    float: left;
    height: 48px;
    line-height: 48px;
    text-align: left;
}

.project_menu .filter-project-service .search-bar ul li.sort {
    float: right;
    height: 48px;
    line-height: 48px;
    text-align: left;
}

.project_menu .filter-project-service .search-bar ul li.sort div.mega-full {
    position: absolute;
    height: 0;
    right: 0;
    background-color: #fff;
    z-index: 1000;
    padding: 0;
    display: block;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    -webkit-box-shadow: 0 0 2px 0 #919191;
    -moz-box-shadow: 0 0 2px 0 #919191;
    box-shadow: 0 0 2px 0 #919191;
}

.project_menu .filter-project-service .search-bar ul li.linhvuc div.mega-full,
.section-project-masonry .category-dropdown .drop-service li div.mega-full {
    top: 120%;
    left: 15px;
    right: 15px;
    background-color: #fff;
    z-index: 1000;
    overflow: hidden;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    position: absolute;
    display: block;
    visibility: hidden;
}

.section-project-masonry .category-dropdown .drop-service li.open div.mega-full,
.section-project-masonry .category-dropdown .drop-service li:hover div.mega-full {
    visibility: visible;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    top: 120%;
}

.section-project-masonry .category-dropdown .drop-service li div.mega-full {
    width: 300px;
    padding: 15px 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-box-shadow: 0 0 2px 0 #919191;
    -moz-box-shadow: 0 0 2px 0 #919191;
    box-shadow: 0 0 2px 0 #919191;
}

.section-project-masonry .category-dropdown .drop-service li div.mega-full ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 48px;
}

.section-project-masonry .category-dropdown .drop-service li div.mega-full ul li {
    float: left;
    height: 48px;
    line-height: 48px;
    text-align: left;
    font-size: 16px;
}

.project_menu .filter-project-service .search-bar ul li.linhvuc {
    padding-left: 25px;
    padding-right: 25px;
}

.project_menu .filter-project-service .search-bar ul li.linhvuc a,
.project_menu .filter-project-service .search-bar ul li.sort a {
    color: #333;
    font-size: 16px;
    cursor: pointer;
    position: relative;
}

.project_menu .filter-project-service .search-bar ul li.linhvuc div.mega-full {
    height: 0;
    padding: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-box-shadow: 0 0 2px 0 #919191;
    -moz-box-shadow: 0 0 2px 0 #919191;
    box-shadow: 0 0 2px 0 #919191;
}

.project_menu .filter-project-search-service .search-service ul li a:hover,
.project_menu .filter-project-service .search-bar ul li.linhvuc a:hover,
.project_menu .filter-project-service .search-bar ul li.sort a:hover {
    color: #085951;
}

.project_menu .filter-project-service .search-bar ul li.open.linhvuc a:after,
.project_menu .filter-project-service .search-bar ul li.open.sort a:after,
.project_menu .filter-project-service .search-bar ul li:hover.linhvuc a:after,
.project_menu .filter-project-service .search-bar ul li:hover.sort a:after {
    content: "";
    display: inline-block;
    height: 0;
    width: 0;
    border: 10px solid transparent;
    border-bottom-color: #fff;
    position: absolute;
    bottom: -16px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    z-index: 1001;
}

.project_menu .filter-project-service .search-bar ul li.open div.mega-full,
.project_menu .filter-project-service .search-bar ul li:hover div.mega-full {
    visibility: visible;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    top: 100%;
    height: auto;
    padding: 15px 0;
}

.project_menu .filter-project-search-service .search-service {
    text-align: center;
    padding: 50px 0 10px;
}

.project_menu .filter-project-search-service .search-service ul li {
    display: inline-block;
    font-size: 13px;
    cursor: pointer;
    margin: 5px 10px;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

.project_menu .filter-project-search-service .search-service ul li a {
    margin: 5px 10px;
    font-size: 16px;
    color: #333;
}

.project_menu .input-search input[type="text"]::placeholder {
    color: #085951;
    opacity: 1;
}

.project_menu .input-search input[type="text"]::-ms-input-placeholder {
    color: #085951;
}

@media only screen and (max-width:767px) {
    .project_menu .filter-project-search-service .search-service {
        padding: 10px 0
    }

    .project_menu .filter-project-service .search-bar ul li.open div.mega-full,
    .project_menu .filter-project-service .search-bar ul li:hover div.mega-full {
        top: 130px;
        height: 500px;
        overflow: auto
    }

    .project_menu .filter-project-service .search-bar ul li.open.linhvuc a:after,
    .project_menu .filter-project-service .search-bar ul li.open.sort a:after,
    .project_menu .filter-project-service .search-bar ul li:hover.linhvuc a:after,
    .project_menu .filter-project-service .search-bar ul li:hover.sort a:after {
        display: none
    }

    .project_menu .filter-project-service .search-bar .search-menu-top ul li {
        height: 100%;
        line-height: 24px
    }

    .filter-project-search-service .search-name-service {
        padding: 0
    }

    .section-du-an .case-sudy-project .title_content h3 {
        font-size: 32px
    }

    .section-du-an .case-sudy-project .title_content p {
        font-size: 16px;
        margin: 0;
        padding: 0 15px
    }

    .section-du-an .case-sudy-project {
        padding: 20px 0 75px
    }

    .project_menu .filter-project-search-service .search-service ul li {
        display: block
    }

    .project_menu .filter-project-search-service .search-service ul li a {
        font-size: 13px;
        color: #333
    }

    .project_menu .filter-project-service .search-bar .sapxep a,
    .project_menu .filter-project-service .search-bar ul li.linhvuc a {
        font-size: 14px
    }
}

.project_menu .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.video-inner {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.video-inner video {
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: auto;
    height: 100%;
}

.plus i,
.plus-s i {
    left: -5.5px;
    top: 4.5px;
    z-index: 999;
}

.section-project-masonry .see-all {
    white-space: nowrap;
    line-height: 1;
    width: 100%;
    text-align: center;
}

.section-project-masonry .see-all a:hover .see-all__icon,
.section-project-masonry .view-more a:hover .see-all__icon {
    -webkit-transform: translate(5px, -5px);
    transform: translate(5px, -5px);
}

.section-project-masonry .view-more {
    text-align: right;
    white-space: nowrap;
    position: relative;
    float: left;
    font-size: 1.3125em;
    color: #000;
    padding: 14px 25px;
    border-radius: 26px;
    line-height: 20px;
    margin: 30px auto;
}

.section-project-masonry .see-all .a-view-more:hover .skin-image-op0-when--white,
.section_thuong_hieu .section-clients-masonry .see-all a:hover .skin-image-op0-when--white {
    display: block;
    position: relative;
    float: left;
}

.section-project-masonry .see-all__icon,
.section_thuong_hieu .section-clients-masonry .see-all .see-all__icon {
    display: inline-block;
    vertical-align: bottom;
    margin-left: 5px;
    -webkit-transition: .3s;
    transition: .3s;
}

.section-project-masonry .see-all__icon img {
    height: 17px;
    width: auto;
    display: block;
}

.clear-left,
.outer-news {
    clear: left;
}

.lazy-load-bg-image {
    background-image: url(https://bratus.co/wp-content/themes/bratus/assets/img/default-image.png);
}

.masonry-item-overlay {
    background-color: #272727;
}

.section-project-masonry__filter__right {
    font-weight: 700;
}

.section-project-masonry__filter__right ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.section-project-masonry__filter__right ul li,
.section_thuong_hieu .service-parent-left .column-wrapper {
    position: relative;
}

.section-project-masonry__filter__right ul li.active,
.section-project-masonry__filter__right ul li:hover {
    color: #9c9b9b;
}

.btn-next:hover,
.btn-prev:hover,
.section-project-masonry__filter__right ul li.active:before,
.section-project-masonry__filter__right ul li:hover:before,
.section_thuong_hieu #service-feature-section .show-on-scroll-1 .service-title {
    opacity: 1;
}

.section-project-masonry__filter__right ul li:first-child span,
.section-project-masonry__filter__right ul li:first-child:before {
    display: none;
}

.section-project-masonry__filter__right ul li a {
    display: block;
    padding-left: 25px;
    padding-right: 25px;
    position: relative;
}

.most-commented li a:hover,
.nav-show .ul-navigation-2 li a:hover,
.nav-show .ul-navigation-2 li a:hover span,
.news .col-news-inner h3:hover,
.news-inner a:hover,
.news-tittle:hover,
.section-project-masonry__filter__right ul li a:hover,
.section-project-masonry__filter__right ul li.active a {
    color: var(--primary-color);
}

.section-project-masonry__filter__right ul li span,
.section-project-masonry__filter__right ul li:before {
    position: absolute;
    width: 2px;
    height: 15px;
    display: block;
    bottom: 5px;
    left: 0;
}

.section-project-masonry__filter__right ul li:before {
    z-index: 2;
    content: "";
    background: #9c9b9b;
    opacity: 1;
}

.category-dropdown {
    padding: 0 0 50px;
    min-width: 100%;
    width: 100%;
}

.section-project-category {
    padding: 5px 0;
    background-color: #e6eeed;
    margin-bottom: 30px;
}

.category-dropdown__inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.category-dropdown .category-item {
    cursor: pointer;
    font-size: 22px;
    color: var(--primary-color);
    position: relative;
    display: block;
}

.category-dropdown .ng-scope .ul-has-child1 {
    position: absolute;
    top: 50px;
    left: 130px;
    padding: 20px 0;
    border-radius: 12px;
    right: 20px;
    max-width: 350px;
    background-color: #f5f6fa;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    -webkit-transform-origin: 100% bottom;
    transform-origin: 100% bottom;
    transition: transform .35s cubic-bezier(.165, .84, .44, 1);
    transition: transform .35s cubic-bezier(.165, .84, .44, 1), -webkit-transform .35s cubic-bezier(.165, .84, .44, 1);
    -webkit-transition: transform .35s cubic-bezier(.165, .84, .44, 1);
    -moz-transition: transform .35s cubic-bezier(.165, .84, .44, 1);
    -ms-transition: transform .35s cubic-bezier(.165, .84, .44, 1);
    -o-transition: transform .35s cubic-bezier(.165, .84, .44, 1);
    z-index: 99;
}

.category-dropdown .ul-drop-list.ul-has-child1 li.ng-scope.ng-has-child2 a {
    font-size: 18px;
    color: var(--primary-color);
}

.category-dropdown .category-dropdown__inner .ul-drop,
.ul-paging,
.ul-project-detail-slide li {
    text-align: center;
}

.category-dropdown .category-dropdown__inner .ul-drop .ng-scope {
    display: inline-block;
    font-size: 18px;
    cursor: pointer;
    margin: 5px 10px;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

.category-dropdown .category-dropdown__inner .ng-scope {
    position: relative;
    display: block;
    text-align: left;
}

.category-dropdown .category-dropdown__inner .ng-scope a .svg {
    height: 20px !important;
    width: 20px !important;
    position: relative;
    right: -47px;
    top: 12%;
    transform: translate(0, -50%);
}

.category-dropdown ul.category-dropdown__inner .ng-scope a .svg:after,
.category-dropdown ul.category-dropdown__inner .ng-scope a .svg:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    background-color: currentColor;
    transition: transform .4s ease-in-out, opacity .4s ease-in-out;
}

.project__detail {
    padding-bottom: 50px;
    margin-top: 100px;
    margin-bottom: 50px;
}

.project__detail .info-project,
.project__detail-content {
    margin: 40px auto;
    max-width: 90%;
}

.project__detail .project__detail-content h1 {
    font-size: 30px;
    font-weight: 500;
    text-align: center;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: auto;
    max-height: 100%;
    padding: 0;
    color: #075951;
    line-height: 1.3;
    text-transform: uppercase;
}

.project__detail .info-project label {
    font-size: 16px;
    color: #075951;
    padding-bottom: 0;
    font-weight: 500;
    position: relative;
}

.project__detail .info-project h4 {
    margin: 10px 0;
}

.project__detail .row_project_detail-navigation .col-navigation-content {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    text-align: center;
}

.project__detail .row_project_detail-navigation .col-navigation-content ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
}

#image-popup,
#image-popup a img,
.col-slide-news img,
.mid-section .mid-section__heading,
.project__detail .row_project_detail-content .project__detail-image img,
.svg-container.contain-svg svg {
    width: 100%;
}

.project__detail .row_project_detail-content .project__detail-content {
    padding-top: 20px;
    padding-bottom: 20px;
}

.project__detail .row_project_detail-content .project__detail-content p,
.section_thuong_hieu .service-parent-buttom a.buttom-service-view span {
    font-size: 16px;
}

.project__detail .row_project_detail-content .project__detail-content .content-text h2 {
    font-size: 30px;
    color: #212c3d;
    font-weight: 500;
}

.project__detail .row_project_detail-content .project__detail-content .content-text .item-info label {
    color: #000;
}

.icon-fb,
.icon-google,
.plus {
    position: relative;
    float: left;
    height: 20px;
}

.icon-fb {
    width: 45px;
    padding: 2px;
    background: #3d57a9;
    border-radius: 3px;
}

.col-news-inner,
.col-slide-news,
.icon-google,
.plus,
.plus i,
.plus-s,
.plus-s i {
    background: #fff;
}

.icon-fb i {
    position: relative;
    float: left;
    color: #fff;
}

.icon-fb i span {
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    margin-left: 4px;
}

.plus {
    position: relative;
    float: left;
    width: 25px;
    height: 20px;
    border: 1px solid #9ca1ad;
    border-radius: 3px;
    margin-left: 7px;
    padding-left: 7px;
}

.plus i {
    position: absolute;
    color: #9ca1ad;
    line-height: 8px;
}

.icon-google,
.icon-google i {
    color: #dc3418;
    position: relative;
    float: left;
}

.plus span,
.plus-s span {
    position: relative;
    float: left;
    line-height: 20px;
}

.icon-google {
    padding: 2px 5px;
    border: 1px solid #d7d7d7;
    border-radius: 3px;
    margin-left: 5px;
    font-size: 13px;
}

.plus-s {
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    border: 1px solid #d1d1d1;
    border-radius: 3px;
    margin-left: 7px;
    padding-left: 5px;
}

.plus-s i,
.zoom {
    position: absolute;
}

.plus-s i {
    color: #d1d1d1;
    line-height: 8px;
}

.zoom {
    top: 0;
    right: 0;
    font-size: 1.125em;
    cursor: pointer;
}

.col-news-inner h3,
.col-slide-news {
    position: relative;
    width: 100%;
    float: left;
}

.wrapper-slide-news {
    padding: 0 0 20px;
    background-color: #fff;
    margin: 50px 0;
}

.col-slide-news h3 {
    font-size: 2em;
    margin: 0;
    padding: 10px;
    background: #fff;
}

.col-news-inner {
    margin: 10px 0 30px;
}

.col-news-inner h3 {
    margin: 20px 0;
    font-size: 2.5em;
    color: #46a040;
}

.news .article-event-blog h3 {
    padding-bottom: 20px;
    margin-top: 0;
    text-transform: uppercase;
    font-size: 2.25em;
}

.news .article-event-blog .line-horizotal {
    background: #ebebeb;
    height: 2px;
    margin-top: 18px;
}

.news .col-news-inner {
    background: #ebebeb;
    box-shadow: -3px 3px 1px #a5a5a5;
    padding: 10px;
    margin: 0 0 30px;
}

@media screen and (min-width:768px) and (max-width:980px) {
    .news .brand {
        padding-left: 25px
    }
}

.news-box .news-inner-img img {
    width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.news .col-news-inner h3 {
    font-size: 1.5em;
    color: #515151;
    margin-top: 0;
    margin-bottom: 10px;
}

.news-inner-img a img {
    width: 100%;
    border-radius: 5px 0 0 5px;
    margin-top: 5px;
}

.news-inner a {
    color: #333;
    line-height: 1.2;
    font-size: 17px;
    margin-top: 10px;
    margin-bottom: 15px;
    height: 42px;
}

.news-inner p {
    line-height: 155%;
    text-align: left;
    position: relative;
    float: left;
    width: 100%;
    padding: 10px 0;
}

.news-tittle {
    font-size: 2em;
}

.news-inner ul {
    position: relative;
    float: left;
    width: 100%;
    margin: 10px 0;
    padding: 0;
}

.news-inner ul li {
    position: relative;
    float: left;
    width: 100%;
    padding: 5px 0;
}

.post-content .image-blogs {
    margin: 40px 0;
}

.post-content h1 {
    font-size: 24px;
    font-weight: 500;
    color: #212c3d;
}

.post-content p,
.post-content span {
    /*font-size: 16px;*/
    /*font-weight: 200;*/
    color: #212c3d;
    font-family: var(--primary-font);
}
.post-content b,
.post-content strong{
    font-weight: 500;
}

.col-contact {
    margin: 20px 0 40px;
}

.col-contact h3 {
    position: relative;
    float: left;
    width: 100%;
    font-size: 1.5em;
    margin: 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #aaa;
}

.inner-info {
    margin-bottom: 10px;
    margin-right: 10%;
}

.inner-info span {
    position: relative;
    float: left;
    width: 20%;
}

.inner-info input[type="text"] {
    position: relative;
    width: 70%;
    padding: 8px;
}

.inner-info textarea {
    width: 70%;
}

.send-content {
    position: relative;
    float: right;
    padding: 10px 30px;
    background: #075951;
    color: #fff;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 140px;
}

.list-menu,
.nav-show,
.send-content:hover {
    background: var(--primary-color);
}

.send-content:hover {
    color: #fff;
}

.col-map iframe {
    position: relative;
    float: left;
    width: 100%;
    height: 400px;
}

.list-menu {
    position: absolute;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    display: none;
}

.nav-show,
.nav-show ul li {
    padding: 0;
    position: relative;
    width: 100%;
}

.nav-show {
    float: left !important;
    max-height: inherit !important;
    display: none;
    height: 300px;
    overflow-y: scroll;
    overflow-x: none !important;
    z-index: 9999;
    margin-bottom: 5px;
}

.nav-xs,
.show-detail {
    position: absolute;
    display: none;
    left: 0;
}

.nav-show ul li {
    float: left;
    border-radius: 5px;
    transition: none;
    -webkit-transition: none;
    -o-transition: none;
    -moz-transition: none;
}

.nav-show ul li a {
    position: relative;
    float: left;
    width: 100%;
    color: #fff;
    font-size: 1em;
    line-height: 30px;
    padding-left: 10px;
    border-bottom: 1px solid #fff;
}

.nav-show li a span {
    position: relative;
    float: left;
    width: 100%;
    color: #fff;
    font-size: .9375em;
    line-height: 30px;
}

.col-navigation-content-xs {
    border-top: 1px solid #5b5b5d;
    border-bottom: 1px solid #5b5b5d;
    color: #5b5b5b;
    font-size: 1.125em;
    padding: 5px 0;
    margin-bottom: 40px;
    background: #fff;
    display: none;
}

.categories li a:hover,
.nav-xs {
    background: var(--primary-color);
}

.icon-nav-xs i {
    position: relative;
    float: right;
    color: var(--primary-color);
    font-size: 2em;
    cursor: pointer;
}

.nav-xs {
    top: 110%;
    width: 100%;
    z-index: 9999;
    padding: 5px 0;
}

.icon-border,
.nav-xs ul li a,
.nav-xs ul li>ul,
.show-detail a,
.show-detail i {
    position: relative;
    float: left;
}

.nav-xs ul li a {
    width: 100%;
    color: #fff;
    border-bottom: 1px solid #fff;
    padding: 3px 10px;
}

.nav-xs ul li>ul {
    width: calc(100% - 30px);
    margin: 0 15px;
}

.icon-border {
    width: 140px;
    height: 140px;
    margin-left: calc((100% - 140px) / 2);
    border-radius: 100%;
    text-align: center;
}

.icon-border i {
    font-size: 5.6em;
    margin-top: calc(50% - 35px);
    color: #fff;
}

.scroll-top {
    position: fixed;
    right: 10px;
    bottom: 10px;
    height: 40px;
    width: 40px;
    border-radius: 5px;
    background: rgba(0, 0, 0, .5);
    text-align: center;
    cursor: pointer;
    display: none;
    z-index: 9999999;
}

.show-detail,
.show-detail a,
.show-detail i {
    width: 100%;
    height: 100%;
}

.scroll-top i {
    color: #fff;
    font-size: 2em;
    line-height: 25px;
    margin-top: 6px;
}

.show-detail {
    top: 0;
    padding: 0 15px;
    overflow: hidden;
    z-index: 999;
}

.btn-next,
.btn-prev {
    position: absolute;
    top: 50%;
    z-index: 99999;
    opacity: .5;
}

.show-detail a {
    background: rgba(0, 0, 0, .4);
}

.show-detail i {
    padding-top: 35%;
    font-size: 25px;
}

.btn-prev {
    left: 0;
}

.btn-next {
    right: 0;
}

.text-white {
    color: #fff !important;
}

.bot-shadow {
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}

.seperator {
    background-color: #303030;
    height: 2px;
    position: relative;
    width: 22px;
    display: block;
    margin: 10px auto 15px;
}

.solution-block h3 {
    color: var(--primary-color);
    font-size: 1.5em;
    margin: 0;
}

.solution-block .seperator {
    background-color: #029292;
}

.solution-block p {
    color: #555;
    font-size: 1em;
    text-align: justify;
}

.categories li {
    float: left;
    color: #666;
    margin-right: 4px;
    margin-bottom: 4px;
}

.most-commented li,
.sidebar-box {
    margin-bottom: 20px;
    position: relative;
    width: 100%;
    float: left;
}

.categories li a {
    display: block;
    color: #666;
    padding: 8px 9px;
    border: 1px solid #e0e0e0;
    font-size: .9em;
}

.categories li a:hover {
    border: 1px solid #fff;
    color: #fff;
}

.sidebar-box h3 {
    font-size: 1.4em;
    color: var(--primary-color);
    border-bottom: solid 1px var(--primary-color);
    padding-bottom: 10px;
}

.most-commented li {
    margin-left: 10px;
    color: #888 !important;
}

.timeago {
    position: relative;
    float: left;
    width: 100%;
    margin-top: 5px;
}

.post-content h3 {
    position: relative;
    float: left;
    width: 100%;
    margin: 20px 0;
    font-size: 2.8em;
    color: #46a040;
}

.ul-paging li {
    display: inline-block;
    font-size: 1.25em;
}

.ul-paging li a {
    color: var(--primary-color);
    padding: 0 5px;
}

.eng,
.vie {
    width: inherit !important;
    padding-right: 0 !important;
}

.eng {
    margin-right: 0 !important;
}

.eng span {
    line-height: 15px;
    border-right: 1px solid #373737;
    padding-right: 10px !important;
    margin-top: 7.5px;
}

.about-content p,
.mid-section__content__text p {
    line-height: 30px;
    font-size: 22px;
}

input.has-error {
    border: 1px solid red !important;
}

.mailto {
    padding: 10px 30px;
    background: #fff;
    border-radius: 5px;
    color: #46a040;
    border: 1px solid #46a040;
}

.fancybox-lock .fancybox-overlay,
.fancybox-opened {
    z-index: 9999999999 !important;
}

.p-out i.fa-building,
.p-out i.fa-print {
    font-size: 1.2em;
}

.p-out i.fa-mobile-phone {
    font-size: 1.75em;
}

.p-btn {
    position: absolute !important;
    bottom: 2em;
    left: 0;
    width: 100% !important;
}

.next-bx-pager,
.prev-bx-pager {
    position: absolute;
    width: 2em;
    height: 80px;
    cursor: pointer;
}

.prev-bx-pager {
    left: -5px;
}

.next-bx-pager i,
.prev-bx-pager i {
    margin-top: 25px;
    font-size: 2em;
    color: var(--primary-color);
}

.next-bx-pager {
    right: -5px;
}

.fancybox-inner,
.fancybox-outer {
    width: 100% !important;
}

.icon-footer-contact {
    font-size: 1.5em;
}

.fancybox-inner {
    overflow: hidden !important;
}

.chat-face-b-link {
    position: fixed;
    right: 10px;
    top: 285px;
    z-index: 123;
}

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

    .section-project,
    .section-project .caswde-study-image {
        padding: 0
    }

    .section-project .div-block-24 {
        height: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 0;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .section-project .div-block-project.project-home {
        height: 100%;
        max-height: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        min-width: 33.333%
    }

    .section-project .column-round-outline.project-info {
        width: 100%;
        height: auto;
        margin-right: 0;
        padding: 0 0 30px;
        margin-top: 30px;
        margin-bottom: 10px
    }

    .section-project .column-round-outline {
        width: 100%
    }

    .section-project .column-round-outline.project-home {
        overflow: visible;
        height: 100%;
        margin: 10px;
        padding: 0;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        border-radius: 0;
        background-position: 50% 50%;
        background-size: cover;
        -o-object-fit: fill;
        object-fit: fill
    }

    .section-project .column-round-outline.project-home_01 {
        width: 100%;
        height: 350px;
        margin-top: 20px;
        margin-right: 0;
        padding-top: 110px;
        padding-bottom: 110px
    }

    body .chat-face-b-link:hover+.box-chat {
        display: none !important
    }
}

.chat-face-b-link:hover+.box-chat {
    display: block !important;
    right: 56px;
}

.box-chat:hover {
    right: 56px;
}

.box-chat {
    transition: All 1s;
    -webkit-transition: All 1s;
    -moz-transition: All 1s;
    -o-transition: All 1s;
    position: fixed;
    right: -256px;
    top: 285px;
}

.modal-dialog.modal-lg span {
    color: #fff;
    margin-right: 10px;
    font-size: 45px;
}

.mid-section .mid-section__heading h2,
.top-section h1.about-heading-title {
    font-size: 72px;
    line-height: 82px;
    letter-spacing: 1px;
    color: #000;
    text-transform: uppercase;
    font-weight: 400;
}

.bg-rgba .logo-info-banner {
    padding-top: 23px;
}

.top-section {
    padding: 150px 0 50px;
}

.section-banner .container,
.top-section .container.about-page {
    max-width: 1250px;
}

.about-heading {
    max-width: 900px;
}

.about-content {
    width: var(--container-widget-width, 520px);
    max-width: 520px;
    --container-widget-width: 520px;
    --container-widget-flex-grow: 0;
    justify-content: flex-end;
    float: right;
}

.section-banner {
    position: relative;
    padding: 3% 3% 6%;
}

.section-banner .row {
    text-align: center;
    justify-content: center;
}

.section-banner .section-banner_bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
    padding: 5%;
    width: 100%;
    height: 100%;
}

.section-banner .section-banner_bg .section-banner_bg__image img {
    height: auto;
    max-width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    width: 87%;
    vertical-align: middle;
    display: inline-block;
}

.mid-section .mid-section__heading h2 {
    padding-left: 100px;
    padding-bottom: 50px;
}

.mid-section .mid-section__content {
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 50px;
}

.mid-section__content__text {
    width: var(--container-widget-width, 720px);
    max-width: 720px;
    --container-widget-width: 720px;
    --container-widget-flex-grow: 0;
    justify-content: flex-end;
}

.section-contact__column {
    display: flex;
    padding: 100px 0;
}

.section-contact__column .section-contact__column_left {
    width: 60%;
}

.section-contact__column .section-contact__column_right {
    width: 40%;
    display: flex;
    align-content: flex-end;
    align-items: flex-end;
    justify-content: flex-end;
}

.section-contact__column_right_test {
    margin: 90px 0 0;
}

.section-contact__column_right_test p {
    font-size: 22px;
}

.section-contact___column_left_heading h1 {
    font-size: 72px;
    font-weight: 400;
}

.button-content span.button-text {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 20px;
    flex-grow: 1;
    order: 10;
    display: inline-block;
}

.button-icon {
    transition: .3s;
    transform: rotate(0);
    color: var(--primary-color);
    background-color: var(--second-color);
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 100%;
    padding: 3px;
    margin-left: 15px;
    order: 15;
}

.divider {
    display: flex;
}

.divider-separator {
    width: 100%;
    border-top: 1px solid #000;
    display: flex;
    margin: 0;
    direction: ltr;
}

@media screen and (max-width:768px) {
    .section-about-information .container.home-page .row>div:first-child {
        padding: 0 !important
    }

    .news .no-padder-left,
    .news .no-padder-left .img {
        padding: 0
    }

    .news .article-event-blog {
        padding-left: 0
    }

    .news .group {
        padding-bottom: 20px
    }

    .news .no-padder-left .img h3 {
        font-size: 1.5em
    }

    .mid-section__content__text p,
    .top-section .about-content p {
        font-size: 16px;
        line-height: 30px
    }

    .mid-section__content__text,
    .section-contact__column .section-contact__column_left,
    .section-contact__column .section-contact__column_right,
    .top-section .about-content {
        width: 100%
    }

    .top-section h1.about-heading-title p {
        font-size: 30px;
        line-height: 40px
    }

    .mid-section .mid-section__content,
    .mid-section .mid-section__heading {
        padding: 10px 25px
    }

    .mid-section .mid-section__heading h2 {
        font-size: 30px;
        line-height: 40px;
        padding-left: 0;
        padding-bottom: 0
    }

    .section-contact__column {
        display: block;
        padding: 55px 0
    }

    .section-contact___column_left_heading h1 {
        font-size: 40px;
        font-weight: 400
    }

    .section-contact .section-contact__column_right_test p {
        font-size: 20px;
        margin-bottom: 20px
    }

    .section-contact__column_right_test p {
        font-size: 16px
    }

    .section-contact .button-content span.button-text {
        font-size: 18px
    }

    .section-contact__column_right_test {
        margin: 50px 0 0
    }
}

.section-contact {
    padding: 100px 0;
    width: 90%;
    margin: auto;
}

.section-contact .container {
    max-width: 1250px;
    width: 100%;
}

.section-contact h2 {
    font-size: 64px;
    font-weight: 300;
}

.section-contact p {
    font-size: 24px;
    margin-bottom: 50px;
}

.contact-button__link {
    --tw-text-opacity: 1;
    background-color: transparent;
    color: rgb(0 0 0 / var(--tw-text-opacity));
    display: inline-block;
    font-family: GraphikMedium, helvetica, sans-serif;
    font-size: 1em;
    letter-spacing: .5px;
    padding: calc(.45em + 2px) 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.link--ani-arrow {
    height: 2rem;
    line-height: 2rem;
    margin-bottom: 1.5rem;
}

.link--ani-arrow svg.i-ani-arrow-icon {
    height: 28px;
    left: -.25rem;
    position: relative;
    top: -.0625rem;
    transition: transform .2s ease-in;
    vertical-align: middle;
}

.link--ani-arrow .arrow-icon--circle {
    stroke-dasharray: 95;
    stroke-dashoffset: 95;
    transition: stroke-dashoffset .2s ease-in;
}

.link--ani-arrow:hover svg.i-ani-arrow-icon {
    transform: translate3d(5px, 0, 0);
}

.link--ani-arrow:hover .arrow-icon--circle {
    stroke-dashoffset: 0;
}

.svg-container.offset-svg {
    height: 100%;
    position: relative;
    width: 100%;
}

.svg-container.offset-svg svg {
    position: absolute;
}

.svg-container.contain-svg {
    position: relative;
    width: 100%;
}

@media (min-width:0) and (max-width:670px) {
    .flower-set {
        height: 175px !important
    }
}

.flower-set svg .flower-petal {
    fill-opacity: 0;
    stroke-width: .2;
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    -moz-animation: 3s ease-in-out 1s forwards DASH3;
    -webkit-animation: 3s ease-in-out 1s forwards DASH3;
    animation: 3s ease-in-out 1s forwards DASH3;
    fill-opacity: 0;
    transition: 2s ease-out;
}

@keyframes DASH3 {
    0% {
        stroke-dashoffset: 800
    }

    80% {
        stroke-dashoffset: 0;
        fill-opacity: 0
    }

    100% {
        stroke-dashoffset: 0;
        fill-opacity: 1
    }
}

@-webkit-keyframes DASH3 {
    0% {
        stroke-dashoffset: 800
    }

    80% {
        stroke-dashoffset: 0;
        fill-opacity: 0
    }

    100% {
        stroke-dashoffset: 0;
        fill-opacity: 1
    }
}

@-moz-keyframes DASH3 {
    0% {
        stroke-dashoffset: 800
    }

    80% {
        stroke-dashoffset: 0;
        fill-opacity: 0
    }

    100% {
        stroke-dashoffset: 0;
        fill-opacity: 1
    }
}

.flower-set svg {
    bottom: 0;
    height: 100%;
    right: 0;
    width: auto;
}

.flower-set svg .flower-petal.bottom-petal {
    transition-delay: .3s;
}

.flower-set svg .flower-petal.mid-petal {
    transition-delay: .7s;
}

.flower-set svg .flower-petal.top-petal {
    transition-delay: 1s;
}

.flower-bloom svg .flower-petal {
    fill-opacity: 1;
}

.section_thuong_hieu .section-clients-masonry .see-all {
    padding-right: 0;
    padding-left: 0;
    text-align: center;
    margin: 50px auto;
}

.section_thuong_hieu .section-clients-masonry .see-all a {
    position: relative;
    float: left;
    font-size: 1.3125em;
    color: #000;
    padding: 14px 25px;
    border-radius: 26px;
    line-height: 20px;
    margin: 30px auto;
    border: 1px solid;
}

.section_thuong_hieu .section-clients-masonry .see-all a:hover {
    background: #075951;
    border: 1px solid #075951;
    color: #fff;
}

.section_thuong_hieu .section-clients-masonry .see-all a .skin-image-op0-when--white,
.section_thuong_hieu .section-clients-masonry .see-all a:hover .skin-image-op0-when--black {
    display: none;
}

.section_thuong_hieu .service-parent-buttom a.buttom-service-view:hover {
    color: #e7c415 !important;
    --x: 100%;
}

.section_thuong_hieu .secsion-service-left.show-on-scroll-1 {
    transition: .7s cubic-bezier(.85, 0, .12, 1);
    transition-delay: .3s;
    transition-duration: .7s;
    min-height: 491px;
    overflow: hidden;
    clip-path: inset(0 100% 0 0);
    visibility: hidden;
}

.section_thuong_hieu .secsion-service-left.show-on-scroll-1.is-visible,
.section_thuong_hieu .secsion-service-right.show-on-scroll-1.is-visible {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transform: skewY(0);
}

.section_thuong_hieu .secsion-service-right.show-on-scroll-1 {
    transition: .7s cubic-bezier(.85, 0, .12, 1);
    transition-duration: .7s;
    transition-delay: .3s;
    min-height: 491px;
    overflow: hidden;
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
}

.section_thuong_hieu .service-parent {
    padding: 100px 0 50px;
    position: relative;
    z-index: 10;
    overflow: hidden;
    clear: both;
}

.section_thuong_hieu .service-parent-text p {
    color: #353535;
}

.section_thuong_hieu .column-wrapper {
    display: table-cell;
    vertical-align: middle;
}

@media only screen and (min-width:960px) {

    .section_thuong_hieu .service-parent .container,
    .section_thuong_hieu .service-section .container {
        width: 90%;
        max-width: 1360px;
        padding: 0
    }
}

.section_thuong_hieu .column-content h2 {
    font-weight: 500;
}

.section_thuong_hieu .service-parent-left {
    padding-left: 30px;
    padding-right: 30px;
}

.section_thuong_hieu .service-parent-left,
.section_thuong_hieu .service-parent-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-start;
    align-content: center;
}

.section_thuong_hieu .service-parent-module-left,
.section_thuong_hieu .service-parent-module-right {
    margin: 30px 0;
}

.section_thuong_hieu .service-parent-module-left {
    background-color: #f7f7f7;
}

.section_thuong_hieu .service-parent-buttom a.buttom-service-view {
    position: absolute;
    flex: 1 1 auto;
    display: block;
    bottom: -45px;
    margin: 0 auto;
    width: auto;
    padding: 10px 25px;
    z-index: 1;
    text-align: center;
    text-transform: uppercase;
    transition: .5s;
    background: linear-gradient(90deg, var(--c1, #f6d365), var(--c2, #fda085) 51%, var(--c1, #f6d365)) var(--x, 0) / 200%;
    color: #fff;
    box-shadow: 3px 4px 10px 0 rgba(166, 168, 166, .94);
    border-radius: 50px;
    --c1: #085951;
    --c2: #0e9a8c;
}

.section_thuong_hieu .svg-icon {
    width: 90px;
}

@-webkit-keyframes content_fade_left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes content_fade_left {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100px)
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@-o-keyframes content_fade_left {
    0% {
        opacity: 0;
        -o-transform: translateX(-100px)
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0)
    }
}

@keyframes content_fade_left {
    0% {
        opacity: 0;
        transform: translateX(-100px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@-webkit-keyframes content_fade_right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes content_fade_right {
    0% {
        opacity: 0;
        -moz-transform: translateX(100px)
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@-o-keyframes content_fade_right {
    0% {
        opacity: 0;
        -o-transform: translateX(100px)
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0)
    }
}

@keyframes content_fade_right {
    0% {
        opacity: 0;
        transform: translateX(100px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@-webkit-keyframes grve_right_to_left_transition {
    0% {
        -webkit-transform: translateX(100%);
        visibility: hidden
    }

    100% {
        -webkit-transform: translateX(0);
        visibility: visible
    }
}

@-moz-keyframes grve_right_to_left_transition {
    0% {
        -moz-transform: translateX(100%);
        visibility: hidden
    }

    100% {
        -moz-transform: translateX(0);
        visibility: visible
    }
}

@-o-keyframes grve_right_to_left_transition {
    0% {
        -o-transform: translateX(100%);
        visibility: hidden
    }

    100% {
        -o-transform: translateX(0);
        visibility: visible
    }
}

@keyframes grve_right_to_left_transition {
    0% {
        transform: translateX(100%);
        visibility: hidden
    }

    100% {
        transform: translateX(0);
        visibility: visible
    }
}

@-webkit-keyframes clipping_right_in {
    from {
        -webkit-transform: translateX(100%)
    }

    to {
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes clipping_right_in {
    from {
        -moz-transform: translateX(100%)
    }

    to {
        -moz-transform: translateX(0)
    }
}

@-o-keyframes clipping_right_in {
    from {
        -o-transform: translateX(100%)
    }

    to {
        -o-transform: translateX(0)
    }
}

@keyframes clipping_right_in {
    from {
        transform: translateX(100%)
    }

    to {
        transform: translateX(0)
    }
}

@-webkit-keyframes clipping_left_in {
    from {
        -webkit-transform: translateX(-100%)
    }

    to {
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes clipping_left_in {
    from {
        -moz-transform: translateX(-100%)
    }

    to {
        -moz-transform: translateX(0)
    }
}

@-o-keyframes clipping_left_in {
    from {
        -o-transform: translateX(-100%)
    }

    to {
        -o-transform: translateX(0)
    }
}

@keyframes clipping_left_in {
    from {
        transform: translateX(-100%)
    }

    to {
        transform: translateX(0)
    }
}

.section_thuong_hieu .service-parent-wrapper {
    -webkit-animation: 1s cubic-bezier(.85, 0, .12, 1) both clipping_right_in;
    -moz-animation: 1s cubic-bezier(.85, 0, .12, 1) both clipping_right_in;
    -o-animation: 1s cubic-bezier(.85, 0, .12, 1) both clipping_right_in;
    animation: 1s cubic-bezier(.85, 0, .12, 1) both clipping_right_in;
}

.section_thuong_hieu .service-container.container {
    width: 90%;
    max-width: 1360px;
}

.section_thuong_hieu #service-feature-section .service-title-content-wrapper.service-content-large,
.section_thuong_hieu .service-page-title .service-title-content-wrapper.service-content-large {
    max-width: 1170px;
}

.section_thuong_hieu #service-feature-section .service-title-content-wrapper {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.section_thuong_hieu #service-feature-section .service-title {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    font-weight: 700;
    font-style: normal;
    font-size: 68px;
    text-transform: none;
    line-height: 100px;
    letter-spacing: 0;
}

.section_thuong_hieu a.service-btn {
    font-size: 16px;
    display: inline-block;
    padding: 10px 25px;
    line-height: 1.4;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    vertical-align: top;
    margin-top: 3px;
    margin-bottom: 3px;
    outline: 0;
    text-align: center;
    cursor: pointer;
    border: 1px solid #fff;
    color: #fff;
    box-sizing: border-box;
    word-wrap: break-word;
    -webkit-appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    -webkit-transition: color .5s, background-color .5s, background-size .5s, border-color .5s;
    -moz-transition: color .5s, background-color .5s, background-size .5s, border-color .5s;
    -o-transition: color .5s, background-color .5s, background-size .5s, border-color .5s;
    -ms-transition: color .5s, background-color .5s, background-size .5s, border-color .5s;
    transition: color .5s, background-color .5s, background-size .5s, border-color .5s;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

.section_thuong_hieu a.service-btn:hover {
    background-color: #fff;
    border-color: #fff;
    color: #085951;
}

.section_thuong_hieu #service-feature-section {
    background: center top/cover no-repeat #075951;
    height: 90%;
    bottom: 10%;
    right: 0;
    left: 0;
    top: 0;
}

.section_thuong_hieu #service-feature-section,
.section_thuong_hieu .service-page-title {
    position: relative;
    overflow: hidden;
    z-index: 1;
    clear: both;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.section_thuong_hieu #service-feature-section .service-wrapper,
.section_thuong_hieu .service-page-title .service-wrapper {
    display: table;
    width: 100%;
    position: relative;
    z-index: 5;
}

.section_thuong_hieu #service-feature-section .service-content,
.section_thuong_hieu .service-page-title .service-content {
    display: table-cell;
    width: 100%;
}

.section_thuong_hieu .service-content.service-align-center-center,
.section_thuong_hieu .service-content.service-align-left-center,
.section_thuong_hieu .service-content.service-align-right-center {
    vertical-align: middle;
}

@media only screen and (max-width:5119px) {
    .section_thuong_hieu #service-header.service-responsive-overlapping+#service-feature-section .service-wrapper {
        padding-top: 72px
    }
}

.section_thuong_hieu #service-feature-section .service-description p {
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    text-transform: none;
    line-height: 34px;
    letter-spacing: 0;
    color: #fff;
}

.section_thuong_hieu #service-feature-section .service-title-content-wrapper.service-bg-none .service-title {
    opacity: 1;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

.section_thuong_hieu #service-feature-section.service-large-height,
.section_thuong_hieu #service-feature-section.service-large-height .service-wrapper,
.section_thuong_hieu .service-page-title.service-large-height,
.section_thuong_hieu .service-page-title.service-large-height .service-wrapper {
    height: 600px;
}

.section_thuong_hieu .service-parent-text li {
    font-size: 18px;
}

.section_thuong_hieu .secsion-service-left .service-parent-wrapper .service-parent-content.fix-content {
    padding-left: 120px;
}

.section_thuong_hieu .secsion-service-right .service-parent-wrapper .service-parent-content.fix-content {
    padding-left: 200px;
}

@media (max-width:767px) {
    header.header {
        position: fixed !important
    }

    .recr-content {
        padding: 20px 8px
    }

    .section-service .home-page .panel-title>a,
    .section-service .home-page .panel-title>a:active {
        letter-spacing: 1px;
        word-spacing: 1px
    }

    .recr-content h3 {
        font-size: 24px
    }

    .section-service .column-services ul li {
        font-size: 16px;
        margin-bottom: 0;
        line-height: 46px
    }

    .section-faqs .block.block-title h3 {
        font-size: 45px;
        letter-spacing: 1px;
        margin-top: 0;
        margin-bottom: 0;
        padding: 30px 0
    }

    .section-faqs .block.how-step {
        padding: 2rem 0
    }

    .section-faqs .block.block-how-2 ul.step-features {
        padding: 0
    }

    .section-faqs .large-offset-right,
    .section_thuong_hieu .secsion-service-left .service-parent-wrapper .service-parent-content.fix-content,
    .section_thuong_hieu .secsion-service-right .service-parent-wrapper .service-parent-content.fix-content {
        padding-left: 0
    }

    .wraper {
        overflow: hidden
    }

    .section-service-1 .slider_test {
        width: 100%;
        max-width: 720px
    }

    .section-clients-masonry__list__item__content,
    .section-project-masonry__list__item__content {
        opacity: 0 !important;
        -webkit-transform: none !important;
        transform: none !important
    }

    .section-clients-masonry__list__item__content__expand {
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important
    }

    .fancybox-slide--image .fancybox-content {
        width: auto !important;
        height: auto !important;
        top: 50% !important;
        -webkit-transform: translateY(-50%) !important;
        transform: translateY(-50%) !important
    }

    .section-project-masonry__list__item__content__expand {
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important
    }

    .section-our-studio-image-gallery__masonry__item--video .video-inner {
        position: static;
        width: 100%
    }

    .section-our-studio-image-gallery__masonry__item--video .video-inner video {
        position: static;
        height: auto;
        width: 100%;
        -webkit-transform: none;
        transform: none
    }

    .section_thuong_hieu #service-feature-section .service-title,
    .section_thuong_hieu .service-section .service-column-wrapper h2.service-h2 {
        font-size: 28px;
        line-height: 35px
    }

    .section_thuong_hieu #service-feature-section .service-description {
        font-size: 14px;
        line-height: 24px
    }

    .section_thuong_hieu .service-section {
        padding-bottom: 30px;
        padding-top: 30px
    }

    .section_thuong_hieu #service-feature-section .service-section a.service-btn {
        font-size: 12px
    }

    .section_thuong_hieu .secsion-service-left.show-on-scroll-1,
    .section_thuong_hieu .secsion-service-right.show-on-scroll-1 {
        min-height: 230px
    }

    .section_thuong_hieu .service-parent-text li {
        font-size: 16px
    }

    .section_thuong_hieu .service-parent {
        padding: 80px 0 0
    }

    .section_thuong_hieu #service-feature-section .service-description p {
        font-size: 16px;
        text-transform: none;
        line-height: 22px;
        color: #fff
    }

    .section_thuong_hieu a.service-btn {
        font-size: 14px
    }

    .section_thuong_hieu .service-parent-buttom a.buttom-service-view {
        position: relative;
        flex: 1 1 auto;
        display: inline-block;
        bottom: 0;
        margin: 0 auto;
        width: auto
    }
}

menu.menu::-webkit-scrollbar {
    width: 0;
}

.menu ul.social-sup {
    display: inline-block;
    position: relative;
    padding: 0;
    margin-bottom: 0;
}

.menu ul.social-sup li {
    margin: 10px 5px;
    float: none;
    display: inline-block;
}

.menu ul.social-sup li a {
    display: block;
    width: 35px;
    height: 35px;
    color: #fff;
    padding: 8px 0;
    border: 1px solid #fff;
    font-size: 18px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
}

.menu ul.social-sup li a svg {
    width: 15px;
    height: 15px;
    overflow: hidden;
    vertical-align: middle;
}

.menu ul.social-sup li a svg path {
    fill: #fff;
}

.menu ul.social-sup li.facebook a:focus,
.menu ul.social-sup li.facebook a:hover {
    border-color: #3b5998;
    background-color: #3b5998;
}

.menu ul.social-sup li.twitter a:focus,
.menu ul.social-sup li.twitter a:hover {
    border-color: #1da1f2;
    background-color: #1da1f2;
}

.menu ul.social-sup li.youtube a:focus,
.menu ul.social-sup li.youtube a:hover {
    border-color: red;
    background-color: red;
}

.menu ul.social-sup li.instagram a:focus,
.menu ul.social-sup li.instagram a:hover {
    border-color: #405de6;
    background: radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.secsion-service-right .service-parent-wrapper .service-parent-content.fix-content {
    padding-left: 200px;
}

@media (max-width:767px) {
    header.header {
        position: fixed !important
    }

    .recr-content {
        padding: 20px 8px
    }

    .section-service .home-page .panel-title>a,
    .section-service .home-page .panel-title>a:active {
        letter-spacing: 1px;
        word-spacing: 1px
    }

    .recr-content h3 {
        font-size: 24px
    }

    .section-service .column-services ul li {
        font-size: 16px;
        margin-bottom: 0;
        line-height: 46px
    }

    .section-faqs .block.block-title h3 {
        font-size: 45px;
        letter-spacing: 1px;
        margin-top: 0;
        margin-bottom: 0;
        padding: 30px 0
    }

    .section-faqs .block.how-step {
        padding: 2rem 0
    }

    .section-faqs .block.block-how-2 ul.step-features {
        padding: 0
    }

    .section-faqs .large-offset-right,
    .section_thuong_hieu .secsion-service-left .service-parent-wrapper .service-parent-content.fix-content,
    .section_thuong_hieu .secsion-service-right .service-parent-wrapper .service-parent-content.fix-content {
        padding-left: 0
    }

    .wraper {
        overflow: hidden
    }

    .section-service-1 .slider_test {
        width: 100%;
        max-width: 720px
    }

    .section-clients-masonry__list__item__content,
    .section-project-masonry__list__item__content {
        opacity: 0 !important;
        -webkit-transform: none !important;
        transform: none !important
    }

    .section-clients-masonry__list__item__content__expand {
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important
    }

    .fancybox-slide--image .fancybox-content {
        width: auto !important;
        height: auto !important;
        top: 50% !important;
        -webkit-transform: translateY(-50%) !important;
        transform: translateY(-50%) !important
    }

    .section-project-masonry__list__item__content__expand {
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important
    }

    .section-our-studio-image-gallery__masonry__item--video .video-inner {
        position: static;
        width: 100%
    }

    .section-our-studio-image-gallery__masonry__item--video .video-inner video {
        position: static;
        height: auto;
        width: 100%;
        -webkit-transform: none;
        transform: none
    }

    .section_thuong_hieu #service-feature-section .service-title,
    .section_thuong_hieu .service-section .service-column-wrapper h2.service-h2 {
        font-size: 28px;
        line-height: 35px
    }

    .section_thuong_hieu #service-feature-section .service-description {
        font-size: 14px;
        line-height: 24px
    }

    .section_thuong_hieu .service-section {
        padding-bottom: 30px;
        padding-top: 30px
    }

    .section_thuong_hieu #service-feature-section .service-section a.service-btn {
        font-size: 12px
    }

    .section_thuong_hieu .secsion-service-left.show-on-scroll-1,
    .section_thuong_hieu .secsion-service-right.show-on-scroll-1 {
        min-height: 230px
    }

    .section_thuong_hieu .service-parent-text li {
        font-size: 16px
    }

    .section_thuong_hieu .service-parent {
        padding: 80px 0 0
    }

    .section_thuong_hieu #service-feature-section .service-description p {
        font-size: 16px;
        text-transform: none;
        line-height: 22px;
        color: #fff
    }

    .section_thuong_hieu a.service-btn {
        font-size: 14px
    }

    .section_thuong_hieu .service-parent-buttom a.buttom-service-view {
        position: relative;
        flex: 1 1 auto;
        display: inline-block;
        bottom: 0;
        margin: 0 auto;
        width: auto
    }
}

.menu ul.social-sup {
    display: inline-block;
    position: relative;
    padding: 0;
    margin-bottom: 0;
}

.menu ul.social-sup li {
    margin: 10px 5px;
    float: none;
    display: inline-block;
}

.menu ul.social-sup li a {
    display: block;
    width: 35px;
    height: 35px;
    color: #fff;
    padding: 8px 0;
    border: 1px solid #fff;
    font-size: 18px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
}

.menu ul.social-sup li a svg {
    width: 15px;
    height: 15px;
    overflow: hidden;
    vertical-align: middle;
}

.menu ul.social-sup li a svg path {
    fill: #fff;
}

.menu ul.social-sup li.facebook a:focus,
.menu ul.social-sup li.facebook a:hover {
    border-color: #3b5998;
    background-color: #3b5998;
}

.menu ul.social-sup li.twitter a:focus,
.menu ul.social-sup li.twitter a:hover {
    border-color: #1da1f2;
    background-color: #1da1f2;
}

.menu ul.social-sup li.youtube a:focus,
.menu ul.social-sup li.youtube a:hover {
    border-color: red;
    background-color: red;
}

.menu ul.social-sup li.instagram a:focus,
.menu ul.social-sup li.instagram a:hover {
    border-color: #405de6;
    background: radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.section_faqs {
    margin-top: 10px;
    margin-bottom: 100px;
}

.section_faqs .vertical-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 50px auto;
}

.section_faqs .tab-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #000;
    position: relative;
}

.section_faqs .tab {
    text-align: left;
    padding: 12px 24px 24px 24px;
    cursor: pointer;
    transition: background-color .3s;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.section_faqs .tab h3 {
    color: #000;
    font-size: 20px;
}

.section_faqs .tab .tab-list__title h3 span.svg-arrow svg {
    opacity: 1;
    display: block;
}

.section_faqs .tab.active .tab-list__title h3 span.svg-arrow svg {
    transform: rotate(180deg);
}

.section_faqs .tab .tab-list__content {
    transition: height .3s cubic-bezier(.4, .63, .57, 1), visibility .3s step-end;
}

.section_faqs .tab .tab-list__content {
    visibility: hidden;
    display: none;
    overflow: hidden;
    height: 100%;
    /* height: 0; */
    opacity: 0;
}

.section_faqs .tab.active .tab-list__content {
    visibility: visible;
    display: block;
    /* height: 144px; */
    opacity: 1;
}

.section_faqs .tab .tab-list__content span {
    color: #000;
    opacity: 1;
    font-size: 16px;
}

.section_faqs .tab.active .tab-list__content span {
    color: #000;
}

.section_faqs .tab:hover {
    border-radius: 12px;
}

.section_faqs .tab-content {
    flex: 1;
    position: relative;
}

.section_faqs .active {
    background-color: #f4f4f6;
    border-radius: 12px;
    padding-top: 24px;
}

.section_faqs .timer-bar-container {
    height: 0;
    width: 4px;
    background: #075951;
    position: absolute;
    top: 0;
    left: 0;
    transition: height 8s linear;
    opacity: 0;
}

.section_faqs .active .timer-bar-container {
    opacity: 1;
}

@media (min-width:1200px) {
    .section_faqs .tabs__list {
        max-width: 536px
    }
}

.section_faqs .tab-list__title h3 {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: grid;
    grid-template-columns: auto 32px;
    gap: 16px;
    align-items: center;
    margin-bottom: 10px;
    padding: 5px 0;
}

.section_faqs .tabs__content {
    width: calc(50% - 24px);
}

.section_faqs .tab-list_big_title h2 {
    margin-left: 22px;
    position: relative;
    font-size: 30px;
    color: var(--primary-color);
    font-weight: 500;
    margin: 0 0 24px;
    line-height: initial;
}

.section_faqs .tab-content {
    display: none;
    left: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
    transition: opacity .2s linear 10ms;
}

.section_faqs .tab-content.no_active {
    display: block;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
}

.section_faqs .tab-content .tabs__content_image img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    opacity: 0;
    transition: opacity .2s linear 10ms;
}

.section_faqs .tab-content.no_active .tabs__content_image img {
    opacity: 1;
    object-fit: fill;
}
@media only screen and (max-width: 768px) {
    .section_faqs .vertical-tabs {
        display: block;
    }

    .section_faqs .tabs__content {
        width: 100%;
    }
    .tabs__content.hidden-xs{
        display: none;
    }

}
@media only screen and (min-width: 1200px) {
    .tabs__content.hidden-lg{
        display: none;
    }
}
.section_price--new {
    margin-top: 100px;
    margin-bottom: 50px;
}

.section_price--new h2 {
    font-size: 45px;
    line-height: 56px;
    text-align: center;
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 100px;
}

.section_price--new .price--new {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    gap: 40px 40px;
}

.section_price--new .price_content {
    position: relative;
    padding: 50px 10px 30px 50px;
    color: rgba(var(--main-bg-color), 1);
    font-size: 12px;
    text-transform: capitalize;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
    -ms-transition: none !important;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    z-index: 2;
}

.section_price--new .price_content::before {
    width: 96%;
    height: 96%;
    left: 0;
    bottom: 0;
    background: #075951;
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(-10deg);
    transform: rotateY(-10deg);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    transition: .2s linear;
}

.section_price--new .price_content::after {
    content: "";
    height: 100%;
    width: 100%;
    z-index: -1;
    background: #fefeff;
    position: absolute;
    bottom: 0;
    left: 0;
    transform-style: preserve-3d;
    transform: rotateY(-10deg);
    -webkit-box-shadow: 0 0 1px transparent;
    box-shadow: 0 0 1px transparent;
}

.section_price--new .price_content::after {
    background: #075951;
}

.section_price--new .price_content {
    box-shadow: 12px 0 0 var(--second-color);
    color: #fff;
}

.section_price--new .price_row {
    gap: 20px 20px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-inline-start: 0;
    padding-inline-end: 0;
    height: 100%;
}

.section_price--new .price_content .price_icon .icon {
    font-size: 80px;
}

.section_price--new .price_content .price_icon .icon svg {
    height: 80px;
    fill: #000;
}

.section_price--new .price_content .price_infor .price_heading h5 {
    color: #fff;
    text-transform: uppercase;
    font-size: 40px;
    line-height: 1;
    min-height: 60px;
    margin-bottom: 20px;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    align-items: center;
}

.section_price--new .price_infor .price__list ul li {
    margin-top: 10px;
    position: relative;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
}

.section_price--new .price_infor .price__list ul li:before {
    font-family: icon-moon !important;
    speak-as: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e901";
    margin-right: 1rem;
    color: var(--green-color);
    animation: 44s infinite textMulticolor;
}

.section_price--new .price_infor .price__list h4 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1;
}

.section_price--new .price--new .price_image {
    width: calc(50% - 24px);
}

@media (min-width:1200px) {
    .section_price--new .price--new .price_content {
        max-width: 536px
    }
}

.pp_description {
    display: none !important;
}

.pp_details {
    position: absolute !important;
    top: -30px;
}

a.pp_expand,
a.pp_contract {
    top: -25px !important;
    right: 50px !important;
}

div.pp_default .pp_top .pp_left,
div.pp_default .pp_top .pp_middle,
div.pp_default .pp_top .pp_right,
div.pp_default .pp_content_container .pp_left,
div.pp_default .pp_content_container .pp_left,
div.pp_default .pp_content_container .pp_right,
div.pp_default .pp_content,
div.light_rounded .pp_content,
div.pp_default .pp_bottom .pp_left,
div.pp_default .pp_bottom .pp_middle,
div.pp_default .pp_bottom .pp_right {
    background: none !important;
}

.pp_pic_holder.pp_default {
    background-image: url(http://localhost:8888/giaiphapprofile/upload/new/portfolio-Background.png);
    background-size: cover;
}

div.pp_pic_holder {
    display: none;
    position: absolute;
    width: 100px;
    z-index: 10000;
}

div.pp_pic_holder {
    z-index: 9999999 !important;
}

div.pp_overlay {
    z-index: 999999 !important;
}

.overflow-hidden {
    overflow: hidden;
}

#myGalleryContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    display: none;
}

#myGalleryContainer.show {
    display: block;
}

.services-section {
    padding: 100px 0 100px 0;
    background-color: var(--primary-color);
    position: relative;
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .services-section {
        padding: 30px 0
    }
}

@media only screen and (max-width:767px) {
    .services-section {
        padding: 35px 0
    }
}

.services-section h2 {
    margin-top: 0;
    color: #fff;
    font-weight: 400;
    color: #fff;
    font-size: 40px;
    text-transform: none;
    margin-bottom: 50px;
    text-align: center;
}

@media only screen and (min-width:1700px) {
    .services-section h2 {
        font-size: 33px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .services-section h2 {
        font-size: 28px
    }
}

@media only screen and (max-width:767px) {
    .services-section h2 {
        font-size: 25px
    }
}

.services-section .serv-sub-heading {
    font-size: 20px;
    color: #052033;
    margin-bottom: 20px;
    font-family: Lato, sans-serif;
    font-weight: 400;
    line-height: normal;
    display: block;
}

@media only screen and (min-width:1700px) {
    .services-section .serv-sub-heading {
        font-size: 23px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .services-section .serv-sub-heading {
        font-size: 18px
    }
}

@media only screen and (max-width:767px) {
    .services-section .serv-sub-heading {
        font-size: 18px;
        margin-bottom: 20px
    }
}

.services-section h3 {
    font-size: 20px;
    color: rgb(231, 196, 21);
    margin: 0 0 8px;
    font-weight: 400;
    display: inline-block;
    width: 100%;
    line-height: 25px;
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .services-section h3 {
        font-size: 18px;
        line-height: normal
    }
}

@media only screen and (max-width:767px) {
    .services-section h3 {
        font-size: 20px;
        line-height: 40px;
        font-weight: 500
    }
}

@media only screen and (max-width:479px) {
    .services-section h3 {
        line-height: normal
    }
}

.service-block h3.heading-icon {
    line-height: normal;
    display: flex;
    align-items: center;
}

.service-block h3.heading-icon .wgi-icon {
    padding-top: 0 !important;
}

.service-block p {
    color: #fff;
    font-size: 18px;
}

@media only screen and (max-width:991px) {
    .service-block h3.heading-icon .wgi-icon {
        margin-right: 10px !important
    }
}

span.wgi-icon {
    font-size: 40px;
    margin-right: 15px;
    float: left;
    color: rgb(231, 196, 21);
}

span.wgi-icon {
    font-size: 40px;
    margin-right: 15px;
    float: left;
    color: rgb(231, 196, 21);
}

@media only screen and (max-width:767px) {
    span.wgi-icon {
        margin-right: 5px
    }
}

span.wgi-icon::before {
    color: rgb(231, 196, 21);
}

span.wgi-icon span::before {
    color: rgb(231, 196, 21) !important;
}

@media only screen and (max-width:767px) {
    span.wgi-icon span {
        overflow: visible;
        display: inline-block
    }
}

.service-block {
    padding-bottom: 35px;
}

.heading-content-holder p {
    padding-bottom: 25px;
    color: #fff;
    font-size: 18px;
}

.btn-group li a.btn-individual {
    padding: 0 50px;
    height: 50px;
    line-height: 47px;
    font-size: 14px;
    color: rgb(231, 196, 21);
    text-transform: uppercase;
    border: 1px solid rgb(231, 196, 21);
    display: inline-block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    text-decoration: none;
    letter-spacing: 1px;
    cursor: pointer;
}

.btn-group li a.btn-individual:hover {
    background: rgb(231, 196, 21);
    border-color: rgb(231, 196, 21);
    color: #fff;
}

.btn-group li a.btn-individual.fill {
    background-color: rgb(231, 196, 21);
    color: #fff;
}

.btn-group li a.btn-individual.fill:hover {
    background-color: var(--primary-color);
    border-color: var(--white);
    color: #fff;
}

.why-choose-sec {
    padding: 46px 0 50px 0;
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .why-choose-sec {
        padding: 35px 0 0
    }
}

@media only screen and (max-width:767px) {
    .why-choose-sec {
        padding: 35px 0 0
    }
}

@media only screen and (min-width:1700px) {
    .why-choose-sec .why-left {
        width: 66%
    }
}

@media only screen and (min-width:1700px) {
    .why-choose-sec .why-right {
        width: 33%;
        text-align: center
    }
}

.why-choose-sec h2 {
    margin-bottom: 35px;
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .why-choose-sec h2 {
        margin-bottom: 30px;
        font-size: 28px
    }
}

@media only screen and (max-width:767px) {
    .why-choose-sec h2 {
        margin-bottom: 30px;
        font-size: 25px
    }
}

.why-choose-sec img {
    max-width: 100%;
    width: 100%;
}

.why-choose-sec.inner-page-why-choose {
    padding: 100px 0 100px 0;
    background-color: var(--primary-color);
    position: relative;
}

.why-choose-sec.inner-page-why-choose .row {
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (min-width:1700px) {
    .why-choose-sec.inner-page-why-choose {
        padding-bottom: 0 !important
    }
}

@media only screen and (max-width:1199px) {
    .why-choose-sec.inner-page-why-choose {
        padding-bottom: 0
    }
}

@media only screen and (max-width:991px) {
    .why-choose-sec.inner-page-why-choose {
        padding: 35px 0 0 !important
    }
}

.why-choose-sec.inner-page-why-choose h2 {
    font-weight: 400;
    font-size: 30px;
    text-transform: none;
    margin-bottom: 35px;
    color: var(--white);
}

@media only screen and (min-width:1700px) {
    .why-choose-sec.inner-page-why-choose h2 {
        font-size: 33px
    }
}

@media only screen and (min-width:767px) and (max-width:992px) {
    .why-choose-sec.inner-page-why-choose h2 {
        font-size: 28px;
        margin-bottom: 30px
    }
}

@media only screen and (max-width:767px) {
    .why-choose-sec.inner-page-why-choose h2 {
        font-size: 26px;
        margin-bottom: 20px
    }
}

@media only screen and (max-width:767px) {
    .why-choose-sec.inner-page-why-choose .why-img-holder {
        text-align: center
    }
}

.why-choose-sec.inner-page-why-choose .why-img-holder img {
    max-width: 315px;
}

.why-us-pnl {
    padding-right: 0;
    padding-bottom: 35px;
}

@media only screen and (min-width:1700px) {
    .why-us-pnl {
        min-height: 120px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .why-us-pnl {
        padding-bottom: 30px
    }
}

@media only screen and (max-width:767px) {
    .why-us-pnl {
        padding-bottom: 30px
    }
}

.why-us-pnl .why-icon {
    width: 80px;
    height: 80px;
    border: 2px solid rgb(231, 196, 21);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    border-radius: 50px;
    display: block;
    text-align: center;
    line-height: 75px;
    font-size: 40px;
    color: #e72e70;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    float: left;
    background-color: #fff;
}

@media only screen and (max-width:767px) {
    .why-us-pnl .why-icon {
        float: left
    }
}

.why-us-pnl span {
    width: 80px;
    height: 80px;
    border: 2px solid rgb(231, 196, 21);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    border-radius: 50px;
    display: block;
    text-align: center;
    line-height: 75px;
    font-size: 40px;
    color: #e72e70;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    float: left;
    background-color: var(--primary-color);
}

@media only screen and (max-width:767px) {
    .why-us-pnl span {
        float: left
    }
}

.why-us-pnl span:before {
    color: rgb(231, 196, 21);
}

.why-us-pnl:hover .why-icon.year {
    background-repeat: no-repeat;
}

.why-us-pnl:hover h3 {
    color: rgb(231, 196, 21);
}

.why-us-pnl:hover h3::after {
    background: rgb(231, 196, 21);
}

.why-us-pnl:hover h3 a {
    color: rgb(231, 196, 21);
}

.why-us-pnl .why-icon.year {
    background-position: center -32px;
    background-repeat: no-repeat;
}

.why-us-pnl .wgi-icon {
    margin-right: 0;
}

.why-us-pnl h3 {
    color: rgb(231, 196, 21);
    font-size: 20px;
    font-weight: 400;
    position: relative;
    margin-top: 5px;
    margin-bottom: 20px;
}

@media only screen and (max-width:767px) {
    .why-us-pnl h3 {
        font-size: 19px
    }
}

.why-us-pnl h3::after {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 25px;
    height: 1px;
    background: #d5d5d5;
    content: "";
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

@media only screen and (max-width:767px) {
    .why-us-pnl h3::after {
        float: left;
        margin-left: 0
    }
}

@media only screen and (max-width:767px) {
    .why-us-pnl h3 {
        font-weight: 700
    }
}

.why-us-pnl h3 a {
    color: #000;
    text-decoration: none;
}

.why-us-pnl p {
    font-size: 18px;
    margin: 0;
    color: var(--white);
}

@media only screen and (min-width:1700px) {
    .why-us-pnl p {
        font-size: 18px
    }
}

@media only screen and (max-width:767px) {
    .why-us-pnl p {
        display: inline-block;
        width: 100%;
        padding-top: 12px;
        font-size: 17px
    }
}

.why-us-pnl .why-pnl {
    overflow: hidden;
    padding-left: 16px;
}

.why-us-pnl.orange-color .why-icon.year {
    border-color: #ff6511;
}

.why-us-pnl.orange-color:hover h3 {
    color: #ff6511;
}

.why-us-pnl.orange-color:hover h3::after {
    background: #ff6511;
}

.why-us-pnl.orange-color:hover h3 a {
    color: #ff6511;
}

.why-us-pnl.orange-color .wgi-icon {
    border-color: #ff6511;
}

.why-us-pnl.orange-color .wgi-icon:before {
    color: #ff6511;
}

.why-us-pnl.big-icon .why-icon {
    background-position: center -78px;
}

@media only screen and (max-width:767px) {
    .why-us-pnl-mobile .why-us-pnl .wgi-icon {
        width: 50px;
        height: auto;
        border: none;
        line-height: normal;
        background-color: transparent
    }
}

@media only screen and (max-width:767px) {
    .why-us-pnl-mobile .why-us-pnl .why-pnl h3 {
        margin-top: 10px !important
    }
}

@media only screen and (max-width:767px) {
    .why-us-pnl-mobile .why-us-pnl .why-pnl h3:after {
        bottom: -10px
    }
}

.section-flip-book {
    margin-top: 70px;
    margin-bottom: 50px;
    position: relative;
}

.section-flip-book .booklet {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto !important;
}

.section-flip-book .booklet .b-wrap-left {
    background: none;
    padding: 0 !important;
}

.section-flip-book .booklet .b-wrap-right {
    background: none;
    padding: 0 !important;
}

.section-flip-book .book_wrapper {
    margin: auto;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 1140px;
    --p-height: 800px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    background-image: url(http://localhost:8888/giaiphapprofile/frontend/layout/images/ipad.png);
}

.section-flip-book .book_wrapper h1 {
    color: orange;
    margin: 5px 5px 5px 15px;
    font-size: 24px;
    background: transparent url(images/h1.png) no-repeat bottom left;
    padding-bottom: 7px;
    text-transform: uppercase;
    font-weight: normal;
}

.section-flip-book .book_wrapper p {
    font-size: 15px;
    margin: 5px 5px 5px 15px;
}

.section-flip-book .book_wrapper a.article,
.section-flip-book .book_wrapper a.demo {
    background: transparent url(images/circle.png) no-repeat 50% 0px;
    display: block;
    width: 95px;
    height: 41px;
    text-decoration: none;
    outline: none;
    font-size: 16px;
    color: #555;
    float: left;
    line-height: 41px;
    padding-left: 47px;
}

.section-flip-book .book_wrapper a.demo {
    margin-left: 50px;
}

.section-flip-book .book_wrapper a.article:hover,
.section-flip-book .book_wrapper a.demo:hover {
    background-position: 50% -41px;
    color: #13386a;
}

.section-flip-book .book_wrapper img {
    margin: auto;
    width: 100%;
    height: auto;
    object-fit: cover;
    padding: 0;
    position: absolute;
    max-height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.section-flip-book .book_button {
    position: absolute;
    bottom: 5%;
    right: -10%;
}

.section-flip-book .book_button #pause {
    background-color: rgba(13, 18, 22, .7);
    border-radius: 48px;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #fff;
}

.section-flip-book .book_button #play {
    background-color: rgba(13, 18, 22, .7);
    border-radius: 48px;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #fff;
}

.section-flip-book .book_button svg {
    color: #fff;
}

@media only screen and (max-width:768px) {
    .section-flip-book .booklet {
        width: 100% !important;
        position: relative;
        margin: auto
    }

    .section-flip-book .book_wrapper {
        width: 100%;
        height: 300px;
        background-size: 100%
    }

    .section-flip-book .book_wrapper img {
        width: 100%;
        height: 100%
    }

    .section-flip-book .section-flip-book .booklet .img-book {
        width: 115%;
        height: 95%
    }

    .section-flip-book .book_wrapper {
        padding-top: 20px;
        padding-left: 18px;
        padding-bottom: 0
    }

    .section-flip-book .section-flip-book .book_button {
        bottom: -10%;
        right: -5%
    }
}

.mobile-view .tab-content>.active {
    display: block;
    visibility: visible;
}

.mobile-view .nav:before {
    display: table;
    content: " ";
}

.mobile-view,
.tablet-view {
    display: none !important;
}

@media (max-width:767px) {
    .mobile-view {
        display: block !important
    }

    .desktop-view {
        display: none !important
    }

    .tabs .stock-tabs .stock-tabs__tab-content .mobile-view .tab-pane.active {
        display: block
    }
}

@media (max-width:460px) {
    .mobile-xs-package .nav-tabs.nav-justified.mobile-xs-package-title>li>a {
        font-size: 18px;
        padding: 10px 15px
    }
}

.mobile-xs-package {
    position: relative;
    display: block;
}

.mobile-xs-package .nav-tabs.nav-justified.mobile-xs-package-title {
    position: relative;
    z-index: 2;
    background-color: #fff;
    display: inline;
    top: 0;
    padding: 0;
}

.mobile-xs-package .nav-tabs.nav-justified.mobile-xs-package-title>li {
    display: table-cell;
    width: 1%;
    border-bottom: 1px solid #f1f1f1;
    border-top: 1px solid #f1f1f1;
    text-align: center;
    padding: 10px 0;
}

.mobile-xs-package .nav-tabs.nav-justified.mobile-xs-package-title>li.active>a,
.mobile-xs-package .nav-tabs.nav-justified.mobile-xs-package-title>li.active>a:focus,
.mobile-xs-package .nav-tabs.nav-justified.mobile-xs-package-title>li.active>a:hover {
    border: none;
    color: #085951;
    background-color: transparent;
}

.mobile-xs-package .nav-tabs.nav-justified.mobile-xs-package-title>li.active>a:before {
    content: " ";
    position: absolute;
    border-width: 7px;
    border-style: solid;
    border-color: #085951 transparent transparent transparent;
    bottom: -14px;
    left: 50%;
    margin-left: -7px;
}

.mobile-xs-package .nav-tabs.nav-justified.mobile-xs-package-title>li.active>a:after {
    content: " ";
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    height: 3px;
    background: #085951;
    bottom: -1px;
}

.mobile-xs-package .nav-tabs.nav-justified.mobile-xs-package-title>li>a {
    border: none;
    position: relative;
    padding: 10px 20px;
    border-radius: 0;
    margin-bottom: 0;
    transition: all .5s;
    -webkit-transition: all .5s;
    text-transform: capitalize;
    font-size: 20px;
    font-weight: 400;
    color: #575757;
}

.mobile-xs-package .nav-tabs.nav-justified.mobile-xs-package-title>li.active>a:before {
    content: " ";
    position: absolute;
    border-width: 7px;
    border-style: solid;
    border-color: #085951 transparent transparent transparent;
    bottom: -14px;
    left: 50%;
    margin-left: -7px;
}

.mobile-xs-package .mobile-xs-package-content {
    padding: 0;
    border-color: #f1f1f1;
}

.mobile-xs-package-content .pds-xs-pack-body {
    position: relative;
    display: block;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    background: #fff;
}

.pds-xs-pack-body .pds-xs-pack-feature-wrap {
    position: relative;
    display: block;
    padding: 22px 24px 16px;
    border-top: none;
    border-bottom: 1px solid #f1f1f1;
}

.pds-xs-pack-feature-wrap .pds-xs-pack-feature-list {
    padding: 0;
    margin: 0;
    list-style: none;
    font-weight: 500;
}

.pds-xs-pack-feature-wrap .pds-xs-pack-feature-list>li {
    position: relative;
    display: block;
    color: #656565;
    padding: 0 0 0 0;
    line-height: 28px;
    margin-bottom: 7px;
}

.pds-xs-pack-feature-wrap .pds-xs-pack-feature-list>li span {
    background: #fff;
    padding-right: 10px;
    position: relative;
    z-index: 2;
}

.pds-xs-pack-feature-wrap .pds-xs-pack-feature-list>li .pf-value {
    position: relative;
    display: inline-block;
    background: #fff;
    width: 18px;
    line-height: 28px;
    text-align: center;
    font-size: 16px;
    padding: 0 0 0 3px;
}

@media (max-width:460px) {
    .pds-xs-pack-body .pds-xs-pack-feature-wrap {
        border-bottom: none
    }
}

@media (max-width:460px) {
    .pds-xs-pack-body .pds-xs-pack-feature-wrap {
        padding: 22px 15px 16px
    }
}

.section-clients-masonry .see-all .see-all__icon {
    display: inline-block;
    vertical-align: bottom;
    margin-left: 5px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.section-clients-masonry .see-all {
    padding-right: 0;
    padding-left: 0;
    text-align: center;
    margin: 50px auto;
}

.see-all a {
    position: relative;
    float: left;
    font-size: 1.3125em;
    color: #000;
    padding: 14px 25px;
    border-radius: 26px;
    line-height: 20px;
    margin-bottom: 40px;
    margin: 30px auto;
    border: 1px solid;
}

.see-all a:hover {
    background: #075951;
    border: solid 1px #075951;
    color: #fff;
}

.see-all a:hover .skin-image-op0-when--white {
    display: block;
    position: relative;
    float: left;
}

.see-all a:hover .skin-image-op0-when--black {
    display: none;
}

.see-all a .skin-image-op0-when--white {
    display: none;
}

.item-da .pretty_photo {
    display: none;
}

.pretty_photo {
    background-color: #212c3d00;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pretty_photo a {
    color: #fff;
}

.item-da:hover .pretty_photo {
    display: flex;
    flex-direction: column;
}

.pretty_photo a svg {
    width: 35px;
    height: 35px;
}

/* section-home-service */
.section-home-service {
    background-image: url(https://xcare-demo.pbminfotech.com/demo3/wp-content/uploads/sites/6/2024/01/service-bg-pattern.png);
    background-position: top center;
    background-repeat: no-repeat;
    margin-top: 50px;
    margin-bottom: 50px;
}

.section-home-service .container.home-page {
    max-width: 1424px;
}

.section-home-service {
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 50px 0px 50px 0px;
}

.section-home-service._bg-color {
    background-color: var(--white);
}

.section-home-service .tab-buttons {
    display: flex;
    gap: 8px;
}

.section-home-service .title-service h2 {
    margin-top: 0;
    font-weight: 800;
    color: var(--primary-color);
    font-size: 40px;
    text-transform: none;
    margin-bottom: 50px;
    text-align: center;
}

.section-home-service .tab-btn {
    font-size: 21px;
    width: 100%;
    border: none;
    color: #fff;
    background-color: #f0f8ff00;
    border-radius: 8px 18px 0px 0px;
    font-weight: 500;
    padding: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.section-home-service .tab-btn:hover {
    color: var(--second-color);
}

.section-home-service .tab-btn.active {
    color: var(--second-color);
}

.section-home-service .content {
    display: none;
}

.section-home-service .content.show {
    display: flex;
    gap: 14px;
    /* background-color: #c7d2fe; */
    border-radius: 0px 0px 8px 8px;
    padding: 30px 0 30px 0;
}

.section-home-service .content .content-info {
    flex: 0 0 auto;
    width: 50%;
}

.section-home-service .content .media-info {
    flex: 0 0 auto;
    width: 50%;
    padding-right: 0;
    border-radius: 30px;
}

.media-info {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.media-info img {
    width: 100%;
    height: auto;
    /* transform: scale(1.25); */
}

.section-home-service .content .content-info {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 0;
    position: relative;
}

.section-home-service .content .content-info ul {
    padding: 0 85px 0 85px;
    margin: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px 10px;
}

.section-home-service .content .content-info li {
    font-size: 24px;
    line-height: 36px;
    position: relative;
    padding: 0 10px 0 30px;
    color: var(--white);
}

.section-home-service .content .content-info li {
    counter-increment: item;
    list-style-type: none;
    position: relative;
    padding-left: 60px;
    display: flex;
}

.section-home-service .content .content-info li a {
    color: var(--white);
    position: relative;

}

.section-home-service .content .content-info li a::after {
    content: "";
    position: absolute;
    width: 35px;
    height: 100%;
    top: 0;
    right: -50px;
    background: url(http://localhost:8888/giaiphapprofile/upload/files/bt-hover.png);
    background-size: 35px 35px;
    background-repeat: no-repeat;
    background-position: 100% 50%;
    transition: all .5s ease-in-out;
    opacity: 0;
}

.section-home-service .content .content-info li a:hover::after {
    opacity: 1;
}

.section-home-service .content .content-info li::before {
    content: "0"counter(item) " ";
    position: absolute;
    left: 0;
    width: 25px;
    text-align: right;
    letter-spacing: 3px;
}

.section-home-service .content .content-info li::after {
    content: "";
    /* Nội dung trống vì chỉ cần ảnh nền */
    position: absolute;
    top: 0;
    left: 15px;
    width: 35px;
    height: 100%;
    background-image: url('/uploads/image/2024/05/news_17157591090xnhZDFV7R.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.slider-popup.swiper {
    width: 100%;
    padding: 40px 0 80px 0;
}

.slider-popup .swiper-slide {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    height: 740px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #000;
    cursor: pointer;
}

.slider-popup .swiper-slide {
    transition-property: transform, box-shadow, filter;
    transition-duration: 0.5s, 0.6s, 0.4s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    /* mượt hơn ease-out */
    transition-delay: 0.05s, 0.08s, 0.1s;
    /* bắt đầu từng hiệu ứng lệch nhau */
    transform-origin: center;
    will-change: transform, box-shadow, filter;
    border-radius: 16px;
    overflow: hidden;
    backface-visibility: hidden;
}

.slider-popup .swiper-slide:hover {
    transform: scale(1.015) translateY(-5px);
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.15);
    filter: brightness(1.03);
    z-index: 5;
}

@media (max-width: 767px) {
    .slider-popup .swiper-slide {
        height: 600px;
    }
}

.slider-popup .FeatureCard_featureCard {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    padding: 20px;
    box-sizing: border-box;
}

.slider-popup .FeatureCard_topicLabel {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.slider-popup .FeatureCard_headline {
    font-size: 28px;
    font-weight: 500;
    margin: 55px 0 0 0;
    line-height: 1.2;
    z-index: 1;
    color: var(--while);
}

.slider-popup .FeatureCard_backgroundImage {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: 30px;
}

.slider-popup .FeatureCard_backgroundImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-popup .plus-button {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: background 0.3s;
    margin-left: auto;
    z-index: 2;
}

.slider-popup .plus-button:hover {
    background: rgba(255, 255, 255, 0.4);
}

.slider-popup .plus-button svg {
    height: 55%;
    width: 55%;
    fill: white;
}

/* Popup */
/* popup nền */
.section-home-service .popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

/* popup content */
.popup-content {
    padding: 40px;
    max-height: 100vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    background: #ffffff00;
    padding: 0 24px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
}

/* animation cho popup */
@keyframes popupShow {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* popup wrapper */
.popup-wrapper {
    position: relative;
    background: #fff;
    justify-content: center;
    padding: 30px 15px;
    position: relative;
    display: flex;
    justify-content: center;
    width: min(1260px, 87.5vw);
    max-width: 100%;
    height: 100%;
    border-radius: 28px;
    margin-bottom: 40px;
    margin-top: 40px;
}

.popup-container {
    width: min(1260px, 87.5vw);
    background: #ffffff;
}

.popup-outer {
    background: #fff;
    padding: 50px;
}

/* popup nền (background) */
.popup-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;

    z-index: 399999;
}

/* close button */
.section-home-service .close-popup {
    position: fixed;
    top: 120px;
    right: 320px;

    transition: background 0.3s;
}

.section-home-service .close-popup:hover {
    background: #6e6e73;
}

/* close button */
.section-home-service .close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #000;
    font-size: 24px;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    z-index: 1000;
}

.section-home-service .close_fixed {
    position: fixed;
    top: 10px;
    right: 130px;
}

.section-home-service .close-popup svg {
    height: 55%;
    width: 55%;
    fill: #f2f2f2;
}

/* header */
.section-home-service .popup-header h1 {
    font-size: 18px;
    color: #6e6e73;
    margin-bottom: 8px;
}

.section-home-service .popup-header h2 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 32px;
}

/* section */
.section-home-service .popup-section {
    margin-bottom: 20px;
    list-style: none;
}

.section-home-service .popup-text h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 12px;
}

.section-home-service .popup-text h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 12px;
}

.section-home-service .popup-text p {
    font-size: 16px;
    color: #6e6e73;
    line-height: 1.6;
    font-weight: 400;
}

.section-home-service .popup-text div {
    font-size: 24px;
    color: #6e6e73;
    line-height: 1.6;
    font-weight: 400;

    background-color: rgb(245, 245, 247);
    border-radius: 28px 28px 28px 28px;
    margin-inline: auto;
    padding-block: 64px 65px;
    padding-inline: 40px;
}

/* image */
.section-home-service img {
    width: 100%;
    border-radius: 0;
    margin: 0 auto;
}
/* Thêm CSS cho nút Prev/Next */
.section-home-service .slider-popup .swiper-buttons {
    position: absolute;
    bottom: 20px;
    right: 0;
    transform: translateX(-50%);
    display: flex;
    gap: 0px;
    z-index: 10;
}

.section-home-service .slider-popup .swiper-button-next,
.section-home-service .slider-popup .swiper-button-prev {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e8e8ed;
    color: #0000008f;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    margin-left: 30px;
    overflow: hidden;
    /* Đảm bảo icon không bị vỡ */
}

/* SVG icon thay thế */
.slider-popup .swiper-button-next::after,
.slider-popup .swiper-button-prev::after {
    content: "";
    display: inline-block;
    width: 36px;
    height: 36px;
    background-size: auto;
    background-repeat: no-repeat;
}

/* Mũi tên "Next" */
.slider-popup .swiper-button-next::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 36 36%22%3E%3Cpath d=%22M22.56 16.938l-5.508-5.5a1.493 1.493 0 0 0-2.116.003 1.502 1.502 0 0 0 .004 2.121L19.384 18l-4.444 4.438A1.502 1.502 0 0 0 15.996 25c.382 0 .764-.145 1.056-.438l5.508-5.5a1.502 1.502 0 0 0 0-2.125z%22%3E%3C/path%3E%3C/svg%3E");
}

/* Mũi tên "Prev" */
.slider-popup .swiper-button-prev::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 36 36%22%3E%3Cpath d=%22M20 25c-.384 0-.768-.146-1.06-.44l-5.5-5.5a1.5 1.5 0 0 1 0-2.12l5.5-5.5a1.5 1.5 0 1 1 2.12 2.12L16.622 18l4.44 4.44A1.5 1.5 0 0 1 20 25z%22%3E%3C/path%3E%3C/svg%3E");
}

/* Hover effect: phóng to nhẹ */
.slider-popup .swiper-button-next:hover,
.slider-popup .swiper-button-prev:hover {
    transform: scale(1.1);
    background: #e8e8edd6;
}

.slider-container {
    position: relative;
    height: 100vh;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: all-scroll;
}


.slider-control {
    z-index: 2;
    position: absolute;
    top: 0;
    width: 12%;
    height: 100%;
    transition: opacity 0.3s;
    will-change: opacity;
    opacity: 0;
}

.slider-control.inactive:hover {
    cursor: auto;
}

.slider-control:not(.inactive):hover {
    opacity: 1;
    cursor: pointer;
}

.slider-control.left {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);
}

.slider-control.right {
    right: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
}

.slider-pagi {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 5rem;
    transform: translateX(-50%);
    font-size: 0;
    list-style-type: none;
}

.slider-pagi__elem {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 2rem;
    height: 2rem;
    margin: 0 0.5rem;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
}

.slider-pagi__elem:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.2rem;
    height: 1.2rem;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
    transform: translate(-50%, -50%) scale(0);
}

.slider-pagi__elem.active:before,
.slider-pagi__elem:hover:before {
    transform: translate(-50%, -50%) scale(1);
}

.slider {
    z-index: 1;
    position: relative;
    height: 100%;
}

.slider.animating {
    transition: transform 0.5s;
    will-change: transform;
}

.slider.animating .slide__bg {
    transition: transform 0.5s;
    will-change: transform;
}

.slide {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slide.active .slide__overlay,
.slide.active .slide__text {
    opacity: 1;
    transform: translateX(0);
}

.slide__bg {
    position: absolute;
    top: 0;
    left: -50%;
    width: 100%;
    height: 100%;
    background-size: cover;
    will-change: transform;
}


.slide__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slide__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    min-height: 810px;
    transition: transform 0.5s 0.5s, opacity 0.2s 0.5s;
    will-change: transform, opacity;
    transform: translate3d(-20%, 0, 0);
    opacity: 0;
}

@media (max-width: 991px) {
    .slide__overlay {
        display: none;
    }
}

.slide__overlay path {
    opacity: 0.8;
}

.slide__text {
    position: absolute;
    width: 30%;
    bottom: 40%;
    left: 12%;
    color: #fff;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
    will-change: transform, opacity;
    transform: translateY(-50%);
    opacity: 0;
}

/*@media (max-width: 991px) {*/
/*    .slide__text {*/
/*        left: 0;*/
/*        bottom: 0;*/
/*        width: 100%;*/
/*        height: 20rem;*/
/*        text-align: center;*/
/*        transform: translateY(50%);*/
/*        transition: transform 0.5s 0.5s, opacity 0.5s 0.5s;*/
/*        padding: 0 1rem;*/
/*    }*/
/*}*/

.slide__text-heading {
    font-size: 4.4rem;
    margin-bottom: 2rem;
    color: #fff;
    font-weight: 800;
    letter-spacing: 1px;
}


.slide__text-desc {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 3.5rem;
}

/*@media (max-width: 991px) {*/
/*    .slide__text-desc {*/
/*        display: none;*/
/*    }*/
/*}*/

.slide__text a.slide__text-link {
    z-index: 5;
    display: inline-block;
    position: relative;
    padding: 10px 10px;
    cursor: pointer;
    font-size: 18px;
    background: #fff;
    color: #000;
    border-radius: 6px;
}

.slide__text a.slide__text-link:hover {
    color: #000;
}

@media (max-width: 991px) {
    .slide__text-link {
        display: none;
    }
}

@media (max-width: 991px) {
    .slide__text-heading {
        line-height: 20rem;
        font-size: 3.5rem;
    }
}

@media (min-width: 1200px) and (max-width: 1499px) {
    .slide__text-heading {
        font-size: 3.4rem;
    }

    .slide__text-desc {
        color: #fff;
        font-size: 1.4rem;
        margin-bottom: 3.5rem;
    }
}

.slide__text-link:hover:before {
    transform: rotateX(0);
}

/* section-index-good-design */

.section-index-good-design {
    background-color: #075951;
    padding: 100px 0
}

.section-index-good-design .container {
    width: 90%;
    max-width: 1360px
}

.section-index-good-design .good-design-column-wrapper {
    position: relative
}

.section-index-good-design .good-design-column-wrapper h2 {
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    font-size: 40px;
    line-height: 52px;
    letter-spacing: 0;
    color: #fff;
    margin-top: 0
}

.section-index-good-design .good-design-column-wrapper h2 span {
    display: inline-block;
    vertical-align: top
}

.section-index-good-design .good-design-column-wrapper .good-design-text p {
    color: #fff;
    /* font-weight: 400; */
}

@media only screen and (max-width: 768px) {
    .section-index-good-design .good-design-column-wrapper .good-design-text p {
        font-size: 16px
    }

    .section-index-good-design {
        padding: 60px 0
    }
}

/* end section-index-good-design */
.profile .section-faqs {
    background: #fff;
}
.module-quytrinh .mk-text-block h4 span {
    font-size: 15px;
    font-weight: 500;
}
.module-quytrinh .mk-text-block p span {
    font-size: 12px;
    font-weight: 400;
}