/* Set variable primary-color */
:root {
    --primary-color: red;
}

/*  Set font family roboto */
body {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}



/* Custom scroll bar */
.container-content-custom-subtle::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.empty-content::-webkit-scrollbar {
    display: block !important;
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 3px solid #f1f1f1;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* custom center by position absolute */
.center-by-position-absolute {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Animation */
* {
    transition: all 0.3s ease;
}

/* Custom word */
.break-word {
    word-wrap: break-word !important;
    word-break: break-word !important;
}

/* Custom width, height */
.width-16 {
    width: 16px !important;
}

.width-18 {
    width: 18px !important;
}

.width-20 {
    width: 20px !important;
}

.width-40 {
    width: 40px !important;
}

.width-60 {
    width: 60px !important;
}

.width-80 {
    width: 80px !important;
}

.width-90 {
    width: 90px !important;
}

.width-100 {
    width: 100px !important;
}

.width-110 {
    width: 110px !important;
}

.width-120 {
    width: 120px !important;
}

.width-140 {
    width: 140px !important;
}

.width-150 {
    width: 150px !important;
}

.width-160 {
    width: 160px !important;
}

.width-180 {
    width: 180px !important;
}

.width-200 {
    width: 200px !important;
}

.width-210 {
    width: 210px !important;
}

.width-220 {
    width: 220px !important;
}

.width-240 {
    width: 240px !important;
}

.width-320 {
    width: 320px !important;
}

.width-360 {
    width: 360px !important;
}

.width-420 {
    width: 420px !important;
}

.width-10vw {
    width: 10vw !important;
}

.width-20vw {
    width: 20vw !important;
}

.width-30vw {
    width: 30vw !important;
}

.width-40vw {
    width: 40vw !important;
}

.width-50vw {
    width: 50vw !important;
}

.width-50-percent {
    width: 50% !important;
}

.min-width-16 {
    min-width: 16px !important;
}

.min-width-40 {
    min-width: 40px !important;
}

.min-width-100 {
    min-width: 100px !important;
}

.min-width-110 {
    min-width: 110px !important;
}

.min-width-120 {
    min-width: 120px !important;
}


.min-width-140 {
    min-width: 140px !important;
}

.min-width-150 {
    min-width: 150px !important;
}

.min-width-160 {
    min-width: 160px !important;
}

.min-width-180 {
    min-width: 180px !important;
}

.min-width-190 {
    min-width: 190px !important;
}

.min-width-200 {
    min-width: 200px !important;
}

.min-width-280 {
    min-width: 280px !important;
}

.min-width-300 {
    min-width: 300px !important;
}


.left-fixed-10 {
    left: 10px !important;
}

.min-width-40 {
    min-width: 40px !important;
}

.min-width-60 {
    min-width: 60px !important;
}

.min-width-70 {
    min-width: 70px !important;
}

.min-width-80 {
    min-width: 80px !important;
}

.min-width-90 {
    min-width: 90px !important;
}

.min-width-100 {
    min-width: 100px !important;
}

.min-width-110 {
    min-width: 110px !important;
}

.min-width-120 {
    min-width: 120px !important;
}

.min-width-125 {
    min-width: 125px !important;
}

.min-width-130 {
    min-width: 130px !important;
}

.min-width-140 {
    min-width: 140px !important;
}

.min-width-150 {
    min-width: 150px !important;
}

.min-width-160 {
    min-width: 160px !important;
}

.min-width-180 {
    min-width: 180px !important;
}

.min-width-210 {
    min-width: 210px !important;
}

.min-width-240 {
    min-width: 240px !important;
}

.min-width-300 {
    min-width: 300px !important;
}

.min-width-360 {
    min-width: 360px !important;
}

.min-width-34px {
    min-width: 34px !important;
}

.max-width-90vw {
    max-width: 90vw !important;
}

.max-width-300px {
    max-width: 300px !important;
}

.mh-85vh {
    max-height: 85vh !important;
}

.min-height-100 {
    min-height: 100px !important;
}

.height-16 {
    height: 16px !important;
}

.height-18 {
    height: 18px !important;
}

.height-20 {
    height: 20px !important;
}

.height-40 {
    height: 40px !important;
}

.height-140 {
    height: 140px !important;
}

.height-150 {
    height: 150px !important;
}

.height-160 {
    height: 160px !important;
}

.height-200 {
    height: 200px !important;
}

.height-300 {
    height: 300px !important;
}

.min-height-16 {
    min-height: 16px !important;
}

.min-height-58 {
    min-height: 58px !important;
}

.min-height-200 {
    min-height: 200px !important;
}

.min-height-360 {
    min-height: 360px !important;
}

.min-height-540 {
    min-height: 540px !important;
}

.max-height-80vh {
    max-height: 80vh !important;
}


/* Custom pointer */
.cursor-pointer {
    cursor: pointer;
}

/* Custom text */
.text-decoration-none {
    text-decoration: none !important;
}

/* Custom font */
.fs-10 {
    font-size: 10px !important;
}

.fs-11 {
    font-size: 11px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-22 {
    font-size: 22px !important;
}

.fs-24 {
    font-size: 24px !important;
}

.fs-36 {
    font-size: 36px !important;
}

.fst-italic {
    font-style: italic !important;
}

.fw-900 {
    font-weight: 900 !important;
}

/* Custom border */
.border-table-right {
    border-right: 1px dotted #c9c9c9 !important;
}

.border-table-bottom {
    border-bottom: 1px dotted #c9c9c9 !important;
}

.border-table-bottom-add {
    border-bottom: 1px dotted red !important;
}

/* Custom box shadow */
.box-shadow-footer {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.box-shadow-header {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

/* Custom background */
.bg-color-table {
    background-color: #E2E3E5 !important;
}

.bg-color-footer {
    background-color: #f5f5f5 !important;
}

.bg-color-notification {
    background-color: #e9ecef !important;
}

.bg-color-list-group-notification {
    background-color: #fff7f7 !important;
}

/* Custom z-index */
.z-index-2 {
    z-index: 2 !important;
}

.z-index-10 {
    z-index: 10 !important;
}

.z-index-11 {
    z-index: 11 !important;
}

.z-index-12 {
    z-index: 12 !important;
}

.z-index-1000 {
    z-index: 1000 !important;
}

.z-index-999998 {
    z-index: 999998 !important;
}

/* Custom position */
.right-20px {
    right: 20px !important;
}

/* Custom padding */
.padding-top-32 {
    padding-top: 32px !important;
}

.padding-y-1px {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

.padding-x-0px {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.padding-x-4px {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.padding-left-12px {
    padding-left: 12px !important;
}

.padding-left-16px {
    padding-left: 16px !important;
}

.padding-left-20px {
    padding-left: 20px !important;
}

.padding-left-24px {
    padding-left: 24px !important;
}

.padding-left-36px {
    padding-left: 36px !important;
}

.padding-right-0px {
    padding-right: 0px !important;
}

/* custom margin */
.margin-left-12px {
    margin-left: 12px !important;
}

.margin-left-36px {
    margin-left: 36px !important;
}

/* Line custom */
.line-custom {
    border-bottom: 1px solid #e0e0e0;
    height: 1px;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Custom line height */
.lh-16 {
    line-height: 16px !important;
}

.lh-20px {
    line-height: 20px !important;
}

/* custom format text */
.pre-wrap {
    white-space: pre-wrap !important;
}

/* custom outline none */
.outline-none {
    outline: none !important;
}

.outline-none::focus {
    outline: none !important;
}

/* custom image */
.avatar-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* custom flex */
.flex-1 {
    flex: 1;
}

/* custom container webcamera */
#containerWebCamera {
    width: 100% !important;
    height: 100% !important;
    position: relative;
}

#containerWebCamera video,
#containerWebCamera canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transform: none !important;
}

/* Breakpoint min-width >= 768px */
@media (min-width: 768px) {

    /* Font size custom */
    .fs-1 {
        font-size: 2rem !important;
    }

    .fs-2 {
        font-size: 1.75rem !important;
    }

    .fs-3 {
        font-size: 1.5rem !important;
    }

    .fs-4 {
        font-size: 1.25rem !important;
    }

    .fs-5 {
        font-size: 1rem !important;
    }

    .fs-6 {
        font-size: 0.875rem !important;
    }
}

/* Key frame animation */
@keyframes glow-danger {
    0% {
        box-shadow: 0 0 5px rgba(255, 87, 34, 0.8), 0 0 10px rgba(255, 87, 34, 0.6);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 87, 34, 0.9), 0 0 40px rgba(255, 87, 34, 0.7);
    }

    100% {
        box-shadow: 0 0 5px rgba(255, 87, 34, 0.8), 0 0 10px rgba(255, 87, 34, 0.6);
    }
}

@keyframes glow-primary {
    0% {
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.8), 0 0 10px rgba(0, 123, 255, 0.6);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 123, 255, 0.9), 0 0 40px rgba(0, 123, 255, 0.7);
    }

    100% {
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.8), 0 0 10px rgba(0, 123, 255, 0.6);
    }
}

@keyframes glow-success {
    0% {
        box-shadow: 0 0 5px rgba(40, 167, 69, 0.8), 0 0 10px rgba(40, 167, 69, 0.6);
    }

    50% {
        box-shadow: 0 0 20px rgba(40, 167, 69, 0.9), 0 0 40px rgba(40, 167, 69, 0.7);
    }

    100% {
        box-shadow: 0 0 5px rgba(40, 167, 69, 0.8), 0 0 10px rgba(40, 167, 69, 0.6);
    }
}

.circle-danger-small {
    background-color: #dc3545;
    animation: glow-danger 1.5s infinite alternate;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.circle-danger-medium {
    background-color: #dc3545;
    animation: glow-danger 1.5s infinite alternate;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.circle-danger-large {
    background-color: #dc3545;
    animation: glow-danger 1.5s infinite alternate;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.circle-primary-small {
    background-color: #0d6efd;
    animation: glow-primary 1.5s infinite alternate;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.circle-primary-medium {
    background-color: #0d6efd;
    animation: glow-primary 1.5s infinite alternate;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}


.circle-primary-large {
    background-color: #0d6efd;
    animation: glow-primary 1.5s infinite alternate;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.circle-success-small {
    background-color: #198754;
    animation: glow-success 1.5s infinite alternate;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.circle-success-medium {
    background-color: #198754;
    animation: glow-success 1.5s infinite alternate;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.circle-success-large {
    background-color: #198754;
    animation: glow-success 1.5s infinite alternate;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

/* Ảnh trong gallery giao hàng — luôn lấp đầy ô vuông kể cả ảnh nhỏ hơn ô (đồng nhất mọi màn) */
.delivery-gallery-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    cursor: pointer;
}