.swal2-actions {
            width: 100% !important;
        }
        
        .swal2-actions .btn {
            margin-top: 10px !important;
        }
        
        .swal2-actions .btn {
            min-width: inherit;
            width: 100%;
            border-radius: var(--rounded) !important;
        }
        
        .swal2-container.swal2-center>.swal2-popup {
            padding: 30px !important;
            border: none !important;
            border-radius: var(--rounded) !important;
        }
        
        .swal2-title {
            padding: 10px 0px !important;
            font-size: 37px !important;
            font-weight: var(--fw-bold) !important;
            color: var(--color-default) !important;
        }
        
        .swal2-html-container {
            margin: 20px 0px !important;
            font-size: 20px !important;
            color: var(--color-default) !important;
        }
        
        .form-control {
            padding: 18px 30px;
        }
        
        .datepicker {
            padding: 18px 30px !important;
            border-radius: var(--rounded) !important;
        }
        
        .has-error.has-danger input {
            border-color: var(--color-primary);
        }
        
        .payment-list.has-error.has-danger {
            border: 1px solid;
            border-color: var(--color-primary);
        }
        
        .boxtracking {
            background-color: var(--color-light);
            padding: 35px;
            position: relative;
        }
        
        .boxtracking .topic {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            width: auto;
            max-width: 100%;
            padding-right: 24px;
            margin-right: 24px;
            border-right: 1px solid var(--color-border2);
            line-height: 32px;
        }
        
        .dashboard-action .boxtracking .btn {
            min-width: 100%;
        }
        /* inputfile */
        
        .js .inputfile {
            width: 0.1px;
            height: 0.1px;
            opacity: 0;
            overflow: hidden;
            position: absolute;
            z-index: -1;
        }
        
        .inputfile+label {
            min-width: 200px;
            max-width: 300px;
            /* font-size: 1.25rem; */
            /* 20px */
            line-height: unset;
            font-weight: 700;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            display: inline-block;
            overflow: hidden;
            padding: 0.625rem 1.25rem;
            /* 10px 20px */
        }
        
        .no-js .inputfile+label {
            display: none;
        }
        
        .inputfile:focus+label,
        .inputfile.has-focus+label {
            outline: 1px dotted #000;
            outline: -webkit-focus-ring-color auto 5px;
        }
        
        .inputfile+label * {
            /* pointer-events: none; */
            /* in case of FastClick lib use */
        }
        
        .inputfile+label svg {
            width: 1em;
            height: 1em;
            vertical-align: middle;
            fill: currentColor;
            margin-top: -0.25em;
            /* 4px */
            margin-right: 0.25em;
            /* 4px */
        }
        /* style 1 */
        
        .inputfile-1+label {
            color: #f1e5e6;
            /* background-color: #d3394c; */
        }
        
        .inputfile-1:focus+label,
        .inputfile-1.has-focus+label,
        .inputfile-1+label:hover {
            /* background-color: #722040; */
        }
        
        .icon-box::before {
            content: "";
        }
        
        .filter-summary .dashboard-filter {
            border-bottom: none;
            margin-bottom: 0px;
            padding-bottom: 0px;
        }
        
        .marginbox {
            margin-bottom: 60px;
        }
        
        .filter-summary .dashboard-filter .search-wrapper .form-control {
            height: 60px;
            padding: 0 0 0 0px;
            border: none;
            border-bottom-color: currentcolor;
            border-bottom-style: none;
            border-bottom-width: medium;
            border-radius: 0;
            border-bottom: 1px solid var(--color-border2);
            font-size: var(--typo-md);
            color: var(--color-default);
            font-weight: var(--fw-bold);
            background: none;
            background-color: rgba(0, 0, 0, 0);
            background-color: rgba(0, 0, 0, 0);
        }
        
        .scroll {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .order-list .item-list.scroll>li {
            margin: 0;
            width: auto;
        }
        
        .order-list .item-list.scroll>li+li {
            margin-top: 20px;
        }
        
        @media (max-width: 767px) {
            .order-list .item-list.scroll>li {
                margin: 0;
                width: 100%;
            }
            .dashboard-action.-type2.boxreport .inner {
                width: 100%;
            }
            .layout-footer .menu .fluid li {
                width: 33%;
                position: relative;
            }
        }
        
        .boxnone {
            width: 100% !important;
            text-align: center !important;
            display: block !important;
            line-height: 68px;
        }
        
        .showmonth {
            max-height: 500px;
            overflow-y: scroll;
            margin-top: 60px;
        }
        
        .showmonth .box {
            margin-top: 0px;
            padding: 10px;
        }
        
        .showmonth .box ul {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        
        .showmonth .box ul li {
            font-size: 18px;
            padding: 5px 10px;
        }
        
        .showmonth .box .titlemonth {
            color: var(--color-primary);
            border-bottom: 1px dotted var(--color-border2);
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
        
        .order-list a.report {
            color: var(--color-primary);
        }
        
        .pricediscount {
            color: var(--color-gray);
        }
        
        .badge.new {
            background-color: var(--color-primary) !important;
        }
        
        .badge.hot {
            background-color: #fa814c !important;
        }
        
        .badge.rec {
            background-color: #894cfa !important;
        }
        
        .wg-recommend.none {
            padding: 80px 0;
            height: 450px;
            background: url("../img/background/wg-recommend.png") center bottom no-repeat;
        }
        
        @media (max-width: 767px) {
            .wg-recommend.none {
                padding: 30px 0 160px 0;
                background-size: cover;
                height: auto;
            }
        }
        
        .boxnotitem {
            width: 100%;
            color: var(--color-light);
            text-align: center;
        }
        
        .wg-recommend.none .whead {
            display: none;
        }
        
        .badge.detail {
            line-height: unset;
            border-radius: 0;
            border-bottom-right-radius: var(--rounded-md);
            border-top-left-radius: var(--rounded-md);
        }
        
        .badge {
            -webkit-box-shadow: 7px 9px 28px -15px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 7px 9px 28px -15px rgba(0, 0, 0, 0.75);
            box-shadow: 7px 9px 28px -15px rgba(0, 0, 0, 0.75);
        }
        
        .circle.active {
            color: var(--color-light) !important;
            background-color: rgba(0, 0, 0, 0) !important;
            opacity: 1 !important;
        }
        
        .dashboard-menu .body .link {
            padding: 0 !important;
        }
        
        .dashboard-menu .body .item-list li {
            width: 100%;
        }
        
        .orderid {
            white-space: nowrap;
            margin-left: -10px;
        }
        
        .order-list .btn {
            font-size: 16px;
            text-transform: none;
        }
        
        .order-list .link {
            color: var(--color-default);
        }
        
        .order-list .link:hover {
            color: var(--color-primary);
        }
        
        .nav-list .link:hover {
            color: var(--color-primary);
        }
        
        .nav-list li>ul .link {
            font-weight: var(--fw-light) !important;
        }
        
        .order-list .btn.-Processing {
            border: 1px solid #a9a9a9;
        }
        
        .status_penddingapprove {
            color: #fff;
            background: #e67e22;
            border: 1px solid #e67e22;
        }
        
        .status_penddingapprove:hover {
            background: #f55936;
            border: 1px solid #f55936;
        }
        
        .status_received {
            color: #fff;
            border: 1px solid #28b463;
            background: #28b463;
        }
        
        .status_received:hover {
            color: #fff;
            border: 1px solid #2c9718;
            background: #2c9718;
        }
        
        .status_shipping {
            color: #fff;
            border: 1px solid #2e86c1;
            background: #2e86c1;
        }
        
        .status_shipping:hover {
            color: #fff;
            border: 1px solid #0f46b6;
            background: #0f46b6;
        }
        
        .status_readypick {
            color: #fff;
            border: 1px solid #f1c40f;
            background: #f1c40f;
        }
        
        .status_readypick:hover {
            color: #fff;
            border: 1px solid #f4d03f;
            background: #f4d03f;
        }
        
        .status_panddingpay {
            color: #fff;
            border: 1px solid #8e44ad;
            background: #8e44ad;
        }
        
        .status_panddingpay:hover {
            color: #fff;
            border: 1px solid #6c3483;
            background: #6c3483;
        }
        
        .btn_status_enable {
            color: #fff;
            border: 1px solid #28b463;
            background: #28b463;
        }
        
        .btn_status_enable:hover {
            color: #fff;
            border: 1px solid #2c9718;
            background: #2c9718;
        }
        
        .btn_status_enable:not([href]) {
            color: #fff;
        }
        
        .btn_status_disable {
            color: #fff;
            border: 1px solid #e74c3c;
            background: #e74c3c;
        }
        
        .btn_status_disable:hover {
            color: #fff;
            border: 1px solid #cb4335;
            background: #cb4335;
        }
        
        .btn-dark:not([href]) {
            color: #fff;
        }
        
        .notereq {
            color: #cb4335;
        }
        /* .layout-footer .menu .fluid li {
    width: 33%;
    position: relative;
} */
        
        .btn_tools {
            padding: 10px !important;
            height: auto !important;
            border-radius: 15px !important;
        }
        
        .btn_tools img {
            height: 24px;
        }
        
        .btn_tools:hover {
            background: #f8f9f9;
            border-color: var(--color-gray);
        }
        
        .gap-2 {
            gap: 10px;
        }
        
        #sortable li {
            cursor: grab;
        }
        
        #sortable li:first-child {
            cursor: unset
        }
        
        .order-list .modal-box {
            width: 100%;
            display: flex;
            gap: 3px;
            padding-left: 10px;
            justify-content: center;
        }
        
        .select2-container--default .select2-selection--single {
            background-color: rgba(0, 0, 0, 0);
            border: none;
            border-radius: 0;
        }
        
        .order-list .item-list .submenu_list>div {
            margin-left: 20px;
        }
        
        .order-list .item-list .menumain_list {
            background: #f8cece;
        }
        
        .order-list .item-list .menumain_list>div {
            font-weight: bold;
        }
        
        .order-list .head .title {
            color: var(--color-light);
        }
        
        .tablelist {
            border-collapse: collapse;
            border-radius: var(--rounded);
            overflow: hidden;
        }
        
        .tablelist thead {
            border-radius: 30px;
        }
        
        .tablelist thead tr {
            background-color: var(--color-primary);
            color: var(--color-light);
            font-size: var(--typo-ssm);
            font-weight: var(--fw-bold);
        }
        
        .tablelist tr {
            -webkit-box-align: left;
            -ms-flex-align: left;
            align-items: left;
            height: 68px;
            text-align: left;
            border-radius: var(--rounded);
            margin: 0 -5px;
            padding: 0 45px;
        }
        
        .tablelist tr:nth-child(even) {
            background-color: var(--color-light);
            color: var(--color-default);
        }
        
        .tablelist tbody {
            color: var(--color-default);
            font-size: var(--typo-xs);
            font-weight: var(--fw-normal);
        }
        
        .order-content .product-content .head {
            opacity: 1;
        }
        
        .order-list #list_filter {
            display: none;
        }
        
        .product-list-wrapper .product-list-link .title {
            line-height: 1.4em;
            height: 1.4em;
        }
        
        @media (min-device-width: 1200px) {
            /* .order-list ul {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .order-list .box {
        flex: 0 0 150px;
    }

    .order-list .item-list>li {}

    .order-list .item-list>li {
        margin: 0;
        width: auto;
        min-width: 100%;
    }

    .order-list .item-list>li+li {
        margin-top: 20px;
    } */
            .order-list .item-list.scroll>li {
                width: auto;
                min-width: 100%;
            }
            .order-list .scroll .box {
                width: 180px;
            }
        }
        
        .showImage {
            text-align: center;
            padding: 10px 20px;
            background: #fff;
            border-radius: var(--rounded);
        }
        
        .showImage img {
            max-height: 350px;
        }
        
        #changePic,
        #picgallery {
            border-radius: var(--rounded);
            min-width: 390px;
        }
        
        .select2-container--default.select2-container--disabled .select2-selection__rendered {
            background-color: #e9ecef !important;
            cursor: default;
            border-radius: var(--rounded);
        }
        
        .lastdate {
            word-wrap: break-word;
            white-space: nowrap;
        }
        
        .box figure.cover {
            margin: auto;
        }
        /* .boximg {
    flex-basis: unset;
    width: 80px !important;
} */
        
        .dashboard-filter .h-title .title {
            font-size: var(--typo-lg);
        }
        
        .dashboard-filter .h-title .desc {
            font-size: var(--typo-md);
        }
        
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            padding: 0 25px;
        }
        
        .select2-container .select2-selection--multiple .select2-selection__rendered {
            display: grid;
        }
        
        .nowarp {
            word-wrap: break-word;
            white-space: nowrap;
        }
        
        .product-list-wrapper .product-list-link .desc {
            line-height: 1.5em;
        }
        
        .dashboard-search .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 1.2em;
            padding: 20px 30px;
            background-color: rgba(255, 255, 255, .89);
            border: 1px solid var(--color-border1);
            border-radius: var(--rounded);
            -webkit-box-shadow: none;
            box-shadow: none;
            font-size: var(--typo-ssm);
            color: var(--color-default);
            font-weight: var(--fw-normal);
            height: auto;
        }
        
        .product-list-wrapper .product-list-link .desc {
            height: 2.8em;
        }
        
        .toolsmenu img {
            max-height: 24px;
            max-width: 24px;
        }
        
        .toolsmenu a.link:hover {
            background-color: var(--color-light);
            border-radius: var(--rounded);
            /* opacity: 0.5; */
        }
        
        .toolsmenu a.link:hover img {
            /* background-color: var(--color-light);
    border-radius: var(--rounded); */
            opacity: 0.8;
        }
        
        li.contentlist:hover,
        .item-list li.body:hover {
            background: #f7f6f6;
            border: 1px solid var(--color-border1);
        }
        
        .order-list .boxtools {
            width: 65px;
            border-right: 1px solid var(--color-border2);
            padding-right: 6px;
        }
        
        .order-list .imglist {
            width: 65px;
        }
        
        .order-list .cover {
            width: 55px;
            height: 55px;
        }
        
        .order-list .box_size_200 {
            width: 200px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        
        .order-list .box_size_300 {
            width: 300px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        
        .wg-cart .footer .txt-warning {
            font-size: 16px;
            color: var(--color-default);
            width: 100%;
            text-align: center;
            display: block;
            margin-top: 10px;
        }
        
        .boxshowremindcost .box {
            margin-top: 0px;
            margin-bottom: 20px;
        }
        
        .dashboard-filter .selectpage {
            display: none;
        }
        
        .selectpage {
            width: 120px;
            text-align: center;
            margin-right: 10px;
            border: 1px solid var(--color-border1);
            background: #fff;
        }
        
        .selectpage option {
            text-align: center;
        }
        
        .tablelist th,
        .tablelist td {
            text-align: center !important;
        }
        
        .product_inlist {
            border-bottom: 1px dotted var(--color-border1);
            margin-bottom: 5px;
        }
        
        .product-topbar .selectpage {
            display: none;
        }
        
        .postionkeybar {
            background: #fdf0f0 !important;
            color: var(--color-primary) !important;
        }
        
        .order-content .product-content .inner {
            text-align: center;
            width: 170px;
        }
        
        .box_list_gallery {
            padding: 0px;
            margin: 20px 0px;
            display: grid;
            grid-template-columns: auto auto auto auto auto auto;
            gap: 1rem;
            width: 100%;
        }
        
        .box_list_gallery li {
            list-style: none;
            /* width: 20%; */
            padding: 0px;
            margin: 0px;
            max-width: 150px;
            position: relative;
        }
        
        .box_list_gallery .cover {
            padding-top: 100%;
            border-radius: var(--rounded);
        }
        
        .box_list_gallery li a {
            position: absolute;
            top: 0px;
            right: 0px;
            margin: 10px;
            color: #fff;
            background: rgba(255, 255, 255, 0.8);
            padding: 5px;
            border-radius: 5px;
        }
        
        .box_list_gallery li a:hover {
            background: rgba(255, 255, 255, 1);
        }
        
        .boxupload_slip_user {
            gap: 10px;
        }
        
        @media (max-width: 1680px) {
            .dashboard-search .form-control,
            .dashboard-search .select2-container--default .select2-selection--single .select2-selection__rendered {
                padding: 13.21px 30px;
                height: 50px;
            }
            .select2-container--default .select2-selection--single .select2-selection__arrow b {
                font-size: 18px;
            }
            .form-select .select2-container--default .select2-selection--single .select2-selection__arrow {
                height: 27px;
                width: 24px;
                top: 0;
                bottom: 0;
                right: -1px;
                margin: auto;
            }
            .dashboard-search .row {
                padding: 0px 17px;
            }
            .dashboard-search .row>div {
                padding: 0 5px;
            }
            .dashboard-search .row>div:first-child {
                padding-left: 0px;
            }
            .dashboard-search .row>div:last-child {
                padding-right: 0px;
            }
        }
        
        @media (max-width: 767px) {
            .boxupload_slip_user .btn {
                width: 100%;
            }
            .dashboard-search .row .col {
                padding: 0 5px;
                flex-basis: auto;
            }
            .dashboard-search .col-auto {
                width: 100%;
                margin-top: 10px;
            }
            .dashboard-search .btn {
                width: 100%;
            }
            .dashboard-search .row {
                padding: 0px 17px;
            }
            .dashboard-search .row>div {
                padding: 0 5px;
            }
            .dashboard-search .row>div:first-child {
                padding-left: 5px;
            }
            .dashboard-search .row>div:last-child {
                padding-right: 5px;
            }
            .dashboard-search input {
                margin-bottom: 20px;
            }
        }
        
        .dashboard-search .btn {
            min-width: fit-content !important;
        }
        
        .pre-order-item {
            -webkit-filter: grayscale(1);
            filter: grayscale(1);
        }
        
        .swal2-loader {
            border-color: var(--color-primary) rgba(0, 0, 0, 0) var(--color-primary) rgba(0, 0, 0, 0) !important;
        }
        
        @media (max-width: 480px) {
            .product-list.display-list .product-list-link {
                flex-wrap: wrap;
            }
            .product-list.display-list .product-list-link .inner {
                max-width: 55%;
            }
            .product-list.display-list .product-list-link .cover {
                width: 120px;
                height: 120px;
                padding: 0;
                margin-right: 20px;
            }
            .product-list.display-list .btn-cart {
                right: 20px;
                top: unset;
                margin: auto;
                bottom: 20px;
            }
            .product-list.display-list .product-list-link .info {
                padding-right: 0px;
                padding-left: 63%;
            }
            .product-list-wrapper .product-list-link .info .price {
                text-align: right;
            }
            .order-content .product-content .inner {
                text-align: right;
                width: unset;
            }
        }
        
        .textchartback {
            display: -webkit-box;
            /* Use old syntax for compatibility */
            -webkit-line-clamp: 3;
            /* Limit the text to two lines */
            -webkit-box-orient: vertical;
            /* Set the text to flow vertically */
            overflow: hidden;
            /* Hide the overflowing text */
            text-overflow: ellipsis;
            /* Add the ellipsis (...) */
            max-height: 2.8em;
            /* Set the desired height for two lines of text */
        }
        
        .showdesc {
            max-width: 100%;
            /* Set the maximum width for the container */
            overflow: hidden;
            /* Hide any overflowing text */
            white-space: nowrap;
            /* Prevent the text from wrapping */
            text-overflow: ellipsis;
            /* Add the ellipsis (...) */
        }
        
        .showdesc:hover {
            cursor: help;
            overflow: visible;
            /* Show the full text on hover */
            white-space: normal;
            /* Allow the text to wrap */
        }