/*css mặc định*/
/*#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    top: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}*/

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.content {
    padding-top: 1.1rem;
}

/*.valid.modified:not([type=checkbox]) {
    outline: 1px solid #007bff;
}*/

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
    font-size: var(--text-size-xs);
    width: 100%;
}

/*custom css*/
:root {
    --header-height: 100px;
    --sidebar-width: 270px;
    --primary-color: #ffd085;
    --button-color: #0c6efd;
    --background-color1: #fff4ea;
    --background-color2: white;
    --disabled-color-input: #f9f9f9;
    --bg-color-form: white;
    --bg-color-input: white;
    --bg-button-hover: #f5f5f5;
    --bg-button: #fffbfb;
    --bg-noti-item: #3333330f;
    --bg-primary-hover: #ffd085;
    --bg-detail-modal: #fbfbfb;
    --bg-login: #fff4ea;
    --bg-login-card: transparent;
    --bg-input-login: #fff;
    --bg-login-btn: #e0efff;
    --bg-tab-pane: #F7FAFC;
    --bg-invoice-detail: white;
    --bg-invoice-link: white;
    --login-btn-color: #007bff;
    --login-opacity: 1;
    --login-img-opacity: 1;
    --login-bg-img: grayscale(0);
    --icon-search-hover: black;
    --input-search-color: #ffffff;
    --menu-hover: #F8F9FA;
    --sub-menu-color: #fff4eac9;
    --sub-menu2-color: #ffeccc;
    --border-color: #D9D9D980;
    --border-color-thin: #F8F9FA;
    --box-shadow: 0 4px 12px #0000001a;
    --box-shadow1: rgba(0, 0, 0, 0.1);
    --btn-color: #373e5333;
    --text-color: #676767;
    --text-descript: #676767;
    --text-menu-color: #000;
    --text-title-color: black;
    --text-content-color: black;
    --text-size-xs: 12px;
    --text-size-sm: 13px;
    --text-size-md: 14px;
    --text-size-lg: 15px;
    --text-size-xl: clamp(16px, 1.5vw, 20px);
    --text-size-xxl: 22px;
    --input-filter-size: clamp(12px, 1.5vw, 14px);
    --light-grey: #909293;
    --navTav-color: #FFF5E9;
    --homePage-ovelay: transparent;
    --time-blur: #FFFFFF80;
    --date-blur: #FFFFFFCC;
    --calendar-grey: #D9D9D959;
    --total-amount: #F7FAFC;
    --line-under-tab: 1px solid #ededed;
    --thead-special: #f8f9fa;
    --ticket-number: #f5f5f5;
    --color-gray-800: #1e2939;
}

body.dark-mode {
    --background-color1: #0f111a;
    --background-color2: #1a1e2d;
    --bg-color-form: #0f111a;
    --bg-color-input: #1a1e2d;
    --bg-button-hover: #454545b0;
    --bg-button: #454545b0;
    --bg-noti-item: #0f111a;
    --bg-detail-modal: #0f111a;
    --bg-primary-hover: #0f111a;
    --bg-login: #06080a;
    --bg-login-card: #ababab1c;
    --bg-input-login: #1b2124;
    --login-opacity: 0.85;
    --login-img-opacity: 0.1;
    --login-bg-img: grayscale(0.5);
    --bg-login-btn: #0f111a;
    --bg-tab-pane: #454545b0;
    --bg-invoice-detail: #1a1e2d;
    --bg-invoice-link: #0f111a;
    --login-btn-color: #fff;
    --icon-search-hover: white;
    --input-search-color: #1a1e2d;
    --menu-hover: #0f111a;
    --btn-color: #9fa6bc;
    --sub-menu-color: #0f111a4d;
    --sub-menu2-color: #0f111a4d;
    --border-color: #95969a33;
    --border-color-thin: #0f111a;
    --box-shadow: 0 4px 12px #ffffff1a;
    --box-shadow1: rgba(255, 255, 255, 0.15);
    --text-color: #9fa6bc;
    --text-descript: #616161ad;
    --text-menu-color: #9fa6bc;
    --text-title-color: white;
    --text-content-color: #9fa6bc;
    --text-color-header: white;
    --navTav-color: #1a1e2d;
    --homePage-ovelay: #0f111ae8;
    --time-blur: #1a1e2da8;
    --date-blur: #1a1e2da8;
    --calendar-grey: #0f111a4a;
    --total-amount: #0f111a;
    --line-under-tab: 1px solid #2a2a2a;
    --disabled-color-input: #1c1c1c;
    --thead-special: #1a1e2d;
    --ticket-number: #0f111a;
}

tbody, td, tfoot, th, thead, tr {
    background-color: var(--background-color2);
}

table.table-borderless tbody tr:not(.is-loading),
table.table-borderless thead tr {
    border-bottom: 1px solid rgb(0 0 0 / 3%);
}

body.dark-mode table.table-borderless tbody tr:not(.is-loading),
body.dark-mode table.table-borderless thead tr {
    border-bottom: 1px solid #95969a08;
}

.merchant-name-column input {
    background-color: white !important;
    color: var(--text-color) !important;
}

body.dark-mode .merchant-name-column input {
    background-color: var(--background-color1) !important;
}

.merhcnat-name-th {
    color: var(--text-title-color);
    font-size: var(--text-size-md) !important;
}

body.dark-mode .btn-close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.text-xs {
    font-size: var(--text-size-xs) !important;
}

.text-sm {
    font-size: var(--text-size-sm) !important;
}

.text-md {
    font-size: var(--text-size-md) !important;
}

.text-lg {
    font-size: var(--text-size-lg) !important;
}

.text-xl {
    font-size: var(--text-size-xl) !important;
}

.text-xxl {
    font-size: var(--text-size-xxl) !important;
}

.text-color {
    color: var(--text-color) !important;
}

.text-title-color {
    color: var(--text-title-color) !important;
}

.text-content-color {
    color: var(--text-content-color) !important;
    font-size: var(--text-size-md) !important;
}

.text-blue-tag {
    color: #0D6EFD;
    background: rgb(13 110 253 / 10%);
}

.text-purple-tag {
    color: #6F42C1;
    background: rgb(111 66 193 / 10%);
}

.text-yellow-tag {
    color: #FFC107;
    background: rgb(255 193 7 / 10%);
}

.text-green-tag {
    color: #198754;
    background: rgb(25 135 84 / 10%);
}

.text-orange-tag {
    color: #FD7E14;
    background: rgb(253 126 20 / 10%);
}

.text-grey-tag {
    color: black;
    background: #F5F5F5;
    text-transform: capitalize !important;
}

.text-red-tag {
    color: white;
    background: #DC3545;
    text-transform: capitalize !important;
}

.text-orange-tag,
.text-green-tag,
.text-yellow-tag,
.text-purple-tag,
.text-blue-tag,
.text-grey-tag,
.text-red-tag {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px !important;
    margin-left: -10px !important;
    text-transform: lowercase;
}

.border {
    border: 1px solid var(--border-color) !important;
}

html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    scroll-behavior: smooth;
}

html {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

#app {
    height: 100%;
    overflow: auto;
}

.content {
    height: calc(100% - var(--header-height));
    /* overflow-y: auto; */
}

.sidebar {
    height: 100%;
}

.main {
    height: 100%;
    overflow-y: auto;
}

body {
    background-color: var(--background-color1) !important;
    font-family: "IBM Plex Sans", sans-serif !important;
}

.overlay {
    position: relative;
}

    .overlay::before {
        position: absolute;
        content: "";
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #33333370;
        z-index: 999;
    }

i {
    cursor: pointer;
    /*color: var(--text-color);*/
}

.avatar-img {
    border-radius: 50% !important;
    border: 2px solid white;
    box-shadow: 0px 4px 6px 1px #00000030;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
    box-shadow: none;
}

body.dark-mode .btn.btn-light {
    background-color: #262d30;
    color: var(--text-color);
    border: var(--border-color);
}

input[readonly] {
    background-color: #dee2e6;
}

body.dark-mode input[readonly] {
    background-color: var(--background-color2);
    color: var(--text-color);
}

input[readonly]:focus {
    outline: 0;
    border: 0;
    background-color: var(--bs-border-color);
    box-shadow: none;
}

.btn-default i {
    color: var(--text-color);
}

#foc textarea::placeholder,
#other textarea::placeholder {
    color: var(--text-color)
}

.default-tag {
    background-color: #9092931A !important;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: var(--text-size-xs) !important;
}

input[type="number"],
.input_number_if_type_equals_text {
    max-width: 100px !important
}

input:not([type="checkbox"]):not(.swal2-input),
select,
textarea {
    border: 1px solid var(--border-color);
    padding: 8px 12px !important;
    /* padding-bottom: 0;*/
    border-radius: 10px !important;
    width: 100%;
    font-size: var(--text-size-md);
}

small.text-muted {
    color: var(--text-descript) !important;
    font-size: 12px;
}

button {
    font-size: var(--text-size-md) !important;
}

body.dark-mode input:not([type="checkbox"]):not([readonly]):not(.input-search):not(#swal2-input),
body.dark-mode select,
body.dark-mode textarea {
    background-color: var(--background-color1);
    color: var(--text-content-color);
    border: none;
}

.advance-search input {
    background-color: var(--background-color2) !important;
}

body.dark-mode .bi-calendar2-event {
    background-color: var(--background-color1);
}

body.dark-mode input::placeholder {
    color: var(--text-color);
}

body.dark-mode input:not([type="checkbox"]):-webkit-autofill {
    background-color: var(--bg-input-login) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input-login) inset !important;
    -webkit-text-fill-color: var(--text-title-color) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.btn-default:not(.cancelBtn),
.btn-view,
.btn-edit-user,
.btn-close,
.text-danger,
.modal-option {
    width: 40px !important;
    height: 40px !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
}

    .btn-default:hover,
    .btn-view:hover,
    .btn-edit-user:hover,
    .btn-close:hover,
    .text-danger:hover,
    .modal-option:hover,
    i.bi-arrow-up:hover,
    i.bi-arrow-down:hover {
        background-color: var(--bg-button-hover) !important;
    }

i.bi-arrow-up,
i.bi-arrow-down {
    border: none !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    padding: 4px 8px;
}

.modal-header .btn-close {
    transition: all 0.3s ease;
    padding: 0;
}

#wrapper {
    width: 100%;
}

.footer-btn {
    border-top: 1px solid var(--border-color) !important;
    border-bottom: 0;
    background: var(--background-color2);
    z-index: 99;
    margin-top: auto;
    padding: 20px;
}

label.form-check-label small {
    color: var(--text-descript) !important;
}

.modal-body,
.modal-footer {
    background: var(--background-color2);
}

    .modal-body label {
        color: var(--text-title-color)
    }

.sidebar-nav {
    display: flex;
    justify-content: center;
    padding: 35px 0;
}

    .sidebar-nav .nav-link {
        color: var(--text-menu-color) !important;
        font-weight: 400;
        font-size: 0.9rem;
        font-size: var(--text-size-lg);
        position: relative;
        padding: 10px;
    }

        .sidebar-nav .nav-link[aria-expanded="true"] {
            background: var(--background-color1);
            /*            color: #FBA00C !important;*/
        }



    .sidebar-nav .sub-nav-link {
        padding: 4px 16px;
    }

    .sidebar-nav .nav-link i {
        width: 1rem;
        font-size: 0.9rem;
    }

        .sidebar-nav .nav-link i.bi-chevron-down,
        .sidebar-nav .nav-link i.bi-chevron-right {
            position: absolute;
            right: 10px;
            font-size: var(--text-size-md);
        }



/*.sidebar-nav ul li.active .nav-link {
    color: black !important;
}*/

#header {
    height: var(--header-height);
    position: fixed;
    /*    background-color: var(--background-color1);*/
    z-index: 99;
    right: 0;
    left: 0;
}

.left-content-mobile button {
    border: none;
    background-color: transparent;
}

    .left-content-mobile button svg path {
        fill: var(--text-color);
    }

.left-content-mobile img {
    width: 30px;
}

.sidebar {
    border-radius: 20px;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    position: fixed;
    z-index: 99;
}

.sidebar-wrap {
    background-color: var(--background-color2);
    border-radius: 20px;
    width: 220px;
    position: relative;
}

    .sidebar-wrap .logo-header {
        border-radius: 10px;
    }

    .sidebar-wrap ul li.active {
        background-color: var(--primary-color);
        border-radius: 8px;
    }


        .sidebar-wrap ul li.active > .nav-item a[aria-expanded="false"] {
            color: black !important;
        }

    .sidebar-wrap ul.list-unstyled li {
        padding: 6px 0;
        margin-top: 6px;
        transition: all 0.2s ease;
    }

    .sidebar-wrap ul > li {
        margin-top: 12px;
        transition: all 0.2s ease;
    }

    .sidebar-wrap button {
        position: absolute;
        top: 0;
        right: 0;
    }

    .sidebar-wrap ul li:not(.active):hover {
        background-color: var(--sub-menu-color);
        border-radius: 8px;
    }



        .sidebar-wrap ul li:not(.active):hover .nav-item > a {
            color: #FBA00C !important;
        }

            .sidebar-wrap ul li:not(.active):hover .nav-item > a[aria-expanded="true"] {
                /*                    color: white !important;*/
            }

    .sidebar-wrap ul li:has(a[aria-expanded="true"]) {
        background-color: var(--sub-menu-color);
        border-radius: 8px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .sidebar-wrap .back-to-main {
        cursor: pointer;
        color: var(--text-title-color);
        padding: 10px;
        border-radius: 10px;
        transition: all 0.3s ease;
    }


        .sidebar-wrap .back-to-main:hover {
            font-weight: 500;
            background: var(--background-color1);
        }


.nav-wrap {
    overflow: auto;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(100, 100, 100, 0.6) transparent;
    /* padding-right: 12px; */
}

.nav-wrap {
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

    .nav-wrap::-webkit-scrollbar {
        /* Chrome, Safari, Opera */
        display: none;
    }

    .nav-wrap::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .nav-wrap .list-unstyled li:not(.active):hover {
        background: var(--sub-menu2-color) !important;
    }

    .nav-wrap .list-unstyled li:hover a {
        color: var(--text-title-color) !important;
    }

.main {
    margin-top: var(--header-height);
    width: 100%;
}

    .main .container-fluid {
        padding-bottom: 30px;
    }

/* .content {
    height: 100vh;
} */

.blazored-toast-container {
    z-index: 2000 !important; 
    position: fixed !important;
}

.red-price {
    color: red !important;
}

.content .top-price-item {
    display: flex;
    background: white;
    padding: 16px 20px;
    border-radius: 20px;
}

    .content .top-price-item .customers-wrap {
        display: flex;
        justify-content: space-between;
    }

    .content .top-price-item img {
        height: 70px;
        margin-right: 16px;
    }

    .content .top-price-item .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
    }

.content .customers-wrap .item-name {
    font-weight: 500;
}

.content .customers-wrap .date,
.content .grow {
    font-size: var(--text-size-sm);
}

.content .customers-wrap .date,
.content .price {
    color: var(--text-color);
}

.content .price {
    font-size: var(--text-size-md);
}

.content .grow-wrap span,
.content .grow-wrap svg {
    color: var(--primary-color);
}

.revenue-chart .col-8 canvas {
    background-color: white;
    padding: 20px;
    border-radius: 20px;
}

.noti-menu {
    background-color: var(--background-color2);
    border: 1px solid var(--border-color);
}

    .noti-menu ul.noti-list {
        height: 600px;
    }

    .noti-menu li {
        padding: 10px 18px;
        margin: 0;
        cursor: pointer;
        list-style: none;
        position: relative;
        display: flex;
        flex-direction: column;
        border-radius: 4px;
        padding-right: 0;
        /*        border-bottom: 1px solid var(--border-color);*/
    }


        .noti-menu li:not(.readed):hover i {
            opacity: 1;
            visibility: visible;
        }

        .noti-menu li:not(:last-child) {
            margin-bottom: 6px;
        }

        .noti-menu li:last-child {
            border: 0;
        }

        .noti-menu li span {
            /* padding: 0 6px; */
            font-weight: 500;
            font-size: 12px;
            color: var(--text-color);
        }

        .noti-menu li small {
            color: #374151c2 !important;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 500;
        }

body.dark-mode .noti-menu li small,
body.dark-mode .noti-menu li.readed h4 {
    color: #d1d1d1c2 !important;
}

.noti-menu li:not(.readed) small {
    color: #374151 !important;
    font-weight: 500 !important;
}

.noti-menu li h4 {
    color: #374151;
    margin-bottom: 0;
    font-size: var(--text-size-md);
    font-weight: bolder;
}

.noti-menu li.readed h4 {
    font-weight: 500;
    color: #374151c2;
}

body.dark-mode .noti-menu li h4 {
    color: #D1D1D1;
}

.date-time-noti span {
    color: var(--text-color-header);
}

.noti-menu li:not(.readed) .noti-title i.bi-eye {
    display: none;
}

.noti-menu li:not(.readed) .noti-title i.bi-bell {
    animation: shake 1s ease-in-out infinite;
}

.noti-menu li.readed .noti-title i {
    color: var(--text-color);
}

.noti-menu li.readed .date-time-noti span {
    display: block !important;
    font-size: 12px;
    color: var(--text-color);
}

    .noti-menu li.readed .date-time-noti span.readed-at {
        display: block !important;
    }

    .noti-menu li.readed .date-time-noti span.time {
        display: none !important;
    }

/*.noti-menu li:not(.readed) {
    background-color: var(--bg-noti-item);
}*/

.noti-menu li i {
    position: absolute;
    bottom: 28px;
    right: 12px;
    color: #51a9fa;
    opacity: 0;
    transition: all 0.3s ease;
    visibility: hidden;
}

.noti-menu li.readed i { 
    opacity: 1;
    visibility: visible;
}

.noti-list li.noti-item {
    cursor: pointer;
}

.noti-menu li.noti-item:not(.readed)::after {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    background-color: #51a9fa;
    left: 4px;
    top: 50%;
    border-radius: 50%;
    transform: translateY(-50%);
}

.noti-menu .noti-list li.noti-item:not(.readed) {
    background-color: #e8f3f6 !important;
}

.noti-search input {
    border-radius: 20px !important;
    padding: 6px 11px !important;
    font-size: var(--text-size-md);
    width: 150px;
}

body.dark-mode .noti-search input {
    background-color: var(--background-color2)
}

.dropdown-menu .noti-list li.readed:hover {
    background-color: #f0f2f4 !important;
}

body.dark-mode .dropdown-menu .noti-list li.readed:hover {
    background-color: #313441 !important;
}

.noti-menu .noti-header {
    font-size: 1rem;
    color: var(--text-color);
    font-weight: 400;
    padding: 6px 10px;
    margin: 0;
    /* border-bottom: 1px solid var(--border-color); */
    background-color: white;
    z-index: 9;
}

    .noti-menu .noti-header:after {
        content: "";
        position: absolute;
        right: 8px;
        top: -24px;
        width: 25px;
        border: 12px solid;
        rotate: 180deg;
        border-color: white transparent transparent transparent;
        z-index: 1;
    }

body.dark-mode .noti-header:after {
    color: #21242e;
}

body.dark-mode .noti-menu .noti-header,
body.dark-mode .noti-menu .tab-content {
    background-color: #21242e;
}

    body.dark-mode .noti-menu .noti-header:after {
        border-color: #21242e transparent transparent transparent;
    }

body.dark-mode .noti-menu .noti-list li.noti-item:not(.readed) {
    background-color: #2d384a !important;
}

body.dark-mode .noti-menu li:not(.readed) small {
    color: #D1D1D1 !important;
}

.noti-menu .noti-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--border-color);
}

    .noti-menu .noti-footer a {
        font-size: 1rem;
        font-weight: 400;
        margin: 0;
        text-align: center;
        color: var(--text-color-header);
        text-decoration: none;
    }

.noti-menu ul {
    overflow: auto;
}

.noti-menu .noti-img {
    width: 40px;
    height: 40px;
    padding: 0;
    /*    flex: 1;*/
}

.date-time-noti {
    flex: 2;
    align-self: end;
    text-align: end;
}

.noti-menu .noti-content {
    flex: 10;
    padding-left: 10px;
    padding-right: 0;
}

.noti-menu {
    position: absolute;
    top: 52px !important;
    left: auto !important;
    right: -2px;
    width: 475px;
}

    .noti-menu .tab-content {
        overflow-y: auto;
    }

.noti-header li.nav-item {
    padding: 0;
}

/*.noti-header li.nav-item:hover {
    background: transparent;
}*/

.noti-header button.nav-link {
    padding: 4px 8px;
}

    .noti-header button.nav-link.active {
        background-color: #017e8413 !important;
        border: 1px solid #017e841a;
        color: #017E83 !important;
    }

.nav.nav-tabs1.tabs-highlight::-webkit-scrollbar-button {
    display: none !important;
}

.noti-menu ul::-webkit-scrollbar,
#main-table::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.mango-search-list::-webkit-scrollbar,
.select2-search-list::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.custom-dropdown::-webkit-scrollbar,
.nav.nav-tabs1.tabs-highlight::-webkit-scrollbar,
.upcoming-renewel::-webkit-scrollbar,
.total-subscription::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
}

.noti-menu ul::-webkit-scrollbar-track,
#main-table::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track,
.mango-search-list::-webkit-scrollbar-track,
.select2-search-list::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.custom-dropdown::-webkit-scrollbar-track,
.nav.nav-tabs1.tabs-highlight::-webkit-scrollbar-track,
.upcoming-renewel::-webkit-scrollbar-track,
.total-subscription::-webkit-scrollbar-track {
    background: #f0f0f0 !important;
}

.noti-menu ul::-webkit-scrollbar-thumb,
#main-table::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
.mango-search-list::-webkit-scrollbar-thumb,
.select2-search-list::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.custom-dropdown::-webkit-scrollbar-thumb,
.nav.nav-tabs1.tabs-highlight::-webkit-scrollbar-thumb,
.upcoming-renewel::-webkit-scrollbar-thumb,
.total-subscription::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 3px !important;
}

    .noti-menu ul::-webkit-scrollbar-thumb:hover,
    #main-table::-webkit-scrollbar-thumb:hover
    .modal-content::-webkit-scrollbar-thumb:hover,
    .mango-search-list::-webkit-scrollbar-thumb,
    .select2-search-list::-webkit-scrollbar-thumb,
    .table-responsive::-webkit-scrollbar-thumb,
    .custom-dropdown::-webkit-scrollbar-thumb,
    .nav.nav-tabs1.tabs-highlight::-webkit-scrollbar-thumb,
    .upcoming-renewel::-webkit-scrollbar-thumb,
    .total-subscription::-webkit-scrollbar-thumb {
        background: #555 !important;
    }

.status-tab-list {
    overflow: auto;
    display: flex;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .status-tab-list::-webkit-scrollbar {
        display: none;
    }

.table-area {
    padding-bottom: 34px;
}

@media (min-width: 491px) {
    .bank-option {
        align-items: center;
    }
}


@media (max-width: 490px) {
    .bank-option {
        align-items: start !important;
        flex-direction: column;
    }

    .bank-option .btn{
       margin-top: 10px;
    }
}

@media (max-width: 576px) {
    .table-area .table-header .input-search {
        width: 100% !important;
    }

    table.dataTable thead th {
        text-align: center !important;
    }

    tbody tr td:not(:has(label)) {
        text-align: center;
    }


    .noti-menu {
        width: 320px !important;
        right: -68px !important;
    }

        .noti-menu .noti-header:after {
            right: 74px !important;
        }

    .licence-manager {
        /*        padding-bottom: 30px;*/
    }

    .licence-manager {
        height: 640px !important;
    }

    #pills-tab li button {
        font-size: var(--text-size-lg);
    }

    .header-wrap {
        padding: 24px !important;
    }

    :root {
        --header-height: 75px;
    }

    #header {
        height: var(--header-height);
    }

    .table-header {
        padding-bottom: 0 !important;
    }

    .bg-img img:first-child {
        scale: 8;
    }

    /*.table-area .search .setting-btn {
        right: 34px !important; 
    }

    .table-area .search .search-btn {
        width: 32px !important;
    }*/

    .daterangepicker.show-calendar {
        overflow: auto;
        height: 400px;
    }

    .text-end .row-options.open {
        animation: leftSlide 0.6s ease forwards;
        animation-delay: 0.1s;
    }

    .timedate-home {
        flex-wrap: wrap;
    }

        .timedate-home .time-home {
            margin-right: 0 !important;
            margin-bottom: 20px;
        }

    .invoice-action-menu {
        right: -144% !important;
    }


    /*        .invoice-action-menu ul.dropdown-menu-c2 {
            left: -65% !important;
            width: 80% !important;
            z-index: 9;
        }*/

    .card-header-tabpane.highlight-init-2025 .nav-pills li button {
        padding: 16px 4px !important;
    }

    .merchant-account-view{
        flex-direction: column !important;
    }

    .merchant-account-view .type-account,
    .merchant-account-view button {
        align-self: start !important;
        padding-left: 0 !important;
    }

    .invoice-back-btn,
    .credit-wallet {
        align-self: start;
    }

    .complete_payment-header,
    .available-balance {
        flex-direction: column;
    }

    .summary-footer{
        flex-direction: column;
    }
}

@media (min-width: 576px) {
    .modal-header-wrap {
        position: relative;
    }

    tbody tr:hover .text-end .row-options {
        animation: leftSlide 0.6s ease forwards;
        animation-delay: 0.1s;
    }

    .upcoming-renewel, .total-subscription {
        height: 60px;
    }
}

@media (min-width: 769px) {
    .table-area.mongo-search .input-search,
    .table-area.mongo-search .search {
        width: 500px !important;
    }

    .invoice-detail-container .infor-content {
        position: absolute;
        right: 0;
    }

    .invoice-detail-table {
        margin-top: 60px !important
    }

    .licence-manager.invoice .nav-link.active,
    .licence-manager.invoice .nav-link {
        padding: 24px !important;
    }

    #tab-table .nav-link {
        padding-bottom: 30px !important;
    }

    /* .status-tab-list {
        display: flex;
        justify-content: space-between;
        width: 80%;
    }*/

    .change-plane-modal {
        width: auto !important;
    }

    .tab-pane .card strong,
    .tab-pane .card p {
        padding: 0 0px;
    }
}

@media (min-width: 991px) {
    .modal:not(.half-screen-modal) .total-subscription {
        margin-right: 6px;
    }

    .payment-footer {
        margin-top: 200px;
    }
}

@media (max-width: 768px) {
    .main {
        /*        padding-bottom: 20px;*/
    }

    table.dataTable thead > tr > th.dt-orderable-asc,
    table.dataTable thead > tr > th.dt-orderable-desc,
    table.dataTable thead > tr > th.dt-ordering-asc,
    table.dataTable thead > tr > th.dt-ordering-desc,
    table.dataTable thead > tr > td.dt-orderable-asc,
    table.dataTable thead > tr > td.dt-orderable-desc,
    table.dataTable thead > tr > td.dt-ordering-asc,
    table.dataTable thead > tr > td.dt-ordering-desc {
        padding-right: 0 !important;
    }

    .table > :not(caption) > * > * {
        /* padding: 0 4px;*/
        text-align: start;
    }

    .licence-manager .dt-layout-start,
    .licence-manager .dt-layout-end {
        display: flex !important;
        justify-content: start !important;
    }


    .table-area .tool-wrap .filter,
    .table-area .tool-wrap .add {
        height: 100% !important;
    }

    .container.tab-content .col-md-6 {
        margin-bottom: 20px;
    }

    .table-area.mongo-search .input-search,
    .table-area.mongo-search .search {
        width: 100% !important;
    }

    .invoice-detail-container .infor-content {
        width: 100%
    }

    /*#main-table.invoice-table .invoice-quantity {
        min-width: 230px !important;
    }*/

    #main-table.invoice-table .invoice-total, #main-table.invoice-table .invoice-total-column {
        padding-right: 8px !important;
    }

    #tab-table .nav-link {
        padding-bottom: 20px !important;
        padding-top: 20px;
    }

    ul.dropdown-menu li.disabled button {
        pointer-events: none;
    }
}

@media (min-width: 576px) and (max-width: 1200px) {
    .header-wrap {
        padding: 20px !important;
    }

    :root {
        --header-height: 75px;
    }
}

/*@media (min-width: 769px) and (max-width: 1200px){
    #main-table.invoice-table .invoice-quantity {
        min-width: 205px !important;
    }
  
}*/

@media (min-width: 991px) and (max-width: 1200px) {

    .half-screen-modal .prod-img-container .col-6 {
        flex: 0 0 auto !important;
        width: 50% !important;
        margin-bottom: 20px !important;
    }
}

@media (min-width: 991px) and (max-width: 1620px) {
    .half-screen-modal .payment-container .col-12 {
        flex: 0 0 auto !important;
        width: 50% !important;
        margin-bottom: 16px !important;
    }

    .half-screen-modal .invoice-detail-page .payment-method {
        padding: 18px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1600px) {
    .half-screen-modal .prod-img-container .col-6 {
        flex: 0 0 auto !important;
        width: 33.33333% !important;
        margin-bottom: 20px !important;
    }

    /*:root {
        --header-height: 65px;
    }
*/
    .header-wrap {
        /* padding: 20px 35px !important;*/
        padding-left: 0 !important;
    }

    .licence-manager {
        height: 751px !important;
    }
}

@media (min-width: 1600px) {
    .half-screen-modal .prod-img-container .col-6 {
        flex: 0 0 auto !important;
        width: 25% !important;
        margin-bottom: 20px !important;
    }
}

@media (min-width: 1700px) {
    .modal .total-subscription {
        margin-right: 6px;
    }
}

@media (max-width: 1700px) {
    .half-screen-modal .merchant-total-status {
        flex-direction: column;
    }

    .half-screen-modal .total-subscription {
        margin-bottom: 4px;
    }
}

@media (max-width: 991px) {
    .header-btn .btn-expand {
        display: none !important;
    }

    .modal-fullscreen .tab-pane .row .col-lg-6:last-child {
        margin-top: 20px !important;
    }

    /*.licence-manager.invoice .nav-link.active,
    .licence-manager.invoice .nav-link {
        padding: 16px 0 !important;
    }*/

    .row-addname {
        display: flex;
        justify-content: end;
    }

        .row-addname .col-3 {
            display: flex;
            justify-content: end;
            margin-top: 20px;
        }

    .type-account {
/*        max-width: 250px !important;*/
    }

    #merchantViewModal:not(.half-screen-modal) .merchant-total-status {
        flex-direction: column !important;
    }

    .total-subscription {
        margin-bottom: 4px;
    }
}

@media (min-width: 1001px) {


    tbody tr .text-end .row-options button:hover i {
        /* color: var(--primary-color); */
    }

    .half-screen-modal {
        width: 50%;
        right: 0;
        left: auto;
        box-shadow: -6px 0px 20px #0000001a;
    }

        .half-screen-modal .modal-fullscreen {
            width: 50vw !important;
            margin-left: auto !important;
        }

        .half-screen-modal .modal-header,
        .half-screen-modal .modal-footer {
            width: 50% !important;
        }

            .half-screen-modal .modal-header .container:first-child {
                margin: 0 !important;
            }

        .half-screen-modal .tab-pane .col-lg-6,
        .half-screen-modal .tab-pane .col-lg-7 {
            flex: 0 0 auto !important;
            width: 100% !important;
        }

        .half-screen-modal .tab-pane .row .col-lg-6:last-child {
            margin-top: 20px !important;
        }

        .half-screen-modal .container.tab-content {
            padding: 0 30px;
        }


        .half-screen-modal .full-row .col-5 {
            flex: 0 0 auto !important;
            width: 33.33333333% !important;
        }


        .half-screen-modal .usage-limit-tab .row .col-4 {
            flex: 0 0 auto !important;
            width: 16.66666667% !important;
        }

        .half-screen-modal .usage-limit-tab .row .col-8 {
            flex: 0 0 auto !important;
            width: 83.33333333% !important;
        }

        .half-screen-modal .new-merchant .row .col-3 {
            flex: 0 0 auto !important;
            width: 33.33333333% !important;
        }

        .half-screen-modal .new-merchant .row .col-9 {
            flex: 0 0 auto !important;
            width: 66.66666667% !important;
        }

    /*.half-screen-modal .swiper.cardSwiper .swiper-slide {
        min-width: 350px !important;
    }*/
}



@media (max-width: 1200px) {
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 250px;
        transform: translateX(-100%);
        z-index: 999999;
    }

        .sidebar.active {
            animation: menuSlide 0.2s ease forwards;
            display: flex;
        }

            .sidebar.active .sidebar-nav {
                padding-left: 0;
                padding-right: 0;
            }

            .sidebar.active .sidebar-wrap {
                border-radius: 0 10px 10px 0;
                box-shadow: 0px 0px 3px 0px #8888885c;
            }

    .container.tab-content:not(.products-view):not(.approve-container):not(.container_refund):not(.payment-method-tab) {
        margin-top: 165px !important;
    }
}

@media (min-width: 1201px) {
    #header {
        width: calc(100% - 254px);
        margin-left: var(--sidebar-width);
    }

    .main {
        width: calc(100% - var(--sidebar-width));
        margin-left: var(--sidebar-width);
    }

    .prod-img-container .row .col-6 {
        /*        margin-right: 30px;*/
    }

    

    /* #main-table.invoice-table .invoice-quantity {
        min-width: 122px !important;
    }*/

    .mango-credit-balance {
        white-space: nowrap;
    }
}

@media (max-width: 1400px) {
    .modal.half-screen-modal .avt-profile .col-lg-4.avatar-img-wrap,
    .modal.half-screen-modal .avt-profile .col-lg-8.card-content {
        flex: 0 0 auto !important;
        width: 100% !important;
    }
}

@media (min-width: 1400px) {
    /* #main-table.invoice-table .invoice-quantity {
        width: 142px !important;
    }*/

    .modal-fullscreen.half-screen-modal #main-table.invoice-table .invoice-quantity {
        min-width: 150px !important;
    }

    .modal-bot-infor .header-btn {
        position: absolute;
        right: -2%;
        top: 50%;
        transform: translateY(-50%);
    }
}


#main-table.invoice-table .invoice-total,
#main-table.invoice-table .invoice-total-column {
    padding-right: 0;
    text-align: end;
}

.licence-manager thead:not(.invoice) tr th:not(:last-child),
.licence-manager thead.edit-combo tr th
/*table.mango-combo thead tr th:not(:last-child)*/ {
    /*min-width: 160px;*/
    padding-bottom: 22px;
}

/*table.mango-combo thead tr th:not(:last-child) {
    min-width: 140px;
}*/

thead:not(.default-table) tr th:first-child {
    min-width: 50px !important;
}

thead.default-table

.panigation-wrap {
    position: sticky;
    bottom: 0;
    z-index: 99;
    background: var(--background-color2);
}

.panigation-wrap span {
    color: var(--text-title-color);
}

@media (min-width: 769px) and (max-width: 900px) {
    .content .top-price-item {
        display: block !important;
    }
}

/*@media (min-width: 1200px) and (max-width: 1400px) {
    .licence-manager.invoice .row-options {
        background: var(--background-color2);
        opacity: 0;
        transition: all 0.2s ease;
        position: fixed !important;
        right: 20vw;
    }
}*/

.header-wrap {
    padding: 35px;
}



    .header-wrap .left-content-pc h5 {
        color: var(--text-color-header);
    }

    .header-wrap .left-content-pc .breadcrum a,
    .header-wrap .left-content-pc .breadcrum i {
        text-decoration: none;
        color: var(--text-color);
        font-size: var(--text-size-md);
    }

        .header-wrap .left-content-pc .breadcrum a:hover {
            font-weight: 500;
        }



    .header-wrap .right-content i {
        font-size: 1.2rem;
    }

    .header-wrap .right-content button,
    .header-wrap .right-content .noti.btn {
        background-color: transparent;
        border: none;
    }

    .header-wrap .profile span {
        color: var(--text-title-color) !important;
        transition: all 0.2s ease;
    }

    .header-wrap .dropdown.profile:hover span {
        color: var(--text-title-color) !important;
        font-weight: 500;
    }

    .header-wrap .right-content button,
    .header-wrap .right-content button i,
    .header-wrap .right-content a i {
        color: var(--text-color);
    }

    .header-wrap .right-content .dropdown a#notifDropdown {
        border-radius: 50%;
        padding: 6px 10px;
    }

        .header-wrap .right-content .dropdown a#notifDropdown:hover,
        .header-wrap .right-content button:not(.nav-link):hover {
            border-radius: 50%;
            background-color: var(--bg-button-hover);
        }

        .header-wrap .right-content .dropdown a#notifDropdown,
        .header-wrap .right-content button,
        .header-wrap .right-content .dropdown a#notifDropdown i,
        .header-wrap .right-content button i {
            transition: all 0.3s ease;
        }

            .header-wrap .right-content .dropdown a#notifDropdown:hover i,
            .header-wrap .right-content button:hover i {
                /* color: white; */
            }

    .header-wrap .right-content .dropdown.profile:hover {
        background-color: transparent;
    }

/* table */
table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover,
table.dataTable thead > tr > td.dt-orderable-asc:hover,
table.dataTable thead > tr > td.dt-orderable-desc:hover {
    outline: none !important;
    outline-offset: 0 !important;
}

th.no-sort .dt-column-order::before,
th.no-sort .dt-column-order::after,
th.no-sort .dt-column-order {
    display: none !important;
}

th .dt-column-order::before,
th .dt-column-order::after {
    position: static !important;
    display: block;
    margin-bottom: 2px;
}

th .dt-column-order {
    position: static !important;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-left: 12px;
}

.dt-column-title {
    white-space: nowrap;
}

table.dataTable,
table.dataTable thead,
table.dataTable tbody,
table.dataTable td,
table.dataTable th {
    background-color: var(--background-color2);
    color: var(--text-color);
}

    table.dataTable thead {
        margin-bottom: 30px;
    }

        table.dataTable thead th {
            padding-bottom: 20px !important;
        }

        table.dataTable thead span,
        table.dataTable thead .form-check label {
            font-weight: 700 !important;
            color: var(--text-title-color);
            font-size: var(--text-size-lg);
        }

tbody tr {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}


.licence-manager tbody tr:not(.is-loading):hover {
    box-shadow: var(--box-shadow);
    transform: translateY(-2px);
    z-index: 1;
    position: relative;
}

.table-header {
    position: sticky;
    top: 0;
    background: var(--background-color1);
    z-index: 10;
    padding-bottom: 10px;
}

    .table-header .tool-wrap {
        align-items: end;
    }

.text-end .row-options.open {
    animation: leftSlide 0.6s ease forwards;
    animation-delay: 0.1s;
    background: var(--background-color2);
    padding: 4px;
    border-radius: 10px;
}

.table-area .tool-wrap .add {
    border: 1px solid var(--border-color);
    /* background: var(--primary-color); */
    padding: 6px 10px;
    border-radius: 4px;
    /*    height: 80%;*/
    /* color: black; */
    transition: all 0.2s ease;
}

.table-area .tool-wrap .filter {
    border: 1px solid #3333332e;
    border-radius: 4px;
    padding: 0px 16px;
    margin-right: 6px;
    /*    height: 80%;*/
    background: var(--background-color2);
    color: var(--text-title-color);
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

    .table-area .tool-wrap .filter:hover,
    .table-area .search .search-btn:hover {
        background-color: #3333330f;
    }

.table-area .tool-wrap .add:hover {
    /* background-color: var(--bg-primary-hover);
    font-weight: 700; */
}

.table-area .tool-wrap .filter i {
    font-size: 1.5rem;
}

.table-area .search .setting-btn {
    position: absolute;
    right: 42px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    border: none;
    background: var(--background-color2);
    transition: all 0.3s ease;
}

    .table-area .search .setting-btn:hover {
        background-color: transparent !important;
    }

    .table-area .search .setting-btn i,
    .table-area .search .search-btn i {
        color: var(--text-color);
        transition: all 0.2s ease;
    }

    .table-area .search.setting-btn:hover i {
        scale: 1.15;
    }

.table-area .search .search-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    border: none;
    border-radius: 0 24px 24px 0;
    height: 100%;
    padding: 6px;
    background: var(--background-color2);
    transition: all 0.2s ease;
}

.mango-search-input .search .search-btn {
    background-color: var(--bg-button-hover);
}

/* .table-area .search .search-btn:focus-within {
    background-color: #f0f0f0; 
    transition: background-color 0.3s ease;
} */
input.input-search[type="text"]:focus {
    border-width: 2px;
    outline: none;
    box-shadow: none;
}

.table-area .table-header .input-search {
    border: 1px solid transparent;
    padding: 12px 16px !important;
    width: 500px;
    border-radius: 24px !important;
    background: var(--input-search-color);
    color: var(--text-title-color);
    transition: all 0.3s ease;
}

.table-area.mongo-search .mango-search-list {
    background: var(--background-color2);
    box-shadow: 0px 4px 10px 0px var(--box-shadow1);
    border-radius: 10px;
    height: 350px;
    overflow: auto;
}

.table-area.mongo-search .mango-search-item {
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    transition: all 0.3s ease;
}

body.dark-mode .table-area.mongo-search .mango-search-item:not(:last-child) {
    border-bottom: 1px solid var(--background-color1);
}

.table-area.mongo-search .mango-search-item:not(:last-child) {
    border-bottom: 1px solid #F8F9FA;
}

.table-area.mongo-search .mango-search-item .item-name p {
    width: 80%;
    font-size: 12px;
}

.table-area.mongo-search .mango-search-item .item-name span {
    font-size: var(--text-size-md);
    color: var(--text-title-color);
}

.table-area.mongo-search .mango-search-item .price {
    color: var(--text-title-color)
}

.table-area.mongo-search .mango-search-item:hover {
    background: var(--menu-hover);
}

.table-area.mongo-search .input-search {
    background: var(--bg-button-hover);
    border: 1px solid transparent;
    padding: 12px 16px !important;
    border-radius: 24px !important;
    color: var(--text-title-color);
    transition: all 0.3s ease;
}

body.dark-mode .table-area.mongo-search .input-search,
body.dark-mode .table-area .search .search-btn {
    /*background: var(--background-color1);*/
}

.table-area.mongo-search .mongo-search-wrap {
    z-index: 999;
    width: 100%;
}

.table-area.mongo-search .setting-btn {
    display: none !important;
}

tbody.mango-combo tr:hover .text-end .row-options {
    animation: leftSlide 0.6s ease forwards;
    animation-delay: 0.1s;
}

}

.table-area .search:hover .input-search,
.table-area.mongo-search .input-search {
    border: 1px solid var(--border-color);
}

.table-area .search:hover .search-btn {
    background-color: var(--bg-button-hover)
}

    .table-area .search:hover .search-btn i {
        color: var(--icon-search-hover);
    }

    .table-area .search:hover .search-btn svg path {
        fill: var(--icon-search-hover);
    }

.table-area .table-header .advance-search {
    z-index: 999;
    background: var(--bg-color-form);
    padding: 20px;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
    width: 100%;
}

.advance-search .form-check-label {
    color: var(--text-color);
    font-size: var(--text-size-md);
}

.table-header .advance-search .search-item {
    display: flex;
    margin-bottom: 14px;
}

/* .table-header .search::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 24px;
    background-color: #90929373;
    top: 50%;
    right: 48px;
    transform: translateY(-50%);
} */

/*.half-screen-modal #pills-tab li button {
    padding: clamp(16px, 1vw, 20px) clamp(6px, 1vw, 22px) !important;
    font-size: clamp(12px, 1vw, 14px) !important;
}

.half-screen-modal .card-header-tabpane .nav-pills li button {
    padding: clamp(16px, 1vw, 20px) clamp(6px, 1vw, 22px) !important;
}*/

.highlight-init-2025 .nav-pills {
    flex-wrap: nowrap;
}

.table-header .search .setting-btn {
    background-color: var(--background-color2);
}

    .table-header .search .setting-btn:hover i {
        scale: 1.05;
    }

.modal-header .header-btn button:hover {
    /*    scale: 1.1;*/
}

#main-table_wrapper {
    /* display: flex; 
    flex-direction: column;
    align-items: end; */
}



.select-option-wrap .form-select,
.select2-wrap input {
    /*  -webkit-appearance: auto;
    appearance: auto;
    padding-bottom: 0;*/
    background-color: var(--background-color2);
}



.licence-manager {
    background: var(--background-color2);
    border-radius: 20px;
    height: 708px;
    overflow-y: auto;
    scrollbar-width: none;
    height: 100% !important;
    /*    padding: 0 8px;*/
}

.container.merchant-detail .licence-manager {
    border: 1px solid var(--border-color);
}

#tab-table {
    padding-bottom: 0;
}

.licence-manager .table-name {
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
}

    .licence-manager .table-name h3 {
        padding: 0 27px;
        font-size: var(--text-size-xl);
        /*            margin-bottom: 20px;*/
        color: var(--text-color-header);
    }

.licence-manager .table-container {
    padding: 20px;
}

.licence-manager .page-select {
    color: var(--text-title-color);
}

.licence-manager tbody tr td:not(:last-child) {
    padding-top: 12px;
    padding-bottom: 12px;
    color: var(--text-title-color);
    height: 65px !important;
    /*min-width: 175px;*/
}

.licence-manager tbody:not(.default-table):not(.mango-pos-feature):not(#feature-group-body):not(.noti-table) tr td:not(:last-child) {
    min-width: 50px !important;
    min-height: 80px;
    vertical-align: top;
}

.table-borderless tbody tr td {
    padding: 16px 8px;
}

tbody tr .name-row input {
    min-width: 1rem;
    margin-right: 10px;
}


/*
    .status::before {
        position: absolute;
        content: '';
        top: 48%;
        left: -5px;
        border-radius: 50%;
        transform: translateY(-50%);
        width: 15px;
        height: 15px;
    }*/

.status {
    position: relative;
    border-radius: 50%;
    width: 15px;
    height: 15px;
}

.active-status,
.paid-status {
    background: #0D6EFD;
}

.inactive-status {
    background: #ADB5BD;
}

.refund-status {
    background: #bc00ff;
}

.pending-status {
    background: #0dcaf0;
}

.archived-status,
.overdue-status {
    background: #ffc107;
}

.sold-status {
    background: #6c757d;
}

.open-status {
    background: #198754;
}

.deleted-status,
.draft-status {
    background: #ffc107;
}

.failure-status {
    background: #DC3545;
}



/*.status.active-status::before,
.status.paid-status::before {
    background: #0D6EFD;
}

    .status.inactive-status::before {
        background: #DC3545;
    }

    .status.pending-status::before {
        background: #0dcaf0;
    }

    .status.archived-status::before,
    .status.overdue-status::before {
        background: #ffc107; 
    }

    .status.sold-status::before {
        background: #6c757d;
    }

    .status.all-status::before {
        background: #f8f9fa;
    }

    .status.open-status::before {
        background: #198754;
    }

    .status.deleted-status::before,
    .status.draft-status::before {
        background: #6c757d;
    }

    .status.failure-status::before {
        background: #DC3545;
    }*/


tbody tr td .bg-success {
    background: #eafff7 !important;
    border: 1px solid #a7edcc !important;
    color: #1fc276;
    border-radius: 4px;
}

tbody tr td .bg-secondary {
    background: #f7f7f7 !important; /* nền xám sáng */
    border: 1px solid #d6d6d6 !important; /* viền xám nhạt */
    color: #6c757d; /* chữ xám đậm */
    border-radius: 4px;
}

tbody tr td label {
    color: var(--text-title-color);
}

    tbody tr td label small {
        color: var(--text-color) !important;
        font-size: var(--text-size-md);
    }

thead tr th {
    cursor: pointer;
    font-size: var(--text-size-md);
}

.table-borderless {
    background-color: var(--background-color2)
}

#app .loading-progress-text {
    color: var(--text-title-color);
}

body.dark-mode table.table-borderless,
body.dark-mode table.table-borderless label.form-check-label,
body.dark-mode table.table-borderless td,
body.dark-mode table.table-borderless thead,
body.dark-mode table.table-borderless tbody,
body.dark-mode table.table-bordered,
body.dark-mode table.table-bordered label.form-check-label,
body.dark-mode table.table-bordered td,
body.dark-mode table.table-bordered thead,
body.dark-mode table.table-bordered tbody {
    background-color: var(--background-color2) !important;
    color: var(--text-color);
}

    body.dark-mode table.table-borderless th,
    body.dark-mode table.table-borderless th label.form-check-label,
    body.dark-mode table.table-bordered th,
    body.dark-mode table.table-bordered th label.form-check-label {
        background-color: var(--background-color2) !important;
        color: var(--text-title-color) !important;
        /*font-size: var(--text-size-lg);*/
    }


.invoice-detail-table table.table-borderless td,
.license-collapse-content:not(.mango-pos-feature) table.table-borderless td
/*.subscriptions table.table-borderless td*/ {
    vertical-align: top !important;
}

#notifDropdown span {
    top: 18%;
    left: 70%;
    padding: 2px 5px;
}

.dt-length {
    display: flex;
    align-items: center;
}

    .dt-length label,
    .dt-info {
        color: var(--text-color-header);
    }

#pagination {
    display: flex;
}

    #pagination li .page-link {
        background-color: var(--background-color2);
        color: var(--text-color);
    }

div.dt-container div.dt-paging {
    margin-top: 10px !important;
}

.table-container::-webkit-scrollbar {
    height: 6px;
}

.table-container::-webkit-scrollbar-track {
    background: transparent;
}

.table-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

.modal-fullscreen {
    justify-self: center;
}

@keyframes zoomUp {
    0% {
        opacity: 0;
        width: 0;
        height: 0;
        transform: translateY(100%) scale(0.3);
    }

    25% {
        opacity: 0.3;
        width: 20vw;
        height: 20%;
        transform: translateY(70%) scale(0.5);
    }

    50% {
        opacity: 0.5;
        width: 50vw;
        height: 50%;
        transform: translateY(50%) scale(0.7);
    }

    100% {
        opacity: 1;
        width: 100vw;
        height: 100%;
        transform: translateY(0) scale(1);
    }
}

@keyframes leftSlide {
    0% {
        opacity: 0;
        transform: translatex(20%);
    }

    100% {
        opacity: 1;
        transform: translatex(0);
    }
}

@keyframes rotate-down {
    from {
        rotate: 0;
    }

    to {
        rotate: 180deg;
    }
}

@keyframes rotate-up {
    from {
        rotate: 180deg;
    }

    to {
        rotate: 0;
    }
}

@keyframes menuSlide {
    0% {
        opacity: 0;
        transform: translatex(-100%);
    }

    100% {
        opacity: 1;
        transform: translatex(0);
    }
}

@keyframes modalSlide {
    0% {
        opacity: 0;
        transform: translatex(100%);
    }

    100% {
        opacity: 1;
        transform: translatex(0);
    }
}

@keyframes shake {
    0% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(-15deg);
    }

    30% {
        transform: rotate(10deg);
    }

    45% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(6deg);
    }

    75% {
        transform: rotate(-4deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.rotate-down {
    animation: rotate-down 0.3s ease forwards;
}

.rotate-up {
    animation: rotate-up 0.3s ease forwards;
}

.modal-zoom-up {
    animation: modalSlide 0.3s ease-out;
}

.btn-icon {
    background-color: transparent;
    padding: 0.25rem;
    margin: 0 2px;
    font-size: 1.2rem;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

    .btn-icon:hover {
        background-color: var(--bg-button-hover) !important;
    }

    .btn-icon i {
        font-size: var(--text-size-lg);
        transition: all 0.3s ease;
    }

button:hover i,
button:hover svg {
    /* background-color: var(--primary-color); */
    /*    transform: scale(1.1);*/
}

.toggle-options {
    padding: 0.25rem;
}

.row-options {
    background: var(--background-color2);
    right: 32px;
    opacity: 0;
    box-shadow: 0px 0px 20px 0px #0000001a;
    padding: 4px;
    transition: all 0.2s ease;
    border-radius: 8px;
    z-index: 2;
}

.table:not(.mango-pos-feature):not(.feature-group-table):not(.payment-table) td:not(.text-end) {
    vertical-align: baseline;
}

#tableBody.mango-combo .row-options {
    right: 0 !important;
    z-index: 99;
}

.toggle-options {
    background-color: transparent !important;
    border: none;
}

    .toggle-options i {
        color: var(--text-color);
    }

    .toggle-options:active {
        background-color: transparent !important;
    }

.row-options button:not([title="delete"]) {
    color: var(--text-title-color);
}

/* .advance-search .advance-search-btn button[type="submit"] {
    border: 0;
    background: var(--button-color);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
} */

.search-item .date-picker {
    position: relative;
    width: 100%;
}

.select-option-wrap {
    width: 100%;
}

    .select-option-wrap .icon-calendar {
        margin: 0;
    }

.search-item .date-input {
    width: 100%;
    padding: 6px;
    font-size: 16px;
    box-sizing: border-box;
}

.search-item .icon-calendar {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    pointer-events: none;
}

.search-item input[type="text"],
.search-item select {
    /*border: none;
    border-bottom: 1px solid #3333331a;*/
    width: 100%;
    /*    padding: 8px;*/
    /*background: var(--bg-color-input);*/
    color: var(--text-color);
}

.search-item select {
    margin-right: 20px;
    font-size: var(--text-size-md);
    color: var(--text-title-color);
    border-color: var(--border-color);
}

.date-picker input::placeholder {
    font-size: var(--text-size-md);
}

.search-item span {
    /*    margin-right: 40px;*/
    font-size: var(--text-size-md);
    color: var(--text-menu-color) !important;
    align-self: center;
}

.dashboard-home .search-item span {
    margin-right: 40px;
}

.dashboard-home input:not([type="checkbox"]),
.date-range input:not([type="checkbox"]) {
    padding-bottom: 0;
}

.search-item .checkbox-wrap span {
    margin-left: 10px;
}

.datepicker-dropdown {
    z-index: 9999 !important;
}

#datepicker {
    font-size: var(--text-size-md);
}

.dt-paging-button button,
.disabled > .page-link,
.page-link.disabled {
    background-color: var(--background-color2);
}

.active > .page-link,
.page-link.active {
    background-color: var(--background-color1);
    color: var(--text-color);
}

.page-link,
.disabled > .page-link,
.page-link.disabled {
    color: var(--text-color);
}

div.dt-scroll-body {
    border-bottom: 0 !important;
}

/* Fix Dark Mode cho table */
body.dark-mode table.dataTable,
body.dark-mode table.dataTable td,
body.dark-mode table.dataTable th,
body.dark-mode table.dataTable thead,
body.dark-mode table.dataTable tbody {
    background-color: var(--background-color2) !important;
    color: var(--text-color) !important;
}

#editModal .modal-content,
#addUserModal .modal-content {
    background-color: var(--background-color2);
}

#editModal .modal-title,
#editForm label,
#addUserModal .modal-title,
#addUserModal label {
    color: var(--text-color-header);
}

.modal-fullscreen .modal-content {
    background-color: var(--bg-detail-modal) !important;
    overflow: auto;
    border-left: 1px solid var(--border-color);
}




.modal-content .card .card-header-custom,
.modal-content .card .pane-header {
    color: var(--text-title-color);
    /* font-weight: 600; */
    font-size: var(--text-size-lg);
    padding-left: 22px !important;
    padding-bottom: 0 !important;
}

.modal-content .pane-header h3 {
    color: var(--text-title-color);
}

.modal-content .pane-header p {
    color: var(--text-color);
}

.modal-content .card .card-header-custom h4 {
    font-size: var(--text-size-lg);
    font-weight: 400;
}

.tab-pane .card,
.card-full {
    background-color: var(--background-color2);
    /*height: 100%;*/
    border: 1px solid var(--border-color);
    border-radius: 10px;
}


    .tab-pane .card:not(.has-popup-search),
    .card-full {
        overflow: visible;
    }

    .tab-pane .card .list-group {
        border: none;
    }

        .tab-pane .card .list-group span {
            font-size: var(--text-size-md);
        }

.ticket-number {
    padding: 4px 12px !important;
    background-color: var(--ticket-number);
    border-radius: 20px;
    color: var(--text-title-color);
    margin-left: -10px !important;
    /* font-weight: 500;*/
}

.tab-pane .card .list-group span.grown-up {
    color: var(--text-color) !important;
    font-weight: 400;
}

.tab-pane .card .list-group .row,
.refunds .row {
    /*            border-bottom: 1px solid var(--border-color-thin);*/
    padding: 10px 6px;
    display: flex;
    align-items: center;
}



    .tab-pane .card .list-group .row:last-child {
        border-bottom: 0;
    }


.tab-pane .card-content input:not([type="checkbox"]) {
    /*    border: 1px solid var(--border-color);*/
    padding: 8px;
    border-radius: 10px;
    /*    margin-bottom: 10px;*/
}

.tab-pane .card .list-group textarea {
    width: 100%;
    min-height: 40px;
}

.tab-pane .card .card-content .row {
    display: flex;
    align-items: center;
    padding: 6px;
}

.tab-pane .card .list-group i.bi-trash {
    transition: all 0.3s ease;
}

    .tab-pane .card .list-group i.bi-trash:hover {
        cursor: pointer;
        scale: 1.1;
    }

.tab-pane .card .card-content span:not(.text-blue-tag):not(.text-green-tag):not(.text-purple-tag),
.tab-pane .card .list-group span:not(.text-blue-tag):not(.text-green-tag):not(.text-purple-tag):not(.required-field) {
    font-weight: 400;
    font-size: var(--text-size-md);
    color: var(--text-content-color) !important;
}

.tab-pane .card .card-content .sale-off-price {
    color: #909293 !important;
    font-weight: 300;
}

.tab-pane .card .card-content .form-check {
    /*    padding: 0 50px;*/
    padding-left: 50px;
}

.tab-pane .card .card-content input[type="text"]:not(.input-search) {
    max-width: 400px;
    border: 1px solid var(--border-color);
    padding: 10px;
    margin-bottom: 6px;
    border-radius: 10px;
}

.tab-pane .card .card-footer {
    background: transparent;
    border-top: 1px solid var(--border-color);
    margin-top: auto !important;
}

    .tab-pane .card .card-footer a {
        text-decoration: none;
        width: 60%;
        transition: all 0.2s ease;
    }

        .tab-pane .card .card-footer a:hover {
            font-weight: 500;
        }

.tab-pane .card strong,
.tab-pane .card p {
    font-size: var(--text-size-md);
    margin-bottom: 0 !important;
    color: var(--text-content-color);
}

.info_payment p {
    color: black !important;
}

.tab-pane .card strong.full-name {
    color: var(--text-title-color);
}

.tab-pane .card

.list-group-item {
    padding: 14px 20px;
}

.invoice-detail-table table thead {
    border-bottom: 1px solid black;
}

#pills-tabContent:not(.tab-viewInfor),
#pills-tabContent .text-center,
#main-table:not(.mango-combo):not(.invoice-table) {
    min-height: 500px;
}

.tab-content .tab-pane h6 {
    font-size: var(--text-size-xl);
    font-weight: 700;
}

.pane-profile .col-md-8 .form-label {
    font-weight: 500;
}

.pane-profile .profile-card {
    background-color: var(--background-color2);
    border-radius: 10px;
    padding: 20px;
}

    .pane-profile .profile-card p,
    .pane-profile .profile-card strong,
    .pane-profile .profile-card li span:not(.bg-success):not(.bg-secondary),
    .modal-content .card .card-body span:not(.bg-success):not(.bg-secondary):not(.bg-primary):not(.text-blue-tag):not(.required-field):not(.red-price):not(.sku) {
        color: var(--text-title-color) !important;
        font-size: var(--text-size-md);
    }

    .pane-profile .profile-card li.mb-1 span:not(.bg) .tab-content h5,
    .tab-content h6,
    .tab-content li,
    .tab-content label:not(.form-check-label),
    .modal-header .modal-title,
    .pane-profile .profile-card h5 {
        color: var(--text-content-color) !important;
        /* font-weight: 500; */
        font-size: var(--text-size-md);
    }

.pane-profile .img-rounded-circle {
    width: clamp(150px, 10vw, 210px);
    height: clamp(150px, 10vw, 210px);
    cursor: pointer;
}
/*.img-rounded-circle img {
    border-radius: 50%;
    border: 2px solid #c7c7c7;
}*/
.img-list-emp {
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0px 4px 6px 1px #00000030;
}




.name-mail-phone-emp .sub-text {
    font-size: var(--text-size-xs) !important;
    color: #7a7a7a;
}

.lower-top {
    margin-top: 93px !important;
}

@media (max-width: 1200px) {
    .lower-top {
        margin-top: 132px !important;
    }
}

.has-under-line {
    border-top: var(--line-under-tab);
}

.row.has-under-line {
    padding-top: 10px;
    padding-bottom: 10px;
}

    .row.has-under-line p {
        margin-bottom: 0;
    }


.pane-profile .img-rounded-circle.edit-avatar {
    position: relative;
}

.pane-profile .img-rounded-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.pane-profile .img-rounded-circle.edit-avatar::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #ffffff36;
    opacity: 0;
    transition: all 0.3s ease;
    left: 0;
    right: 0;
    border-radius: 50%;
}

.pane-profile .img-rounded-circle.edit-avatar i {
    position: absolute;
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
    opacity: 0;
    transition: all 0.3s ease;
}

.pane-profile .img-rounded-circle.edit-avatar:hover i {
    opacity: 1;
    color: white;
}

.pane-profile .img-rounded-circle.edit-avatar:hover:after {
    opacity: 1;
}

.pane-profile .social-icons i {
    font-size: 1.2rem;
    margin-right: 8px;
}

.pane-profile .progress-bar {
    background-color: #343a40;
}

.modal-header {
    background: var(--bg-detail-modal) !important;
    /* border-bottom: none; */
}

#rowDetailModal .modal-footer {
    background: var(--background-color2) !important;
    border-top: 1px solid var(--border-color);
}

#detailTabs {
    background: var(--background-color2);
    /* border: 1px solid var(--border-color); */
    border-bottom: none;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active,
.nav-tabs1 .nav-item.show .nav-link,
.card-header-tabpane .nav-pills li button.active {
    /*background-color: var(--bg-tab-pane) !important;*/
    color: var(--text-title-color) !important;
    border: none;
    font-weight: 500;
    /*border-bottom: 2px solid #FBA00C !important;*/
}

    .card-header-tabpane {
        position: relative;
    }

.nav-tabs1 .nav-link.active {
    color: black !important;
    border: none;
    font-weight: 500;
}

body.dark-mode .refunds-tab .nav-link.active {
    color: white !important;
}

.nav .nav-highlight .nav-item .nav-link.active {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
}

.card-header-tabpane {
    border-bottom: var(--line-under-tab);
}

.nav-tabs1 .nav-link:not(.active):hover {
    background: var(--sub-menu2-color) !important;
}

.nav-tabs .nav-link,
.card-header-tabpane .nav-pills li button {
    color: var(--text-title-color);
    border: none !important;
    border-radius: 8px 8px 0 0;
    height: 100%;
    min-width: 100px;
    text-align: center;
    padding: 12px;
    transition: all 0.3s ease;
}

    .nav-tabs .nav-link,
    .card-header-tabpane .nav-pills li button:hover {
        background: var(--bg-tab-pane);
    }

body.dark-mode .nav-tabs .nav-link,
body.dark-mode .card-header-tabpane .nav-pills li button:hover {
    background: var(--sub-menu2-color) !important
}

.nav-tabs1 .nav-link {
    color: var(--text-color);
    border: none !important;
    background: transparent;
    border-radius: 10px;
    height: 100%;
    min-width: 100px;
    text-align: center;
    padding: 10px;
    transition: all 0.3s ease;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
}

.nav.nav-tabs1 .nav-item {
    position: relative;
}

.nav-tabs .nav-item:not(:last-child) .nav-link,
.nav-tabs1 .nav-item:not(:last-child) .nav-link,
.card-header-tabpane .nav-pills li:not(:last-child) button {
    margin-right: 8px !important;
}

.tag-lists .tag-item {
    color: var(--text-title-color);
    border: none !important;
    background: var(--bg-button-hover);
    border-radius: 8px;
    height: 100%;
    min-width: 100px;
    text-align: center;
    padding: 12px 14px;
    transition: all 0.3s ease;
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: var(--text-size-md);
}

body.dark-mode .tag-lists .tag-item {
    background: var(--background-color1);
    color: var(--text-color);
}

.sell-by-item {
    color: var(--text-title-color);
    border: none !important;
    background: var(--bg-button-hover);
    border-radius: 8px;
    height: 100%;
    min-width: 100px;
    text-align: center;
    padding: 6px 10px;
    transition: all 0.3s ease;
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.dark-mode .sell-by-item {
    background: var(--background-color1);
    color: var(--text-title-color);
}

.tag-lists .item-edit {
    padding-right: 34px;
}

.tag-lists {
    flex-wrap: wrap;
}

    .tag-lists .tag-item i {
        transition: all 0.3s ease;
        position: absolute;
        top: 50%;
        right: 2%;
        transform: translateY(-50%);
    }

    .tag-lists .tag-item:hover,
    .sell-by-item:hover {
        background-color: #fff4ea !important;
        color: black !important;
        border-radius: 8px;
        border: none;
        font-weight: 500;
        cursor: pointer;
    }

.form-section h4 {
    color: var(--text-title-color);
}

.tag-lists .tag-item i {
    padding: 1px 5px;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 2;
    font-size: 1rem;
    /*color: #3333335c;*/
}

    .tag-lists .tag-item i:hover {
        background: var(--bg-button-hover) !important;
        color: black;
        scale: 1.05;
    }

.modal-header .header-btn button {
    background-color: transparent;
}

    .modal-header .header-btn button i.bi-trash {
        color: #dc3545;
    }

    .modal-header .header-btn button i {
        color: var(--text-color);
    }


.modal-fullscreen .modal-footer,
.modal-fullscreen .modal-header {
    border-top: 1px solid var(--border-color) !important;
    border-bottom: 0;
    background: var(--bg-detail-modal) !important;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

.modal-header.products {
    border-bottom: 1px solid var(--border-color);
}

.modal-fullscreen .modal-footer {
    bottom: 0;
}

.dropdown.profile ul li a {
    padding: 12px;
}

.modal-fullscreen .modal-top {
    border-bottom: 1px solid var(--border-color) !important;
}

.container.tab-content:not(.products-view):not(.approve-container):not(.container_refund):not(.payment-method-tab) {
    margin-bottom: 90px;
    margin-top: 150px;
}

.container.approve-container {
    margin-top: 100px;
    margin-bottom: 90px;
}

.container.merchant-detail {
    margin-bottom: 90px !important;
    margin-top: 120px !important;
}

.container.tab-content.products-view {
    margin-top: 120px;
    margin-bottom: 100px;
}

.page_404 {
    padding: 40px 0;
    background: #fff;
    font-family: 'Arvo', serif;
}

    .page_404 img {
        width: 100%;
    }


.four_zero_four_bg h1 {
    font-size: 80px;
}

.four_zero_four_bg h3 {
    font-size: 80px;
}

.four_zero_four_bg {
    display: flex;
    justify-content: center;
}

    .four_zero_four_bg img {
        width: 500px;
    }

.link_404 {
    color: black;
    padding: 10px 20px;
    background: var(--primary-color);
    margin: 20px 0;
    display: inline-block;
    border-radius: 10px;
    transition: all 0.3s ease;
}

    .link_404:hover {
        background: #FBA00C;
        font-weight: 500;
    }

.contant_box_404 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .contant_box_404 p {
        color: var(--text-title-color);
        font-weight: 500;
    }

    .contant_box_404 a {
        text-decoration: none;
    }


/*loading page*/

.lds-spinner,
.lds-spinner div,
.lds-spinner div:after {
    box-sizing: border-box;
}

.lds-spinner {
    color: #007bff;
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .lds-spinner div {
        transform-origin: 40px 30px;
        animation: lds-spinner 1.2s linear infinite;
    }

        .lds-spinner div:after {
            content: " ";
            display: block;
            position: absolute;
            top: 3.2px;
            left: 36.8px;
            width: 6px;
            height: 13px;
            border-radius: 50%;
            background: #007bff;
        }

        .lds-spinner div:nth-child(1) {
            transform: rotate(0deg);
            animation-delay: -1.1s;
        }

        .lds-spinner div:nth-child(2) {
            transform: rotate(30deg);
            animation-delay: -1s;
        }

        .lds-spinner div:nth-child(3) {
            transform: rotate(60deg);
            animation-delay: -0.9s;
        }

        .lds-spinner div:nth-child(4) {
            transform: rotate(90deg);
            animation-delay: -0.8s;
        }

        .lds-spinner div:nth-child(5) {
            transform: rotate(120deg);
            animation-delay: -0.7s;
        }

        .lds-spinner div:nth-child(6) {
            transform: rotate(150deg);
            animation-delay: -0.6s;
        }

        .lds-spinner div:nth-child(7) {
            transform: rotate(180deg);
            animation-delay: -0.5s;
        }

        .lds-spinner div:nth-child(8) {
            transform: rotate(210deg);
            animation-delay: -0.4s;
        }

        .lds-spinner div:nth-child(9) {
            transform: rotate(240deg);
            animation-delay: -0.3s;
        }

        .lds-spinner div:nth-child(10) {
            transform: rotate(270deg);
            animation-delay: -0.2s;
        }

        .lds-spinner div:nth-child(11) {
            transform: rotate(300deg);
            animation-delay: -0.1s;
        }

        .lds-spinner div:nth-child(12) {
            transform: rotate(330deg);
            animation-delay: 0s;
        }

@keyframes lds-spinner {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}



#tab-table .nav-link {
    color: var(--text-title-color);
    height: 100%;
    font-size: clamp(16px, 2vw, 20px) !important;
    /*padding-bottom: 30px !important;*/
    text-align: start;
    display: flex;
    flex-direction: column;
    align-items: start;
    /*padding-left: 0 !important;
    padding-right: 0 !important;*/
}

    #tab-table .nav-link.active {
        color: #0D6EFD !important;
        font-weight: 500;
        border-bottom: 1px solid #0D6EFD;
        border-radius: 0;
    }

.status-tab-number {
    padding: 2px 13px;
    border-radius: 20px;
    margin-left: 12px;
}

    .status-tab-number.tag-all {
        background-color: #F7FAFC !important;
        color: var(--text-title-color) !important;
    }

body.dark-mode .status-tab-number.tag-all {
    background-color: #4b4b4b !important;
    color: white !important;
}

.licence-manager.invoice .nav-item {
    display: flex;
    justify-content: center;
}

.licence-manager.invoice .nav-link.active,
.licence-manager.invoice .nav-link {
    display: flex;
    align-items: center;
}

/*.licence-manager.invoice .table-name{
    padding: 0;
}*/

#pills-tab li button {
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-size-md);
}

.card-header-custom h4 {
    color: var(--text-title-color);
    font-weight: 400;
}

.card-header-custom p {
    color: var(--text-color)
}
/*#tableBody.prod-table tr td:first-child {
    min-width: 350px !important;
}*/
/*#rowDetailModalLabel {
    max-width: 350px;
}*/

.login-layout .container-fluid {
    background: var( --bg-login);
}

.fancybox__container {
    z-index: 999999 !important;
}

.picture-container {
    width: 100%;
    height: 150px;
    display: inline-block;
    background: white;
    position: relative;
    overflow: hidden;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px;
}

    .picture-container i.picture-remove,
    .picture-container i.bi-eye {
        position: absolute;
        top: 5%;
        right: 5%;
        color: #dee2e6;
        opacity: 0;
        transition: all 0.3s ease;
    }

    .picture-container:hover i {
        opacity: 1
    }

    .picture-container:hover img {
        scale: 1.05;
    }

    .picture-container img {
        box-sizing: border-box;
        object-fit: contain;
        transition: all 0.3s ease;
    }

.picture-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #fff;
    background: rgba(0,0,0,0.25);
    border-radius: 50%;
    padding: 1px 5px;
    cursor: pointer;
    z-index: 2;
    font-size: 1rem;
    transition: background 0.2s;
}

    .picture-remove:hover {
        background: rgba(220,53,69,0.85);
        color: #fff;
    }

.row-has-child {
    font-weight: 700 !important;
}

.card.whocansell {
    border: none;
    box-shadow: 0 2px 24px rgba(0,0,0,0.06);
    background: #fff;
}

.whocansell .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.whocansell .checkbox-circle {
    /* background: #f6f6f6; */
    /* border-radius: 50%;*/
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whocansell .form-check-input[type="checkbox"] {
    width: 20px;
    height: 20px;
    /*border-radius: 50%;*/
    border: 2px solid #ddd;
}

.whocansell .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.whocansell .dot-menu {
    font-size: 1.2rem;
    color: #b3b3b3;
    cursor: pointer;
}

.whocansell .country-text {
    font-size: 0.97rem;
    color: #A8A8A8;
    margin-top: 2px;
}

.whocansell .avatar-bg-yellow {
    background: #FFD43B;
}

.whocansell .avatar-bg-green {
    background: #49DC3A;
}

.whocansell .avatar-bg-red {
    background: #f3cac2;
}

.whocansell .partner {
    cursor: pointer;
    transition: all 0.3s ease;
}

    .whocansell .partner:hover {
        cursor: pointer;
        background: #F8F9FA;
    }

    body.dark-mode .whocansell .partner:hover {
        background: var(--background-color1);
    }

.read-only-text {
    background: var(--border-color);
    padding: 2px 8px;
    border-radius: 20px;
}

.ranges ul {
    padding: 6px !important;
    background: var(--background-color2);
}

    .ranges ul li {
        background: var(--menu-hover);
        border-radius: 10px;
        color: var(--text-title-color);
    }

        .ranges ul li:not(:last-child) {
            margin-bottom: 5px;
        }

.ranges li:hover {
    color: black;
}

.daterangepicker .ranges li.active {
    background-color: #D0E2FF !important;
    color: black !important;
}

/*.modal-option-menu{
    background: var(--background-color1);
    border: 1px solid var(--border-color)
}*/

.dropdown-menu {
    background: var(--background-color2);
    border: 1px solid var(--border-color);
    /*overflow: hidden;*/
}

    .dropdown-menu li {
        transition: all 0.3s ease;
        overflow: hidden;
    }

        .dropdown-menu li button,
        .dropdown-menu li a {
            color: var(--text-title-color) !important;
            cursor: pointer;
        }

            .dropdown-menu:not(.noti-menu) li:not(.disabled):hover,
            .dropdown-menu li a:hover {
                background: var(--menu-hover) !important;
            }

/*reset css modal*/
/*#fullPageModal {
    padding: 0 !important;
}*/

.otp-form-title {
    max-width: 400px;
    margin: auto;
    text-align: center;
    font-family: "Poppins", sans-serif;
}

    .otp-form-title h3 {
        font-weight: bold;
    }

    .otp-form-title p {
        font-size: 12px;
        color: #118a44;
    }

        .otp-form-title p.msg {
            color: initial;
            text-align: initial;
            font-weight: bold;
        }

.otp-input-fields {
    margin: auto;
    background-color: white;
    box-shadow: 0px 0px 8px 0px #02025044;
    max-width: 400px;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 40px;
}

    .otp-input-fields input {
        height: 40px;
        width: 40px;
        background-color: transparent;
        border-radius: 4px;
        border: 1px solid #2f8f1f;
        text-align: center;
        outline: none;
        font-size: 16px;
    }

        .otp-input-fields input::-webkit-outer-spin-button,
        .otp-input-fields input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .otp-input-fields input[type=number] {
            -moz-appearance: textfield;
        }

        .otp-input-fields input:focus {
            border-width: 2px;
            border-color: #297c1c; /* darkened #2f8f1f */
            font-size: 20px;
        }

.swal2-styled.swal2-confirm {
    background-color: #007bff !important;
}

.invoice-detail-container .logo-img {
    max-width: 170px;
    min-height: 64px;
}

.invoice-detail-container p {
    padding: 0 !important;
    margin-bottom: 0;
    font-size: var(--text-size-lg);
}

.invoice-detail-container span:not(.text-blue-tag) {
    font-weight: 500;
}

.invoice-detail-container p,
.invoice-detail-container span {
    /*color: var(--text-content-color);
    font-size: var(--text-md);*/
}

.invoice-detail-container .invoice-tag {
    padding: 5px 20px;
    padding-right: 100px;
    background: #FD7E14;
    color: white;
    font-size: clamp(28px, 2vw, 36px);
    min-height: 64px;
    display: flex;
    align-items: center;
}

.invoice-detail-container .invoice-infor {
    /*  margin-top: 112px; */
}

.invoice-tabs {
    flex-wrap: wrap;
}

.invoice-tab-item {
    margin-right: 30px;
    margin-bottom: 14px;
}



label.swal2-input-label {
    padding: 0 20px !important;
    text-align: center;
}

.license-collapse-content .btn-primary:not(.upfile-btn) {
    color: var(--text-title-color);
    background: var(--background-color2);
    width: 100%;
    text-align: start;
    padding: 20px;
    position: relative;
    border-radius: 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-left: 0;
    border-right: 0;
}

.license-collapse-content .btn-primary i {
    position: absolute;
    right: 30px;
    transition: all 0.3s ease;
}

.license-collapse-content .btn-primary:active {
    background-color: white;
    border-color: var(--border-color);
    color: var(--text-title-color);
}



.license-collapse-content .content-detail:first-child .btn-primary {
    border-top: 0;
}

    .license-collapse-content .content-detail:first-child .btn-primary:not(.upfile-btn) {
        border-radius: 10px 10px 0 0;
    }

.license-collapse-content .content-detail:last-child .btn-primary[aria-expanded="false"] {
    border-radius: 0 0 10px 10px;
}

.license-collapse-content.mango-pos-feature .content-detail:last-child .btn-primary[aria-expanded="false"] {
    border-radius: 0;
}

.license-collapse-content.mango-pos-feature .content-detail:first-child .btn-primary {
    border-radius: 0;
}

.license-collapse-content .content-detail .btn-primary {
    border-bottom: 0;
}

.license-collapse-content .btn-primary[aria-expanded="true"],
.license-collapse-content .btn-primary:not(.upfile-btn):hover {
    background-color: rgb(13 110 253 / 10%);
}

.license-collapse-content.mango-pos-feature .btn-primary[data-bs-toggle="collapse"] {
    background-color: white !important;
}

body.dark-mode .license-collapse-content.mango-pos-feature .btn-primary[data-bs-toggle="collapse"] {
    background-color: var(--background-color2) !important;
    color: var(--text-title-color);
}

    body.dark-mode .license-collapse-content.mango-pos-feature .btn-primary[data-bs-toggle="collapse"]:hover {
        background-color: #1d2131 !important;
    }

.license-collapse-content.mango-pos-feature .btn-primary:hover {
    background-color: #F8F9FA !important;
}


.btn-primary[aria-expanded="true"] i.chevron-down,
.sidebar-nav .nav-link[aria-expanded="true"] i.chevron-down,
.send-invoice-btn:not(.collapsed) i.chevron-down {
    animation: rotate-down 0.3s ease forwards;
}

.btn-primary[aria-expanded="false"] i.chevron-down,
.sidebar-nav .nav-link[aria-expanded="false"] i.chevron-down,
.send-invoice-btn.collapsed i.chevron-down {
    animation: rotate-up 0.3s ease forwards;
}

.license-collapse-content .collapse .card-body {
    /* border-radius: 0 !important;*/
    border: 0;
    border-top: 1px solid var(--border-color);
    background: var(--background-color2);
}

.license-collapse-content .license-addon-switch {
    margin-left: -10px !important;
    margin-top: 10px !important;
}

.send-invoice-btn i.chevron-down {
    position: absolute;
}

.upfile-btn {
    /*    min-width: 110px !important;*/
}

.price-option {
    border: none;
    padding-right: 30px !important;
    padding-bottom: 0 !IMPORTANT;
    padding-top: 0 !important;
}

    .price-option::placeholder {
        font-weight: 700;
    }

#UpdateModal:not(.half-screen-modal) input.form-control,
#UpdateModal:not(.half-screen-modal) select {
    /*width: 50%;*/
}


.invoice-basic-infor .row i.bi-search,
.salePerson-search-wrap i.bi-search {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-content-color);
    transition: all 0.3s ease;
    padding: 0 !important;
    padding-right: 4px !important;
    padding-left: 8px !important;
    background-color: white;
}

body.dark-mode .invoice-basic-infor .row i.bi-search, body.dark-mode .salePerson-search-wrap i.bi-search {
    background-color: var(--background-color1);
}

.select2-wrap .bi-chevron-down {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-content-color);
}

body.dark-mode .salePerson-search-wrap i.bi-x {
    background: var(--background-color1);
}

.salePerson-search-wrap i.bi-x {
    position: absolute;
    right: 33px;
    top: 54%;
    transform: translateY(-50%);
    color: var(--text-color);
    transition: all 0.3s ease;
    padding: 0px 8px;
    border-radius: 50%;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    background: white;
}

.invoice-basic-infor .row i.bi-x {
    position: absolute;
    right: 33px;
    top: 52%;
    transform: translateY(-50%);
    color: var(--text-title-color);
    transition: all 0.3s ease;
    padding: 0px 5px;
    border-radius: 50%;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

    .invoice-basic-infor .row i.bi-x:hover,
    .salePerson-search-wrap i.bi-x:hover {
        /*background: var(--bg-button-hover) !important;*/
    }

    .invoice-basic-infor .row i.bi-search:hover,
    .invoice-basic-infor .row i.bi-x:hover,
    .salePerson-search-wrap i {
        scale: 1.05;
    }

#UpdateModal.half-screen-modal .row-addname {
    display: flex;
    justify-content: end;
}

    #UpdateModal.half-screen-modal .row-addname .col-3 {
        display: flex;
        justify-content: end;
        margin-top: 20px;
    }


.item-has-modal {
    cursor: pointer;
    display: inline-block;
    /*    color: var(--text-title-color) !important;*/
    transition: all 0.2s ease;
}

    .item-has-modal:hover {
        text-decoration: underline !important;
        transform: translateY(-1px);
        scale: 1.05;
    }

.status-wrap {
    display: flex;
    align-items: center;
}

.card-header-tabpane .nav-pills,
.nav.nav-tabs1 {
    /*border-bottom: 1px solid var(--border-color);*/
    display: inline-flex;
}

@media (max-width: 425px) {
    .select-file-align * {
        text-align: center;
    }

    .upload-box {
        flex-direction: column;
        gap: 10px;
    }
}

.select-file-align h4 {
    font-size: clamp(15px, 1vw, 16px) !important;
}

.select-file-align p {
    font-size: clamp(12px, 1vw, 14px) !important;
}

.invoice-detail-page {
    /* height: 100%; */
    background-color: var(--bg-detail-modal) !important;
}

.invoice-detail-page .merchant-name i {
    background: #585C5E;
    color: white;
    padding: 10px 16px;
    border-radius: 16px;
}

    .invoice-detail-page .invoice-logo {
        max-width: 170px;
    }

    .invoice-detail-page .invoice-header {
/*        border-bottom: 1px solid var(--border-color);*/
    }

    .invoice-detail-page .download-invoice {
        color: #0D6EFD;
        text-decoration: none;
        font-size: var(--text-md);
        transition: all 0.3s ease;
    }

        .invoice-detail-page .download-invoice:hover {
            font-weight: 500;
        }

    .invoice-detail-page .payment-method {
        min-height: 120px;
        padding: 24px 16px;
        border-radius: 14px;
        border: 1px solid var(--border-color);
    }

        .invoice-detail-page .payment-method .credit-card {
            color: white;
            font-size: clamp(12px, 1vw, 14px);
            background: #0D6EFD;
            padding: 7px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            transition: all 0.3s ease;
        }

            .invoice-detail-page .payment-method .credit-card:hover,
            .invoice-detail-page .payment-method .ach:hover {
                opacity: 0.8;
                cursor: pointer;
            }

        .invoice-detail-page .payment-method .ach {
            color: white;
            background: #198754;
            padding: 7px;
            font-size: clamp(12px, 1vw, 14px);
            border-radius: 8px;
            display: flex;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .invoice-detail-page .payment-method span {
            font-size: var(--text-size-md);
            color: var(--text-content-color);
        }

    .invoice-detail-page .day-expired {
        color: #ADB5BD !important;
    }

    .invoice-detail-page .payment-method span.price {
        font-size: clamp(22px, 1.5vw, 24px);
        font-weight: 400;
    }

    .invoice-detail-page .payment-method-4 .payment-method span.price {
        font-size: clamp(14px, 1vw, 15px);
        font-weight: 400;
    }

    .invoice-detail-page .footer-logo {
    }

.invoice-detail-container {
    background: var(--bg-invoice-detail);
    border-radius: 14px;
}



.license-addon-switch label {
    font-size: 12px;
}

.card-header-tabpane .nav-pills li button {
    padding: 20px 22px !important;
}

.mongo-search-wrap {
    z-index: 999;
    width: 100%;
    top: 40px;
    left: 0;
}

.invalid-feedback {
    z-index: 9;
    width: 100%;
    top: 35px;
    left: 0;
}

.is-invalid-css {
    border-color: red !important;
}

.invalid-feedback {
    color: red;
    font-size: 0.875em;
    margin-left: 14px;
}

span.required-field {
    color: red !important;
}

.bi-calendar2-event {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-content-color);
/*    background: white;*/
    /*    padding: 3px;*/
}

body.dark-mode .approve-modal textarea {
    background: var(--background-color1) !important;
}

.approve-modal textarea::placeholder {
    color: var(--text-content-color);
}

.btn-primary.add,
.form-select {
    max-height: 40px !important;
    font-size: var(--text-size-md);
}

.swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
}

.table tr td {
    font-size: var(--text-size-md) !important;
}

    .table tr td .payment-status-tooltip-wrapper {
        font-size: 12px;
    }

        .table tr td .payment-status-tooltip-wrapper i {
            font-size: 14px;
        }
/*.table tr td .payment-status-tooltip-wrapper .status {
            width: 12px;
            height: 12px;
        }*/

.credit-status .row-options {
    transform: translateX(50%);
}

.row-options button:hover {
    /*background-color: transparent !important;*/
}

.head-option:hover .row-options {
    transform: translateX(0);
    opacity: 1;
}

.credit-status .row-options .btn {
    width: 24px !important;
}

.all-time-label {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    color: #007bff;
    z-index: 2;
    min-width: 195px;
    min-height: 24px;
    pointer-events: none;
    padding: 0 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

    .all-time-label span {
        align-self: center;
    }

body.dark-mode .all-time-label {
    background-color: var(--background-color2) !important;
}

.select2-multi-tags .select2-tag {
    position: relative;
    padding-right: 24px;
    margin: 0 4px 4px 0;
    max-width: 150px;
    overflow: hidden;
    color: white !important;
}

.select2-tag .bi-x {
    position: absolute;
    top: 2px;
    right: 4px;
    cursor: pointer;
}

.iconClear {
    transform: translateY(-50%);
    color: var(--text-title-color);
    transition: all 0.3s ease;
    background: var(--bg-button-hover);
    padding: 0 4px;
    border-radius: 50%;
}

.select2-search-list {
    background: var(--background-color2);
    box-shadow: 0px 4px 10px 0px var(--box-shadow1);
    border-radius: 10px;
    height: 220px;
    overflow: auto;
}

.select2-search-item:not(:last-child) {
    border-bottom: 1px solid var(--border-color-thin);
}

.select2-search-item {
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    transition: all 0.3s ease;
}

    .select2-search-item .item-name span {
        font-size: var(--text-size-md);
        color: var(--text-title-color);
    }

    .select2-search-item .item-name {
        display: flex;
        flex-direction: column;
    }

    .select2-search-item:not(.selectItemMenuItem):hover {
        background: var(--menu-hover);
    }


.activeMenuItem {
    background: var(--menu-hover);
}

.selectItemMenuItem {
    background: #007bff21;
}

.invoice-search-wrap {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    position: absolute;
}

.daterangepicker {
    border: 1px solid var(--border-color) !important;
}

.select-person {
    border: 1px solid var(--border-color);
    background-color: var(--background-color2);
}

.select2-multi-tags {
    min-height: 38px;
    padding: 8px 36px 8px 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    border-bottom: 0 !important;
    background: var(--background-color2);
    border-color: var(--border-color);
}

.select2-input-search i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    color: var(--text-content-color);
}

.select2-input-search input {
    padding-right: 36px !important;
    border-radius: 0 !important;
    color: var(--text-content-color) !important;
}

.toggle-options:hover {
    background-color: transparent !important;
}

/* Khi modal có class này, làm trong suốt backdrop */

.modal-backdrop.show.transparent-backdrop {
    opacity: 0.1 !important;
}

ul.dropdown-menu-c2 {
    list-style: none;
    /* display: none; */
    width: 100%;
    height: 0;
    background: var(--background-color2);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    /* border-radius: 6px; */
    opacity: 0;
    transition: all 0.3s ease;
}

li.dropend:hover ul.dropdown-menu-c2 {
    height: 122px;
    opacity: 1;
}

/*ul.dropdown-menu li:first-child {
    border-radius: 6px 6px 0 0;
}*/

/*ul.dropdown-menu li:last-child {
    border-radius: 0 0 6px 6px;
}*/

ul.dropdown-menu li.disabled button {
    opacity: 0.5;
    cursor: not-allowed;
}

    ul.dropdown-menu li.disabled button:active {
        pointer-events: none;
    }

.order-fee-table tbody td {
    padding: 8px;
}

.order-fee-table tbody tr,
.order-fee-table thead tr {
    border-color: var(--border-color);
}

}

.validation-message {
    font-size: 12px;
}

.dropdown-divider {
    border-top: 1px solid var(--border-color) !important;
}

.status-name {
    white-space: nowrap;
}

.nav.nav-tabs1 {
    background: var(--navTav-color);
    padding: 6px;
    border-radius: 14px;
}

    .nav.nav-tabs1.tabs-highlight {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
        scrollbar-color: #888 #f1f1f1;
    }

#navHighlight {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    transition: transform 200ms ease, width 200ms ease, height 200ms ease;
    /* tuỳ style:
  background: rgba(0, 123, 255, 0.12);
  border-radius: 8px;
  */
}

table thead th span {
    font-weight: 700 !important;
    font-size: var(--text-size-md) !important;
}

body.dark-mode .drp-buttons,
body.dark-mode .drp-calendar {
    background: var(--background-color2) !important;
}

body.dark-mode .calendar-table {
    background: var(--background-color1) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .start-date.in-range.available,
body.dark-mode .end-date.in-range.available,
body.dark-mode .in-range.available {
    background: #357ebd !important;
}

body.dark-mode .weekend.off.ends.available,
body.dark-mode .off.ends.available {
    color: #99999969 !important;
    background: #454545b0 !important;
}

body.dark-mode .table-condensed tr td,
body.dark-mode .table-condensed tr th {
    color: var(--text-color);
}

body.dark-mode .calendar-table .prev.available span,
body.dark-mode .calendar-table .next.available span {
    border-color: white;
}

body.dark-mode .daterangepicker.show-ranges {
    border-color: #495057 !important;
    background: var(--background-color2) !important;
}

body.dark-mode .drp-buttons button {
    color: var(--text-title-color);
}

.tabs-highlight {
    position: relative;
    display: flex;
    flex-wrap: wrap; /* có thể gây xuống hàng */
}

.nav-highlight {
    position: absolute;
    /* top: 50%;*/
    /*left: 0;*/
    /*transform: translateY(-50%);*/
    /*height: 79%;*/
    background-color: var(--primary-color) !important;
    border-radius: 10px;
    transition: all 0.3s ease;
    z-index: 0;
}

.tabs-highlight {
    position: relative;
}

.tab-underline {
    position: absolute;
    height: 3px;
    background-color: orange;
    border-radius: 2px;
    transition: all 0.3s ease;
    z-index: 10;
}

.card-time-line {
    padding-left: 60px !important;
}

.time-line {
    background: #F7FAFC;
    position: relative;
    border-radius: 10px;
}

body.dark-mode .time-line {
    background: var(--background-color1);
}

.time-line:before {
    position: absolute;
    content: '';
    width: 15px;
    height: 15px;
    background: #FFC107;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    left: -35px;
}

.time-line:not(:last-of-type)::after {
    position: absolute;
    content: '';
    width: 1px;
    height: 80px;
    background: var(--border-color);
    top: 66%;
    left: -28px;
}

.time-line_status {
    color: var(--text-title-color);
}

.swal2-container.swal2-center.swal2-backdrop-show {
    z-index: 9999999;
}

.total-price {
    min-width: 240px;
}

.select-option-wrap select.form-select {
    /*-webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    background: none;
    position: relative;*/
    z-index: -1;
}

.select-option-wrap .col-8.input-select i.bi-chevron-down,
#basic-infor i.bi-chevron-down,
.select2-product i.bi-chevron-down {
    font-size: 13px !important;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-size-md);
    z-index: -1;
    background-color: var(--background-color2);
    padding: 3px 4px;
    padding-right: 10px;
    color: #343a40;
}

.card {
    border: none !important;
    border-radius: 14px;
}

.col-8.input-select.date-range input {
    background-color: var(--background-color2) !important;
}

.card-header-custom {
    background-color: var(--bg-detail-modal);
}



.home-container {
    background-image: url(../img/home_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.home-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--homePage-ovelay);
}

.timedate-home {
    display: flex;
    align-items: center;
    height: 350px;
}

    .timedate-home .time {
    }

.time-home,
.calendar-home {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.time-home {
    width: 630px;
    position: relative;
}

.calendar-home {
    width: 390px;
    position: relative;
}

.timedate-home h3 {
    font-size: 100px;
    position: relative;
    z-index: 9;
    margin: 0;
    font-weight: 400;
    color: var(--text-title-color)
}

.timedate-home span {
    text-align: end;
    font-size: 20px;
}

.time-home:before,
.calendar-home:before,
.home-header::before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

.calendar-home:before {
    background: var(--date-blur);
}

.home-header:before,
.time-home:before {
    background: var(--time-blur);
}

.calendar-grey {
    position: absolute;
    top: 26px;
    right: 20px;
    left: 24px;
    background-color: var(--calendar-grey);
    border-radius: 20px 20px 0 0;
    z-index: 9;
    height: 50px;
}

.timedate-home .time,
.timedate-home .date {
    display: flex;
    flex-direction: column;
    z-index: 9;
}

    .timedate-home .time span,
    .timedate-home .date span {
        color: #909293
    }

    .timedate-home .date i {
        color: #D9D9D9;
        font-size: 0.8rem;
    }

.mode-container {
    width: 80px;
    height: 80px;
    position: absolute;
    right: 50px;
    top: 20px;
}

    .mode-container img {
        width: 100%;
    }

.home-header {
    width: 100%;
    padding: 12px;
    border-radius: 20px;
}

.merchant-img {
    width: 25px;
    height: 25px;
    display: block;
}


.upload-box {
    border: 2px dashed #ccc;
    padding: 20px 10px;
    border-radius: 10px;
    width: 100%;
}

    .upload-box h3 {
        margin-bottom: 10px;
        font-size: 18px;
        font-weight: normal;
        color: #333;
    }

    .upload-box p {
        margin: 0 0 20px;
        font-size: 14px;
        color: white;
    }

input[type="file"] {
    display: none;
}

input.input-search {
    font-size: var(--text-size-md);
}

.warp_total-amount {
    display: inline-block;
    background: var(--total-amount);
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 10px 17px;
    padding-right: 51px;
}

.total-amount {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .total-amount p {
        margin: 0;
    }

        .total-amount p.title {
            font-size: 13px;
            color: var(--text-title-color);
        }

        .total-amount p.price-amount {
            font-size: 15px;
            font-weight: 500;
            color: var(--text-title-color);
        }

    .total-amount .icon {
        background: #0D6EFD1A;
        display: flex;
        padding: 10px;
        border-radius: 10px;
    }

.mango-img-container {
    display: flex;
}

    .mango-img-container .mango-img {
        width: 100%;
        height: auto;
        object-fit: contain;
        max-width: 100px;
    }

.payment-method-option-dots {
    position: absolute;
    top: 12%;
    right: 0;
}

.mango-combo tr:first-child .info_payment {
    bottom: -90px !important;
}

    .mango-combo tr:first-child .info_payment:after {
        border-color: transparent transparent #e9e9e9 transparent;
        top: -14px;
        bottom: unset;
    }

.search-item * {
    font-size: var(--input-filter-size);
}

.search-item select,
.search-item select option {
    font-size: var(--input-filter-size);
}

.text-color-red {
    color: #dc3545 !important;
}

.text-color-blue {
    color: #0D6EFD !important;
}

.text-color-green {
    color: #00a63e !important;
}

.text-color-purple {
    color: #bc00ff !important;
}

.row .swiper.cardSwiper {
    padding-right: calc(var(--bs-gutter-x) * .5) !important;
    padding-left: calc(var(--bs-gutter-x) * .5) !important;
}

.bg-color-green {
    background-color: #00a63e !important;
}

.select-file-align *, .no-attachment-yet {
    color: var(--text-title-color) !important;
}

body.dark-mode .form-check-label,
.item-has-modal {
    color: var(--text-content-color) !important;
}

.table-merchant-attachment.table td:not(.text-end) {
    vertical-align: middle;
}

.employee-attachment-table.table td:not(.text-end) {
    vertical-align: middle;
}

.rounder-border-rad .badge {
    border-radius: 25px;
}

.avt-profile {
    border-radius: 10px;
    background: var(--background-color2);
}

.avt-profile {
    color: var(--text-content-color) !important;
}

.emp-fs-rework {
    font-size: var(--text-size-md) !important;
}

    .emp-fs-rework span {
        font-weight: 500 !important;
    }

.avt-profile .full-name {
    font-size: var(--text-size-lg);
}

.rounder-border-rad .badge {
    font-size: var(--text-size-sm) !important;
    font-weight: 400 !important;
}

.rounder-border-rad .text-white.badge {
    color: white !important;
}

.password-container {
    display: flex;
    justify-content: space-between;
}


    .password-container span:hover {
        text-decoration: underline;
        cursor: pointer;
    }

.password-option {
    border-top: var(--line-under-tab);
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

    .password-option i.fas.fa-eye{
        background-color: transparent;
    }

    .profile-padd {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

.panigation-wrap * {
    font-size: var(--text-size-md);
}

.modal-head-infor .modal-title h5 {
    margin-bottom: 0;
}


.p_contain_icon_info_message {
    display: flex;
    gap: 4px;
}

.icon-info-transaction {
    font-size: 20px !important;
    width: 16px;
    line-height: 1;
    display: inline-block;
    color: #549EF1;
    font-weight: 600;
}

.password-link {
    text-decoration: unset;
}

    .password-link:hover {
        text-decoration: underline;
        cursor: pointer;
    }

.changepassword-title {
    font-size: var(--text-size-lg) !important;
}

.changepassword-form label, .changepassword-form input {
    font-size: var(--text-size-md) !important;
}

.p_contain_icon_info_message {
    line-height: 20px;
}

.by-who {
    font-size: var(--text-size-xs) !important;
    color: #7a7a7a;
}

.dropdown-item:hover {
    background-color: var(--background-color1) !important;
}

body.dark-mode .text-grey-tag {
    color: #9caeb8;
    background: var(--background-color1);
}


.total-amount {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .total-amount p {
        margin: 0;
    }

        .total-amount p.title {
            font-size: 13px;
        }

        .total-amount p.price-amount {
            font-size: 15px;
            font-weight: 500;
        }

    .total-amount .icon {
        background: #0D6EFD1A;
        display: flex;
        padding: 10px;
        border-radius: 10px;
    }

.payment-status-tooltip-wrappe .text-info {
    font-style: normal;
}

.payment-status-tooltip-wrapper {
    position: relative;
    display: inline-block;
}

    .payment-status-tooltip-wrapper .text-info:hover .info_payment {
        display: block !important;
    }

.info_payment:after {
    content: "";
    content: ' ';
    position: absolute;
    right: 0;
    bottom: -14px;
    border: 7px solid;
    border-color: #e9e9e9 transparent transparent transparent;
    z-index: -1;
}

.info_payment {
    position: absolute;
    bottom: calc(-100% + 45px);
    right: 0;
    min-width: 268px;
    background: #ffffffc9;
    padding: 8px 12px;
    z-index: 999;
    font-size: 13px;
    color: #333;
    display: none;
    box-shadow: 1px 1px 3px 0px #00000075;
    border-radius: 8px;
    backdrop-filter: blur(7px);
}

.text-info * {
    font-style: normal !important;
}

.info_payment p {
    padding: 0 !important;
    margin-bottom: 4px !important;
    font-style: normal;
}

.payment-status-tooltip-wrapper .text-info:hover .info_payment {
    display: block;
}

.info_payment p:first-of-type {
    margin-top: 5px;
}

.equal-height-row {
    display: flex;
    flex-wrap: wrap;
}

    .equal-height-row > .col-md-6 {
        display: flex;
        flex-direction: column;
    }

    .equal-height-row .card {
        flex: 1 1 auto;
        height: 100%;
        border: 1px solid var(--border-color);
    }

.card > .list-group {
    border-top: none !important;
}

.form-check-input:checked:disabled {
    opacity: 1;
}

.payment-status-tooltip-wrappe .text-info {
    font-style: normal;
}

.payment-status-tooltip-wrapper {
    position: relative;
    display: inline-block;
}

    .payment-status-tooltip-wrapper .text-info:hover .info_payment {
        display: block !important;
    }

.info_payment:after {
    content: "";
    content: ' ';
    position: absolute;
    right: 10px;
    bottom: -14px;
    border: 7px solid;
    border-color: #e9e9e9 transparent transparent transparent;
    z-index: -1;
}

.info_payment {
    position: absolute;
    bottom: calc(-100% + 60px);
    right: -10px;
    min-width: 268px;
    background: #ffffffc9;
    padding: 8px 12px;
    z-index: 999;
    font-size: 13px;
    color: #333;
    display: none;
    box-shadow: 1px 1px 3px 0px #00000075;
    border-radius: 8px;
    backdrop-filter: blur(7px);
}

    .info_payment p {
        padding: 0 !important;
        margin-bottom: 4px !important;
        font-style: normal;
    }

.payment-status-tooltip-wrapper .text-info:hover .info_payment {
    display: block;
}

.info_payment p:first-of-type {
    margin-top: 5px;
}

.text-info * {
    font-style: normal !important;
}

.card-custom {
    overflow: unset !important;
}

.custom-table {
    border: 1px solid #e0e0e0;
    width: 100%;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.custom-row td:last-child {
    position: relative;
    display: flex;
    align-items: center;
}

.custom-row td:first-child,
.card-custom thead:not(.default-table) tr th:first-child {
    border-right: 1px solid #ccc;
}

.custom-table th, .custom-table td {
    border: none;
    vertical-align: middle;
}

.custom-table td {
    padding: 16px 12px;
}

.custom-table th {
    text-align: center;
    font-weight: 600;
    background: var(--thead-special) !important;
    font-size: 16px;
    border-bottom: 1px solid #e0e0e0;
    padding: 4px 6px;
}

.custom-add-btn {
    border-radius: 50%;
    float: right;
    width: 27px;
    height: 27px;
    border: none;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    background: transparent;
    color: #43b047;
    box-shadow: unset;
}

    .custom-add-btn:hover {
        color: #36923a;
    }

.custom-dropdown {
    position: absolute;
    background: var(--background-color2);
    border: 1px solid var(--border-color);
    z-index: 10;
    max-width: 140px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    top: 75px;
    left: 0;
    min-width: 200px;
    height: 200px;
    overflow: auto;
    text-align: end;
}

    .custom-dropdown button {
        width: 100%;
        border: none;
        background: none;
        padding: 10px 18px;
        text-align: start;
        font-size: 15px;
        color: var(--text-color);
        cursor: pointer;
        border-bottom: 1px solid var(--border-color);
        transition: background 0.15s;
    }

        .custom-dropdown button:last-child {
            border-bottom: none;
        }

        .custom-dropdown button:hover {
            background: #f2f6f8;
        }

body.dark-mode .custom-dropdown button:hover {
    background: var(--background-color1);
}

.custom-delete-btn {
    background: none;
    border: none;
    color: #e74c3c !important;
    font-size: 18px;
    vertical-align: middle;
    margin-left: 8px;
    transition: color 0.2s;
}

    .custom-delete-btn:hover {
        color: #c0392b;
    }


.custom-row input, .custom-row textarea {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    font-size: 15px;
    padding: 8px 10px;
    width: 100%;
    transition: border 0.2s;
}

.custom-row textarea {
    background: #fff;
}

.custom-row {
    position: relative;
}

    .custom-row:not(:last-child) {
        border-bottom: 1px solid var(--bg-button-hover);
    }
    .custom-row td {
        vertical-align: middle;
    }

.payment-method-1 .payment-method {
    box-shadow: rgb(0 0 0 / 9%) 0px 4px 6px 1px;
}

.feature-name {
    background-color: var(--background-color2) !important;
    color: var(--text-title-color) !important;
}

body.dark-mode .feature-name {
    color: var(--text-color) !important;
}

tr.collapse:hover .text-end .row-options {
    animation: leftSlide 0.6s ease forwards;
    animation-delay: 0.1s;
}

tr.collapse:hover {
    box-shadow: var(--box-shadow);
    transform: translateY(-2px);
    z-index: 1;
    position: relative;
}

.invoice-detail-page .payment-method .focpayment {
    background: #fd7e14 !important;
}

.invoice-detail-page .payment-method .otherpayment {
    background: #adb5bd !important;
}

.dropdown-menu.checkUlHasLi i {
    color: var(--text-color);
}

.list-group-flush .row input.modified {
    font-size: var(--text-size-md)
}

i.fas.fa-eye-slash,
i.fas.fa-eye {
    color: var(--text-color) !important;
    padding: 4px 0;
    padding-left: 20px !important;
/*    background-color: white !important;*/
}

body.dark-mode i.fas.fa-eye-slash,
body.dark-mode i.fas.fa-eye {
    background-color: var(--background-color2) !important;
}
.card.card-body.table-area.mongo-search.has-popup-search {
    background-color: var(--background-color2) !important;
}
.modal-content.change-plane-modal {
    background-color: var(--background-color2) !important;
}

.mango-search-list .mango-search-item span {
    color: var(--text-title-color) !important;
}



.nav-highlight-line-2025 {
    top: 100%;
    transform: translateY(-50%);
}

.toggle-btns {
    display: flex;
    border: 1px solid #007bff;
    border-radius: 50px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    min-width: 260px;
}


.toggle-btn {
    flex: 1;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var( --text-color);
    font-weight: 600;
    min-width: 122px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

    .toggle-btn:not(.active):hover {
        scale: 1.05;
    }

    .toggle-btn:after {
        position: absolute;
        content: '';
        background: var(--bg-login-btn);
        color: #6c757d;
        top: 50%;
        height: 100%;
        border-radius: 50px;
        z-index: -1;
    }

    .toggle-btn.left:after {
        width: 100%;
        animation: toLeft 0.3s ease forwards;
    }

    .toggle-btn.right:after {
        right: 0;
        width: 100%;
        animation: toRight 0.3s ease forwards;
    }

@keyframes toLeft {
    0% {
        transform: translate(0, -50%)
    }

    100% {
        transform: translate(-80%, -50%)
    }
}

@keyframes toRight {
    0% {
        transform: translate(-80%, -50%)
    }

    100% {
        transform: translate(0, -50%)
    }
}

.toggle-btn.active {
    background: var(--bg-login-btn);
    color: var(--login-btn-color);
    border-radius: 20px;
}


.half-screen-modal .merchant-total-status .totol-subscription {
    margin-bottom: 16px;
}

.upcoming-renewel,
.total-subscription {
    background-color: #F7FAFC;
    overflow-x: auto;
    border-radius: 10px;
}

body.dark-mode .upcoming-renewel,
body.dark-mode .total-subscription {
    background-color: var(--background-color2);
}

.active-total span {
    color: #0D6EFD;
}

.pause-total span {
    color: #ffc107;
}

.cancel-total span {
    color: #FD7E14;
}

.merchant-total-status .text-blue-tag {
    max-height: 44px;
}

.total-subs,
.active-total,
.pause-total:not(.upcoming) {
    border-right: 1px solid #0D6EFD80;
}

.pause-total.active-total {
    border-right: 0 !important;
}

/*.collapse,
.collapsing {
    transition: none !important;
}*/

.refund-confirm-wrap .refund-confirm-item {
    display: flex;
    justify-content: space-between;
}

    .refund-confirm-wrap .refund-confirm-item span,
    .refund-confirm-wrap .refund-confirm-item p {
        font-size: var(--text-size-sm);
    }

    .refund-confirm-wrap .refund-confirm-item span {
        font-weight: 500;
    }

.container.refunds-tab .nav.nav-tabs1,
.container.invoice_payment_method .nav.nav-tabs1 {
    background-color: #9092931A !important
}

    .container.invoice_payment_method .nav.nav-tabs1 .nav-link:not(.active):hover{
        background-color: transparent !important;
    }

    .nav-highlight.refunds-highlight,
    .invoice_payment_method .nav-highlight {
        background-color: white !important;
    }

body.dark-mode .nav-highlight.refunds-highlight,
body.dark-mode .invoice_payment_method .nav-highlight {
    background-color: var(--background-color1) !important;
}

body.dark-mode .invoice_payment_method .tabs-highlight .nav-link.active{
    color: white !important;
}

body.dark-mode .nav-highlight.refunds-highlight {
    background-color: var(--background-color1) !important;
}

body.dark-mode .refunds .card.has-popup-search {
    background-color: var(--background-color2) !important;
}

body.dark-mode .refund-handling-container,
body.dark-mode #selectItems,
body.dark-mode #refundHandling,
body.dark-mode #sumaryConfirm {
    background-color: var(--background-color2);
}

.credit-card-method {
    min-height: 210px;
}

.refund-confirm-wrap {
    align-items: stretch !important;
}

    .refund-confirm-wrap .refund-confirm,
    .attachment-refunds {
        height: 100%;
        background-color: #F8F9FA;
        padding: 18px;
        border-radius: 10px;
    }

body.dark-mode .refund-confirm-wrap .refund-confirm,
body.dark-mode .attachment-refunds {
    background-color: #0f111a4a;
}

tbody.refund-items tr.disabled-row td {
/*    background-color: #f7f7f7 !important;*/
}

tbody.refund-items tr.disabled-row {
    cursor: not-allowed;
}
tbody.refund-items tr.not-disabled-row {
    cursor: pointer !important;
}


body.dark-mode tbody.refund-items tr.disabled-row td {
/*    background-color: #9092931A !important*/
}

tbody.refund-items tr.disabled-row td label,
tbody.refund-items tr.disabled-row td span.sku,
tbody.refund-items tr.disabled-row td {
    color: var(--bs-gray-500) !important;
}

    tbody.refund-items tr.disabled-row td input {
/*        display: none;*/
    }


.uploaded-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.uploaded-file-item {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
}

.file-preview {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    overflow: hidden;
}

    .file-preview img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.file-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.icon-pdf {
    color: #dc3545;
}

.icon-doc, .icon-docx {
    color: #0d6efd;
}

.icon-xls, .icon-xlsx {
    color: #198754;
}

.icon-txt {
    color: #6c757d;
}

.file-info {
    padding: 0.5rem;
    background-color: white;
}

.file-name {
    font-size: 0.8rem;
    font-weight: 500;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-actions {
    padding: 0.5rem;
    display: flex;
    justify-content: space-around;
    background-color: #f8f9fa;
}

.noti-content p {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-noti-unread .noti-content span,
.row-noti-unread .name-row label {
    font-weight: 700;
}

.row-noti-unread td {
    background-color: #e8f3f6 !important;
}

body.dark-mode tbody.noti-table .row-noti-unread td,
body.dark-mode tbody.noti-table .row-noti-unread td label{
    background-color: #2d384a !important
}

body.dark-mode tbody.noti-table .row-noti-readed td label,
body.dark-mode tbody.noti-table .row-noti-readed td span,
body.dark-mode tbody.noti-table .row-noti-readed td p {
    color: #d1d1d1c2 !important;
}

    body.dark-mode tbody.noti-table .row-noti-unread td label,
    body.dark-mode tbody.noti-table .row-noti-unread td span,
    body.dark-mode tbody.noti-table .row-noti-unread td p {
        color: #D1D1D1 !important;
    }

.card.whocansell .list-group {
    height: 400px;
    overflow: auto;
}

.equal-height-row {
    display: flex;
    flex-wrap: wrap;
}

    .equal-height-row > .col-md-6 {
        display: flex;
        flex-direction: column;
    }

    .equal-height-row .card {
        flex: 1 1 auto;
        height: 100%;
        border: 1px solid var(--border-color);
    }

.card > .list-group {
    border-top: none !important;
}

.form-check-input:checked:disabled {
    opacity: 1;
}

.avt-profile .row:not(.password-option) {
    padding: 10px 6px;
    display: flex;
    align-items: center;
}
.grand-total-line {
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
    .grand-total-line::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 1px;
        background-color: var(--bs-gray-500);
        color: var(--bs-gray-500);
        width: 100%;
    }
/* có khi trung xài, class này thêm dấu gạch ngang
.strike-through {
    text-decoration: line-through;
    opacity: 0.6; 
}*/
.refund-i:hover .info_payment {
    display: block;
    background-color: var(--color-gray-800);
}
.refund-i .info_payment {
    left: -100px;
    color: white;
}

.refund-i .info_payment:after {
    display: none;
}
.refund-i {
    color: var(--bs-gray-500) !important;
}
    .refund-i.expiredcard {
        opacity: 0.6 !important;
        cursor: not-allowed !important;
        color: white !important;
    }
.refund-search-customer p {
    margin-bottom: 5px !important;
}

.invoice-header .card{
    padding: 20px;
}

.send-addr-wrap{
    min-height: 265px;
    justify-content: space-between;
}

.tooltip-inner {
    background-color: #0d6efd; /* xanh Bootstrap */
    color: #fff; /* chữ trắng */
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

body:not(.dark-mode) .invoice_total_amount {
    background: linear-gradient(90deg, #eff6ff 0%, #dbeafe 100%);
}

.green-box {
    background-color: #f0fdf4 !important;
    border: 1px solid #b9f8cf !important;
}

body.dark-mode .green-box,
body.dark-mode .blue-box,
body.dark-mode .orange-box,
body.dark-mode .payment_summary,
body.dark-mode .what_next,
body.dark-mode .invoice_total_amount,
body.dark-mode .invoice_payment_method,
body.dark-mode .payment-infor,
body.dark-mode .invoice-header .card,
body.dark-mode .send-addr-wrap,
body.dark-mode .invoice_number_date,
body.dark-mode .items_services,
body.dark-mode .info-card {
    background-color: var(--background-color2) !important;
}

.blue-box {
    background-color: #eff6ff !important;
    border: 1px solid #bedbff !important;
}

.orange-box {
    background-color: #fff4f0 !important;
    border: 1px solid #ffd7a8 !important;
}

.red-box {
    background-color: #ffe0e3 !important;
    border: 1px solid #dc3545 !important
}

.yellow-box {
    background-color: #fefce8 !important;
    border: 1px solid #fff085 !important;
    border-radius: 14px;
    color: #894b00;
    font-size: var(--text-size-md);
}


    .rounded-box {
        border-radius: 14px;
    }

.bank-option {
    border: 1px solid var(--border-color);
    border-radius: .5rem;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
}

    /*.bank-option.active {
        border-color: #9333ea;
        background-color: #f9f5ff;
    }*/

.btn-payment {
    background-color: #c084fc;
    color: white;
    font-weight: 500;
}

    .btn-payment:hover {
        background-color: #a855f7;
        color: white;
    }

.wallet-card {
/*    border: 1px solid #f97316;*/
    border-radius: .75rem;
    padding: 1.25rem;
/*    background: linear-gradient(to left, #fff7ed, #ffffff);*/
}

.wallet-balance {
    font-size: 1.75rem;
    font-weight: 700;
    color: #dc2626;
}

.btn-wallet {
    background-color: #f97316;
    color: white;
    font-weight: 500;
}

    .btn-wallet:hover {
        background-color: #ea580c;
        color: white;
    }

.info-card {
/*    border: 1px solid #e5e7eb;*/
    border-radius: .75rem;
    padding: 10px;
}

.payment-method-tab .btn:not(.payment-action-btn) {
    max-width: 300px;
    min-width: 110px;
}

.add-newcard-btn{
    width: 200px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .add-newcard-btn:hover {
        background-color: var(--bg-button-hover) !important;
    }

.custom-list li {
    margin-bottom: 6px;
    color: var(--text-color);
    font-size: var(--text-size-md);
}

.custom-list li::marker {
    color: #2563eb;
}

.refund-table thead tr th:last-child,
.refund-table tbody tr td:last-child,
.refund-total-price {
    text-align: right;
}

.invoice-back-btn{
    min-width: 150px;
}

.payment-card-type{
    width: 30px;
    margin-right: 10px;
}

.payment-card-type img{
    object-fit: cover
}

body:not(dark-mode) input:not([type="checkbox"]):-webkit-autofill {
    background-color: white !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-password-toggle-button {
    display: none;
    -webkit-appearance: none;
}
input[type="password"]::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
}

.bi-shield-exclamation {
    margin-top: 3px;
}

.modal-content.sms {
    border-radius: 15px;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-color);
}

.modal-header.sms {
    border-bottom: 1px solid var(--border-color);
    padding: 20px 25px;
    background-color: var(--background-color2) !important;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.modal-title.sms {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1.25rem;
}

.modal-body.sms {
    padding: 25px;
}

    .modal-body.sms h6 {
        font-weight: 500;
        color: var(--text-color);
        margin-bottom: 1rem;
        font-size: 1rem;
    }

    .modal-body.sms li.list-group-item-action:not(:last-child){        
        border-bottom: 1px solid var(--border-color);
    }

    .modal-body.sms li.list-group-item-action {
        border: 0;
    }

body.dark-mode .modal-body.sms li.list-group-item-action {
    background-color: var(--background-color1);
    color: var(--text-color)
}

    .form-select.sms {
        border-radius: 8px;
        border: 1px solid var(--border-color);
        padding: 10px 15px;
        font-size: 0.95rem;
    }

    .form-select.sms:focus {
/*        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(255, 123, 0, 0.25);*/
    }

.list-group-item.sms.active {
    background-color: var(--bg-button-hover);
    border-color: var(--bg-button-hover);
    color: black;
}

body.dark-mode .list-group-item.sms.active {
    background-color: var(--background-color2) !important;
   
}

.list-group-item-action:not(.active):hover {
    background-color: var(--bg-button-hover);
}

body.dark-mode .list-group-item-action:not(.active):hover {
    background-color: var(--background-color2) !important;
}

.list-group.sms {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
}

.modal-footer.sms {
    border-top: 1px solid var(--border-color);
    padding: 20px 25px;
   
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-footer.sms .btn {
    border-radius: 8px;
    padding: 8px 20px;
    font-weight: 500;
    font-size: 0.95rem;
}

    .modal-footer.sms .btn-primary {
/*        background-color: var(--primary-color);
        border-color: var(--primary-color);*/
    }



        .modal-footer.sms .btn-primary:disabled {
/*            background-color: #FFBB80;
            border-color: #FFBB80;*/
        }

    .modal-footer.sms .btn-secondary {
        background-color: #6c757d;
        border-color: #6c757d;
    }

        .modal-footer.sms .btn-secondary:hover:not(:disabled) {
            background-color: #5a6268;
            border-color: #545b62;
        }


@media (max-width: 576px) {
    .mb-sm-3 {
        margin-top: 1rem !important;
    }
}
.badge-tag {
    background-color: #FFD085;
    color: #000;
    font-size: 12px;
    border-radius: 8px;
}
body.dark-mode .badge-tag {
    background-color: var(--background-color1);
  
}

.payment-card-action {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 7px;
}

.accordion-item{
    background-color: transparent;
}

.default-card {
    padding: 4px 8px;
    background-color: #9092931A;
    border-radius: 8px;
    font-size: 12px !important;
}

.payment-card-action button:focus{
    outline: none;
}