/* Fix for mobile viewport jumping */
html {
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
}

/* Mobile Menu Bar */
.mobile-menu-bar {
    background-color: #00CEC8 !important;
    padding: 2px 5px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    transition: none !important;
    transform: none !important;
    -webkit-transform: translate3d(0,0,0) !important;
    transform: translate3d(0,0,0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

.mobile-menu-container {
    display: flex !important;
    align-items: center !important;
    max-width: 100% !important;
    position: relative !important;
    height: 54px !important;
    min-height: 54px !important;
    transition: none !important;
    transform: none !important;
}

/* Hamburger Menu */
.mobile-menu-toggle {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
    color: #f8f9fa;
    transform: scale(1.1);
}

/* Logo */
.mobile-logo {
    position: absolute !important;
    left: 42% !important;
    top: 23% !important;
    transform: translate(-50%, -50%) !important;
    transition: none !important;
    will-change: auto !important;
}

.mobile-logo a {
    display: block;
    transition: none !important;
    transform: none !important;
}

.mobile-logo a:hover {
    transform: none !important;
    transition: none !important;
}

.mobile-logo-image {
    height: 30px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    transition: none !important;
    transform: none !important;
    filter: none !important;
}

.mobile-logo-image:hover {
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

.mobile-logo-image:active {
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

/* Right Icons */
.mobile-right-icons {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
}

.mobile-icon-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    padding: 8px;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.mobile-icon-btn:hover {
    color: #f8f9fa;
    transform: scale(1.1);
}

.mobile-cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: #00CEC8;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 50%;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Mobile Side Menu */
.mobile-side-menu {
    position: fixed;
    top: 78px;
    left: -100%;
    width: 80%;
    max-width: 350px;
    height: calc(100vh - 78px);
    background-color: #fff;
    z-index: 1050;
    transition: left 0.3s ease-in-out;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

.mobile-side-menu.show {
    left: 0;
}

.mobile-menu-content {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Search Container */
.mobile-search-container {
    padding: 20px 15px 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.mobile-search-input-group {
    display: flex;
    background-color: #fff;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mobile-search-input {
    flex: 1;
    border: none;
    padding: 12px 15px;
    font-size: 14px;
    outline: none;
    background-color: transparent;
}

.mobile-search-input::placeholder {
    color: #6c757d;
}

.mobile-search-btn {
    background-color: #00CEC8;
    border: none;
    color: #fff;
    padding: 12px 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.mobile-search-btn:hover {
    background-color: #00B8B1;
}

/* Tabs */
.mobile-menu-tabs {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
}

.mobile-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 15px 10px;
    font-size: 14px;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.mobile-tab.active {
    color: #00CEC8;
    background-color: #f8f9fa;
}

.mobile-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #00CEC8;
}

/* Menu Content Area */
.mobile-menu-content-area {
    flex: 1;
    overflow-y: auto;
    background-color: #fff;
}

.mobile-tab-content {
    display: none;
    padding: 0;
}

.mobile-tab-content.active {
    display: block;
}

/* Menu Links */
.mobile-menu-links {
    padding: 0;
}

.mobile-menu-link {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    font-size: 15px;
    font-weight: 500;
}

.mobile-menu-link:hover {
    background-color: #f8f9fa;
    color: #00CEC8;
    padding-left: 25px;
}

.mobile-menu-link i {
    margin-right: 15px;
    width: 20px;
    text-align: center;
    color: #00CEC8;
}

/* Categories */
.mobile-categories-list {
    padding: 0;
}

.mobile-category-link {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    font-size: 14px;
}

.mobile-category-link:hover {
    background-color: #f8f9fa;
    color: #00CEC8;
    padding-left: 25px;
}

.mobile-category-link i {
    margin-right: 15px;
    width: 20px;
    text-align: center;
    color: #6c757d;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 78px;
    left: 0;
    width: 100%;
    height: calc(100vh - 78px);
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-menu-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Scrollbar styling for mobile menu */
.mobile-side-menu::-webkit-scrollbar {
    width: 4px;
}

.mobile-side-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.mobile-side-menu::-webkit-scrollbar-thumb {
    background: #00CEC8;
    border-radius: 2px;
}

.mobile-side-menu::-webkit-scrollbar-thumb:hover {
    background: #00B8B1;
}

/* Ẩn top-header và navbar trên giao diện điện thoại */
@media (max-width: 768px) {
    /* Thêm margin-top cho body để tránh bị che khuất bởi fixed header */
    body {
        padding-top: 78px !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Đảm bảo mobile menu bar luôn ở vị trí cố định */
    .mobile-menu-bar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
    
    /* Điều chỉnh mobile side menu để không bị che khuất */
    .mobile-side-menu {
        top: 58px !important;
        height: calc(100vh - 78px) !important;
        z-index: 1050 !important;
    }
    
    /* Điều chỉnh mobile menu overlay */
    .mobile-menu-overlay {
        top: 58px !important;
        height: calc(100vh - 78px) !important;
        z-index: 1040 !important;
    }
    /* Tắt tất cả hiệu ứng cho mobile logo - ưu tiên cao nhất */
    .mobile-logo,
    .mobile-logo *,
    .mobile-logo a,
    .mobile-logo img {
        transform: none !important;
        transition: none !important;
        animation: none !important;
        filter: none !important;
    }
    
    .mobile-logo:hover,
    .mobile-logo:active,
    .mobile-logo:focus,
    .mobile-logo a:hover,
    .mobile-logo a:active,
    .mobile-logo a:focus,
    .mobile-logo img:hover,
    .mobile-logo img:active,
    .mobile-logo img:focus {
        transform: none !important;
        transition: none !important;
        animation: none !important;
        filter: none !important;
    }
    .top-header.bg-danger {
        display: none !important;
    }
    
    .navbar.navbar-expand-lg.navbar-light.bg-white.border-bottom.sticky-top {
        display: none !important;
    }
    
    /* Tối ưu footer cho mobile */
    .bg-dark {
        padding: 5px 5px !important;
    }
    
    /* Chỉ hiển thị thông tin liên hệ trên mobile */
    .bg-dark .col-lg-3:nth-child(2), /* HƯỚNG DẪN */
    .bg-dark .col-lg-3:nth-child(3), /* CHĂM SÓC KHÁCH HÀNG */
    .bg-dark .col-lg-3:nth-child(4)  /* ƯU ĐÃI & BẢO HÀNH */
    {
        display: none !important;
    }
    
    /* Ẩn phần social links trên mobile */
    .bg-dark .row.align-items-center .col-md-4:nth-child(2)  /* Social Links */
    {
        display: none !important;
    }
    
    /* Hiển thị footer content 2 với thông tin liên hệ trên mobile */
    #footer-content-2 {
        display: block !important;
        margin-bottom: 20px !important;
    }
    
    /* Ẩn footer hr trên mobile */
    #footer-hr {
        display: none !important;
    }
    
    /* Ẩn footer copyright trên mobile */
    #footer-copyright {
        display: none !important;
    }
    
    /* Căn giữa phần powered by trên mobile */
    .bg-dark .row.align-items-center .col-md-4:nth-child(3) {
        text-align: center !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .bg-dark .row.align-items-center .col-md-4:nth-child(3) .d-flex {
        justify-content: center !important;
    }
    
    /* Tối ưu thông tin liên hệ cho mobile */
    .bg-dark .col-lg-3:first-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }
    
    .bg-dark .col-lg-3:first-child h6 {
        font-size: 16px !important;
        margin-bottom: 15px !important;
        color: #fff !important;
    }
    
    .bg-dark .col-lg-3:first-child .contact-info p {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        color: #e9ecef !important;
    }
    
    .bg-dark .col-lg-3:first-child .contact-info i {
        color: #00CEC8 !important;
        width: 16px !important;
    }
    
    /* Tối ưu powered by section */
    .bg-dark .row.align-items-center .col-md-4:nth-child(3) .d-flex {
        font-size: 14px !important;
    }
    
    .bg-dark .row.align-items-center .col-md-4:nth-child(3) .logo-icon {
        width: 25px !important;
        height: 25px !important;
    }
    
    .bg-dark .row.align-items-center .col-md-4:nth-child(3) .logo-icon span {
        font-size: 12px !important;
    }
    
    /* Điều chỉnh padding trái phải cho container-fluid trên mobile */
    .container-fluid.mb-3 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Điều chỉnh padding cho main-wrapper trên mobile */
    .main-wrapper {
        padding: 0 8px !important;
    }
    
    /* Đảm bảo main-content không bị lệch */
    .main-content {
        padding: 0 8px !important;
    }
    
    /* Bỏ border cho bannerCarousel trên mobile */
    #bannerCarousel {
        border: none !important;
        background: none !important;
    }
    
    /* Đảm bảo các thẻ con trong banner-small-cards-home có kích thước bằng nhau */
    #banner-small-cards-home .col-4 {
        display: flex !important;
        flex-direction: column !important;
    }
    
    #banner-small-cards-home .col-4 .card {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 120px !important;
    }
    
    #banner-small-cards-home .col-4 a {
        display: flex !important;
        height: 100% !important;
    }
    
    /* Flash Sale Mobile Optimizations */
    #flashSaleMainHome {
        margin-top: -27px !important;
        padding: 0 8px !important;
    }
    
    #flashSaleMain {
        padding: 8px !important;
        margin: 0 !important;
        min-height: 700px !important;
        height: auto !important;
    }
    
    /* Đảm bảo carousel container không bị lệch */
    .product-carousel-container {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 650px !important;
        height: auto !important;
    }
    
    .product-carousel-container .carousel {
        margin: 0 !important;
        height: 100% !important;
    }
    
    .product-carousel-container .carousel-inner {
        padding: 0 !important;
        margin: 0 !important;
        height: 100% !important;
    }
    
    .product-carousel-container .carousel-item {
        height: 100% !important;
        min-height: 650px !important;
    }
    
    /* Flash Sale Title */
    .flash-sale-title {
        font-size: 16px !important;
    }
    
    .flash-sale-link {
        font-size: 12px !important;
    }
    
    /* Flash Sale Product Cards */
    .my-carousel-item-2 {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    
    .product-carousel-container .carousel-item .row {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .product-carousel-container .carousel-item .row .col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-bottom: 10px !important;
    }
    
    .flash-sale-product-card {
        margin-bottom: 10px !important;
        height: 100% !important;
        min-height: 320px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .flash-sale-product-image {
        height: 120px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }
    
    .flash-sale-card-body {
        padding: 8px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    
    .flash-sale-product-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
        height: 34px !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        flex-shrink: 0 !important;
    }
    
    .flash-sale-add-cart-btn {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
    
    .flash-sale-badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
    
    /* Flash Sale Countdown Timer */
    .flash-sale-countdown .countdown-timer {
        font-size: 10px !important;
    }
    
    .flash-sale-countdown .countdown-item .countdown-number {
        font-size: 12px !important;
        font-weight: bold !important;
    }
    
    .flash-sale-countdown .countdown-label {
        font-size: 9px !important;
    }
    
    /* Flash Sale Carousel Controls */
    .flash-sale-carousel-control {
        display: none !important;
    }
    
    /* Flash Sale Price Section */
    .flash-sale-price-section {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: auto !important;
        justify-content: center !important;
    }
    
    .flash-sale-price {
        text-align: center !important;
        width: 100% !important;
    }
    
    .flash-sale-final-price {
        font-size: 14px !important;
    }
    
    .flash-sale-original-price {
        font-size: 11px !important;
    }
    
    /* Ẩn promotional-banners-x trên mobile */
    #promotional-banners-x {
        display: none !important;
    }
    
    /* Ẩn button kham-pha-ngay trên mobile */
    .kham-pha-ngay {
        display: none !important;
    }
    
    /* Featured Categories Mobile Optimizations */
    .featured-categories-title {
        font-size: 16px !important;
    }
    
    .featured-categories-link {
        font-size: 12px !important;
    }
    
    .featured-category-card {
        min-height: 100px !important;
        padding: 15px 10px !important;
    }
    
    .featured-category-image {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 8px !important;
    }
    
    .featured-category-title {
        font-size: 12px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }
    
    /* Product Sections Mobile Optimizations */
    .card-mobile {
        padding: 15px !important;
    }
    
    .mobile-col-2 {
        padding: 4px !important;
    }
    
    /* Đảm bảo các section khác không bị lệch */
    .featured-categories .card-body,
    .product-sections .card-body {
        padding: 15px 8px !important;
    }
    
    .featured-categories .row,
    .product-sections .row {
        margin: 0 !important;
    }
    
    .featured-categories .col-lg-3,
    .product-sections .col-lg-3 {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    
    /* BestSeller Section */
    .bestseller-title {
        font-size: 16px !important;
        padding: 0 5px !important;
    }
    
    .bestseller-link {
        font-size: 12px !important;
    }
    
    .bestseller-product-card {
        margin-bottom: 10px !important;
    }
    
    .bestseller-product-image {
        height: 120px !important;
        object-fit: cover !important;
    }
    
    .bestseller-card-body {
        padding: 8px !important;
    }
    
    .bestseller-product-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
        height: 34px !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }
    
    .bestseller-add-cart-btn {
        font-size: 11px !important;
        padding: 6px 12px !important;
        width: 100% !important;
        max-width: 120px !important;
        margin: 0 auto !important;
    }
    
    .bestseller-badge, .bestseller-new-badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
    
    .bestseller-price-section {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        justify-content: center !important;
    }
    
    .bestseller-price {
        text-align: center !important;
        width: 100% !important;
    }
    
    .bestseller-final-price {
        font-size: 14px !important;
    }
    
    .bestseller-original-price {
        font-size: 11px !important;
    }
    
    /* New Products Section */
    .new-products-title {
        font-size: 16px !important;
    }
    
    .new-products-link {
        font-size: 12px !important;
    }
    
    .new-products-card {
        margin-bottom: 10px !important;
    }
    
    .new-products-image {
        height: 120px !important;
        object-fit: cover !important;
    }
    
    .new-products-card-body {
        padding: 8px !important;
    }
    
    .new-products-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        padding: 0 5px !important;
        margin-bottom: 8px !important;
        height: 34px !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }
    
    .new-products-add-cart-btn {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
    
    .new-products-badge, .new-products-new-badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
    
    .new-products-price-section {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
    }
    
    .new-products-final-price {
        font-size: 14px !important;
    }
    
    .new-products-original-price {
        font-size: 11px !important;
    }
    
    /* Tắt hover effects trên mobile để tránh rung động */
    .product-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    
    .product-card .btn-danger:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    
    .category-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    
    .flash-sale-product-card:hover,
    .bestseller-product-card:hover,
    .new-products-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    
    /* Tắt hover effects cho mobile logo và các button */
    .mobile-logo,
    .mobile-logo a,
    .mobile-logo a:hover,
    .mobile-logo a:active,
    .mobile-logo a:focus {
        transform: none !important;
        transition: none !important;
        filter: none !important;
    }
    
    .mobile-logo-image,
    .mobile-logo-image:hover,
    .mobile-logo-image:active,
    .mobile-logo-image:focus {
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }
    
    .mobile-menu-toggle:hover {
        transform: none !important;
    }
    
    .mobile-icon-btn:hover {
        transform: none !important;
    }
    
    /* Tắt tất cả hover effects trên mobile */
    *:hover {
        transform: none !important;
    }
    
    /* Ẩn sale-banner-v2 trên mobile */
    #sale-banner-v2 {
        display: none !important;
    }
    
    #sale-banner-v2-content {
        padding: 6px !important;
    }
    
    #sale-banner-v2 .card {
        margin-bottom: 5px !important;
    }
    
    #sale-banner-v2 .card-body {
        padding: 6px !important;
    }
    
    #sale-banner-v2 .card-title {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }
    
    #sale-banner-v2 .card-text {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }
    
    #sale-banner-v2 .btn {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
    
    #sale-banner-v2 img {
        height: 70px !important;
        object-fit: cover !important;
    }
    
    /* Điều chỉnh card-img-top-3 trên mobile */ 
    .card-img-top-3 {
        height: 176px !important;
    }

    .card-img-top-3-search{
        height: 165px !important;
    }

    .info-pro-2{
        height: auto !important;
        min-height: 57px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        text-align: center !important;
    }
    
    /* CSS cho phần phân loại trên mobile - kiểu gọn gàng */
    .classification-option {
        display: flex !important;
        width: 100% !important;
        min-width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        background-color: #fff !important;
        text-align: left !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        transition: all 0.3s ease !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .classification-option:hover {
        border-color: #00CEC8 !important;
        background-color: #f8f9fa !important;
    }
    
    .classification-option.selected {
        border-color: #00CEC8 !important;
        background-color: #e6fffe !important;
        color: #00CEC8 !important;
    }
    
    .classification-thumbnail {
        flex-shrink: 0 !important;
        width: 35px !important;
        height: 35px !important;
    }
    
    .classification-thumbnail img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 4px !important;
    }
    
    .classification-info {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .classification-info .fw-bold {
        font-size: 12px !important;
        font-weight: 600 !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    .classification-option small {
        display: block !important;
        margin-top: 2px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        color: #6c757d !important;
    }
    
    /* Layout cho các button phân loại - grid 1 cột trên mobile */
    .info-pro-2 .mt-2 {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        justify-content: stretch !important;
    }
    
    /* CSS cho phần màu sắc trên mobile */
    .color-option {
        display: inline-block !important;
        padding: 6px 12px !important;
        margin: 2px !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        background-color: #fff !important;
        font-size: 12px !important;
        text-align: center !important;
        transition: all 0.3s ease !important;
        min-width: 60px !important;
    }
    
    .color-option:hover {
        border-color: #00CEC8 !important;
        background-color: #f8f9fa !important;
    }
    
    .color-option.selected {
        border-color: #00CEC8 !important;
        background-color: #e6fffe !important;
        color: #00CEC8 !important;
    }
    
    /* Layout cho các button màu sắc - flex wrap */
    .info-pro-2 .mt-2:has(.color-option) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: flex-start !important;
    }
    
    /* Ẩn cart-desktop trên mobile */
    #cart-desktop {
        display: none !important;
    }
    
    /* Mobile Cart Styles */
    #cart-mobile {
        padding: 0 10px !important;
    }
    
    .mobile-cart-header {
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    .mobile-cart-item {
        border-radius: 8px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
        margin-bottom: 10px !important;
    }
    
    .mobile-cart-actions {
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    .mobile-empty-cart {
        background: white !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        margin: 10px !important;
    }
    
    /* Mobile quantity controls */
    .mobile-cart-item .quantity-controls button {
        border-radius: 4px !important;
    }
    
    .mobile-cart-item .quantity-controls input {
        border-radius: 4px !important;
    }
    
    /* Mobile cart actions buttons */
    .mobile-cart-actions .btn {
        border-radius: 6px !important;
        padding: 8px 12px !important;
    }
    
    /* Account Detail Page Mobile Styles */
    .account-page {
        padding: 0 10px !important;
    }
    
    .account-page .row {
        margin: 0 !important;
    }
    
    /* Sidebar Mobile */
    .account-page .col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    .account-sidebar .card {
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    .account-sidebar .card-body {
        padding: 15px !important;
    }
    
    .account-sidebar .nav-link {
        padding: 12px 15px !important;
        font-size: 14px !important;
        border-radius: 6px !important;
        margin-bottom: 5px !important;
    }
    
    .account-sidebar .nav-link i {
        font-size: 16px !important;
        width: 20px !important;
    }
    
    /* Content Area Mobile */
    .account-page .col-lg-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .account-page .card {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    .account-content .card-body {
        padding: 20px 15px !important;
    }
    
    /* User Info Card Mobile */
    .user-info-card {
        padding: 20px 15px !important;
    }
    
    .user-avatar {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.5rem !important;
        margin-bottom: 15px !important;
    }
    
    .user-info-card h6 {
        font-size: 16px !important;
        margin-bottom: 5px !important;
    }
    
    .user-info-card p {
        font-size: 14px !important;
        margin-bottom: 5px !important;
    }
    
    .user-info-card small {
        font-size: 12px !important;
    }
    
    /* Form Card Mobile */
    .form-card {
        padding: 20px 15px !important;
        margin-top: 15px !important;
    }
    
    .form-card .row {
        margin: 0 !important;
    }
    
    .form-card .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    .form-card .form-label {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
        color: #333 !important;
    }
    
    .form-card .form-control {
        padding: 12px 15px !important;
        font-size: 14px !important;
        border-radius: 6px !important;
        border: 1px solid #ddd !important;
    }
    
    .form-card .form-control:focus {
        border-color: #00CEC8 !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 206, 200, 0.25) !important;
    }
    
    /* Button Mobile */
    .btn-save {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        margin-top: 10px !important;
    }
    
    /* Alert Mobile */
    .alert {
        margin-bottom: 15px !important;
        padding: 12px 15px !important;
        font-size: 13px !important;
        border-radius: 6px !important;
    }
    
    .alert i {
        font-size: 14px !important;
    }
    
    .alert ul {
        padding-left: 15px !important;
        margin-top: 8px !important;
    }
    
    .alert li {
        font-size: 13px !important;
        margin-bottom: 3px !important;
    }
    
    .btn-close {
        font-size: 16px !important;
        padding: 8px !important;
    }
    
    /* Breadcrumb Mobile */
    .breadcrumb {
        padding: 10px 0 !important;
        font-size: 13px !important;
    }
    
    .breadcrumb-item a {
        color: #00CEC8 !important;
        text-decoration: none !important;
    }
    
    .breadcrumb-item.active {
        color: #6c757d !important;
    }
    
    /* Stats Card Mobile (if used) */
    .stats-card {
        padding: 15px !important;
        margin-bottom: 10px !important;
    }
    
    .stats-number {
        font-size: 18px !important;
    }
    
    .stats-label {
        font-size: 12px !important;
    }
    
    /* Empty State Mobile */
    .empty-state-card {
        padding: 30px 15px !important;
    }
    
    .empty-state-card h5 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
    
    .empty-state-card p {
        font-size: 14px !important;
        margin-bottom: 15px !important;
    }

    .card-img-top-2{
        height: 178px !important;
    }

    .gia-mobile-v2{
        padding: 0 5px !important;
    }
    
    /* Responsive adjustments for very small screens */
    @media (max-width: 480px) {
        .account-page {
            padding: 0 5px !important;
        }
        
        .account-content .card-body {
            padding: 15px 10px !important;
        }
        
        .form-card {
            padding: 15px 10px !important;
        }
        
        .user-info-card {
            padding: 15px 10px !important;
        }
        
        .user-avatar {
            width: 50px !important;
            height: 50px !important;
            font-size: 1.2rem !important;
        }
        
        .account-sidebar .card-body {
            padding: 10px !important;
        }
        
        .account-sidebar .nav-link {
            padding: 10px 12px !important;
            font-size: 13px !important;
        }
        
        .form-card .form-control {
            padding: 10px 12px !important;
            font-size: 13px !important;
        }
        
        .btn-save {
            padding: 10px !important;
            font-size: 13px !important;
        }

        #mobile-empty-cart-actions{
            padding: 10px !important;
            font-size: 13px !important;
        }

        .img-checkout{
            object-fit: contain !important;
        }

        .title-thank-you-mobile{
            text-align: center !important;
        }

        #mobile-account-sidebar-mobile{
            display: none !important;
        }

        .breadcrumb-account-mobile{
            padding: 5px !important;
        }

        .col-mobile-2{
            padding: 0 !important;
        }
        
        /* Extra small mobile - đảm bảo không bị lệch */
        .container-fluid.mb-3 {
            padding-left: 4px !important;
            padding-right: 4px !important;
        }
        
        .main-wrapper {
            padding: 0 4px !important;
        }
        
        .main-content {
            padding: 0 4px !important;
        }
        
        #flashSaleMainHome {
            padding: 0 4px !important;
        }
        
        #flashSaleMain {
            min-height: 650px !important;
        }
        
        .product-carousel-container {
            min-height: 600px !important;
        }
        
        .product-carousel-container .carousel-item {
            min-height: 600px !important;
        }
        
        .flash-sale-product-card {
            min-height: 290px !important;
        }
        
        .featured-categories .card-body,
        .product-sections .card-body {
            padding: 15px 4px !important;
        }
        
        /* Extra small mobile optimizations */
        .flash-sale-title {
            font-size: 14px !important;
        }
        
        .featured-categories-title, .bestseller-title, .new-products-title {
            font-size: 14px !important;
        }
        
        .flash-sale-product-image, .bestseller-product-image, .new-products-image {
            height: 156px !important;
        }
        
        .flash-sale-product-title, .bestseller-product-title, .new-products-title {
            font-size: 12px !important;
            height: 30px !important;
            padding: 0 5px !important;
        }
        
        .flash-sale-final-price, .bestseller-final-price, .new-products-final-price {
            font-size: 13px !important;
        }
        
        .flash-sale-original-price, .bestseller-original-price, .new-products-original-price {
            font-size: 10px !important;
        }
        
        /* Đảm bảo flash-sale-price-section căn giữa trên extra small mobile */
        .flash-sale-price-section {
            align-items: center !important;
            justify-content: center !important;
        }
        
        .flash-sale-price {
            text-align: center !important;
            width: 100% !important;
        }
        
        .featured-category-image {
            width: 35px !important;
            height: 35px !important;
        }
        
        .featured-category-title {
            font-size: 11px !important;
        }
        
        .flash-sale-add-cart-btn, .bestseller-add-cart-btn, .new-products-add-cart-btn {
            font-size: 10px !important;
            padding: 5px 10px !important;
            min-width: 80px !important;
            width: 100% !important;
            max-width: 100px !important;
            margin: 0 auto !important;
        }
        
        /* Hiển thị text trên mobile cho các nút add-cart */
        .flash-sale-add-cart-btn .d-md-none,
        .bestseller-add-cart-btn .mobile-cart-text,
        .new-products-add-cart-btn .mobile-cart-text {
            display: inline !important;
        }
        
        .flash-sale-add-cart-btn .d-none.d-md-inline,
        .bestseller-add-cart-btn .desktop-cart-text,
        .new-products-add-cart-btn .desktop-cart-text {
            display: none !important;
        }
        
        .flash-sale-badge, .bestseller-badge, .bestseller-new-badge, .new-products-badge, .new-products-new-badge {
            font-size: 9px !important;
            padding: 1px 4px !important;
        }
        
        /* Tắt hover effects trên extra small mobile */
        .product-card:hover,
        .category-card:hover,
        .flash-sale-product-card:hover,
        .bestseller-product-card:hover,
        .new-products-card:hover {
            transform: none !important;
            box-shadow: none !important;
        }
        
        .mobile-logo,
        .mobile-logo a,
        .mobile-logo a:hover,
        .mobile-logo a:active,
        .mobile-logo a:focus {
            transform: none !important;
            transition: none !important;
            filter: none !important;
        }
        
        .mobile-logo-image,
        .mobile-logo-image:hover,
        .mobile-logo-image:active,
        .mobile-logo-image:focus {
            transform: none !important;
            filter: none !important;
            transition: none !important;
            animation: none !important;
        }
        
        .mobile-menu-toggle:hover {
            transform: none !important;
        }
        
        .mobile-icon-btn:hover {
            transform: none !important;
        }
        
        *:hover {
            transform: none !important;
        }

        .featured-categories{
            margin-top: 10px !important;
        }
        
        /* CSS cho phần phân loại trên extra small mobile - gọn gàng */
        .info-pro-2 {
            padding: 6px !important;
            align-items: center !important;
            justify-content: center !important;
            text-align: center !important;
        }
        
        .classification-option {
            padding: 6px !important;
            font-size: 11px !important;
            margin: 0 !important;
            min-width: auto !important;
            gap: 6px !important;
        }
        
        .classification-thumbnail {
            width: 30px !important;
            height: 30px !important;
        }
        
        .classification-info .fw-bold {
            font-size: 11px !important;
            margin-bottom: 1px !important;
        }
        
        .classification-option small {
            font-size: 9px !important;
            margin-top: 1px !important;
        }
        
        .info-pro-2 .mt-2 {
            gap: 4px !important;
            flex-direction: column !important;
        }
        
        /* CSS cho phần màu sắc trên extra small mobile */
        .color-option {
            padding: 4px 8px !important;
            font-size: 11px !important;
            min-width: 50px !important;
            margin: 1px !important;
        }
        
        .info-pro-2 .mt-2:has(.color-option) {
            gap: 3px !important;
        }
    }
    
}