/* CSS cải thiện độ tương phản và khả năng đọc - Điện Thoại Trần Tâm */

/* Cải thiện contrast cho gradient backgrounds - Updated to prevent overlap */
.bg-gradient-to-br,
.bg-gradient-to-r {
    position: relative;
}

/* Chỉ áp dụng overlay cho hero sections và CTA sections */
.hero-section.bg-gradient-to-r::before,
section.bg-gradient-to-r.from-blue-600::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
}

/* Đảm bảo content luôn hiển thị */
.bg-gradient-to-br > *,
.bg-gradient-to-r > * {
    position: relative;
    z-index: auto;
}

/* Cải thiện text trên background tối */
.text-blue-100,
.text-gray-100 {
    color: #f8fafc !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.text-white {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Cải thiện heading contrast */
h1, h2, h3, h4, h5, h6 {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Dark background headings */
.bg-gradient-to-br h1,
.bg-gradient-to-br h2,
.bg-gradient-to-br h3,
.bg-gradient-to-r h1,
.bg-gradient-to-r h2,
.bg-gradient-to-r h3 {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Cải thiện button contrast */
.bg-yellow-400,
.bg-yellow-500 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #1e3a8a !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.bg-yellow-400:hover,
.bg-yellow-500:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Newsletter specific improvements */
.newsletter-section {
    background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%) !important;
    position: relative;
    overflow: hidden;
}

.newsletter-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.newsletter-section > * {
    position: relative;
    z-index: 2;
}