:root {
    --rz-panel-menu-item-active-background-color: var(--rz-warning-lighter) !important; /* Màu mới bạn muốn */
    --rz-panel-menu-item-active-color: var(--rz-warning) !important; /* Màu mới bạn muốn */
}

body {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-optical-sizing: auto;
}

html, body {
    font-family: "Nunito", sans-serif !important;
}

.rz-body {
    border-radius: 3px !important;
    font-size: 0.875rem !important;
}

.rz-text-body1 {
    font-family: "Nunito", sans-serif !important;
    font-weight: 500 !important;
}

.rz-text-body2 {
    font-family: "Nunito", sans-serif !important;
}

.rz-text-h2 {
    font-family: "Nunito", sans-serif !important;
}

.rz-text-h3 {
    font-family: "Nunito", sans-serif !important;
}

.rz-text-h4 {
    font-family: "Nunito", sans-serif !important;
}

.rz-text-h5 {
    font-family: "Nunito", sans-serif !important;
}

.rz-text-h6 {
    font-family: "Nunito", sans-serif !important;
}

.rz-navigation-item-text {
    font-family: "Nunito", sans-serif !important;
}
.rz-button {
    border-radius: 20px !important;
}
.rz-datepicker input{
    height:30px !important;
}
.rz-datepicker .rz-inputtext {
    height: 30px !important;
    font-size: 0.825rem !important;
    display: flex;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.main-layout .rz-navigation-item {
    font-size: 0.875rem !important;
    text-transform: none !important;
    border-radius: 32px !important;
    border: 1px solid transparent !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

    .main-layout .rz-navigation-item .rz-navigation-item-wrapper {
        font-size: 0.875rem !important;
        text-transform: none !important;
        border-radius: 32px !important;
        border: 1px solid transparent !important;
    }


.main-layout .rz-navigation-item-link {
    height: 45px !important;
    text-transform: none !important;
}
.rz-rating-icon {
    color: var(--rz-warning-light) !important;
}
.star-rating {
    display: inline-flex;
    font-size: 1.025rem;
    color: gold;
}
.rz-label {
    font-size: 0.825rem;
}

.rz-text {
    font-size: 0.825rem;
}

.rz-dialog {
    border-radius: 20px !important;
    /*background-color: #e3eaf2 !important;*/
    background-color: var(--rz-base-100) !important;
}

.rz-dialog-titlebar {
    /*background-color: #e3eaf2 !important;*/
    background-color: var(--rz-base-100) !important;
}
/*Chặn focus menu*/
.rz-context-menu .rz-menu,
.rz-context-menu .rz-navigation-item:focus > .rz-navigation-item-wrapper {
    outline: none !important;
}

.rz-context-menu .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper,
.rz-context-menu .rz-navigation-item-wrapper:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.rz-selectbutton .rz-button {
    text-transform: none !important;
}

.rz-data-grid {
    border-radius: 12px !important;
    /*background-color: #ffffff !important;*/
}

.rz-cell-data p {
    font-size: 13px; /* Thay đổi kích thước chữ ở đây */
}

.rz-fileupload {
    background-color: var(--rz-white) !important;
}

.rz-fileupload-choose {
    border-radius: 16px !important;
    height: 40px;
}

    .rz-fileupload-choose span {
        font-size: 0.825rem !important; /* 14px */
        height: 30px !important;
        text-transform: none !important;
    }
.rz-fileupload-row button {
    border-radius: 16px !important;

}
    .rz-fileupload-row button .rz-icon-trash {
        font-size:15px !important;
    }

.rz-text-body1 {
    font-size: 0.825rem !important; /* 14px */
}

.rz-radiobutton-box {
    margin-top: 2px;
    height: 16px !important; /* 14px */
    width: 16px !important; /* 14px */
}

.rz-radiobutton-icon {
    height: 10px !important; /* 14px */
    width: 10px !important; /* 14px */
}

.rz-dropdown-filter-container input {
    font-size: 0.825rem !important; /* 14px */
}

.rz-textbox {
    width: 150px !important;
    font-size: 0.825rem !important;
    height: 30px !important;
}

.rz-textbox-medium {
    width: 100% !important;
    font-size: 0.975rem !important;
    height: 40px !important;
}

.rz-listbox-header {
    font-size: 0.825rem !important; /* 14px */
}

.rz-numeric {
    width: 100px !important;
    font-size: 0.825rem !important; /* 14px */
    height: 30px !important;
}

    .rz-numeric input {
        font-size: 0.825rem !important;
        margin-top: 4px !important
    }



.rz-dropdown {
    min-width: 60px;
    width: 200px;
    font-size: 0.825rem !important; /* 14px */
    height: 30px !important;
    padding-top: 4px !important;
}

.rz-inputtext {
    padding-top: 0px !important;
}

.rz-dropdown-item {
    min-width: 150px !important;
    font-size: 0.825rem !important; /* 14px */
}

.rz-multiselect-panel .rz-popup {
    width: 180px;
}

.rz-multiselect-header {
    font-size: 0.825rem !important;
}

.rz-multiselect-item {
    font-size: 0.825rem !important;
}

.rz-navigation-item-wrapper {
    font-size: 0.875rem !important;
}

.slider-scale .rz-slider-range {
    background-color: var(--rz-warning) !important;
}

.slider-scale .rz-slider-handle {
    background-color: var(--rz-warning) !important;
}

.tab-phone ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}

    .tab-phone ul li {
        flex: 1;
    }

        .tab-phone ul li a {
            display: flex; /* Cho phép căn chỉnh bằng flexbox */
            justify-content: center; /* Căn giữa ngang */
            align-items: center; /* Căn giữa dọc */
            height: 100%; /* Chiếm toàn bộ chiều cao li (nếu li có chiều cao cố định) */
            text-decoration: none; /* Tùy chọn: bỏ gạch dưới */
            padding: 10px; /* Tùy chọn: thêm khoảng cách */
        }

/*PhoneMenu */
.phone-menu {
    border-radius: 10px !important;
}

    .phone-menu span {
        font-size: 0.825rem !important;
    }

    .phone-menu li {
        height: 30px !important;
    }

    .phone-menu i {
        font-size: 0.925rem !important;
    }


/*Phone Pannel Menu*/
.phone-pannel-menu {
    border-radius: 10px !important;
}

    .phone-pannel-menu i {
        font-size: 0.925rem !important;
    }

    .phone-pannel-menu span {
        font-size: 0.825rem !important;
    }

    .phone-pannel-menu li .rz-navigation-item-link {
        height: 30px !important;
    }

    .phone-pannel-menu li a {
        height: 30px !important;
    }

    .phone-pannel-menu li {
        height: 30px !important;
    }
/*Tiêu đề của tabs*/
.rz-tabview-title {
    font-size: 0.825rem !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.rz-tabview-nav li {
    margin: 0px !important;
    padding: 0px !important;
}

    .rz-tabview-nav li a {
        margin: 2px !important;
        padding: 3px !important;
    }
/* Cấu hình thanh cuộn cho toàn bộ trang */
::-webkit-scrollbar {
    width: 8px; /* Độ rộng của thanh cuộn ngang */
    height: 8px; /* Độ cao của thanh cuộn dọc */
}


/* Màu sắc của thanh cuộn */
::-webkit-scrollbar-thumb {
    background-color: #1E90FF;
    Màu của thanh cuộn border-radius: 10px;
    Bo tròn các góc của thanh cuộn transition: background-color 0.3s ease;
    Hiệu ứng chuyển màu khi hover
}

    /* Màu sắc của thanh cuộn khi hover */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #2527c3;
        Màu khi hover
    }

/* Cấu hình thanh cuộn khi không có hoạt động */
::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 10px;
}

/* Khi cuộn dọc (ở trang) */
::-webkit-scrollbar:vertical {
    width: 8px;
}

/*Khi cuộn ngang (ở trang)*/
::-webkit-scrollbar:horizontal {
    height: 8px;
}

.rotate-icon i {
    transform: rotate(90deg);
}

.rz-main-menu {
    background-color: var(--rz-warning) !important;
}




.card-product {
    --b: 3px; /* the border thickness*/
    --g: 0px; /* the gap on hover */

    padding: calc(var(--g) + var(--b));
    --_g: #0000 25%,var(--rz-warning) 0;
    background: conic-gradient(from 180deg at top var(--b) right var(--b),var(--_g)) var(--_i,200%) 0 /200% var(--_i,var(--b)) no-repeat, conic-gradient( at bottom var(--b) left var(--b),var(--_g)) 0 var(--_i,200%)/var(--_i,var(--b)) 200% no-repeat;
    transition: .2s, background-position .2s .2s;
    cursor: pointer;
    min-width: 450px;
}

    .card-product:hover {
        transform: translateY(-5px); /* Nhô lên */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Đổ bóng */
        --_i: 100%;
        transition: .2s, background-size .2s .2s;
    }


        .card-product:hover .card-product-buy-button {
            background-color: var(--rz-warning) !important;
            color: var(--rz-white) !important;
        }

    .card-product h4 {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card-product:hover h4 {
        transform: translateY(-5px) scale(1.1);
    }

.animate-title {
    text-transform: uppercase;
    background-image: linear-gradient( 225deg, #1a2a6c 0%, #b21f1f 29%, #fdbb2d 67%, #23d5ab 100% );
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    font-weight: 600;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip-reverse 3s linear infinite;
    display: inline-block;
    margin-top: 3px;
}

/* Hiệu ứng animation đi ngược */
@@keyframes textclip-reverse {
    from {
        background-position: 200% center;
    }

    to {
        background-position: 0% center;
    }
}

.draggable-dialog {
    width: auto;
    max-width: 95vw;
    height: auto;
    background: var(--rz-base-200); /* dark card */
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden;
    z-index: 1000;
    left: 20px;
    top: 20px;
}

.draggable-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    cursor: grab;
    background: var(--rz-warning);
    user-select: none;
}

    .draggable-header .title {
        font-weight: 600;
        color: var(--rz-white);
        font-size: 0.95rem;
    }

.header-actions button {
    background: transparent;
    border: none;
    color:var(--rz-white);
    margin-left: 6px;
    font-size: 0.95rem;
    cursor: pointer;
}

.draggable-body {
    padding: 8px;
    height: calc(100% - 44px);
    overflow: auto;
    background: var(--rz-base-200);
}