/* =========================================================
   QUÀ LƯU NIỆM VIỆT NAM - MOBILE CUSTOM CSS
   File: /themes/default/css/misa-mobile.css
   ========================================================= */

@media only screen and (max-width: 767px) {

    /* Chừa chỗ cho thanh Giỏ hàng và Hotline cố định */
    body {
        padding-bottom: 82px !important;
    }

    /* -----------------------------------------------------
       NỘI DUNG BÀI VIẾT
       ----------------------------------------------------- */
    .news_column .hometext,
    .news_column .hometext p,
    .news_column .hometext span {
        font-size: 19px !important;
        line-height: 1.65 !important;
    }

    #news-bodyhtml,
    #news-bodyhtml p,
    #news-bodyhtml p span,
    #news-bodyhtml div,
    #news-bodyhtml div span,
    #news-bodyhtml li,
    #news-bodyhtml li span {
        font-size: 18px !important;
        line-height: 1.75 !important;
    }

    #news-bodyhtml p {
        margin-bottom: 18px !important;
    }

    #news-bodyhtml img {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* -----------------------------------------------------
       THIẾT LẬP CHUNG CHO GIỎ HÀNG VÀ HOTLINE
       ----------------------------------------------------- */
    .fix_banner_left,
    .fix_banner_right {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: auto !important;
        bottom: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        z-index: 2147483647 !important;
    }

    /* -----------------------------------------------------
       GIỎ HÀNG - GÓC DƯỚI BÊN TRÁI
       ----------------------------------------------------- */
    .fix_banner_left {
        left: 7px !important;
        right: auto !important;
        width: 100px !important;
        height: 68px !important;
        font-size: 0 !important;
    }

    .fix_banner_left > br {
        display: none !important;
    }

    .fix_banner_left .panel {
        display: flex !important;
        flex-direction: column !important;
        width: 100px !important;
        height: 68px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
        border: 1px solid #f00 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .22) !important;
    }

    .fix_banner_left .panel-heading {
        display: block !important;
        height: 24px !important;
        min-height: 24px !important;
        padding: 3px 2px !important;
        margin: 0 !important;
        color: #fff !important;
        background: #f00 !important;
        border: 0 !important;
        font-size: 13px !important;
        line-height: 18px !important;
        text-align: center !important;
    }

    .fix_banner_left .panel-body {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: 100% !important;
        height: 43px !important;
        padding: 2px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .fix_banner_left .panel-body > div {
        margin: 0 !important;
        padding: 0 !important;
    }

    .fix_banner_left .panel-body img {
        display: block !important;
        width: 33px !important;
        height: 33px !important;
        max-width: 33px !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    .fix_banner_left .panel-body span {
        display: block !important;
        color: #f00 !important;
        font-size: 11px !important;
        line-height: 14px !important;
        white-space: nowrap !important;
    }

    /* -----------------------------------------------------
       HOTLINE - GÓC DƯỚI BÊN PHẢI
       Chỉ hiện 3 dòng, không hiện icon Zalo
       ----------------------------------------------------- */
    .fix_banner_right {
        left: auto !important;
        right: 5px !important;
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        height: 64px !important;
    }

    .fix_banner_right .misa-zalo-widget {
        position: static !important;
        display: flex !important;
        visibility: visible !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        height: 64px !important;
        margin: 0 !important;
        padding: 3px 2px !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 1px solid #f00 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .22) !important;
        transform: none !important;
    }

    .fix_banner_right .misa-zalo-icon,
    .fix_banner_right .misa-zalo-icon img {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Thay chữ Chat Zalo bằng Hotline */
    .fix_banner_right .misa-zalo-title {
        display: block !important;
        width: 100% !important;
        height: 17px !important;
        margin: 0 0 1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 17px !important;
        text-align: center !important;
    }

    .fix_banner_right .misa-zalo-title::before {
        content: "Hotline" !important;
        display: block !important;
        color: #064f9e !important;
        font-size: 14px !important;
        line-height: 17px !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    .fix_banner_right .misa-zalo-phones {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        width: 104px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .fix_banner_right .misa-zalo-phone {
        display: block !important;
        width: 104px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #f00 !important;
        font-size: 13px !important;
        line-height: 18px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        text-align: center !important;
        text-decoration: none !important;
        transform: none !important;
    }
}