/* ===== FONT OPTIMIZATION ===== */
/* Add font-display: swap to all fonts */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-solid-900.woff2') format('woff2');
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-brands-400.woff2') format('woff2');
}
/* General Styling */
html { scroll-behavior: smooth; 
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}
:root {
    --primary-color: #66b3ff; /* Light modern blue */
    --primary-dark: #3385ff;
    --secondary-color: #a0d9ff; /* Even lighter blue for background */
    --text-dark: #2c3e50;
    --text-light: #ecf0f1;
    --background-light: #f4f7f6;
    --card-background: #ffffff;
    --shadow-light: rgba(0, 0, 0, 0.08);
    --shadow-medium: rgba(0, 0, 0, 0.15);
}
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--background-light) 100%);
    color: var(--text-dark);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- Navbar --- */
.navbar {
    background-color: var(--card-background) !important; /* Added !important */
    box-shadow: 0 2px 10px var(--shadow-light) !important; /* Added !important */
    padding: 15px 25px !important; /* Added !important */
    display: flex !important; /* Added !important */
    justify-content: space-between !important; /* Added !important */
    align-items: center !important; /* Added !important */
    z-index: 1000 !important; /* Added !important */
    position: sticky !important; /* Added !important */
    top: 0 !important; /* Added !important */
}
.navbar .logo {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: var(--primary-dark) !important;
    text-decoration: none !important;
}
.navbar-links {
    display: flex !important;
    align-items: center !important;
}
.navbar-links a {
    color: var(--text-dark) !important;
    text-decoration: none !important;
    margin-left: 25px !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}
.navbar-links a:hover {
    color: var(--primary-color) !important;
}
.navbar-button {
    background-color: var(--primary-color) !important;
    color: white !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: background-color 0.3s ease !important;
    margin-left: 25px !important;
}
.navbar-button:hover {
    background-color: var(--primary-dark) !important;
}
.menu-toggle {
    display: none; /* Mặc định ẩn trên PC */
    background: none;
    border: none;
    font-size: 1.8rem; /* Kích thước icon */
    cursor: pointer;
    /* color: var(--text-dark); */ /* Nếu bạn có dòng này, hãy đảm bảo nó bị ghi đè */
    z-index: 1001; /* Đảm bảo nút nằm trên các yếu tố khác */
    padding: 0; /* Xóa padding mặc định của button */
}
.menu-toggle i {
    color: white; /* Đặt màu icon thành trắng */
    transition: color 0.3s ease; /* Hiệu ứng chuyển màu mượt mà */
}
/* --- Header / Hero Section --- */
.hero-section {
    background: linear-gradient(to right, var(--primary-dark), var(--primary-color)) !important;
    color: var(--text-light) !important;
    padding: 80px 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 15px var(--shadow-medium) !important;
    position: relative !important;
    overflow: hidden !important;
}
.hero-section::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    transform: rotate(45deg) !important;
    pointer-events: none !important;
}
.hero-section h1 {
    margin: 0 !important;
    font-size: 3.2rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}
.hero-section p {
    font-size: 1.3rem !important;
    margin-top: 15px !important;
    font-weight: 300 !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.hero-section .cta-button {
    display: inline-block !important;
    padding: 18px 40px !important;
    margin-top: 30px !important;
    background: var(--card-background) !important;
    color: var(--primary-dark) !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px var(--shadow-medium) !important;
}
.hero-section .cta-button:hover {
    background: var(--background-light) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px var(--shadow-medium) !important;
}

/* --- Main Content Container --- */
.container {
    max-width: 1000px !important;
    margin: 40px auto 0 auto !important;
    padding: 0 25px !important;
    flex-grow: 1 !important;
}

/* --- General Section Styling --- */
section {
    background: var(--card-background) !important;
    border-radius: 12px !important;
    padding: 40px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 6px 20px var(--shadow-light) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
section:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px var(--shadow-medium) !important;
}
h2 {
    color: var(--primary-dark) !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    font-size: 2rem !important;
    font-weight: 600 !important;
    border-bottom: 3px solid var(--primary-color) !important;
    padding-bottom: 10px !important;
    display: inline-block !important;
}
p {
    font-size: 1.1rem;
    color: var(--text-dark);
    line-height: 1.7;
}

/* --- Buttons --- */
.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 30px !important;
    margin-top: 25px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 1.1em !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    white-space: nowrap !important;
    background-color: var(--primary-color) !important;
    color: white !important;
    border: 2px solid var(--primary-color) !important;
}

.button:hover {
    background-color: var(--primary-dark) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}
.button .fas {
    margin-right: 8px !important;
}

/* --- Gallery Styles (from index.html) --- */
.gallery-section-header {
    text-align: center !important;
    margin-bottom: 25px !important;
    margin-top: 40px !important;
}

.gallery-section-header h3 {
    font-size: 1.8em !important;
    color: #333 !important;
    font-style: italic !important;
    font-weight: 500 !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

.gallery-container {
    max-width: 960px !important;
    margin: 40px auto !important;
    padding: 0 25px !important;
    box-sizing: border-box !important;
}

.gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    justify-content: center !important;
}

.gallery-item {
    background: var(--card-background) !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 25px var(--shadow-medium) !important;
    border: 5px solid var(--card-background) !important;
    overflow: hidden !important;
    position: relative !important;
    cursor: pointer !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.gallery-item:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 12px 30px var(--shadow-medium) !important;
}

.gallery-item img {
    width: 100% !important;
    height: 250px !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 10px !important;
}

.gallery-item .caption {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    padding: 10px !important;
    text-align: center !important;
    font-size: 0.9em !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.gallery-item:hover .caption {
    opacity: 1 !important;
}

/* --- Lightbox/Pop-up Styles (from index.html) --- */
.lightbox {
    display: none !important;
    position: fixed !important;
    z-index: 9999 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: auto !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    animation: fadeIn 0.3s forwards !important;
}

.lightbox-content {
    margin: auto !important;
    display: block !important;
    max-width: 90% !important;
    max-height: 90vh !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    animation: zoomIn 0.3s forwards !important;
    pointer-events: none !important;
}

#lightbox-caption {
    text-align: center !important;
    color: #ccc !important;
    padding: 10px 0 !important;
    font-size: 1.2em !important;
}

.close-button {
    position: absolute !important;
    top: 20px !important;
    right: 35px !important;
    color: #fff !important;
    font-size: 40px !important;
    font-weight: bold !important;
    transition: 0.3s !important;
    cursor: pointer !important;
    z-index: 10000 !important;
}

.close-button:hover,
.close-button:focus {
    color: #bbb !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Image container (16x9 aspect ratio) */
.image-container {
    margin: 40px 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
        
.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Call to Action Bottom Section (from index.html) --- */
.cta-bottom-section {
    text-align: center !important;
    padding: 40px !important; /* ĐÃ CHỈNH SỬA: Đồng bộ với padding mặc định của section */
    background: linear-gradient(to right, var(--secondary-color), var(--primary-color)) !important;
    color: var(--text-light) !important;
    border-radius: 12px !important;
    margin-top: 50px !important;
    
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.cta-bottom-section h2 {
    color: var(--text-light) !important;
    border-bottom-color: var(--text-light) !important;
    font-size: 2.2rem !important;
}
.cta-bottom-section p {
    color: var(--text-light) !important;
    max-width: 700px !important;
    margin: 20px auto 30px !important;
}
.cta-bottom-section .action-button {
    display: inline-block !important;
    padding: 18px 40px !important;
    background: var(--card-background) !important;
    color: var(--primary-dark) !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}
.cta-bottom-section .action-button:hover {
    background: var(--background-light) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

/* --- Footer --- */
footer {
    text-align: center !important;
    background: linear-gradient(to right, var(--primary-dark), var(--primary-color));
    color: var(--text-light) !important;
    padding: 25px !important;
    font-size: 0.9rem !important;
    margin-top: 0 !important;
    box-shadow: 0 -4px 15px var(--shadow-medium) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
.footer-links {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
}
.footer-links a {
    color: var(--text-light) !important;
    text-decoration: none !important;
    margin: 0 8px !important;
    transition: color 0.3s ease !important;
    font-size: 0.9em !important;
    white-space: nowrap !important;
}
.footer-links a:hover {
    color: var(--secondary-color) !important;
}
.footer-links .separator {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.9em !important;
}
.social-links {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}
.social-links a {
    color: var(--text-light) !important;
    font-size: 1.5rem !important;
    margin: 0 10px !important;
    transition: color 0.3s ease, transform 0.2s ease !important;
}
.social-links a:hover {
    color: var(--secondary-color) !important;
    transform: translateY(-2px) !important;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .navbar-links a {
        margin-left: 15px !important;
    }
    .hero-section h1 {
        font-size: 2.5rem !important;
    }
    .hero-section p {
        font-size: 1.1rem !important;
    }
    h2 {
        font-size: 1.7rem !important;
    }
    p {
        font-size: 1rem !important;
    }
    .hero-section .cta-button, .cta-bottom-section .action-button {
        padding: 14px 30px !important;
        font-size: 1.05rem !important;
    }
    section {
        padding: 30px !important;
    }
    .cta-bottom-section {
        padding: 30px !important;
    }
    .cta-bottom-section h2 {
        font-size: 1.8rem !important;
    }
    /* Gallery adjustments */
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
    .gallery-item img {
        height: 300px !important;
    }
}

@media (max-width: 768px) {
    .navbar {
        flex-wrap: wrap !important;
        padding: 10px 15px !important;
    }
    .navbar .logo {
        font-size: 1.5rem !important;
    }
    .menu-toggle {
        display: block !important;
    }
    @media (prefers-color-scheme: dark) {
        .navbar .menu-toggle i {
            color: white !important; /* Buộc màu trắng khi ở chế độ tối */
        }
    }
    .navbar-links {
        display: none !important;
        flex-direction: column !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 10px !important;
    }
    .navbar-links.active {
        display: flex !important;
    }
    .navbar-links a {
        margin: 10px 0 !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid rgba(0,0,0,0.1) !important;
        width: 100% !important;
    }
    .navbar-links a:last-child {
        border-bottom: none !important;
    }
    .navbar-button {
        margin: 10px auto !important;
        width: calc(100% - 40px) !important;
    }

    .hero-section {
        padding: 50px 15px !important;
    }
    .hero-section h1 {
        font-size: 2rem !important;
        line-height: 1.3; /* Rất nên đặt line-height rõ ràng ở đây */
        /* --- Cập nhật min-height này --- */
        min-height: 125px; /* Hoặc 130px để an toàn hơn */
    }
    .hero-section p {
        font-size: 1rem !important;
    }
    .container {
        padding: 0 15px !important;
    }
    section {
        padding: 25px !important;
    }
    h2 {
        font-size: 1.5rem !important;
    }
    /* Gallery adjustments */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    .gallery-item img {
        height: 220px !important;
    }
    .close-button {
        font-size: 30px !important;
        top: 15px !important;
        right: 20px !important;
    }
    .cta-bottom-section {
        margin-top: 40px !important;
    }
    .cta-bottom-section h2 {
        font-size: 1.6rem !important;
    }
    footer {
        padding: 15px 10px; /* Bỏ !important nếu bạn muốn linh hoạt hơn, hoặc giữ nếu đây là padding cố định */
        font-size: 0.8rem; /* Bỏ !important */
    }

    .footer-links {
        /* RẤT QUAN TRỌNG: Loại bỏ flex-direction: column !important; */
        /* Thay vào đó, chúng ta sẽ để nó mặc định là row và dùng flex-wrap */
        flex-direction: row; /* Đảm bảo các mục nằm trên hàng ngang */
        flex-wrap: wrap; /* Cho phép xuống dòng linh hoạt */
        justify-content: center; /* Đảm bảo căn giữa khi xuống dòng */
        gap: 10px; /* Giảm khoảng cách giữa các link trên mobile */
        padding: 0 15px; /* Thêm padding ngang cho container */
        /* Bỏ gap: 5px !important; nếu có */
    }
    
    .footer-links a {
        font-size: 0.85rem; /* Giảm kích thước chữ một chút để phù hợp hơn trên mobile */
        white-space: nowrap; /* Đảm bảo văn bản trong link không bị xuống dòng */
    }

    .footer-links .separator {
        /* RẤT QUAN TRỌNG: Loại bỏ display: none !important; */
        display: inline; /* Hiển thị lại dấu phân cách */
        margin: 0 5px; /* Điều chỉnh khoảng cách quanh dấu phân cách */
    }
}
@media (max-width: 480px) {
    .hero-section h1 {
        font-size: 1.8rem !important;
    }
    .hero-section p {
        font-size: 0.95rem !important;
    }
    .hero-section .cta-button, .cta-bottom-section .action-button {
        padding: 12px 25px !important;
        font-size: 1rem !important;
    }
    h2 {
        font-size: 1.3rem !important;
    }
    p {
        font-size: 0.9rem !important;
    }
    /* Gallery adjustments */
    .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .gallery-item img {
        height: 250px !important;
    }
    footer {
            padding: 12px 10px; /* Giảm padding tổng thể của footer */
            font-size: 0.75rem; /* Có thể giảm font nhỏ hơn nữa nếu cần */
        }

        .footer-links {
            gap: 8px; /* Giảm gap hơn nữa cho màn hình rất nhỏ */
            padding: 0 10px;
        }
        .footer-links a {
            font-size: 0.78rem; /* Giảm kích thước chữ hơn nữa */
        }
        .footer-links .separator {
            margin: 0 3px; /* Giảm khoảng cách quanh dấu phân cách */
        }
}

/* --- CSS for how-it-works.html sections --- */
/* How-to Guide Section (🚀 FansHub Downloader: Your Step-by-Step Guide) */
#how-to-guide {
    padding: 60px 0 !important;
    text-align: center !important;
    background-color: var(--background-light) !important;
}

#how-to-guide h2 {
    margin-bottom: 40px !important;
    color: var(--primary-dark) !important;
}

.steps-grid-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.steps-grid-container .grid-item {
    background-color: var(--card-background) !important;
    padding: 30px !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 15px var(--shadow-light) !important;
    transition: transform 0.3s ease !important;
}

.steps-grid-container .grid-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 20px var(--shadow-medium) !important;
}

.step-number-circle {
    width: 60px !important;
    height: 60px !important;
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 1.8em !important;
    font-weight: 700 !important;
    margin: 0 auto 20px auto !important;
}

.steps-grid-container .grid-item h4 {
    color: var(--primary-dark) !important;
    margin-bottom: 15px !important;
    font-size: 1.3em !important;
}

.steps-grid-container .grid-item p {
    color: var(--text-dark) !important;
    line-height: 1.6 !important;
}

/* Frequently Asked Questions Section */
.faq-section {
    padding: 60px 40px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    background-color: var(--card-background) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px var(--shadow-light) !important;
    margin-bottom: 30px !important;
    text-align: left !important;
}

.faq-section h2 {
    text-align: center !important;
    margin-bottom: 40px !important;
    color: var(--primary-dark) !important;
}

.faq {
    background-color: var(--background-light) !important;
    padding: 20px 25px !important;
    margin-bottom: 15px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.faq strong {
    display: block !important;
    font-size: 1.1em !important;
    color: var(--primary-dark) !important;
    margin-bottom: 8px !important;
}

.faq:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.faq p {
    color: var(--text-dark) !important;
    line-height: 1.6 !important;
}

/* What Our Users Are Saying Section (Testimonials) */
.testimonials-section {
    padding: 60px 40px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    background-color: var(--card-background) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px var(--shadow-light) !important;
    margin-bottom: 30px !important;
    text-align: left !important;
}

.testimonial-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    max-width: 1000px !important;
    margin: 40px auto 60px auto !important;
    padding: 0 20px !important;
}

.testimonial-item {
    background-color: var(--background-light) !important;
    padding: 30px !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 15px var(--shadow-light) !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.testimonial-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 20px var(--shadow-medium) !important;
}

.testimonial-item p {
    font-style: italic !important;
    color: var(--text-dark) !important;
    margin-bottom: 20px !important;
    line-height: 1.7 !important;
}

.testimonial-item strong {
    display: block !important;
    text-align: right !important;
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    font-size: 0.95em !important;
}

/* Responsive Adjustments for how-it-works sections */
@media (max-width: 992px) {
    .steps-grid-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .steps-grid-container {
        grid-template-columns: 1fr !important;
        padding: 0 15px !important;
    }

    .faq-section {
        padding: 40px 20px !important;
        max-width: unset !important;
    }

    .testimonial-grid {
        grid-template-columns: 1fr !important;
        padding: 0 15px !important;
    }
    .testimonials-section {
        padding: 40px 20px !important;
    }
}

/* --- CSS for about.html specific sections --- */
/* Minimal Hero for About Page */
.hero-section.minimal-hero {
    background: none !important;
    text-align: center !important;
    padding: 80px 20px 60px 20px !important;
}

.hero-section.minimal-hero h1 {
    color: var(--primary-dark) !important;
    font-size: 2.8em !important;
    margin-bottom: 15px !important;
}

.hero-section.minimal-hero p {
    color: var(--text-dark) !important;
    max-width: 700px !important;
    margin: 0 auto 30px auto !important;
    font-size: 1.1em !important;
}

/* General Content Wrapper (for text sections) */
.content-wrapper {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.content-wrapper h2 {
    text-align: center !important;
    margin-bottom: 30px !important;
}

.content-wrapper p {
    margin-bottom: 1em !important;
    text-align: justify !important;
}

/* Values Grid (Lưới hiển thị các giá trị cốt lõi) */
.values-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    margin-top: 40px !important;
}

.value-item {
    background-color: var(--card-background) !important;
    padding: 25px !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 15px var(--shadow-light) !important;
    text-align: center !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.value-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 20px var(--shadow-medium) !important;
}

.value-item h3 {
    color: var(--primary-color) !important;
    margin-bottom: 10px !important;
    font-size: 1.25em !important;
}

.value-item p {
    color: var(--text-dark) !important;
    font-size: 0.95em !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/* Responsive adjustments for about.html */
@media (max-width: 992px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .hero-section.minimal-hero h1 {
        font-size: 2.2em !important;
    }
    .hero-section.minimal-hero p {
        font-size: 1em !important;
    }
    .content-wrapper {
        padding: 0 15px !important;
    }
    .values-grid {
        grid-template-columns: 1fr !important;
    }
}
/* --- Styles for contact.html specific sections --- */

/* Contact Section general styles */
.contact-section {
    text-align: center;
}

.contact-section .section-intro-text {
    max-width: 800px;
    margin: 0 auto 40px auto;
    font-size: 1.1em;
    color: var(--text-dark);
}

/* Contact Methods Grid */
.contact-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.contact-method-item {
    background-color: var(--background-light);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px var(--shadow-light);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-method-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px var(--shadow-medium);
}

.contact-method-item i {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.contact-method-item h3 {
    color: var(--primary-dark);
    margin-bottom: 10px;
    font-size: 1.25em;
}

.contact-method-item p {
    color: var(--text-dark);
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 20px;
    margin-bottom: 10px;
    word-spacing: normal;
    letter-spacing: normal;
}

.contact-method-item .small-button {
    padding: 10px 25px; /* Smaller button for method items */
    font-size: 0.95em;
    margin-top: 10px;
}

/* Contact Form Section */
.contact-form-section {
    margin-top: 50px;
    background-color: var(--background-light);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px var(--shadow-light);
}

.contact-form-section h3 {
    text-align: center;
    color: var(--primary-dark);
    margin-bottom: 20px;
    font-size: 1.8em;
}

.contact-form-section .form-intro-text {
    max-width: 700px;
    margin: 0 auto 30px auto;
    text-align: center;
    font-size: 1em;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-dark);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: calc(100% - 20px); /* Account for padding */
    padding: 12px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    color: var(--text-dark);
    background-color: var(--card-background);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(102, 179, 255, 0.4);
    outline: none;
}

.contact-form textarea {
    resize: vertical; /* Allow vertical resizing only */
    min-height: 100px;
}

.contact-form .action-button {
    width: auto;
    display: block; /* Make the button take full width on smaller screens */
    margin: 30px auto 0 auto; /* Center button */
}

/* Responsive Adjustments for contact.html */
@media (max-width: 768px) {
    .contact-methods-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
    .contact-method-item {
        padding: 25px;
    }
    .contact-form-section {
        padding: 30px 20px;
    }
    .contact-form .action-button {
        width: 100%;
        max-width: 300px; /* Limit button width on larger mobile */
    }
}
@media (max-width: 480px) {
    .contact-form-section {
        padding: 20px 15px;
    }
}
/* --- Styles for creators.html specific sections --- */

/* Tag Filter Section */
.tag-filter-section {
    text-align: center;
    padding-top: 40px; /* Thêm padding trên để tách biệt khỏi hero */
    padding-bottom: 20px; /* Tùy chỉnh khoảng cách với phần grid bên dưới */
}

.tag-filter-section h2 {
    margin-bottom: 30px;
}

.tag-buttons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Khoảng cách giữa các nút tag */
    margin-top: 20px;
}

.tag-button {
    background-color: var(--background-light);
    color: var(--primary-dark);
    border: 1px solid var(--primary-color);
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95em;
    white-space: nowrap; /* Ngăn chặn wrap chữ trên nút */
}

.tag-button:hover {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.tag-button.active {
    background-color: var(--primary-dark);
    color: white;
    border-color: var(--primary-dark);
    box-shadow: 0 4px 12px var(--shadow-medium);
    transform: translateY(-2px);
}

/* Creator Posts Grid */
.creator-posts-section {
    padding-top: 40px;
}

.creator-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 cột trên desktop */
    gap: 30px;
    margin-top: 20px;
}

.creator-card {
    /* Thẻ A giờ là chính thẻ card */
    display: block; /* Để nó hoạt động như một khối */
    background-color: var(--card-background); /* Nền trắng (sẽ bị che bởi ảnh) */
    border-radius: 12px;
    box-shadow: 0 6px 20px var(--shadow-light);
    overflow: hidden; /* Quan trọng để bo tròn góc cho ảnh và lớp phủ */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none; /* Bỏ gạch chân mặc định của thẻ link */
    color: inherit; /* Kế thừa màu chữ từ body hoặc cha */
    border: 1px solid var(--primary-light);
    /* Tạo khung card với tỷ lệ 9:16 */
    position: relative; /* Quan trọng cho việc định vị ảnh và lớp phủ */
    width: 100%;
    padding-bottom: calc(100% / 9 * 16); /* Padding dưới để tạo tỷ lệ 9:16 */
    height: 0; /* Đặt chiều cao thật là 0 để padding-bottom kiểm soát */
}

.creator-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px var(--shadow-medium);
    border-color: var(--primary-color);
}

.creator-thumbnail { /* Ảnh thumbnail */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh phủ đầy khung và không bị méo */
}

.card-overlay-content { /* Lớp phủ cho text */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px; /* Khoảng cách đệm cho nội dung */
    color: white; /* Màu chữ */
    box-sizing: border-box; /* Đảm bảo padding không làm tràn */

    /* Lớp phủ gradient hiện đại */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    /* Gradient từ đen mờ ở dưới lên trong suốt ở trên */
    transition: background 0.3s ease; /* Hiệu ứng mượt mà */
    border-bottom-left-radius: 12px; /* Đảm bảo góc dưới bo tròn khớp với card */
    border-bottom-right-radius: 12px;
    min-height: 150px; /* Điều chỉnh chiều cao cố định này cho phù hợp với nội dung của bạn */
    overflow: hidden; /* Quan trọng: ẩn nội dung nếu tràn ra khỏi chiều cao cố định */
    display: flex; /* Dùng flexbox để sắp xếp nội dung bên trong */
    flex-direction: column;
    justify-content: flex-start; /* Đẩy nội dung xuống cuối */
    gap: 5px; /* Thêm khoảng cách giữa các phần tử (h3, p, tags) */
}

/* Các kiểu chữ trong lớp phủ */
.card-overlay-content .creator-name { /* h3 */
    color: white;
    margin: 0; /* Xóa margin để gap kiểm soát */
    font-size: 1.4em;
    line-height: 1.3;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Thêm bóng chữ cho nổi bật */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Giữ tiêu đề trên một dòng để tránh bị chia đôi chữ */
}

.card-overlay-content .creator-excerpt { /* p */
    color: white; /* Đảm bảo màu trắng */
    font-size: 0.95em;
    line-height: 1.6;
    margin: 0; /* Xóa margin để gap kiểm soát */

    /* Cắt chữ và thêm "..." */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* Tăng lên 3 dòng để có thêm thông tin, hoặc giữ 2 tùy ý */
    -webkit-box-orient: vertical;
    text-align: left; /* **THÊM DÒNG NÀY: Đảm bảo văn bản được căn trái** */
    word-break: break-word;
}

.card-overlay-content .card-tags {
    margin-top: auto;
    margin-bottom: 0; /* Loại bỏ margin-bottom nếu không có button */
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Khoảng cách giữa các tag nhỏ hơn */
}

.card-overlay-content .tag-label {
    background-color: rgba(255, 255, 255, 0.2); /* Nền tag bán trong suốt */
    color: white;
    padding: 3px 8px; /* Kích thước tag nhỏ gọn */
    border-radius: 15px;
    font-size: 0.75em;
    font-weight: 600;
    white-space: nowrap;
}

.creator-card .card-button {
    align-self: flex-start; /* Căn nút về phía trái */
    padding: 10px 25px;
    font-size: 0.95em;
    margin-top: auto; /* Đẩy nút xuống dưới cùng của card-content */
    
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .creator-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 cột trên tablet/màn hình nhỏ hơn desktop */
        gap: 25px;
    }
}
@media (max-width: 992px) { /* Cho máy tính bảng và màn hình nhỏ hơn */
    .creator-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cột */
        gap: 20px;
    }
}

@media (max-width: 576px) { /* Cho điện thoại di động */
    .creator-grid {
        grid-template-columns: repeat(1, 1fr); /* 1 cột */
        gap: 20px;
    }
    .creator-card {
        padding-bottom: 150%; /* Tỷ lệ ảnh có thể điều chỉnh cho di động nếu cần (ví dụ: 3:4) */
    }
    .card-overlay-content {
        height: 140px; /* Điều chỉnh chiều cao overlay cho mobile nếu cần */
        padding: 10px;
    }
    .card-overlay-content .creator-name {
        font-size: 1.3em;
    }
    .card-overlay-content .creator-excerpt {
        font-size: 0.9em;
    }
}
@media (max-width: 768px) {
    .tag-buttons-container {
        gap: 8px;
    }
    .tag-button {
        padding: 8px 15px;
        font-size: 0.9em;
    }
    .creator-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cột trên mobile */
        gap: 20px;
    }
    /* Kích thước text trên mobile */
    .card-overlay-content .creator-name {
        font-size: 1.25em;
    }
    .card-overlay-content .creator-excerpt {
        font-size: 0.85em;
    }
    .card-overlay-content .tag-label {
        font-size: 0.7em;
    }
}

@media (max-width: 480px) { /* Optional: 1 cột trên mobile siêu nhỏ */
    .creator-grid {
        grid-template-columns: 1fr;
    }
}
/* General Link Styling (apply to all 'a' tags unless more specific styles exist) */
        a {
            color: var(--primary-color); /* Use your primary blue */
            text-decoration: none; /* Remove default underline */
            transition: color 0.3s ease, text-decoration 0.3s ease;
        }

        a:hover {
            color: var(--primary-dark); /* Darker blue on hover */
            text-decoration: underline; /* Add underline on hover for clarity */
        }

        /* Creator Tags Styling */
        .creator-tags .tag {
            background-color: var(--primary-color); /* Use primary color for tag background */
            color: var(--text-light); /* White text for better contrast */
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85em;
            margin: 5px;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

        .creator-tags .tag:hover {
            background-color: var(--primary-dark);
        }

        /* FAQ Section Styling */
        .faq-container {
            margin-top: 30px;
            border-top: 1px solid var(--secondary-color);
            padding-top: 20px;
        }

        .faq-item {
            background-color: var(--card-background);
            border: 1px solid var(--secondary-color);
            border-radius: 8px;
            margin-bottom: 15px;
            box-shadow: 0 4px 10px var(--shadow-light);
            overflow: hidden; /* Ensures border-radius applies correctly to opened content */
        }

        .faq-question {
            display: block; /* Make the summary fill the width */
            padding: 18px 25px;
            font-weight: 600;
            color: var(--text-dark);
            cursor: pointer;
            position: relative;
            user-select: none; /* Prevent text selection on click */
            background-color: var(--background-light); /* Light background for question */
            transition: background-color 0.3s ease;
        }

        .faq-question:hover {
            background-color: var(--secondary-color); /* Slight hover effect */
        }

        /* Arrow icon for FAQ */
        #faqs {
            margin-top: 20px !important;/* Hoặc giá trị bạn chọn */
        }
        .faq-question::after {
            content: '\f078'; /* Unicode for chevron-down icon */
            font-family: 'Font Awesome 6 Free'; /* Use Font Awesome icon font */
            font-weight: 900; /* Solid icon style */
            position: absolute;
            right: 25px;
            top: 50%;
            transform: translateY(-50%) rotate(0deg);
            transition: transform 0.3s ease;
        }

        .faq-item[open] .faq-question::after {
            transform: translateY(-50%) rotate(180deg); /* Rotate arrow when open */
        }

        .faq-answer {
            padding: 0 25px 20px 25px; /* Adjust padding to align with question */
            color: var(--text-dark);
            font-size: 0.95em;
            line-height: 1.6;
            max-height: 0; /* Hidden by default */
            overflow: hidden;
            transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* Smooth slide effect */
        }

        .faq-item[open] .faq-answer {
            max-height: 200px; /* Adjust as needed, ensure it's larger than content */
            padding: 0 25px 20px 25px; /* Apply padding when open */
        }

        /* Specific image styling for content images */
        .content-image {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 5px 15px var(--shadow-medium);
            margin: 25px 0;
            display: block; /* Center image if needed */
            margin-left: auto;
            margin-right: auto;
        }
        /* Table of Contents specific styling */
        .table-of-contents {
            list-style: none; /* Remove default bullet points */
            padding: 0;
            margin: 20px 0 40px 0;
            background-color: var(--card-background);
            border-radius: 8px;
            box-shadow: 0 4px 10px var(--shadow-light);
            padding: 20px;
        }

        .table-of-contents li {
            margin-bottom: 10px;
        }

        .table-of-contents li a {
            font-weight: 500;
            color: var(--text-dark); /* Darker text for TOC links */
            display: block;
            padding: 5px 0;
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .table-of-contents li a:hover {
            color: var(--primary-dark);
            transform: translateX(5px);
            text-decoration: none; /* Keep underline off unless explicit for TOC */
        }

        /* Social Media Icons */
        .social-media-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
            margin-bottom: 40px;
        }

        .social-media-links a {
            font-size: 2.2em; /* Larger icons */
            color: var(--primary-color);
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .social-media-links a:hover {
            color: var(--primary-dark);
            transform: translateY(-5px);
            text-decoration: none; /* No underline on social icons */
        }

        /* Adjustments for smaller screens */
        @media (max-width: 768px) {
    /* ... các quy tắc khác đã có trong media query này ... */

    .faq-section {
        padding: 40px 20px; /* Giảm padding ngang cho toàn bộ phần FAQ trên tablet/di động */
    }

    .faq {
        /* Điều chỉnh padding cho từng mục FAQ */
        padding: 15px 20px; /* Giảm padding ngang so với bản PC */
    }

    /* Đảm bảo văn bản trong câu trả lời xuống dòng đúng cách */
    .faq p {
        word-wrap: break-word;   /* Ngắt từ dài để tránh tràn ra ngoài */
        overflow-wrap: break-word; /* Phiên bản hiện đại hơn của word-wrap */
    }

    /* Giữ quy tắc cho mũi tên nếu bạn vẫn dùng ::after */
    .faq-question::after {
        right: 15px; /* Giữ vị trí của icon mũi tên */
    }
}

/* Trong @media (max-width: 480px) */
@media (max-width: 480px) {
    /* ... các quy tắc khác đã có trong media query này ... */

    .faq-section {
        padding: 30px 15px; /* Giảm padding ngang hơn nữa cho màn hình điện thoại nhỏ */
    }

    .faq {
        padding: 10px 15px; /* Giảm padding ngang hơn nữa cho từng mục FAQ */
    }
}

/* CSS cho ảnh profile */
.creator-profile-hero {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.creator-profile-frame {
    position: relative;
    width: 186px; /* Giảm kích thước khung xuống một chút để phù hợp viền 3px */
    height: 186px; /* Giảm kích thước khung xuống một chút để phù hợp viền 3px */
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px auto;
    /* Loại bỏ padding vì viền đã được tạo bởi ::before */
    /* padding: 3px; */
    background-color: #fff; /* Màu nền bên trong viền */
    /* Thêm box-shadow nhẹ để viền mượt hơn (tùy chọn) */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* CSS cho pseudo-element tạo viền */
.creator-profile-frame::before {
    content: '';
    position: absolute;
    top: -3px; /* Giảm offset xuống -3px để viền dày khoảng 3px */
    left: -3px; /* Giảm offset xuống -3px để viền dày khoảng 3px */
    right: -3px; /* Giảm offset xuống -3px để viền dày khoảng 3px */
    bottom: -3px; /* Giảm offset xuống -3px để viền dày khoảng 3px */
    border-radius: 50%;

    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888, #8a40c9, #6a7eff, #489ef0, #22cff0);
    background-size: 400% 400%;

    /* MASK ĐÃ ĐIỀU CHỈNH ĐỂ VIỀN DÀY KHOẢNG 3PX */
    mask: radial-gradient(circle at center, transparent calc(90px - 3px), black calc(90px - 3px));
    -webkit-mask: radial-gradient(circle at center, transparent calc(90px - 3px), black calc(90px - 3px));
    
    animation: gradientBorder 3s linear infinite;
    z-index: 0; /* Giữ nguyên z-index */
}

/* Keyframes cho animation của viền */
@keyframes gradientBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* CSS cho video responsive */
.video-container {
    position: relative;
    width: 100%;
    /* Tỷ lệ khung hình 16:9 (chiều cao = 9/16 chiều rộng).
       Nếu video của bạn có tỷ lệ khác, hãy điều chỉnh giá trị này.
       Ví dụ 4:3 = 75%; 21:9 = 42.85%; */
    padding-bottom: 56.25%; /* 9 / 16 = 0.5625 = 56.25% */
    height: 0; /* Đặt chiều cao là 0 để padding-bottom kiểm soát chiều cao */
    overflow: hidden; /* Quan trọng để video không tràn ra ngoài khi bo góc */
    border-radius: 10px; /* Bo góc để khớp với thiết kế */
    box-shadow: 0 4px 10px var(--shadow-light); /* Đổ bóng nhẹ */
    margin-bottom: 20px; /* Tạo khoảng cách dưới video */
}

.video-container iframe {
    position: absolute; /* Đặt iframe tuyệt đối so với .video-container */
    top: 0;
    left: 0;
    width: 100%; /* Iframe lấp đầy chiều rộng của container */
    height: 100%; /* Iframe lấp đầy chiều cao của container */
    border: 0; /* Xóa viền mặc định của iframe */
    border-radius: 10px; /* Đảm bảo video cũng được bo góc */
}

/* Media query để điều chỉnh kích thước trên di động nếu cần thiết */
@media (max-width: 768px) {
    .video-container {
        margin-left: 0; /* Đảm bảo căn lề trái trên mobile */
        margin-right: 0; /* Đảm bảo căn lề trái trên mobile */
        border-radius: 5px; /* Có thể làm bo góc ít hơn trên mobile */
    }
    .video-container iframe {
        border-radius: 5px;
    }
}
.content-section{
    margin-bottom: 0 !important;
}
/* Cập nhật .creator-cta-bottom-section */
.creator-cta-bottom-section {
    text-align: left !important;
    padding: 30px 0 !important; /* Giữ padding trên/dưới, bỏ padding trái/phải */
    background: none !important;
    color: inherit !important;
    border-radius: 0 !important;
    margin-top: 25px !important; /* Giảm khoảng cách với section phía trên từ 30px xuống 25px */
    box-shadow: none !important;
    margin: 0 0 0 !important;
}

.creator-cta-bottom-section h2 {
    color: var(--primary-dark) !important; /* Tiêu đề màu xanh */
    font-size: 2.2rem !important;
    /* Thêm đường gạch chân màu xanh, độ dày 2px */
    border-bottom: 3px solid var(--primary-color) !important;
    padding-bottom: 5px !important; /* Khoảng cách giữa chữ và đường gạch */
    margin-bottom: 10px !important; /* Khoảng cách giữa H2 (có gạch) và đoạn văn bản P */
}

.creator-cta-bottom-section p {
    color: var(--text-dark) !important; /* Đoạn văn bản màu đen */
    max-width: 700px !important;
    margin: 0 0 30px 0 !important; /* Đặt margin-top về 0, khoảng cách do margin-bottom của H2 kiểm soát */
}

/* Các thuộc tính của .action-button bên trong .creator-cta-bottom-section */
.creator-cta-bottom-section .action-button {
    display: inline-block !important;
    padding: 18px 40px !important;
    background: var(--card-background) !important;
    color: var(--primary-dark) !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    margin-bottom: 0 !important;
}
.creator-cta-bottom-section .action-button:hover {
    background: var(--background-light) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}
/* --- Creator Minimal Hero Section --- */
.creator-minimal-hero {
    text-align: center !important; /* Căn giữa nội dung */
    padding: 5px 25px 0 25px !important; /* Padding trên 80px, trái/phải 25px, không padding dưới */
    max-width: 1000px !important; /* Giới hạn chiều rộng tối đa, đồng bộ với .container */
    margin: 0 auto !important; /* Căn giữa div theo chiều ngang */
    /* Section này sẽ hòa hợp với background của body */
}

.creator-minimal-hero h1 {
    color: var(--primary-dark) !important; /* Chữ xanh (từ biến CSS của bạn) */
    font-size: 3.2rem !important; /* Kích thước chữ lớn cho tiêu đề chính */
    margin: 0 auto 20px auto !important; /* Không margin trên, căn giữa, margin dưới 20px */
    max-width: 800px !important; /* Giới hạn chiều rộng của tiêu đề */
}

.creator-minimal-hero p {
    font-size: 1.3rem !important; /* Kích thước chữ cho đoạn văn */
    max-width: 800px !important; /* Giới hạn chiều rộng của đoạn văn */
    margin: 0 auto 30px auto !important; /* Không margin trên, căn giữa, margin dưới 30px */
    line-height: 1.6 !important; /* Chiều cao dòng để dễ đọc */
    color: var(--text-dark) !important; /* Màu chữ chính (từ biến CSS của bạn) */
}

/* Responsive Adjustments for Creator Minimal Hero */
@media (max-width: 992px) {
    .creator-minimal-hero {
        padding: 60px 25px 0 25px !important; /* Giảm padding trên, giữ padding ngang */
    }
    .creator-minimal-hero h1 {
        font-size: 2.5rem !important; /* Điều chỉnh kích thước chữ h1 */
    }
    .creator-minimal-hero p {
        font-size: 1.1rem !important; /* Điều chỉnh kích thước chữ p */
    }
}

@media (max-width: 768px) {
    .creator-minimal-hero {
        padding: 40px 15px 0 15px !important; /* Giảm padding trên, điều chỉnh padding ngang cho mobile */
    }
    .creator-minimal-hero h1 {
        font-size: 2rem !important; /* Điều chỉnh kích thước chữ h1 */
    }
    .creator-minimal-hero p {
        font-size: 1rem !important; /* Điều chỉnh kích thước chữ p */
    }
}

@media (max-width: 480px) {
    .creator-minimal-hero {
        padding: 30px 15px 0 15px !important; /* Điều chỉnh padding trên cho màn hình rất nhỏ */
    }
    .creator-minimal-hero h1 {
        font-size: 1.8rem !important; /* Kích thước chữ h1 nhỏ nhất */
    }
    .creator-minimal-hero p {
        font-size: 0.95rem !important; /* Kích thước chữ p nhỏ nhất */
    }
}