/* 
  ================================================================
  JUPITER HOTEL — GLOBAL MOBILE UX OPTIMIZATION
  File: jupiter-mobile.css
  Mục tiêu: Tinh chỉnh thẩm mỹ và UX cho di động (Viewport < 768px).
  KHÔNG sửa .hero-3 (Hero đã được fix riêng).
  ================================================================
*/

@media (max-width: 767px) {
    /* 1. Global Safety - Prevent Horizontal Overflow */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative;
    }

    /* 2. Global Spacing - Giảm khoảng trắng chết */
    .section-padding {
        padding: 60px 0 !important;
    }

    /* 3. Typography Safety */
    .sec-title {
        font-size: 24px !important; /* Slightly smaller to fit better */
        line-height: 1.2 !important;
        word-break: keep-all !important; /* Prevent breaking words on mobile */
        overflow-wrap: normal !important;
        hyphens: none !important;
        letter-spacing: -0.01em !important;
    }

    .sub-title {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    /* 4. Backgrounds & Parallax Fix - Prevent repetition and broken mobile parallax */
    .hero-section.hero-bg, 
    .hotel-booking-section,
    .offer-bg-section,
    .bg-cover {
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center !important;
        background-attachment: scroll !important; /* Disables problematic mobile parallax */
    }

    /* 5. Mobile-Specific Image Links */
    .hero-section.hero-bg {
        background-image: url('../img/mobile/hero_jupiter-mobile.webp') !important;
    }

    /* 6. Hero Section Stacking & Alignment */
    .hero-3 .hero-visual-column,
    .hero-3 .hero-image,
    .hero-3 .hero-image picture,
    .hero-3 .hero-image img {
        display: none !important;
    }

    .hero-3 .row {
        flex-wrap: wrap !important;
        margin: 0 !important;
    }

    .hero-3 .hero-image {
        width: 100% !important;
        margin: 0 auto 30px !important;
        display: none !important;
        text-align: center;
        order: 2 !important; /* Image on bottom */
    }

    .hero-3 .hero-content {
        width: 100% !important;
        text-align: center !important;
        order: 1 !important; /* Text on top */
        padding-top: 40px !important;
    }

    .hero-3 .hero-image img {
        width: 100% !important;
        max-width: 400px !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: none !important;
    }

    .hero-3 .hero-button {
        justify-content: center !important;
    }

    /* 7. Service Icons (Index Page) - 2 cột thay vì 1 cột hoặc quá to */
    .service-section .row.g-4 {
        display: flex;
        flex-wrap: wrap;
    }

    .service-section .col-md-4, 
    .service-section .col-sm-6,
    .service-section [class*="col-"] {
        width: 50% !important; /* Force 2 columns */
    }

    .service-box-items {
        padding: 20px 10px !important;
        margin-bottom: 0 !important;
    }

    .service-box-items .icon img {
        max-width: 50px !important; /* Scale icon down */
    }

    .service-box-items h6 {
        font-size: 13px !important;
    }

    /* 8. Newsletter Form - Vertical Stack */
    .footer-newsletter form .form-clt {
        flex-direction: column !important;
        gap: 15px !important;
        background: transparent !important;
        border: none !important;
    }

    .footer-newsletter form .form-clt input {
        background: #fff !important;
        border-radius: 50px !important;
        padding: 15px 25px 15px 50px !important;
        width: 100% !important;
    }

    .footer-newsletter form .form-clt button {
        width: 100% !important;
        border-radius: 50px !important;
        position: static !important;
    }

    /* 9. Image Height Limiting (About/Locations) */
    .about-image img,
    .location-image img,
    .breadcrumb-wrapper {
        max-height: 400px;
        object-fit: cover;
    }

    /* 10. Form Adjustments (Booking/Contact) */
    .hotel-booking-section .from-box,
    .hotel-booking-wrapper .hotel-booking-box,
    .contact-form-items {
        padding: 25px 20px !important;
    }

    /* 11. Footer Adjustments */
    .footer-bottom .footer-wrapper {
        flex-direction: column !important;
        gap: 20px !important;
        text-align: center !important;
    }

    .footer-bottom .social-icon {
        justify-content: center !important;
    }
}

@media (max-width: 430px) {
    .sec-title {
        font-size: 20px !important;
    }
}

@media (max-width: 375px) {
    .sec-title {
        font-size: 19px !important;
    }
}