@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');

@font-face {
    font-family: 'Batangas';
    src: url('/fonts/Batangas.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 

: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: 'M PLUS Rounded 1c', 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;
}


.logo-text {
    font-family: var(--font-logo) !important;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

body {
    /*font-family: var(--font-primary);*/
    font-family: var(--font-body);
    color: var(--clr-text);
    background-color: var(--clr-white);
    line-height: 1.8;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* ================= UI FONT ================= */

nav,
nav a,
.menu a,
.header-menu a,
.btn--primary,
.service-card__btn,
.hoponoff-card-btn,
.label,
.services-section__label,
.service-card__badge,
.review-card__role,
.service-card__qr-text {
    font-family: var(--font-ui);
}

/* ================= TITLES ================= */

.heading,
.hero__title,
.services-section__title,
.service-card__name,
.services-hero__title-line1,
.services-hero__title-line2 {
    font-family: var(--font-title);
}

/* ================= CONTENT ================= */

.text,
.service-card__desc,
.review-card__text,
.hero__desc,
.hoponoff-desc {
    font-family: var(--font-body);
}


/*::-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);
}

/* 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;
    }
}