.img-modal {
    height: 132px;
    width: 132px;
    border-radius: 5px;
    border: 1px solid #f5f5f5;
    background: #eaeaea;
    margin-bottom: 8px;
    object-fit: contain;
}
.input-code-modal {
    border-radius: 4px 0 0 4px;
    text-align: center;
    font-weight: 600;
    padding: 0.75rem;
    border: dashed 2px #1261a0;
    border-right: none;

    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity));
    width: 66.666667%;
}

.input-code-modal:focus-visible {
    outline: none !important;
}
.modal-container {
    position: absolute;
    top: 10%;
}
#copyButton {
    border-radius: 0 4px 4px 0 ;
    padding: 1rem 0;
    font-weight: 700;
    font-size: 16px;
    background: #1261a0;
    color: #fff;
}
#myModal {
    position: fixed;
}
.modal-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.5;
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity)) /* #111827 */;
}
.modal-close {
    display: flex !important;
    justify-content: center;
    position: absolute;
    cursor: pointer;
    border-radius: 9999px;
    top: 0.5rem /* 8px */;
    right: 0.25rem /* 4px */;
    width: 2rem /* 32px */;
    padding: 0.5rem;
}

.modal-close:hover {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}
.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.gap-5 {
    gap: 1.25rem;
}

.gap-6 {
    gap: 1.5rem;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

.col-span-3 {
    grid-column: span 3 / span 3;
}

.col-span-4 {
    grid-column: span 4 / span 4;
}

.col-span-5 {
    grid-column: span 5 / span 5;
}

.object-contain {
    object-fit: contain;
}

.object-cover {
    object-fit: cover;
}

.col-span-6 {
    grid-column: span 6 / span 6;
}

.col-span-7 {
    grid-column: span 7 / span 7;
}

.col-span-9 {
    grid-column: span 9 / span 9;
}

.col-span-8 {
    grid-column: span 8 / span 8;
}

.col-span-10 {
    grid-column: span 10 / span 10;
}

.col-span-12 {
    grid-column: span 12 / span 12;
}

.hidden {
    display: none;
}

.border-none {
    border: none;
}

.flex {
    display: flex;
}

.w-80 {
    width: 80%;
}

.w-60 {
    width: 60%;
}

.w-20 {
    width: 20%;
}

.w-18 {
    width: 18%;
}

.gap-2 {
    gap: 0.5rem /* 8px */;
}

.bg-\[\#4447ffd3\] {
    background-color: #4447ffd3;
}

.bg-\[\#094513d3\] {
    background-color: #094513d3;
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity)) /* #ffffff */;
}

.btn-deal {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
    --tw-gradient-from: #2f9d52 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(47 157 82 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #92cda3 var(--tw-gradient-to-position);
    border: none;
}

.btn-deal:active {
    --tw-scale-x: 0.95;
    --tw-scale-y: 0.95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
        rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
        scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.btn-deal span {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
    --tw-gradient-from: #235528d3 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(35 85 40 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #032d0d var(--tw-gradient-to-position);
}

.rounded-\[5px\] {
    border-radius: 5px;
}

.from-\[\#235528d3\] {
    --tw-gradient-from: #235528d3 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(35 85 40 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#2f9d52\] {
    --tw-gradient-from: #2f9d52 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(47 157 82 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-\[\#92cda3\] {
    --tw-gradient-to: #92cda3 var(--tw-gradient-to-position);
}

.to-\[\#032d0d\] {
    --tw-gradient-to: #032d0d var(--tw-gradient-to-position);
}

.active\:scale-95:active {
    --tw-scale-x: 0.95;
    --tw-scale-y: 0.95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
        rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
        scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.detail-btn {
    right: 0;
    top: -38px;
}

.detail-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}

@media (min-width: 768px) {
    .md\:flex {
        display: flex;
    }

    .md\:hidden {
        display: none;
    }

    .detail-btn {
        position: absolute;
    }
}

@media (min-width: 1024px) {
    .lg\:col-span-8 {
        grid-column: span 8 / span 8;
    }

    .lg\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity));
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.opacity-100 {
    opacity: 1;
}

.opacity-0 {
    opacity: 0;
}

.grid-rows-\[0fr\] {
    grid-template-rows: 0fr;
}

.grid-rows-\[1fr\] {
    grid-template-rows: 1fr;
}

.overflow-hidden {
    overflow: hidden;
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

#page {
    background-color: #fff;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.font-semibold {
    font-weight: 600;
}

.rounded-full {
    border-radius: 9999px;
}

.link-custom {
    --tw-text-opacity: 1;
    color: #005eb8;
}

.link-custom:hover {
    text-decoration-line: underline;
}

.text-base {
    font-size: 1rem !important;
}
.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
}
.page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
}
.page-link:hover {
    z-index: 2;
    color: #0056b3;
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6;
}
.page-link:focus {
    z-index: 3;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
.page-item:last-child .page-link {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.bg-row-header {
    background: #ededed;
}
.list-decimal {
    list-style: decimal
}
.list-style {
    padding-left: 2.5rem!important
}
.link-hover:hover {
    color: var(--color_primary);
}
.bg-img-store {
    background: #CBD5E1
}