/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 18 2024 | 08:40:00 */
.text-h4 {
	font-size: 28px;
	font-weight: 400;
	line-height: 42px;
	text-align: left;
	text-underline-position: from-font;
}
.text-h3{
	font-size: 56px;
	font-weight: 900;
	line-height: 67.2px;
	text-align: left;
	text-underline-position: from-font;
}

.fs-11 {
   font-size: 0.8rem !important; /* bạn có thể điều chỉnh giá trị này */
}

.bg-f2{
	background:#F2F2F2 !important;
}
.main-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 57% !important;
    border-radius: 20px;
    overflow: hidden;
}
.top-bar-row {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
.header .main-menu > li ul.sub-menu {
    margin: 1px 0 0;
    position: absolute;
    top: 115%;
    left: 0;
    width: 265px;
    padding: 25px 31px 25px 37px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    z-index: 4;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -webkit-transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    text-align: left;
}
.header .main-menu > li ul.sub-menu{
    background-color: #00000080 !important;
}
.slider-project {
    overflow: hidden; /* Ẩn các phần tử vượt ra ngoài */
}

.slide-track {
    display: flex; /* Hiển thị các phần tử con theo hàng */
    width: calc(100% * (số lượng phần tử)); /* Tính chiều rộng dựa trên số lượng phần tử */
    /* hoặc */
    /* width: auto; nếu các phần tử có kích thước cố định */
}

.container-mobile{
	display:none;
}
.contact .row .col-5 .card, .sliding-background {
    background: #f8f8f8;
	height:100% !important;
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
    backdrop-filter: blur(12px);
}
.mobile-show-image{
		display:none;
	}
	
.mobile-five-col{
	display:none;
}
.show-mobile{
	display:none;
}
.service-image {
  position: absolute;
  width: 22.5%;
  top:465px;
  left: 40%;
  transform: translateY(150%);
  opacity: 0;
  z-index: 4;
}
.section-1-bg {
  height: 111vh;
}
h4:not(:last-child), .woocommerce-checkout h3:not(:last-child) {
    margin-bottom: 0;
}
.header .main-menu > li > a > .text-active {
    font-weight: 600;
    display: inline-block;
    -webkit-transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
}
.card-white-blur {
  background: transparent;
  height:100%;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
  backdrop-filter: blur(12px);
}
.card-white-blur-contact{
	 background: #f8f8f8;
  height:100%;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
  backdrop-filter: blur(12px);
}
.cube-wrapper {
  position: absolute !important;
  top: 1%;
  left: 22%;
  z-index: 2 !important;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.mouse-middle {
    position: absolute;
    top: -94%;
    left: 49%;
    z-index: 4;
    transform: translate(-50%, -50%);
}
@media (max-width:750px) {
	
	.slider-project{
	width:1500px !important;
	height:100% !important;
}
	
	
	
/* 	cột trangc chủ  */
	    .cot-img {
            width: 100px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .cot-img:hover {
            transform: scale(1.1);
        }
/*         .content {
            margin-top: 20px;
        } */
        .cots-container {
            position: relative;
            height: 250px; /* Đặt chiều cao cho container */
            display: flex;
            justify-content: center;
            align-items: flex-end; /* Căn giữa các trụ cột ở phía dưới */
            margin-bottom: 20px;
        }
        .cot1 { right: 260px;  top:3% ; width: 180px; }
        .cot5 { left: 280px;  top:3% ; width: 180px; }
        .cot3 { width: 250px; top:3% ; left: 102px; }
        .cot2 { top:510px ; right: 230px; }
        .cot4 { top:510px ; left: 230px; }
	
	
	
	
	
	
	
	
	
	
	.container-mobile{
	display:block;
}
	.slide-sidebar-wrapper {
	  position: fixed;
	  top: 0;
	  bottom: 0;
	  z-index: 10;
	  width: 0 !important;
	  margin: unset;
	  background-image: unset; 
	  -webkit-border-radius: unset; 
	  border-radius: unset;
	  background-color: white !important;
	}
	#weAreHomeNest{
		width:100% !important;
		margin-top: 580px !important;
		margin-left:10px !important;
	}
	#cube-animation-5 , #hostingWrapper , #brandingWrapper , #softwareWrapper  , #marketingWrapper , #designWrapper , #homenestDetail , .mouse-middle , #cube5 , .whitegray-blur-bottom , #weAreHomeNest , .mobile-hidden {
		display:none !important;
	}
	.section1-homenest{
	  padding-left: 10px !important;
	  padding-right: 32px !important;
	}
	.d-flex.homnest-design.mt-4.justify-content-around {
		display: flex;
		flex-wrap: wrap;
	}
	.card-white-blur {
    background: transparent;
    height: 100%;
    border: 3px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
    backdrop-filter: blur(12px);
}
	.mobile-text-uppercase{
		text-transform:uppercase;
	}
/* 	các khối lập di chuyển  */
	.cube-wrapper {
    position: absolute !important;
    top: 355px;
    left: 307px;
    z-index: 99 !important;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
	#cube2, #cube-animation-2 {
    width: 110px !important;
    height: 400px !important;
    position: relative;
}
	#cube1, #cube-animation-1 {
    width: 40px !important;
    height: 120px !important;
    position: absolute !important;
    left: 12% !important;
    top: -2% !important;
}
	#cube3, #cube-animation-3 {
    width: 50px !important;
    height: 200px !important;
    position: absolute;
    top: 17% !important;
    left: -18% !important;
}
	#cube4, #cube-animation-4 {
    width: 50px !important;
    height: 100px !important;
    position: absolute;
    right: 3% !important;
    top: 19% !important;
}
	#cube6, #cube-animation-6 {
    width: 50px !important;
    height: 50px !important;
    position: absolute;
    top: 10% !important;
    right: -17% !important;
}
	.mobile-five-col{
	display:block;
}
/* 	mobile provide  */
	.mobile-provide{
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		padding-top: 3rem !important; 
		padding-bottom: 0 !important;
	} 
	.plr1-tb0{
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		padding-top: 0 !important; 
		padding-bottom: 0 !important;
	} 
	.p-lrtb0{
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-top: 0 !important; 
		padding-bottom: 0 !important;
	} 
	.bantay{
		top: 100px !important; 
	}
	.mobile-provide-row{
		margin-top: 1rem !important;
   		margin-bottom: 3rem !important;
	}
	.mobile-provide .row .col-7{
		width:100% !important;
	}

	.mobile-provide .row .col-5{
		width:100% !important;
	}
	.counter, .fs-large {
		font-size: 30px !important;
		letter-spacing: 0 !important;
	}
	.image-provide{
		padding-left: 1rem !important; 
		padding-right: 1rem !important;
	}
/* 	mobile counter section  */
	.counter-homenest .col-3{
		width:50% !important;
	}
/* 	service domain  */
	.service-domain .row .col-5{
		width:100% !important;
	}
	.fs-big{
		font-size:36px !important;
		margin-bottom: 0 !important;
	}
	.fs-small{
		font-size:24px !important;
		margin-bottom: 15px !important
	}
	.fs-4 {
		font-size: calc(1.2rem + .3vw) !important;
	}
	.service-domain .col-6{
				width:100% !important;
	}
	.service-domain-dwrap .card{
		flex-wrap: wrap;
		justify-content: flex-start !important;
		padding: 15px !important;
		gap:10px;
	}
	.service-domain-dwrap .mx-3{
		margin-right: 0 !important; 
        margin-left: 0 !important;
	}
	.card, .sliding-background {
		background: transparent;
		height: 100%;
		border: 1px solid rgba(255, 255, 255, 0.65);
		box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
		backdrop-filter: blur(12px);
	}
	.pt-pb-0{
		padding-top: 0 !important;
   		padding-bottom: 0 !important;
	}
	.hienthuchoaytuong .hoaytuong {
		flex-wrap:wrap !important
	}
	.mobile-fs24 {
		font-size:22px !important;
	}
	.logan-img {
    margin:5px !important;
    width: 100px;
}
	.hidden-mobile{
		display:none !important;
	}
	.show-mobile{
	display:block !important;
}
	.menu{
		width:70% !important
 
	}
	.box-homenest{
		display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-end;
		 overflow-y: hidden;            /* Kích hoạt cuộn ngang */
  white-space: nowrap;         /* Đảm bảo các phần tử không bị ngắt dòng */
	}
	.fs-28{
		font-size:28px !important;
	}
	.about .col-6{
		width:100% !important
	}
	.about .col-3{
		margin-top: 50px !important;
		width:100% !important
	}
	.mobile-about img{
		top: -70% !important;
   		right: -271% !important;
	}
	.contrau{
		width: 70% !important;
        right: -2% !important;
        top: 108% !important;
		transform: translateX(-0.761551px) !important;
    }
	.mobile-w230{
		border-left:3px solid #67b0ff !important;
		width:230px !important;
	}
	.mobile-items-start {
		display:flex !important;
		align-items:start !important;
	}
	.residual .text-end {
		text-align: left !important;
		padding : 0 !important;
	}
	.residual .col-7 , .residual .col-5{
		width:100% !important
	}
	#valuable {
		margin-top: 50px !important;
	}
	.image-collage {
    position: relative;
    width: 550px !important;
    height: 385px !important;
    margin: 0 auto;
    margin-left: -15%;
}
	.mobile-show-image{
		display:block !important;
	}
	.mbt-0{
		margin : 0 !important;
	}
	.quytrinh .col-4{
		width:100% !important
	}
	.mobile-mt30 {
		margin-top:30px !important;
	}
	.mobile-text-center{
		text-align:center !important;
	}
	.image-vision{
		position: absolute;
    right: 0px !important;
    width: 160px !important;
	}
	.vision-bg .col-5{
		width:100% !important;
	}
	.vision-bg .col-5 .full-mobile{
		width:100% !important;
		margin-left: 0px !important;
	}
	.mascot{
		position: relative;
		margin-top:30px !important;
        width: 463px !important;
        height: 445px !important;
        margin: 0 auto;
        margin-left: -15%;
	}
	.slider::before, .slider::after {
		background: none !important;
		content: "";
		height: 100px;
		position: absolute;
		width: 250px;
		z-index: 2;
	}
	
	.mobile-fs18{
		font-size:18px !important;
	}
	.wiki .title-wiki {
		display:flex !important;
		justify-content: space-between !important;
		align-items: start !important;
	}
	.wiki .col-4{
		width:100% !important;
	}
	.wiki .py-4 {
		padding-top: 1.5rem !important;
		padding-bottom: 0rem !important;
	}
	.mobile-pb-2{
		padding-bottom: 1rem !important;
	}
	.mobile-pt-2{
		padding-top: 1rem !important;
	}
	.border-end {
		border-bottom: 1px solid #e3e3e3 !important;
	}
	.contact .col-5 , .contact .col-7{
		width:100% !important;
	}
	.mobile-flex-wrap {
		display:flex !important; flex-wrap:wrap !important; gap:6px;margin-bottom: 10px !important;
	}
		.mobile-flex-wrap .me-2 {
			margin-right: 0rem !important;
	}
	.mobile-justify-content-center{
		display:flex;justify-content:center !important
	}
	.mobile-fs32{
		font-size:32px !important;
	}
	.cursor2 , .cursor {
		opacity:0 !important;
		display:none !important;
	}
	p.py-2.fs-5.fw-light.lh-base {
    text-align: justify;
    width: 355px;
    height: 130px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
	.prev-next-mobile{
		padding: 10px; top: 270px;
	}
/* -------------------------------------------------------------------------	Footer  ----------------------------------------------------------------------------- */
	.homenest-footer .col-3{
		width:100% !important;
	}
	
}