/*
 Theme Name:   tamancosmetics Child
 Description:  tamancosmetics Child Theme
 Author:       WDMB
 Author URI:   http://wondmb.com
 Template:     tamancosmetics
 Version:      1.0.1
 Text Domain:  tamancosmetics
 whb-row whb-general-header whb-not-sticky-row whb-without-bg whb-border-fullwidth whb-color-dark whb-flex-flex-middle
whb-row whb-general-header whb-not-sticky-row whb-without-bg whb-without-border whb-color-light whb-flex-flex-middle
*/
/*sticky main menu color*/
@font-face {
    font-family: 'icomoon';
    src:  url('/wp-content/uploads/2024/08/icomoon.eot?81mtc3');
    src:  url('/wp-content/uploads/2024/08/icomoon.eot?81mtc3#iefix') format('embedded-opentype'),
    url('/wp-content/uploads/2024/08/icomoon.ttf?81mtc3') format('truetype'),
    url('/wp-content/uploads/2024/08/icomoon.woff?81mtc3') format('woff'),
    url('/wp-content/uploads/2024/08/icomoon.svg?81mtc3#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.whb-sticked .whb-color-light:not(.whb-with-bg)  .item-level-0.current-menu-item>a{
    color: #ffffff;
}
body .whb-color-light div .whb-sticky-header.whb-clone.whb-main-header  .item-level-0>a{
    color: #205F56;
}
.whb-sticked .whb-color-light:not(.whb-with-bg) {
    background-color: #205F56;
}
.whb-sticked .whb-color-light:not(.whb-with-bg) .item-level-0>a{
    color: #e5fff1;
}
.whb-sticked .whb-color-light:not(.whb-with-bg)  .item-level-0>a:hover{
    color: #9DD6C4;
}
.whb-sticked .whb-color-light:not(.whb-with-bg)  .item-level-0.menu-item-has-children>a:after{
    color: #173480;
}
.whb-sticked .whb-color-light:not(.whb-with-bg)  .item-level-0.menu-item-has-children:hover >a:after{
    color: #c70000;
}
.whb-sticked .whb-color-light:not(.whb-with-bg)  .item-level-0>a .nav-link-text:after {
    background-color: #9DD6C4;
}


/* -------------- Desktop Styles -------------- */
@media (min-width: 769px) {
    /* Định nghĩa các biến cho các giá trị có thể tái sử dụng */
    .btn-custom-design {
        --button-border-color: black;  /* Màu viền của nút và vòng tròn */
        --button-text-color: black;  /* Màu chữ của nút */
        --button-circle-width: 50px; /* Đường kính của vòng tròn */
        --button-text-size: 18px;    /* Kích thước chữ của nút */
        position: relative;          /* Cho phép các pseudo-elements được định vị tương đối với nút */
        line-height: var(--button-text-line-height); /* Đặt chiều cao dòng cho văn bản */
    }

    /* Định nghĩa kiểu cho nút */
    .btn-custom-design a.btn {
        --button-text-line-height: 20px; /* Kích thước dòng chữ */
        color: var(--button-text-color);
        font-size: var(--button-text-size);
        text-decoration: none;          /* Bỏ gạch chân cho liên kết */
        z-index: 2; /* Đảm bảo văn bản nằm trên đường line */
        position: relative; /* Cho phép z-index hoạt động */
        padding-bottom: 4px; /* Điều chỉnh khoảng cách này để đặt đường line dưới văn bản */
        transition: all 0.4s;           /* Hiệu ứng chuyển đổi mượt mà */
        line-height: var(--button-text-line-height);
        background-color: transparent!important;
        border: 0;
        display: inline-block;          /* Hiển thị nút trên cùng một dòng */
    }
    /* Định nghĩa đường line, đặt nó dưới văn bản và vòng tròn */
    .btn-custom-design a.btn span {
        content: '';
        font-size: 14px;
        position: absolute;
        top: 50%; /* Di chuyển line xuống dưới văn bản */
        right: calc(var(--button-circle-width) / 4 + 5px); /* Đặt line ở trung tâm vòng tròn */
        transform: translateY(-50%);
        width: calc(var(--button-circle-width) * 4);    /* Chiều dài line bằng 3/4 đường kính vòng tròn */
        height: 1px;                                        /* Chiều cao line chỉ 1px */
        background: var(--button-border-color);             /* Màu của line */
        transition: right 0.4s;                             /* Chuyển đổi right khi hover */
    }

    /* Tạo vòng tròn */
    .btn-custom-design a.btn::before {
        content: '';                     /* Nội dung trống vì chỉ cần hình dạng */
        position: absolute;
        top: 50%;
        right: calc(var(--button-circle-width) / 2); /* Vị trí vòng tròn bên phải */
        transform: translate(50%, -50%); /* Đặt vòng tròn chính giữa theo chiều dọc */
        width: var(--button-circle-width);
        height: var(--button-circle-width);
        border: 2px solid var(--button-border-color);
        border-radius: 50%;               /* Làm tròn viền để tạo hình vòng tròn */
        transition: transform 0.4s;       /* Chỉ chuyển đổi transform khi hover */
        z-index: 3; /* Đảm bảo mũi tên và vòng tròn nằm trên đường line */
    }

    /* Tạo mũi tên trong vòng tròn */
    .btn-custom-design a.btn::after {
        content: '';
        position: absolute;
        top: 50%;
        right: calc(var(--button-circle-width) / 4 + 10px); /* Đặt mũi tên bên phải vòng tròn */
        transform: translate(50%, -50%) rotate(45deg);      /*Xoay mũi tên 45 độ */
        width: 10px;                                         /* Kích thước mũi tên */
        height: 10px;
        border-right: 2px solid var(--button-border-color);
        border-top: 2px solid var(--button-border-color);
        transition: transform 0.4s;                          /* Chỉ chuyển đổi transform khi hover */
        z-index: 3; /* Đảm bảo mũi tên và vòng tròn nằm trên đường line */
    }

    /* Hiệu ứng khi hover: di chuyển vòng tròn và mũi tên sang phải */
    /* Khi hover, di chuyển vòng tròn sang phải 5-10px */
    .btn-custom-design a.btn:hover::before {
        transform: translate(55%, -50%);
    }

    /* Khi hover, di chuyển mũi tên sang phải 5-10px mà không xoay mũi tên */
    .btn-custom-design a.btn:hover::after {
        /* Giữ nguyên góc xoay của mũi tên và chỉ di chuyển nó sang phải */
        transform: translate(55%, -50%) rotate(45deg);
    }


    /* Hiệu ứng khi hover: di chuyển line sang phải */
    .btn-custom-design a.btn:hover span {
        right: calc(var(--button-circle-width) / 4 + 10px); /* Di chuyển line sang phải thêm 5px */
    }

    /* -------------- Menu Over Lap -------------- */
    .whb-flex-row.whb-general-header-inner .whb-column.whb-col-right.whb-visible-lg{
        margin-right: 80px;
    }
    .whb-flex-row.whb-general-header-inner .whb-column.whb-col-left.whb-visible-lg{
        margin-left: 33px;
    }

    .wd-header-nav.wd-header-main-nav.text-left .menu.wd-nav.wd-nav-main{
        --nav-gap: 15px;
    }
    .wd-header-nav.wd-header-main-nav.text-left .menu.wd-nav.wd-nav-main .nav-link-text{
        font-size: 15px;
    }

    /* -------------- Banner Home -------------- */
    .Banner-home-cus-css .content-banner.text-left,
    .Banner-home-cus-css .wd-button-wrapper.text-left {
        padding-left: 255px;
    }

    .Banner-home-cus-css .banner-subtitle {
        background-color: #383838; /* Nền đen */
        color: white; /* Chữ màu trắng */
        padding: 3px 10px; /* Giảm padding trên và dưới */
        border-radius: 16px; /* Bo tròn góc */
        display: inline-block; /* Để đảm bảo nền và padding được áp dụng */
        font-size: 38px; /* Kích thước chữ */
        line-height: 1.1; /* Giảm khoảng cách giữa các dòng (giúp nền thấp hơn) */
        letter-spacing: 8px !important; /* Thêm khoảng cách giữa các chữ */
        letter-spacing: normal; /* Đặt lại giãn cách giữa các chữ */
        /*font-family: Arial, sans-serif;  Đổi font chữ nếu cần */
    }

    .Banner-home-cus-css .banner-title {
        font-size: 44px; /* Kích thước chữ */
        line-height: 60.5px !important; /* Giảm khoảng cách giữa các dòng (giúp nền thấp hơn) */
        /*font-family: Arial, sans-serif;  Đổi font chữ nếu cần */
    }

    .Banner-home-cus-css .banner-inner {
        color: #78c9b3; /* Màu sắc #78c9b3 */
        font-weight: bold; /* Tô đậm */
        font-size: 20px; /* Kích thước chữ */
    }

    .Banner-home-cus-css .btn-style-rectangle {
        background-color: #78c9b3; /* Nền xanh */
        color: white; /* Chữ màu trắng */
        padding: 10px 20px; /* Khoảng cách trong nút */
        border-radius: 25px; /* Bo tròn góc */
        font-size: 13px; /* Kích thước chữ (tuỳ chỉnh theo nhu cầu) */
        border: none; /* Bỏ viền mặc định */
        box-shadow: 0 4px 6px rgba(0, 184, 148, 0.5); /* Đổ bóng với màu xanh và độ mờ 30% */
        cursor: pointer; /* Con trỏ chuột khi hover vào nút */
        line-height: 1; /* Giảm khoảng cách giữa các dòng (giúp nền thấp hơn) */
        letter-spacing: normal; /* Đặt lại giãn cách giữa các chữ */
        letter-spacing: 8px !important; /* Thêm khoảng cách giữa các chữ */
    }

    .w-custom-button .btn.btn-style-default {
        background-color: #78c9b3; /* Nền xanh */
        color: white; /* Chữ màu trắng */
        padding: 10px 20px; /* Khoảng cách trong nút */
        border-radius: 25px; /* Bo tròn góc */
        font-size: 13px; /* Kích thước chữ (tuỳ chỉnh theo nhu cầu) */
        border: none; /* Bỏ viền mặc định */
        box-shadow: 0 4px 6px rgba(0, 184, 148, 0.5); /* Đổ bóng với màu xanh và độ mờ 30% */
        cursor: pointer; /* Con trỏ chuột khi hover vào nút */
        line-height: 1; /* Giảm khoảng cách giữa các dòng (giúp nền thấp hơn) */
        letter-spacing: normal; /* Đặt lại giãn cách giữa các chữ */
        letter-spacing: 8px !important; /* Thêm khoảng cách giữa các chữ */
    }

    .Banner-home-cus-css .wd-nav-pagin {
        position: absolute; /* Đặt vị trí tuyệt đối */
        top: 960px; /* Cách phía trên 20px */
        left: 80px; /* Cách phía bên trái 200px */
        transform: translateY(0); /* Điều chỉnh lại vị trí theo trục Y */
        z-index: 10; /* Đảm bảo nút pagination nằm trên các thành phần khác */
    }

    /* CSS cho điểm phân trang chung */
    .Banner-home-cus-css .wd-nav-pagin-item {
        width: 10px; /* Kích thước mặc định */
        height: 10px;
        background-color: black !important; /* Màu nền mặc định là đen */
        border-radius: 50%; /* Bo tròn góc */
        display: inline-block;
        margin: 0 5px; /* Khoảng cách giữa các điểm phân trang */
        transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */
    }

    /* CSS cho điểm phân trang đang được chọn */
    .Banner-home-cus-css .wd-nav-pagin-item.wd-active {
        width: 15px; /* Tăng kích thước khi active */
        height: 15px;
        border: 2px solid #00b894; /* Viền xanh */
        transform: scale(1.2); /* Phóng to một chút */
    }

    /* -------------- Banner Home -------------- */
    /* -------------- Tab Products -------------- */
    .w-home-tab-products .wd-tabs.tabs-design-aside .wd-tabs-header {
        --text-align: start;
        border-right: 5px solid #00b894;
    }

    .w-home-tab-products .tab-label.nav-link-text {
        background-color: #f0f0f0; /* Nền đen */
        color: #205F56; /* Chữ màu mặc định */
        padding: 3px 10px; /* Giảm padding trên và dưới */
        display: inline-block; /* Để đảm bảo nền và padding được áp dụng */
        border-top-right-radius: 10px; /* Bo tròn góc phải trên */
        border-top-left-radius: 10px; /* Bo tròn góc phải dưới */
        transition: color 0.3s ease; /* Hiệu ứng chuyển màu chữ */
    }

    .w-home-tab-products .tab-label.nav-link-text:hover {
        color: #9DD6C4; /* Màu chữ khi hover */
    }

    .w-home-tab-products .wd-tabs-header .tabs-text::after {
        content: ""; /* Pseudo-element không có nội dung thực */
        position: absolute; /* Đặt vị trí tuyệt đối để căn chỉnh theo văn bản */
        width: 50%; /* Độ dài của đường kẻ là 50% so với độ dài của chữ */
        height: 2px; /* Độ dày của đường kẻ */
        background-color: #00b894; /* Màu của đường kẻ */
        left: 0; /* Đặt đường kẻ sát bên trái */
        bottom: -6px; /* Khoảng cách từ văn bản đến đường kẻ, có thể điều chỉnh */
    }

    /* Đặt màu sắc cho link active */
    .w-home-tab-products .wd-nav-tabs .wd-active .wd-nav-link {
        color: #00b894; /* Màu sắc cho link active */
    }

    /* Đặt màu sắc khi hover vào link */
    .w-home-tab-products .wd-nav-tabs .wd-nav-link:hover {
        color: #00b894; /* Màu sắc cho link khi hover */
    }

    .w-home-tab-products .products-bordered-grid {
        --wd-prods-brd: none; /* Loại bỏ border */
    }

    .w-home-tab-products .products-bordered-grid.elements-grid > .wd-col {
        border: none; /* Loại bỏ viền */
    }

    .w-home-tab-products .wd-tabs-header .tabs-text {
        position: relative; /* Đặt relative để làm mốc cho pseudo-element */
    }


    .w-home-tab-products .grid-columns-4 .wd-entities-title {
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Giới hạn số dòng hiển thị */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        line-height: 1.5; /* Điều chỉnh chiều cao dòng nếu cần */
        max-height: 3em; /* Đảm bảo chiều cao không vượt quá 2 dòng */
    }

    .w-home-feature-product .wd-product.wd-hover-standard .wd-add-btn,
    .w-home-tab-products .wd-product.wd-hover-standard .wd-add-btn {
        justify-content: end;
    }

    .w-home-tab-products .wd-product.wd-hover-standard .wd-add-btn > a:hover {
        background-color: transparent !important; /* Loại bỏ màu nền khi hover */
    }

    .w-home-feature-product .wd-product.wd-hover-standard .wd-add-btn > a,
    .w-home-tab-products .wd-product.wd-hover-standard .wd-add-btn > a {
        background: none;
        height: 50px;
    }

    .w-home-feature-product .button.product_type_simple.add-to-cart-loop span,
    .w-home-tab-products .button.product_type_simple.add-to-cart-loop span {
        /*! display: none; */
        transform: translateY(-100%) translateZ(0);
    }

    .w-home-feature-product .wd-add-btn-replace .add-to-cart-loop::before,
    .w-home-tab-products .wd-add-btn-replace .add-to-cart-loop::before {
        transform: translateY(0) translateZ(0);
        font-family: 'icomoon' !important;
        speak: never;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        content: "\e900";
        font-size: 48px !important;;
        color: #78C9B3;
        text-shadow: 1px 1px 3px #68F6CF87;
        transition: all 0.4s;
    }

    .w-home-feature-product .wd-add-btn-replace .add-to-cart-loop:hover::before,
    .w-home-tab-products .wd-add-btn-replace .add-to-cart-loop:hover::before {
        text-shadow: none;
    }
}


/* -------------- Tablet Styles -------------- */
@media (max-width: 768px) and (min-width: 481px) {

}

/* -------------- Mobile Styles -------------- */
@media (max-width: 480px) {
    /* -------------- Banner Home --------------
    .Banner-home-cus-css-mobile .content-banner.text-left,
    .Banner-home-cus-css-mobile .wd-button-wrapper.text-left {
        padding-left: 10px;
    } */

    .Banner-home-cus-css-mobile .banner-subtitle {
        background-color: #383838; /* Nền đen */
        color: white; /* Chữ màu trắng */
        padding: 3px 10px; /* Giảm padding trên và dưới */
        border-radius: 14px; /* Bo tròn góc */
        display: inline-block; /* Để đảm bảo nền và padding được áp dụng */
        font-size: 15px !important; /* Kích thước chữ */
        line-height: 1.1; /* Giảm khoảng cách giữa các dòng (giúp nền thấp hơn) */
        letter-spacing: 8px !important; /* Thêm khoảng cách giữa các chữ */
        letter-spacing: normal; /* Đặt lại giãn cách giữa các chữ */
        /*font-family: Arial, sans-serif;  Đổi font chữ nếu cần */
    }

    .Banner-home-cus-css-mobile .banner-title {
        font-size: 16px; /* Kích thước chữ */
        font-weight: bold; /* Tô đậm */
        line-height: 20.5px !important; /* Giảm khoảng cách giữa các dòng (giúp nền thấp hơn) */
        /*font-family: Arial, sans-serif;  Đổi font chữ nếu cần */
    }

    .Banner-home-cus-css-mobile .banner-inner {
        color: #78c9b3; /* Màu sắc #78c9b3 */
        font-weight: bold; /* Tô đậm */
        font-size: 14px; /* Kích thước chữ */
    }

    .Banner-home-cus-css-mobile .btn-style-rectangle {
        background-color: #78c9b3; /* Nền xanh */
        color: white; /* Chữ màu trắng */
        padding: 10px 20px; /* Khoảng cách trong nút */
        border-radius: 25px; /* Bo tròn góc */
        font-size: 13px; /* Kích thước chữ (tuỳ chỉnh theo nhu cầu) */
        border: none; /* Bỏ viền mặc định */
        box-shadow: 0 4px 6px rgba(0, 184, 148, 0.5); /* Đổ bóng với màu xanh và độ mờ 30% */
        cursor: pointer; /* Con trỏ chuột khi hover vào nút */
        line-height: 1; /* Giảm khoảng cách giữa các dòng (giúp nền thấp hơn) */
        letter-spacing: normal; /* Đặt lại giãn cách giữa các chữ */
        letter-spacing: 8px !important; /* Thêm khoảng cách giữa các chữ */
    }

    /* -------------- Features Products -------------- */
    .w-custom-button .btn.btn-style-default {
        background-color: #78c9b3; /* Nền xanh */
        color: white; /* Chữ màu trắng */
        padding: 10px 20px; /* Khoảng cách trong nút */
        border-radius: 25px; /* Bo tròn góc */
        font-size: 13px; /* Kích thước chữ (tuỳ chỉnh theo nhu cầu) */
        border: none; /* Bỏ viền mặc định */
        box-shadow: 0 4px 6px rgba(0, 184, 148, 0.5); /* Đổ bóng với màu xanh và độ mờ 30% */
        cursor: pointer; /* Con trỏ chuột khi hover vào nút */
        line-height: 1; /* Giảm khoảng cách giữa các dòng (giúp nền thấp hơn) */
        letter-spacing: normal; /* Đặt lại giãn cách giữa các chữ */
        letter-spacing: 8px !important; /* Thêm khoảng cách giữa các chữ */
    }


    /* -------------- Product Tab -------------- */

}