/**
* Theme Name: Aesthetica Child
* Description: This is a child theme of Aesthetica.
* Author: <a href="https://cmsmasters.net/">cmsmasters</a>
* Template: aesthetica
* Version: 1.0.0
* Tested up to: 6.6
* Requires PHP: 7.4
* License:
* License URI:
* Text Domain: aesthetica-child
* Copyright: cmsmasters 2025 / All Rights Reserved
*/


.full-redirect .elementor-widget-heading a {
  position: relative;
  z-index: 2;
}
.full-redirect .elementor-element:hover .permanent-title {
	opacity: 0;
	visibility: hidden;
}
.full-redirect .elementor-element:hover .in-full-redirect {
	opacity: 1;
	visibility: visible;
}
.full-redirect .in-full-redirect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
    z-index: 2;
}
/* tạo lớp click phủ toàn bộ */
.full-redirect .elementor-widget-heading a::before {
  content: "";
  position: absolute;
  inset: -9999px; /* phủ rộng ra toàn container */
  z-index: 1;
}
.wrap-popup-sb .bkg-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
   visibility: hidden;
}
.wrap-popup-sb.show .bkg-popup {
  opacity: 1;
  pointer-events: auto;
   visibility: visible;
}
#menu-leftside {
  position: fixed;
  top: 0;
  left: 0;
  width: 64px;
  height: 100vh;
  z-index: 9999;
}
.menu-leftside > .elementor,
.menu-leftside > .elementor > .elementor-inner,
.menu-leftside > .elementor > .elementor-inner  > .elementor-section-wrap,
.menu-leftside > .elementor > .elementor-inner  > .elementor-section-wrap > .elementor-element,
.menu-leftside > .elementor > .elementor-inner  > .elementor-section-wrap > .elementor-element  > .e-con-inner{
	height: 100%;
}



.menu-leftside .tab,
.menu-leftside .tab-content {
  display: none;
}

.menu-leftside .tab.active,
.menu-leftside .tab-content.active {
  display: block;
}
.menu-leftside .icon-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.menu-leftside .elementor-widget-n-tabs .e-n-tabs-content{
	display: none;
}
.menu-leftside .elementor-widget-n-tabs .e-n-tab-title-text{
	display: none;
}
.menu-leftside .elementor-widget-n-tabs button:hover .e-n-tab-title-text {
    display: block;
    position: absolute;
    left: calc(100% + 20px);
    background: #000;
    font-size: 14px;
    text-transform: none;
    white-space: nowrap;
    padding: 8px 15px;
    border-radius: 5px;
}
.menu-leftside .elementor-widget-n-tabs .e-n-tabs-heading{
	    flex-direction: column;
    width: 64px;
    gap: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: rgba(0, 0, 0, 0.6);
}
.menu-leftside .tab-btn {
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.25s ease;
}

.menu-leftside .tab-btn.active {
  opacity: 1;
  background: rgba(255,255,255,0.1);
}


.menu-sidebar-tabs .e-n-tabs-heading {
  align-items: center;
}
.menu-sidebar-tabs {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
}

.menu-sidebar-tabs::before {
    content: "";
    position: fixed;
    left: 0;
    top: 50%;
    width: 64px;
    height: 0;
    background: rgba(0, 0, 0, 1);
    transform: translateY(-50%);
    transition: height 0.3s ease;
    z-index: -1;
}

.menu-sidebar-tabs:hover::before {
  height: 100vh;
}
.menu-sidebar-tabs .e-n-tab-title,
.menu-sidebar-tabs .e-n-tab-title .e-n-tab-icon{
	overflow: visible;
}
.menu-sidebar-tabs .e-n-tab-title:hover {
  background: transparent;
}
.menu-sidebar-tabs .e-n-tabs-heading button i,
.menu-sidebar-tabs .e-n-tabs-heading button svg{
	color: #fff!important;
	fill: #fff!important;
}
.menu-sidebar-tabs .e-n-tabs-heading button:before{
	background-color: transparent !important;
}
.menu-sidebar-tabs .e-n-tabs-heading button{
	padding-left: 0;
    padding-right: 0;
    width: 100%;
    text-align: center;
	background-color: transparent !important;
	color: #fff!important;
}

/* indicator */
.following-fixed {
    position: absolute;
    left: -12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    will-change: top;
	background: transparent;
}
.menu-leftside:hover .following-fixed{
	opacity: 1;
}
.following-fixed{
    width: 75px;
    height: 12px;
    left: 20px;
    top: calc(50% - 15px);
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    z-index: 10;
}
.menu-leftside.active .elementor-widget-n-tabs .e-n-tabs-content {
    display: block;
    position: fixed;
    left: 85px;
    top: 0px;
    width: 400px;
}


.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.6);
  z-index: 998;
  display: none;
}

/* ================= CONTENT WRAP ================= */
.menu-content-wrap {
  position: relative;
  top: 0;
  left: 0; /* đúng vị trí sidebar icon */
  width: 420px;
  height: 100vh;
  background: #fff;
  z-index: 999;
  transform: translateX(0px);
  opacity: 0;
  pointer-events: none;
  transition: all .3s ease;
}

/* khi mở */
.menu-content-wrap.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* ================= TAB CONTENT ================= */
.menu-content-wrap [class^="menutab-"] {
  display: none;
}

.menu-content-wrap .menutab-active {
  display: block;
}

/* ================= CLOSE ICON ================= */
.closebox-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  z-index: 10;
  font-size: 18px;
  line-height: 1.5;
  cursor: pointer;
  top: 20px;
  right: 30px;
  width: 30px;
  height: 30px;
  border: 2px solid;
  z-index: 3;
  border-radius: 50%;
  font-variation-settings: "ital" 0, "wdth" 125, "wght" 450;
}
.closebox-icon .elementor-icon {
    font-size: 18px;
}
.menu-leftside.is-show .menu-tab-content .menutab{
	display: none;
}
.menu-leftside.is-show .menu-tab-content .menutab.is-active{
	display: block;
}
.menu-leftside .menu-tab-content {
	display: none!important;
}
.menu-leftside.is-show .menu-tab-content {
	opacity: 1;
	display: flex!important;
}
.menu-tab-content {
    position: fixed;
    top: 0;
    opacity: 0;
    left: 64px;
    width: calc(100% - 64px);
    height: 100vh;
    display: none;
    background-color: rgba(255, 255, 255, 0.8);
    transition: all .3s ease;
    z-index: 1;
    /* inset: 0; */
}
.menu-content-wrap {
    background: #FBF6EF;
    z-index: 9999999;
    opacity: 1;
    padding: 0 35px 0 50px;
    margin-left: 0 !important;
    transform: translateX(0px);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    pointer-events: auto;
}
.menu-leftside .button-menu {
	margin-bottom: 10px!important;
	margin-top: 5px;
}
@media (max-width: 2200px) {
    .following-fixed-svg {
        left: 35px;
    }
}

@media(max-width: 1023px){
	.mb-click-to-show{
		justify-content: center!important;
	}
	.mb-click-to-show.is-open > .elementor-element{
		    opacity: 1!important;
	}
	.mb-click-to-show > .elementor-element{
		    opacity: 1!important;
			transform: translate(0, 0) !important;
	}
	.mb-click-to-show > .elementor-element.cmsmasters-button-align-center{
		display: none;
	}
	.mb-click-to-show.is-open > .elementor-element.cmsmasters-button-align-center{
		display: block;
	}
	
	.mb-click-to-show{
		background-position: center center !important;
	}
}


@media(max-width: 767px){
    .tap-reveal-card.is-open .tap-reveal-options {
        z-index: 0;
    }
	#menu-leftside {
		top: inherit;
		left: 0;
		height: 64px;
		bottom: 0;
		        width: 100%;
	}
	.menu-sidebar-tabs::before,
	.menu-sidebar-tabs:hover::before{
		display: none!important;
	}
	.menu-leftside button:after{
		background-color: transparent!important;
	}
	.menu-leftside .elementor-widget-n-tabs .e-n-tabs-heading {
		flex-direction: row;
		    display: flex;
		width: 100%;
		gap: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
		padding-right: 0px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 0px;
		background-color: rgba(0, 0, 0, 1);
		justify-content: space-around;
	}
	.menu-leftside .elementor-widget-n-tabs .e-n-tab-title .e-n-tab-icon i,
	.menu-leftside .elementor-widget-n-tabs .e-n-tab-title .e-n-tab-icon svg {
		height: 31px;
        width: 31px;
        font-size: 31px;
	}
	.menu-sidebar-tabs .e-n-tabs-heading button {
		padding-left: 10px;
		padding-right: 10px;
	}
	.menu-content-wrap {
        width: 100%;
        height: 70vh;
        align-items: flex-start;
        justify-content: flex-start;
		padding: 15px 15px 15px 15px;
		overflow-y: auto;
		        margin-bottom: 60px;
    }
	.menu-tab-content {
        top: 0;
        left: 0;
        width: calc(100%);
        height: 100vh;
        display: flex!important;
        align-items: flex-end;
        justify-content: flex-end;
    }
	.following-fixed {
        width: 75px;
        height: 12px;
        left: 30px;
        top: -2px;
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
    }
	.menu-leftside .elementor-widget-n-tabs button:hover .e-n-tab-title-text{
		display: none;
	}
	.closebox-icon .elementor-icon svg {
        font-size: 18px;
        width: 14px !important;
        height: 25px !important;
        /* line-height: 25px; */
        text-align: center;
        vertical-align: middle;
        align-items: center;
        justify-content: center;
    }
	.following-fixed svg path{
		fill: rgba(0,0,0,1)!important;
	}
	.closebox-icon .elementor-icon {
		font-size: 20px;
		line-height: 20px;
		margin-top: 1px;
	}
}