/**************
    GLOBAL
**************/

@font-face {
    font-family: 'Mulish-Regular';
    src: url('../fonts/Mulish-Regular.eot');
    src: url('../fonts/Mulish-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Mulish-Regular.woff2') format('woff2'),
        url('../fonts/Mulish-Regular.woff') format('woff'),
        url('../fonts/Mulish-Regular.ttf') format('truetype'),
        url('../fonts/Mulish-Regular.svg#Mulish-Regular') format('svg');
    font-style: normal;
    font-display: swap;
}



img.aligncenter{
    display: block;
}

figcaption{
    text-align: center;
}

.uk-lightbox iframe {
  max-width: 1200px !important;
}
  
/******* Header ********/
/* toolbar */

/* header bar */
.tm-header-placeholder{
    display: none;
}

.uk-navbar-nav > li > a,
.jo-uk-nav a {
    position: relative;
    display: block;
    overflow: hidden;

    height: 1.2em;
    line-height: 1.2em;
}

.uk-navbar-nav > li > a .menu-text,
.jo-uk-nav a .menu-text {
    display: flex;
    flex-direction: column;

    transition: transform 0.3s ease-out;

    will-change: transform;
    backface-visibility: hidden;
}

.uk-navbar-nav > li > a .menu-text span,
.jo-uk-nav a .menu-text span {
    display: block;
}

/* hover */

.uk-navbar-nav > li > a:hover .menu-text,
.jo-uk-nav a:hover .menu-text {
    transform: translateY(-50%);
}

/* active navbar */




/* Offcanvas mobile menu */
.uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-toggle, .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-toggle:hover{
    color: #000000;
}


.uk-modal-dialog::before{
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background-image: url(https://kahla.ecreati.com/wp-content/uploads/2026/05/image_32.png);
    opacity: 0.1;
}



/* Search */

/* Navbar dropdown */


  
/******* Main Content ********/

/* Home */
.jo-headline{
    position: relative;
}

.jo-headline::after{
    content: "";
    display: block;
    height: 0.5px;
    background-color: #502b1d;
    width: 3.25rem;
    margin: 1.5rem auto 0;
}


.jo-parallax-image {
    position: relative;
    overflow: hidden;
}

.jo-parallax-image .el-image {
    width: 100%;
    height: 110%;

    object-fit: cover;

    transform: translate3d(0px, -4%, 0px) scale(1.1);

    will-change: transform;
    backface-visibility: hidden;

    transition: transform 0.1s ease-out;
}

.popup-hidden{
	display: none;
}

.button-muahangnhanh{
	position: fixed;
    right: 20px;
    bottom: 120px;
}


/* Marquee */
.jo-grid-marquee{
    position:relative;
    overflow:hidden;
}

.jo-grid-marquee .uk-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    width:max-content;
    will-change:transform;
}

.jo-grid-marquee .uk-grid > div{
    flex-shrink:0;
}

/* LEFT */
.jo-grid-marquee-to-left .uk-grid{
    animation:jo-marquee-left 40s linear infinite;
}

/* RIGHT */
.jo-grid-marquee-to-right .uk-grid{
    animation:jo-marquee-right 40s linear infinite;
}

@keyframes jo-marquee-left{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

@keyframes jo-marquee-right{
    from{
        transform:translateX(-25%);
    }
    to{
        transform:translateX(25%);
    }
}

.jo-grid-marquee:hover .uk-grid{
    animation-play-state:paused;
}

/* jo accordion */
.jo-accordion-image .el-item{
    display:none;
}

.jo-accordion-image .el-item.active{
    display:block;
}


/* jo slider video */
.jo-gallery-video .el-item a::after{
    content: '';
    position: absolute;
    background-image: url(../img/play-icon.png);
    background-repeat: no-repeat;
    width: 68px;
    height: 42px;
    background-size: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* jo overlay - testimonials */
.jo-overlay-slider .el-item .el-content,
.jo-overlay-slider .el-item .uk-margin-small-top{
    max-height: 0;
    overflow: hidden;

    opacity: 0;
    transform: translateY(20px);

    transition:
        max-height .5s ease,
        opacity .4s ease,
        transform .4s ease;
}

.jo-overlay-slider .el-item:hover .el-content,
.jo-overlay-slider .el-item:hover .uk-margin-small-top{
    max-height: 200px; /* đủ lớn */
    opacity: 1;
    transform: translateY(0);
}


/* Button mua hàng */
.jo-button-muahang .el-item:first-child .el-content{
	border-radius: 0;
    font-size: 12px;
    padding: 0px 10px;
    background: #502b1d;
    pointer-events:none;
    cursor:default;
    opacity:1;
}

@media only screen and (max-width : 960px){
    .jo-button-muahang{
    	margin-top: 7px !important;
    }
}

@media only screen and (max-width : 640px){
    .jo-button-muahang > .uk-grid{
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        column-gap: 5px; 
        row-gap: 10px;
    }
    
    .jo-button-muahang .el-item{
        margin:0 !important;
    }
    
    .jo-button-muahang .el-item:first-child{
    	grid-column:1 / -1;
    }
    
    .jo-button-muahang .el-content{
        width: 100%;
    	font-size: 12px;
        padding-left: 5px;
        padding-right: 5px;
    }
    
}

/* About us */
.jo-timeline{
    position:relative;
    height:100%;
}

.jo-line{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:2px;
    background:#d9d9d9;
    z-index:1;
}

.jo-progress{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:2px;
    background:#00312d;
    z-index:2;
}

.jo-step{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    font-size: 24px;
    width:72px;
    height:72px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#fff;

    z-index:10;

    transition:.3s ease;
}

.jo-step.active{
    background:#95ff5f;
    color:#000;
}


/* Blogs */

  
  
/* Single Post */
  

/* Services */
.row-solution{
  background-image: url(../img/img-solutions-bg.png);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center center;
}

  
/* Sidebar */

  
  
/* Form liên hệ */
.wpcf7-form{
  max-width: 700px;
  margin: auto;
}

/** Sidebar **/

  
/******* Footer *******/
@keyframes crepuscular {
    0% {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    }
    10% {
        -webkit-mask-size: 200% 100%;
        mask-size: 200% 100%;
    }
    20% {
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }
    30% {
        -webkit-mask-size: 200% 100%;
        mask-size: 200% 100%;
    }
    40% {
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }
    50% {
        -webkit-mask-size: 200% 100%;
        mask-size: 200% 100%;
    }
    60% {
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }
    70% {
        -webkit-mask-size: 200% 100%;
        mask-size: 200% 100%;
    }
    80% {
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }
    90% {
        -webkit-mask-size: 200% 100%;
        mask-size: 200% 100%;
    }
    100% {
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }
    
}



/***********************
      RESPONSIVE
***********************/
/* Smartphones (portrait only ) ----------- */
@media only screen and (max-width : 480px){
    .jo-headline{
        font-size: 1.6rem !important;
    }

    #toptop{
        bottom: 80px !important;
        background: #ffffffa3 !important;
    }
    
    .uk-subnav-pill>*>:first-child{
        font-size: 14px;
        padding: 8px 15px;
    }

    .hotline-phone-ring-wrap{
        left: -20px;
    }

    .uk-button-large{
        padding: 0 30px;
        font-size: 16px;   
    }
	
	.button-muahangnhanh{
		bottom: 20px;
	}
}
  
/* Smartphones (portrait and landscape ) ----------- */
@media only screen and (max-width : 640px){
 
}
  
 
/* Tablets (portrait) ----------- */
@media only screen and (max-width : 960px){
    .jo-headline{
        font-size: 2rem;
    }
    
    .row-solution{
      background-image: none;
    }
}
  
/* Large laptop  ----------- */
@media only screen and (max-width : 1400px) {
  
}

/* Large Desktops  ----------- */
@media only screen and (min-width : 1400px) {
  
}