﻿.text-inherit {
    color: inherit !important;
}

.invalid-feedback {
    margin-top: 0;
}

/*valid form*/
.fv-plugins-message-container {
    margin-top: 0;
}

.flatpickr-day.today {
    color: var(--bs-danger);
}

.flex-flow-nowrap {
    flex-flow: nowrap;
}

/*ẩn icon sort datatable*/
table.dataTable > thead .sorting_asc:after {
    display: none !important;
}

.badge-light-orange {
    color: #ff8535;
    background-color: #ffd7a04a;
}
[data-bs-theme=dark] .badge-light-orange {
    background-color: #875a1c4a;
}

.badge-light-pink {
    color: #ff29d1;
    background-color: #f7b2fb36;
}

[data-bs-theme=dark] .badge-light-pink {
    background-color: #9d3da336;
}

/*upload file*/
.dropzone.dropzone-queue .dropzone-item .dropzone-progress {
    width: 60px !important;
    min-width: 60px !important;
}

/*.dz-processing .dropzone-progress .progress .progress-bar {
    background: linear-gradient(to right, var(--bs-danger) 20%, var(--bs-warning) 40%, var(--bs-success) 60%, var(--bs-primary) 80%, var(--bs-info) 100%);
    background-size: 300% 100%;
    animation: animate-processing 2s linear infinite;
}

@keyframes animate-processing {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 200% 0;
    }
}*/

.dz-processing .dropzone-progress .progress .progress-bar {
    -webkit-animation-name: animate-processing;
    animation-name: animate-processing;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

@keyframes animate-processing {
    0% {
        width: 0%;
    }
    50% {
        width: 100%;
    }
    100% {
        width: 0%;
    }
}

.dz-processing .dropzone-toolbar .dropzone-start {
    pointer-events: none !important;
    cursor: not-allowed !important;
}

.dz-processing .dropzone-toolbar .dropzone-delete {
    pointer-events: none !important;
    cursor: not-allowed !important;
}

.daterangepicker.show-calendar .ranges {
    height: auto !important;
}

.right-0 {
    right: 0;
}

.form-select {
    --bs-form-select-bg-img: none;
}

.card .card-header .card-title .select2-dropdown li {    
    font-size: small !important;
}

.symbol.symbol-250px .symbol-label {
    width: 100%;
    height: 250px;
}
.post.symbol-2by3.w-100 .symbol-img {
    aspect-ratio: 3/2;
    width: 100%;
    height: auto;
}
.post.symbol-3by4.w-100 .symbol-img {
    aspect-ratio: 4/3;
    width: 100%;
    height: auto;
}
.post.symbol-9by16.w-100 .symbol-img {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
}
.post.symbol-10by16.w-100 .symbol-img {
    aspect-ratio: 16/10;
    width: 100%;
    height: auto;
}

.post .post-content .post-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    box-orient: vertical;
}

.post .post-content .post-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    box-orient: vertical;
    transition: 0.4s;
}

.post-lg .post-content .post-title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.post-lg .post-content .post-desc {
    -webkit-line-clamp: 5;
    line-clamp: 5;
}

.post-sm .post-content .post-title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.card .card-header {
    min-height:unset !important;
}

.card .card-header {
    padding: 0 1.5rem;
}

.card .card-body {
    padding: 1.5rem 1.5rem;
}
/*Tình trạng click vào menu không ăn action, phải click vào chữ*/
.menu-item .menu-link {
    padding: 0;
}

.menu-item .menu-link a {
    padding: 0.65rem 1rem;
    font-weight: 900 !important;
}

.menu-item .menu-link > .menu-title {
    padding: 0.65rem 1rem;
    font-weight: 900 !important;
}

.menu-item span.menu-link a {
    text-transform: uppercase;
}
.menu-item span.menu-link > .menu-title {
    text-transform: uppercase;
}

.last-mb-0 .post:last-child {
    margin-bottom: 0 !important;
}

/*Responsive table*/
table.dataTable > tbody > tr.child span.dtr-title {
    min-width: 170px;
}

ul.dtr-details li span.dtr-title {
    text-align: left;
}

/*_weather*/
.weather-temperature {
    font-size: 4.5rem;
    line-height: 1;
    position: relative;
}

.weather-temperature-sub {
    position: absolute;
    font-size: 15px;
}

.weather-temperature-sub-little {
    position: absolute;
    font-size: 10px;
}

.weather-icon {
    width: 70px;
    height: 70px;
}

.scrolltop {
    right:26px;
}

.ribbon.ribbon-custom .ribbon-label {
    right: unset;
    transform: translateX(4px) translateY(4px);
    border-radius: 0.475rem;
    padding: 2px 4px;
    max-width: calc(100% - 8px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    justify-content: start;
}
.ribbon.ribbon-custom .ribbon-label.ribbon-label-sm {
    font-size: 11px; 
}

.w-1-3 {
    width: calc(100% / 3);
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    to {
        background-position: -200% 0;
    }
}

@media (min-width: 992px) {
    .app-content {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .menu-lg-row > .menu-item > .menu-link:hover .menu-arrow:after {
        transform: rotateZ(-90deg);
    }
    .menu-lg-row > .menu-item.show.menu-dropdown > .menu-link .menu-arrow:after {
        transform: rotateZ(-90deg);
    }
    .symbol.symbol-lg-160px.symbol-1by2 .symbol-label {
        height: 160px;
        width: 320px;
    }
    .symbol.symbol-lg-200px.symbol-1by2 .symbol-label {
        height: 200px;
        width: 400px;
    }
}
@media (max-width: 991.98px) {
    .app-header .app-header-primary {
        height: auto;
    }
    .app-content {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .symbol.symbol-160px.symbol-1by2 .symbol-label {
        height: 160px;
        width: 320px;
    }
    .symbol.symbol-90px.symbol-1by2 .symbol-label {
        height: 90px;
        width: 180px;
    }
}

.min-h-44px {
    min-height: 44px !important;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.custom-tooltip {
    --bs-tooltip-bg: var(--bs-dark);
    --bs-tooltip-color: var(--bs-dark-inverse);
    --bs-tooltip-max-width: 100%;
    --bs-tooltip-opacity: .8;
}

.avt-mess {
    border-radius: 40px !important;
    border: 1px solid var(--bs-text-gray-300);
}

.ratio-w-h {
    width: 100%;
    height: auto;
}

.ratio-1by1 {
    aspect-ratio: 1/1;
}
.ratio-2by3 {
    aspect-ratio: 2/3;
}
.ratio-3by2 {
    aspect-ratio: 3/2;
}
.ratio-1by2 {
    aspect-ratio: 1/2;
}
.ratio-2by1 {
    aspect-ratio: 2/1;
}

.background-repeat-space {
    background-repeat: space;
}

.background-repeat-round {
    background-repeat: round;
}

/*product view*/
/*for mobile*/
@media only screen and (max-width: 768px) {
    /*[class*="col-"] {
        width: 100%;
    }*/
    /*.product-view-icon {
        display: none !important;
    }

    .product-view-list {
        display: flex !important;
    }*/

    .product.overlay .overlay-layer-product {
        opacity: 1;
        position: unset;
        flex-direction: row !important;
        margin: 6px;
        padding: 6px !important;
        box-shadow: none !important;
    }
}
/*for desktop*/
[data-kt-grid-col="true"].col-md-12 .product-view-icon {
    display: none !important;
}
[data-kt-grid-col="true"].col-md-12 .product-view-list {
    display: flex !important;
}
/*price font size*/
[data-kt-grid-col="true"].col-md-6 .product-price {
    font-size: 1.35rem !important;/*fs-3*/
}
[data-kt-grid-col="true"].col-md-4 .product-price {
    font-size: 1.25rem !important; /*fs-4*/
}
[data-kt-grid-col="true"].col-md-3 .product-price {
    font-size: 1.15rem !important; /*fs-5*/
}

/*currency*/
.currency-vnd {
    position: relative;
    font-size: 0.6em;
    line-height: 0;
    vertical-align: baseline;
    top: -0.4em;
}
.currency-vnd::before {
    content: ' ₫';
}

.product .product-content .product-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    box-orient: vertical;
}

.product .product-content .post-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    box-orient: vertical;
    transition: 0.4s;
}

.product-lg .product-content .product-title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.product-lg .product-content .product-desc {
    -webkit-line-clamp: 5;
    line-clamp: 5;
}

.product-sm .product-content .product-title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.product.overlay .overlay-layer-product {
    padding: 10px;
    height: auto;
    top: 10px;
    right: unset;
    bottom: unset;
    left: unset;
    inset-inline-end: 10px;

    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    transition: all .3s ease;
}

.tns-nav-active {
    border-color: var(--bs-primary) !important;
}
.border-bottom-left-radius-0 {
    border-bottom-left-radius: 0 !important;
}
.border-bottom-right-radius-0 {
    border-bottom-right-radius: 0 !important;
}
.border-top-left-radius-0 {
    border-top-left-radius: 0 !important;
}
.border-top-right-radius-0 {
    border-top-right-radius: 0 !important;
}

/*cart*/
.animation-blink {
    animation: animationBlink 2s steps(5, start) infinite;
}
.ribbon.ribbon-clip.ribbon-start .ribbon-label {
    top: 24px;
}
/*line-clamp*/
.line-clamp-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    box-orient: vertical;
}
.line-clamp-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    box-orient: vertical;
}
.line-clamp-3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    box-orient: vertical;
}
.line-clamp-4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-clamp: 4;
    box-orient: vertical;
}
.line-clamp-5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    line-clamp: 5;
    box-orient: vertical;
}