html, body{position:relative; top: 0px; left: 0px; width: 100%; height: auto; min-height: 100%; font-family: "Be Vietnam Pro", system-ui, sans-serif; font-weight: 300; font-size: 16px; overflow-x:hidden; overflow-y:auto; background: #fff;}
form{position:relative; top: 0px; left: 0px; width: 100%; height: auto; min-height: 100%;}
section{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 50px 0px; margin: 0px;}
section .subtitle{position:relative; top: 0px; left: 0px; width: max-content; height: auto; padding: 5px 15px; margin: 0px 0px 16px 0px; border-radius: 20px; font-weight: 500; background-color: rgb(240, 253, 244); color: rgb(22, 101, 52);}
section h1{position:relative; top: 0px; left: 0px; width: max-content; height: auto; max-width: 100%; padding: 0px; margin: 0px 0px 24px 0px; font-family: "Playfair Display"; font-size: 48px; line-height: 58px; font-weight: 700;}
section h1 span{position:relative; top: 0px; left: 0px; width: auto; height: auto; display: inline;}
section h1 span:last-child{color: rgb(22, 101, 52);}
section h2{position:relative; top: 0px; left: 0px; width: auto; height: auto; font-family: "Playfair Display"; font-size: 30px; line-height: 36px;}
section h3{position:relative; top: 0px; left: 0px; width: auto; height: auto; font-family: "Playfair Display"; font-size: 24px; line-height: 30px;}
section > .container > p{position:relative; top: 0px; left: 0px; width: auto; height: auto; padding: 0px; margin: 0px; color: rgb(100, 116, 139); font-size: 18px; line-height: 28px;}
a{position:relative; top: 0px; left: 0px; width: max-content; height:auto; color: rgb(22, 101, 52); line-height: 22px;}
a:hover{color: rgb(22, 101, 52);}
a.active{background-color: rgb(22, 101, 52); color: #fff; display: inline-grid; grid-template-columns: 1fr max-content; grid-gap: 10px;}
a.active:after{content: "\f178"; position:relative; top: 0px; left: 0px; font-weight: 300; font-family: "Font Awesome 5 Pro"; padding-right: 5px; padding-left: 0px; transition: 0.3s;}
a.active:hover:after{padding-right: 0px; padding-left: 5px;}

.container { position: relative; top: 0px; left: 0px; width: 95%; height: auto; max-width: 1380px; padding: 0px 15px; margin: 0px auto; }

.main{position:relative; top: 0px; left: 0px; width: 100%; height: auto; min-height: 100%; padding: 0px; margin: 0px;}
.main .main-body{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 0px; margin: 0px;}
.top-menu{position:fixed; top: 0px; left: 0px; width: 100%; height: auto; background-color: transparent; padding: 20px 0px; margin: 0px; border-bottom: 0px; transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; z-index:5; color: #fff;}
.top-menu:before{content: ""; position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient( to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) ); background-color: transparent; transition: 0.5s;}
.top-menu:after{content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 5px; transition: 0.1s; background: #fff; z-index: -1;}
.top-menu.active{background: #fff; padding: 5px 0px; border-bottom: 1px solid rgb(226, 232, 240); box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;}
.top-menu.active:before{background: #fff;}
.top-menu.active .container > ul > li > a{color: #000;}
.top-menu.active .container > ul > li > a:hover{color: rgb(22, 101, 52);}
.top-menu.active .container > .logo::before{color: rgb(22, 101, 52);}
.top-menu.active .container > a:last-of-type{background-color: rgb(20, 83, 45); box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px; color: #fff;}
.top-menu.active .container > a:last-of-type:hover{background-color: rgb(22, 101, 52); box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;}
.top-menu.active .container .search{border-color: rgb(22, 101, 52); color: rgb(22, 101, 52);}
.top-menu.active .container .search:hover{background-color: rgb(22, 101, 52); color: #fff;}
.top-menu.load-completed:after{opacity: 0; transform:translateY(-100%);}

.top-menu .container{ grid-template-columns: max-content 1fr max-content max-content;}
.top-menu .container > .logo{position:relative; top: 0px; left: 0px; width: max-content; height: 48px; padding: 0px 0px 0px 50px; background-image: url(../images/xanh-ky-son-logo.png); background-repeat: no-repeat; background-size: 48px; background-position: left center; display: grid; grid-template-columns: max-content max-content; grid-gap: 5px; align-content: center; align-items: center; cursor: pointer;}
.top-menu .container > .logo::before{content: "Xanh"; position:relative; top: 0px; left: 0px; font-weight: 700; text-transform: uppercase; color: #fff; font-size: 18px; line-height: 24px; letter-spacing: 1px;}
.top-menu .container > .logo::after{content: "Kỳ Sơn"; position:relative; top: 0px; left: 0px; text-transform: uppercase; color: #45a63f; font-size: 16px; line-height: 24px; letter-spacing: 1px;}

.top-menu .container > a:last-of-type{position:relative; top: 0px; left: 0px; width: max-content; height: auto; padding: 8px 20px; border-radius: 20px; background-color: #fff; color: rgb(22, 101, 52); border: 0px; font-weight: 400; display:grid; grid-template-columns: max-content 1fr; grid-gap: 10px; align-content: center; align-items: center;}
.top-menu .container > a:last-of-type:hover{background-color: rgb(240, 253, 244);}
.top-menu .container > a:last-of-type:before{content: "\f879"; position:relative; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.top-menu .container .search{position:relative; top: 0px; left: 0px; width: 32px; height: 32px; transition: 0.5s; border-radius: 50%; border: 1px solid #fff; cursor: pointer; display: grid; grid-template-columns: 1fr; align-content: center; align-items:center; text-align: center;}
.top-menu .container .search:before{content: "\f002"; position:relative; font-weight: 300; font-family: "Font Awesome 5 Pro"; font-size: 14px;}
.top-menu .container .search:hover{border-color: rgb(22, 101, 52); background-color: rgb(22, 101, 52); color: #fff;}

.top-menu .container > ul{display: grid; grid-auto-columns: max-content; grid-auto-flow: column; grid-gap: 20px; align-content:center; align-items: center; align-self:center; justify-content:center;}
.top-menu .container > ul > li:not(:last-child){display: block; margin-right: 0px; vertical-align: unset;}
.top-menu .container > ul > li > a{text-transform: unset; font-weight: 400; font-size: 16px; color: #fff; letter-spacing: 1px; border: 0px; border-radius: 0px;}
.top-menu .container > ul > li > a:hover{color: #fff; background-color: transparent;}
.top-menu .container > ul > li > a::after{content: ""; position:absolute; top: auto; left: 50%; bottom: 8px; width: 0px; height: 2px; background-color: currentColor; display: block; border-radius: 2px; transform:translateX(-50%); transition: 0.3s;}
.top-menu .container > ul > li > a:hover::after{width: calc(100% - 10px);}

.slider{height: 100vh; aspect-ratio: unset;}
.slider > .slide .slick-arrow{top:auto; bottom: 20px; left:auto; right: 110px; transform: unset;}
.slider > .slide .slick-arrow.slick-next{right: 50px;}
.slider .slick-list{height: 100%;}
.slider .slick-list .slick-track{height: 100%;}
.slider .slick-list .slick-track .item .comnet{display: none;}
.slider .slick-list:before{content: ""; position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; filter: opacity(0.7); -webkit-filter: opacity(0.7); -moz-filter: opacity(0.7); background: linear-gradient(  90deg,  rgba(18,88,48,.75) 0%,  rgba(18,88,48,.55) 35%,  rgba(18,88,48,.15) 70%,  transparent 100%); z-index: 2;}
.slider > .slide > .comment{position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow:hidden; display: grid; grid-template-columns: 1fr; align-items: center; z-index: 2; transition: 0.5s;}
.slider > .slide > .comment:empty{opacity: 0;}

.slider .slide .slide-item-list .slick-dots li button:before{color: #fff;}
.slider .slide .slide-item-list .slick-dots li.slick-active button:before{color: #00a53e;}

.slider > .slide > .comment span{position:relative; top: 0px; left: 0px; width: max-content; height: auto; padding: 8px 15px; border-radius: 20px; background-color: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgb(134, 239, 172);}
.slider > .slide > .comment h1{position:relative; top: 0px; left: 0px; width: auto; height: auto; font-family: "Playfair Display"; font-size: 60px; line-height: 75px; color: #fff; letter-spacing: 2px;}
.slider > .slide > .comment p{position:relative; top: 0px; left: 0px; width: auto; height: auto; margin: 20px 0px; font-size: 18px; line-height: 28px; font-weight: 300; letter-spacing: 1px; color: #fff;}
.slider > .slide > .comment a{position:relative; top: 0px; left: 0px; width: auto; height: auto; padding: 10px 20px; transition: 0.3s; font-weight: 400; border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.45); color: #fff; display:inline-block; vertical-align: middle;}
.slider > .slide > .comment a:hover{background-color: rgba(255, 255, 255, 0.25);}
.slider > .slide > .comment a:not(:first-of-type){margin-left: 20px;}
.slider > .slide > .comment a:first-of-type{background-color: #fff; border-color: #fff; color: rgb(22, 101, 52); display: inline-grid; grid-template-columns: 1fr max-content; grid-gap: 5px; align-items: center;}
.slider > .slide > .comment a:first-of-type::after{content: "\f061"; position:relative; top: 0px; left: 0px; font-family: "Font Awesome 5 Pro"; font-weight: 400; transition: 0.3s; padding-left: 0px; padding-right: 5px;}
.slider > .slide > .comment a:first-of-type:hover{background-color: rgb(22, 101, 52); color: #fff; border-color: rgb(22, 101, 52);}
.slider > .slide > .comment a:first-of-type:hover::after{padding-left: 5px; padding-right: 0px;}

.home-about-us{padding-bottom: 0px;}
.home-about-us > .container > *{transition: 1s;}
.home-about-us.showcase-animation > .container > *{opacity: 0;}
.home-about-us.showcase-animation .subtitle{transform: translateX(-100%);}
.home-about-us.showcase-animation h1{transform:translateY(50%);}
.home-about-us.showcase-animation p{transform:translateY(100%);}

.home-about-us .article-property > *{transition: 1s;}
.home-about-us .article-property.showcase-animation  > *{opacity: 0; transform:translateY(50%);}
.home-about-us .company-summary > .item:nth-child(1){transition: 1s;}
.home-about-us .company-summary > .item:nth-child(2){transition: 1.5s;}
.home-about-us .company-summary > .item:nth-child(3){transition: 2s;}
.home-about-us .company-summary > .item:nth-child(4){transition: 2.5s;}
.home-about-us .company-summary.showcase-animation > *{opacity: 0;}
.home-about-us .company-summary.showcase-animation > *{transform: scale(0);}

.home-about-us a{padding: 10px 15px; border-radius: 22px; border: 1px solid rgb(22, 101, 52);}
.home-about-us h1, .home-about-us .container > p{width: 60%;}
.home-about-us .article-property{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 64px 0px; margin: 0px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 80px;}
.home-about-us .article-property .info{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; display: grid; grid-auto-flow:row; grid-template-rows: max-content; grid-gap: 20px;}
.home-about-us .article-property .info > div{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 10px 15px 10px 78px; margin: 0px; border-radius: 15px; background-color: rgba(250, 250, 250, 0.35);}
.home-about-us .article-property .info > div:before{content: ""; position:absolute; top: 10px; left: 15px; width: 48px; height: 48px; border-radius: 50%; background-color: rgb(240, 253, 244); color: rgb(22, 101, 52); font-weight: 300; font-size: 20px; font-family: "Font Awesome 5 Pro"; display: grid; grid-template-columns: 1fr; align-content: center; align-items: center; text-align: center;}
.home-about-us .article-property .info > div.company-name:before{content: "\f1ad";}
.home-about-us .article-property .info > div.company-address:before{content: "\f606";}
.home-about-us .article-property .info > div.company-mobile:before{content: "\f879";}
.home-about-us .article-property .info > div.company-email:before{content: "\f0e0";}

.home-about-us .article-property .info > div:hover{background-color: rgba(240, 253, 244, 0.35);}
.home-about-us .article-property .info > div span{position:relative; top: 0px; left: 0px; width: 100%; height: auto; display: block;}
.home-about-us .article-property .info > div span:first-child{color: rgb(100, 116, 139);}
.home-about-us .article-property .info > div span:not(:first-child){font-weight: 500; font-size: 18px;}
.home-about-us .article-property .info > div:first-child span:last-child{color: rgb(100, 116, 139); font-weight: 300; font-size: 16px;}
.home-about-us .article-property .info > div:has(a){background-color: transparent; padding: 0px;}
.home-about-us .article-property .info > div:has(a):before{display: none;}
.home-about-us .article-property .info > div:has(a):hover{background-color: transparent;}
.home-about-us .avatar{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 30px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px;}
.home-about-us .avatar img{position:relative; top: 0px; left: 0px; width: 100%; height: auto; aspect-ratio: 3/4; border-radius: 15px;}
.home-about-us .avatar img:first-child{transform:translateY(-30px);}
.home-about-us .avatar img:last-child{transform: translateY(30px);}
.home-about-us .avatar div{position:absolute; top: auto; left: 50%; bottom: 30px; width: 50%; height: 104px; transform: translateX(-50%); background: #fff; padding: 0px 0px 0px 90px; margin: 0px; text-align: left; display: grid; grid-auto-flow: row; grid-auto-rows: max-content; grid-gap: 5px; align-content: center; align-items: center; border-radius: 15px; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;}
.home-about-us .avatar div:before{content: "\f5a2"; position:absolute; top: 50%; left: 20px; width: 60px; height: 60px; transform: translateY(-50%); border-radius: 50%; font-weight: 300; font-size: 28px; font-family: "Font Awesome 5 Pro"; background-color: rgb(240, 253, 244); color: rgb(22, 101, 52); display: grid; grid-template-columns: 1fr; align-content:center; align-items: center; text-align: center;}
.home-about-us .avatar div span{position:relative; top: 0px; left: 0px; width: 100%; height: auto; display: block;}
.home-about-us .avatar div span:first-child{font-weight: 700; font-size: 24px;}
.home-about-us .avatar div span:last-child{color: rgb(100, 116, 139); font-size: 18px;}

.home-about-us .company-summary{position: relative; top: 0px; left: 0px; width: 100%; height: auto; border-top: 1px solid rgb(226, 232, 240); padding: 50px 0px; margin: 30px 0px; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; align-content: center; text-align: center; align-items: center;}
.home-about-us .company-summary .item{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; display: grid; grid-auto-flow: row; grid-auto-rows: max-content; align-content: center; align-items: center; text-align: center;}
.home-about-us .company-summary .item:before{content: ""; position:relative; top: 0px; left: 0px; width: 64px; height: 64px; transition: 0.5s; border-radius: 15px; font-size: 28px; font-weight: 300; font-family: "Font Awesome 5 Pro"; background-color: rgb(240, 253, 244); color: rgb(22, 101, 52); padding: 0px; margin: 0px auto 15px auto; display: inline-grid; grid-template-columns: 1fr; align-content: center; align-items: center; text-align: center;}
.home-about-us .company-summary .item:hover:before{color: #fff; background-color: rgb(22, 101, 52);}
.home-about-us .company-summary .item:first-child:before{content: "\f5a2";}
.home-about-us .company-summary .item:nth-child(2):before{content: "\f1ad";}
.home-about-us .company-summary .item:nth-child(3):before{content: "\f0c0";}
.home-about-us .company-summary .item:nth-child(4):before{content: "\f0f2";}
.home-about-us .company-summary .item span{position:relative; top: 0px; left: 0px; width: 100%; height: auto;}
.home-about-us .company-summary .item span:first-child{font-size: 36px; font-weight: bold; line-height: 48px;}
.home-about-us .company-summary .item spanspan:last-child{color: rgb(100, 116, 139); font-size: 24px;}

.home-project .subtitle, .home-project h1, .home-project .sologan, .home-project .prj-info{transition: 1s;}
.home-project.showcase-animation .subtitle, .home-project.showcase-animation .sologan{opacity: 0; transform:translateY(100%);}
.home-project.showcase-animation h1{opacity: 0; transform: translateY(50%);}
.home-project.showcase-animation .prj-info{opacity: 0; transform: scale(0.5);}

.home-project a{padding: 10px 15px; border-radius: 22px; border: 1px solid rgb(22, 101, 52); transition: 0.5s;}
.home-project a:not(.active):hover{background-color: rgb(240, 253, 244);}

.home-project .prj-image > div:nth-child(1){transition: 1s;}
.home-project .prj-image > div:nth-child(2){transition: 1.5s;}
.home-project .prj-image > div:nth-child(3){transition: 2s;}
.home-project .prj-image > div:nth-child(4){transition: 2.5s;}
.home-project .prj-image.showcase-animation > *{opacity: 0;}
.home-project .prj-image.showcase-animation > *{transform: scale(0);}

.home-project .subtitle{margin-left: auto; margin-right: auto; display: block;}
.home-project h1{text-align:center; width: 100%;}
.home-project h1 span{display: block;}
.home-project .sologan{position:relative; top: 0px; left: 0px; width: 55%; height: auto; font-size: 18px; color: rgb(100, 116, 139); text-align: center; padding: 0px; margin: 0px auto;}

.home-project .prj-info{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 0px; margin: 64px 0px 0px 0px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px; border-radius: 20px; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px; overflow:hidden;}
.home-project .prj-info .avatar{position:relative; top: 0px; left: 0px; width: 100%; height: 100%;}
.home-project .prj-info .avatar img{position:relative; top: 0px; left: 0px; width: 100%; height: auto; min-height: 100%;}
.home-project .prj-info .avatar > span:first-of-type{position:absolute; top: 20px; left: 20px; width: max-content; height: auto; padding: 5px 20px; margin: 0px; border-radius: 20px; background-color: rgb(22, 101, 52); color: #fff; font-weight: 500;}
.home-project .prj-info .avatar > div{position:absolute; top: auto; left: 0px; bottom: 0px; width: 100%; height: auto; padding: 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px;}
.home-project .prj-info .avatar > div > span{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 5px 10px; border-radius: 20px; background-color: rgba(0, 0, 0, 0.01); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; grid-gap: 10px; align-content: center; align-items: center;}
.home-project .prj-info .avatar > div > span:before{content: "\f00c"; position:relative; top: 0px; left: 0px; font-weight: 300; font-family: "Font Awesome 5 Pro";}

.home-project .prj-info .info{position:relative; top: 0px; left: 0px; width: 100%; height: auto; min-height: 100%; padding: 50px 30px; margin: 0px;}
.home-project .prj-info .info > span:first-of-type{position:relative; top: 0px; left: 0px; width: 100%; height: auto; letter-spacing: 1px; color: rgb(22, 101, 52); font-weight: 500;}
.home-project .prj-info .info .sub-info{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 15px; margin: 0px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
.home-project .prj-info .info .sub-info > div{position:relative; top: 0px; left: 0px; width: 100%; height: auto; border-radius: 20px; padding: 15px 15px 15px 50px; background-color: rgba(250, 250, 250, 0.45); display: grid; grid-template-columns: 1fr; grid-template-rows: max-content; align-content: center; align-items: center;}
.home-project .prj-info .info .sub-info > div > span:first-child{color: rgb(100, 116, 139);}
.home-project .prj-info .info .sub-info > div > span:last-child{font-weight: bold;}
.home-project .prj-info .info .sub-info > div:before{content: ""; position:absolute; top: 50%; left: 15px; width:auto; height: auto; transform:translateY(-50%); color: rgb(22, 101, 52); font-weight: 400; font-family: "Font Awesome 5 Pro"; font-size: 20px;}
.home-project .prj-info .info .sub-info > div:first-child:before{content: "\f606";}
.home-project .prj-info .info .sub-info > div:nth-child(2):before{content: "\f065";}
.home-project .prj-info .info .sub-info > div:nth-child(3):before{content: "\f80c";}
.home-project .prj-info .info .sub-info > div:nth-child(4):before{content: "\f7dc";}
.home-project .prj-info .info .hightlights{position:relative; top: 0px; left: 0px; width: 100%; height: auto;}
.home-project .prj-info .info .hightlights > span:first-child{position:relative; top: 0px; left: 0px; width: 100%; height:auto; font-weight: bold;}
.home-project .prj-info .info .hightlights .hl-list{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 15px 0px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;}
.home-project .prj-info .info .hightlights .hl-list > span{position:relative; top: 0px; left: 0px; width: 100%; height: auto; display: grid; grid-template-columns: max-content 1fr; grid-gap: 10px; align-content: center; align-items: center;}
.home-project .prj-info .info .hightlights .hl-list > span:before{content: "\f00c"; position:relative; top: 0px; left: 0px; color: rgb(22, 101, 52); font-weight: 400; font-family: "Font Awesome 5 Pro";}
.home-project .prj-image{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 30px 0px; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 30px;}
.home-project .prj-image div{position:relative; top: 0px; left: 0px; width: 100%; height:auto; border-radius: 20px; overflow:hidden;}
.home-project .prj-image div:after{content: "Xem ảnh"; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; color: #fff; font-weight: bold; opacity: 0; transition: 0.3s; pointer-events:none; letter-spacing: 1px;}
.home-project .prj-image div:hover:after{opacity: 1;}

.home-project .prj-image img{position:relative; top: 0px; left: 0px; width: 100%; height:auto; aspect-ratio: 4/3; border-radius: 20px; cursor: pointer; object-fit:cover; transition: 0.5s; display: block;}
.home-project .prj-image img:hover{transform: scale(1.1);}

.home-document, .home-document .container > *, .home-document .container > * > *{transition: 1s;}
.home-document.showcase-animation{opacity: 0;}
.home-document.showcase-animation .subtitle{opacity: 0; transform:translateX(-100%);}
.home-document.showcase-animation .container > div > div:first-child:has(h1){opacity: 0; transform:translateX(-100%);}
.home-document.showcase-animation div.contact-box{opacity: 0; transform: scale(0);}

.home-document{background-color: rgb(22, 101, 52); padding: 70px 0px; color: #fff;}
.home-document .subtitle{background-color: rgba(255, 255, 255, 0.25); font-weight: 300; color: rgb(134, 239, 172); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; grid-template-columns: max-content 1fr; grid-gap: 10px; align-content: center; align-items: center;}
.home-document .subtitle:before{content: "\f762"; position:relative; font-weight: 400; font-family: "Font Awesome 5 Pro"; font-size: 18px;}
.home-document h1 span:first-child{color: #fff; display: block;}
.home-document h1 span:last-child{color: rgb(134, 239, 172); display: block;}
.home-document .container > div{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 100px;}
.home-document p{font-weight: 300; color: #f1f1f1;}
.home-document .doc-title-list{position:relative; top: 0px; left: 0px; width: 100%; padding: 20px 0px; display: grid; grid-template-columns: 1fr; grid-gap: 15px;}
.home-document .doc-title-list span{position:relative; top: 0px; left: 0px; width: 100%; height:auto; color: #f1f1f1; padding: 8px 16px; background-color: rgba(230, 230, 230, 0.25); border: 1px solid rgba(230, 230, 230, 0.5); border-radius: 10px; display: grid; grid-template-columns: max-content 1fr; grid-gap: 10px; align-content: center; align-items: center;}
.home-document .doc-title-list span:before{content: "\f00c"; font-weight: 300; font-family: "Font Awesome 5 Pro";}

.home-document .contact-box{position:relative; top: 0px; left:0px; width: 100%; height: 100%; padding: 30px 40px; color: #000; background-color: #fff; border-radius: 20px; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;}
.home-document .contact-box h3{text-align:center; margin: 0px 0px 10px 0px;}
.home-document .contact-box p{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 0px; margin: 0px; text-align: center; color: rgb(100, 116, 139);}
.home-document .contact-box .row{display: block;}
.home-document .contact-box .row .col-5{display: block;}
.home-document .contact-box .row .col-5:not(:first-child){margin-top: 15px;}
.home-document .contact-box .row .col-6{display: none;}
.home-document .contact-box .row:has(textarea){display:none;}
.home-document .contact-box input{height: 54px; border-radius: 20px; padding: 14px;}
.home-document .contact-box input:focus{border-color: rgb(22, 101, 52); outline: 2px solid rgba(34, 197, 94, 0.25);}
.home-document .contact-box label{position:relative; display:block; font-weight: bold; margin-bottom: 5px;}
.home-document .contact-box button{width: 100%; height: auto; padding: 20px; border-radius: 20px; background-color: rgb(22, 101, 52); color: #fff;}
.home-document .contact-box button:hover{background: rgb(20, 83, 45);}

.home-latest-news.showcase-animation a{opacity: 0; transform:scale(0);}

.home-partner{padding: 100px 0px; border-top: 1px solid rgb(226, 232, 240);}
.home-partner .subtitle{margin: 0px auto 16px auto;}
.home-partner h1{text-align: center; margin-left: auto; margin-right: auto;}
.home-partner .banner-link{position:relative; top: 0px; left: 0px; width: 100%; height: 200px; padding: 0px; overflow: hidden;}
.home-partner .banner-link.slick-slider .slick-list{padding: 20px;}
.home-partner .banner-link.slick-slider .slick-arrow{border-color: rgba(22, 101, 52, 1); width: 32px; height: 32px; background-color: #fff; color: rgba(22, 101, 52); box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;}
.home-partner .banner-link.slick-slider .slick-arrow:before{color: rgba(22, 101, 52, 1); font-size: 16px;}
.home-partner .banner-link.slick-slider .slick-arrow:hover{border-color: rgba(22, 101, 52, 1); background-color: rgba(22, 101, 52, 1);}
.home-partner .banner-link.slick-slider .slick-arrow:hover:before{color: #fff;}
.home-partner .banner-link a{border: 0px; height: 140px; width:auto; aspect-ratio: 4/3; margin: 10px; padding: 0px; transition: 0.3s; border-radius: 16px; display:inline-block; vertical-align:middle; overflow:hidden; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;}
.home-partner .banner-link a:hover{box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;}
.home-partner .banner-link a img{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; border-radius: 20px; object-fit: contain; background-color: #fff;}

section.header{width: 100%; height: 400px; max-height: 400px; padding: 0px;}
section.header .header-bg{position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow:hidden; pointer-events: none;}
section.header .header-bg:after{content: ""; position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0.7; background: linear-gradient(  90deg,  rgba(18,88,48,.75) 0%,  rgba(18,88,48,.55) 35%,  rgba(18,88,48,.15) 70%,  transparent 100%);}
section.header .header-bg img{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; display: block; pointer-events: none;}
section.header .container{height: 100%; display: grid; grid-template-columns: 1fr; align-content:end; align-items:center;}
section.header .title{position:absolute; top: 50%; left: 50%; width: max-content; height:auto; transform: translate(-50%, -50%); color: #fff; font-size: 36px; line-height: 36px; font-family: "Playfair Display"}

section.header .sub-category{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 0px 20px; background-color: #fff; border-radius: 8px 8px 0px 0px; overflow:hidden;}
section.header .sub-category ul{position:relative; top: 0px; left: 0px; width: 100%; height: auto; overflow:hidden; border-bottom: 1px solid #E4E4E4; padding: 0px; margin: 0px; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; grid-gap: 15px; list-style: none;}
section.header .sub-category ul li{position:relative; top: 0px; left: 0px; width: auto; height: auto; display: block;}
section.header .sub-category ul li a{position:relative; top: 0px; left: 0px; width: auto; height: auto; display: block; background:transparent; padding: 10px 15px; border: 0px; border-radius: 0px; color: #000; font-weight: 400;}
section.header .sub-category ul li a:hover{color: rgb(22, 101, 52);}
section.header .sub-category ul li a.selected{color: rgb(22, 101, 52); font-weight: 500;}
section.header .sub-category ul li a.selected:after{content: ""; position:absolute; top: auto; left: 50%; bottom: 0px; width: calc(100% - 30px); height: 2px; transform:translateX(-50%); background-color: rgb(22, 101, 52);}

section.news{background-color: #f1f1f1; padding: 0px; padding-bottom: 30px;}
section.news .news-list{background-color: #fff; padding: 20px; border-radius: 0px 0px 8px 8px;}

.news-list{position:relative; top: 0px; left: 0px; width: 100%; height: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 30px; align-content:center; align-items: center;}
.news-list a{position:relative; top: 0px; left: 0px; width: 100%; height: auto; min-height: 100%; padding: 0px; margin: 0px; transition: 0.5s; border: 0px; border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: 1fr; grid-gap: 0px; align-content:start; align-items:center; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;}
.news-list a:hover{box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;}
.news-list a > *{pointer-events: none;}
.news-list a p{color: rgb(26, 26, 26);}
.news-list a:first-child{grid-row: span 2; grid-column: span 2;}
.news-list a:nth-child(-n + 5){align-content:end; aspect-ratio: 4/3; min-height: 100%; color: rgb(34, 197, 94);}
.news-list a:nth-child(-n + 5) > div:first-child{position:absolute; width: 100%; height: auto; min-height: 100%;}
.news-list a:nth-child(-n + 5) > div:first-child:after{content: ""; position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 1) 100%);}
.news-list a:nth-child(-n + 5):not(:first-child) > div:last-child p{display: none;}
.news-list a:first-child p{color: #f1f1f1;}
.news-list a > div{position:relative; top: 0px; left: 0px; width: 100%; height: auto;}
.news-list a > div:first-child{aspect-ratio: 4/3; overflow:hidden;}
.news-list a > div:first-child img{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;}
.news-list a > div:last-child{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; padding: 10px; display: grid; grid-template-columns: 1fr; grid-gap: 5px; grid-template-rows: max-content;}
.news-list a > div:last-child p{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 0px; margin: 0px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.news-list a > div:last-child span:nth-child(1){position:relative; top: 0px; left: 0px; width: max-content; height:auto; padding: 3px 10px; border-radius: 15px; background-color: rgb(22, 101, 52); color: #fff; font-size: 13px; display: grid; grid-gap: 5px; grid-template-columns: max-content 1fr; align-content: center; align-items: center;}
.news-list a > div:last-child span:nth-child(1):before{content: "\f133"; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.news-list a > div:last-child span:nth-child(2){max-height: 44px; font-weight: 500; display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow:hidden; text-overflow: ellipsis;}

.news-detail{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 20px; background-color: #fff; border-radius: 0px 0px 8px 8px; display: grid; grid-template-columns: 1fr 400px; grid-gap: 60px; align-content: start; align-items: start;}
.news-detail article {position:relative; top: 0px; left: 0px; width: 100%; height:auto; overflow:hidden;}
.news-detail article a{padding: 0px; border: 0px; border-radius: 0px; background-color: transparent; color: rgb(22, 101, 52); font-weight: 500; vertical-align: unset;}
.news-detail article a:hover{color: rgb(34, 197, 94);}
.news-detail article img{border-radius: 16px;}
.news-detail article h1{font-size: 36px; line-height: 48px;}

.prj-image-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto; min-height: 300px; border-radius: 0px 0px 8px 8px; background-color: #fff; padding: 20px; display:grid; grid-template-columns:repeat(5, 1fr); grid-gap: 20px; align-content:center; align-items: center;}
.prj-image-list > div{position:relative; top: 0px; left: 0px; width: 100%; height:auto; aspect-ratio: 4/3; border-radius: 16px; overflow:hidden; cursor:pointer;}
.prj-image-list > div:after{content: "Xem ảnh"; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; opacity: 0; transition: 0.5s;}
.prj-image-list > div > img{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; display: inline-block; transition: 0.5s;}
.prj-image-list > div:hover img{transform:scale(1.1);}
.prj-image-list > div:hover:after{opacity: 1;}

.news-detail .prj-doc .doc-list a{border: 0px; border-radius: 0px; color: rgb(26, 26, 26); background-color: transparent; display:block; font-weight: 400;} 
.news-detail .prj-doc .doc-list a:before{content: "\f105"; position:absolute; top: 50%; left: 0px; transform:translateY(-50%); font-weight: 400; font-family: "Font Awesome 5 Pro";}
.news-detail .prj-doc .doc-list a:hover{color: rgb(34, 197, 94);}

.news-detail .latest-news{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display: grid; grid-template-columns: 1fr; grid-gap: 15px;}
.news-detail .latest-news > div:first-child{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 10px 0px; font-size: 30px; font-weight: 500; color: rgb(22, 101, 52);}
.news-detail .latest-news .news-list{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 0px; margin: 0px; display: grid; grid-template-columns: 1fr; grid-gap: 20px;}
.news-detail .latest-news .news-list a:first-child{grid-row:unset; grid-column: unset;}
.news-detail .latest-news .news-list a:first-child > div:last-child > span:nth-child(2){color: rgb(22, 101, 52);}
.news-detail .latest-news .news-list a:not(:first-child){display: grid; grid-template-columns: max-content 1fr; grid-gap: 10px; aspect-ratio: unset; align-content: start;}
.news-detail .latest-news .news-list a:not(:first-child) > div:first-child{position:relative; top: 0px; left: 0px; width: 150px; height:auto; min-height: 100%; aspect-ratio: 4/3;}
.news-detail .latest-news .news-list a:not(:first-child) > div:first-child img{position:relative; top: 0px; left: 0px; width: 100%; height: 100%;}
.news-detail .latest-news .news-list a:not(:first-child) > div:last-child > p{display:none;}
.news-detail .latest-news .news-list a:not(:first-child) > div:last-child > span:first-child{font-size: 12px; line-height: 16px; background-color: #f1f1f1; color: rgb(26, 26, 26);}
.news-detail .latest-news .news-list a:not(:first-child) > div:last-child > span:nth-child(2){font-weight: 400; color: rgb(26,26,26); line-height: 24px; max-height: 48px;}
.news-detail article img{margin: 0px auto;}

.doi-tac{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 20px; margin: 0px; border-radius: 0px 0px 8px 8px; background-color: #fff; display: grid; grid-template-columns:repeat(5, 1fr); grid-gap: 30px; align-content: center; align-items: center;}
.doi-tac a{position:relative; top: 0px; left: 0px; width: 100%; height: auto; min-height: 100%; aspect-ratio: 4/3; transition: 0.5s; border-radius: 16px; padding: 0px; margin: 0px; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px; overflow:hidden;}
.doi-tac a:hover{box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;}
.doi-tac a img{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #fff; object-fit:contain;}

.lien-he{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 20px; margin: 0px; border-radius: 0px 0px 8px 8px; background-color: #fff; display: grid; grid-template-columns:40% 1fr; grid-column-gap: 30px; grid-row-gap: 100px; align-content: start; align-items: start;}
.lien-he .map{position:relative; top: 0px; left: 0px; width: 100%; height: 450px; border: 1px solid rgba(22, 101, 52); border-radius: 16px; overflow:hidden; grid-column: span 2;}
.lien-he .map iframe{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;}
.lien-he .contact-box input:focus, .lien-he .contact-box textarea:focus{border-color: rgb(22, 101, 52);}
.lien-he .contact-box button:hover{background: rgb(22, 101, 52);}
.lien-he ul{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px; list-style: none;}
.lien-he ul li{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px 0px; display:grid; grid-template-columns: max-content 1fr; grid-gap: 10px; align-content: center; align-items: center;}
.lien-he ul li:before{content: ""; position:relative; top: 0px; left: 0px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.lien-he ul li:nth-child(1):before{content: "\f3c5";}
.lien-he ul li:nth-child(2):before{content: "\f0e0";}
.lien-he ul li:nth-child(3):before{content: "\f879";}
.lien-he ul li:nth-child(4):before{content: "\f57e";}

.search-result{position:relative; top: 0px; left: 0px; width: 100%; height:auto; background-color: #fff; border-radius: 0px 0px 8px 8px;}
.search-result h3{padding: 0px 20px;}

.hot-contact{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 50px 0px; margin: 0px; background-color: rgb(26, 26, 26); color: #fafafa;}
.hot-contact .container{display: grid; grid-template-columns: 1fr max-content; grid-gap: 100px; align-content: center; align-items: center;}
.hot-contact .container div{position:relative; top: 0px; left: 0px; width: 100%; height:auto; overflow:hidden;}
.hot-contact h1 > span{color: #fff !important; font-size: 36px; line-height: 40px;}
.hot-contact p{color: rgba(255, 255, 255, 0.6);}
.hot-contact a{padding: 10px 15px; border-radius: 22px;}
.footer{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 80px 0px; margin: 0px; background-color: rgb(26, 26, 26); color: rgba(255, 255, 255, 0.6); border-top: 1px solid rgb(49, 49, 49);}
.footer .container{display: grid; grid-template-columns:repeat(4, 1fr); grid-gap: 30px;}
.footer .logo{position:relative; top: 0px; left: 0px; width: auto; height: 48px; background-image: url(../images/xanh-ky-son-logo.png); background-size: contain; background-position: left center; padding: 10px 10px 10px 60px; background-repeat: no-repeat; display: grid; grid-template-columns: max-content 1fr; grid-gap: 5px; align-content: center; align-items: center;}
.footer .logo:before{content: "XANH"; position:relative; top: 0px; left: 0px; font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: 1px; color: #fff;}
.footer .logo:after{content: "KỲ SƠN"; position:relative; top: 0px; left: 0px; font-size: 16px; line-height: 24px; letter-spacing: 1px; color: #45a63f;}
.footer .footer-com-info p{position:relative; top: 0px; left: 0px; width:100%; height: auto; margin-top: 20px; color: rgb(101, 101, 101); font-size: 16px; line-height: 24px;}
.footer ul{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 0px; margin: 0px; list-style:none;}
.footer ul li{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 3px 16px;}
.footer ul li a{border: 0px; border-radius: 0px; background-color: transparent; color: rgba(255, 255, 255, 0.6); padding: 0px; margin: 0px; font-size: 16px;}
.footer ul li a:hover{color: rgb(34, 197, 94);}
.footer label{position:relative; top: 0px; left: 0px; width: auto; height: auto; display: block; padding: 0px; margin-bottom: 30px; font-family: "Playfair Display"; font-size: 18px; line-height: 28px; color: #fff; font-weight: 600; letter-spacing: 1px;}
.footer .footer-contact ul li{padding: 5px 5px 5px 40px; min-height: 42px;}
.footer .footer-contact ul li:before{content: ""; position:absolute; top: 3px; left: 0px; width: 32px; height: 32px; background-color: rgba(22, 101, 52, 0.2); border-radius: 12px; font-weight: 300; font-family: "Font Awesome 5 Pro"; display: grid; grid-template-columns: 1fr; align-content: center; align-items: center; text-align: center; color: rgb(34, 197, 94);}
.footer .footer-contact ul li:first-child:before{content: "\f3c5";}
.footer .footer-contact ul li:nth-child(2):before{content: "\f879";}
.footer .footer-contact ul li:nth-child(3):before{content: "\f0e0";}
.footer .footer-contact ul li:nth-child(4):before{content: "\f57e";}
.footer .footer-prj div:first-of-type{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 10px; background-color: rgba(255, 255, 255, 0.05); border-radius: 20px; display: grid; grid-template-columns: 1fr; grid-gap: 5px;}
.footer .footer-prj div:first-of-type span:first-child{color: rgb(34, 197, 94);}
.footer .footer-prj div:first-of-type span:nth-child(2){color: rgba(255, 255, 255, 0.8); font-weight: 400;}
.copyright {padding: 15px 0px; background-color: rgb(26, 26, 26); border-top: 1px solid rgb(49, 49, 49); color: rgba(255, 255, 255, 0.6); font-size: 14px;}

.go-to-top{background-color: rgba(22, 101, 52, 0.45); border-color: rgba(22, 101, 52, 0.6); color: rgba(255, 255, 255, 0.6);}
.go-to-top:hover{background-color: rgb(22, 101, 52); border-color: rgb(22, 101, 52);}

.main-search-box{position:fixed; top: 0px; left: 0px; width: 100%; height: 100%; transition: 0.5s; background-color: rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter:blur(10px); display:block; z-index: 10;}
.main-search-box > div{position:absolute; top: 50%; left: 50%; width: 50%; min-width: 350px; max-width: 90%; height: 64px; transform: translate(-50%, -50%); border-radius: 16px; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;}
.main-search-box > div:after{content: "\f002"; position:absolute; top:0px; left: auto; right: 0px; bottom: 0px; width: 64px; background-color: rgb(22, 101, 52); border-radius: 0px 16px 16px 0px; color: #fff; font-size: 24px; font-weight: 300; font-family: "Font Awesome 5 Pro"; text-align: center; display: grid; align-content: center; align-items: center;}
.main-search-box input{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; font-size: 18px; font-weight:400; border-radius: 16px; padding: 10px 74px 10px 10px;}
.main-search-box input:focus{border-color: rgb(22, 101, 52);}
.main-search-box .close{position:absolute; top: 15px; right: 25px; width: 32px; height: 32px; color: rgba(255, 255, 255, 0.5); cursor:pointer; display: block;}
.main-search-box .close:before{content: "\f00d"; position:absolute; top: 50%; left: 50%; font-weight: 300; font-size: 24px; font-family: "Font Awesome 5 Pro";}
.main-search-box .close:hover{color: #fff;}
.main-search-box.hide{opacity: 0; transform:scale(1.5);}

@media (max-width: 1024px) {
    .top-menu .container > a:last-of-type{display:none;}
    .home-about-us h1, .home-about-us p{width: 80%;}
    .home-about-us .avatar{padding-left: 0px; padding-right: 0px;}
}

@media (max-width: 950px) {
    .top-menu .container{width: 100%;}
    .top-menu .container > .logo:before, .top-menu .container > .logo:after{display:none;}
    .home-about-us h1, .home-about-us p{width: 100%;}
    .home-about-us .article-property{grid-template-columns: 1fr; grid-gap: 30px;}
    .home-project .prj-info{grid-template-columns: 1fr;}
    .home-project .prj-image{grid-template-columns: 1fr 1fr;}
    .home-document .container > div{grid-template-columns: 1fr; grid-gap: 30px;}
    .hot-contact .container{grid-template-columns: 1fr; grid-gap: 30px;}

    section.header .sub-category{padding: 0px 10px;}
    
    .news-list{grid-template-columns: repeat(3, 1fr);}
    .news-list a:nth-child(6){color: rgb(34, 197, 94); grid-row-start: 3; grid-row-end: 5; grid-column-start: 2; grid-column-end: 4; aspect-ratio: 4/3; min-height: 100%; align-content: end; align-items: end;}
    .news-list a:nth-child(6) > div:first-child{position:absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
    .news-list a:nth-child(6) > div:first-child:after{content: ""; position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 1) 100%);}
    .news-list a:nth-child(6) > div:last-child p{display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: #f1f1f1;}
    
    .news-detail{grid-template-columns: 1fr; padding: 10px; grid-gap: 30px;}
    .news-detail .latest-news .news-list{grid-template-columns: 1fr 1fr;}
    .news-detail .latest-news .news-list > a{grid-row: unset; grid-column: unset; grid-row-start: unset; grid-row-end: unset; grid-column-start: unset; grid-column-end: unset; aspect-ratio: unset; grid-template-columns: 1fr; color: rgb(22, 101, 52);}
    .news-detail .latest-news .news-list > a:not(:first-child){grid-template-columns: 1fr;}
    .news-detail .latest-news .news-list > a > div:first-child{position:relative; aspect-ratio: 4/3; width: 100% !important; height:auto;}
    .news-detail .latest-news .news-list > a > div:first-child:after{display:none;}
    .news-detail .latest-news .news-list > a > div > p{display: -webkit-box !important; color: rgb(26, 26, 26);}
    .news-detail .latest-news .news-list > a > div > span:nth-child(2){color: inherit !important;}

    .prj-image-list, .doi-tac{grid-template-columns: 1fr 1fr 1fr; padding: 10px;}
    .lien-he{grid-template-columns: 1fr; grid-gap: 30px; padding: 10px;}
    .lien-he .contact-box .col-4:has(button){grid-column: span 10;}
    .lien-he .map{grid-column: unset;}

    .footer .container{grid-template-columns: 1fr 1fr;}
}

@media (max-width: 600px){
    .container{padding: 0px;}
    .top-menu{padding: 10px 0px;}
    .top-menu > .container{display: block; padding-left: 45px;}
    .top-menu:before{position:absolute; top: 50%; left: 5px; transform: translateY(-50%); z-index: 2;}
    .top-menu.active:before{color: rgb(26, 26, 26);}
    .top-menu .container .search{position:absolute; top: 50%; left:auto; right: 10px; transform:translateY(-50%);}
    .top-menu > .container > a:last-of-type{display:none;}
    .top-menu > .container > ul{display: block; padding-top: 50px; background-color: rgba(0, 0, 0, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); align-content:start;}
    .top-menu > .container > ul:after{content: "Đảo Ngọc Xanh Kỳ Sơn"; position:absolute; top: 15px; left: 50%; width: max-content; height:auto; transform: translateX(-50%); text-transform: uppercase; font-weight: 500; color: rgb(34, 197, 94); display: block;}
    .top-menu > .container > ul > li{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 0px;}
    .top-menu > .container > ul > li a, .top-menu.active > .container > ul > li a{color: #fff; text-align: center;}
    .top-menu > .container > ul > li a:after{display: none;}
    .top-menu .container > .logo::before, .top-menu .container > .logo::after{display:block;}

    .slider > .slide > .comment h1{font-size: 36px; line-height: 45px;}
    .slider > .slide > .comment a{display:block; margin: 10px 0px !important; width: max-content;}
    .slider > .slide .slick-arrow{bottom: 50px;}

    section h1{font-size: 30px; line-height: 36px; max-width: 100%;}

    .home-about-us h1, .home-about-us .container > p{width: 100%;}
    .home-about-us .article-property{grid-gap: 60px;}
    .home-about-us .avatar{padding: 0px;}
    .home-about-us .avatar div{width: 90%; bottom: 10px; transform: translate(-50%, 30px);}
    .home-about-us .article-property .info > div{padding: 0px 0px 0px 60px;}
    .home-about-us .article-property .info > div::before{left: 0px;}
    .home-about-us .company-summary{grid-template-columns: 1fr 1fr;}

    .home-project .sologan{width: 100%;}
    .home-project .prj-info{grid-template-columns: 1fr;}
    .home-project .prj-info .info{padding: 10px;}
    .home-project .prj-info .info .sub-info{grid-template-columns: 1fr;}
    .home-project .prj-image{grid-template-columns: 1fr 1fr; grid-gap: 15px;}
    .home-document .container > div{grid-template-columns: 1fr; grid-gap: 20px;}

    .news-list{grid-template-columns: 1fr;}
    .news-list > a:first-child, .news-list a:nth-child(6){grid-column:unset; grid-row:unset; grid-column-start: unset; grid-column-end: unset; grid-row-start: unset; grid-row-end: unset;}
    .news-list a:not(:first-child){grid-template-columns: max-content 1fr; aspect-ratio: unset; color: rgb(22, 101, 52);}
    .news-list a:not(:first-child) > div:first-child{width: 150px; position:relative; aspect-ratio: 4/3;}
    .news-list a:not(:first-child) > div:first-child:after{display:none;}
    .news-list a:not(:first-child) > div:last-child p{display:none;}

    .news-detail .latest-news .news-list{grid-template-columns: 1fr;}

    .prj-image-list, .doi-tac{grid-template-columns: 1fr 1fr}

    .hot-contact .container{grid-template-columns: 1fr; grid-gap: 20px;}
    .hot-contact .container > div{position:relative; top: 0px; left: 0px; width: 100%; height: auto; overflow: hidden;}

    .footer{padding: 30px 0px;}
    .footer .container{grid-template-columns: 1fr 1fr;}
    .footer .container > div:first-child, .footer .container > div:last-child{grid-column: span 2;}
}

@media (max-width: 450px) {
    .prj-image-list, .doi-tac{grid-template-columns: 1fr}

    .footer .container{grid-template-columns: 1fr;}
    .footer .container > div:first-child, .footer .container > div:last-child{grid-column: unset;}
}