.ui-datepicker table.ui-datepicker-calendar {
    width: 100% !important;
    font-size: 13px !important;
    border-collapse: separate;
    border-spacing: 6px;
    margin: 0 auto !important
}

.ui-datepicker table.ui-datepicker-calendar tr td {
    position: relative;
    background: #f6f6f6;
    color: #454545;
    border-width: 0;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    padding: 6px
}

.ui-datepicker table.ui-datepicker-calendar td:has(a.ui-state-active) {
    background: var(--primary-color) !important;
    box-shadow: rgb(60 64 67 / .3) 0 1px 2px 0, rgb(60 64 67 / .15) 0 1px 3px 1px;
    font-weight: 600
}

.ui-datepicker table.ui-datepicker-calendar td:has(a.ui-state-active) .ui-datepicker-lunar,
.ui-datepicker table.ui-datepicker-calendar td:has(a.ui-state-active) .ui-datepicker-price {
    color: var(--text-primary) !important
}

.ui-datepicker table.ui-datepicker-calendar td a.ui-state-active {
    color: var(--text-primary) !important
}

.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-today a.ui-state-active {
    color: #fff !important
}

.ui-datepicker table.ui-datepicker-calendar td:has(a.ui-state-hover) {
    background: #ededed;
    font-weight: 400;
    color: #2b2b2b;
    cursor: pointer
}

.ui-datepicker table.ui-datepicker-calendar td:has(a.lunar-date-tet) {
    background: var(--red-color);
    color: var(--white-color)
}

.ui-datepicker-header .close-datepicker {
    position: absolute;
    left: 0
}

.ui-datepicker-header h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    color: var(--black-color)
}

.ui-datepicker-title-custom {
    display: none
}

td.ui-datepicker-today a.ui-state-default {
    background: #3c3c3c !important;
    border-radius: 6px;
    color: #fff !important;
    line-height: 1.5;
    width: fit-content;
    padding: 0 3px
}

td.ui-datepicker-week-end-custom .ui-state-default {
    color: var(--red-color) !important
}

.ui-datepicker td a,
.ui-datepicker td span {
    display: inline-block;
    color: var(--text-default) !important;
    padding: 0;
    width: 100%
}

.ui-datepicker td label {
    text-align: center;
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px
}

.ui-datepicker td a.ui-state-default,
.ui-datepicker td span.ui-state-default {
    font-size: 13px !important;
    font-weight: 600;
    text-align: left
}

.ui-datepicker td a.ui-datepicker-lunar {
    text-align: right;
    font-size: 11px
}

.ui-state-default,
.ui-state-hover,
.ui-widget-content .ui-state-default,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-default {
    border: transparent !important;
    background: 0 0 !important
}

.ui-datepicker.ui-datepicker-multi {
    width: auto !important;
    border-width: 0 !important;
    background-color: #fff;
    color: var(--text-secondary);
    line-height: 1.125em;
    padding: 10px;
    border-radius: 20px;
    overflow-y: hidden;
    box-shadow: 0 4px 30px -5px rgb(0 0 0 / .25);
    z-index: 21 !important
}

.ui-datepicker-multi-2 .ui-datepicker-group {
    padding: 0 10px
}

.ui-button:focus,
.ui-button:hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-content .ui-state-hover {
    cursor: pointer
}

.ui-widget-header,
.ui-widget-header .ui-state-focus,
.ui-widget-header .ui-state-hover {
    border-width: 0 !important;
    background: 0 0 !important
}

.ui-button:focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-state-hover .ui-icon,
.ui-widget-header .ui-icon {
    background: url(../images/ui-icons/chevron-right.webp) center/cover no-repeat !important
}

.ui-icon {
    width: 25px !important;
    height: 25px !important
}

.ui-icon-circle-triangle-w {
    transform: rotate(180deg) !important
}

@media screen and (max-width:576px) {
    #ui-datepicker-div.ui-datepicker.ui-datepicker-multi {
        width: 100vw !important;
        height: 100vh;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        border-radius: unset;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        overflow-y: auto;
        padding: 10px 10px 20px;
        z-index: 210 !important
    }

    .ui-datepicker-title-custom {
        display: block;
        position: absolute;
        top: 0;
        background: var(--primary-color);
        color: #000;
        font-weight: 700;
        width: 100%;
        text-align: center;
        padding: 10px 0
    }

    .ui-datepicker .ui-datepicker-group {
        margin-top: 10px
    }

    .ui-datepicker .ui-datepicker-group.ui-datepicker-group-first {
        margin-top: 30px
    }

    .ui-datepicker-multi-2 .ui-datepicker-group {
        width: 100%;
        padding: 0
    }
}

.ui-datepicker table.ui-datepicker-calendar td:has(a.lunar-date-tet) a.ui-state-default,
.ui-datepicker table.ui-datepicker-calendar td:has(a.lunar-date-tet) a.lunar-date-tet {
    color: #fff !important
}

.ui-datepicker table.ui-datepicker-calendar td:has(a.ui-state-active):has(a.lunar-date-tet) a.ui-state-default,
.ui-datepicker table.ui-datepicker-calendar td:has(a.ui-state-active):has(a.lunar-date-tet) a.lunar-date-tet {
    color: var(--text-primary) !important
}