/* HEADER */
.header { padding: 10px 0; border-bottom: 1px solid var(--color-main); } 
.header-phone-icon { font-size: 27px; color: var(--color-main); width: 50px; height: 50px; border: 1px solid; display: flex; justify-content: center; align-items: center; border-radius: 50%; } 
.menu.fixed .header-logo { margin: 10px 0; zoom: .7; } 

.header-address { color:var(--color-white); font-family:var(--font-regular); font-size:14px; line-height:1.5; } 
.header-address span { font-family:var(--font-bold); } 
.header-slogan { color:var(--color-white); font-family:var(--font-bold); font-size:14px; text-transform:capitalize; position:relative; z-index:2; } 
.header-top { position:relative; background: var(--color-main); } 
.header-name { color:var(--color-main-v2); font-family:var(--font-bold); font-size:55px; line-height:1.5; text-transform: uppercase; } 
.header-phone-text { color:var(--color-title); font-family:var(--font-medium); font-size:20px; line-height:1.5; text-transform:capitalize; } 
.header-phone-numb { color:var(--color-main); font-family: var(--font-bold); font-size:18px; line-height:1.5; } 

/* BUTTON */
.btn-index { display: block; font-size: 15px; color: var(--color-white); text-align: center; background: var(--color-main); padding: 0; align-content: center; margin: 20px auto 0px; border-radius: 50px; height: 50px; width: 180px; } 
.btn-index i { margin-left: 12px; font-size: 19px; position: relative; top: 1px; } 
.btn-index:hover { color: var(--color-white); text-decoration: none; background: var(--color-hover); transition: 0.3s; } 
.btn-outline-custom { border:solid 1px var(--color-main); color:var(--color-main); } 
.btn-outline-custom.active,.btn-outline-custom:hover { border:solid 1px var(--color-main); background-color:var(--color-main); color:var(--color-white) !important; } 
.btn-custom { border:solid 1px var(--color-main); color:var(--color-white); background-color:var(--color-main); } 
.btn-custom.active,.btn-custom:hover { border:solid 1px var(--color-active); background-color:var(--color-active); color:var(--color-white) !important; } 

/* TITLE */
.title-home { margin-bottom: 1.5rem; } 
.title-home h2 { padding-left: 20px; color:var(--color-main); text-transform: uppercase; font-family: var(--font-bold); font-size:40px; display:block; line-height:1.6; } 
.title-home h2::after { content: ''; width: 5px; height: 30px; background: var(--color-main); position: absolute; left: 0; top: 0; bottom: 0; margin: auto; border-radius: 5px; } 


/* MENU */
.menu { background:var(--color-white); position:relative; z-index:11; padding: 10px 0; } 
.menu ul { width:100%; padding:0px; margin:auto; list-style:none; } 
.menu ul.menu-main { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; } 
.menu ul li.menu-line { width:1px; height:15px; background-color:#2c67e9; } 
.menu ul li a { display:block; position:relative; font-size:17px; color:var(--color-main); padding: 5px 0; font-weight:500; text-transform:capitalize; text-decoration:none; overflow:hidden; font-family:var(--font-bold); } 
.menu ul li a:hover,.menu ul li a.active { color:var(--color-hover); text-decoration:none; } 
.menu ul li:hover > a.has-child:after,.menu ul li a.active.has-child:after { border:1px solid var(--color-title); } 
.menu ul li ul { position:absolute; min-width:250px; margin-top:0px; z-index: 1; padding-top:0.75rem; padding-bottom:0.75rem; background-color:#fafafa; border-radius:0.25rem; -webkit-box-shadow:1px 1px 15px rgba(0,0,0,0.15); box-shadow:1px 1px 15px rgba(0,0,0,0.15); -webkit-transform:perspective(600px) rotateX(-90deg); transform:perspective(600px) rotateX(-90deg); -webkit-transform-origin:0 0 0; transform-origin:0 0 0; opacity:0; visibility:hidden; } 
.menu ul li:hover > ul { left: 0; -webkit-transform:perspective(600px) rotateX(0); transform:perspective(600px) rotateX(0); transform-origin:0 0 0; -webkit-transform-origin:0 0 0; opacity:1; visibility:visible; transition:all 0.5s linear; } 
.menu ul li ul li { padding-left:0.75rem; padding-right:0.75rem; margin:0px; } 
.menu ul li ul li a { font-size:16px; color:var(--color-title); border-bottom:1px solid #ececec; padding:10px 0px 9px 0px !important; text-transform:capitalize; background:unset !important; } 
.menu ul li ul li a.has-child { margin-right:0px; } 
.menu ul li ul li a.has-child:after { border-color:var(--color-title); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); } 
.menu ul li ul li a.active { color:var(--color-active); } 
.menu ul li ul li a.active.has-child:after { border-color:var(--color-main); } 
/* .menu ul li ul li:last-child > a { border-bottom:0px; }  */
.menu ul li ul li:hover > a { color:var(--color-active) !important; } 
.menu ul li ul li:hover > a.has-child:after { border-color:var(--color-main); } 
.menu ul li ul li ul { top:-0.75rem; left:100%; margin-top:0px; } 
.menu ul li a.active,.menu ul li a:hover { color:var(--color-active); } 
.li-menu { padding: 0 !important; } 

/* SLIDESHOW */
.slideshow { position:relative; } 
.slideshow-item { display:block; cursor:pointer; } 
.slideshow:hover .control-slideshow { opacity:1; } 
.control-slideshow { opacity:0; } 

/* STATISTIC */
.icon-aboutus, .image-aboutus { border: 5px solid var(--color-main); background: var(--color-white); } 
.icon-aboutus img, .image-aboutus img { border-radius: 50%; } 
.icon-aboutus { margin-right: -150px; position: relative; z-index: 1; } 
.section-statistic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } 

/* WHYCHOOSE */
.section-whychoose { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } 

/* PRODUCT */
.grid-productList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } 
.items-productList:nth-child(2) { grid-row: 2 span; } 
.name-productList { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: var(--color-main); padding: 10px 20px; border-radius: 50px; height: 50px; max-width: 90%; display: inline-block; align-content: center; font-family: var(--font-bold); color: var(--color-white); font-size: 20px; text-transform: capitalize; } 
.grid-product { display:grid; gap: 20px; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom:1.5rem; } 
.box-product { position:relative; display:block; margin-bottom:0rem; } 
.pic-product { border-radius: 0; background: var(--color-white); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10); } 
.pic-product img { width:100%; border-radius:0px; } 
.name-product { margin-bottom:0.5rem; font-size:20px; text-transform: capitalize; font-family:var(--font-medium); line-height:1.5; } 
.name-product a { color: var(--color-title); } 
.name-product a.text-split { -webkit-line-clamp:1; } 
.name-product a:hover { color:var(--color-active); } 
.price-product { margin-bottom:0px; text-align: start; } 
.price-product span { font-weight:700; } 
.price-new { font-size:18px; font-weight:500; color: var(--color-main-v2); font-family:var(--font-bold); } 
.price-old { padding-left:10px; font-size:14px; color:#6c757d; text-decoration:line-through; } 
.price-per { position:absolute; top:15px; right:15px; color:var(--color-white); background:var(--color-main); font-size:11px; border-radius:2px; width:45px; height:25px; text-align:center; line-height:25px; } 
.cart-product { margin-bottom:0px; } 
.cart-product span { cursor:pointer; color:var(--color-white); text-transform:capitalize; text-align:center; } 



/* CONSTRUCTION */
.grid-construction { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top: 10px; } 
.items-construction:hover img { filter: brightness(0.5); } 
.items-construction:nth-child(1) { grid-row: 2 span; grid-column: 2 span; } 
.title-construction { align-content: center; padding: 20px; font-family: var(--font-bold); color: var(--color-white); text-transform: capitalize; left: 0; right: 0; bottom: 0; top: 0; margin: auto; text-align: center; } 
.title-construction h3 { font-size: 25px; } 

/* STATISTIC */
.box-criteria { padding: 10px; border: 1px solid #f3f3f3; border-radius: 10px; } 
.box-criteria:hover { background: var(--color-main); border-radius: 10px; } 
.box-criteria:hover .criteria-desc, .box-criteria:hover .criteria-name a { color: var(--color-white); } 
.criteria-desc { font-family: var(--font-regular); font-size: 16px; color: var(--color-title); } 
.criteria-name a { font-family: var(--font-bold); font-size: 35px; color: var(--color-title); } 
.section-notify .title { font-family: var(--font-bold); font-size: 35px; color: var(--color-title); } 
.notify-name { font-family: var(--font-regular); font-size: 16px; color: var(--color-title); } 

/* PROCESS */
.wrap-process .tab-content { border: 3px solid var(--color-main); padding: 0 20px; } 
.wrap-process .tabs-pro-detail .nav-tabs .nav-link.active { border: 3px solid var(--color-main); margin-bottom: -5px; border-bottom-style: none; background: var(--color-white); } 
.wrap-process .tabs-pro-detail .nav-tabs .nav-link { background: var(--color-white); border: none; border-radius: 0; font-family: var(--font-bold); font-size: 25px; text-transform: uppercase; padding: 10px 30px; color: var(--color-main); } 
.owl-process { position: relative; z-index: 1; } 
.owl-process::after { position: absolute; content: ''; width: 100%; height: 3px; background: var(--color-main); top: 20%; left: 0; z-index: -1; } 
.items-process { position: relative; padding: 0 25px; } 
.items-process:after { position: absolute; content: '\f054'; font-weight: 500; font-family: 'Font Awesome 6 Pro'; color: var(--color-main); top: 9%; left: -30px; font-size: 35px; } 
.name-process { font-family: var(--font-bold); min-height: 60px; font-size: 20px; color: var(--color-main); text-transform: uppercase; margin: 15px 0; } 
.desc-process { font-family: var(--font-regular); font-size: 15px; color: var(--color-title); text-transform: capitalize; } 
.image-process { width: 115px; height: 115px; display: flex; justify-content: center; align-items: center; position: relative; margin: 20px auto 40px auto; z-index: 1; } 
.image-process::after { width: 100%; height: 100%; position: absolute; content: ''; background: var(--color-main); border-radius: 10px; left: 0; top: 0; z-index: -1; transform: rotate(45deg); } 


/* CRITERIA */
.image-criteria { width: 85px; height: 85px; background: var(--color-main); border-radius: 50%; } 
.info-criteria { width: calc(100% - 95px); } 
.name-criteria { font-family: var(--font-bold); font-size: 20px; color: var(--color-title); text-transform: uppercase; } 
.desc-criteria { font-family: var(--font-regular); font-size: 15px; color: var(--color-title); } 



/* NEWS */

.grid-news-index { display: grid; gap: 25px; grid-template-columns: repeat(6,minmax(0,1fr)); } 
.grid-news-index .news-home-box:nth-child(1) { grid-column: 3 span; } 
.grid-news-index .news-home-box:nth-child(2) { grid-column: 3 span; } 
.grid-news-index .news-home-box { grid-column: 2 span; } 


.wrap-news-video { background: #f3f3f3; } 
.news-name-single { font-size: 30px !important; } 
.items-vertical { margin-bottom: 15px; } 
.image-vertical { width: 250px; border-radius: 10px; } 
.info-vertical { width: calc(100% - 270px); } 
.name-vertical { font-family: var(--font-bold); font-size: 20px; color: var(--color-title); text-transform: capitalize; } 
.desc-vertical { font-family: var(--font-regular); font-size: 15px; color: var(--color-title); } 

.news .news-name { margin-bottom:0.5rem; } 
.news .news-name a,.news-name { color:var(--color-title); font-size: 20px; font-family:var(--font-bold); line-height:1.5; } 
.news .news-name a.text-split { -webkit-line-clamp:2; } 
.news .news-name a:hover { color:var(--color-phone); } 
.news .news-time { color: var(--color-white); margin-bottom: 0; background: var(--color-main); display: inline-block; padding: 10px 20px; font-family: var(--font-bold); font-size: 16px; position: absolute; right: 0; top: 0; align-content: center; border: 5px solid var(--color-white); box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.35); } 
.news .news-desc { color:#333333; margin-top:5px; height:calc(1.5em* 2); line-height:1.5; } 



/* VIDEO */
.video { cursor:pointer; margin-bottom:1rem; } 
.video .video-image { position:relative; margin-bottom:0.75rem; } 
.video .video-name { text-align:center; font-size:16px; color:#212529; margin-bottom:0px; } 
.play-icon { z-index:1; position:absolute; top:50%; left:50%; transform:translateY(-50%) translateX(-50%); } 
.play-icon svg { -webkit-box-shadow:1px 1px 15px rgb(0 0 0 / 30%); box-shadow:1px 1px 15px rgb(0 0 0 / 30%); border-radius:50%; background-color:rgb(255 255 255 / 15%); } 
.play-icon svg .play-icon-stroke-dotted { opacity:0; stroke-dasharray:4,5; stroke-width:1px; transform-origin:50% 50%; animation:spin 4s infinite linear; transition:opacity 1s ease,stroke-width 1s ease; } 
.play-icon svg .play-icon-stroke-solid { stroke-dashoffset:0; stroke-dashArray:300; stroke-width:4px; transition:stroke-dashoffset 1s ease,opacity 1s ease; } 
.play-icon svg .play-icon-icon { transform-origin:50% 50%; transition:transform 200ms ease-out; } 
.play-icon:hover svg .play-icon-stroke-dotted { stroke-width:4px; opacity:1; } 
.play-icon:hover svg .play-icon-stroke-solid { opacity:0; stroke-dashoffset:300; } 
.play-icon:hover svg .play-icon-icon { transform:scale(1.05); } 
.listvideos { width:100%; height:40px; padding:0px 10px; border:1px solid #ccc; color:var(--color-black); margin-top:10px; cursor:pointer; } 
.video-main { position:relative; height:330px; } 
.video-main iframe { position:absolute; width:100%; height:100%; top:0px; left:0px; } 
.subvideo { width:100%; height:320px; overflow:hidden; } 
.runvideo { margin:-5px 0px; } 
.asubvideo { margin:5px 0px; } 

/* ALBUM */
.album { cursor:pointer; } 
.album .album-image { margin-bottom:0.75rem; position:relative; } 
.album-expand { position:absolute; left:0px; right:0px; top:0px; bottom:0px; background-color:var(--color-title)00033; opacity:0; } 
.album-expand i { font-size:35px; color:var(--color-white); } 
.album:hover .album-expand { opacity:1; } 
.album .album-name { margin-bottom:0px; text-align:center; } 
.album .album-name a { display:block; font-size:16px; color:#212529; margin-bottom:0px; } 

/* TRAINING */
.items-training:nth-child(odd) { flex-direction: row-reverse; } 
.info-training { padding: 0 20px; } 
.training-title a { color: var(--color-main); font-family: var(--font-semi); font-size: 30px; text-align: center; text-transform: capitalize; } 
.training-desc { font-family: var(--font-regular); font-size: 17px; text-align: center; } 

/* FEEDBACK */
.items-feedback { padding: 30px 20px; border: 1px solid #ccc; border-radius: 10px; } 
.items-feedback .name-feedback { font-family: var(--font-medium); font-size: 20px; color: var(--color-title); text-transform: capitalize; } 
.items-feedback .desc-feedback { font-family: var(--font-regular); font-size: 15px; color: var(--color-title); min-height: 135px; } 
.items-feedback .star { color: var(--color-hover); margin: 10px 0; } 


/* FOOTER */
.footer-copyright { text-align:center; background:var(--color-main); color: var(--color-white); font-family: var(--font-medium); font-size:14px; line-height:1.5; padding:20px 10px; } 
.footer-copyright span { font-family:var(--font-bold); text-transform: uppercase; } 
.footer-copyright span a { font-family:var(--font-bold); text-transform: uppercase; } 
.footer-name { font-size:20px; color:var(--color-title); text-transform:uppercase; font-family:var(--font-bold); } 
.footer-info { font-size:15px; color:var(--color-title); line-height:2; } 
.footer-article { background: var(--color-main); } 
.footer-article .wrap-content { padding:40px 15px; } 
.footer-title { text-transform:uppercase; font-size:18px; font-family:var(--font-bold); color:var(--color-title); } 
.footer-ul { list-style:disc; padding:0 0 0 20px; margin:0px; color: var(--color-title); } 
.footer-ul li { margin-bottom:10px; } 
.footer-ul li:last-child { margin-bottom:0px; } 
.footer-ul li a { color:var(--color-title); font-size:16px; line-height:2; font-family: var(--font-medium); } 
.footer-ul li a:hover { text-decoration:underline; } 
.footer-tags { background:#eee; } 
.footer-tags .wrap-content { padding:30px 15px; } 
.footer-tags-lists { list-style:none; padding:0px; margin:0px; } 
.footer-tags-lists li { float:left; } 
.footer-tags-lists li a { padding-bottom:0.375rem; } 
.footer-powered { color:var(--color-white); background-color:var(--color-main); } 
.footer-powered .wrap-content { padding-top:20px; padding-bottom:20px; } 
.footer-statistic { text-align:right; } 
.footer-statistic span { padding-right:10px; } 
.footer-statistic span:last-child { padding-right:0px; } 
#footer-map { position:relative; height:500px; } 
#footer-map iframe { position:absolute !important; width:100% !important; height:100% !important; top:0px !important; left:0px !important; } 

/* FOOTER MAPS TAB */
.footer_map_tab { width:100%; height: 450px; position:relative; overflow:hidden; } 
.map_frame { width:100%; height: 100%; } 
.map_frame iframe { width:100%; height:100%; } 
.wrap_map { width:100%; position:absolute; top:30px; left:0; } 
.social-left { position:fixed; left:10px; z-index:11; bottom:150px; } 
.social-left a { transition:.4s; margin:5px 0; } 
.btn-map-api { background-color:var(--color-main) !important; border:solid 1px var(--color-main) !important; font-family: var(--font-bold); } 
.btn-map-api:hover,.btn-map-api.active { background-color:var(--color-hover) !important; color:var(--color-white ) !important; border:solid 1px var(--color-phone) !important; } 
.btn-map-api:hover img,.btn-map-api.active img { filter:brightness(0) saturate(100%) invert(46%) sepia(96%) saturate(415%) hue-rotate(59deg) brightness(97%) contrast(84%); } 
.map_items.active{background: var(--color-hover);}
.btn-maps{border: 1px solid var(--color-active); width: 140px; height: 40px; align-content: center;text-align: center;color: var(--color-hover);}
.btn-maps:hover{border: none;}

/* BANNER */
.title-banner { left: 0; bottom: 0; top: 0; margin: auto; display: flex; justify-content: center; align-items: center; width: 50%; padding: 0 50px; text-align: center; margin: auto; } 
.name-banner { font-size: 60px; font-family: var(--font-bold); color: var(--color-title); text-transform: capitalize; max-width: 560px; } 
.image-video { border-radius: 10px; } 
.name-video { font-family: var(--font-medium); font-size: 20px; color: var(--color-title); } 

/* FORM */
.col-newsletter { position: relative; } 
.hotline-ab { position: absolute; border-radius: 5px; color: var(--color-white); top: 0; right: 15px; background: var(--color-main); font-family: var(--font-medium); font-size: 20px; padding: 10px 20px; } 
.hotline-ab:hover { background: var(--color-hover); color: var(--color-white); } 
.logo-index { margin-bottom: 5px; } 
.title-form { font-family: var(--font-semi); font-size: 45px; text-transform: capitalize; } 
.slogan-form { font-family: var(--font-regular); font-size: 20px; margin: 0; } 
.validation-newsletter { margin-top: 10px; background: #65f820; padding: 15px 20px; border-radius: 15px; border: 4px solid var(--color-main); } 
.col-content textarea { height: 100px; } 
.col-submit { text-align: right; } 
.newsletter-button { margin-left: auto; } 
.newsletter-button input[type="submit"] { background: transparent; border: none; border-radius: 30px !important; font-size: 20px; font-family: var(--font-medium); text-transform: capitalize; } 
.newsletter-button:hover { background: var(--color-main); } 
.newsletter-button:hover input[type="submit"] { color: #fff !important; }