@use "../abstracts/index" as *;

.offcanvas {
    border: none !important;
    color: var(--dark);
    z-index: 1600;
    .icon-close-popup {
        @include transition3;
        cursor: pointer;
        background: transparent;
        font-size: 16px;
        padding: 10px;
        border: none;
        color: var(--dark);
        z-index: 10;
        &:hover {
            color: var(--primary);
        }
    }

    .offcanvas-content {
        height: 100%;
    }
}

.offcanvas-backdrop {
    background-color: var(--backdrop);
    z-index: 1500;
    cursor: url(../images/cursor-close.svg), auto;

    &.show {
        opacity: 1;
    }
}

.overflow-x-auto,
.overflow-y-auto {
    &::-webkit-scrollbar {
        width: 0px;
    }
}

// modal
.modal-backdrop {
    background-color: var(--backdrop);

    &.show {
        opacity: 1;
    }
}

.modal-dialog-centered {
    min-height: calc(100% - 60px);
}

.modal {
    cursor: url(../images/cursor-close.svg), auto;

    .icon-close,
    .icon-close-popup {
        @include transition3;
        cursor: pointer;
        background: transparent;
        font-size: 16px;
        padding: 10px;
        border: none;
        z-index: 10;
        color: var(--dark);
        &:hover {
            color: var(--primary);
        }
    }

    // Right
    &.fullRight {
        .modal-dialog {
            transform: translate(100%, 0);
            min-width: 100%;
            height: 100%;
            margin: 0;
            transition: transform 1s ease-out;

            .modal-content {
                border-radius: 0;
                border: 0;
                margin: auto;
                overflow: hidden;
                position: absolute;
                right: 0;
                bottom: 0;
                top: 0;
                padding: 0;

                .modal-body {
                    overflow: auto;
                    padding: 0;
                    padding-bottom: 30px;
                }
            }
        }

        &.show {
            .modal-dialog {
                transform: none;
                transition: transform 0.4s ease-out;
            }
        }
    }

    // Left
    &.fullLeft {
        .modal-dialog {
            transform: translate(-100%, 0) !important;
            min-width: 100%;
            height: 100%;
            margin: 0;
            transition: all 0.3s !important;

            .modal-content {
                border-radius: 0;
                border: 0;
                margin: auto;
                overflow: hidden;
                position: absolute;
                left: 0;
                bottom: 0;
                top: 0;
                padding: 0;

                .modal-body {
                    overflow: auto;
                    padding: 0;
                    padding-bottom: 30px;
                }
            }
        }

        &.show {
            .modal-dialog {
                transform: translate(0, 0) !important;
            }
        }
    }

    &.fullBottom {
        .modal-dialog {
            transform: translate(0, 100%);
            min-width: 100%;
            height: 100%;
            max-height: unset;
            margin: 0;
            transition: transform 0.3s linear !important;

            .modal-content {
                border-radius: 0;
                border: 0;
                margin: auto;
                overflow: hidden;
                position: absolute;
                right: 0;
                bottom: 0;
                padding: 0;
                max-height: max-content;

                .modal-body {
                    overflow: auto;
                    padding: 0;
                    padding-bottom: 30px;
                }
            }
        }

        &.show {
            .modal-dialog {
                transform: translate(0, 0);
            }
        }
    }

    &.fade:not(.show) {
        opacity: 0;
    }

    .modal-content {
        cursor: default;
        border: 0;
        overflow: hidden;
        border-radius: 16px;
    }
}
// modalCentered
.modalCentered {
    .modal-dialog {
        margin: 30px auto;
        padding-left: 15px;
        padding-right: 15px;
    }
}
.modalDemo {
    .demo-title {
        margin-top: 50px;
        margin-bottom: 44px;
        font-weight: 500;
        text-align: center;
    }
    .modal-dialog {
        max-width: 1540px;
        margin-top: 8px;
        margin-bottom: 8px;
        height: calc(100vh - 16px);
    }
    .modal-content {
        padding: 0 50px 40px;
        background-color: var(--white);
        width: 100%;
        border-radius: 20px;
        margin: 0 30px;
        max-height: calc(100vh - 60px);
        border: 0;
        cursor: default;
        overflow: hidden;
    }
    .mega-menu {
        padding: 0 32px;
        overscroll-behavior-y: contain;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 6px;
            &:hover {
                width: 12px;
                height: 12px;
            }
        }

        &::-webkit-scrollbar-thumb {
            background: var(--line);
            transition: all 0.3s ease;
        }
    }

    .header {
        position: relative;

        .icon-close-popup {
            position: absolute;
            top: 18px;
            right: 0;
        }
    }
}

.tf-product-modal {
    .modal-dialog {
        max-width: min(625px, 90vw);

        .modal-content {
            padding: 38px 36px 40px;
            margin-left: 0;
            margin-right: 0;
            border: 0;

            .header {
                margin-bottom: 24px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .demo-title {
                    margin: 0;
                    text-align: start;
                    font-size: 26px;
                    font-weight: 400;
                    line-height: 31px;
                }

                span {
                    position: unset;
                    color: var(--dark);
                    cursor: pointer;
                    @include transition3;

                    &:hover {
                        color: var(--primary);
                    }
                }
            }

            h6 {
                font-weight: 600;
                line-height: 24px;
                margin-bottom: 25px;
            }

            .title {
                font-size: 18px;
                font-weight: 600;
                line-height: 22px;
                margin-top: 15px;
            }

            p {
                margin-top: 15px;
                margin-bottom: 20px;
            }
        }
    }

    .tf-social-icon {
        .box-icon {
            width: 40px;
            height: 40px;
            border-radius: 999px;
            font-size: 16px;
            color: var(--white);

            &.social-x {
                font-size: 12px;
                background: var(--twitter-cl);
            }

            &.social-facebook {
                background: var(--facebook-cl);
            }

            &.social-instagram {
                background: var(--instagram-cl);
            }

            &.social-tiktok {
                background: var(--tiktok-cl);
            }

            &.social-pinterest {
                background: var(--pinterest-cl);
            }
        }
    }

    .form-share {
        margin-top: 20px;
        position: relative;

        .button-submit {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0px;

            .tf-btn {
                padding: 10px 18px;
            }
        }

        input {
            padding-right: 80px;
        }
    }
}

#ask_question {
    fieldset {
        label {
            margin-bottom: 5px;
            font-weight: 400;
            color: var(--text);
        }

        input {
            height: 50px;
        }

        margin-bottom: 15px;
    }

    textarea {
        height: 176px;
    }

    button {
        border-radius: 4px;
    }
}

#delivery_return {
    .tf-product-popup-delivery {
        .title {
            font-size: 20px;
            font-weight: 400;
            line-height: 36px;
            margin-bottom: 25px;
            margin-top: 0;
        }

        p {
            color: rgb(134, 134, 134);
            line-height: 22.4px;
            margin-bottom: 10px;

            a {
                color: rgb(134, 134, 134);
                text-decoration: underline;
                text-underline-offset: 3px;

                &:hover {
                    color: var(--dark);
                    text-decoration-thickness: 2px;
                }
            }
        }

        &:not(:last-child) {
            margin-bottom: 20px;
        }
    }
}

.canvas-wrapper {
    padding: 0;
    isolation: isolate;
    height: 100%;
    width: 100%;
    max-height: none;
    display: grid;
    grid-auto-rows: auto minmax(0, 1fr) auto;
    align-content: start;
}

.canvas-body {
    background-color: var(--white);
    padding: 15px 20px;
    overscroll-behavior-y: contain;
    overflow-y: auto;

    &::-webkit-scrollbar {
        width: 5px;
    }

    &::-webkit-scrollbar-track {
        background-color: var(--bg-scrollbar-track);
    }

    &::-webkit-scrollbar-thumb {
        background: var(--bg-scrollbar-thumb);
        border-radius: 4px;
    }
}

.canvas-sidebar {
    max-width: 320px;
    width: 100%;
    .canvas-header {
        @include flex(center, space-between);
        padding: 15px;
        position: relative;
        text-transform: capitalize;
        font-size: 20px;
        line-height: 30px;
        font-weight: 500;
        color: var(--dark);

        .icon-close-popup {
            font-size: 12px;
            height: 32px;
            width: 32px;
            display: flex;
            justify-content: end;
            align-items: center;
            cursor: pointer;
        }

        &::after {
            position: absolute;
            content: "";
            bottom: 0;
            left: 15px;
            right: 15px;
            height: 1px;
            background-color: var(--line);
        }
    }

    .list-icon-box {
        .tf-icon-box:not(:last-child) {
            margin-bottom: 24px;
        }
    }

    .list-recent {
        li {
            &:not(:last-child) {
                margin-bottom: 20px;
            }
        }
    }

    .mega-box {
        &:not(:last-child) {
            margin-bottom: 32px;
        }
    }
}

.canvas-compare {
    height: max-content !important;
    z-index: 5000;

    .close-popup {
        position: absolute;
        top: 30px;
        right: 30px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        cursor: pointer;
    }

    .canvas-body {
        padding: 28px 0;
    }
}

.popup-quickadd {
    .modal-content {
        padding: 30px 15px;
    }
    .main-product-quickadd {
        .item-product-info {
            display: flex;
            align-items: center;
            margin-bottom: 32px;
            gap: 20px;
            padding: 0;
        }
        .price-wrap {
            display: flex;
            gap: 6px;
        }
        .price-new {
            margin-right: 0;
            font-weight: 500;
        }
        .product-img {
            max-width: 112px;
            border-radius: 6px;
            overflow: hidden;
            flex-shrink: 0;
        }
        .content-box {
            display: grid;
            gap: 8px;
        }
        .price-show-badge {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
        }
        .quickadd-variant-color {
            margin-bottom: 24px;
        }
        .variant-label {
            margin-bottom: 12px;
            font-family: $font-4;
        }
        .variant-value {
            font-weight: 600;
            text-transform: capitalize;
        }
        .list-size {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }
        .size-btn {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background-color: var(--white);
            border: 1px solid var(--line);
            font-weight: 500;
            font-size: 16px;
            line-height: 120%;
            color: var(--dark);
            padding: 12px;
            &.active {
                border: 1px solid var(--dark);
            }
        }
        .item-product-variant {
            margin-bottom: 24px;
        }
    }
}
.main-product-quickadd {
    .item-product-quantity {
        margin-bottom: 32px;
        .label {
            font-family: $font-4;
            margin-bottom: 10px;
        }
    }
    .wg-quantity {
        display: inline-flex;
    }
    .item-product-group-btn {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 15px;
        column-gap: 12px;
        margin-bottom: 32px;
        .atc {
            flex-grow: 1;
        }
        .box-icon {
            border: 1px solid var(--line);
            font-size: 14px;
            width: 42px;
            height: 42px;
            padding: 12px;
        }
    }
    .payment-link {
        font-size: 14px;
        line-height: 120%;
        color: var(--text);
        font-weight: 400;
        display: flex;
        justify-content: center;
        margin: auto;
        &::after {
            background-color: var(--text);
        }
    }
}
// modal-quick-view
.modal-quick-view {
    .modal-dialog {
        max-width: 1130px;
    }

    .modal-content {
        border-radius: 16px;
    }

    .tf-product-media-wrap {
        padding: 0;

        .item {
            width: 100%;
            height: 100%;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .tf-product-info-wrap {
        flex: 0 0 auto;
        max-width: 100%;
        flex-grow: 1;
        position: relative;
        margin: 0;

        .tf-product-info-inner {
            padding: 15px;

            &::-webkit-scrollbar {
                width: 6px;
            }

            &::-webkit-scrollbar-thumb {
                background: var(--primary);
            }

            &::-webkit-scrollbar-track {
                background: var(--line);
            }
        }

        .tf-product-heading {
            padding-bottom: 0;
            border: 0;
            margin-bottom: 20px;

            .product-name {
                line-height: 29px;
                margin-bottom: 14px;
            }

            .product-price {
                margin-bottom: 14px;
                gap: 6px;

                .price-old,
                .price-new {
                    line-height: 29px;
                }
            }

            .text {
                font-size: 14px;
                line-height: 22.4px;
            }
        }

        .tf-product-variant {
            gap: 20px;
            margin-bottom: 30px;

            .variant-picker-label {
                font-family: "DM Sans";
                font-size: 16px;
                font-weight: 700;
                line-height: 19.2px;
                letter-spacing: -0.03em;
                margin-bottom: 12px;
            }
            .variant-picker-label-value {
                font-weight: 700;
            }
            .color-btn {
                width: 34px !important;
                height: 34px !important;

                .check-color {
                    width: 28px !important;
                    height: 28px !important;
                }
            }
        }
        .tf-btn {
            font-family: $font-4;
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
            letter-spacing: -0.03em;
        }

        .tf-product-total-quantity {
            margin-bottom: 30px;

            .group-btn {
                margin-bottom: 17px;
            }

            .more-choose-payment {
                margin-top: 7px;
            }
        }

        .view-details {
            display: inline-flex;
            gap: 4px;
            align-items: center;
            font-size: 14px;
            font-weight: 500;
            line-height: 16.8px;

            .icon {
                font-size: 12px;
            }
        }
    }
}

// modal-find-size
.modal-find-size {
    .modal-dialog {
        max-width: 780px;

        .modal-content {
            padding: 24px 15px;
        }
    }

    .header {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
        border-bottom: 1px solid #a1a1a133;
        margin-bottom: 30px;

        .heading {
            font-size: 20px;
            font-weight: 500;
            line-height: 24px;
        }

        span {
            font-size: 16px;
        }
    }

    .title {
        font-size: 16px;
        font-weight: 500;
        line-height: 19.2px;
        margin-bottom: 24px;
    }

    .tf-sizeguide-table {
        border: 1px solid var(--line);
        border-radius: 5px;
        width: 100%;
        margin-bottom: 24px;

        th {
            border: 1px solid var(--line);
            padding: 10px;
            font-weight: 500;
            line-height: 17px;
        }

        td {
            border: 1px solid var(--line);
            border-width: 0 1px 1px 0;
            padding: 10px;
            line-height: 17px;
        }
    }

    .tf-page-size-chart-content {
        ul {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 15px;

            .text {
                font-size: 14px;
                font-weight: 500;
                line-height: 16.8px;
            }
        }
    }
}

// popup-pickup-available
.popup-pickup-available {
    .pickup-available-list {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .pickup-available-item {
        .title {
            margin-bottom: 8px;
        }

        .desc {
            margin-bottom: 12px;
        }

        ul {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-bottom: 12px;
        }

        a {
            display: flex;
            align-items: center;
            gap: 8px;

            .icon {
                font-size: 10px;
            }
        }
    }
}

// modal-before-you-leave
.modal-before-you-leave {
    .modal-content {
        max-width: 485px;
    }

    .modal-inner {
        position: relative;
        flex-grow: 1;
        display: flex;
        flex-direction: column;

        .icon-close {
            font-size: 16px;
            position: absolute;
            top: 20px;
            right: 20px;
        }
    }
    .image {
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .content {
        margin: 0 32px;
        padding: 32px 0;
        border-bottom: 1px solid var(--line);
        margin-bottom: 32px;

        > .heading {
            margin-bottom: 24px;
        }

        > p {
            font-size: 16px;
            font-weight: 400;
            line-height: 19.2px;
            margin-bottom: 10px;

            span {
                font-size: 24px;
                font-weight: 500;
                line-height: 28.8px;
            }
        }
        .wrap-code {
            margin-bottom: 24px;
        }
    }

    .tf-mini-cart-sroll {
        padding: 0 32px 32px;

        .tf-minicart-recommendations-title {
            margin-bottom: 18px;
        }
    }
}

.wrap-code {
    display: flex;

    .text {
        font-size: 14px;
        font-weight: 400;
        line-height: 16.8px;
        place-content: center;
    }

    .coppyText {
        font-size: 16px;
        font-weight: 500;
        line-height: 19.2px;
        color: var(--primary);
        margin-left: 4px;
    }

    .btn-coppy-text {
        font-size: 12px;
        color: #868686;
        cursor: pointer;
        @include transition3();
        margin-left: 4px;

        &:hover {
            color: var(--primary) !important;
        }
    }

    &.style-1 {
        border-radius: 6px;
        border: 1px solid var(--line);
        padding: 14px 11px;
        display: block;
        position: relative;
        padding-right: 112px;

        .coppyText {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: #667085;
            margin: 0;
            overflow-x: auto;

            &::-webkit-scrollbar {
                height: 0;
            }

            &::-webkit-scrollbar-thumb {
                background: var(--primary);
            }

            &::-webkit-scrollbar-track {
                background: var(--line);
            }
        }

        .btn-coppy-text {
            position: absolute;
            top: 3px;
            right: 3px;
            bottom: 3px;
            border-radius: 3px;
            cursor: pointer;
            padding: 12px 33.5px;
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
            color: var(--white);
        }
    }
}

// modal-style
.popup-style-1 {
    width: 100% !important;
    max-width: 340px;
    .modal-content {
        cursor: default;
        max-width: 520px;
    }

    .popup-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 32px;
        padding-bottom: 10px;
        position: relative;
        text-transform: capitalize;
        font-size: 20px;
        line-height: 30px;
        font-weight: 500;
        color: var(--dark);
        border-bottom: 0;
        border-radius: 0;

        &::after {
            position: absolute;
            content: "";
            bottom: 0;
            height: 1px;
            background-color: var(--line);
            left: 32px;
            right: 32px;
        }
    }

    .popup-inner {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 32px;
        overflow-y: auto;
    }
}

// popup-login
.form-login {
    display: flex;
    flex-direction: column;
    gap: 32px;

    .text {
        margin-bottom: 24px;
    }

    .button-wrap {
        display: flex;
        gap: 10px;
    }

    .bot {
        a {
            text-decoration: underline;
            &:hover {
                color: var(--primary) !important;
            }
        }
    }
}

.popup-login {
    width: 100%;
    .other-login {
        p {
            margin-bottom: 24px;
        }

        a {
            padding: 14px;
            position: relative;
            text-align: center;
            background-color: #3b5998;
            border-radius: 99px;
            color: var(--white);

            .icon {
                position: absolute;
                left: 16px;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }
}

.modal-dialog-centered {
    .icon-close {
        position: absolute;
        top: 0px;
        right: 0px;
        font-size: 14px;
        padding: 15px;
        z-index: 123;
    }
}

// modal-newsletter
.modal-newsletter {
    .modal-dialog {
        max-width: 674px;
    }

    .modal-content {
        border-radius: 16px;
    }
    .form-newsletter {
        input {
            background-color: transparent;
        }
    }
    .modal-top {
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .modal-bottom {
        padding: 32px;
        max-width: 448px;
        margin: 0 auto;

        .title {
            margin-bottom: 10px;
        }

        .text {
            margin-bottom: 32px;
        }

        .form-newsletter,
        .tf-social-icon {
            margin-bottom: 20px;
        }
    }

    &.style-absolute {
        .modal-dialog {
            max-width: 1030px;
        }

        .modal-bottom {
            position: absolute;
            max-width: 450px;
            width: 100%;
            padding: 15px;
            @include center();
        }
    }

    &.style-row {
        .modal-dialog {
            max-width: 1030px;
        }

        .modal-top {
            width: 44.8%;
            flex-shrink: 0;
        }

        .modal-bottom {
            width: 55.2%;
            max-width: unset;
            place-content: center;
        }

        .modal-content {
            border-radius: 20px;
        }
    }

    .form-newsletter {
        fieldset {
            input {
                padding-left: 66px;
            }

            .icon {
                position: absolute;
                left: 20px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 17px;
            }
        }
    }
}

// popup-search
.popup-search {
    // height: 100vh !important;

    .header {
        position: fixed;
        padding: 8px 15px;
        display: flex;
        justify-content: flex-end;
        z-index: 50;
        top: 0;
        left: 0;
        right: 0;
        background-color: var(--white);
    }

    .modal-content {
        overflow-y: auto;
        padding: 68px 0;
        height: 100%;
        border-radius: 0;
    }

    .looking-for-wrap {
        text-align: center;
        margin-bottom: 50px;
    }

    .heading {
        font-size: 32px;
        font-weight: 500;
        line-height: 38.4px;
        margin-bottom: 42px;
    }

    .form-search {
        margin-bottom: 32px;

        input {
            border-radius: 99px;
            font-size: 16px;
            line-height: 120%;
            &::placeholder {
                color: #000000;
            }
        }

        button {
            right: 20px;
        }
    }

    .popular-searches {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        font-size: 16px;
        line-height: 120%;
        ul {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;

            a {
                padding: 9px 19px;
                border-radius: 10px;
                background-color: #f9f9f9;
                border: 1px solid #a1a1a133;
            }
        }
    }

    .featured-product {
        .featured-product-heading {
            margin-bottom: 30px;
        }
    }

    &.type-search-product {
        .top-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 10px;
            border-bottom: 1px solid #a1a1a133;
            margin-bottom: 42px;

            .title {
                font-size: 20px;
                font-weight: 500;
                line-height: 32px;
            }

            a {
                font-size: 14px;
                font-weight: 500;
                line-height: 22.4px;
                text-decoration-line: underline;
            }
        }

        .wrapper-shop {
            row-gap: 42px;
        }

        .list-articals {
            display: flex;
            flex-direction: column;
            gap: 20px;

            .item {
                display: flex;
                gap: 11px;

                .img-box {
                    border-radius: 8px;
                    overflow: hidden;
                    width: 128px;
                    height: 128px;
                    flex-shrink: 0;
                }

                .content {
                    display: flex;
                    flex-direction: column;
                    gap: 6px;
                }

                .title {
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 25.6px;
                }

                .date-post {
                    font-size: 14px;
                    line-height: 16.8px;
                }
            }
        }
    }
}

// modal-compare
.modal-compare {
    .modal-dialog {
        max-width: 1194px;
    }

    .modal-content {
        border-radius: 16px;
        padding: 48px 30px 29px 30px;
    }

    .title {
        line-height: 29px;
        margin-bottom: 45px;
    }

    .tf-compare-inner {
        overflow-x: auto;
        margin-bottom: 22px;
        padding-bottom: 20px;
        &::-webkit-scrollbar {
            height: 8px;
        }

        &::-webkit-scrollbar-thumb {
            background: var(--primary);
        }

        &::-webkit-scrollbar-track {
            background: var(--line);
        }
    }

    .tf-compare-list {
        display: flex;
        gap: 24px;
        width: max-content;
        margin-left: auto;
        margin-right: auto;
    }

    .tf-compare-item {
        width: 232px;
        min-width: 232px;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0;
        .icon-close {
            position: absolute;
            z-index: 5;
            top: 12px;
            right: 12px;
            width: 48px;
            height: 48px;
            border: 1px solid var(--line);
            background-color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .image {
            border-radius: 16px;
            max-height: 328px;
            overflow: hidden;
        }

        .content {
            display: flex;
            flex-direction: column;
            gap: 10px;

            .text-title {
                font-size: 16px;
                font-weight: 500;
                line-height: 26px;
            }

            .price-wrap {
                font-weight: 500;
                font-size: 16px;
            }
        }
    }

    .tf-compare-buttons {
        display: flex;
        gap: 20px;
        .tf-btn {
            font-family: $font-4;
            max-width: 190px;
            width: 100%;
            font-weight: 600;
        }
    }
}

// modal-ask-question
.modal-share-social {
    .wrap-code {
        margin-bottom: 32px;
    }
}

.popup-style-2 {
    .modal-dialog {
        max-width: 596px;
    }

    .modal-content {
        padding: 32px 32px 41px;
    }

    .modal-header {
        margin-bottom: 32px;
        padding: 0;
        padding-bottom: 10px;

        .icon-close {
            font-size: 16px;
        }
    }
}

// modal-order-detail
.modal-order-detail {
    .modal-dialog {
        max-width: 1226px;

        .modal-content {
            padding: 24px 15px;
        }
    }

    .header {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
        border-bottom: 1px solid #a1a1a133;
        margin-bottom: 30px;

        .heading {
            font-size: 20px;
            font-weight: 500;
            line-height: 24px;
        }

        .icon-close {
            position: unset;
            display: flex;
            align-items: center;
            font-size: 16px;
            padding: 0px 15px;
        }
    }

    .list-infor {
        display: flex;
        gap: 15px 24px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 44px;

        li {
            font-size: 16px;
            font-weight: 400;
            line-height: 19px;

            &:not(:last-child) {
                position: relative;
                padding-right: 24px;
                &::after {
                    content: "";
                    position: absolute;
                    display: block;
                    right: 0px;
                    top: 1.5px;
                    bottom: 1.5px;
                    width: 1px;
                    height: 100%;
                    background-color: var(--line);
                }
            }
        }
    }

    table {
        margin-bottom: 42px;

        td,
        th {
            font-size: 16px;
            font-weight: 500;
            line-height: 19px;
        }

        text-align: center;

        thead,
        th {
            padding: 15px 0px;
        }

        thead tr {
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        tbody {
            overflow: auto;

            &::-webkit-scrollbar {
                width: 3px;
                height: 3px;
            }

            &::-webkit-scrollbar-thumb {
                background: var(--surface);
                border-radius: 999px;
            }

            tr:not(:last-child) {
                border-bottom: 1px solid var(--line);
            }
        }

        td:first-child,
        th:first-child {
            text-align: start;
        }

        .infor-content {
            display: flex;
            gap: 10px;
            align-items: center;
            padding: 30px 0;

            .image {
                width: 98px;
                height: 130px;
                border-radius: 4px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .size {
                font-size: 12px;
                font-weight: 400;
                line-height: 14px;
                color: #00000099;
                margin-top: 10px;
            }
        }

        .subtotal-text,
        .subtotal-price {
            padding: 30px 15px;
        }
    }

    .tb-order-detail {
        margin-bottom: 42px;

        .title {
            padding: 15px 0px;
        }

        .item {
            font-size: 16px;
            font-weight: 500;
            line-height: 19px;
            width: 225px;
            text-align: center;

            &:first-child {
                width: unset;
                text-align: start;
                flex-grow: 1;
            }
        }

        .top {
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .order-detail-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 30px 0;

            &:not(:last-child) {
                border-bottom: 1px solid var(--line);
            }
        }

        .tb-content {
            overflow: auto;
            height: 461px;

            &::-webkit-scrollbar {
                width: 5px;
                height: 5px;
            }

            &::-webkit-scrollbar-thumb {
                background: #b4b4b4;
                border-radius: 999px;
            }

            .subtotal {
                position: sticky;
                bottom: 0;
                background-color: var(--white);
                padding: 0;
            }
        }

        .infor-content {
            display: flex;
            gap: 10px;
            align-items: center;

            .image {
                width: 98px;
                height: 130px;
                border-radius: 4px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            a {
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                overflow: hidden;
            }

            .size {
                font-size: 12px;
                font-weight: 400;
                line-height: 14px;
                color: #00000099;
                margin-top: 10px;
            }
        }

        .subtotal-text,
        .subtotal-price {
            padding: 30px 15px;
        }
    }

    .bottom {
        font-size: 16px;
        line-height: 19px;
    }
}

// cookie
.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    border-radius: 20px;
    right: 20px;
    max-width: 368px;
    background-color: var(--dark);
    z-index: 1000;
    .overplay {
        position: fixed;
        inset: 0;
        background-color: #00000066;
    }
    .content {
        position: relative;
        padding: 20px;
    }
    p {
        margin-bottom: 20px;
        color: var(--white);
    }
    .button-group {
        display: flex;
        gap: 10px;
        align-items: center;
        .tf-btn {
            font-size: 14px;
            font-weight: 500;
            line-height: 24px;
            width: 100%;
            padding: 7px 7px;
        }
    }
}

// tf-toolbar-bottom
.tf-toolbar-bottom {
    display: none;
    padding: 11px 15px 12px;
    position: fixed;
    z-index: 200;
    bottom: 0;
    right: 0;
    left: 0;
    border-top: 1px solid #eeeeee;
    background-color: var(--white);
    box-shadow: 0px 4px 20px 0px #a3a3a347;
    .toolbar-item {
        flex: 1 0 20%;
        position: relative;
        a {
            width: 100%;
            padding-right: 10px;
            padding-left: 10px;
            gap: 5px;
            @include flex(center, center);
            flex-direction: column;
            .toolbar-icon {
                width: 20px;
                height: 20px;
                position: relative;
            }
            .toolbar-count {
                position: absolute;
                top: -6px;
                right: -6px;
                width: 16px;
                height: 16px;
                @include flex(center, center);
                background-color: var(--primary);
                border-radius: 50%;
                font-size: 10px;
                font-weight: 500;
                line-height: 15px;
                color: var(--white);
            }
            .toolbar-label {
                font-size: 13px;
                font-weight: 500;
                line-height: 18px;
            }
        }
    }
}

// modal product
.popup-product {
    .modal-dialog {
        max-width: 1243px;
    }
    .modal-content {
        padding: 24px 15px 32px;
    }
    .modal-header {
        flex-direction: column;
        gap: 8px;
        justify-content: center;
        padding: 0;
        border: 0;
        margin-bottom: 40px;
        .countdown__timer {
            display: flex;
            gap: 6px;
            align-items: center;
            font-size: 18px;
            line-height: 26px;
            font-weight: 500;
            .countdown__value {
                color: var(--primary);
                margin-right: 6px;
            }
            .countdown__item:first-child {
                display: none;
            }
        }
    }
    .modal-body {
        padding: 0;
    }
    .box-hurry-up {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .tf-swiper {
        .sw-dot-default {
            margin-top: 5px;
        }
    }
}