/* Mobile styles */
@media (max-width: 768px) {
    .dodo-mb-container {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        background: #fff;
    }
    
    .dodo-mb-left {
        width: 25%;
        background: #1f1f1f;
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;
    }

    /* Phần danh mục sản phẩm */
    .dodo-mb-categories {
        flex: 1;
        overflow-y: auto;
        padding: 10px 0;
    }
    
    .dodo-mb-category {
        padding: 5px;
        text-align: center;
        cursor: pointer;
    }
    
    /* Style chung cho circle */
    .dodo-mb-circle {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin: 0 auto 5px;
        border: 2px solid #333;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .dodo-mb-circle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Text dưới icon */
    .dodo-mb-category span,
    .dodo-mb-action span {
        color: #fff;
        font-size: 11px;
        display: block;
        text-align: center;
    }
    
    .dodo-mb-category.active .dodo-mb-circle {
        border-color: #2f9716;
    }

    /* Phần actions (liên hệ & hỗ trợ) */
    .dodo-mb-actions {
        padding: 10px 0;
        border-top: 1px solid #333;
        background: #1f1f1f;
    }

    .dodo-mb-action {
        padding: 5px;
        text-align: center;
    }

    .dodo-mb-action a {
        text-decoration: none;
    }

    .dodo-mb-action .dodo-mb-circle {
        background: #333;
        transition: background 0.3s;
    }

    .dodo-mb-action .dodo-mb-circle:hover {
        background: #2f9716;
    }

    .dodo-mb-action img {
        width: 50%;
        height: 50%;
        object-fit: contain;
    }

    /* Phần còn lại giữ nguyên */
    .dodo-mb-right {
        width: 75%;
        height: 100%;
        overflow-y: auto;
        background: #fff;
    }
    .dodo-mb-right #support-content p{
        font-size: 14px;
        margin: 0px !important;
        color:#27272A !important;
        text-align: center;
    }
    .dodo-mb-right #support-content .col{
        padding: 0px;
    }
    .dodo-mb-right .section-title-main {
        font-size: 15px !important;
    }
    .dodo-mb-right .section-title-container{
        margin-bottom: 0px !important;
    }
    .dodo-mb-content {
        display: none;
        padding: 15px;
    }
    
    .dodo-mb-content.active {
        display: block;
    }

    /* Tùy chỉnh thanh cuộn */
    .dodo-mb-left::-webkit-scrollbar {
        width: 3px;
    }

    .dodo-mb-left::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 3px;
    }

    /* Ẩn thanh cuộn mặc định của trình duyệt */
    .dodo-mb-left, .dodo-mb-right {
        scrollbar-width: thin;
        -ms-overflow-style: none;
    }

    /* Phần logo website */
    .dodo-mb-logo {
        padding: 15px 10px;
        text-align: center;
        border-top: 1px solid #333;
        background: #1f1f1f;
    }

    .dodo-mb-logo img {
        max-width: 80%;
        height: auto;
        max-height: 40px;
        object-fit: contain;
    }

    /* Điều chỉnh lại layout cho left column */
    .dodo-mb-left {
        display: flex;
        flex-direction: column;
    }

    .dodo-mb-categories {
        flex: 1;
        overflow-y: auto;
    }

    .dodo-mb-actions,
    .dodo-mb-logo {
        flex: none; /* Đảm bảo phần này không bị co giãn */
    }

    /* Styles cho phần brands */
    .dodo-mb-brands {
        margin-bottom: 20px;
    }

    .dodo-mb-brands h3,
    .dodo-mb-subcategories h3 {
        font-size: 16px;
        color: #333;
        margin-bottom: 15px;
        padding-bottom: 8px;
        border-bottom: 2px solid #2f9716;
        display: inline-block;
    }

    .dodo-mb-brand-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 20px;
    }

    .dodo-mb-brand {
        text-decoration: none;
        text-align: center;
        padding: 3px;
        border: 1px solid #eee;
        border-radius: 8px;
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .dodo-mb-brand:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transform: translateY(-2px);
    }

    .dodo-mb-brand img {
        width: 80px;
        object-fit: contain;
    }

    .dodo-mb-brand span {
        display: block;
        color: #333;
        font-size: 12px;
        line-height: 1.3;
        text-align: center;
        width: 100%;
    }

    /* Điều chỉnh lại style cho subcategories */
    .dodo-mb-subcategories {
        margin-top: 20px;
    }

    .dodo-mb-subcat-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .dodo-mb-subcat-item {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #333;
        padding: 10px 15px;
        background: #f5f5f5;
        border-radius: 8px;
        transition: all 0.3s;
    }

    .dodo-mb-subcat-item:hover {
        background: #fff1eb;
        transform: translateX(5px);
        border-left: 3px solid #2f9716;
    }

    .subcat-icon {
        font-size: 18px;
        margin-right: 10px;
        color: #2f9716;
    }

    .subcat-name {
        font-size: 14px;
        font-weight: 500;
    }

    /* Styles cho slider sản phẩm mới */
    .dodo-mb-latest {
        margin-top: 20px;
    }

    .dodo-mb-latest h3 {
        font-size: 16px;
        color: #333;
        margin-bottom: 15px;
        padding-bottom: 8px;
        border-bottom: 2px solid #2f9716;
        display: inline-block;
    }

    .dodo-mb-slider {
        position: relative;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        margin: 0 -5px;
    }

    .dodo-mb-slider::-webkit-scrollbar {
        display: none;
    }
    .dodo-mb-content .product-info .price {
        font-size: 14px !important;
    }

    .dodo-mb-slide {
        flex: 0 0 calc(50%);
        scroll-snap-align: start;
        padding: 0 5px;
        width:50%;
    }

    .dodo-mb-product {
        display: block;
        text-decoration: none;
        background: #fff;
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid #eee;
        height: 100%;
    }

    .product-image {
        position: relative;
        padding-top: 100%;
    }

    .product-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-info {
        padding: 8px;
    }

    .product-info h4 {
        font-size: 12px;
        color: #333;
        margin: 0 0 4px;
        line-height: 1.2;
        display: block;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .product-info .price {
        color: #2f9716;
        font-weight: 500;
        font-size: 13px;
    }

    .product-info .price del {
        color: #999;
        font-weight: normal;
        font-size: 11px;
        margin-right: 4px;
    }

    .product-info .price ins {
        text-decoration: none;
    }

    /* Style cho tiêu đề chính */
    .dodo-mb-title {
        margin: 0 0 20px;
        padding: 0 0 10px;
        border-bottom: 1px solid #eee;
        position: relative;
    }

    .dodo-mb-title a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-decoration: none;
        color: #27272A;
        font-size: 18px;
        font-weight: 600;
    }

    .title-arrow {
        font-size: 20px;
        color: #2f9716;
        margin-left: 8px;
        transition: transform 0.3s ease;
    }

    .dodo-mb-title a:hover {
        color: #2f9716;
    }

    .dodo-mb-title a:hover .title-arrow {
        transform: translateX(5px);
    }

    /* Điều chỉnh padding cho content */
    .dodo-mb-content {
        padding: 15px 12px;
    }

    /* Điều chỉnh margin cho các section */
    .dodo-mb-brands,
    .dodo-mb-subcategories,
    .dodo-mb-latest {
        margin-top: 25px;
    }

    /* Làm đẹp các tiêu đề phụ */
    .dodo-mb-brands h3,
    .dodo-mb-subcategories h3,
    .dodo-mb-latest h3 {
        font-size: 15px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
        padding-bottom: 8px;
        border-bottom: 2px solid #2f9716;
        display: inline-block;
        text-transform: uppercase;
    }

    /* Thêm shadow nhẹ cho các items */
    .dodo-mb-brand,
    .dodo-mb-subcat-item,
    .dodo-mb-product {
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
    }

    .dodo-mb-brand:hover,
    .dodo-mb-subcat-item:hover,
    .dodo-mb-product:hover {
        box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    }

    /* Làm mịn các góc */
    .dodo-mb-brand,
    .dodo-mb-subcat-item,
    .dodo-mb-product {
        border-radius: 10px;
    }

    /* Tối ưu khoảng cách */
    .dodo-mb-brand-grid {
        gap: 12px;
        padding: 5px 0;
    }

    .dodo-mb-subcat-list {
        gap: 8px;
    }

    /* Làm đẹp giá sản phẩm */
    .product-info .price {
        font-weight: 600;
        color: #2f9716;
    }

    .product-info .price del {
        opacity: 0.6;
    }

    .product-info .price ins {
        background: none;
        padding: 0 3px;
    }

    /* Cập nhật màu chữ cho các phần khác */
    .product-info h4 {
        color: #27272A;
    }

    .dodo-mb-brands h3,
    .dodo-mb-subcategories h3,
    .dodo-mb-latest h3 {
        color: #27272A;
    }

    .subcat-name {
        color: #27272A;
    }

    .dodo-mb-brand span {
        color: #27272A;
    }
}

/* Thêm class để xử lý khi menu mở */
body.dodo-menu-open {
    overflow: hidden;
}