/* Media Queries cho Điện thoại và Tablet */
@media screen and (max-width: 768px) {
    /* Navbar Responsive */
    .navbar {
        padding: 10px 20px;
    }
    
    .mobile-only {
        display: flex !important;
    }

    .nav-container {
        position: fixed;
        top: 70px; 
        right: 15px;
        width: auto;
        min-width: 180px;
        background-color: rgba(26, 26, 26, 0.92);
        backdrop-filter: blur(20px);
        border-radius: 20px;
        z-index: 999;
        box-shadow: 0 15px 35px rgba(0,0,0,0.5);
        
        /* Hiệu ứng Slide Down */
        transform: translateY(-20px);
        opacity: 0;
        transition: transform 0.4s ease-out, opacity 0.3s ease-out;
        pointer-events: none;
        padding: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .nav-container.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0;
    }

    .nav-links li a {
        padding: 10px 15px;
        font-size: 15px;
        text-align: center;
        text-transform: uppercase;
        display: block;
        letter-spacing: 2px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .nav-links li:last-child a {
        border-bottom: none;
    }

    .nav-icon {
        display: none !important;
    }

    /* Hero Text Responsive (Tiêu đề và mô tả) */
    .hero-text {
        top: 15%; 
        left: 0;
        width: 100%;
        transform: none; /* Reset lại transform từ desktop */
        text-align: center;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-text h1 {
        font-size: 2.2rem;
        gap: 6px;
        justify-content: center;
    }

    .hero-text p {
        font-size: 0.95rem;
        margin: 0 auto;
        max-width: 100%;
    }

    /* Bảng điều khiển Drone */
    #ui-panel {
        width: 90%;
        min-width: auto;
        padding: 15px 20px;
        margin-bottom: 25px;
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        animation: slideUpMobile 1s cubic-bezier(0.25, 1, 0.5, 1) 1.2s both;
    }

    @keyframes slideUpMobile {
        from {
            transform: translateY(100px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    #ui-panel h3 {
        font-size: 1.2rem;
    }

    #ui-panel button {
        padding: 10px 15px;
        font-size: 15px;
    }

    /* Nội dung các section khác */
    .content-section {
        padding: 60px 15px 20px;
    }

    .content-section h2 {
        font-size: 2rem;
    }

    .content-section p {
        font-size: 1rem;
        padding: 0 10px;
    }
    /* Form Đặt Lịch Responsive */
    .booking-wrapper {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .booking-headline {
        font-size: 2.6rem;
    }

    .booking-info {
        padding: 20px 0 0;
    }

    .booking-stats {
        gap: 12px;
        padding: 18px;
    }

    .stat-number {
        font-size: 1.6rem;
    }

    .booking-form-panel {
        padding: 28px 22px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .role-toggle-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .role-toggle {
        width: 100%;
    }
}

/* Responsive cho thiết bị màn hình rất nhỏ (nhỏ hơn 480px) */
@media screen and (max-width: 480px) {
    .hero-text {
        top: 18%; /* Giữ một khoảng cách vừa phải */
    }

    .hero-text h1 {
        font-size: 1.8rem;
    }

    .nav-links {
        gap: 10px;
    }

    .nav-links li a {
        font-size: 13px;
    }
}