/*
Theme Name: MYPAGE Child
Theme URI: https://www.mypage.vn/
Author: MYPAGE
Author URI: https://www.mypage.vn/
Description: MYPAGE Theme.
Version: 1.1
Template: mypage
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: mypage-child
*/
@import url("../mypage/style.css");
/*************** ADD YOUR CUSTOM CSS HERE  ***************/
@import url("fonts/fonts.css");
body { font-family: 'SVN-Gotham' }
.no-breadcrumbs .main-content { padding-top: 0; }
.page-title-wrap h1.page-title { pointer-events: none; visibility: hidden; } 
#side-nav-panel .accordion-menu > li.menu-item > a {
    font-size: 18px;
    letter-spacing: 0;
    font-weight: 400;
}
.single-post .entry-title {font-size: 24px;margin-bottom: 10px;}
.single .related-posts h4.sub-title strong { font-weight: 700; }
.entry-content ul {padding-left: 20px;}
.entry-content {padding-top: 20px;border-top: 1px solid #ccc;text-align: justify;}
.entry-content ul, .entry-content ol, .product-summary-wrap .description ul, .product-summary-wrap .description ol, .woocommerce-tabs .tab-content ul, .woocommerce-tabs .tab-content ol, .duan_short ul, .duan_short ol{padding-left: 20px;}
.entry-content ul li, .entry-content ol li, .product-summary-wrap .description ul li,.product-summary-wrap .description ol li, .woocommerce-tabs .tab-content ul li, .woocommerce-tabs .tab-content ol li, .duan_short ul li, .duan_short ol li{margin-bottom: 7px;}
.entry-content table, .entry-content iframe, .woocommerce-tabs .tab-content table, .woocommerce-tabs .tab-content iframe, .duan_short table, .duan_short iframe, .wpb_text_column table {margin-bottom: 20px;}
.entry-content table th, .entry-content table td, .woocommerce-tabs .tab-content table th, .woocommerce-tabs .tab-content table td, .duan_short table th, .duan_short table td, .wpb_text_column table th, .wpb_text_column table td, .term-description table th, .term-description table td {border: 1px solid #ccc;}
.term-description table {margin-bottom: 20px;}
body.single-post .page-top ul.breadcrumb>li:last-child, body.single-product .page-top ul.breadcrumb>li:last-child{display: none;}
body.single-post .page-top ul.breadcrumb>li:nth-last-child(2) .delimiter, body.single-product .page-top ul.breadcrumb>li:nth-last-child(2) .delimiter {display: none;}
.wp-caption .wp-caption-text, .wp-caption-dd {font-size: 15px;text-align: center;color: #000;}
.wp-caption.aligncenter, .wp-caption {margin-bottom: 15px;}
.post-carousel h4, .post-carousel h5, .blog-posts .post .entry-title {font-size: 17px;margin-bottom: 8px;line-height: 24px;overflow: hidden;font-weight: 700;}
body .porto-carousel-wrapper {
    margin-left: -15px;
    margin-right: -15px;}

#side-nav-panel .accordion-menu > li.menu-item ul.sub-menu li a {
    font-size: 18px;
}



.vc_column_container>.vc_column-inner { padding-left: 0; padding-right: 0; }

#header.sticky-header .header-main.active, .fixed-header #header.sticky-header .header-main.active { background-color: transparent; }

.fixed-header #header .main-menu > li.menu-item > a { color: #fff; }
.fixed-header #header.sticky-header .main-menu > li.menu-item > a { color: #000; }
.fixed-header #header .search-toggle i { color: #fff; }
.fixed-header #header.sticky-header .search-toggle i { color: #000; }
#header {  box-shadow: rgba(0, 0, 0, 0.1) 10px 10px 40px; margin-bottom: 50px;}
#header .header-main { padding: 0 72px; }
#header .header-main .header-left { padding-top: 6px; padding-bottom: 6px; }
#header .header-main .header-container { display: flex; justify-content: space-between; align-items: center; }
#header .header-main .header-right-bottom { display: flex; align-items: center; } 
#header .header-main ul.main-menu > .menu-item:before { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 0.2rem; background-color: #404040; width: 0; border-radius: 100px; transition: 0.3s ease-in-out; }
#header .header-main ul.main-menu > .menu-item.active:before { width: calc( 100% - 50px); }
.fixed-header #header .header-main ul.main-menu > .menu-item:hover:before { width: calc( 100% - 50px); background-color: #fff; }
#header .header-main ul.main-menu > .menu-item:hover:before { width: calc( 100% - 50px); background-color: #404040; }
.fixed-header #header.sticky-header .header-main ul.main-menu > .menu-item:hover:before { background-color: #404040; }
#header .header-right-bottom > .search-popup { margin-left: 56px;}
#banner-wrapper .wrap_banner .porto-carousel-wrapper { margin-bottom: 0; }
.wrap_banner .vc_row > .porto-item-wrap { padding-left: 0; padding-right: 0; }
.wrap_banner .slick-slide .vc_row > .porto-item-wrap > .vc_column_container > .wpb_wrapper { position: relative; }
.wrap_banner .slick-slide .vc_row > .porto-item-wrap > .vc_column_container > .wpb_wrapper > .porto-item-wrap:last-child { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
.wrap_banner .slick-slide > .vc_row { display: block; }
.wrap_banner .slick-slide .wpb_text_column { color: #fff; font-size: 36px; padding: 0 200px; }
.wrap_banner .slick-slide .wpb_text_column p { line-height: 1.3 ; text-align: center;}
.wrap_banner.vc_row-no-padding .porto-carousel-wrapper .slick-prev { left: 15px;}
.wrap_banner.vc_row-no-padding .porto-carousel-wrapper .slick-next { right: 15px;}
.wrap_banner .slick-prev i, .wrap_banner .slick-next i { font-size: 40px;  }
.wrap_banner .porto-item-wrap .wpb_single_image:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, rgba(0,0,0,0.50) 0%, rgba(255,255,255,0) 100%); z-index: 1; display: block;} 


@keyframes moveUpDown {
  0% {
    top: 0;
  }
  50% {
    top: 36%; /* di chuyển lên 20px */
  }
  100% {
    top: 0;
  }
}

@keyframes upDown {
  0%   { top: 0; bottom: auto; }      /* bắt đầu từ trên */
  100% { bottom: 0; top: auto; }      /* chạy xuống dưới */
}

.wrap_intro_clients .bg_intro { position: absolute; left: 0; margin-bottom: 0; pointer-events: none; animation: moveUpDown 10s ease-in-out linear infinite; -webkit-animation: moveUpDown 10s linear infinite; z-index: 0; }
.wrap_intro-home { padding-top: 100px; padding-bottom: 80px; }
.wrap_intro-home > .porto-wrap-container > .row { align-items: flex-start!important; }
.wrap_intro-home h3 { font-size: 38px; line-height: 1.2; color: #404040;}
.wrap_intro-home .wpb_text_column p { font-weight: 200; font-size: 14px; line-height: 1.5; text-align: justify; }
.vc_btn3-container .vc_btn3 { 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: fit-content;
    padding: 12px 24px;
    min-width: 220px;
    min-height: 46px;
    position: relative;
    background-color: transparent;
    transition: 0.5s ease;
    border: 1px solid #231F20;
 }
 .vc_btn3-container .vc_btn3.vc_btn3-size-md { border-radius: 0; }
 .vc_btn3-container .vc_btn3 span,  .vc_btn3-container .vc_btn3 strong {font-weight: 700; letter-spacing: 1.4px; font-size: 14px; position: relative; z-index: 3; white-space: nowrap; color: #000;}
 .vc_btn3-container .vc_btn3:hover span, .vc_btn3-container .vc_btn3:hover strong { color: #fff; }
 .vc_btn3-container .vc_btn3:before, .vc_btn3-container .vc_btn3:after { 
 	content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #231F20;
    transition: 0.3s ease; 
    z-index: 1;
}
 .vc_btn3-container .vc_btn3:before { top: 0 }
.vc_btn3-container .vc_btn3:after { bottom: 0}
.vc_btn3-container .vc_btn3:hover:before, .vc_btn3-container .vc_btn3:hover:after { height: 50%; }
.wrap_client { padding-bottom: 35px; }
.wrap_client > .vc_column_container { display: flex; align-items: center; }
.wrap_client .wpb_text_column { margin-bottom: 0; }
.wrap_client h2 { color: #404040; }
.wrap_client h2 span.title-partner { margin-left: 58px; }
.wrap_client .porto-carousel-wrapper { margin-bottom: 0; }
.wrap_client .slick-list { width: 90%; margin: 0 auto; }
.wrap_client .slick-slider .slick-next i, .wrap_client .slick-slider .slick-prev i { font-size: 40px; color: #404040; }
.wrap_client .wpb_single_image img { filter: grayscale(1); transition: 0.3s ease-in-out;}
.wrap_client .wpb_single_image img:hover { filter: none; }
.wrap_services .wrap_bg:before { position: absolute; content: ""; background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)); top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: block;}
.wrap_services .wrap_bg > .vc_column_container, .wrap_services .wrap_bg > .vc_column_container > .vc_column-inner { padding-left: 0; padding-right: 0; }
.wrap_services .wrap_bg > .vc_column_container > .vc_column-inner { position: relative; }
.wrap_services .wrap_bg .wpb_single_image { margin-bottom: 0; visibility: hidden; opacity: 0; position: absolute; top: 0; left: 0; transition: 0.8s ease-in-out;}
.wrap_services .wrap_bg .wpb_single_image .vc_single_image-wrapper, .wrap_services .wrap_bg .wpb_single_image img { width: 100%; }
.wrap_services .wrap_bg .wpb_single_image.active { visibility: visible; opacity: 1; position: relative; }
.wrap_services .services { position: absolute; bottom: 0; width: 100%; height: 100%; z-index: 10;}
.wrap_services .wrap_bg .wpb_single_image > .wpb_wrapper { position: relative; }
.wrap_services .wrap_bg .wpb_single_image h2.wpb_singleimage_heading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff;  pointer-events: none; display: none;}
.wrap_services .services > .vc_column_container > .vc_column-inner { display: flex; height: 100%;}
.wrap_services .services .porto-sicon-box-link { width: 50%; display: flex; align-items: center; justify-content: center;}
.wrap_services .services .porto-sicon-box-link:first-child { border-right: 1px solid #7f7f7f; }
.wrap_services .services h3.porto-sicon-title { color: rgba(255, 255, 255, 0.5); margin-bottom: 0; font-size: 36px; font-weight: 700; line-height: 1.2; transition: 0.3s ease-in-out;}
.wrap_services .services .porto-sicon-box-link:hover h3.porto-sicon-title { color: #fff; }
.wrap_brand { padding-top: 60px; padding-bottom: 20px; }
.wrap_brand h3.vc_custom_heading{ font-size: 48px; font-weight: 700; line-height: 1.2; color: #404040; width: 78%; margin-bottom: 110px;}
.wrap_brand .wpb_single_image { margin-bottom: 100px; }
.wrap_brand .wpb_single_image img { filter: brightness(0) saturate(100%) invert(63%) sepia(4%) saturate(22%) hue-rotate(13deg) brightness(91%) contrast(93%); transition: 0.2s ease-in-out;}
.wrap_brand .wpb_single_image img:hover { filter: none; transform: scale(1.1);}
.wrap_brand .wpb_text_column { width: 50%; }
.wrap_brand .wpb_text_column p { font-size: 21px; line-height: 1.5; font-weight: 200; }
.footer-main .container-fluid, .wrap_footer, .wrap_footer .footer_contact_us, .wrap_footer .footer_address { padding-left: 0; padding-right: 0; }
.wrap_footer .footer_contact_us h3 { font-size: 36px; font-weight: 700; line-height: 1.2; margin-bottom: 32px; }
.wrap_footer .footer_contact_us > .vc_column-inner { margin-top: 50%;  }
.wrap_footer .footer_contact_us .vc_row { margin-bottom: 12px; }
.wrap_footer .footer_contact_us .vc_row > .vc_column_container > .vc_column-inner { padding-left: 0; padding-right: 0; display: flex; }
.wrap_footer .footer_contact_us .porto-sicon-box { margin-right: 24px; font-size: 14px; }
.wrap_footer .footer_contact_us .porto-sicon-box:last-child { margin-right: 0; }
.wrap_footer .footer_contact_us .porto-sicon-box .porto-sicon-header + .porto-sicon-description { margin-top: 0; }
.wrap_footer .footer_contact_us .porto-sicon-description { color: #fff; white-space: nowrap; }
.wrap_footer .footer_address > .vc_column-inner , .wrap_footer .footer_address > .vc_column-inner > .vc_row { height: 100%; }
.wrap_footer .footer_address { min-height: 400px; }
.wrap_footer .footer_address .vc_column-inner { position: relative;}
.wrap_footer .footer_address .wpb_single_image { margin-bottom: 0; }
.wrap_footer .footer_address img { width: 100%; height: 100%; object-fit: contain; }
.wrap_footer .footer_address .wpb_text_column { position: absolute; top: 80%; left: 54%; font-size: 14px;}
.wrap_footer .footer_address .wpb_text_column > .wpb_wrapper { display: flex; }
.wrap_footer .footer_address .wpb_text_column strong { color: #fff; font-weight: 700 }
.wrap_footer .footer_address .wpb_text_column ul li { font-size: 14px; font-weight: 200; white-space: nowrap;}
.wrap_footer .footer_address .footer-map-marker { 
	width: 6px;
    height: 6px;
    background-color: white;
    z-index: 2;
    position: relative;
    left: -9%;
    bottom: -30px;
    border-radius: 100px; }
.wrap_footer .footer_address .footer-map-marker:before {
   	content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: white;
    border-radius: inherit;
    animation: 2s ease-in-out 0s infinite normal forwards running markerAni;
}
@keyframes markerAni {
	0% {
    opacity: 1;
    transform: scale(1);
}
100% {
    opacity: 0;
    transform: scale(5);
}
}

#footer .footer-bottom { padding: 0; border: 1px solid rgba(255, 255, 255, 0.1); }
#footer .footer-bottom .widget.follow-us { display: flex; justify-content: flex-end; align-items: center;}
#footer .footer-bottom .widget.follow-us h3.widget-title { font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, 0.5); margin-right: 24px; margin-bottom: 0;}

.follow-us .share-links a:first-child {margin-left: 0;}
.follow-us .share-links a:last-child {margin-right: 0;}
.follow-us .share-links a.share-behance {text-indent: 0;}
.follow-us .share-links a.share-behance i {position: absolute;top: 0;left: 0;right: 0;bottom: 0;line-height: 23px;height: 22px;margin: auto;}
.follow-us .share-links a.share-behance:hover{background-color: #0057ff;}

.wrap_banner_gioithieu { padding-bottom: 500px; }
.wrap_banner_gioithieu .vc_row { padding-top: 250px; padding-bottom: 250px; background-attachment: fixed;  background-size: cover; background-repeat: no-repeat; background-position: center bottom;}
.wrap_banner_gioithieu .vc_row {
  opacity: 0;
  position: absolute;
  width: 100%;
  animation: fade 9s linear infinite; /* tổng thời gian 9s */
}

.wrap_banner_gioithieu .vc_row:nth-child(1) { animation-delay: 0s; }
.wrap_banner_gioithieu .vc_row:nth-child(2) { animation-delay: 3s; }
.wrap_banner_gioithieu .vc_row:nth-child(3) { animation-delay: 6s; }

@keyframes fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }   /* fade in */
  30%  { opacity: 1; }   /* giữ sáng */
  35%  { opacity: 0; }   /* fade out */
  100% { opacity: 0; }
}

.wrap_banner_gioithieu.vc_row > .vc_column_container > .vc_column-inner { padding-top: 0 }
.wrap_aboutus { padding-bottom: 140px; }
.wrap_aboutus h1.vc_custom_heading { font-size: 48px; font-weight: 700; line-height: 1.2; color: #404040; }
.wrap_aboutus .wpb_text_column { font-size: 16px; font-weight: 200; }
.wrap_overview { padding: 100px 0; }
.wrap_overview .overview_title { position: relative; }
.wrap_overview .overview_title > .wpb_wrapper { position: absolute; left: -7%; }
.wrap_overview h2.vc_custom_heading { font-size: 65px; font-weight: 700; line-height: 1.2; color: #404040; margin-bottom: 0px}
.wrap_overview h3.vc_custom_heading { font-size: 75px; font-weight: 700; line-height: 1.2; color: transparent;-webkit-text-stroke: 2px #ccc; margin-left: 290px;}
.wrap_overview .porto-sicon-box:not(:last-child) { border-bottom: 1px solid rgba(64, 64, 64, 0.5); padding-bottom: 20px; margin-bottom: 30px;}
.wrap_overview .porto-sicon-box h3.porto-sicon-title { font-size: 24px; font-weight: 700; }
.wrap_overview .porto-sicon-description { font-size: 16px; font-weight: 200; }
.wrap_overview_service { padding-top: 80px; padding-bottom: 20px; }
.wrap_overview_service .title_service .wpb_wrapper { display: flex; flex-wrap: wrap;}
.wrap_overview_service .title_service h2.vc_custom_heading { width: 50%; text-align: center; border-bottom: 1px solid rgba(64, 64, 64, 0.2); padding-bottom: 20px; font-size: 48px; color: rgba(64, 64, 64, 0.5); font-weight: 200; cursor: pointer; transition: 0.1s ease-in-out;}
.wrap_overview_service .title_service h2.vc_custom_heading.active { color: #404040; font-weight: 700; border-bottom-color: #231F20; }
.wrap_overview_service .des_service .wpb_text_column p { font-size: 24px; font-weight: 300; }
.wrap_overview_service .des_service > .vc_column_container > .wpb_wrapper { position: relative;}
.wrap_overview_service .des_service .wpb_text_column {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease-in-out;
}

.wrap_overview_service .des_service .wpb_text_column.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}
.wrap_overview_service .des_service .vc_btn3-container { margin-top: 40px; }

.wrap_contactus > .vc_column_container > .vc_column-inner { padding-left: 0; padding-right: 0; }
.wrap_contactus .wrap_ggmap { opacity: 0.5; }
.wrap_contactus .wrap_ggmap .map_info_text { font-size: 20px; color: #e40000!important; font-weight: 400; }
.wrap_contactus .contact_profile { position: absolute; bottom: 5%; left: 31%; z-index: 3;  }
.wrap_contactus .contact_profile .porto-sicon-box { margin-bottom: 24px; }
.wrap_contactus .contact_profile h3.porto-sicon-title { font-size: 36px; font-weight: 700; line-height: 1.2; color: #404040; margin-bottom: 24px; white-space: nowrap;}
.wrap_contactus .contact_profile .porto-sicon-header p { font-size: 20px; font-weight: 700; margin-bottom: 24px;}
.wrap_contactus .contact_profile .porto-sicon-description ul { padding-left: 0; }
.wrap_contactus .contact_profile .porto-sicon-description ul li { list-style: none; font-size: 20px; font-weight: 700; color: #404040; margin-bottom: 6px; white-space: nowrap;}
.wrap_contactus .contact_profile .vc_btn3-container { margin-left: 50%; transform: translateX(-50%); }
.wrap_contactus .contact_profile .vc_btn3-container .vc_btn3 {background-color: #000;}
.wrap_contactus .contact_profile .vc_btn3-container .vc_btn3 span {  color: #fff; }
.wrap_contactus .contact_profile .vc_btn3-container .vc_btn3:hover span { color: #000; }
.wrap_contactus .contact_profile .vc_btn3-container .vc_btn3:before, .wrap_contactus .contact_profile .vc_btn3-container .vc_btn3:after { background-color: #fff; }

.portfolios-grid  { padding-top: 20px; }
.portfolios-grid > .container { display: flex; flex-direction: column; align-items: center; margin-bottom: 32px;}
.portfolios-grid > .container hr { display: none; }
.portfolios-grid .nav-pills>li.active>a,.portfolios-grid .nav-pills>li>a.active { background-color:transparent; color: #404040; }
.portfolios-grid .nav-pills>li>a { color: rgba(64, 64, 64, 0.5); white-space: nowrap; cursor: pointer; font-weight: 700; text-transform: uppercase; font-size: 16px;}
.portfolios-grid .nav-pills>li:not(:first-child) { margin-left: 20px; }
.portfolios-grid article.portfolio { padding-left: 5px; padding-right: 5px; padding-bottom: 10px;}
.portfolios-grid .portfolio-item .thumb-info:hover img { transform: none; }
.portfolios-grid .portfolio-item .thumb-info-wrapper { position: relative; }
.portfolios-grid .portfolio-item .thumb-info-wrapper:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)); z-index: 1; transition: 0.6s ease;}
.portfolios-grid .portfolio-item .thumb-info:hover .thumb-info-wrapper:before { opacity: 0; }
.portfolios-grid .portfolio-item .thumb-info:hover .thumb-info-wrapper:after {  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 50%; background: linear-gradient(0deg, rgba(0,0,0,0.50) 0%, rgba(255,255,255,0) 100%); z-index: 1; display: block; }
.portfolios-grid .portfolio-item .thumb-info .thumb-info-wrapper:after { transition: none; }
.portfolios-grid .portfolio-item .portfolio_info { position: absolute; bottom: 0; left: 15px; color: #fff; z-index: 3; opacity: 0; visibility: hidden; transform: translate(0, 100%); transition: 0.6s ease-in-out; padding: 0 10px 15px;}
.portfolios-grid .portfolio-item .thumb-info:hover .portfolio_info { opacity: 1; visibility: visible; transform: translate(0, 0); }
.portfolios-grid .portfolio-item .portfolio_info .portfolio_info_title { color: #fff; margin-bottom: 0;}
.portfolios-grid .portfolio-item .portfolio_info .portfolio_info_vitri { margin-bottom: 0; }

.single-portfolio #header { margin-bottom: 0; }
.single-portfolio .page-top { padding: 260px 0; background-size: cover; background-position: center bottom; background-repeat: no-repeat;}
.single-portfolio .page-top:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 1; background-color: rgba(0 0 0 / 40%); }
.single-portfolio .page-title-wrap h1.page-title { visibility: visible; }
.single-portfolio .portfolio_info_detail { padding: 32px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1) }
.single-portfolio .portfolio_info_detail ul { display: flex; justify-content: space-between; margin-bottom: 0; padding-left: 0;}
.single-portfolio .portfolio_info_detail ul li { list-style: none; display: flex; flex-direction: column;  }
.single-portfolio .portfolio_info_detail ul li span {  font-size: 16px; line-height: 1.55; font-weight: 300; color: #404040; text-transform: uppercase;}
.single-portfolio .entry-content { border-top: none; padding-top: 0;     }

.related-portfolios .portfolio-item { padding: 0 5px; }
.related-portfolios .thumb-info .thumb-info-title { background: none; }
.related-portfolios .thumb-info .thumb-info-wrapper { position: relative; }
.related-portfolios .thumb-info .thumb-info-title { position: absolute; bottom: 0; left: 15px; color: #fff; z-index: 3; opacity: 0; visibility: hidden; transform: translate(0, 100%); transition: 0.6s ease-in-out; padding: 0 10px;}
.related-portfolios .thumb-info:hover .thumb-info-title { opacity: 1; visibility: visible; transform: translate(0, 0); }
.related-portfolios .portfolio-item .thumb-info:hover img { transform: none; }
.related-portfolios .portfolio-item .thumb-info-wrapper { position: relative; }
.related-portfolios .portfolio-item .portfolio_info { position: absolute; bottom: 0; left: 15px; color: #fff; z-index: 3; opacity: 0; visibility: hidden; transform: translate(0, 100%); transition: 0.6s ease-in-out; padding: 0 10px;}
.related-portfolios .portfolio-item .thumb-info:hover .portfolio_info { opacity: 1; visibility: visible; transform: translate(0, 0); }
.related-portfolios .portfolio-item .portfolio_info .portfolio_info_title { color: #fff; margin-bottom: 0;}

.portfolio-large .post-content .vc_row .wpb_single_image { margin-bottom: 8px; position: relative;}
.portfolio-large .post-content .vc_row .wpb_single_image .porto-vc-zoom-hover-icon:before { transition: 0.2s;
    background: rgba(0, 0, 0, 0.65);
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 2;
    display: block; }
.portfolio-large .post-content .vc_row .wpb_single_image .porto-vc-zoom-hover-icon:after { transition: 0.2s;
    font-family: var(--fa-style-family-classic, "Font Awesome 6 Free");
    font-weight: 900;
    color: #fff;
    content: "";
    font-size: 30px;
    height: 30px;
    position: absolute;
    top: 30%;
    margin-top: -15px;
    display: block;
    text-align: center;
    width: 100%;
    opacity: 0;
    z-index: 3; }
.portfolio-large .post-content .vc_row { margin-left: -4px; margin-right: -4px; }
.portfolio-large .post-content .vc_row > .vc_column_container { padding-left: 4px; padding-right: 4px; }
.portfolio-large .post-content .vc_row .wpb_single_image .porto-vc-zoom-hover-icon:hover:before { opacity: 1; }
.portfolio-large .post-content .vc_row .wpb_single_image .porto-vc-zoom-hover-icon:hover:after { top: 50%; opacity: 1; }

.blog-posts article.post-grid { margin-bottom: 15px; }
article.post-grid .post-image img { filter: grayscale(1); transition: 1.5   s ease-in-out; }
article.post-grid .post-content .post-excerpt, article.post-grid .post-meta, article.post-grid .post-image .zoom { display: none; }
article.post-grid .post-content .entry-title { text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
article.post-grid:hover .post-image img { filter: none; transform: scale(1.1); }

.wrap_banner_sanxuat .banner { background-size: cover; background-position: center; background-repeat: no-repeat; padding-top: 260px; padding-bottom: 260px; position: relative;}
.wrap_banner_sanxuat .wpb_text_column h2 { display: inline-block; font-size: 72px; font-weight: 700; color: #fff; line-height: 1.1; transform: translateX(100%); transition: 2s ease-in-out;} 
.wrap_banner_sanxuat .wpb_text_column { color: #fff; width: 50%; font-size: 24px; font-weight: 300; margin-left: 100px; overflow: hidden;}
.wrap_banner_sanxuat .banner:before { content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1; 
    display: block;
}
.wrap_banner_sanxuat .banner > .porto-item-wrap { position: relative; z-index: 3; }
.wrap_banner_sanxuat .wpb_text_column p { transform: translateY(100%); transition: 2s ease-in-out; margin-bottom: 10px;}
.wrap_banner_sanxuat .porto-item-wrap.slick-active .wpb_text_column h2, .wrap_banner_sanxuat .porto-item-wrap.slick-active .wpb_text_column p { transform: translate(0, 0); }
.wrap_banner_sanxuat .porto-carousel-wrapper .slick-prev { left: 15px;}
.wrap_banner_sanxuat .porto-carousel-wrapper .slick-next { right: 15px;}
.wrap_banner_sanxuat .slick-prev i, .wrap_banner_sanxuat .slick-next i { font-size: 40px;} 

.wrap_sanxuat .col_left { width: 20%; }
.wrap_sanxuat .col_right { width: 80%; }
.wrap_sanxuat .col_left .wpb_text_column ul { display: flex; flex-direction: column; gap: 64px; position: relative; list-style: none;} 
.wrap_sanxuat .col_left .wpb_text_column ul:before {content: ""; position: absolute; left: 100%; top: 0%; bottom: 6%; height: 100%; transform: translateX(-50%); border-left: 0.1px dashed #9a9a9a;}
.wrap_sanxuat .col_left .wpb_text_column ul li { font-size: 14px; font-weight: 700; color: #9a9a9a; text-align: right; display: block; padding: 12px 0; padding-right: 12px; text-transform: uppercase; position: relative; }
.wrap_sanxuat .col_left .wpb_text_column ul li:before { content: ""; position: absolute; left: 100%; top: 50%; width: 6px; height: 6px; border-radius: 100px; background: #999999; transform: translate(-50%, -50%); }
.wrap_sanxuat .col_left .wpb_text_column ul li:after { content: ""; position: absolute; left: 100%; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; background-image: url("images/icon-sc-box.png"); background-repeat: no-repeat; background-size: contain; /* background-position: center; */ filter: brightness(0); opacity: 1; }
.wrap_quymosanxuat div.stats-desc > div.counter_prefix { font-size: 16px; color: #999999; font-weight: 400; display: block; margin-bottom: 15px;}
.wrap_quymosanxuat > .vc_column_container:first-child .stats-number { display: none; }
.wrap_quymosanxuat > .vc_column_container:first-child .stats-text, .wrap_quymosanxuat > .vc_column_container .stats-number, .wrap_quymosanxuat > .vc_column_container .counter_suffix{ color: #404040; font-weight: 500; font-size: 35px; line-height: 1; }
.wrap_sanxuat h3.vc_custom_heading { font-size: 15px; color: #999999; text-transform: uppercase; font-weight: 700; position: relative; padding-left: 20px;}
.wrap_sanxuat h3.vc_custom_heading:before { content: ""; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; background-image: url("images/icon-sc-box.png"); background-repeat: no-repeat; background-size: contain; }
.wrap_nanglucsanxuat .wpb_text_column { color: #404040; font-size: 24px; font-weight: 400; line-height: 1.2 }


@media (max-width: 1259px) {
    #header .header-main { padding: 0 25px;}
	#header .header-right-bottom > .search-popup { margin-left: 40px; }
	.wrap_banner .slick-slide .wpb_text_column { font-size: 30px; }
	.wrap_intro-home { width: 100%; margin-left: 0}
    .wrap_intro-home h3 { font-size: 27px; }
	.wrap_client { padding: 0 0 35px; }
    .wrap_client > .vc_column_container { padding-left: 0; padding-right: 0; }
	.wrap_client h2 { font-size: 24px; line-height: 1.3; }
	.wrap_client h2 span.title-partner { margin-left: 43px; }
    .wrap_brand h3.vc_custom_heading { font-size: 45px; margin-bottom: 100px; }
    .wrap_brand .wpb_single_image { margin-bottom: 90px; }
    .wrap_aboutus h1.vc_custom_heading { font-size: 45px; }
    .wrap_overview h2.vc_custom_heading { font-size: 50px; }
    .wrap_overview h3.vc_custom_heading { font-size: 60px; margin-left: 236px; }
    .wrap_overview .overview_title > .wpb_wrapper { left: 0; }
    .wrap_overview_service .title_service h2.vc_custom_heading { font-size: 42px; }
    .wrap_banner_gioithieu { padding-bottom: 435px; }
    .wrap_banner_gioithieu .vc_row { padding-top: 200px; padding-bottom: 200px; }
    .portfolios-grid .portfolio-item .portfolio_info { left: 0; }
    .portfolios-grid .portfolio-item .portfolio_info .portfolio_info_title, .related-portfolios .portfolio-item .portfolio_info .portfolio_info_title { font-size: 18px; line-height: 1.2;}
    .portfolios-grid .portfolio-item .portfolio_info p, .related-portfolios .portfolio-item .portfolio_info p  { line-height: 22px; }
    .single-portfolio .page-top { padding: 200px 0; }

    .wrap_footer .footer_address .wpb_text_column { top: 89%; left: 17%; text-align: center;}
    .wrap_footer .footer_address .footer-map-marker { bottom: 20px; left: 50%; }

}

@media (max-width: 991px) {
    .page-top { padding: 0 }
    #header .header-main .header-right { margin-left: auto; }
	#header .header-main .header-right-bottom { justify-content: flex-end; }
	#header .language .gtranslate_wrapper { display: flex; }
    #header .mobile-toggle { margin-left: 10px; border-radius: 0; line-height: 0; padding: 5px 14px;}
	.wrap_banner .slick-slide .wpb_text_column { font-size: 25px; padding: 0 150px;}
    .wrap_intro-home { padding-top: 70px; }
    .wrap_intro-home .vc_column_container { width: 100%; }
	.wrap_intro-home h3 { font-size: 28px; }
	.wrap_client h2 { font-size: 20px; }
	.wrap_client h2 span.title-partner { margin-left: 33px; }
    .wrap_services .services h3.porto-sicon-title { font-size: 32px;     }
    .wrap_brand { padding-top: 70px; padding-bottom: 0;}
    .wrap_brand h3.vc_custom_heading { font-size: 38px; margin-bottom: 50px;}
    .wrap_brand .wpb_single_image > .wpb_wrapper { text-align: center; }
    .wrap_brand .wpb_single_image { margin-bottom: 40px; }
    .wrap_brand .wpb_single_image img { width: 70%;}
    .wrap_brand .wpb_text_column { width: 100%; }
    .wrap_brand .wpb_text_column p {font-size: 18px} 
    .wrap_aboutus h1.vc_custom_heading { font-size: 40px; }
    .wrap_aboutus { padding-bottom: 70px; }
    .wrap_overview { padding: 50px 0; }
    .wrap_overview > .vc_column_container { width: 100%; }
    .wrap_overview .overview_title > .wpb_wrapper { position: relative; margin-bottom: 20px;}
    .wrap_overview_service .title_service h2.vc_custom_heading { font-size: 32px; }
    .wrap_overview_service .des_service .wpb_text_column p {font-size: 22px;}
    .wrap_banner_gioithieu { padding-bottom: 335px; }
    .wrap_banner_gioithieu .vc_row { padding-top: 150px; padding-bottom: 150px; }
    .single-portfolio .page-top { padding: 170px 0; }
    .wrap_contactus .contact_profile { position: relative; bottom: unset; left: unset; transform: unset;}
    .wrap_contactus .wrap_ggmap:before { display: none; }

    .wrap_footer { justify-content: space-between; }
    .wrap_footer .footer_address { width: 370px; }
    .wrap_footer .footer_address .wpb_text_column { top: 90%; left: 0%;}
    .wrap_footer .footer_address .footer-map-marker { bottom: 20px; left: 50%; }

    #footer .footer-bottom > .container { display: flex; }
    #footer .footer-bottom .footer-left { display: flex; align-items: center; }

}

@media (max-width: 767px) {
    #header .header-main { padding: 0; }
	.wrap_banner .slick-slide .wpb_text_column { font-size: 20px;  padding: 0 80px;}
	.wrap_banner .slick-slide .wpb_text_column p { margin-bottom: 10px; }
    .wrap_intro_clients .bg_intro {display: none;}
	.wrap_intro-home { padding-top: 40px; padding-bottom: 35px; }
    .wrap_client > .vc_column_container { padding-left: 15px; }
	.wrap_client .wpb_text_column { margin-bottom: 10px; }
	.wrap_client h2 { font-size: 26px; }
	.wrap_client h2 span.title-partner { margin-left: 50px; }
    .wrap_brand h3.vc_custom_heading { font-size: 32px; width: 100%; }
    .wrap_brand .wpb_text_column p {font-size: 16px} 
    .wrap_services .services { display: none; }
    .wrap_services .wrap_bg:before { display: none; }
    .wrap_services .wrap_bg .wpb_single_image { position: relative; visibility: visible; opacity: 1; }
    .wrap_services .wrap_bg .wpb_single_image .vc_single_image-wrapper:before { position: absolute; content: ""; background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)); top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: block;}
    .wrap_services .wrap_bg .wpb_single_image h2.wpb_singleimage_heading { display: block; z-index: 3;}
    .wrap_aboutus h1.vc_custom_heading { font-size: 32px; }
    .wrap_overview h2.vc_custom_heading { font-size: 42px; }
    .wrap_overview h3.vc_custom_heading { font-size: 52px; margin-left: 200px; }
    .wrap_overview_service .title_service h2.vc_custom_heading { width: 100%; }
    .wrap_overview_service .des_service .wpb_text_column p { font-size: 20px; }
    .portfolios-grid { padding-top: 0; }
    .portfolios-grid .nav-pills>li:not(:first-child) { margin-left: 8px;  }
    .portfolios-grid .nav-pills>li>a { font-size: 14px; }
    .portfolios-grid .portfolio-item .thumb-info .portfolio_info { opacity: 1; visibility: visible; transform: translate(0, 0); }
    .portfolios-grid .portfolio-item .thumb-info .thumb-info-wrapper:before { top: 50%; background: linear-gradient(0deg, rgba(0,0,0,0.50) 0%, rgba(255,255,255,0) 100%); }
    .portfolios-grid .portfolio-item .thumb-info .thumb-info-wrapper:after { display: none;} 
    .single-portfolio .page-top { padding: 150px 0; }
    .single-portfolio .page-title-wrap h1.page-title { font-size: 28px; }

    .related-portfolios .portfolio-item .thumb-info .portfolio_info { opacity: 1; visibility: visible; transform: translate(0, 0); }

    .wrap_contactus .contact_profile h3.porto-sicon-title { font-size: 30px; margin-bottom: 16px }
    .wrap_contactus .contact_profile .porto-sicon-header p { margin-bottom: 16px; }
    .wrap_contactus .contact_profile .porto-sicon-description ul li { font-size: 18px; }

    .wrap_footer { justify-content: center; }
    .wrap_footer .footer_contact_us h3 { text-align: center; }
    .wrap_footer .footer_contact_us > .vc_column-inner { margin-top: 0; }
    .wrap_footer .footer_contact_us .vc_row > .vc_column_container > .vc_column-inner { justify-content: center; }
    #footer .footer-bottom > .container { display: block; }
}

@media (max-width: 576px) {
    .main-content { padding-top: 0; }
    #header .logo img.standard-logo { width: 80% }
    #header .language .gtranslate_wrapper img { width: 85%; margin-right: 0; }
    #header .mobile-toggle { margin-left: 0; padding: 4px 12px;}
    .wrap_banner .slick-slide .vc_row > .porto-item-wrap > .vc_column_container > .wpb_wrapper > .porto-item-wrap:last-child { margin-top: 25px; }
	.wrap_banner .slick-slide .wpb_text_column { font-size: 16px; padding: 0 30px;}
    .wrap_aboutus h1.vc_custom_heading { font-size: 28px; margin-bottom: 15px;}
    .wrap_aboutus { padding-bottom: 40px; }
    .wrap_overview h2.vc_custom_heading { font-size: 36px; }
    .wrap_overview h3.vc_custom_heading { font-size: 46px; margin-left: 180px; }
    .wrap_overview_service {padding-top: 50px;}

    .portfolios-grid > .container > ul.portfolio-filter { justify-content: center; }
    .single-portfolio .portfolio_info_detail ul { flex-direction: column; }
    .single-portfolio .portfolio_info_detail ul li:not(:last-child) { margin-bottom: 20px;}

    .wrap_contactus .contact_profile h3.porto-sicon-title { font-size: 26px; }
    .wrap_contactus .contact_profile .porto-sicon-header p { font-size: 18px; }
    .wrap_contactus .contact_profile .porto-sicon-description ul li { font-size: 16px; }



@media (max-width: 480px) {
    .vc_btn3-container .vc_btn3 span { font-size: 13px; }
    #header .logo img.standard-logo { width: 70%; } 
	.wrap_banner .slick-slide .wpb_text_column { font-size: 13px; }
    .wrap_intro-home { padding-top: 30px; }
    .wrap_intro-home h3 { font-size: 26px; }
    .wrap_client h2 { font-size: 22px; }
    .wrap_services .wrap_bg .wpb_single_image h2.wpb_singleimage_heading { font-size: 20px; }
    .wrap_brand h3.vc_custom_heading { font-size: 25px; }
    .wrap_aboutus h1.vc_custom_heading { font-size: 22px; }
    .wrap_aboutus .wpb_text_column { font-size: 14px; }
    .wrap_overview { padding: 35px 0; }
    .wrap_overview h2.vc_custom_heading { font-size: 26px; }
    .wrap_overview h3.vc_custom_heading { font-size: 35px; margin-left: 94px; }
    .wrap_overview .porto-sicon-box h3.porto-sicon-title { font-size: 22px; }
    .wrap_overview .overview_title > .wpb_wrapper { margin-bottom: 0; }
    .wrap_overview_service { padding-top: 35px; padding-bottom: 0; }
    .wrap_overview_service .title_service h2.vc_custom_heading { font-size: 26px; margin-bottom: 20px; }
    .wrap_overview_service .des_service .wpb_text_column p { font-size: 18px; }

    .single-portfolio .page-top { padding: 120px 0; }
    .single-portfolio .page-title-wrap h1.page-title { font-size: 22px; }

    .wrap_contactus .contact_profile h3.porto-sicon-title { font-size: 22px; margin-bottom: 5px;}
    .wrap_contactus .contact_profile .porto-sicon-header p { font-size: 16px; margin-bottom: 10px;}
    .wrap_contactus .contact_profile .top-icon .porto-sicon-header { margin-bottom: 10px; }
    .wrap_contactus .contact_profile .porto-sicon-description ul li { font-size: 13px; white-space: break-spaces; line-height: 1.5; }
    .wrap_contactus .wrap_ggmap .map_info_text { font-size: 18px; }

    .wrap_footer .footer_address { width: 320px; }
    .wrap_footer .footer_address .wpb_text_column { top: 80%; left: -8%};

}