/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

@font-face {
    font-family: Gilroy;
    src: url(../font/Gilroy/SVN-Gilroy\ Regular.otf);
   
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    font-family: Gilroy;
}

a{
    text-decoration: none;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: normal;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


img{
    width: 100%;
}

/* CSS */
.maxheight-480{
    max-height: 300px;
}
.overflow-hiden{
    overflow: hidden;
}
.banner-product{
	position: relative;
}
.setting-list-nav{
	padding-top: 8px;
    padding-bottom: 8px;
}
.nav-list-product-two .accordion-item .accordion-button{
		padding: 20px 10px;
}
.nav-list-product-two{
	margin-top: 20px;
}
.nav-list-product .accordion-button{
	padding: 10px;
}
.title-nav-list{
	padding: 10px;
	--tw-bg-opacity: 1;
    background-color: rgba(18, 18, 18, var(--tw-bg-opacity));
	color: #fff;
}
.accordion-button:not(.collapsed){
	background-color:transparent;
}
.setting-list-nav a{
	color: #333;
}

.title-banner-product{
	padding-bottom: 175px;
	width: 50%;
	margin: auto;
	text-align: center;
}
.title-banner-product h1{
	font-size: 52px;
}
.title-banner-product p{
	margin-top: 20px;
	font-size: 18px;
}
.title-banner-product{
	color: #fff;
}
.mg-top-24{
	margin-top: 24px;
}
.list-duong-dan{
	display: flex;
	gap: 20px;
}
.font-Hotel-Colline{
	font-family: Hotel Colline, sans-serif;
}
.text-gray-400 li a {
    --tw-text-opacity: 1;
    color: rgba(180, 181, 184, var(--tw-text-opacity));
}
.text-gray-400 li a:hover{
	--tw-text-opacity: 1;
    color: rgba(229, 100, 0, var(--tw-text-opacity));
}
.list-duong-dan li:last-child {
    --tw-text-opacity: 1;
    color: rgba(90, 90, 90, var(--tw-text-opacity));
}
.font-semibold {
    font-weight: 600;
}
.duration-500 {
    transition-duration: 500ms;
}
.mg-top-40{
	margin-top: 40px;
}
.categories .btn-secondary{
	background-color: none;
}
.border-bottom{
	border-bottom: 1px;
}
.setting-product{
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 66px;
}
.setting-product .col-span-3{
	grid-column: span 3 / span 3;
}
.setting-product .col-span-9{
	grid-column: span 9 / span 9;
}
.list-san-pham{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 56px;
}
.content-product{
	padding-top: 16px;
}
.content-product p{
	margin: 0px;
    text-align: center;
    font-size: 14px;
    line-height: normal;
    --tw-text-opacity: 1;
    color: rgba(112, 112, 112, var(--tw-text-opacity));
}
.content-product h5{
	text-align: center;
    font-family: Hotel Colline, sans-serif;
    font-size: 16px;
    line-height: normal;
    --tw-text-opacity: 1;
    color: rgba(0, 0, 0, var(--tw-text-opacity));
}
.opacity-0 {
    opacity: 0;
}
.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgba(18, 18, 18, var(--tw-bg-opacity));
}
.w-full {
    width: 100%;
}
.h-full {
    height: 100%;
}
.top-0 {
    top: 0px;
}
.absolute {
    position: absolute;
}
.relative{
	position: relative;
}
.group-product:hover .group-hover-opacity-50{
	opacity: 0.5 !important;
}
.group-product:hover .group-hover-opacity-100{
	opacity: 1 !important;
}
.setting-click{
	top: 0;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 0px 17px;
	flex-direction: column;
	gap: 10px;
}
.setting-button-click{
	padding-top: 12px;
    padding-bottom: 12px;
	line-height: normal;
	font-size: 14px;
	transition: all 0.3;
}
.setting-click .setting-button-click:hover	{
	/* background-color: #fff;
	color: #333 !important;
	border: 1px solid #333 !important; */
}
.hover-border-gray-800:hover {
    --tw-border-opacity: 1;
    border-color: rgba(18, 18, 18, var(--tw-border-opacity)) !important;
}
.hover-text-gray-800:hover{
	--tw-text-opacity: 1;
    color: rgba(18, 18, 18, var(--tw-text-opacity)) !important;
}
.hover-bg-white:hover{
	--tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
}
.text-black{
	color: #333;
}
.border-black{
	border:1px solid #333;
}
.bg-white{
	background-color: #fff;
}
.hover-border-white:hover{
	border: 1px solid #fff !important;
}
.hover-text-white:hover{
	color: #fff !important;
}
.hover-bg-black:hover{
	background-color: #333 !important;
}
.justify-center{
	justify-content: center;
}
.gap-10{
	gap: 10px;
}
.mg-top-64{
	margin-top: 64px;
}
.page-link{
	--tw-text-opacity: 1;
    color: rgba(112, 112, 112, var(--tw-text-opacity));
	border: none;
}
.page-link:focus{
	--tw-text-opacity: 1;
	color: #fff;
	--tw-bg-opacity: 1;
	background-color: rgba(18, 18, 18, var(--tw-bg-opacity));
}
.page-link:hover {
	--tw-bg-opacity: 1;
	background-color: rgba(18, 18, 18, var(--tw-bg-opacity));
	--tw-text-opacity: 1;
    color: #fff;

}
.form-check-fillter .form-check-input{
	width: 24px;
	height: 24px;
	margin-top: 0;
}
.form-check-fillter{
	display: flex;
	align-items: center;
	gap: 15px;
}
.ds-flex{
	display: flex;
	flex-direction: column;
	gap:10px;

}
.grid{
	display: grid;
}
.grid-coloum-3{
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gap-16{
	gap: 16px;
}
.pd-right-20{
	padding-right: 20px;
}
.w-56{
	width: 56px;
}
.h-56{
	height: 56px;
}
.pd-5{
	padding: 5px;
}
.cursor-pointer {
    cursor: pointer;
}
.hover-border-gray-300:hover{
	--tw-border-opacity: 1;
	border: 1px solid;
    border-color: rgba(217, 218, 219, var(--tw-border-opacity));
}
.rounded-full{
	border-radius: 9999px;
}
.w-46{
	width: 46px;
}
.linear-background--banner {
    background: linear-gradient(180deg,transparent 64.52%,rgba(0,0,0,.7));
}
.navigate-boxShadow{
	box-shadow: 0 0 30px rgba(22,21,21,.4);
}
.rounded-sm{
	border-radius: 0.125rem;
}
.right-0{
	right: 0;
}
.z-index-200{
	z-index: 200;
}
.w-35{
	width: 35px;
}
.h-35{
	height: 35px;
}
.setting-nuxt-link{
	padding: 11px 24px;
}
.flex{
	display: flex;
}
.align-center{
	align-items: center;
}
.font-bold{
	font-weight: bold;
}
.justify-end{
	justify-content: end;
}
.fixed{
	position: fixed;;
}
.fill-current {
    fill: currentColor;
}
.bg-gray-800{
	--tw-bg-opacity: 1;
    background-color: rgba(18, 18, 18, var(--tw-bg-opacity)) !important;
}

.setting-nuxt-link:hover .bg-white-hover{
	background-color: #fff !important;
}
.setting-nuxt-link .text-white{
	--bs-text-opacity: 1;
    color: rgba(var(--bs-white-rgb),var(--bs-text-opacity));
}
.ds-flex-row{
	display: flex;
}
.flex-wrap{
	flex-wrap: wrap;
}
.stroke-current {
    stroke: currentColor;
}
.pd-8-16{
	padding: 8px 16px;
}
.gap-20{
	gap: 20px;
}
.button-select svg{
width: 30px;
height: 30px;
}
.button-select button{
	border: none;
	background-color: transparent;
}
.bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgba(236, 236, 237, var(--tw-bg-opacity));
}
.mg-bottom-40{
	margin-bottom: 40px;
}
.hidden{
	display: none;
}
.banner-product img{
	
    width: 100%;
    object-fit: cover;
    height: 100%;

}
.product-select-mobile .bg-button-select{
	--tw-bg-opacity: 1;
    background-color: rgba(18, 18, 18, var(--tw-bg-opacity)) !important;
}
.bg-button-select:hover{
	background-color: #fff !important;
	color: #333;
}
.setting-color-product .mg-auto{
	margin: auto;
}
.maxheight-810{
	max-height: 810px;
}
/* CSS Dự Án */
.banner-du-an{
	position: relative;
}
.title-banner-du-an{
	padding-bottom: 58px;
	color: #fff;
}
.title-banner-du-an h1 {
    font-size: 52px;
}
.title-banner-du-an p {
    margin-top: 20px;
    font-size: 18px;
}
.linear-background--banner-duan{
	background: linear-gradient(180deg,transparent 2.52%,rgba(0,0,0,.7));
}
.mg-top-88{
	margin-top: 88px;
}
.mg-bottom-56{
	margin-bottom: 56px;
}
.mg-top-8{
	margin-top: 8px;
}
.mg-bottom-8{
	margin-bottom: 8px;
}
.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgba(112, 112, 112, var(--tw-text-opacity));
}
.grid-colum-3{
	grid-template-columns: repeat(3 , minmax(0, 1fr));
}
.gap-32{
	gap: 32px;
}
.setting-intro-du-an .intro-du-an{
	padding: 0px 17px;
}
.setting-intro-du-an{
	line-height: normal;
}
.block{
	display: block;
}
.img-du-an img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hinh-anh-masp{
	text-align: center;
}
.mg-topbottom-56{
	margin: 56px 0px;
}
.border-gap{
	border-top: 1px solid #D9DADB;
}
.text-intro-du-an{
	width: 70%;
    margin: auto;
    line-height: normal;
}
.swiper {

  }
  .setting-list-img img{

	height: 100%;
	object-fit: cover;
	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .aspect-h-2 {
    --tw-aspect-h: 2;
}
.aspect-w-3 {
    --tw-aspect-w: 3;
	position: relative;
    padding-bottom: 60%;
}
.swiper {
	/* width: 100%; */
	padding-top: 50px;
	padding-bottom: 50px;
  }
  
  .swiper-wrapper {
	padding-left: initial;
	margin: 0;
  }
  
  .swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	width: 500px;
	height: 300px;
	display: flex;
	align-items: center;
  }
  .swiper-wrapper .swiper-slide:hover{
	scale: 1.05;
  }
  .transition-0-3{
	transition: all 0.3s !important;
  }
  .center-text{
    top: calc(29% + 40px);
    --tw-translate-y: -50%;
    transform:rotate(-90deg);

  }
  .right-6rem{
	right: -6rem;
  }
  .banner-text-responsive{
	font-size: 140px;
  }
  .text-stroke{
	-webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
  }
  .h-100{
	height: 100vh !important;
  }
  .text-uppcase{
	text-transform: uppercase;
  }
  .banner-du-an img{
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
  .pd-16-20{
	padding: 16px 20px;
  }
  .ds-in-block{
	display: inline-block;
  }
  .text-button-dang-ki{
	color: #fff;
	border: 1px solid #fff;
	margin-top: 28px;
	transition: all 0.3s;
  }
  .text-button-dang-ki:hover{
	background-color: black;
  }

/* CSS Projects */
.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.setting-navbar .nav-item{
	display: flex;
	align-items: center;
	justify-content: center;
}
.setting-navbar .nav-item a{
	padding: 8px 16px;
}

.bg-gray-50 {
	--tw-bg-opacity: 1;
	background-color: rgba(247, 247, 247, var(--tw-bg-opacity));
}
.mg-bottom-55{
	margin-bottom: 55px;
}
.setting-navbar li a{
	--tw-text-opacity: 1;
    color: rgba(152, 152, 152, var(--tw-text-opacity));
}

.nav li {
    --c: #121212;
    color: var(--c);
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
    font-family: sans-serif;
    letter-spacing: 0.1em;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.5s;
    margin: 1em;
}
.setting-navbar li:hover{
	border: 1px solid #fff;
}
.setting-navbar li:hover a{
	color: #fff;
}
.grid-col-3{
	grid-template-columns: repeat(3,minmax(0,1fr));
}
.gap-32{
	gap: 32px;
}
.ds-block{
	display: block;
}
.nav li button span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: var(--c);
    transform: translateY(150%);
    border-radius: 50%;
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    transition-delay: calc((var(--n) - 1) * 0.1s);
    z-index: -1;
}
.navbar-project .nav-link{
	padding: 16px 24px;
	color: #9E9E9E;
}
.navbar-project .nav-link:hover{
	color: #fff;
}
.nav  li button:hover {
    color: black;

}
.navbar-project .nav-tabs{
	justify-content: center;

}

.nav li button:hover span {
    transform: translateY(0) scale(2);
}

.nav li button span:nth-child(1) {
    --n: 1;
}

.nav  li button span:nth-child(2) {
    --n: 2;
}

.nav  li button span:nth-child(3) {
    --n: 3;
}

.nav  li button span:nth-child(4) {
    --n: 4;
}




.nav li .active  span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: var(--c);
    transform: translateY(150%);
    border-radius: 50%;
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    transition-delay: calc((var(--n) - 1) * 0.1s);
    z-index: -1;
}
.navbar-project .nav-link{
	padding: 16px 24px;
	color: #9E9E9E;
}
.navbar-project .nav-link:hover{
	color: #fff;
}
.nav  li .active {
    color: #fff !important;
	background-color: #000 !important;

}
.navbar-project .nav-tabs{
	justify-content: center;
	
}

.nav li .active span {
    transform: translateY(0) scale(2);
}

.nav li .active span:nth-child(1) {
    --n: 1;
}

.nav  li .active span:nth-child(2) {
    --n: 2;
}

.nav  li .active span:nth-child(3) {
    --n: 3;
}

.nav  li .active span:nth-child(4) {
    --n: 4;
}
.relative{
	position: relative;
}


/* Sản phẩm */
#nav-tab-project .title-box-section{
    margin: auto;
    text-align: center;
    margin-bottom: 32px;
}

#nav-tab-project .project-item{

}

#nav-tab-project .product-inner{
    width: auto;
    height: 405px;
    position: relative;
    overflow: hidden;
}


#nav-tab-project .product-inner .product-img{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
}

#nav-tab-project .product-inner .product-img img{ 
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#nav-tab-project .product-info .product-info-category span{
    color: #fff;
    font-size: 16px
}

#nav-tab-project .product-info .product-info-code span{
    color: #fff;
    font-size: 14px;
    transition: all 0.3s linear;
}

#nav-tab-project .product-info .product-info-code .code:hover{
    color: #E56400;
    transition: all 0.3s linear;
}

#nav-tab-project .product-info .product-info-code span{
    cursor: pointer;
}


#nav-tab-project .product-info .product-info-category{
    margin-bottom: 4px;
}

#nav-tab-project .product-info .product-info-title{
    margin-bottom: 4px;
}

#nav-tab-project .product-info .product-info-title a{
    color: #fff;
    font-size: 24px;
    line-height: normal;
    transition: all 0.3s linear;
}

#nav-tab-project .product-info .product-info-title a:hover{
    color: #E56400;
}


#nav-tab-project .product-info .product-info-button{
    color: #000;
    padding: 16px 36px;
    background-color: #fff;;
    border: 1px solid #fff;
    transition: all 0.3s linear;
    display: block;
    text-align: center;
    margin-top: 16px;

}

#nav-tab-project .product-info .product-info-button:hover{
    background-color: #000;;
    color: #fff;
    transition: all 0.3s linear;
}


#nav-tab-project .product-info{
    bottom: 0;
    right: 0;
    left: 0;
    position: absolute;
    padding: 24px;
    padding-top: 0;
    transform: translateY(75px);
    transition: all 0.3s linear;
	z-index: 3;

}

#nav-tab-project .project-item:hover .product-info{
    transform: translateY(0);
    transition: all 0.3s linear;
}

#nav-tab-project .product-overlay{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    background: linear-gradient(179.92deg,transparent 48.04%,rgba(0,0,0,.6) 80.91%);
    z-index: 2;
}

/* CSS Product Details */

.wrapper {
	display: flex;
	height: 100vh;
	width: 600px;
	height: 400px;
	margin: 10px auto;
  }
  
  .img-left,
  .img-right {
	flex: 1 1 auto;
	border: 1px solid dimgray;
	max-width: 50%;
  }
  
  .img-left {
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  .img-left > img {
	width: 100%;
	height: auto;
	pointer-events: none;
  }
  
  .img-right {
	position: relative;
	overflow: hidden;
  }
  
  .img-inner {
	position: absolute;
	width: 400%;
	height: 400%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: center;
	align-items: center;
  }
  .img-inner > img {
	width: 100%;
	height: auto;
  }
  .name-product h3{
	font-size: 32px;
  }
  .text-gray-700 {
    --tw-text-opacity: 1;
    color: rgba(90, 90, 90, var(--tw-text-opacity));
}
.mg-bottom-4{
	margin-bottom: 4px;
}
.price-product{
	display: flex;
	gap: 10px;
}
.price-product{
	font-size: 20px;
}
.mg-bottom-6{
	margin-bottom: 6px;
}
.name-product{
	line-height: normal;
}
.intro-product{
	line-height: normal;
	/* width: 307px; */
}
.thong-so-product-details .intro-product{
	width: 307px;
}
.list-san-pham .setting-click{
	height: 100%;
}
.list-san-pham .img-product img{
	display: block;
}
.justify-space{
	justify-content: space-between;
}
.mg-top-16{
	margin-top: 16px;
}
.pd-left-48{
	padding-left: 48px;
}
.max-w-480{
	max-width: 480px;
}
.intro-product-details .description{
	display: flex;
	gap: 60px;
	line-height: normal;
}
.mg-bottom-20{
	margin-bottom: 20px;
}
.thong-so-product{
	padding-bottom: 20px;
	border-bottom: 1px solid #333;
}
.button-product-details{
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 16px;
}
.button-product-details button{
	padding: 16px 0px;
}
.mg-bottom-24{
	margin-bottom: 24px;
}
.button-gio{
	background-color: #121212;
	color: #fff;
	font-weight: bold;
}
.button-yeu-cau{
	border:1px solid #989898;
	color: #989898;
	background-color: #fff;
	font-weight: bold;
}
.button-yeu-cau:hover{
	background-color: #121212;
	color: #fff;	
}
.h-100{
	height: 100%;
}
/* Mafiny */
.img-zoom-container {
	position: relative;
	height: 100%;
  }
  
  .img-zoom-lens {
	position: absolute;
	border: 1px solid #d4d4d4;
	/*set the size of the lens:*/
	width: 40%;
	height: 40%;
  }
  .pd-img-zoom{
	padding: 32px;
	border: 1px solid #989898;
	height: 100%;
  }
  .img-zoom-result {
	border: 1px solid #d4d4d4;
	/*set the size of the result div:*/
	width: 100%;
	height: 100%;
	right:-102%;
	top:0px;
	position:absolute;
	display:none;
	background-repeat: no-repeat ;

  }
#myimage{
	width: 100%;
	height: 100%;
}
.hover-text-primary:hover {
    --tw-text-opacity: 1;
    color: rgba(229, 100, 0, var(--tw-text-opacity));
}
.mg-left-16{
	margin-left: 16px;
}
.icon-facebook-twiter{
	display: flex;
    left: 29%;
    position: absolute;
    bottom: -10px;
    align-items: center;
    background-color: #fff;
    padding: 0px 16px;
}
.height-540{
	height: 540px;
}
.intro-product-details{
	margin-bottom: 150px;
}
.titel-related{
	margin-bottom: 32px;
}
.swiper-related .setting-click{
	height: 100%;
}
#related-products{
	margin-bottom: 40px;
}
.swiper-related .button-swiper::after{
	font-size: 25px;
}
.swiper-related .button-swiper{
	width: 40px;
	height: 40px;
	border-radius: 30px;
}
.swiper-related .swiper-button-disabled{
	background-color: aliceblue !important;
	display: none;
}
.swiper-related .img-product{
	height: 320px;
}
.swiper-related .img-product img{
	height: 100%;
	object-fit: cover;
	object-position: bottom;
}
.titel-related{
	font-size: 32px;
}
.img-zoom-mobile{
	display: none;
}
.swiper-related .swiper-wrapper .swiper-slide:hover{
	scale: 1;
}
.intro-news-main .blog-news .blog-news-main{
	font-size: 16px;
	font-weight: bold;
	color: #727272;
}
.border-news-main{
	padding: 0px 8px;
	border-bottom: 1px solid #727272;
}
.time-news-main{
	color: #727272;
	font-size: 16px;
}
.text-new-main .title-news-main{
	font-size: 24px;
	margin-bottom: 32px;
}
.description-news-main{
	font-size: 16px;
	color: #989898;
}
.intro-news-main{
	line-height: normal;
}
.blog-news{
	margin-bottom: 8px;
	display: flex;
	gap: 5px;
	align-items: center;
}
.text-new-main{
	border-bottom: 1px solid #727272;
	padding-bottom: 15px;
	margin-bottom: 30px;
}
.button-news-main{
	padding: 12px 36px;
}
#new-main{
	margin-bottom: 128px;
}
.one-news-main .hover-underline {
    background-size: 0 100%;
    background-image: linear-gradient(180deg,transparent 88%,#121212 0);
}
.one-news-main:hover .hover-underline {
    background-size: 100% 100%;
}
.ease-linear {
    transition-timing-function: linear;
}
.list-library .library-item .hover-underline {
    background-size: 0 100%;
    background-image: linear-gradient(180deg,transparent 88%,#121212 0);
}
.list-library .library-item:hover .hover-underline {
    background-size: 100% 100%;
}
.duration-700{
	transition-duration: 700ms;
}
.setting-img-library{
	padding-bottom: 60%;
	position: relative;
}
.setting-img-library img{
	position: absolute;
	height: 100%;
	object-fit: cover;
}
.mg-top-20{
	margin-top: 20px;
}
.library-item .title-news-main{
	margin-bottom: 10px;
}
.ds-block{
	display: block;
}
.library-item{
	line-height: normal;
}
.list-library .library-item:hover .image-list-library img {
	scale: 1.1;
}
.image-list-library img{
	transition-duration: 700ms;
}
.list-library .title-news-main{
	color: #1E1E1E;
	font-weight: bold;
}
.bg-no-repeat{
	background-repeat: no-repeat;
}
  .text-new-main{
	border: none;
}
.list-library .library-item .blog-news-main{
	gap: 5px;
}

.list-library .library-item:hover .hover-left {
    position: relative;
    display: flex;
    --tw-text-opacity: 1;
    color: rgba(112, 112, 112, var(--tw-text-opacity));
    transition-duration: 700ms;
}
.list-library .library-item:hover .hover-left--category {
    --tw-translate-x: -100%;
    transform: var(--tw-transform);
    transform: var(--tw-transform);
    transition-duration: 700ms;
}
.button-news-main:hover{
	background-color: #121212;
	color: #fff;
}
.one-news-main .title-news-main{
	margin-bottom: 32px;
	color: #121212;
	font-weight: bold;
}
.one-news-main .description-news-main{
	margin-top: 32px;
	font-style: italic;
}
.one-news-main .text-new-main{
	border-bottom: 1px solid #989898;
}
 @media (max-width: 1400px){
		.container {
			max-width: 1024px;
			padding-right: 5rem;
			padding-left: 5rem;
		} 
	 .setting-product{
		gap: 32px;
	}
	.list-san-pham{
		gap: 39px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.form-check-fillter{
		gap: 10px;
	}
	.nav-list-product .accordion-body, .nav-list-product-two .accordion-body{
		padding: 10px;
	}
	.img-product-details{
		width: 43%;
	} 
	.thong-so-product-details{
		width: 57%;
	}
 } 
@media (max-width:1024px){
	.container{
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		padding-right: 1rem;
		padding-left: 1rem;
	}
	.intro-product-details{
		margin-bottom: 100px;
	}
	.list-product .grid-col-3{
		grid-template-columns: repeat(2,minmax(0,1fr)) !important;
	}
	.setting-text-banner-rotate{
		display: none;
	}
	.list-product .gap-32{
		gap:22px
	}
	.banner-product{
		max-height: 80vh;
		height: 100vh;
	}
	.list-san-pham{
		gap: 27px;
		/* grid-template-columns: repeat(3, minmax(0, 1fr)); */
		grid-template-columns:1fr 1fr !important;
		
	}
	.setting-product{
		gap: 22px;;
	}
	/* .container {
		max-width: 768px;
	} */
	.title-banner-product{
		padding-bottom: 20px;
	}
	.max-h-80vh{
		max-height: 80vh;
	}
	.nav-list-product-two .accordion-body{
		padding: 10px 0px;
	}
	.nav-list-product-two .accordion-body .gap-16{
		gap: 9px;
	}
	.aspect-w-3{
		padding-bottom: 70%;
	}
	#nav-tab-project .product-inner{
		height: 267px;
	}
	.one-news-main .img-news-main , .one-news-main .intro-news-main{
		width: 100%;
	}

}

/* @media (min-width:425px){
	.list-san-pham{
		gap: 20px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.setting-product{
		display: block;
	}
	.setting-product .product-select-laptop{
		/* display: none; */
	/* } */
	/* .product-select-mobile{
		margin-bottom: 20px;
		text-align: center;
	}
	.list-duong-dan .breadcrumb-item{
		font-size: 14px;
	}
	.list-duong-dan{
		gap: 0;
	} */
/* } */ 
@media (max-width:767px){
	.list-san-pham{
		gap: 20px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.setting-product{
		display: block;
	}
	.setting-product .product-select-laptop{
		display: none;
	}
	.product-select-mobile{
		margin-bottom: 20px;
		text-align: center;
	}
	.list-duong-dan .breadcrumb-item{
		font-size: 14px;
	}
	.list-duong-dan{
		gap: 0;
	}
	.product-select-mobile{
		display: block;
	}
	.container{
		max-width: 640px;
	}
	.duong-dan-product .breadcrumb-item{
		margin-bottom: 20px;
	}
	.intro-product{
		margin-top: 20px;
	}
	.banner-product{
		max-height: 70vh;
    height: 100vh;
	}
	.title-banner-product {
		padding-bottom: 48px;
		width: 100%;
	}
	.nav-list-product-two .accordion-body{
		padding: 20px;
	}
	.setting-intro-du-an{
		display: block;
	}
	.text-intro-du-an{
		width: 100%;
	}
	.swiper-button-next , .swiper-button-prev{
		display: none !important;
	}
	.title-banner-du-an h1 {
		font-size: 36px;
	}
	#nav-tab-project .grid-col-3{
		grid-template-columns: 1fr !important;
	}
	#nav-tab-project .product-inner{
		height: 608px;
	}
	.img-product-details{
		width: 100%;
	} 
	.thong-so-product-details{
		width: 100%;
		margin-top: 30px;
	}
	.icon-facebook-twiter{
		position: initial;
		justify-content: center;
		margin-top: 20px;
	}
	.intro-product-details .description{
		flex-direction: column;
		gap:15px
	}
	.intro-product-details{
		margin-bottom: 80px;
	}
	.img-zoom-desktop{
		display: none;
	}
	.img-zoom-mobile{
		display: block;
	}
	.thong-so-product-details{
		padding-left: 12px;
	}
	.list-library .grid-col-3{
		grid-template-columns: repeat(2,1fr) !important;
	}

}

@media (max-width:639px){
	.container{
		max-width: 420px;
	}
	.title-banner-du-an h1 {
		font-size: 24px;
	}
	.title-banner-du-an p {
		font-size: 16px;
	}
	#nav-tab-project .product-inner{
		height: 388px;
	}
	.swiper-related .img-product{
		height: 210px;
	}
	.list-library .description-news-main{
		font-size: 11px;
	}
	.list-library .title-news-main{
		font-size: 13px;
	}

}

@media (max-width:500px){
	.navbar-project .nav-tabs{
		display: block;
	}
	.navbar-project .nav-tabs button{
		width: 100%;
	}
}
@media (max-width:424px){
	.button-product-details{
		grid-template-columns: 1fr;
	}
	.list-library .grid-col-3{
		grid-template-columns: 1fr !important;
	}
}

@media (max-width:350px){
	#nav-tab-project .product-inner{
		height: 318px;
	}
}

@media (max-width:350px){
	.swiper-related .img-product{
		height: 170px;
	}
	.thong-so-product-details .intro-product .justify-space{
		justify-content: initial;
		gap: 20px;
	}
	.thong-so-product-details .thong-so-product{
		overflow: hidden;
	}
}










@media (min-width: 1400px){
	.container {
		max-width: 1440px;
		padding: 0 80px;
}.title-banner-product {
    padding-bottom: 120px;
}
.nav-list-product .accordion-body, .nav-list-product-two .accordion-body{
	padding: 20px 10px;
}
.nav-list-product-two .align-center{
	align-items: start;
}
.list-san-pham {
    gap: 56px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
}

/* Bổ sung code */

.swiper-du-an-details{
	margin-bottom: 120px;
}