/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 03 2024 | 09:08:06 */
.uxb-wrapper .slider-container .swiper-slide {display:none;}
.uxb-wrapper .slider-container .swiper-slide:first-child {display:block}



.loading-site .page-loader{opacity: 1 !important;}
.mfp-ready .mfp-close {opacity: 1;}
.mfp-wrap .mfp-close {background: var(--primary-color);height: 60px;width: 60px;mix-blend-mode: normal;}

@media (min-width:850px) {
	.mfp-bg.off-canvas {opacity:0}
	.off-canvas, .off-canvas .mfp-content {overflow: visible !important;}
	.off-canvas {max-width: 70vw;left: auto;right:0;transform: translatex(0);height: 90px;}
	.off-canvas .mfp-close {top: 15px;}
	.off-canvas .mfp-content {width: 100%;background: #2d2d32;box-shadow: none;}
	.off-canvas .sidebar-menu {padding:0;}
	.off-canvas .sidebar-menu > .nav.nav-vertical {flex-flow:row;justify-content: flex-end;padding-right: 60px;padding-top:0;}
	.off-canvas .sidebar-menu > .nav.nav-vertical li {width: auto;border: 0;background: transparent;}
	.off-canvas .sidebar-menu > .nav-vertical>li>a {padding: 10px 20px !important;height:80px;color: #fff;letter-spacing: 2px;font-weight: normal;}
	.off-canvas .sidebar-menu > .nav-vertical>li.active>a, .off-canvas .nav-vertical>li>a:hover {color:  var(--primary-color)}
	
	.off-canvas .sidebar-menu > .nav-vertical>li.current-dropdown>.nav-dropdown {width: max-content;top: 90px;border: 0;box-shadow: none;left: auto;right: -90px;max-width:1000px}
	
	
	
	.off-canvas .sidebar-menu .sub-menu .tabbed-content {}
	.off-canvas .sidebar-menu .sub-menu .tabbed-content .nav {background-color: #DADDDF;align-items: flex-start;padding: 30px 0;width: 30%;}
	.off-canvas .sidebar-menu .sub-menu .tabbed-content .nav li {width: 100%;margin: 0;padding: 0;}
	.off-canvas .sidebar-menu .sub-menu .tabbed-content .nav li a {padding: 10px 25px;font-size: 16px;font-weight: normal;color: #000;letter-spacing: 1px;}
	.off-canvas .sidebar-menu .sub-menu .tabbed-content .nav li.active a {background: #000;color: #fff;}
	.off-canvas .sidebar-menu .sub-menu .tabbed-content .tab-panels {padding: 30px 0px;color: #191919;}
	.off-canvas .sidebar-menu .sub-menu .tabbed-content .tab-panels .title-service {border-bottom: 1px solid #191919;padding: 10px 0;margin-bottom:20px;margin-left:10px;margin-right:10px}
	.off-canvas .sidebar-menu .sub-menu .tabbed-content .tab-panels .icon-box-text {padding-left:10px;}
	.off-canvas .sidebar-menu .sub-menu .tabbed-content .tab-panels .icon-box h3 {font-size:18px;color: #000;}
	.off-canvas .sidebar-menu .sub-menu .tabbed-content .tab-panels .icon-box p {font-size: 15px;}
	.off-canvas .sidebar-menu .sub-menu .tabbed-content .tab-panels .col {padding-bottom:15px;}
	
}




/* Light Box */
.mfp-container, .lightbox-content .section {padding: 0 !important;}
.lightbox-content {overflow: hidden;max-height: 100vh;}
.dark .ux-menu-link__link:hover {color: var(--primary-color) !important}


/* .section-content {top: 45px;} */
.banner .intro-title h2 {line-height: 1.3}
.intro-title p {font-size:16px;}
.intro-title h2 strong {color: var(--primary-color)}
.col-pb-0 > .col, .pb-0 {padding-bottom:0}
.about-home .icon-box {padding: 15px;background: #e6e6e6;border-radius:15px;}
.about-home .icon-box p {margin-bottom:0;}
.about-home .icon-box span {font-size: 2.3em;font-weight: 700;}

.our-service > .col {padding: 0}
.our-service > .col.our-service-right {padding-top: 178px;}
.izi-title-1 {position: relative;width: fit-content;font-size: 3em;font-weight: 500;margin-bottom: 0;padding-bottom: 90px;}
.izi-title-1.text-right {margin-left:auto;}
.izi-title-1.subright .subtitle {margin-left:auto;}
.izi-title-1 span, .izi-title-2 span {display: block;width: fit-content;background: #000;color: #fff;padding: 15px 20px;    height: 90px;line-height: 60px;}
.izi-title-1 span.subtitle, .izi-title-2 span.subtitle {background: var(--primary-color)}
.izi-title-1:after, .izi-title-2:after {position: absolute;content: "\f178";width: 90px;height: 90px;font-family: 'Font Awesome 5 Free';font-weight: 900;text-align: center;background: #777;color: #fff;line-height: 90px;}
.izi-title-1:after {right: 0;}
.izi-title-2 {position: relative;font-size: 2em;font-weight: 500;display: flex;flex-direction: column;font-size: 2em;align-items: flex-end;}
.izi-title-2:after {top:0;left:0;}
.izi-title-2 span {width: calc(100% - 90px);text-align: right;}
.izi-title-2 span.subtitle {width: 100%;}

.list-service {margin: 0 !important;}
.list-service .col {padding: 2px;}

.list-service .col-inner {background: #fff;transition: 0.3s all;}
.list-service h3 {margin-bottom:0;}
.list-service a {padding: 0px 30px;width: 100%;display: flex;height: 90px;flex-direction: column;justify-content: center;}
.list-service .col-inner:hover {background: var(--primary-color)}
.list-service .col-inner:hover a {color: #fff}


.service-home h3 {color: #777;}
.service-home a.ux-menu-link__link {color: #000;font-size: 23px;line-height: 1;min-height: auto;font-weight: 500;}
.service-home a.ux-menu-link__link:hover {color: var(--primary-color)}






.slick-arrow {position:absolute;padding:0;font-size:0;opacity: 0.8;padding: 5px;width: 40px;height: 40px;background: #000;border-radius: 40px;line-height: 30px;z-index: 9;color: #fff;}
.slick-arrow:before {font-family: "Font Awesome 6 Free";font-weight: 900;font-size: 20px;}
.slick-arrow:hover {opacity:1;}
.slick-arrow.slick-prev:before {content: "\f104";}
.slick-arrow.slick-next:before {content: "\f105";}

.arrows-inside .slick-arrow {top: 50%;transform: translateY(-50%)}
.arrows-inside .slick-arrow.slick-next {right:0;}

.arrows-top-right .slick-arrow {top: -50px;right:10px;}
.arrows-top-right .slick-arrow.slick-prev {right:60px}





#wrapper #header {position:fixed;border-bottom: 1px solid #555;}
.slider-nav-reveal .flickity-prev-next-button, .slider-nav-reveal .flickity-prev-next-button:hover {height: 30px;min-height:30px;top:50%;border: 1px solid;}
.slider-nav-reveal.slider-nav-light .flickity-prev-next-button .arrow, .slider-nav-reveal.slider-nav-light .flickity-prev-next-button svg {fill: #000;}
.slider-nav-reveal.slider-nav-dark .flickity-prev-next-button .arrow, .slider-nav-reveal.slider-nav-dark .flickity-prev-next-button svg {fill: #fff;}
.slider-nav-reveal.slider-nav-dark .flickity-prev-next-button {background-color: #2D2D32;}

.arrow-bottom .slick-arrow {position: absolute;bottom: 0;width: 150px;height: 60px;line-height: 60px;background: #2D2D32;color: #999;font-size: 11px;letter-spacing: 2px;margin: 0;z-index:1;border: 0;font-weight: normal;}
.arrow-bottom .slick-arrow:after {position:absolute;content:'';width: 100%;height:0;bottom:0;left:0;background-color: var(--primary-color);transition: 0.3s height;z-index: -1;}
.arrow-bottom .slick-arrow:hover:after {height: 100%}
.arrow-bottom .slick-arrow:hover {color: #fff;}
.arrow-bottom .slick-arrow i {transition: 0.3s all;line-height: 2}
.arrow-bottom .slick-arrow.slick-prev {right:151px;}
.arrow-bottom .slick-arrow.slick-next {right:0;}
.arrow-bottom .number-dots {position: absolute;top:50%;right:10px;margin-bottom: 0;transform: translateY(-50%);}
.arrow-bottom .number-dots li {list-style:none;opacity:0.7;}
.arrow-bottom .number-dots li.slick-active {opacity:1;}

.arrow-bottom-right .slider-nav-reveal .flickity-prev-next-button, .arrow-bottom-right .slider-nav-reveal .flickity-prev-next-button:hover {top:auto;bottom:0 !important;width: 60px;height:40px;}
.arrow-bottom-right .slider-nav-reveal .flickity-prev-next-button.previous {left: auto !important;right: 61px !important}
.arrow-bottom-right .slider-nav-reveal .flickity-prev-next-button.next {right: 0 !important}
/* CSS ************/
.absolute-footer, .tooltipster-base {display:none !important}
.header-hotline {display: flex;align-items: center;}
.header-hotline li {padding-left: 40px;position: relative;list-style: none;margin: 0 10px;letter-spacing: 4px;font-size: 10px;text-transform: uppercase;}
.header-hotline li:before {position:absolute; content: '';width: 30px;height: 2px;background: var(--primary-color);left: 0;top: 50%; transform: translatey(-50%)}
.header-hotline span {opacity: 0.5;}
.header-hotline a {color: #fff;}

.left-panel {position: fixed;top: 90px;left: 0;width: 90px;bottom: 0;z-index: 99;background: #2D2D32;-webkit-transform: translate3d(0,0,0);border-right: 1px solid #555;}
.horizonral-subtitle {position: absolute;left: 40px;top: 150px;}
.horizonral-subtitle h1 {position: absolute;left: -170px;text-transform: uppercase;font-weight: 400;font-size: 10px;letter-spacing: 4px;padding: 10px 0;width: 350px;top: 0;text-align: center;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);color: rgba(255, 255, 255, 0.31);text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.horizonral-subtitle h1:before {content: '';position: absolute;width: 190px;right: -40px;height: 100%;top: 0;background: rgba(255, 255, 255, 0.04);}
.left-panel_social {position: absolute;bottom: 110px;left: 50%;margin-left: -20px;width: 40px;}
.left-panel_social a {width: 40px;height: 40px;line-height: 40px;box-sizing: border-box;display: inline-table;border: 1px solid rgba(255, 255, 255, 0.08);border-top: none;position: relative;text-align: center;margin: 0 !important;}
.left-panel_social a:first-child {border-top: 1px solid rgba(255, 255, 255, 0.08)}
.left-panel_social a:before, .social-icons a:before{content: '';position: absolute;left: 0;width: 0;height: 100%;top: 0;background: rgba(255, 255, 255, 0.08);z-index: 1;-webkit-transition: all 200ms ease-out;transition: all 200ms ease-out;}
.left-panel_social a:hover:before, .social-icons a:hover:before {width: 100%;}
.left-panel_social a:hover {color: currentColor;}

/* Blog Archive */
.blog-archive .khach-hang .post-date, .blog-archive .khach-hang .entry-content, .blog-archive .khach-hang .entry-meta, .blog-archive .khach-hang .entry-divider {display:none;}
/* .blog-wrapper {padding-top:90px;} */
.blog-archive > .row > .large-10 {flex-basis: 100%;max-width: 100%;}
.blog-archive #post-list {display:flex;flex-flow: row wrap;}
.blog-archive #post-list > article {flex-basis: 20%;max-width: 20%;padding:10px}
.blog-archive #post-list > article .entry-header {display: flex;flex-flow:column-reverse;}
.blog-archive #post-list > article .entry-header .entry-header-text-top {padding:0;}
.blog-archive #post-list > article .entry-header h2 {font-size:18px;min-height:47px;margin-bottom:0}
.blog-archive #post-list > article .article-inner {position: relative;border-top: 12px solid #555;border-bottom: 12px solid #555;border-left: 12px solid #000;border-right: 12px solid #000;background: #fff;width: 100%;border-radius: 30px;padding: 15px;}
.blog-archive #post-list > article .article-inner:before {position: absolute;content: '';height: 32px;width: 30px;top: -19px;left: 25px;right: 0;margin: auto;background: url(https://truongxuan.net/wp-content/uploads/2023/08/icon-ghim.png) no-repeat;}

/** Fullpage **/
#fullpage > .section {padding: 0 !important}

#menu-fullpage {position:fixed;top:0;left:0;height: 40px;z-index: 70;width: 100%;padding: 0;margin:0;}
#menu-fullpage li {display:inline-block;margin: 10px;color: #000;background:#fff;background: rgba(255,255,255, 0.5);-webkit-border-radius: 10px;border-radius: 10px;}
#menu-fullpage li:hover{background: rgba(255,255,255, 0.8);}
#menu-fullpage li a{text-decoration:none;color: #000;}
#menu-fullpage li a,#menu-fullpage li.active a{padding: 9px 18px;display:block;}
#menu-fullpage li.active{background:#666;background: rgba(0,0,0, 0.5);color: #fff;}
#menu-fullpage li.active a{color: #fff;}
#menu-fullpage li.active a:hover{color: #000;}


/* Hero Slider */
.section-content:has(.hero-slider) {position: absolute !important;top:0;}
.uxb-wrapper .section-content:has(.hero-slider) {position:relative !important;height: 100vh;}
.uxb-wrapper .hero-slider .swiper-slide {display:none;}
.uxb-wrapper .hero-slider .swiper-slide:first-child {display:block}

.uxb-wrapper .section-content {height: calc(100vh - 90px)}
.hero-slider-container{position:relative;top:90px;left: 0;}
.hero-slider-container::before, .hero-slider-container::after {position:absolute;content: '';width: 50px;height: 50px;border-left: 1px solid rgba(255, 255, 255, .11);left: 50px;}
.hero-slider-container::before {top: 50px;border-top: 1px solid rgba(255, 255, 255, .11);}
.hero-slider-container::after {bottom: 100px;border-bottom: 1px solid rgba(255, 255, 255, .11);}

.hero-slider-content {background: #333;overflow: hidden;}
.option-panel {position:absolute;left:0;height:60px;bottom:0;z-index:10;background:#2d2d32;width:50%;overflow:hidden}
.option-panel:before{content:'';position:absolute;width:30%;left:30px;top:10px;bottom:10px;z-index:-1;background:rgba(255,255,255,.04)}
.option-panel .swiper-counter{position:relative;font-weight:700;font-size:12px;color:#999;width:100%;text-align: center;}
.option-panel .swiper-counter div{position:absolute;top:13px;width:32px;height:32px;line-height:32px}
.option-panel .swiper-counter div#current{right:40px}
.option-panel .swiper-counter div#total{right:10px}
.option-panel .swiper-counter div#total:before{content:'';position:absolute;left:-3px;width:6px;height:1px;top:50%;background:var(--primary-color)}

.option-panel .slide-progress-container{position:absolute;height:1px;z-index:3;bottom:30px;right:100px;left:70px}
.option-panel .slide-progress-warp{float:left;position:relative;height:1px;background:rgba(255,255,255,.41);z-index:10;bottom:0;width:100%}
.option-panel .slide-progress{position:absolute;top:50%;left:0;height:1px;border-radius:6px;margin-top:-1px;width:0;max-width:100%;background: var(--primary-color);}

.hero-slider-wrap{position:absolute;z-index:3;height:100%;width:100%}
.swiper-slide-content{position:absolute;left:15%;z-index:10;top:29%}
.swiper-slide-content h2:before {content:'';position:absolute;left:0;top:-60px;height:2px;width:50px;background:var(--primary-color)}
.swiper-slide-content h2 {position:relative;color:#fff;}
.swiper-slide-content h2 span, .swiper-slide-content h2 strong {color:var(--primary-color)}
.swiper-slide-content p {max-width:550px;color:#fff;}

.hero-slider_control-wrap{position:absolute;bottom:0;right:0;z-index:100}
.hero-slider_control{float:right;font-weight:400;font-size:10px;color:#999;cursor:pointer;width:150px;height:60px;line-height:60px;background:#2d2d32;position:relative;text-align: center;text-transform:uppercase;letter-spacing:2px}
.hero-slider_control:before{content:'';position:absolute;left:0;bottom:0;height:0;width:100%;z-index:1;-webkit-transition:.2s linear;transition:.1s linear}
.hero-slider_control span{position:relative;z-index:2}
.hero-slider_control i{color:#fff;-webkit-transition:.2s linear;transition:.2s linear 0.3s;padding:0 0 0 15px}
.hero-slider_control:hover{color:#fff}
.hero-slider_control.hero-slider-button-prev{border-right:1px solid rgba(255,255,255,.08)}
.hero-slider_control.hero-slider-button-prev i{padding:0 15px 0 0}
.hero-slider_control.hero-slider-button-next:hover i{padding:0 0 0 25px}
.hero-slider_control.hero-slider-button-prev:hover i{padding:0 25px 0 0}

.fs-gallery-wrap {height:100%}

.hlaf-slider-pag{width: auto;height: 100%;position: absolute;top: 0;right: 40px;display: flex;flex-direction: column;justify-content: center;z-index: 99;}
.hlaf-slider-pag .swiper-pagination-bullet{width:50px;height:20px;margin-bottom:10px;cursor: pointer;}
.hero-slider-wrap_pagination .swiper-pagination-bullet:before{content:'';position:absolute;left:0;height:1px;top:50%;background:#fff;width:0;-webkit-transition:.2s linear;transition:.2s linear}
.hero-slider-wrap_pagination .swiper-pagination-bullet:after{content:'01';position:absolute;left:30px;right:0;bottom:0;top:0;color:#fff;transform:scale(.7);transition:.1s linear;opacity:.7}
.hero-slider-wrap_pagination .swiper-pagination-bullet:nth-child(2):after{content:'02'}
.hero-slider-wrap_pagination .swiper-pagination-bullet:nth-child(3):after{content:'03'}
.hero-slider-wrap_pagination .swiper-pagination-bullet:nth-child(4):after{content:'04'}
.hero-slider-wrap_pagination .swiper-pagination-bullet:nth-child(5):after{content:'05'}

.hero-slider-wrap_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after{opacity:1;transform:scale(1)}
.hero-slider-wrap_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before,.hero-slider-wrap_pagination .swiper-pagination-bullet:hover:before{width:20px}

.hero-slider-img{position:relative;right:0;left:30%;height:calc(100vh - 90px);top:0;z-index:2}
.hero-slider-img .swiper-slide img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;object-fit: cover;}
.hero-slider-img .swiper-slide::after {position:absolute;content:'';width: 100%;height:100%;top:0;left:0;background:rgba(45,45,50,.51);z-index:3}

.slider-lines{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;opacity:1}
.slider-lines .line-item{float:left;width:20%;box-sizing:border-box;border-right:1px solid rgba(255,255,255,.1);height:100%;position:relative}
.slider-lines .line-item:first-child{border-left:1px solid rgba(255,255,255,.1)}
.slider-lines .lines-container,.swiper-container,.swiper-slide,.swiper-wrapper{width:100%;height:100%}

.swiper-container{position:relative;margin:0 auto;overflow:hidden;list-style:none;padding:0;z-index:1}
.swiper-wrapper{position:relative;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;position:relative;-webkit-transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform,-webkit-transform}
.fs-gallery-wrap .swiper-slide{position:relative;width:auto;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}
.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}
.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
	


.service-name .subtitle {font-size:16px;}
.service-content .subtitle {font-size: 24px;}


/* Page */












@media only screen and (max-width:1280px) {
	.blog-archive #post-list > article {flex-basis: 25%;max-width: 25%;}
}

@media only screen and (max-width:849px) {
/* 	#main {padding-top:70px} */
	.left-panel {display: none !important}
	.blog-archive #post-list > article {flex-basis: 33.3333%;max-width: 33.3333%;}
	
	.about-home .section-content {padding:70px 0 0 !important;}
	.about-home .icon-box-img {width:50px !important;margin-bottom:0;}
	.about-home .icon-box p {font-size:14px;}
	.about-home .icon-box h3 {display:none;}
	
/* 	.about-home .section-content, .service-home .section-content {padding-top:70px;} */
	.service-home a.ux-menu-link__link {font-size:18px;}
	.service-home .izi-box .col {padding-bottom:10px;}
	
	
	
}

@media only screen and (max-width:549px) {
	.hlaf-slider-pag {display:none;}
	.hero-slider-container {top:70px}
	.hero-slider-img {height: calc(100svh - 70px);}
	
	
	
	.option-panel {width: calc(100% - 121px);}
	.hero-slider {top:70px;height:calc(100svh - 70px)}
	.hero-slider_control {width: 60px;letter-spacing: 0;}
	.hero-slider_control span {font-size:0;}
	.hero-slider_control i, .hero-slider_control.hero-slider-button-next:hover i {padding: 0 !important;font-size:16px;}
	.blog-archive #post-list > article {flex-basis: 100%;max-width: 100%;}
	
	.our-service > .col {padding: 0 10px;}
	.izi-title-1 {font-size:1.6em;margin-right: 2px;}
	.our-service > .col.our-service-right {padding-top: 0;}
	.izi-title-2 span {font-size:0.9em}
	.izi-title-2 span.subtitle {font-size: 0.8em;}
	.list-service a {padding: 15px;height: 130px;}
	.list-service h3 {font-size:18px;}
	.list-service h3 .subtitle {font-size:14px;}
}

@media only screen and (max-width:350px) {
	.izi-title-1 {font-size:1.3em;}
}