/* MISA - NukeViet Shops checkout responsive
 * Verified against the live cart HTML on 2026-10-08.
 * Load after shops.css and misa-mobile.css.
 */

@media (max-width: 767px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body:has(.step_bar) {
        padding-bottom: 18px !important;
    }

    body:has(.step_bar) .fix_banner_left,
    body:has(.step_bar) .fix_banner_right,
    body:has(.step_bar) .misa-zalo-widget {
        display: none !important;
    }

    /* STEP 1 - STEP 2: override Bootstrap clearfix pseudo-elements. */
    div.step_bar.alert {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 12px !important;
        padding: 8px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        background: #f5f6f7 !important;
        border: 1px solid #dfe3e6 !important;
        border-radius: 7px !important;
    }

    div.step_bar.alert::before,
    div.step_bar.alert::after {
        display: none !important;
        content: none !important;
    }

    div.step_bar.alert > a.step {
        float: none !important;
        clear: none !important;
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        order: initial !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        color: #145a8d !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        text-align: left !important;
        white-space: normal !important;
        text-decoration: none !important;
        background: #fff !important;
        background-image: none !important;
        border: 1px solid #d5dce1 !important;
        border-radius: 7px !important;
    }

    div.step_bar.alert > a.step:nth-of-type(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    div.step_bar.alert > a.step:nth-of-type(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    div.step_bar.alert > a.step_current {
        color: #d90000 !important;
        background: #fff3f3 !important;
        border-color: #ef7777 !important;
    }

    div.step_bar.alert > a.step::before,
    div.step_bar.alert > a.step::after {
        display: none !important;
        content: none !important;
    }

    div.step_bar.alert > a.step > span {
        float: none !important;
        flex: 0 0 29px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 29px !important;
        height: 29px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 29px !important;
        background: #1688c8 !important;
        border: 0 !important;
        border-radius: 50% !important;
    }

    div.step_bar.alert > a.step_current > span {
        background: #e50000 !important;
    }

    /* CART: verified table class is .table, not table.rows. */
    body:has(.step_bar) table.table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 12px !important;
        overflow: visible !important;
        border: 0 !important;
        table-layout: auto !important;
        box-sizing: border-box !important;
    }

    body:has(.step_bar) table.table > thead {
        display: none !important;
    }

    body:has(.step_bar) table.table > tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body:has(.step_bar) table.table > tbody > tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 12px !important;
        padding: 8px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 1px solid #dce1e5 !important;
        border-radius: 8px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
    }

    body:has(.step_bar) table.table > tbody > tr > td {
        float: none !important;
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 58px !important;
        padding: 7px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        text-align: left !important;
        white-space: normal !important;
        border: 0 !important;
        border-bottom: 1px solid #edf0f2 !important;
    }

    /* STT */
    body:has(.step_bar) table.table > tbody > tr > td:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-items: flex-start !important;
        min-height: 52px !important;
        color: #777 !important;
        font-size: 12px !important;
    }

    body:has(.step_bar) table.table > tbody > tr > td:nth-child(1)::before {
        content: "STT" !important;
    }

    /* Product name */
    body:has(.step_bar) table.table > tbody > tr > td:nth-child(2) {
        grid-column: 2 / 4 !important;
        grid-row: 1 !important;
        min-height: 52px !important;
        color: #145a8d !important;
        font-weight: 600 !important;
    }

    /* Unit price, quantity, unit and amount */
    body:has(.step_bar) table.table > tbody > tr > td:nth-child(3) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    body:has(.step_bar) table.table > tbody > tr > td:nth-child(4) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    body:has(.step_bar) table.table > tbody > tr > td:nth-child(5) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    body:has(.step_bar) table.table > tbody > tr > td:nth-child(6) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    /* Delete product */
    body:has(.step_bar) table.table > tbody > tr > td:nth-child(7) {
        grid-column: 3 !important;
        grid-row: 2 / 4 !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 3px !important;
        border-bottom: 0 !important;
    }

    body:has(.step_bar) table.table > tbody > tr > td:nth-child(3)::before {
        content: "Đơn giá" !important;
    }

    body:has(.step_bar) table.table > tbody > tr > td:nth-child(4)::before {
        content: "Số lượng" !important;
    }

    body:has(.step_bar) table.table > tbody > tr > td:nth-child(5)::before {
        content: "Đơn vị" !important;
    }

    body:has(.step_bar) table.table > tbody > tr > td:nth-child(6)::before {
        content: "Thành tiền" !important;
    }

    body:has(.step_bar) table.table > tbody > tr > td:nth-child(1)::before,
    body:has(.step_bar) table.table > tbody > tr > td:nth-child(3)::before,
    body:has(.step_bar) table.table > tbody > tr > td:nth-child(4)::before,
    body:has(.step_bar) table.table > tbody > tr > td:nth-child(5)::before,
    body:has(.step_bar) table.table > tbody > tr > td:nth-child(6)::before {
        display: block !important;
        margin-bottom: 4px !important;
        color: #666 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
    }

    body:has(.step_bar) table.table td a {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    body:has(.step_bar) table.table input[type="number"],
    body:has(.step_bar) table.table input[type="text"] {
        width: 72px !important;
        max-width: 100% !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 6px !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        text-align: center !important;
    }

    body:has(.step_bar) table.table .money {
        color: #e31818 !important;
        font-weight: 700 !important;
    }

    body:has(.step_bar) table.table .remove_cart {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 42px !important;
        font-size: 20px !important;
    }

    /* Customer, delivery, payment and completed-order pages. */
    body:has(.step_bar) .block,
    body:has(.step_bar) .panel,
    body:has(.step_bar) .panel-body,
    body:has(.step_bar) #print {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 7px !important;
        padding-left: 7px !important;
        box-sizing: border-box !important;
    }

    body:has(.step_bar) .form-horizontal .form-group {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body:has(.step_bar) .form-horizontal .control-label {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 5px !important;
        padding: 0 !important;
        text-align: left !important;
    }

    body:has(.step_bar) .form-horizontal [class*="col-sm-"],
    body:has(.step_bar) .form-horizontal [class*="col-md-"],
    body:has(.step_bar) .block [class*="col-sm-"],
    body:has(.step_bar) .block [class*="col-md-"] {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    body:has(.step_bar) .form-control,
    body:has(.step_bar) .block select,
    body:has(.step_bar) .block textarea,
    body:has(.step_bar) .block input[type="text"],
    body:has(.step_bar) .block input[type="email"],
    body:has(.step_bar) .block input[type="tel"] {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 43px !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    body:has(.step_bar) .block textarea,
    body:has(.step_bar) textarea.form-control {
        min-height: 92px !important;
        resize: vertical !important;
    }

    body:has(.step_bar) .payment_info {
        width: 100% !important;
        margin: 0 !important;
        padding: 7px !important;
        box-sizing: border-box !important;
    }

    body:has(.step_bar) .payment_info .payment_items {
        float: none !important;
        display: block !important;
        width: 100% !important;
        min-height: 45px !important;
        margin: 0 0 8px !important;
        padding: 10px !important;
        text-align: left !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 1px solid #d8dee3 !important;
        border-radius: 7px !important;
    }

    body:has(.step_bar) .order_shipping_info {
        margin: 8px 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    body:has(.step_bar) .order_shipping_info li {
        display: block !important;
        width: 100% !important;
        padding: 7px 0 !important;
        overflow-wrap: anywhere !important;
    }

    body:has(.step_bar) .payment,
    body:has(.step_bar) .order_code,
    body:has(.step_bar) .money {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    body:has(.step_bar) .text-right .btn,
    body:has(.step_bar) .pull-right .btn,
    body:has(.step_bar) button.btn,
    body:has(.step_bar) input.btn {
        min-height: 43px !important;
        margin: 3px 1px !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        touch-action: manipulation !important;
    }
}

@media (max-width: 360px) {
    div.step_bar.alert {
        grid-template-columns: 1fr !important;
    }

    div.step_bar.alert > a.step:nth-of-type(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    div.step_bar.alert > a.step:nth-of-type(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}

@media print {
    .fix_banner_left,
    .fix_banner_right,
    .misa-zalo-widget,
    div.step_bar,
    .btn {
        display: none !important;
    }
}