body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa;
}

.hero-bg {
    background-color: #fff;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: background-image 1s ease-in-out;
    position: relative;
}

/* Tối ưu hero-bg cho mobile */
@media (max-width: 768px) {
    .hero-bg {
        height: 50vh;
        min-height: 400px;
    }
}

/* Tối ưu hero-bg cho tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-bg {
        height: 55vh;
        min-height: 450px;
    }
}

/* Tối ưu hero-bg cho desktop */
@media (min-width: 1025px) {
    .hero-bg {
        height: 60vh;
        min-height: 500px;
        max-height: 700px;
    }
}

/* Tối ưu cho màn hình lớn (Full HD+) */
@media (min-width: 1920px) {
    .hero-bg {
        height: 65vh;
        max-height: 800px;
    }
}

.modal {
    transition: opacity 0.3s ease;
}

.modal-content {
    transition: transform 0.3s ease;
}

/* Custom animation for testimonials */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out forwards;
}

/* For visually hiding content while keeping it accessible to screen readers and SEO */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.text-gold {
    color: #c59d5f;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.scroller {
    animation: scroll 40s linear infinite;
}

.scroller-container {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

@media (max-width: 768px) {
  .scroller img {
    max-height: 4.5rem; 
  }
}