:root {
            --primary-navy: #0a192f; 
            --accent-green: #24b45a; 
            --chip-yellow: #fdb927;  
            --deep-dark: #02060c;
            --font-main: 'Kanit', sans-serif;
            --font-tech: 'Chakra Petch', sans-serif;
        }

        body { 
            background-color: var(--deep-dark); 
            color: #ffffff; 
            font-family: var(--font-main);
            position: relative;
        }

        /* --- Navigation --- */
        .top-nav-container {
            position: fixed; top: 0; width: 100%; z-index: 1000;
            transition: 0.4s ease; padding: 15px 0;
            background: linear-gradient(to bottom, rgba(2,6,12,0.9), transparent);
        }
        .top-nav-container.scrolled {
            background: rgba(10, 25, 47, 0.98);
            backdrop-filter: blur(15px);
            border-bottom: 2px solid var(--accent-green);
            padding: 10px 0;
        }
        .navbar-brand img { width: 280px; transition: 0.3s; }
        .op-tag { font-size: 0.6rem; color: var(--accent-green); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 4px; display: block;}

        .navbar-nav .nav-link {
            color: rgba(255,255,255,0.7) !important; 
            font-size: 0.9rem; text-transform: uppercase;
            letter-spacing: 1px; margin: 0 12px; font-weight: 600;
            transition: 0.3s;
            position: relative;
        }

        /* --- Active State Style --- */
        .navbar-nav .nav-link.active {
            color: var(--accent-green) !important;
        }
        .navbar-nav .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -5px; left: 0;
            width: 100%; height: 2px;
            background: var(--accent-green);
        }

        .btn-quote-nav {
            border: 2px solid var(--accent-green); color: white; border-radius: 50px;
            padding: 8px 25px; text-decoration: none; font-weight: 600; transition: 0.3s; margin-left: 15px;
        }
        .btn-quote-nav:hover { background: var(--accent-green); color: #000 !important; }

        /* --- Sections Style --- */
        section { padding: 100px 0; scroll-margin-top: 80px; }
        .hero-section {
            padding: 0;
            background: linear-gradient(90deg, rgba(10,25,47,0.95) 30%, rgba(10,25,47,0.3) 100%), 
                        url('./assets/img/hero-bg.jpg') no-repeat;
            background-size: cover; background-position: center;
            height: 100vh; display: flex; align-items: center;
        }
        .hero-title { font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 700; line-height: 1; }
        .hero-title span { color: var(--accent-green); font-style: italic; }

        /* Stats Bar */
        .stats-bar {
            background: var(--accent-green); color: #000; padding: 30px 0;
            border-radius: 20px; margin-top: -60px; position: relative; z-index: 10;
        }

        /* Bento Grid */
        .bento-grid {
            display: grid; grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 220px; gap: 20px;
        }
        .bento-item {
            background: #112240; border: 1px solid rgba(255,255,255,0.05);
            border-radius: 30px; padding: 35px; transition: 0.4s;
            display: flex; flex-direction: column; justify-content: flex-end;
        }
        .bento-item.featured { grid-column: span 2; grid-row: span 2; }
        .bento-item i { color: var(--accent-green); font-size: 2.5rem; margin-bottom: 25px; }

        /* Anniversary Card */
        .behind-brand-card {
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 40px; padding: 60px; margin-top: 50px;
        }
        .badge-20yrs { background: var(--chip-yellow); color: #000; padding: 5px 20px; border-radius: 50px; font-weight: 700; font-family: var(--font-tech); }

        .reveal { opacity: 0; transform: translateY(30px); transition: 0.8s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }

        footer { background: #02060c; padding: 80px 0 30px; border-top: 1px solid rgba(36, 180, 90, 0.2); }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-section .container {
                text-align: center;
                padding: 0 20px;
            }
            .hero-section h1 {
                font-size: 2.5rem;
            }
            .hero-section .lead {
                font-size: 1.2rem;
            }
            .stats-bar .col-md-4 {
                border-right: none !important;
                border-bottom: 1px solid rgba(0,0,0,0.1);
                padding: 20px 0;
            }
            .stats-bar .col-md-4:last-child {
                border-bottom: none;
            }
            .bento-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            .bento-item {
                padding: 20px;
            }
            .bento-item.featured {
                grid-column: span 1;
                grid-row: span 1;
            }
            .behind-brand-card {
                padding: 30px 20px;
                margin-top: 30px;
            }
            .badge-20yrs {
                font-size: 0.8rem;
                padding: 4px 15px;
            }
            .navbar-brand img {
                width: 200px;
            }
            .btn-quote-nav {
                padding: 6px 15px;
                font-size: 0.8rem;
                margin-left: 10px;
            }
            .modal-dialog {
                margin: 10px;
                max-width: none;
                width: calc(100% - 20px);
            }
            .modal-content {
                border-radius: 15px;
            }
            .modal-body {
                padding: 20px;
            }
            .form-control {
                font-size: 1rem;
                padding: 10px 15px;
            }
            .btn {
                font-size: 1rem;
                padding: 10px 20px;
            }
        }

        @media (max-width: 576px) {
            .hero-section h1 {
                font-size: 2rem;
            }
            .hero-section .lead {
                font-size: 1rem;
            }
            .display-5 {
                font-size: 2rem;
            }
            .bento-item h4 {
                font-size: 1.2rem;
            }
            .modal-dialog {
                margin: 5px;
                width: calc(100% - 10px);
            }
            .modal-body {
                padding: 15px;
            }
            .form-control {
                font-size: 0.9rem;
                padding: 8px 12px;
            }
            .btn {
                font-size: 0.9rem;
                padding: 8px 16px;
            }
        }

        /* Tablet adjustments */
        @media (min-width: 769px) and (max-width: 1024px) {
            .bento-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .bento-item.featured {
                grid-column: span 2;
            }
            .modal-dialog {
                max-width: 600px;
            }
        }

        /*///////////////////////////////ui dialog inquiry form///////////////////////////////*/
        /* ปรับแต่งหัวข้อ Dialog ให้ดูทันสมัย */
.ui-dialog {
    border-radius: 15px;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow: hidden;
    padding: 0;
}

.ui-dialog .ui-dialog-titlebar {
    background-color: #198754; /* สี btn-success */
    color: white;
    border: none;
    border-radius: 0;
    padding: 1rem;
}

.ui-dialog .ui-dialog-title {
    font-weight: bold;
    font-size: 1.2rem;
}

.ui-dialog .ui-dialog-buttonpane {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 10px 20px;
}

/* ปรับปุ่มใน Dialog */
.ui-dialog .ui-button {
    border-radius: 50px;
    padding: 8px 25px;
    font-weight: bold;
}

.ui-button-submit {
    background: #198754 !important;
    color: white !important;
    border: none !important;
}

.ui-button-cancel {
    background: #6c757d !important;
    color: white !important;
    border: none !important;
}