/* ============================================================
   RESPONSIVE.CSS — Tối ưu giao diện trang khách cho điện thoại / máy tính bảng
   Nạp SAU CÙNG trong index.html để ghi đè các file CSS khác.
   Mốc: ≤ 900px (máy tính bảng dọc & điện thoại), ≤ 480px (điện thoại nhỏ).
   ============================================================ */

/* ---------- Thanh menu: nút ☰ + menu xổ xuống ---------- */
.nav-hamburger,
.nav-mobile-cta { display: none; }

@media (max-width: 900px) {
    .nav-container {
        position: relative;
        padding: 10px 16px;
        gap: 10px;
    }
    .nav-logo {
        font-size: 1.25rem;
        white-space: nowrap;
    }
    .nav-container > div { gap: 10px !important; }

    .nav-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border: 1px solid var(--gold);
        border-radius: 8px;
        background: transparent;
        color: var(--gold);
        font-size: 1.1rem;
        cursor: pointer;
    }

    /* Nút đặt lịch chuyển vào trong menu ☰ cho gọn */
    .btn-nav-booking { display: none; }
    .btn-nav-login {
        padding: 8px 12px;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    .nav-user-name { display: none; }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 6px 16px 16px;
        background: var(--nav-green, #FFFDF7);
        border-bottom: 1px solid rgba(184,74,43,0.2);
        box-shadow: 0 14px 24px rgba(74,52,41,0.15);
    }
    .main-navbar.nav-open .nav-links { display: flex; }
    .nav-links li { border-bottom: 1px solid rgba(184,74,43,0.1); }
    .nav-links a {
        display: block;
        padding: 14px 4px;
        font-size: 1rem;
    }
    .nav-mobile-cta {
        display: block;
        margin-top: 12px;
        border-bottom: none !important;
    }
    .nav-mobile-cta a {
        text-align: center;
        background: var(--burgundy, #681F1B);
        color: #FFFDF7 !important;
        border-radius: 6px;
        font-weight: 700;
    }
}

/* ---------- Trang chủ ---------- */
@media (max-width: 768px) {
    /* Khối chữ trong banner lớn không được rộng hơn màn hình */
    .hero-content { width: 100%; min-width: 0; box-sizing: border-box; }
    .hero-title { font-size: clamp(2rem, 10vw, 3rem); letter-spacing: 2px; }
    .hero-subtitle { font-size: 1.1rem; letter-spacing: 1px; margin-bottom: 15px; }
    .hero-desc { font-size: 0.95rem; margin-bottom: 28px; }
    .btn-hero-cta { padding: 12px 26px; font-size: 1rem; }

    .section-heading { font-size: 1.5rem; letter-spacing: 1px; gap: 10px; }
    .section-heading::before { width: 28px; flex-shrink: 0; }

    .about-section,
    .features-section { padding: 60px 20px; gap: 30px; }
    .about-slogan { font-size: 1.35rem; }

    .parallax-banner { height: 320px; margin: 50px 0; }
    .parallax-content h3 { font-size: 1.5rem; letter-spacing: 1px; }
    .parallax-content p { font-size: 1rem; }

    .features-grid { gap: 18px; }
    .feature-box { padding: 28px 20px; }

    /* background-attachment: fixed bị giật / không hiện trên iPhone */
    .cta-section { padding: 70px 20px; background-attachment: scroll; }
    .cta-content h2 { font-size: 2rem; }
}


/* ---------- Trang phục: bớt lớp đệm lồng nhau để thẻ trang phục rộng hơn ---------- */
@media (max-width: 768px) {
    .outfits-container-wrapper { padding: 30px 12px; min-height: 0; }
    .outfits-form-box { padding: 18px 12px; }
    .outfits-box-header { margin-bottom: 24px; }
    .outfits-box-header h2 { font-size: 1.3rem; letter-spacing: 1px; }
    .outfit-grid-4 { gap: 10px; }
    .outfit-card-info { padding: 10px; }
    .outfit-card-info h4 { font-size: 0.88rem; }
    .outfit-card-price { font-size: 0.8rem; }
}

/* ---------- Footer ---------- */
@media (max-width: 640px) {
    .footer-contact-item { flex-wrap: wrap; gap: 4px 8px; align-items: flex-start; }
    .footer-col h3 { margin-bottom: 14px; }
}

/* Nút nhạc nổi: nhỏ và sát góc hơn để ít che nội dung */
@media (max-width: 768px) {
    .music-player { bottom: 14px; left: 12px; }
    .music-toggle-btn { width: 38px; height: 38px; font-size: 0.9rem; }
}

/* ---------- Đặt lịch ---------- */
@media (max-width: 600px) {
    /* booking.html ghi cứng 2 cột trong style="" nên phải dùng !important */
    .survey-options { grid-template-columns: 1fr !important; }
    .survey-opt { padding: 12px 14px; }
}
@media (max-width: 768px) {
    .booking-flow-container { padding: 18px 14px; }
    .step-title { font-size: 1.2rem; margin-bottom: 20px; }

    /* Bước 4: thẻ trang phục 2 cột, ảnh thấp lại (chiều cao ghi cứng 260px trong JS) */
    #booking-truyen-thong-grid,
    #booking-concept-grid,
    #booking-vest-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .rentable-outfit-img-wrap { height: 170px !important; }
    .rentable-outfit-card h5 { font-size: 0.88rem !important; }

    /* Bước 8: hoá đơn */
    .invoice-container { padding: 16px !important; }
    .deposit-amount-highlight h2 { font-size: 1.7rem; }
}

/* ---------- Trang tài khoản khách (menu trái chuyển thành hàng ngang) ---------- */
@media (max-width: 768px) {
    .dashboard-layout { flex-direction: column !important; gap: 16px !important; }
    .dashboard-layout > div:first-child { width: 100% !important; flex-direction: row !important; }
    .dash-tab-btn { flex: 1; padding: 12px !important; text-align: center !important; font-size: 0.85rem; }
    .dashboard-layout > div:last-child { width: 100%; }
}

/* Bước 6 (và các hàng nút ở mọi bước): cho xuống dòng thay vì tràn ra mép phải */
@media (max-width: 768px) {
    .booking-step div[style*="display: flex"] { flex-wrap: wrap; }
    #step-6-timeline label { white-space: normal !important; }
    #btnBackToStep5, #btnResetTimeline { flex: 1 1 45%; }
    #btnFinalSubmit { flex: 1 1 100% !important; }
}

/* Khung nội dung đặt lịch không được rộng theo bảng timeline (min-width 680px) -> bảng tự cuộn ngang bên trong */
@media (max-width: 992px) {
    .booking-flow-container { width: 100%; max-width: 100%; box-sizing: border-box; }
}