.box .content{
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    transform: rotateY(0deg);
    backface-visibility: hidden;
    transition: transform 0.5s ease;
}
.front {
    opacity: 1;
    visibility: visible;
    transform: rotateY(0deg);
}
.box2{
    margin-top: -80px;
    margin-bottom: 30px;
}

.back {
    opacity: 0;
    visibility: hidden;
    transform: rotateY(180deg);
    
}


/* BOX ICON */
.lakit-iconbox__box_body {
    display :flex;
    flex-wrap: wrap;
    align-content: center;
    margin: -80px 0px 0px 0px;
    transition: margin 0.5s ease;
  
}

.lakit-iconbox__box_body.box-hover {
    margin: 0px 0px 0px 0px;
    transition: margin 0.5s ease;
}
@media (max-width:1439px) and (min-width: 767px){
    .lakit-iconbox__title {
        width: 60%;
    }
}
.lakit-iconbox__title {
    background-color: #fff;
    padding: 5px;
    background-image: url("/wp-content/uploads/2024/05/line-text.png");
    background-position-x : 0%;
    background-position-y : 50%;
    background-repeat: no-repeat;
    background-size: 0% 60%; /* Bắt đầu với kích thước 0% chiều ngang */
    transition: background-size 1s ease, background-color 0.5s ease,background-position 1.s ease;
    position: relative; /* Thiết lập vị trí tương đối để đặt pseudo-elements */
}

.lakit-iconbox__title.box-hover {
    background-size: 100% 60%; /* Mở rộng ra toàn bộ chiều ngang */
    background-color: #ffffff00;
    transition: background-size 0.5s ease, background-color 0.5s ease;
}


.lakit-iconbox__title::before,
.lakit-iconbox__title::after {
    content: '';
    position: absolute;
    width: 0%; /* Chiều rộng ban đầu của gạch */
    height: 1px;
    background-color: black;
    transition: width 0.3s ease; /* Chuyển đổi chiều rộng với thời gian và độ trễ */
}

.lakit-iconbox__title::before {
    top: 0;
    left: 22%;
}

.lakit-iconbox__title::after {
    bottom: 0;
    left: 22%;
}

.lakit-iconbox__title.box-hover::before,
.lakit-iconbox__title.box-hover::after {
    width: 60%; /* Chiều rộng của gạch khi hover */
    transition: width 0.5s ease 0.4s; /* Chuyển đổi chiều rộng với thời gian, độ trễ và kiểu */
}

.lakit-iconbox.lakit-iconbox__icon-align-top.elementor-animation-.box-hover {
    margin: -120px 0px 0px 0px;
    box-shadow: 0px -17px 11px 0px #00000026;
   
}
.lakit-iconbox.lakit-iconbox__icon-align-top.elementor-animation-{
    margin: 0px 0px 0px 0px;
    overflow: initial;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 0px 0px #00000000;
    --shadow_blur: 11px;
    border-radius: 20px 20px 0px 0px;
    transition: box-shadow 0.5s ease, margin 0.5s ease;
}

.lakit-iconbox__box_icon.icon_pos_top {
    transform: rotate(-30deg);
    transition: transform 0.5s ease;
}
.lakit-iconbox__box_icon.icon_pos_top.box-hover {
    transform: rotate(0deg);
}



/* icon social*/

div.icon-container .elementor-grid-item{
    position: relative; /* Đặt vị trí tương đối để các phần tử con có thể dùng vị trí tuyệt đối */
    height: 80px;
    overflow: hidden;
    padding: 20px 0px 0px 0px;
    transition: padding 0.5s ease;
}

div.icon-container .elementor-grid-item::before {
    
    content: "";
    position: absolute;

    left: 0;
    bottom: 0;
    width: 100%;
    height: 30%;
    background-color: #F7F6F7;
    background-image: url('/wp-content/uploads/2024/05/forground-icon.png');
    background-position:0px 0px; 
    background-size: 100% 10px;
    background-repeat: no-repeat;
    z-index: 2; /* Đặt nó trên các phần tử con khác */
    pointer-events: none; /* Để hình ảnh không chặn các tương tác của người dùng với các phần tử khác */
}

div.icon-container .e-font-icon-svg {
    position: relative; /* Đảm bảo các phần tử con nằm phía trên hình nền */
    z-index: 1; /* Đặt các phần tử này trên hình nền */
     transform: rotate(-35deg);
     transition: transform 0.5s ease;
}

div.icon-container .e-font-icon-svg.box-hover {
     transform: rotate(0deg);
     transition: transform 0.5s ease;
}
div.icon-container  .elementor-grid-item.box-hover{
    padding: 8px 0px 0px 0px;
    transition: padding 0.5s ease;
}


/* ntab */


.ym-tab .lakit-ntab-title {
    margin: 80px 0px 0px 0px!important;
    transition: margin 0.5s ease;
}

.ym-tab .lakit-ntab-title.box-hover {
    margin: 0px 0px 0px 0px!important;
    transition: margin 0.5s ease;
}
.ym-tab .lakit-ntab-icon {
    margin: 0px 0px -70px 0px !important;
    transform: rotate(-15deg);
    transition: margin 0.5s ease;
}
.ym-tab .lakit-ntab-icon.box-hover {
    margin: 0px 0px 0px 0px !important;
    transform: rotate(0deg);
    transition: margin 0.5s ease, transform 0.5s ease;
}
.ym-tab .ntabs--title {
    background-color: #fff;
    padding: 5px;
    background-image: url("/wp-content/uploads/2024/05/line-text.png");
    background-position-x : 0%;
    background-position-y : 50%;
    background-repeat: no-repeat;
    background-size: 0% 100%; /* Bắt đầu với kích thước 0% chiều ngang */
    margin: 0px 0px 0px 0px!important;
    transition: background-size 1s ease, background-color 0.5s ease;
    position: relative; /* Thiết lập vị trí tương đối để đặt pseudo-elements */
}
    
.ym-tab .ntabs--title.box-hover {
    background-size: 100% 100%; /* Mở rộng ra toàn bộ chiều ngang */
    background-color: #ffffff00;
    transition: background-size 0.5s ease, background-color 0.5s ease;
 
}
.ym-tab .e-active .lakit-ntab-icon {
    transform: rotate(0deg);
}

.ym-tab .ntabs--title::before,
.ym-tab .ntabs--title::after {
    content: '';
    position: absolute;
    width: 0%; /* Chiều rộng ban đầu của gạch */
    height: 2px;
    background-color: black;
    transition: width 0.3s ease; /* Chuyển đổi chiều rộng với thời gian và độ trễ */
}

.ym-tab .ntabs--title::before {
    top: 0;
    left: 0;
}

.ym-tab .ntabs--title::after {
    bottom: 0;
    left: 0;
}

.ym-tab .ntabs--title.box-hover::before,
.ym-tab .ntabs--title.box-hover::after {
    width: 100%; /* Chiều rộng của gạch khi hover */
    transition: width 0.5s ease 0.4s; /* Chuyển đổi chiều rộng với thời gian, độ trễ và kiểu */
}




/* icon social*/

.lakit-socialshare .elementor-share-btn__icon {
    position: relative; /* Đảm bảo các phần tử con nằm phía trên hình nền */
    z-index: 1; /* Đặt các phần tử này trên hình nền */
     transform: rotate(-35deg);
     transition: transform 0.5s ease;
}

.lakit-socialshare .elementor-share-btn__icon.box-hover {
     transform: rotate(0deg);
     transition: transform 0.5s ease;
}

div.icon-container .lakit-socialshare .elementor-grid-item.box-hover{
    padding: 0px 0px 0px 0px;
    transition: padding 0.5s ease;
}

.lakit-socialshare .elementor-share-btn__icon        {
    background-color: #41404200;
    --icon-padding: 0.4em;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: var(--e-global-color-b2e9d1f);
}


/* form#commentform.comment-form {
    display: flex;
} */

form#commentform.comment-form textarea {
    width: 100%;
    height: 35px;
    min-height: 30px;
    max-width: 100%;
    padding: 0;
    vertical-align: top;
    border-width: 0 0 1px;
}

form#commentform.comment-form input[type=submit], button[type=submit], .button {
    font-family: 'Roboto Slab';
    font-weight: 900;
    min-width: 32px;
    font-size: 30px;
    display: inline-block;
    background-color: #ffffff00;
    color: var(--theme-secondary-color);
    margin: 0;
    padding: 4px 0px 18px 0px;
    cursor: pointer;
    text-align: center;
    line-height: 1;
    border: none;
    border-radius: 0;
    text-transform: none;
    transition: all 0.3s ease;
    width: 70px;
}
.woocommerce-Reviews-title, .comment-respond .comment-reply-title {
    font-family: 'Roboto Slab';
}


.home-menu-ym .menu-item {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 1s ease, transform 0.5s ease;
    position: relative;
}
.home-menu-ym .menu-item::after {
    content: "|";
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    color: #000;
    font-size: 30px;
    font-weight: 200;
    opacity: 0;
    transition: opacity 5s ease;
}
.home-menu-ym .menu-item.show::after {
    opacity: 1;
}

.home-menu-ym .menu-item:last-child::after {
    content: "";
}

.home-menu-ym .menu-item.show {
    opacity: 1;
    transform: translateY(0);
}

.ef-ym .elementor-button-icon{
    opacity: 0;
    transform: translateY(-50px)!important;
    transition: transform 0.5s ease,opacity 0.5s ease;
    z-index: -1;
}

.ef-ym .elementor-button-icon.box-hover{
    opacity: 1;
    transform: translateY(0px)!important;
    transition: transform 0.5s ease,opacity 0.5s ease;
    transition-delay: 0.5s;
}
.button-ym-slider .elementor-button {
    padding: 10px 20px; /* Updated padding */
    display: inline-flex; /* Ensures the button doesn't stretch */
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap; /* Prevent text from wrapping */
    width: 60px; /* Initial width */
    height: auto;
    transition: width 0.5s ease, padding 0.5s ease; /* Transition for padding and width */
}

.button-ym-slider .elementor-button.box-hover {
    width: 200px; /* Width when hovered */
}

.button-ym-slider .elementor-button-text {
    opacity: 0;
    width: 0;
    white-space: nowrap; /* Prevent text from wrapping */
    transition: opacity 0.5s ease, width 0.5s ease;
}

.button-ym-slider .elementor-button-text.box-hover {
    opacity: 1;
    width: auto;
    
}

.button-ym-slider .elementor-button-icon {
    transition: opacity 0.5s ease, width 0.5s ease;
}

.button-ym-slider .elementor-button-icon.box-hover {
    opacity: 0;
    width: 0;
}


@keyframes blink {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

.typing-cursor {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 20px;
    background-color: #000;
    animation: blink 1s infinite;
}

input[id^="typing-carousel"]:focus::placeholder {
    color: transparent;
}
.marker-text{
    background-image: url(/wp-content/uploads/2024/05/Shape-1-copy-6.png);
    background-position: 32% 100%;
    background-repeat: no-repeat;
    background-size: 0% 100%;
}
.marker-text.white{
    background-image: url(/wp-content/uploads/2024/06/marker-white.png);
    background-position: 42% 100%;
}
.marker-text.show{
    background-position: 50% 100%;
    background-size: 34% 100%;
    transition: background-position 2.4s ease,background-size 2s ease;
    transition-delay: 1.5s;
}
.marker-text.white.show{
    background-size: 20% 100%;
}

.ym-post .lakit-ntab-title{
    background-image: url("/wp-content/uploads/2024/05/line-text.png");
    padding: 10px;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    margin: 0px 0px 0px 0px!important;
    transition: background-size 0.5s ease;
    position: relative; /* Thiết lập vị trí tương đối để đặt pseudo-elements */
}

.ym-post .lakit-ntab-title:hover{
    background-size: 100% 100%;
    color:var(--theme-secondary-color);
    text-shadow: none;
    transition: background-size 0.5s ease, color 0.5s ease;

}
.ym-post .lakit-ntab-title:hover.e-active .ntabs--title {
    color:var(--theme-secondary-color);
}
.ym-post .lakit-ntab-title.e-active .ntabs--title {
    color:var(--e-global-color-secondary);
}
.ym-post .lakit-ntabs-heading.e--sticky.e-sticky--activated{
    z-index: 1;
    padding: 25px 0px 15px 0px;
    margin: -1px;
}

.ym-post img.lakit-posts__thumbnail-img:hover {
    transform: scale(1.15);
}

.text-view-ym{
    animation: textview-ym 0.34s linear infinite;
}
@keyframes textview-ym {
  0% {
   transform: rotateY('10px');
  }
  25% {
    transform: rotateY('20px');
  }
  50% {
    transform: rotateY('40px');
  }
  75% {
   transform: rotateY('50px');
  }
  100% {
    transform: rotateY('60px');
  }
}

@media screen and (max-width:768px) {
    .marker-text.white.show {
        background-size: 90% 100%;
    }
    .marker-text.show {
        background-size: 80% 100%;
    }
    .home-menu-ym .menu-item::after {
        right: -8%;
    }

    .lakit-iconbox__box_icon.icon_pos_top {
        transform: rotate(0deg);
    }
}
@media screen and (min-width:1443px) {
    .marker-text.white.show{
        background-size: 17% 100%;
    }
    
}