/* HEADER */



.text-gradient { background: linear-gradient(135deg, #EED666 -1.12%, #C39865 99.87%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 







.header { position:relative; background: url(../images/nailfarm/bg-header.png); background-size: cover; } 



.header-phone-icon { font-size: 27px; color: var(--color-main-v2); 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-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-hover); font-family: var(--font-bold); font-size:18px; line-height:1.5; } 



.logo-header { width: 180px; height: 140px; margin-bottom: -40px; text-align: center; border-radius: 0 0 1212px 1212px; background: #FFF; box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15); } 



.logo-header img { margin-top: 15px; } 



.cart-menu .count-cart { width: 15px; height: 15px; background: #D81014; border-radius: 50%; position: absolute; top: 8px; right: 8px; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 10px; } 



/* BUTTON */



.btn-news { display: table; font-size: 15px; color: var(--color-white); font-weight: 700; text-align: center; background: var(--color-main); padding: 12px 30px; margin: 20px auto 0px; border-radius: 50px; } 



.btn-news i { margin-left: 12px; font-size: 19px; position: relative; top: 1px; } 



.btn-news:hover { color: rgb(34, 34, 34); text-decoration: none; background: var(--color-white); 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; } 











/* MENU */



.menu { background:var(--color-white); position:relative; z-index:11; } 



.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 { position: relative; } 



.menu ul li a { display:block; position:relative; font-size:16px; color:var(--color-title); padding: 0; text-transform:uppercase; text-decoration:none; overflow:hidden; font-family:var(--font-semi); } 



.menu ul li a:hover,.menu ul li a.active { color:var(--color-main); 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:hover > ul { left: 100%; } 



.menu ul li ul li { padding-left:0.75rem; padding-right:0.75rem; margin:0px; } 



.menu ul li ul li a { font-size:14px; color:var(--color-title); border-bottom:1px solid #ececec; padding:10px 0px 9px 0px !important; text-transform:uppercase; 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-main); } 



.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-main); } 



.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; } 







/* SLIDESHOW */



.slideshow { position:relative; } 



.slideshow-item { display:block; cursor:pointer; } 



.slideshow:hover .control-slideshow { opacity:1; } 



.control-slideshow { opacity:0; } 







/* PRODUCT */



.grid-productList { 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: 30px; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom:1.5rem; } 



.product { position:relative; display:block; margin-bottom:0rem; background: var(--color-white); z-index: 1; } 



.product::after { position: absolute; content: ''; width: 100%; height: 100%; background: #001A30; bottom: -5px; right: -5px; z-index: -1; } 



.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:5px; min-height: 45px;} 



.name-product a { color: var(--color-title); font-size:15px; text-transform: uppercase; font-family:var(--font-semi); line-height:1.5; } 



.name-product a.text-split { -webkit-line-clamp:2; } 



.name-product a:hover { color:var(--color-hover); } 



.price-product { margin-bottom:0px; text-transform: uppercase; } 



.price-new { font-size:18px; color: var(--color-main); font-family:var(--font-semi); } 



.price-old { font-size:14px; color:#898989; text-decoration:line-through; font-family: var(--font-medium); } 



.price-per { color:var(--color-hover); font-size:14px; border-radius:2px; font-family: var(--font-semi); margin-left: 10px; } 



.cart-product { margin-bottom:0px; } 



.cart-product span { cursor:pointer; color:var(--color-white); text-transform:capitalize; text-align:center; } 



.d-grid { display:grid; } 



.items-productList { background: linear-gradient(135deg, #EED666 -1.12%, #C39865 99.87%); position: relative; padding: 15px; margin-right: 35px; margin-top: 35px; } 



.items-productList::after { position: absolute; content: url(../images/nailfarm/original.png); top: -37px; right: -37px; } 



.box-productList { background: var(--color-main); padding: 25px 15px 30px 15px; border-radius: 15px; } 



.button-redirect { border:1px solid var(--color-main-v2); width: 300px; height: 55px; align-content: center; } 



.fsz\:4 { font-size: 4px !important; } 



.fsz\:8 { font-size: 8px !important; } 



.col-info { width: calc(100% - 50px); } 



.col-cart { width: 40px; height: 40px; } 





.news-name a:hover { color: var(--color-main-v2); } 


.pic-product { position: relative; display: block; overflow: hidden; } 

.pic-product img { display: block; width: 100%; transition: opacity 0.4s ease; } 

.pic-product img:last-child { position: absolute; top: 0; left: 0; opacity: 0; /* ẩn ảnh 2 */ } 

.pic-product:hover img:first-child { opacity: 0; /* ẩn ảnh 1 khi hover */ } 

.pic-product:hover img:last-child { opacity: 1; /* hiện ảnh 2 khi hover */ } 



/* FEEDBACK */



.product-feedback { } 



.image-feedback {  } 



.text-feedback { width: calc(100% - 70px); } 



.box-feedback { width: 500px; height: 320px; color: var(--color-title); } 



.col-main-video { width: 520px; } 



.col-sub-video { width: 160px; margin-left: -80px; position: relative; padding: 5px; background: var(--color-main-v2); } 



.video-main { position:relative; height:445px; } 



.video-main iframe { position:absolute; width:100%; height:100%; top:0px; left:0px; } 



.subvideo { width:100%; height: 335px; padding: 5px; overflow:hidden; background: var(--color-white); } 



.runvideo { margin: 0px; } 



.asubvideo { margin:0 0 5px 0; } 



.col-control { width: 98px; } 

.col-control .control-feedback { position: unset; display: flex; justify-content: space-between; } 

.col-control .owl-prev, .col-control .owl-next { position: unset; } 



/* */

.image-certificate { transform: scale(.8); } 

.owl-item.center .image-certificate { transform: scale(1); transition: all .5s ease-in-out; } 



/* 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 */



.name-process { font-family: var(--font-bold); font-size: 17px; color: var(--color-white); text-transform: capitalize; margin-top: 15px; } 



.items-process { position: relative; padding: 0 25px; } 



.items-process:after { position: absolute; content: '\f101'; font-weight: 500; font-family: 'Font Awesome 6 Pro'; color: var(--color-white); top: 50%; transform: translateY(-50%); left: -50px; font-size: 40px; } 







/* 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 */



.read-news { width: 110px; height: 35px; align-content: center; border: 1.5px solid var(--color-white); border-radius: 200px; display: block; text-align: center; } 











/* 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; } 











/* 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:#fff; margin-bottom:0px; } 











.button.button-cart { width: 180px; padding: 0 15px; height: 45px; border: 1px solid #fff; position: relative; text-align: center; border-radius: 0; transition: background 0.3s; cursor: pointer; } 

.button.button-cart::after,.button.button-cart::before { opacity: 0; visibility: hidden; transition: all 0.5s; } 

.text { display: flex; align-items: center; justify-content: center; } 

.button.button-cart .button-wrapper,.button.button-cart .text,.button.button-cart .icon { overflow: hidden; position: absolute; width: 100%; height: 100%; left: 0; color: #fff; } 

.text { top: 0 } 

.text,.icon { transition: top 0.5s; } 

.button.button-cart .icon { color: #fff; top: 100%; display: flex; align-items: center; justify-content: center; } 

.button.button-cart .icon svg { width: 30px; height: 30px; color: #fff; } 

.button.button-cart:hover { background: var(--color-main-v2); } 

.button.button-cart:hover .text { top: -100%; } 

.button.button-cart:hover .icon { top: 0; } 

.button.button-cart:hover .icon svg { color: #000; } 

.button.button-cart:hover:before,.button.button-cart:hover:after { opacity: 1; visibility: visible; } 

.button.button-cart:hover:after { bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px); } 

.button.button-cart:hover:before { bottom: calc(var(--height) + var(--gap-between-tooltip-to-button)); } 







/* FOOTER */

.footer { border-top: 2px solid #4D6E8A; } 



.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-white); line-height:2; } 



.footer-article { background: #013058; } 



.footer-title { text-transform:uppercase; font-size:24px; font-family:var(--font-semi); color:var(--color-main-v2); } 



.footer-ul { list-style:none; padding:0; margin:0px; color: var(--color-white); } 



.footer-ul li { margin-bottom:10px; padding-bottom: 10px; border-bottom: 1px dashed #898989; } 



.footer-ul li:last-child { margin-bottom:0px; } 



.footer-ul li a { display: flex; align-items: center; gap: 20px; text-transform: capitalize; color:var(--color-white); font-size:16px; line-height:2; font-family: var(--font-medium); } 



.footer-ul li a:hover { color: var(--color-main-v2); } 



.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:#fff !important; color:var(--color-main ) !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%); } 











/* 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); } 



.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; }