@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Imbue:opsz,wght@10..100,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@300;400;500;600;700&display=swap');


@font-face {
    font-family: 'Batangas';
    src: url('/media/r3apv4o2/batangas-bold.woff2') format('woff2'),
         url('/media/1gnlbfjc/batangas-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {

    /* Colors */

    --clr-cream: #fffdeb;

    --clr-gold: #d8c366;

    --clr-green: #134f3c;

    --clr-white: #ffffff;

    --clr-text: #1a1a1a;

    --clr-text-light: #4a5568;

    --clr-overlay: rgba(19, 79, 60, 0.75);

     --clr-dark-green: #0a2920;

    

    /* Fonts */

    /*--font-title: 'Imbue';*/

    /*--font-primary: 'M PLUS Rounded 1c', sans-serif;*/

    /*--font-secondary: 'Cambria', serif;*/
    
    --font-logo: 'Batangas', serif;

    --font-title: 'Imbue', serif;

    --font-body: 'Cambria', serif;

    --font-ui: 'Encode Sans', sans-serif;

 

    

    /* Transitions */

    --trans-base: 0.3s ease;

    --trans-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    

    /* Shadows */

    --shadow-sm: 0 2px 12px rgba(19, 79, 60, 0.08);

    --shadow-md: 0 4px 24px rgba(19, 79, 60, 0.12);

    --shadow-lg: 0 8px 40px rgba(19, 79, 60, 0.15);

    

    /* Spacing */

    --space-section: 100px;

    --space-container: 20px;

}



*, *::before, *::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    margin: 0;

    padding: 0;

}



body {

    font-family: var(--font-ui);

    color: var(--clr-text);

    background-color: var(--clr-white);

    line-height: 1.8;

    overflow-x: hidden;

    margin: 0;

    padding: 0;

}



/*::-webkit-scrollbar {*/

/*    width: 6px;*/

/*}*/



/*::-webkit-scrollbar-thumb {*/

/*    background-color: var(--clr-green);*/

/*    border-radius: 6px;*/

/*}*/



/*::-webkit-scrollbar-track {*/

/*    background: transparent;*/

/*}*/



/* Float Buttons Container */

.float-buttons {

    position: fixed;

    bottom: 24px;

    right: 24px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    z-index: 9999;

}



/* Base Float Button */

.float-btn {

    width: 56px;

    height: 56px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    text-decoration: none;

    position: relative;

}



.float-btn:hover {

    transform: scale(1.1) translateY(-2px);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);

}



.float-btn:active {

    transform: scale(0.95);

}



.float-btn svg {

    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));

}



/* WhatsApp Button */

.whatsapp-btn {

    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);

}



.whatsapp-btn:hover {

    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);

}



/* Zalo Button */

.zalo-btn {

    background: linear-gradient(135deg, #0068FF 0%, #0180FF 100%);

}



.zalo-btn:hover {

    box-shadow: 0 6px 20px rgba(0, 104, 255, 0.5);

}

.message-btn {
    background: #0084FF !important;
    box-shadow: 0 4px 15px rgba(0, 132, 255, 0.4);
}

.message-btn:hover {
    background: #0070d6;
    box-shadow: 0 6px 20px rgba(0, 132, 255, 0.5);
    transform: translateY(-3px) scale(1.05);
}
.message-btn svg {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.logo-text {
    font-family: var(--font-logo);
    font-weight: bold;
}

.fz-title {
    font-size:2.5rem !important;
}

/* Responsive */

@media (max-width: 768px) {

    .float-buttons {

        bottom: 16px;

        right: 16px;

        gap: 10px;

    }

    

    .float-btn {

        width: 48px;

        height: 48px;

    }

    

    .float-btn svg {

        width: 28px;

        height: 28px;

    }
    
    
   .fz-title {
       font-size: 1.5rem !important;
    }

}