/*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: clamp(12px, 1.5vw, 13px);
    --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;
    --success-total-amount: #e8f4ea;
    --failed-total-amount: #ffe9e9a8;
    --line-under-tab: 1px solid #ededed;
    --thead-special: #f8f9fa;
    --ticket-number: #f5f5f5;
    --color-gray-800: #1e2939;
    /*update style ticket team 15/01/2026*/
    --background-color-list-member: #f1f5f9;
    --tetx-color-custom: #0f111a;
    --text-color-custom-edit: #0f111a;
    --border-color2: #EEF2F1;
    --background-color-menu: #fff;
    --border-color-custom: #acacac;
    --shadow-sm-custom: 1 10px 1px rgba(0, 0, 0, 0.35);
    --background-slate-100-custom: #f1f5f9;
    --text-color-custom-slate: #62748e;
    /*Css Ticket Report*/
    --text-color-custom-edit-ticket-report: #5b5b5b;
    --text-color-custom-badge-ticket-today: #939398;
}

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 !important;
    --success-total-amount: #0f111a;
    --failed-total-amount: #0f111a;
    --line-under-tab: 1px solid #2a2a2a;
    --disabled-color-input: #1c1c1c;
    --thead-special: #1a1e2d;
    --ticket-number: #0f111a;
    /*background color update ticket team 15/01/2026*/
    --text-color-custom-edit: #EAEAEC;
    --background-color-menu: #0f111a;
    --border-color-custom: #464646;
    --background-color3: #9fa6bc;
    --background-color-item: #212529;
    --background-color: #1a1e2d;
    --background-color-list-member: #1a1e2d;
    --border-color-custom: #464646;
    --text-color-custom: #EAEAEC;
    --border-color2: #464646;
    --shadow-sm-custom: 1 10px 1px rgba(0, 0, 0, 0.35);
    --background-slate-100-custom: #525252;
    --text-color-custom-slate: #EAEAEC;
    /*Css Ticket Report*/
    --text-color-custom-edit-ticket-report: #EAEAEC;
    --text-color-custom-badge-ticket-today: #6684a9;
}

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,
i.bi-three-dots-vertical {
    color: var(--text-color) !important;
}

#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([type="radio"]):not(.swal2-input):not(.input-search),
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) !important;
}

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:not(.swal2-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,
.text-success:not(.payment-note),
.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,
    .text-success: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: 98;
    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;
        white-space: nowrap;
    }

    .sidebar-nav .nav-item > a[data-bs-toggle="collapse"] {
        min-height: 43px;
    }

    .sidebar-nav .nav-item > a[data-bs-toggle="collapse"] {
        min-height: 43px;
    }

    .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;
    transition: all 0.3s ease;
}

.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;
    position: fixed;
    z-index: 50;
}

    .sidebar:hover {
        z-index: 9999 !important;
    }

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

.sidebar:hover {
    z-index: 9999 !important;
}

.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;
}

#ticketMenu li{
    padding: 0 !important;
}

    #ticketMenu li a {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

.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):not(.toggle-menup-btn):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;
    white-space: nowrap;
    display: flex;
    transition: all 0.3s ease;
}

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

.nav-wrap {
    overflow-x: visible;
    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%;
    /*    scrollbar-width: none;*/
    transition: all 0.3s ease;
}

    .main::-webkit-scrollbar {
        display: none;
    }

    .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 8px !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;
    }

    .mb-sm-3 {
        margin-top: 1rem !important;
    }

    .search {
        margin-bottom: 10px;
    }

    .tab-table-neo {
        top: 102px !important;
    }

    .recurring-tab .tab-table-neo {
        top: 154px !important;
    }

    .line-items .tab-table-neo {
        top: 102px !important;
    }

    .merchant-list .tab-table-neo {
        top: 118px !important;
    }

    .calendar-home {
        width: 100% !important;
    }
}

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

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

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



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

    .modal:not(.half-screen-modal) .usagedlog_search {
        min-width: 350px
    }

    .modal.half-screen-modal .usagedlog_search {
        min-width: 230px
    }

    .modal.half-screen-modal .extend-detail-popup .col-md-6 {
        flex: 0 0 auto !important;
        width: 50% !important;
    }
}

@media (min-width: 769px) {
    .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;
    }

    .tab-table-neo {
        top: 54px !important;
    }
}

@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:not(.col-custom) {
        margin-bottom: 20px;
    }

    .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;
    }

    .tab-table-neo {
        top: 118px !important;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .recurring-tab .tab-table-neo {
        top: 122px !important;
    }

    .merchant-list .tab-table-neo {
        top: 134px !important;
    }

    /* Ép container của popup hiển thị dạng flex, không rớt dòng và cho phép cuộn ngang */
    .daterangepicker {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        max-width: 100vw !important; /* Đảm bảo chiều rộng không vượt qua màn hình thiết bị */
        -webkit-overflow-scrolling: touch; /* Hỗ trợ cuộn mượt trên iOS */
    }

        /* Ngăn các khối (menu bên trái và 2 lịch bên phải) bị co ép kích thước */
        .daterangepicker .ranges,
        .daterangepicker .drp-calendar {
            flex: 0 0 auto !important;
            float: none !important;
            min-width: 250px; /* Có thể điều chỉnh tuỳ theo độ rộng thực tế của lịch */
        }

        /* Căn chỉnh lại phần nút Cancel/Apply nếu chúng bị đẩy lệch */
        .daterangepicker .drp-buttons {
            position: sticky;
            left: 0;
            bottom: 0;
            background: white;
            width: 100%;
        }
}

@media (min-width: 769px) and (max-width: 991px) {
    .recurring-tab .tab-table-neo {
        top: 105px !important;
    }
}

@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;
    }

    /*    .table-area .table-header .recurring-search .input-search {
        width: 100% !important;
    }*/
}

@media (max-width: 1300px) {
    .modal.half-screen-modal .usage-history-header .col-12.col-custom {
        flex: 0 0 auto !important;
        width: 100% !important;
    }

    .modal.half-screen-modal .usage-history-header .col-12.col-custom {
        border-right: 1px solid var(--border-color);
    }
}

@media (max-width: 1300px) {
    .modal.half-screen-modal .usage-history-header .col-12.col-custom {
        border-right: none !important;
    }
}

@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;
    }

    .sidebar img.short-logo {
        visibility: hidden;
        opacity: 0;
        display: none;
    }

    .expand-menu-btn {
        display: none !important;
    }
}

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

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

    .main.mini-mode-menu,
    #header.mini-mode-menu {
        margin-left: 111px;
    }

    /*  .sidebar.mini-mode-menu .sidebar-nav:hover .main {
        --sidebar-width: 111px !important;
        transition: all 0.3s ease;
    }*/

    .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;
    }

    .mini-mode-menu .nav-link.main-menu-link .bi.bi-chevron-down,
    .mini-mode-menu .nav-link.main-menu-link .bi.bi-chevron-right,
    .mini-mode-menu .nav-link.main-menu-link span:not(.custom-tooltip),
    .mini-mode-menu .back-to-main span:not(.custom-tooltip) {
        visibility: hidden;
        opacity: 0;
        display: none;
    }

    .mini-mode-menu .nav-link.main-menu-link span,
    .mini-mode-menu .back-to-main span {
        white-space: nowrap;
    }

    .sidebar.mini-mode-menu .sub-menu2 {
        visibility: hidden;
    }

    /* .sidebar.mini-mode-menu .sidebar-nav:hover .sub-menu2 {
        visibility: visible;
    }*/

    .mini-mode-menu .nav-link.main-menu-link {
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sidebar.mini-mode-menu {
        justify-content: start;
        padding-left: 20px;
    }

    .sidebar:not(.mini-mode-menu) {
        width: var(--sidebar-width);
    }

    .sidebar-wrap {
        width: 72px;
        transition: width 0.3s ease;
    }

    .sidebar:not(.mini-mode-menu) .sidebar-nav {
        padding-left: 25px;
    }

    .sidebar:not(.mini-mode-menu) .sidebar-wrap {
        width: 220px;
    }

    /* .sidebar.mini-mode-menu .sidebar-nav:hover .sidebar-wrap {
        width: 220px;
        transition: width 0.3s ease;
    }

    .sidebar.mini-mode-menu .sidebar-nav:hover .nav-link.main-menu-link span,
    .sidebar.mini-mode-menu .sidebar-nav:hover .back-to-main span,
    .sidebar.mini-mode-menu .sidebar-nav:hover .nav-link.main-menu-link .bi.bi-chevron-right,
    .sidebar.mini-mode-menu .sidebar-nav:hover .nav-link.main-menu-link .bi.bi-chevron-down {
        visibility: visible;
        opacity: 1;
        display: flex;
    }

    .sidebar.mini-mode-menu .sidebar-nav:hover .nav-link.main-menu-link i {
        margin-right: 4px;
    }

    .sidebar.mini-mode-menu .sidebar-nav:hover .nav-link.main-menu-link {
        width: 100%;
        justify-content: start;
    }*/

    .toggle-menup-btn {
        display: block !important;
    }

    .sidebar.mini-mode-menu img.full-logo {
        visibility: hidden;
        opacity: 0;
        display: none;
    }

    .sidebar:not(.mini-mode-menu) img.short-logo {
        visibility: hidden;
        opacity: 0;
        display: none;
    }

    /* .sidebar.mini-mode-menu .sidebar-nav:hover img.full-logo {
        visibility: visible !important;
        opacity: 1 !important;
        display: block;
    }

    .sidebar.mini-mode-menu .sidebar-nav:hover img.short-logo {
        visibility: hidden !important;
        opacity: 0 !important;
       
    }

    .sidebar.mini-mode-menu .sidebar-nav:hover .sidebar-wrap {
        box-shadow: var(--box-shadow);
    }
*/
    .sidebar .toggle-menup-btn:hover {
        background-color: var(--sub-menu-color);
        border-radius: 8px;
        cursor: pointer;
    }

        .sidebar .toggle-menup-btn:hover i {
            color: #fba00c !important;
        }

    .sidebar.mini-mode-menu .sub-menu2.show {
        visibility: hidden;
        opacity: 0;
        height: 0;
    }

    /*.sidebar.mini-mode-menu .sidebar-nav:hover .sub-menu2 {
        visibility: visible;
        opacity: 1;
        height: 100%
    }*/
}

@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):not(.sendbat-item):hover {
    box-shadow: var(--box-shadow);
    transform: translateY(-2px);
    z-index: 1;
    position: relative;
}

.licence-manager tbody tr.sendbat-item:hover {
    box-shadow: var(--box-shadow);
}

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

.neo-tab {
    position: sticky;
}

.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: 36px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    border: none;
    background: transparent !important;
    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;
    border-left: 0;
    height: 100%;
    padding: 6px;
    background: var(--background-color2);
    transition: all 0.2s ease;
}

.usage-history-header .search-btn {
    border: 1px solid var(--border-color) !important;
    border-left: 0 !important;
}

.usage-history-header .col-8.tool-wrap {
    border-left: 1px solid var(--border-color);
}

.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-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 16px !important;
    padding-right: 110px !important;
    width: 500px;
    border-radius: 24px !important;
    background: var(--input-search-color);
    color: var(--text-title-color);
    transition: all 0.3s ease;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-area .table-header-usagedlog {
    background: none;
}

.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:not(.store-code) {
    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 .mango-search-input .search .search-btn {
    background: var(--background-color1);
}

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,
.advance-search.usagedlog {
    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;
    top: 0;
    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;
    position: sticky;
    background-color: var(--background-color2);
    z-index: 9;
    /*    border-radius: 20px 20px 0 0;*/
}

    #tab-table.app-setting {
        top: 0;
    }


/*
    Sticky tabs need the nearest scrolling container to be the page scroll (main).
    If .licence-manager has overflow-y:auto but doesn't actually scroll, position:sticky won't engage.
*/
.licence-manager.sticky-tab-table {
    height: auto !important;
    overflow-y: visible;
}

.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;
    z-index: 8 !important;
}

    .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:not(.item-has-search) {
    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):not(.recurring-tab), #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):not(.spinner-border) {
        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):not(.choose-file-btn), .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;
}

.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);*/
    border-color: transparent;
}

.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,
#ticketCreateModal .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: 155px;
}

.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:not(.change-plan) {
        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):not(.has-submenu):hover, .dropdown-menu:not([aria-labelledby="workspaceDropdown"]) 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;
}

.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.02;
    }

    .item-has-modal.popup-text:hover {
        text-decoration-color: red !important;
    }

.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: 6px 10px;
    margin: 0 6px 6px 0;
    max-width: 100%;
    color: white !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    vertical-align: middle;
    min-width: 0; /* allow children to shrink */
}

    /* label inside tag - allow ellipsis for long text */
    .select2-multi-tags .select2-tag .tag-label {
        display: inline-block;
        flex: 1 1 auto; /* grow and shrink as needed */
        min-width: 0; /* allow shrinking inside flex */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        color: white !important;
    }

    /* remove icon inside tag — keep inline and centered */
    .select2-multi-tags .select2-tag .remove-tag {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        line-height: 1;
        width : 0px;
    }

/* remove fixed max-widths so label can flex naturally */

.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 {
    /* make select visible with full border and keep tag layout */
    min-height: 38px;
    padding: 8px 44px 8px 8px; /* extra right padding for clear icon */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    cursor: pointer;
    border-radius: 6px;
    background: var(--background-color2);
    border: 1px solid var(--border-color) !important; /* ensure border-bottom is shown */
    box-sizing: border-box;
}

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

    /* make small chevron icons visually bolder */
    .chevron-down {
        line-height: 1;
        text-shadow: 0 0 0.6px currentColor;
        -webkit-text-stroke: 0.3px currentColor; /* works in some browsers */
        filter: drop-shadow(0 0 0.6px rgba(0,0,0,0.03));
    }

.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;
}

.dropdown-item:active {
    background-color: transparent;
}

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: 3px;
    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) !important;
}

.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;
}

.warp_success_total-amount {
    background: var(--success-total-amount) !important;
}

.warp_failed_total-amount {
    background: var(--failed-total-amount) !important;
}

.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;
    }

.sucesss-amount .icon {
    background: #0bff001a !important;
}

.failed-amount .icon {
    background: #ff00001a !important;
}

.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) * 0.5) !important;
    padding-left: calc(var(--bs-gutter-x) * 0.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;
}

.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:not(.bottom-side-tooltip):not(.inright-side):not(.duedate-extend-popup):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: 9999999999999;
    font-size: 13px;
    color: #333;
    display: none;
    box-shadow: 1px 1px 3px 0px #00000075;
    border-radius: 8px;
    backdrop-filter: blur(7px);
}

    .info_payment.bottom-side-tooltip {
        bottom: calc(-100% - 72px);
    }

.text-info * {
    font-style: normal !important;
}

.info_payment p {
    padding: 0 !important;
    margin-bottom: 4px !important;
    font-style: normal;
}



    .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;
}

#tab-recurring table .invoice-transaction-tbody tr:first-child .info_payment {
    bottom: -115px !important;
}

#tab-recurring table .invoice-transaction-tbody tr:first-child .payment-Future-Tag .info_payment {
    bottom: -80px !important;
}

#tab-recurring table .invoice-transaction-tbody tr:first-child .info_payment:after {
    bottom: 100% !important;
    border-color: transparent transparent #e9e9e9 transparent !important;
}

.info_payment p {
    padding: 0 !important;
    margin-bottom: 4px !important;
    font-style: normal;
}




    .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: -140px;
    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: 0.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: 0.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: 0.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;
    }

    .modal.half-screen-modal .extend-detail-popup .col-md-6 {
        flex: 0 0 auto !important;
        width: 100% !important;
    }
}

.badge-tag {
    background-color: #ffd085;
    color: #000;
    font-size: 12px !important;
    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;
}

#workstation-select .custom-select-btn {
    background-color: var(--sub-menu2-color) !important;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 500;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 200px;
}

    #workstation-select .custom-select-btn:hover, .custom-select-btn:focus {
        background-color: #e5e7eb;
        box-shadow: none;
    }

#workstation-select .dropdown-toggle::after {
    margin-left: auto;
    opacity: 0.5;
}

#workstation-select .dropdown-menu {
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    margin-top: 8px !important;
    min-width: 220px;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: none;
}

#workstation-select .dropdown-item {
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    color: #4b5563;
    font-weight: 500;
    cursor: pointer;
}

    #workstation-select .dropdown-item:hover {
        background-color: #f3f4f6;
        color: #111;
    }

#workstation-select .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

#workstation-select .dot-blue {
    background-color: #3b82f6;
}

#workstation-select .dot-orange {
    background-color: #f97316;
}

#workstation-select .dot-red {
    background-color: #ef4444;
}

#workstation-select .dot-pink {
    background-color: #ec4899;
}

#workstation-select .dot-green {
    background-color: #22c55e;
}

#workstation-select .dot-purple {
    background-color: #a855f7;
}

#workstation-select .dot-teal {
    background-color: #14b8a6;
}

#workstation-select .dot-yellow {
    background-color: #eab308;
}

#workstation-select .check-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: #333;
    opacity: 0;
}

#workstation-select .dropdown-item.active {
    background-color: transparent;
    color: #000;
}

    #workstation-select .dropdown-item.active .check-icon {
        opacity: 1;
    }
/* Nếu header có chứa một dropdown đang mở (class .show) thì set z-index */
#header:has(#workstation-select .dropdown-menu.show) {
    z-index: 9999 !important;
}

#header:has(#login-dropdown .dropdown-menu.show) {
    z-index: 9999 !important;
}

.custom-tooltip-wrap {
    position: relative;
}


.custom-tooltip {
    position: absolute;
    top: 50%;
    left: 42px;
    background-color: var(--color-gray-800);
    color: white;
    font-size: var(--text-size-xs);
    padding: 4px 8px;
    border-radius: 8px;
    visibility: hidden;
    opacity: 0;
    z-index: 99;
    transform: translateY(-50%) translateX(-5px);
    transition: all 0.3s ease;
}

    .custom-tooltip.tooltip-top {
        top: -100% !important;
        left: -185% !important;
        background-color: var(--background-color2) !important;
        color: var(--text-title-color) !important;
        border: 1px solid #e0e0e0;
    }

    .custom-tooltip.white-bg-tooltip {
        background-color: var(--background-color2) !important;
        color: var(--text-title-color) !important;
        border: 1px solid #e0e0e0;
    }

.custom-tooltip-wrap:hover .custom-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.modal.half-screen-modal .invoice-search-input .col-sm-6 {
    width: 75% !important;
}

.sendbat-container {
    min-height: 200px;
    min-width: 500px;
}

.sendbat-option {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999999;
}

select.yearselect, select.monthselect {
    min-width: 72px !important;
}

.text-overflow-eclipse {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 25px !important;
}

.change-plan-tooltip {
    left: -60px;
    top: -40px;
    color: white;
    background-color: var(--color-gray-800);
    display: none;
    position: absolute;
    border-radius: 10px;
    padding: 10px;
    font-size: var(--text-size-xs);
}

.change-plan:hover .change-plan-tooltip {
    display: block;
}

#deleteIconSearch {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    background-color: var(--bg-button-hover);
    border-radius: 50%;
    height: 16px;
    color: var(--text-color);
}

body.dark-mode #sendbatSubmitModal {
    background-color: var(--background-color1);
}

    body.dark-mode #sendbatSubmitModal .card-header-custom {
        background-color: transparent !important;
    }

select.swal2-select {
    width: 88%;
}

.file-name-link {
    text-decoration: unset;
}

.sendbat-item:first-child .info_payment {
    bottom: -80px;
}

.set-height-table {
    overflow-y: auto;
}

@media (min-width: 1366px) {
    .recurring-thead {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: #fff;
    }
}

@media (min-width: 1366px) and (max-width: 1700px) {
    .set-height-table {
        max-height: 300px;
    }
}

@media (min-width: 1701px) {
    .set-height-table {
        max-height: 500px;
    }
}
/* ===== TEAM MENU ===== */
.team-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    width: 12rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    border: 1px solid #f1f5f9;
    /*    padding-top: 0.25rem;
    padding-bottom: 0.25rem;*/
    overflow: hidden;
    z-index: 50;
    animation: menuFadeSlideIn 0.2s ease-out;
}

.team-menu-item {
    width: 100%;
    padding: 0.625rem 1rem;
    text-align: left;
    font-size: 0.875rem;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    background: transparent;
    border: none;
    font-family: inherit;
    transition: background-color 0.15s ease;
}

    .team-menu-item:hover {
        background-color: #f8fafc;
        color: #1e293b;
    }

.team-menu-item-danger {
    width: 100%;
    padding: 0.625rem 1rem;
    text-align: left;
    font-size: 0.875rem;
    color: #dc2626;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    background: transparent;
    border: none;
    font-family: inherit;
    transition: background-color 0.15s ease;
}

    .team-menu-item-danger:hover {
        background-color: #fef2f2;
    }

.team-menu-divider {
    height: 1px;
    background-color: #f1f5f9;
    margin: 0.25rem 0;
}

@keyframes menuFadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*sửa border của menu edit/delete*/
.border-b-custom {
    border-bottom: 1px solid var(--border-color-custom);
}
/*sửa border của menu edit/delete ẩn đi các border top-left-right*/
.button-custom-edit {
    border-top: 1px;
    border-right: 1px;
    border-left: 1px;
}

.rounded-xl-custom {
    border-radius: 0.75rem;
}

.background-color-menu {
    background-color: var(--background-color-menu);
}

.background-color-dark2 {
    background-color: var(--background-color2) !important;
}

.background-color-dark1 {
    background-color: var(--background-color1);
}

.background-color-dark3 {
    background-color: var(--background-color3);
}

.background-color-item {
    background-color: var(--background-color-item);
}

.background-color {
    background-color: var(--background-color);
}

.background-color-list-member {
    background-color: var(--background-color-list-member);
}

.text-color-custom {
    color: var(--text-color-custom);
}

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

.border-color-item-2 {
    border: 1px solid var(--border-color2);
}

.text-slate-200-custom {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
}

.text-color-custom-edit {
    color: var(--text-color-custom-edit);
}
/*--------------------------------Update Css Button Dropdow Ticket Type------------------------------*/
/*Dropdow cho phần tạo Team */
.ticket-type-dropdown-item-custom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    background-color: var(--background-color2);
    color: var(--text-color-custom);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out;
}
    /* hover effect */
    .ticket-type-dropdown-item-custom:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        z-index: 10;
    }
/**/
.ticket-type-dropdown-item--selected-custom {
    font-weight: 600;
    /*background-color: var(--bg-panel-secondary);*/
}
/* check icon */
.ticket-type-dropdown-item__check-custom {
    color: #22c55e; /* green-500 */
    margin-left: 0.5rem;
    flex-shrink: 0;
}
/* dark mode shadow fix */
.dark .dropdown-item:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.z-index-custom {
    z-index: 999999;
}
/* =========================
   Dropdown content
========================= */
.ticket-type-dropdown-content-custom {
    width: 192px; /* 48 * 4 */
    background: var(--background-color2);
    border: 1px solid var(--border-color2);
    border-radius: 8px;
    z-index: 99999; /* 🔥 bắt buộc cho Blazor */
}

.ticket-type-dropdown-chevron-custom {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-color-custom-slate);
}

.tiket-type-dropdown-card {
    width: 100%;
    padding-left: 0.75rem /* 12px */;
    padding-right: 0.75rem /* 12px */;
    padding-top: 0.5rem /* 8px */;
    padding-bottom: 0.5rem /* 8px */;
    cursor: pointer;
    background: var(--background-color2);
    transition: background-color 0.2s ease;
    transition-duration: 300ms;
}

    .tiket-type-dropdown-card:hover {
        background-color: var(--background-slate-100-custom);
        color: var(--text-color-custom-edit);
    }

.ticket-type-dropdown-trigger-content {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    width: 100%;
}

.ticket-type-dropdown-placeholder-custom {
    font-size: 0.875rem /* 14px */;
    line-height: 1.25rem /* 20px */;
    color: var(--text-color-custom-edit);
}

.tiket-type-dropdown-trigger-custom {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding-left: 0.75rem /* 12px */;
    padding-right: 0.75rem /* 12px */;
    padding-top: 0.5rem /* 8px */;
    padding-bottom: 0.5rem /* 8px */;
}

.shadow-sm-custom {
    box-shadow: var(--shadow-sm-custom);
}

.badge-custom-ticket-type {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem; /* py-0.5 px-2.5 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 0.375rem; /* rounded-md */

    background-color: #e5e7eb; /* bg-secondary (tùy chỉnh được) */
    color: #111827; /* text-secondary-foreground */

    cursor: default;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.tiket-type-dropdown-error-custom {
    border: 1px solid #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.5);
}

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

    20% {
        transform: translateX(-3px);
    }

    40% {
        transform: translateX(3px);
    }

    60% {
        transform: translateX(-2px);
    }

    80% {
        transform: translateX(2px);
    }

    100% {
        transform: translateX(0);
    }
}

.tiket-type-shake-custom {
    animation: shake 0.3s ease-in-out;
}

.truncate-ticket-type-custom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#merchant-view-container {
    background-color: var(--background-color2);
    min-height: 100%;
}

    #merchant-view-container .card-header-tabpane .nav-pills li button.active {
        background-color: var(--bg-tab-pane) !important;
    }

    #merchant-view-container .nav-tabs1 .nav-link.active {
        background-color: var(--primary-color) !important;
    }

[data-radix-popper-content-wrapper] {
    z-index: 9999 !important;
    background-color: var(--background-color2);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
}
/*setup css cho badge của Toolbar và List Member*/
.ticket-team-toolbar-detail-team {
    position: relative;
    overflow: hidden;
}

.ticket-team-measure-layer-detail-team {
    position: absolute;
    visibility: hidden;
    display: flex;
    gap: 0.5rem;
    pointer-events: none;
}

.ticket-team-badge-entries {
    display: flex;
    align-items: center;
    gap: 0.375rem; /* gap-1.5 */
    padding: 0.125rem 0.5rem; /* py-0.5 px-2 */
    border-radius: 9999px; /* rounded-full */
    border: 1px solid;
    font-size: 0.75rem; /* text-xs */
    line-height: 1rem;
    white-space: nowrap;
}

.ticket-team-dot-badge {
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 9999px;
    margin-right: 5px;
}

.ticket-team-font-medium-badge {
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15px;
    margin-right: 2px;
}

.ticket-team-font-weight-badge {
    font-weight: 700;
    color: var(--text-color-custom-slate);
}

.ticket-team-tooltip-content-badge {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem; /* gap-1 */
    max-width: 20rem; /* max-w-xs */
    padding-left: 0.5rem; /* 8px */
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-radius: 0.5rem;
}

.ticket-team-badge-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem; /* py-1 px-2 */
    font-size: 10px;
    font-weight: 700;
    border-radius: 0.25rem;
}

.ticket-team-badge-item-detail-member {
    padding-left: 0.5rem; /* 8px */
    padding-right: 0.5rem;
    padding-top: 0.25rem; /* 4px */
    padding-bottom: 0.25rem;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    white-space: nowrap;
    border-radius: 0.25rem;
}
/*Background color sử dụng trong Tooltip badge*/
.bg-gray-100 {
    background-color: #f3f4f6;
}

.bg-gray-500 {
    background-color: #6b7280;
}

.bg-gray-700 {
    background-color: #374151;
}

.bg-green-50 {
    background-color: #f0fdf4;
}

.bg-green-100 {
    background-color: #dcfce7;
}

.bg-green-400 {
    background-color: #4ade80;
}

.bg-green-500 {
    background-color: #22c55e;
}

.bg-green-700 {
    background-color: #15803d;
}

.bg-indigo-100 {
    background-color: #e0e7ff;
}

.bg-indigo-500 {
    background-color: #6366f1;
}

.bg-indigo-700 {
    background-color: #4338ca;
}

.bg-pink-100 {
    background-color: #fce7f3;
}

.bg-pink-500 {
    background-color: #ec4899;
}

.bg-pink-700 {
    background-color: #be185d;
}

.bg-blue-50 {
    background-color: #eff6ff;
}

.bg-blue-100 {
    background-color: #dbeafe;
}

.bg-blue-400 {
    background-color: #60a5fa;
}

.bg-blue-500 {
    background-color: #3b82f6;
}

.bg-blue-700 {
    background-color: #1d4ed8;
}

.bg-orange-100 {
    background-color: #ffedd5;
}

.bg-orange-500 {
    background-color: #f97316;
}

.bg-orange-700 {
    background-color: #c2410c;
}

.bg-red-100 {
    background-color: #fee2e2;
}

.bg-red-500 {
    background-color: #ef4444;
}

.bg-red-700 {
    background-color: #b91c1c;
}

.bg-amber-100 {
    background-color: #fef3c7;
}

.bg-amber-500 {
    background-color: #f59e0b;
}

.bg-amber-700 {
    background-color: #b45309;
}

.bg-cyan-100 {
    background-color: #cffafe;
}

.bg-cyan-500 {
    background-color: #06b6d4;
}

.bg-cyan-700 {
    background-color: #0e7490;
}

.bg-sky-100 {
    background-color: #e0f2fe;
}

.bg-sky-500 {
    background-color: #0ea5e9;
}

.bg-sky-700 {
    background-color: #0369a1;
}

.bg-yellow-100 {
    background-color: #fef9c3;
}

.bg-yellow-500 {
    background-color: #eab308;
}

.bg-yellow-700 {
    background-color: #a16207;
}

.bg-lime-100 {
    background-color: #ecfccb;
}

.bg-lime-500 {
    background-color: #84cc16;
}

.bg-lime-700 {
    background-color: #4d7c0f;
}

.bg-emerald-100 {
    background-color: #d1fae5;
}

.bg-emerald-500 {
    background-color: #10b981;
}

.bg-emerald-700 {
    background-color: #047857;
}

.bg-teal-100 {
    background-color: #ccfbf1;
}

.bg-teal-500 {
    background-color: #14b8a6;
}

.bg-teal-700 {
    background-color: #0f766e;
}

.bg-purple-100 {
    background-color: #f3e8ff;
}

.bg-purple-500 {
    background-color: #a855f7;
}

.bg-purple-700 {
    background-color: #6b21a8;
}

.bg-fuchsia-100 {
    background-color: #fae8ff;
}

.bg-fuchsia-500 {
    background-color: #d946ef;
}

.bg-fuchsia-700 {
    background-color: #a21caf;
}

.bg-rose-100 {
    background-color: #ffe4e6;
}

.bg-rose-500 {
    background-color: #f43f5e;
}

.bg-rose-700 {
    background-color: #be123c;
}

.bg-slate-100 {
    background-color: #f1f5f9;
}

.bg-slate-500 {
    background-color: #64748b;
}

.bg-slate-700 {
    background-color: #334155;
}

.bg-zinc-100 {
    background-color: #f4f4f5;
}

.bg-zinc-500 {
    background-color: #71717a;
}

.bg-zinc-700 {
    background-color: #3f3f46;
}

.bg-neutral-100 {
    background-color: #f5f5f5;
}

.bg-neutral-500 {
    background-color: #737373;
}

.bg-neutral-700 {
    background-color: #404040;
}

.bg-violet-100 {
    background-color: #ede9fe;
}

.bg-violet-500 {
    background-color: #8b5cf6;
}

.bg-violet-700 {
    background-color: #6d28d9;
}
/*Text color sử dụng cho Badge*/
.text-gray-700 {
    color: #374151;
}

.text-green-600 {
    color: #16a34a;
}

.text-green-700 {
    color: #15803d;
}

.text-indigo-700 {
    color: #4338ca;
}

.text-pink-700 {
    color: #be185d;
}

.text-blue-600 {
    color: #2563eb;
}

.text-blue-700 {
    color: #1d4ed8;
}

.text-orange-700 {
    color: #c2410c;
}

.text-red-700 {
    color: #b91c1c;
}

.text-amber-700 {
    color: #b45309;
}

.text-cyan-700 {
    color: #0e7490;
}

.text-sky-700 {
    color: #0369a1;
}

.text-yellow-700 {
    color: #a16207;
}

.text-lime-700 {
    color: #4d7c0f;
}

.text-emerald-700 {
    color: #047857;
}

.text-teal-700 {
    color: #0f766e;
}

.text-purple-700 {
    color: #6b21a8;
}

.text-fuchsia-700 {
    color: #a21caf;
}

.text-rose-700 {
    color: #be123c;
}

.text-slate-700 {
    color: #334155;
}

.text-zinc-700 {
    color: #3f3f46;
}

.text-neutral-700 {
    color: #404040;
}

.text-violet-700 {
    color: #6d28d9;
}

.future-payment-content:not(.future-payment-collapse):hover {
    background-color: var(--background-color2) !important;
    cursor: default;
}

.future-payment-content.future-payment-collapse:hover {
    background: rgb(111 66 193 / 10%) !important;
}

.btn-schedule_payment {
    color: #6f42c1;
    background: rgb(111 66 193 / 10%);
    font-weight: 500;
    transition: all 0.3s ease;
}

    .btn-schedule_payment:hover {
        color: #5011c3 !important;
        background: rgb(111 66 193 / 20%);
        font-weight: 700;
    }

.future-payment-collapse {
    background: rgb(111 66 193 / 10%) !important;
}

#featurePayment .card-body {
    background-color: rgb(111 66 193 / 3%) !important;
    border: 1px #5011c30d solid !important;
    border-radius: 0px 0px 10px 10px !important;
}
/*Ticket Team Update Css*/
.ticket-team-input-error-create {
    border: 1px solid #ef4444 !important;
}

    .ticket-team-input-error-create:focus, .ticket-team-input-error-create:focus-visible {
        border-color: #ef4444 !important;
    }

.ticket-team-border-input-error-create {
    border-color: hsl(var(--input));
    border-color: hsl(var(--primary));
}
/* Theme Toggle Logic for Logos */
body.dark-mode .logo-header.light {
    display: none;
}

body:not(.dark-mode) .logo-header.dark {
    display: none;
}

.btn-export {
    background-color: #f5f5f5 !important;
    color: var(--text-color) !important;
    border: 1px solid #e0e0e0; /* Border nhẹ */
    border-radius: 8px; /* Bo góc nhẹ */
    /*box-shadow: 0 2px 8px rgba(0,0,0,0.08);*/ /* Đổ bóng nhẹ */
    transition: box-shadow 0.2s, border-color 0.2s;
}

    .btn-export:hover {
        color: black !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.12); /* Đổ bóng mạnh hơn khi hover */
        border-color: #bdbdbd; /* Border đậm hơn khi hover */
    }

.dark-mode .btn-export {
    background-color: var(--background-color2) !important;
    border: 1px solid #333444;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

    .dark-mode .btn-export:hover {
        color: white !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.28);
        border-color: #555666;
    }

/*-------------------------Css Ticket Report----------------------------*/

.text-color-custom-edit-ticket-report {
    color: var(--text-color-custom-edit-ticket-report);
}

.box-shadow-custom-ticket-report-categories-badge {
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}

.container-box-shadow-custom-ticket-report-categories-badge {
    display: flex;
    flex-direction: column;
    gap: 0.25rem
}

.item-box-shadow-custom-ticket-report-categories-badge {
    padding-top: 0.125rem /* 2px */;
    padding-bottom: 0.125rem /* 2px */;
    padding-left: 0.5rem /* 8px */;
    padding-right: 0.5rem /* 8px */;
    border-radius: 6px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 0.25rem /* 4px */;
    font-size: 0.75rem /* 12px */;
    line-height: 1rem /* 16px */;
}

.box-shadow-custom-ticket-report-merchant {
    padding-left: 0.75rem /* 12px */;
    padding-right: 0.75rem /* 12px */;
    padding-top: 0.375rem /* 6px */;
    padding-bottom: 0.375rem /* 6px */;
    border-radius: 6px; /* rounded-md */

    font-size: 14px; /* text-sm */
    line-height: 20px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); /* shadow-md */
}

.boxx-shadow-custom-ticket-report-assignee {
    padding: 0.75rem /* 12px */;
    border-radius: 0.75rem /* 12px */;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); /* shadow-lg */
}

.avatar-assignee-base-ticket-report {
    border-radius: 9999px; /* rounded-full */
    display: flex; /* flex */
    align-items: center; /* items-center */
    justify-content: center; /* justify-center */
    font-size: 0.75rem; /* text-xs = 12px */
    font-weight: 600; /* font-semibold */
}

/* Có name */
.avatar-assignee-base-ticket-report-has-name {
    background-color: #4f46e5; /* bg-indigo-600 */
    color: #ffffff; /* text-white */
}

/* Không có name */
.avatar-assignee-base-ticket-report-no-name {
    background-color: #d1d5db; /* bg-gray-300 */
    color: #4b5563; /* text-gray-600 */
}

.container-assignee-ticket-report {
    display: flex;
    flex-direction: column;
    gap: 0.5rem
}

.item-container-assignee-ticket-report {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 0.5rem
}

.text-custom-assignee-ticket-report {
    font-size: 0.875rem /* 14px */;
    line-height: 1.25rem /* 20px */;
}

.merchant-name-link {
    text-decoration: none;
    color: var(--text-color-custom-edit-ticket-report);
}

.text-color-custom-ticket-today {
    font-size: 0.875rem /* 14px */;
    line-height: 1.25rem /* 20px */;
    font-weight: 500;
    color: var(--text-color-custom-badge-ticket-today) !important;
}

/* Ép container của popup hiển thị dạng flex, không rớt dòng và cho phép cuộn ngang */
.modal.half-screen-modal .daterangepicker {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    max-width: 500px !important; /* Đảm bảo chiều rộng không vượt qua màn hình thiết bị */
    -webkit-overflow-scrolling: touch; /* Hỗ trợ cuộn mượt trên iOS */
}

    /* Ngăn các khối (menu bên trái và 2 lịch bên phải) bị co ép kích thước */
    .modal.half-screen-modal .daterangepicker .ranges,
    .modal.half-screen-modal .daterangepicker .drp-calendar {
        flex: 0 0 auto !important;
        float: none !important;
        min-width: 250px; /* Có thể điều chỉnh tuỳ theo độ rộng thực tế của lịch */
    }

    /* Căn chỉnh lại phần nút Cancel/Apply nếu chúng bị đẩy lệch */
    .modal.half-screen-modal .daterangepicker .drp-buttons {
        position: sticky;
        left: 0;
        bottom: 0;
        background: white;
        width: 100%;
    }


/*-------------------Xử lý tạm thời trong thời gian tìm giải pháp mới-----------------------------*/
.fancybox__thumbs {
    display: none !important;
}

 
.fancybox__nav {
    display: none !important;
}

 
.fancybox__counter {
    display: none !important;
}

.fancybox__infobar {
    display: none !important;
}


.fancybox__carousel.is-draggable {
    cursor: default !important;
}

.fancybox__slide {
    pointer-events: auto;
}

.fancybox__counter {
    display: none !important;
}

.is-next {
    display: none !important;
}

.is-prev {
    display: none !important;
}

table tr:first-child .info-extendsubs .info_payment:after {
    bottom: 100% !important;
    border-color: transparent transparent #e9e9e9 transparent !important;
}

table tr:first-child .info-extendsubs .info_payment {
    bottom: -100px !important;
}

.duedate-extend .duedate-extend-popup {
    height: 250px;
    width: 345px;
    overflow: auto;
    bottom: -175px !important;
    right: 15px;
}

.duedate-extend:last-child:not(:only-child) .duedate-extend-popup {
    bottom: 0 !important;
    right: 15px;
}

.edit-avatar-container {
    position: relative;
    width: fit-content;
    cursor: pointer;
}


.img-rounded-circle img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ddd;
}


.edit-icon-badge {
    position: absolute;
    bottom: 17%;
    left: 62%;
    transform: translate(50%, 50%);
    background-color: var(--bg-button-hover);
    color: black;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 1px solid white;
    transition: all 0.2s ease;
}

@media (min-width: 1650px) {
    .edit-icon-badge{
        bottom: 13% !important;
        left: 65% !important;
    }
}

    .dark-mode .edit-icon-badge {
        background-color: #454545 !important;
        color: var(--background-color3) !important;
    }

    .edit-avatar-container:hover .edit-icon-badge {
        color: var(--login-btn-color) !important;
    }

    .input-error {
        border: 1px solid #dc3545 !important;
    }