/* Design System Variables */
:root {
    /* Primary Colors */
    --yellow-1: #F6C945;
    --yellow-2: #FEF4E3;
    
    /* Secondary Colors */
    --brown-1: #362921;
    --brown-2: #8E827C;
    
    /* Status Colors */
    --success: #28A745;
    --danger: #DC3545;
    --warning: #FFC107;
    --info: #17A2B8;
    
    /* Gray Scale */
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    
    /* Default Colors */
    --white: #fff;
    --black: #000;
    
    /* Typography Scale */
    --h1-size: 40px;
    --h2-size: 32px;
    --h3-size: 28px;
    --h4-size: 24px;
    --h5-size: 20px;
    --h6-size: 18px;
    --h7-size: 16px;
    --h8-size: 14px;
    
    /* Font Weights */
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    
    /* Spacing */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-2xl: 40px;
    --spacing-3xl: 60px;
    
    /* Border Radius */
    --border-radius-sm: 8px;
    --border-radius-md: 13px;
    --border-radius-lg: 16px;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 15px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 25px rgba(0,0,0,0.15);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Font Family Classes */
.font-family-inter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.font-family-fz-poppins {
font-family: var(--font-fz-poppins);
}

/* Global Font for Tin Tuc Page */
body.tin-tuc-page,
body.tin-tuc-page *:not(.pagination *):not([class*="font-big-shoulders"]):not([class*="fa-"]):not(.fas):not(.far):not(.fab):not(.fal):not(.fat):not(.fad):not(.section-detail-header):not(.section-detail-title) {
    font-family: var(--font-fz-poppins) !important;
    /* Font smoothing to match Figma rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
}

/* Global Font for Thong Bao Page */
body.thong-bao-page,
body.thong-bao-page *:not(.pagination *):not([class*="font-big-shoulders"]):not([class*="fa-"]):not(.fas):not(.far):not(.fab):not(.fal):not(.fat):not(.fad):not(.section-detail-header):not(.section-detail-title) {
    font-family: var(--font-fz-poppins) !important;
    /* Font smoothing to match Figma rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
}

/* Keep specific fonts for pagination and Font Awesome icons */
body.tin-tuc-page .pagination *,
body.tin-tuc-page .pagination-wrapper *,
body.tin-tuc-page .pagination-section *,
body.thong-bao-page .pagination *,
body.thong-bao-page .pagination-wrapper *,
body.thong-bao-page .pagination-section * {
    font-family: "Big Shoulders Display", Arial, sans-serif !important;
}

/* Ensure Font Awesome icons keep their font */
.fas, .far, .fab, .fal, .fat, .fad, [class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Pro" !important;
}

/* Ensure section-detail elements use FZ Poppins */
.section-detail-header,
.section-detail-title,
.section-detail-header *,
.section-detail-title * {
    font-family: var(--font-fz-poppins) !important;
    /* Font smoothing to match Figma rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
}

/* Background Styles */
/* body.tin-tuc-page main {
    background: #FEF4E5 !important;
    background-color: #FEF4E5 !important;
    min-height: calc(100vh - 200px);
} */

/* body.tin-tuc-page .news-container,
body.tin-tuc-page .container {
    background: #FEF4E5 !important;
    background-color: #FEF4E5 !important;
} */

/* Container and Layout */
.news-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 84px !important;
    background-color: #FEF4E5 !important;
}

/* Override any Bootstrap or global container max-width for tin-tuc page */
body.tin-tuc-page .container,
body.tin-tuc-page .container-fluid,
body.tin-tuc-page .news-container {
    max-width: 1280px !important;
}

/* Section Layouts */
.news-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: var(--spacing-3xl);
}

.section-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    width: 100%;
}

.section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.section-title {
    font-size: var(--h2-size);
    font-weight: var(--font-weight-bold);
    color: var(--brown-1);
    margin: 0;
    line-height: 1.2;
    font-family: var(--font-fz-poppins) !important;
}

.view-more-link {
    color: var(--brown-2);
    text-decoration: none;
    font-weight: var(--font-weight-semi-bold);
    font-size: var(--h8-size);
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-fz-poppins) !important;
}

.view-more-link:hover {
    color: var(--yellow-1);
    text-decoration: none;
}

.view-more-link i {
    font-size: 12px;
    transition: transform var(--transition-normal);
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    display: inline-block;
}

.view-more-link:hover i {
    transform: translateX(3px);
}

/* Utility Classes */
.text-brown-1 { color: var(--brown-1); }
.text-brown-2 { color: var(--brown-2); }
.text-yellow-1 { color: var(--yellow-1); }
.bg-yellow-2 { background-color: var(--yellow-2); }

/* Responsive Design */
@media (max-width: 768px) {
    .news-container {
        padding: var(--spacing-lg) var(--spacing-sm) !important;
    }
    
    .news-section {
        gap: 16px;
    }
    
    .section-header-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .section-header {
        gap: 12px;
    }
    
    .section-title {
        font-size: var(--h3-size);
    }
}

@media (max-width: 480px) {
    .news-container {
        padding: var(--spacing-md) var(--spacing-xs) !important;
    }
    
    .news-section {
        gap: 20px;
    }
    
    .section-header-container {
        gap: 16px;
    }
    
    .section-title {
        font-size: var(--h4-size);
    }
}