/* assets/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');

html,
body {
    font-family: 'Noto Sans Thai', sans-serif;
    background-color: #f8fafc;
    /* light slate background */
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Custom Frontend Container Width */
.container {
    max-width: 1150px !important;
}

/* Glassmorphism / Liquid Glass Utilities */
.glass {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

.glass-dark {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-green {
    background: rgba(16, 185, 129, 0.15);
    /* Tailwind Emerald 500 alpha */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 8px 32px 0 rgba(16, 185, 129, 0.1);
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px 0 rgba(31, 38, 135, 0.15);
    transition: all 0.3s ease;
}

/* Footer bottom fix */
main {
    flex-grow: 1;
}

footer {
    margin-top: auto;
}

:root {
    --primary-color: #02b901;

}