/*
 Theme Name:   saigontin Child
 Theme URI:    http://saigontins.me/saigontin-child/
 Description:  saigontin Child Theme
 Author:       saigontins.me
 Author URI:   http://saigontins.me
 Template:     saigontin
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  saigonton-child
*/


:root {
    --primary: #3498db;
    --primary-hover: #2980b9;
    --secondary: #2c3e50;
    --secondary-hover: #1a252f;
    --accent: #fa7516;
    --accent-hover: #e6640d;
    --bg-light: #f8fafc;
    --bg-dark: #0f172a;
    --text-dark: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --font-display: 'Inter', sans-serif;
    --container-width: 1320px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Spacing System */
    --section-pad-y: 100px;
    --gap-lg: 60px;
    --gap-md: 40px;
    --gap-sm: 20px;

    /* Typography System */
    --fs-hero: clamp(2.5rem, 5vw, 4rem);
    --fs-h1: 3rem;
    --fs-h2: 2.5rem;
    --fs-h3: 1.75rem;
    --fs-h4: 1.25rem;
    --fs-p: 1.1rem;
}

/* Tablet (dÆ°á»›i 1024px) */
@media (max-width: 1024px) {
    :root {
        --section-pad-y: 80px;
        --gap-lg: 50px;
        --gap-md: 30px;
        --fs-h1: 2.5rem;
        --fs-h2: 2rem;
        --fs-h3: 1.5rem;
        --fs-p: 1.05rem;
    }
}

/* Mobile (dÆ°á»›i 768px) */
@media (max-width: 768px) {
    :root {
        --section-pad-y: 60px;
        --gap-lg: 40px;
        --gap-md: 25px;
        --fs-h1: 2.25rem;
        --fs-h2: 1.75rem;
        --fs-h3: 1.35rem;
        --fs-p: 1rem;
    }
}

/* Utility Classes */
.section-padding {
    padding: var(--section-pad-y) 0;
}

body {
    font-family: var(--font-display);
    background-color: var(--bg-light);
    color: var(--text-dark);
    margin: 0;
    padding: 0;
    overflow-x: clip;
}

.max-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
    width: 100%;
}

.post, .page {
    margin: 0;
}

a, a:visited {
    color: var(--accent);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--accent-hover);
}


/* Offset for fixed header */
.site-wrapper {
    padding-top: 100px;
}
@media (min-width: 1025px) {
    .site-wrapper {
        padding-top: 128px;
    }
}



html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
.max-container { box-sizing: border-box; width: 100%; }