/* ==========================================================================
   CA GO DETMOLD - MOBILE OPTIMIZATION STYLE SHEET (mobile.css)
   ========================================================================== */

@media (max-width: 768px) {
    /* ----------------------------------------------------------------------
       1. GLOBAL RESET & LAYOUT RULES (Khung bao trang)
       ---------------------------------------------------------------------- */
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
        padding: 1px 2px !important;
    }

    .page-frame {
        padding: 2px !important;
        margin: 0 !important;
        min-height: auto !important;
    }

    .page-frame-inner {
        padding: 2px 4px !important;
        min-height: auto !important;
    }

    /* ----------------------------------------------------------------------
       2. HEADER NAVIGATION & BRANDING (Thanh đầu trang)
       ---------------------------------------------------------------------- */
    header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 4px !important; /* Tạo khoảng trống nhẹ dưới header */
        margin: 0 !important;
        background-color: transparent !important;
        position: relative !important;
        z-index: 1000 !important;
    }

    header * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .header-logo-container {
        margin: 0 !important;
        padding: 0 !important;
        gap: 8px !important;
        max-width: 75% !important;
    }

    .header-logo-container .logo-pc { 
        display: none !important; 
    }

    .header-logo-container .logo-mobile {
        display: block !important;
        width: 80px !important; /* Thu nhỏ nhẹ logo header cho thanh lịch */
    }

    .header-brand-name {
        font-size: 0.9rem !important;
        margin-bottom: 2px !important;
    }

    .header-brand-sub {
        font-size: 0.4rem !important;
    }

    /* Ẩn các nút PC cũ */
    .pc-only-trigger,
    .header-popup-trigger.pc-only-trigger {
        display: none !important;
    }

    /* Nút Hamburger Menu */
    .header-popup-trigger.mobile-only-trigger,
    .mobile-only-trigger,
    button.mobile-only-trigger {
        display: block !important;
        width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
        border: none !important;
        outline: none !important;
        background-color: transparent !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23c5a059' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: 24px 24px !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 1010 !important;
    }

    .mobile-only-trigger * {
        display: none !important;
    }

    header .header-right-group {
        position: relative !important;
    }

    header nav {
        display: none;
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        width: 190px !important;
        background: rgba(10, 10, 10, 0.96) !important;
        border: 1px solid rgba(197, 160, 89, 0.4) !important;
        border-radius: 2px !important;
        flex-direction: column !important;
        padding: 6px 0 !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.9) !important;
        backdrop-filter: blur(8px) !important;
        z-index: 999 !important;
    }

    header nav.active {
        display: flex !important;
    }

    header nav a {
        padding: 10px 16px !important;
        color: #ffffff !important; 
        font-family: 'Playfair Display', serif !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        text-align: center !important;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        transition: all 0.2s ease !important;
        margin-left: 0 !important;
    }

    header nav a:hover,
    header nav a:active,
    header nav a:focus {
        color: var(--gold-color, #c5a059) !important;
        text-decoration: underline !important;
        text-underline-offset: 4px !important;
        background: rgba(197, 160, 89, 0.08) !important;
    }

    header nav a:last-child {
        border-bottom: none !important;
    }

    /* ----------------------------------------------------------------------
       3. HERO SECTION (ẢNH SLIDE TRÊN CÙNG - CHỮ VÀ NÚT Ở DƯỚI)
       ---------------------------------------------------------------------- */
    .hero-container {
        display: flex !important;
        flex-direction: column !important; /* Xếp dọc các phần tử */
		
		/* TĂNG KHOẢNG CÁCH NGOÀI PHÍA TRÊN ĐỂ ĐẨY CẢ CỤM XUỐNG DƯỚI */
        margin-top: 45px !important;       /* Tăng từ 15px lên 25px (hoặc 30px nếu muốn thoáng hơn nữa) */
        margin-bottom: 0px !important;    /* Khoảng cách ngoài phía dưới */
        
        /* ĐỒNG BỘ CHIỀU CAO ĐỂ HIỂN THỊ SLIDE VÀ CHỮ ĐỒNG THỜI */
        height: auto !important;          
        min-height: 420px !important;      /* Khóa cứng chiều cao tối thiểu để chứa cả slide + chữ + nút */
        overflow: visible !important;      /* Cho phép các góc viền vàng hiển thị đầy đủ */
        
        margin: 15px 0 !important; /* Tạo khoảng cách thoáng mát với Header */
		margin-bottom: 10px !important;
        position: relative !important;
    }

    /* Ẩn slide bên trái (Cột 1) */
    .hero-slider.slider-left {
        display: none !important;
    }

    /* Ẩn phần khung logo trống */
    .logo-container {
        display: none !important;
    }

    /* Cấu hình Slider bên phải (Cột 3) thành Slider chính giữa Mobile */
    .hero-slider.slider-right {
        display: block !important; 
        position: relative !important;
        width: 88% !important;        /* Sử dụng tỉ lệ phần trăm để tự co giãn cân đối */
        max-width: 320px !important;  
        height: 200px !important;     /* Chiều cao lý tưởng */
        margin: 10px auto 25px auto !important; /* Tạo khoảng trống 25px phía dưới để tránh dính chữ */
        border-radius: 4px !important;
        overflow: visible !important;  /* Cho phép viền vàng gá ra ngoài */
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
        clip-path: none !important;   
        margin-left: auto !important; 
        margin-right: auto !important;
        z-index: 5 !important;
        order: 1 !important;          /* Đặt ở trên cùng */
    }

    /* Sửa lỗi lệch khung viền đôi mạ vàng */
    .hero-slider.slider-right::before {
        content: "" !important;
        position: absolute;
        top: -6px !important; 
        left: -6px !important; 
        right: 6px !important; 
        bottom: 6px !important;
        width: 100% !important; /* Khóa chặt độ rộng viền */
        height: 100% !important; /* Khóa chặt chiều cao viền */
        border-top: 1.5px solid var(--gold-color, #c5a059) !important;
        border-left: 1.5px solid var(--gold-color, #c5a059) !important;
        border-bottom: none !important;
        border-right: none !important;
        pointer-events: none;
        z-index: 10 !important;
    }

    .hero-slider.slider-right::after {
        content: "" !important;
        position: absolute;
        top: 6px !important; 
        left: 6px !important; 
        right: -6px !important; 
        bottom: -6px !important;
        width: 100% !important;
        height: 100% !important;
        border-bottom: 1.5px solid var(--gold-color, #c5a059) !important;
        border-right: 1.5px solid var(--gold-color, #c5a059) !important;
        border-top: none !important;
        border-left: none !important;
        pointer-events: none;
        z-index: 10 !important;
    }

    /* Đảm bảo ảnh slide con nổi lên, kéo giãn 100% khung */
    .hero-slider.slider-right .slide {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center center !important;
        border-radius: 4px !important;
        
        /* TUYỆT ĐỐI KHÔNG dùng opacity !important ở đây để tránh xung đột với Javascript */
        transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

        /* --- CỘT GIỮA: THAY ĐỔI CHIỀU CAO CHỦ ĐỘNG --- */
    .hero-center {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        
        /* 1. TRIỆT TIÊU HOÀN TOÀN LỰC ĐẨY FLEX: Đảm bảo cột không bị tự động kéo dài ra */
        flex: none !important; 
        
        /* 2. KHÓA CỨNG CHIỀU CAO: 
           Đặt bằng 144px (bằng khít với thẻ con 143px của bạn) để co cụm hoàn hảo.
           Bạn có thể tự do thay đổi con số này (ví dụ: 150px, 160px) để chỉnh khoảng cách sau này. */
        height: 144px !important; 
        
        min-height: auto !important; 
        padding: 0 !important;
        margin: 0 !important;             
        overflow: visible !important; /* Để lộ viền hoặc các hiệu ứng tràn nhẹ nếu có */
        order: 2 !important; /* Đặt ở vị trí dưới slide */
    }

     /* Ép thẻ con trực tiếp nhận diện đúng chiều cao của cha */
    .hero-center-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        
        /* Khóa cứng chiều cao đồng bộ 100% với cha */
        height: 100% !important; 
        min-height: auto !important;
        
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Phân bổ đều khoảng trống của chữ và nút bấm trong phạm vi 144px */
    .hero-text-actions {
        transform: none !important; /* Bỏ TranslateY kéo âm của PC */
        width: 100% !important;
        height: 100% !important;
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: space-between !important; /* Phân bổ mượt mà chữ ở trên, nút ở dưới */
        
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 20 !important;
    }

    .hero-center p.slogan {
        font-size: 0.75rem !important; /* Thu nhỏ chữ nhẹ để tinh tế hơn */
        margin-top: 0 !important;
        margin-bottom: 20px !important; /* Khoảng cách xuống nút */
        letter-spacing: 3px !important; /* Tăng độ thưa chữ cho sang trọng */
        white-space: nowrap !important;
        text-align: center !important;
        color: var(--gold-color, #c5a059) !important; /* Sử dụng màu vàng chủ đạo ấm áp */
        font-weight: 700 !important;
    }

    .hero-center .cta-buttons {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 250px !important; /* Thu hẹp nhẹ chiều rộng nút */
        margin: 0 auto !important;
        gap: 12px !important; /* Khoảng cách giữa 2 nút thoáng hơn */
    }

    .btn {
        width: 100% !important;
        min-height: 46px !important; /* Thu nhỏ nhẹ chiều cao nút */
        font-size: 0.75rem !important; /* Cỡ chữ nút thanh mảnh */
        padding: 10px !important;
        box-sizing: border-box !important;
        letter-spacing: 1px !important;
    }


	    /* ----------------------------------------------------------------------
       4. INFO BAR & FOOTER (CĂN THẲNG HÀNG & THU GỌN KHOẢNG TRỐNG)
       ---------------------------------------------------------------------- */
    .info-bar {
        /* Thu nhỏ khoảng cách với các nút bấm phía trên (giảm từ 35px xuống còn 12px) */
        margin: 25px auto 10px auto !important; 
        
        padding: 15px 18px !important; /* Padding vừa vặn tinh tế */
        width: 90% !important; /* Bo hẹp chiều ngang tạo viền lề cân đối */
        max-width: 340px !important;
        background-color: rgba(15, 15, 15, 0.6) !important; /* Nền kính mờ */
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(197, 160, 89, 0.2) !important; /* Viền vàng mảnh */
        border-radius: 6px !important;
        box-sizing: border-box !important;
        
        /* Cấu hình Flexbox xếp dọc */
        display: flex !important;
        flex-direction: column !important;
        
        /* QUAN TRỌNG: Căn các dòng thông tin bám sát lề trái để thẳng hàng từ trên xuống */
        align-items: flex-start !important; 
        
        gap: 12px !important; /* Khoảng cách đều giữa các dòng */
    }

    /* Các dòng liên kết (Địa chỉ, Điện thoại, Giờ mở cửa) */
    .info-link-row {
        display: flex !important;
        align-items: flex-start !important; /* Căn đỉnh để nội dung nhiều dòng (như giờ mở cửa) không bị lệch */
        justify-content: flex-start !important;
        gap: 10px !important;
        text-decoration: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    /* Định dạng thẻ <p> bên trong mỗi dòng */
    .info-link-row p.info-text-line {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.82rem !important; /* Cỡ chữ thanh lịch dễ đọc trên điện thoại */
        line-height: 1.4 !important;
        color: var(--text-gray, #e0e0e0) !important;
        text-align: left !important; /* Ép chữ luôn căn trái */
        display: inline !important;
        white-space: normal !important; /* Cho phép tự động xuống dòng mượt mà nếu màn hình quá nhỏ */
    }

    /* Nhãn chữ màu vàng (Adresse:, Telefon:, Öffnungszeiten:) */
    .info-bar span {
        color: var(--gold-color, #c5a059) !important;
        font-weight: bold !important;
        margin-right: 4px !important;
    }

    /* Khóa kích thước Icon SVG chuẩn xác, thẳng hàng dọc */
    .info-svg-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--gold-color, #c5a059) !important;
        width: 16px !important;   /* Độ rộng icon đồng bộ */
        height: 16px !important;  
        margin-top: 2px !important; /* Nhích nhẹ icon xuống một chút để khít với dòng chữ */
        flex-shrink: 0 !important; /* Ngăn chặn icon bị bóp méo */
    }

    .info-svg-icon svg {
        width: 16px !important;
        height: 16px !important;
        display: block !important;
    }

    /* ----------------------------------------------------------------------
       FOOTER (Chân trang sát mép)
       ---------------------------------------------------------------------- */
    footer {
        margin-top: 5px !important;
        padding: 5px 0 !important;
    }

    footer p {
        font-size: 0.72rem !important;
        opacity: 0.8 !important;
    }


    /* ----------------------------------------------------------------------
       5. ANNOUNCEMENT POP-UP (Thông báo lỗi và cuộn tự động trên Mobile)
       ---------------------------------------------------------------------- */
    .announcement-overlay {
        padding: 12px !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .announcement-card {
        width: 100% !important;
        max-width: 350px !important;
        max-height: 80vh !important; 
        overflow-y: auto !important; 
        -webkit-overflow-scrolling: touch;
        padding: 25px 18px 20px !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        transform: scale(1) !important;
    }

    .popup-badge {
        padding: 3px 12px !important;
        font-size: 0.68rem !important;
        margin-bottom: 12px !important;
    }

    .announcement-card h3 {
        font-size: 1.15rem !important;
        margin-bottom: 8px !important;
        margin-top: 5px !important;
    }

    .announcement-card p {
        font-size: 0.82rem !important;
        line-height: 1.45 !important;
        margin-bottom: 10px !important;
        opacity: 0.95 !important;
    }

    .notice-item {
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
    }

    .popup-confirm-btn {
        padding: 10px 20px !important;
        font-size: 0.8rem !important;
        margin-top: 10px !important;
    }

    .close-popup-btn {
        position: absolute !important;
        top: 10px !important;
        right: 14px !important;
        font-size: 1.6rem !important;
        padding: 5px !important;
        line-height: 1 !important;
        z-index: 10001 !important;
    }
}