/*
 Theme Name:   Thanglu theme
 Template:     hello-elementor
 Theme URI:    https://elementor.com/hello-theme/
 Description:  A child theme of Hello Elementor
 Author:       Diem Bui
 Version:      1.0
*/


.bt-beausans-extrabolditalic {
  font-family: 'BT BeauSans', sans-serif;
  font-weight: 800;
  font-style: italic;
}

.circle-scroll-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:20vmin;
}

.circle-scroll-text{
  width:18vmin;
  height:18vmin;
  will-change:transform;
  transform:translateZ(0);
}

.circle-scroll-text svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}
.color_white svg,.color_white text{
    fill: #fff !important;
}
.post_project .type-post:nth-child(3n+2){
padding-top: 40px;
}


@media (max-width: 767px){
  .line_text{
    width: 100px !important;
  }
  .circle-scroll-wrap{
    min-height:28vmin;
  }

  .circle-scroll-text{
    width:28vmin;
    height:28vmin;
  }
  .db-flower-corner .db-flower-corner-flower{
    bottom: 44px !important;
  }
  .db-flower-corner {
            height: 260px !important;
  }
}

/* MENU rớt xuống sau khi loader xong - đúng cho JKit Nav Menu */
.withad-menu-load .jkit-menu > .menu-item{
    opacity: 0;
    transform: translateY(-42px);
    filter: blur(3px);
    transition:
        transform .82s cubic-bezier(.22,1,.36,1),
        opacity .65s ease,
        filter .65s ease;
    will-change: transform, opacity, filter;
}

body.db-menu-ready .withad-menu-load .jkit-menu > .menu-item{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
.button_animation .elementor-button-icon{
  opacity: 0;
    pointer-events: none;
    transition: all .25s;
    width: 0;
}
.button_animation:hover .elementor-button-icon{

    opacity: 1;
    width: .85rem;
}
@media (max-width: 767px){
    .withad-menu-load .jkit-menu > .menu-item{
        transform: translateY(-28px);
    }
}

@media (prefers-reduced-motion: reduce){
    .withad-menu-load .jkit-menu > .menu-item{
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

.contact-switch{
  --card-radius: 28px;
  --card-min-height: 360px;
  --hover-speed: .55s;
  --hover-ease: cubic-bezier(.22,.61,.36,1);

  position: relative;
  display: grid !important;
  width: 50%;
  max-width: 50%;
  flex: 0 0 50%;
  min-height: var(--card-min-height);
  overflow: hidden !important;
  border-radius: var(--card-radius);
}

/* 2 container con chồng lên cùng 1 vị trí */
.contact-switch > .elementor-element,
.contact-switch > .e-con,
.contact-switch > .e-child,
.contact-switch > div{
  grid-area: 1 / 1;
  width: 100% !important;
  min-width: 0;
  min-height: var(--card-min-height);
  margin: 0 !important;
}

/* thêm phần này */
.contact-switch .card-green,
.contact-switch .card-white{
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 360px !important;
  min-height: 360px !important;
  max-height: 360px !important;
  border-radius: var(--card-radius) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition:
    opacity var(--hover-speed) var(--hover-ease),
    visibility var(--hover-speed) var(--hover-ease);
}

/* card trắng canh giữa dọc + ngang */
.contact-switch .card-white{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  align-content: center !important;
  text-align: center !important;

}



/* reset spacing thừa gây lệch chiều cao */
.contact-switch .card-green *,
.contact-switch .card-white *{
  box-sizing: border-box !important;
}

/* trạng thái mặc định */
.contact-switch .card-green{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.contact-switch .card-white{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}

/* hover */
.contact-switch:hover .card-green{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}

.contact-switch:hover .card-white{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 3;
}
.button_about .pp-info-box-button{
  position: absolute;
    top: 26px;
    left: 300px;
}


/* tablet */
@media (max-width: 1024px){
  .contact-switch{
    width: 70%;
    max-width: 70%;
    flex: 0 0 70%;
    --card-min-height: 320px;
  }

  .contact-switch .card-green,
  .contact-switch .card-white{
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
  }
}

/* mobile */
@media (max-width: 767px){
  #db-follow-close-btn{
        width: 50px !important;
    height: 50px !important;
  }
  .button_about .pp-info-box-button{
  position: relative;
           top: 0;
        left: 0;
}
  .db-fixed-flower{
            bottom: 0 !important;
            right: 0 !important;
  }
  .contact-switch{
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    --card-min-height: 360px;
  }
body #db-circle-top-btn .circle-scroll-text{
  width: 64px !important;
        height: 64px !important;
}
 body #db-circle-top-btn .circle-top-arrow{
  width: 28px !important;
 }
 .db-flower-corner {
  width: 260px !important;
 }
 .db-flower-corner-flower{
  width: 100px !important;
        right: 54px !important;
 }
 .db-flower-corner-circle{
  bottom: -42px !important;
 }
 .post_project .type-post:nth-child(3n+2){
  padding-top: 0px;
 }
}
.related .elementor-post__title{
	width:100% !important;
}
.single .elementor-widget-theme-post-content img{
	width:100%;
}