/*
Theme Name:  https://nika.vn/
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
:root {
    --gold-accent: #c5a059;
    --deep-blue: #05224a;
    --primary-red: #e42001;
    --white: #ffffff;
    --bg-grey: #f8f9fa;
}

.flasome-wrapper { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }
.f-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Fixed Header */
.f-header-fixed {
    position: fixed; top: 0; width: 100%; background: rgba(255,255,255,0.95);
    height: 80px; z-index: 1000; box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}
.nav-flex { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.f-logo img { height: 50px; }
.f-nav-desktop ul { display: flex; list-style: none; gap: 25px; }
.f-nav-desktop a { text-decoration: none; color: var(--deep-blue); font-weight: 700; font-size: 13px; }
.f-btn-hotline { background: var(--primary-red); color: white; padding: 10px 22px; border-radius: 50px; text-decoration: none; font-weight: 800; animation: pulse 2s infinite; }

/* Hero Section với ảnh nền bóc tách từ Ladipage */
.f-hero-bg {
    height: 90vh;
    background: linear-gradient(rgba(5, 34, 74, 0.6), rgba(5, 34, 74, 0.6)), 
                url('https://w.ladicdn.com/s1450x900/6573c713b6329c001222475d/z5277156976694_0776997a339f408803d65961e06e3926-20240323101625-v0xay.jpg');
    background-size: cover; background-position: center;
    display: flex; align-items: center; color: white;
}
.hero-box { max-width: 700px; }
.f-badge { background: var(--gold-accent); padding: 6px 15px; font-weight: 700; border-radius: 3px; display: inline-block; margin-bottom: 15px; }
.hero-box h1 { font-size: 56px; line-height: 1.1; margin-bottom: 15px; }
.hero-stats { display: flex; gap: 30px; margin: 30px 0; border-top: 1px solid rgba(255,255,255,0.3); padding-top: 20px; }
.stat-item span { display: block; font-size: 12px; opacity: 0.8; }
.stat-item strong { font-size: 22px; color: var(--gold-accent); }

/* Common UI */
.f-section { padding: 90px 0; }
.grey-bg { background: var(--bg-grey); }
.title-gold { color: var(--gold-accent); font-size: 32px; margin-bottom: 25px; position: relative; }
.grid-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.img-shadow { width: 100%; border-radius: 8px; box-shadow: 20px 20px 0 var(--gold-accent); }
.map-img, .mb-img { width: 100%; border-radius: 10px; border: 1px solid #ddd; }

/* Form Section */
.f-form-section { background: var(--deep-blue); padding: 80px 0; color: white; text-align: center; }
.form-card { background: rgba(255,255,255,0.05); padding: 50px; border: 1px solid rgba(197, 160, 89, 0.3); border-radius: 15px; }
.f-inline-form { display: flex; gap: 15px; justify-content: center; margin: 30px 0; }
.f-inline-form input { padding: 15px; width: 300px; border: none; border-radius: 5px; }
.f-inline-form button { background: var(--primary-red); color: white; border: none; padding: 0 40px; border-radius: 5px; font-weight: 800; cursor: pointer; }

/* Responsive */
@media (max-width: 768px) {
    .f-nav-desktop, .f-btn-hotline { display: none; }
    .grid-row { grid-template-columns: 1fr; gap: 30px; }
    .hero-box h1 { font-size: 35px; }
    .f-inline-form { flex-direction: column; }
    .f-inline-form input { width: 100%; }
}

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }