/* ============================================================
   GIAO DIỆN WIZARD CHỈ DÀNH RIÊNG CHO MOBILE
   ============================================================ */

@media (max-width: 991px) {

    /* RESET KHUNG CHỨA */
    #frmBookingWizard.smartwizard {
        overflow: visible !important;
        position: relative !important;
        background: transparent !important;
    }

    /* THANH WIZARD HEADER */
    #frmBookingWizard ul.nav-tabs {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        width: 100% !important;
        background: #fff !important;
        margin: 0 0 15px 0 !important;
        padding: 15px 0 !important;
        border: none !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
        overflow: hidden !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* ĐƯỜNG KẺ NỐI XUYÊN QUA CÁC VÒNG TRÒN (NHƯ ẢNH 2) */
    #frmBookingWizard ul.nav-tabs::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 31px !important; /* 15px (padding) + 16px (bán kính vòng tròn) = 31px */
        left: 10% !important;
        right: 10% !important;
        height: 2px !important;
        background: #ced4da !important;
        z-index: 1 !important;
    }

    /* TỪNG ITEM BƯỚC */
    #frmBookingWizard ul.nav-tabs>li {
        flex: 1 1 20% !important;
        width: 20% !important;
        max-width: 20% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 2 !important;
        background: transparent !important;
        border: none !important;
    }

    /* Xóa các border đè ngang rác của bootstrap */
    #frmBookingWizard ul.nav-tabs>li::after {
        display: none !important;
    }

    /* THẺ A CHỨA KÝ TỰ */
    #frmBookingWizard ul.nav-tabs>li>a {
        display: block !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
        text-decoration: none !important;
        color: #777 !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        word-break: break-word !important;
        min-height: auto !important;
        font-family: Arial, sans-serif !important;
        cursor: default !important;
        width: 100% !important;
        text-transform: uppercase !important;
    }

    #frmBookingWizard ul.nav-tabs>li>a:hover,
    #frmBookingWizard ul.nav-tabs>li>a:focus,
    #frmBookingWizard ul.nav-tabs>li>a:active {
        background: transparent !important;
        border: none !important;
    }

    /* ẨN NỘI DUNG RÁC CỦA SMARTWIZARD */
    #frmBookingWizard ul.nav-tabs>li>a>br,
    #frmBookingWizard ul.nav-tabs>li>a>small,
    #frmBookingWizard ul.nav-tabs>li>a>div,
    #frmBookingWizard ul.nav-tabs>li>a>span,
    #frmBookingWizard ul.nav-tabs>li>a>h1,
    #frmBookingWizard ul.nav-tabs>li>a>h2,
    #frmBookingWizard ul.nav-tabs>li>a>h3,
    #frmBookingWizard ul.nav-tabs>li>a>h4,
    #frmBookingWizard ul.nav-tabs>li>a>h5,
    #frmBookingWizard ul.nav-tabs>li>a>h6,
    #frmBookingWizard ul.nav-tabs>li>a>p {
        display: none !important;
    }

    /* VÒNG TRÒN VÀ CHỮ SỐ CHO TỪNG BƯỚC */
    #frmBookingWizard ul.nav-tabs>li::before {
        content: "" !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background-color: #f5f5f5 !important;
        border: 2px solid #ccc !important;
        color: #888 !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        margin: 0 auto 6px auto !important;
        z-index: 3 !important;
        position: relative !important;
        box-shadow: 0 0 0 4px #fff !important;
        box-sizing: border-box !important;
        background-color: #fff !important;
        /* Đổi nền thành trắng tinh để che đường kẻ bên dưới */
        border: 2px solid #e0e0e0 !important;
        /* Viền xám nhạt tiệp màu với đường nối */
        color: #446084 !important;
        /* Chữ số màu xanh xám/đen như ảnh */
        z-index: 2 !important;
        /* Phải cao hơn z-index của đường kẻ ngang (1) */

        /* Thủ thuật tạo viền trắng vô hình xung quanh để cắt đứt đường kẻ ngang trông đẹp hơn */
        box-shadow: 0 0 0 6px #fff !important;
    }

    #frmBookingWizard ul.nav-tabs>li:nth-child(1)::before {
        content: "1" !important;
    }

    #frmBookingWizard ul.nav-tabs>li:nth-child(2)::before {
        content: "2" !important;
    }

    #frmBookingWizard ul.nav-tabs>li:nth-child(3)::before {
        content: "3" !important;
    }

    #frmBookingWizard ul.nav-tabs>li:nth-child(4)::before {
        content: "4" !important;
    }

    #frmBookingWizard ul.nav-tabs>li:nth-child(5)::before {
        content: "5" !important;
    }


    /* ====== TRẠNG THÁI HIỂN THỊ ====== */

    /* 1. ĐÃ HOÀN THÀNH (XANH LÁ) */
    #frmBookingWizard ul.nav-tabs>li.done::before {
        background-color: #28a745 !important;
        border-color: #28a745 !important;
        color: #fff !important;
    }

    #frmBookingWizard ul.nav-tabs>li.done>a {
        color: #28a745 !important;
    }

    /* 2. ĐANG GIAO DỊCH (ĐỎ) */
    #frmBookingWizard ul.nav-tabs>li.active::before,
    #frmBookingWizard ul.nav-tabs>li.current::before {
        background-color: #dc3545 !important;
        border-color: #dc3545 !important;
        color: #fff !important;
    }

    #frmBookingWizard ul.nav-tabs>li.active>a,
    #frmBookingWizard ul.nav-tabs>li.current>a {
        color: #dc3545 !important;
        font-weight: 700 !important;
    }

    #frmBookingWizard .sw-container {
        padding: 0 !important;
    }

    /* CHỐNG ĐÈ GIAO DIỆN Ở BƯỚC 4 */
    #step-4 .col-sm-pull-6 {
        margin-top: 30px !important;
        clear: both !important;
        display: block !important;
    }
}