body{
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
}
.text-for-mobile{
    font-size: 10px;
}
div{
    unicode-bidi: isolate;
}

.shadow-bottom {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
.text-for-blue-text-mobile {
    font-size: 9px;
}

.text-for-content-pro-mobile {
    font-size: 4px;     
    text-align: justify;
}

.text-for-titile-content-pro-mobile {
    font-weight: bold;
    font-size: 9px;
    line-height: 1.5;
    
}

.define-height {
    height: 33%;
}

.bg-custom {
    background-image: url('./image/bg.jpg');
    background-size: cover;
}

.bg-custom-footer {
    background-image: url('./image/bg-bot.jpg');
    background-size: cover;
}
.text-for-content-pro-mobile-footer {
    font-size: 4px;  
}
.bg-footer{
    
    background-image: url('./image/bg-footer.jpg');
    background-size: cover;
}
.border-left{
    border-left:1px solid black
}
.container-x {
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 371px) {
    .w-28 {
        width: 7rem; /* Độ rộng phù hợp cho màn hình 320px */
    }
    .h-16 {
        height: 2rem; 
    }
    .title {
        font-size: 10px;
    }
    .text-for-blue-text-mobile {
        font-size: 4px;
        
    }
    
    .grid-custom {
        grid-template-columns: 30px 60px 30px 60px 30px 60px;
        gap: 0.5rem; 
    }
    .text-for-titile-content-pro-mobile{
        font-size: 4px;
    }
    .arrow-size{
        height: 28px;
        margin-top: 12px;
    }
    
    .bg-custom-footer {
        height: auto;
    }
    
    .size-icon{
        height: 9px;
        width: 9px;
        margin-right: 3px;
    }
}

@media (min-width: 371px) {
    .w-28 {
        width: 7rem; /* Độ rộng phù hợp cho màn hình 320px */
    }
    .h-16 {
        height: 2rem; 
    }
    .title {
        font-size: 10px;
    }
    .text-for-blue-text-mobile {
        font-size: 7px;
        
    }
    
    .grid-custom {
        grid-template-columns: 30px 60px 30px 60px 30px 60px;
        gap: 0.5rem; 
    }
    .text-for-titile-content-pro-mobile{
        font-size: 4px;
    }
    .arrow-size{
        height: 28px;
        margin-top: 12px;
    }
    
    .bg-custom-footer {
        height: auto;
    }
    
    .size-icon{
        height: 9px;
        width: 9px;
        margin-right: 3px;
    }
}
@media (min-width: 430px) {
    .w-28 {
        width: 10rem; /* Độ rộng 40 cho màn hình 430px */
    }
    .h-16 {
        height: 3rem; 
    }
    .grid-custom {
        grid-template-columns: 40.86px 80px 40.86px 80px 40.86px 80px;
        gap: 0.5rem; /* Tương đương với `gap-2` trong Tailwind */
    }
    .size-icon{
        height: 12px;
        width: 12px;
        margin-right: 4px;
    }
}