li.button {
    border:1px solid #ffffff!important;
}
li.button a {
    padding:0 28.5px!important;
}
.mbai-before-after-container {
    border-radius:30px;
}
/*style newsletter*/
/* 1. Đưa form và các phần tử con lên cùng một hàng thẳng hàng */
.tnp-subscription form {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px; /* Khoảng cách giữa ô nhập và nút bấm */
    width: 100%;
    max-width: 700px; /* Giới hạn chiều rộng tối đa của form */
    margin: 0 auto;
}

/* 2. Style lại khu vực ô nhập Email */
.tnp-subscription .tnp-field-email {
    flex: 1; /* Để ô input tự co giãn chiếm trọn khoảng trống bên trái */
    display: flex;
    flex-direction: column;
    margin:0!important;
}


/* Ẩn hoàn toàn chữ "Email" (Label) phía trên nếu không cần thiết */
.tnp-subscription .tnp-field-email label {
    display: none; 
}

/* Biến ô Input thành một đường gạch ngang tinh tế */
.tnp-subscription {
    max-width:inherit!important;
}
.tnp-subscription input.tnp-email {
    border-radius: 0 !important;
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7) !important;
    color: #ffffff !important;
    font-size: 16px;
    padding: 13px 0 !important;
    outline: none !important;
}

.elementor-widget-n-accordion .e-n-accordion-item-title>.e-n-accordion-item-title-icon {
    width: 34px;
    min-width: 34px;
}

/* Đổi màu chữ gợi ý (Placeholder) thành màu trắng mờ mượt mà */
.tnp-subscription input.tnp-email::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 1;
}

/* 3. Style lại nút bấm SUBMIT sang màu vàng Gold sang trọng */
.tnp-subscription .tnp-field-button {
    margin: 0 !important;
}

.tnp-subscription input.tnp-submit {
    background-color: #BEA06B!important; /* Màu vàng Gold theo thiết kế của bạn */
    color: #ffffff !important; /* Màu chữ nút bấm */
    font-size: 16px;
    font-weight: 500;
        
            font-family: "Lato", Sans-serif;
    text-transform: uppercase; /* Viết hoa toàn bộ chữ */
    letter-spacing: 1px; /* Tạo khoảng cách thưa giữa các chữ cái */
    border: none !important;
    padding: 13.5px 50px !important; /* Độ rộng của nút bấm */
    cursor: pointer;
    transition: all 0.3s ease; /* Hiệu ứng mượt mà khi di chuột */
    border-radius:0!important;
}

/* Hiệu ứng đổi màu nhẹ khi người dùng di chuột (Hover) vào nút */
.tnp-subscription input.tnp-submit:hover {
    background-color: #b0905a !important; /* Màu vàng sậm hơn một chút */
}
/****wedget accordion****/
.custom-accordion-wrapper {
    width: 100%;
}
.accordion-item {
        border-bottom: 1px solid #40464D;
    padding: 54px 0;
}
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    cursor: pointer;
    user-select: none;
}
.header-left {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* Khoảng cách từ ảnh SVG sang tiêu đề */
}

/* ĐỊNH DẠNG KHUNG LOGO/SVG THEO THIẾT KẾ */
.accordion-custom-img {
    width: 32px;  /* Chiều rộng của file SVG */
    height: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 2px; /* Đảm bảo đỉnh SVG cân bằng với dòng đầu tiên của Title */
}
.accordion-custom-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.accordion-title {
    color: #ffffff !important;
    margin: 0 !important;
    font-size: 22px!important;
    font-family: "Lato", Sans-serif;
    font-weight: 500;
    line-height: 35px;
}
.accordion-arrow {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 6px;
}
.accordion-arrow::before, .accordion-arrow::after {
    content: '';
    position: absolute;
    background-color: #ffffff;
    transition: transform 0.3s ease;
}
.accordion-arrow::before {
    top: 7px;
    left: 0;
    width: 14px;
    height: 1px;
}
.accordion-arrow::after {
    top: 0;
    left: 6px;
    width: 1px;
    height: 14px;
}
.accordion-item.is-active .accordion-arrow::after {
    transform: rotate(90deg);
    opacity: 0;
}
.accordion-item.is-active .accordion-arrow::before {
    transform: rotate(180deg);
}
.accordion-content {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.6;
}
.content-inner {
    font-size: 18px!important;
    line-height: 27px!important;
    font-weight:500;
    font-family: "Lato", Sans-serif;
    padding-top: 15px;
    color:#ffffff;
    padding-left: 52px; /* Khoảng cách lùi đầu dòng text (bằng width của SVG + gap) */
}
/*****wedget tab_before_after*****/
 /* --- CSS CHO DESKTOP (MÁY TÍNH) --- */
        .ba-tabs-widget-wrapper {
            width: 100%;
            max-width: 1240px;
            margin: 0 auto;
        }
        .ba-tabs-main-layout {
            display: flex;
            gap: 130px;
            align-items: center;
            margin-bottom: 40px;
        }
        .ba-tabs-view-zone {
            flex: 1;
            max-width: 55%;
            aspect-ratio: 4 / 3;
            position: relative;
			margin-bottom: 50px !important;
        }
        .ba-tabs-content-zone {
            flex: 1;
        }
        .ba-tab-content-item {
            width: 100%;
            height: 100%;
        }
.generation-product {
    font-size: 12px !important;
    margin-top: 15px;
}
.tnp-subscription form p {
    color: #fff;
    text-align: center;
    width: 100%;
    font-size: 20px;
}
        .ba-slider-container {
            position: relative;
            width: 100%;
            height: 100%;
            user-select: none;
            border-radius: 24px;
            overflow: hidden;
        }
        .ba-slider-wrapper {
            position: relative !important;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .ba-slider-wrapper img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            pointer-events: none;
        }
        .ba-img-before {
            z-index: 2;
            clip-path: inset(0 50% 0 0);
        }
        .ba-img-after {
            z-index: 1;
        }

        /* --- THANH ĐƯỜNG LINE VÀ NÚT KÉO TRÒN CHUẨN FIGMA --- */
        .ba-handle {
            position: absolute !important;
            top: 0 !important;
            bottom: 0 !important;
            height: 100% !important;
            left: 50%;
            width: 2px;
            background: #ffffff;
            z-index: 3;
            cursor: ew-resize;
            transform: translateX(-50%);
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        .ba-handle::after {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            background: #ffffff;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
            z-index: 5;
        }
        .ba-handle-arrows {
            position: absolute;
            z-index: 6;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 32px;
            pointer-events: none;
        }
        .ba-handle-arrows::before, 
        .ba-handle-arrows::after {
            content: '';
            border: solid #ffffff;
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 3px;
        }
        .ba-handle-arrows::before { transform: rotate(135deg); }
        .ba-handle-arrows::after { transform: rotate(-45deg); }
        
        .ba-main-title {
            font-size: 40px;
                font-family: "Lato", Sans-serif;
            line-height: 1.2;
            font-weight: 300;
            color: #0b1a30;
            margin-bottom: 20px;
            text-transform: uppercase;
        }
        .ba-main-desc {
            font-size: 20px;
            line-height: 30px;
            font-weight:300;
                font-family: "Lato", Sans-serif;
            color: #555555;
            
        }

        /* --- HỆ THỐNG THUMBNAIL --- */
        .ba-tabs-thumbs-navigation {
            display: flex;
            gap: 32px;
            justify-content: flex-start;
        }
        .ba-thumb-trigger { 
            width:20%;
            aspect-ratio: 1 / 1;
            border-radius: 30px;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.25s ease;
            opacity: 0.6;
            height:186px;
        }
        .ba-thumb-trigger img {
            width:100%; 
        }
        .ba-thumb-image-container {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .ba-thumb-image-container img {
            width: 100%;
            height: 100%!important;
            object-fit: cover;
        }
        .ba-thumb-mock-handle {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 1.5px;
            background: rgba(255, 255, 255, 0.9);
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
        }
        .ba-thumb-mock-handle::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 5px;
            height: 5px;
            background: #ffffff;
            border-radius: 50%;
            z-index: 4;
        }
        .ba-thumb-mock-arrows {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            justify-content: space-between;
            width: 18px;
            z-index: 3;
        }
        .ba-thumb-mock-arrows::before,
        .ba-thumb-mock-arrows::after {
            content: '';
            border: solid #ffffff;
            border-width: 0 1.5px 1.5px 0;
            display: inline-block;
            padding: 1.5px;
        }
        .ba-thumb-mock-arrows::before { transform: rotate(135deg); }
        .ba-thumb-mock-arrows::after { transform: rotate(-45deg); }

        .ba-thumb-trigger.is-active { 
            opacity: 1; 
            box-shadow: 0 6px 15px rgba(194, 162, 107, 0.2);
        }
        
        /* --- CSS TỐI ƯU RESPONSIVE MOBILE (DƯỚI 768PX) --- */
        @media (max-width: 1024px) {
            .ba-tabs-main-layout {
                gap: 50px;
            }
            .accordion-item {
                padding: 24px 0;
            }
        }
        
        @media (max-width: 768px) {
            .ba-tabs-main-layout { 
                flex-direction: column-reverse;
                margin-bottom: 20px;
                gap: 20px;
            }   
            .ba-tabs-view-zone {
                max-width: 100%;
                width: 100%;
                margin: 0 auto;
                aspect-ratio: 4 / 3;
            }
            .ba-slider-wrapper {
                height: 100% !important;
            }
            .ba-slider-wrapper img {
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important; 
            }
            .ba-tabs-thumbs-navigation {
                gap: 15px;
            }
            .ba-thumb-trigger {  
                border-radius: 10px; 
            }
            .ba-tabs-thumbs-navigation {
                gap: 10px; 
            }
            .ba-thumb-trigger {
                width: 32.2%;
                height: 96px;
             
            }
        }
        @media (max-width: 480px) { 
            .ba-tabs-thumbs-navigation {
                flex-wrap:wrap;
                gap:8px;
            }
            
            .ba-thumb-trigger {
            width: 60px;
            height:50px;
            }
            .tnp-subscription form {
                flex-wrap:wrap;
            }
            .tnp-subscription .tnp-field-email {
                flex: inherit;
                width:100%;
            }
            .tnp-subscription input.tnp-email {
                width:100%;
            }
            
        }
/*****wedget slider history*****/

/*******/
.e-n-accordion-item-title-icon {
        background: #92368C;
    width: 34px!important;
    height: 34px;
    border-radius: 6px;
    text-align: center;
    display: flex;
    justify-content: space-around;
}
.e-n-accordion-item-title,
.e-n-accordion-item >div {
    padding-left:0!important;
    padding-right:0!important;
}
.e-n-accordion-item >div {
    padding-bottom:20px;
}
details {
    border-bottom:1px solid #E7E7E7;
}
.elementor-field-textual.elementor-size-md {
    padding: 12px 16px!important;
    min-height:50px!important;
}
.elementor-field-type-email,
.elementor-field-type-textarea,
.elementor-field-type-tel {
    margin-top:15px;
}
.elementor-field-type-acceptance {
    margin-top:20px;
}
.elementor-field-type-acceptance input {
    margin-top:0;
}
.elementor-field-type-acceptance label {
    font-size:14px;
    color:#5A6E76;
   font-family: "Lato", Sans-serif;
    font-weight:500;
}
.elementor-widget-image a img[src$=".svg"] {
    width: auto!important;
}
.elementor-location-header .sub-menu li a {
    border:none!important;
}
.elementor-location-header {
        position: relative;
    z-index: 9999;
}




@media only screen and (min-width: 1025px) {
     li.button {
        margin-left:15px!important;
    }   
}
@media only screen and (max-width: 1024px) {
    .elementor-location-header .elementor-nav-menu--dropdown {
       position: fixed;
        z-index: 999;
        width: 100%;
        left: 0;
        padding-top: 47px;
        margin: 0;
        padding-bottom: 40px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .elementor-location-header .elementor-nav-menu--dropdown li a {
        padding-left:0;
        padding-right:0;
    }
    .elementor-location-header .e-con-inner >div:first-child,
    .elementor-location-header .elementor-menu-toggle {
        z-index: 9999 !important;
        position: relative;
    }
    .elementor-location-header .elementor-nav-menu--dropdown .sub-menu {
        position: static;
        padding: 0 5px 0 5px;
    }
   .elementor-location-header li.button {
        display:inline-block;
        padding-top:10px;
        padding-bottom:10px;
	   margin-top:15px;
    }
}
@media only screen and (max-width: 767px) {
    .ba-main-title {
        font-size: 26px!important;
        line-height: 32px!important;
    }
    .ba-main-desc {
        font-size: 18px!important;
        line-height: 27px!important;
    }
}