.section__background { background: url(../images/set/bg-aboutus.png) right bottom; } 
.line-text { margin-top: 20px; } 

/* ABOUT */
.wrap__aboutus { position: relative; z-index: 1; } 
.aboutus-image { z-index: 1; } 
.section-title { padding-left: 15px; position: relative; } 
.section-title::after { position: absolute; content: ""; border-left: 5px solid var(--color-main); height: 68px; left: 0; top: 3px; } 
.title__aboutus { font-size: 18px; font-family: var(--font-bold); color: var(--color-title); text-transform: uppercase; } 
.name__aboutus { font-size: 34px; font-family: var(--font-custom); color: var(--color-main); text-transform: uppercase; } 
.desc__aboutus { -webkit-line-clamp: 4; font-size: 15px; line-height: 26px; margin-top: 15px; font-family: var(--font-regular); } 
.wrap__aboutus .aboutus__image { position: relative; z-index: 1; padding: 20px 10px 10px 20px; text-align: right; } 
.wrap__aboutus .aboutus__image::after { position: absolute; content: ""; width: 200px; height: 178px; background: var(--color-main); left: 0; top: 0; z-index: -1; } 
.wrap__aboutus .aboutus__image::before { position: absolute; content: ""; width: 200px; height: 178px; background: var(--color-main); right: 0; bottom: 0; z-index: -1; } 

.grid-statistic { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); margin-bottom: 30px; } 
.statistic__image { width: 50px; } 
.statistic__info { width: calc(100% - 70px); } 
.statistic__name { font-family: var(--font-bold); font-size: 18px; color: var(--color-main-v2); } 
.statistic__desc { font-family: var(--font-regular); font-size: 15px; color: var(--color-title); } 

/* CRITICAL */
.grid-criteria { display: grid; gap: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 30px; } 
.criteria__name { font-family: var(--font-bold); font-size: 18px; color: var(--color-main-v2); margin-bottom: 10px; } 
.criteria__name .text-split { -webkit-line-clamp: 1; } 
.criteria__desc { color: var(--color-title); font-family: var(--font-regular); font-size: 15px; -webkit-line-clamp: 1; } 
.criteria .criteria__image { transition: all linear 0.3s; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; } 
.criteria:hover .criteria__image { transform: rotateY(180deg); transition: all linear 0.3s; } 
.criteria__info { width: calc(100% - 70px); } 

/* */
.why__choose { background: url(../images/set/bg-why.png); background-size: cover; } 
.main__why { position: relative; height: 665px; } 
.inner__around { position: absolute; left: 0; right: 0; bottom: 70px; margin: auto; text-align: center; z-index: -1; } 
.inner__title { box-shadow: 0px 0px 16px #0BA1C1; position: absolute; left: 0; right: 0; top: 0; width: 400px; height: 400px; border-radius: 50%; text-align: center; margin: auto; background-color: #000 !important; background: url(../images/set/bg-title.png); background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; } 
.inner__title span { font-family: var(--font-custom); font-size: 36px; text-transform: uppercase; color: var(--color-white); } 
.inner__title p { font-family: var(--font-custom); font-size: 64px; text-transform: uppercase; color: var(--color-white); } 
.items__why { position: absolute; padding: 15px; text-align: center; box-shadow: 0px 0px 16px #0BA1C1; background: radial-gradient(50% 50% at 50% 50%, #73D9EF 0%, #0BA1C1 100%); width: 145px; height: 145px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; } 
.name__why { font-size: 13px; font-family: var(--font-bold); color: var(--color-white); text-transform: uppercase; margin-top: 10px; line-height: normal; } 
.items__why:nth-child(1) { top: 175px; left: 180px; } 
.items__why:nth-child(2) { top: 175px; right: 180px; } 
.items__why:nth-child(3) { bottom: 220px; left: 0; width: 150px; height: 150px; } 
.items__why:nth-child(4) { bottom: 220px; right: 0; width: 150px; height: 150px; } 
.items__why:nth-child(5) { width: 170px; height: 170px; bottom: 75px; left: 200px; } 
.items__why:nth-child(6) { width: 170px; height: 170px; right: 200px; bottom: 75px; } 
.items__why:nth-child(7) { width: 200px; height: 200px; bottom: 0; left: 0; right: 0; margin: auto; } 

/* */
.wrap__synthetic { background: linear-gradient(180deg, #ededed, #fff); } 
.tabs-index ul { justify-content: center; padding: 0; display: flex; flex-wrap: wrap; align-items: center; border: none !important; } 
.tabs-index ul li { margin-right: 40px; list-style: none; } 
.tabs-index ul li:last-child { margin-right: 0; } 
.tabs-index ul li a { display: block; width: 220px; height: 50px; line-height: 50px; border-radius: 6px; border: 1px solid var(--color-main); text-align: center; font-family: var(--font-bold); font-size: 15px; color: #000; text-transform: uppercase; } 
.tabs-index ul li a.active { background: var(--color-main); color: var(--color-white); } 
.tab__app { padding: 40px 0; margin-top: 30px; position: relative; z-index: 1; } 
.tab__app::after { width: 1120px; height: 490px; position: absolute; content: ""; border: 1px solid var(--color-main-v2); left: 0; right: 0; top: 20px; z-index: 2; margin: auto; } 
.tab__app::before { width: 1160px; height: 530px; position: absolute; content: ""; border: 1px solid var(--color-main-v2); left: 0; right: 0; top: 0; z-index: -1; margin: auto; } 

/* APPLICATION */
.wrap__application { background: url(../images/set/bg-app.png); background-size: cover; background-color: #ededed !important; } 
.col__image__app .image__app { position: relative; z-index: 1; } 
.col__image__app .image__app::after { position: absolute; content: ""; width: 770px; height: 550px; border: 5px solid var(--color-main-v2); top: 20px; right: 0; z-index: -1; } 
.numb { font-family: var(--font-bold); font-size: 20px; color: var(--color-title); text-transform: uppercase; padding-left: 25px; } 
.numb span { font-family: var(--font-custom); font-size: 40px; color: var(--color-main); } 
.inner__app__bottom { display: grid; gap: 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 60px; } 
.name__app { text-align: center; font-family: var(--font-bold); font-size: 20px; color: #000; text-transform: uppercase; margin-bottom: 15px; } 

/* VIDEO */
.wrap__video { position: relative; z-index: 11; background: linear-gradient(180deg, #edededa1, #ededed8f); } 
.play { left: 0; right: 0; bottom: 0; margin: auto; display: flex; flex-direction: column; justify-content: center; height: 100%; width: 50%; align-items: center; /* padding: 15px; */ } 
.play img { padding: 10px; } 

/* ALBUM */
.wrap__album { position: relative; z-index: 1; background: linear-gradient(180deg, #ededed0f, #ededed8f); } 
.main__album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } 
.items__album:nth-child(1),.items__album:nth-child(3),.items__album:nth-child(5) { grid-row: 3 span; grid-column: 1 span; } 
.items__album:nth-child(2),.items__album:nth-child(4),.items__album:nth-child(6) { grid-row: 4 span; grid-column: 1 span; } 

/* NEWS */
.wrap__news { background: url(../images/set/bg-news.png); background-size: cover; } 
.main__news { padding: 10px; background: var(--color-white); } 
.news__info { padding: 10px 0; } 
.news__info .news__name a { font-size: 16px; color: var(--color-title); font-family: var(--font-bold); -webkit-line-clamp: 2; } 
.news__info .news__time i { color: var(--color-main-v2); font-size: 16px; } 
.news__info .news__time { font-family: var(--font-regular); font-size: 13px; color: #838383; margin: 10px 0; } 
.news__info .news__desc { font-size: 14px; color: var(--color-title); line-height: 24px; font-family: var(--font-regular); } 

/* FEEDBACK */
.image__feedback { transform: scale(0.825); border-radius: 50%; } 
.image__feedback.slick-current { transform: unset } 
.info__feedback { text-align: center; margin-top: 25px; } 
.info__feedback .name__feedback a { font-family: var(--font-bold); font-size: 18px; color: #1e1e1e; } 
.info__feedback .desc__feedback { font-family: var(--font-regular); font-size: 14px; color: #444444; line-height: 25px; margin-top: 10px; } 
.slick-dots li button:before { font-size: 10px; } 
.slick-dots li.slick-active button:before { color: var(--color-main); } 
.slick-dots { bottom: -40px; } 

/* STATISTIC */
.wrap__statistic { background: url(../images/set/bg-project.png); background-size: cover; } 
.statistic-name a { font-family: var(--font-custom); font-size: 52px; color: #fff; } 
.statistic-desc { font-family: var(--font-regular); font-size: 15px; color: #fff; margin-top: 10px; } 

/* FORM */
.main__form { max-width: 900px; margin: auto; } 
.title__form { text-align: center; font-family: var(--font-custom); text-transform: uppercase; color: var(--color-main); font-size: clamp(24px,3.5vw,32px); } 
.slogan__form { font-family: var(--font-regular); font-size: 16px; color: #000; } 
.line-form { margin: 15px 0; } 
.validation__newsletter ::placeholder { color: #646464 !important; font-family: var(--font-regular); font-size: 14px; } 
.newsletter__input { position: relative; padding: 0 10px !important; } 
.newsletter__input input { padding: 0.35rem 15px; height: 45px; font-size: 14px; color: #646464; background: none; border-radius: 6px; border: 1px solid #CACACA; } 
.newsletter__input select { padding: 0.35rem 15px; height: 45px; font-size: 14px; color: #646464; background: none; border-radius: 6px; border: 1px solid #CACACA; } 
.col__input { margin-bottom: 20px; } 
.col__content { padding: 0 10px !important; } 
.col__content textarea { padding: 0.35rem 15px; height: 100px; background: none; border-radius: 6px; border: 1px solid #CACACA; } 
.newsletter__button { background: var(--color-main); border: none !important; border-radius: 5px !important; width: 190px; height: 50px; line-height: 50px; } 
.newsletter__button input[type="submit"] { color: #fff !important; font-family: var(--font-extra); font-size: 16px; background: none; border: none; border-color: unset; } 
.newsletter__button:hover { background: #fff; border: 1px solid var(--color-main) !important; } 
.newsletter__button:hover input[type="submit"] { color: var(--color-main) !important; } 
.col__submit { padding: 0 10px !important; margin: 20px auto 0 auto; text-align: center; display: flex; justify-content: space-between; align-items: center; } 
.form-control:focus { border-color: unset !important; outline: 0; box-shadow: unset !important; } 
.title__hotline { font-family: var(--font-regular); font-size: 15px; color: #111111; } 
.form__hotline { font-family: var(--font-extra); font-size: 18px; color: var(--color-main); } 

/* FOOTER */
.footer { background: url(../images/set/bg-ft.png) no-repeat; background-size: cover; } 
.footer__article .wrap-content { padding: 35px 15px; } 
.footer__name { text-transform: uppercase; font-size: 24px; margin-bottom: 1rem; color: var(--color-white); } 
.footer__title { text-transform: uppercase; font-size: 15px; margin-bottom: 1rem; color: var(--color-white); } 
.footer__ul { list-style: disc; padding: 0 0 0 20px; margin: 0px; color: #fff; } 
.footer__ul li { margin-bottom: 20px; } 
.footer__ul li:last-child { margin-bottom: 0px; } 
.footer__ul li a { color: #fff; font-family: var(--font-regular); font-size: 14px; } 
.footer__ul li a:hover { text-decoration: underline; } 
.footer__powered { color: #ffffff; border-top: 1px solid #64655f; } 
.footer__powered .wrap-content { padding-top: 20px; padding-bottom: 20px; font-family: var(--font-regular); font-size: 14px; } 
.footer__statistic { text-align: right; } 
.footer__statistic span { padding-right: 10px; } 
.footer__statistic span:last-child { padding-right: 0px; } 
.line__bottom { position: relative; padding-bottom: 10px; } 
.line__bottom::after { position: absolute; border-bottom: 2px solid #DFDFDF; content: ""; left: 0; bottom: 0; width: 60px; } 
.social__footer li { width: 40px; height: 40px; border-radius: 50%; } 


/* CSS CUSTOM */
::-webkit-scrollbar { width: 3px; } 
::-webkit-scrollbar-track { background: #ccc; } 
::-webkit-scrollbar-thumb { background: var(--color-main); } 
::-webkit-scrollbar-thumb:hover { background: var(--color-hover); } 
.product .i_left { position: absolute; height: 0; border-radius: 0 50px; width: 2px; left: 0; top: 0; background: -webkit-linear-gradient(bottom, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(bottom, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left bottom, left top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: linear-gradient(to top, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_right { position: absolute; height: 0; width: 2px; right: 0; bottom: 0; background: -webkit-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left top, left bottom, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_top { position: absolute; height: 2px; width: 0; right: 0; top: 0; background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left top, right top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_bottom { position: absolute; height: 2px; width: 0; left: 0; bottom: 0; background: -webkit-linear-gradient(right, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(right, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, right top, left top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.product:hover .i_left { height: 100%; bottom: 0; top: inherit } 
.product:hover .i_top { width: 100%; left: 0 } 
.product:hover .i_right { height: 100%; top: 0; bottom: inherit } 
.product:hover .i_bottom { width: 100%; right: 0; left: inherit } 
.color__hover:hover { color: var(--color-hover) !important; }