/* ==========================================================================
   VU DUONG COMPUTER - MOBILE RESPONSIVE ENHANCEMENT STYLESHEET
   Supports Smartphones, Tablets & Modern Mobile Browsers
   ========================================================================== */

/* Universal mobile-friendly sizing */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   TABLET & MOBILE BREAKPOINT (<= 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Header layout */
    .layout-top, .layout-header, #layout-header {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        position: relative !important;
        background-size: cover !important;
        background-position: center top !important;
        padding: 0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
    }
    
    .inner-wrap, #officialHeader {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 6px 10px !important;
        box-sizing: border-box !important;
    }
    
    /* Logo on Top Left */
    #officialHeader .logo-container,
    .logo-container {
        order: 1 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #officialHeader .logo-container img,
    .logo-container img {
        max-height: 42px !important;
        max-width: 140px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* Account & Shopping Cart Quick Actions on Top Right */
    #officialHeader .operate-container {
        order: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
        gap: 6px !important;
    }

    #officialHeader #ThemeShoppingCart {
        order: 3 !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 0 0 6px !important;
        padding: 0 !important;
    }

    /* Row 2: Navigation Pills (Sản phẩm, Đang hot, Mới Nhất, Diễn Đàn) */
    #officialHeader .layout-nav,
    #officialHeader .layout-nav-menu,
    .layout-nav-menu,
    .layout-nav {
        order: 10 !important;
        display: inline-flex !important;
        width: auto !important;
        margin: 6px 0 0 0 !important;
        padding: 0 !important;
    }

    .horizontal-ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        padding: 2px 0 !important;
        margin: 0 !important;
        list-style: none !important;
        gap: 6px !important;
        scrollbar-width: none !important;
    }

    .horizontal-ul::-webkit-scrollbar {
        display: none !important;
    }

    .horizontal-li {
        display: inline-flex !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .horizontal-link {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 6px 12px !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        color: #0369a1 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
        border: 1px solid rgba(255, 255, 255, 0.7) !important;
        text-decoration: none !important;
        line-height: 1.2 !important;
        transition: all 0.2s ease !important;
    }

    .horizontal-link:active,
    .horizontal-link:hover {
        background: #ffffff !important;
        color: #e11d48 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    }

    /* Slider responsive banner */
    #jssor_1 {
        width: 100% !important;
        max-width: 100% !important;
        height: 160px !important;
        margin: 4px auto 8px auto !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    #jssor_1 [data-u="slides"] {
        width: 100% !important;
        height: 160px !important;
    }

    #jssor_1 img {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Left category menu collapsible */
    #category-menu-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 6px auto 10px auto !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
    }

    .mobile-cat-toggle-bar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
        color: #ffffff !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        cursor: pointer !important;
        box-shadow: 0 2px 6px rgba(3, 105, 161, 0.25) !important;
        user-select: none !important;
    }

    #div-head-tree-menu {
        display: none !important;
    }

    #div-tree-menu {
        display: none; /* hidden until tapped on mobile */
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        padding: 8px 12px !important;
        margin: 6px auto 10px auto !important;
        border-radius: 8px !important;
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
        box-sizing: border-box !important;
    }

    #tree-menu {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #tree-menu li {
        list-style: none !important;
        padding: 9px 4px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        font-size: 13.5px !important;
    }

    #tree-menu li a {
        color: #1e293b !important;
        font-size: 13.5px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        text-decoration: none !important;
    }

    /* Main body content reset fixed desktop margins */
    .main-content-body, 
    div[style*="margin-left:350px"],
    div[style*="margin-left: 350px"],
    div[style*="padding-left:250px"],
    div[style*="padding-left: 250px"],
    div[style*="width:80%"],
    div[style*="width:75%"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 6px !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    /* Responsive 2-Column Product Grid Table - Full Width, No Offset */
    .product-grid-table {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border-collapse: collapse !important;
        box-sizing: border-box !important;
    }

    .product-grid-table > tbody {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .product-grid-table > tbody > tr {
        display: contents !important;
    }

    .product-grid-cell,
    .product-grid-table td {
        display: flex !important;
        flex-direction: column !important;
        width: calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        flex: 0 0 calc(50% - 4px) !important;
        height: auto !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Modern E-Commerce Product Card Item */
    .product-card-box,
    .showhim {
        width: 100% !important;
        height: 100% !important;
        min-height: 275px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        padding: 8px !important;
        background: #ffffff !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Product Thumbnail */
    .product-img-wrap,
    .showhim .imgs {
        width: 100% !important;
        height: 130px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f8fafc !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        margin-bottom: 6px !important;
    }

    .product-thumb-img,
    .showhim img {
        max-width: 100% !important;
        max-height: 120px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Product Title */
    .product-title-wrap,
    .showhim a.product-title-wrap {
        text-decoration: none !important;
        display: block !important;
        width: 100% !important;
        margin-bottom: 4px !important;
    }

    .product-card-box .detail2,
    .showhim .detail2 {
        font-size: 12.5px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        color: #1e293b !important;
        margin: 0 !important;
        padding: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        height: 34px !important;
        text-align: left !important;
    }

    /* Price Section */
    .card-price-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        min-height: 36px !important;
        margin: 4px 0 !important;
    }

    .old-price {
        font-size: 11px !important;
        color: #94a3b8 !important;
        text-decoration: line-through !important;
        line-height: 1.2 !important;
    }

    .current-price {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #e11d48 !important;
        line-height: 1.2 !important;
    }

    .price-contact {
        color: #0284c7 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    /* Card Action (Buy Button) */
    .card-action-wrap {
        width: 100% !important;
        margin-top: auto !important;
    }

    .card-buy-form {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .btn-buy-card {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        width: 100% !important;
        height: 36px !important;
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
        color: #ffffff !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        border: none !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        box-shadow: 0 2px 4px rgba(234, 88, 12, 0.25) !important;
        text-transform: none !important;
    }

    .btn-buy-card:active {
        background: #c2410c !important;
        transform: scale(0.98) !important;
    }

    /* Hide desktop hover overlays and unwanted iframes on mobile */
    .showhim .showme {
        display: none !important;
    }

    .showhim iframe {
        display: none !important;
    }

    .menu-list, .menu-list.fix-menu, .fix-menu {
        display: none !important;
    }

    /* Pagination container */
    .pagination-container,
    div[style*="margin-left:400px"],
    div[style*="margin-left: 400px"] {
        margin-left: 0 !important;
        width: 100% !important;
        text-align: center !important;
        overflow-x: auto !important;
        padding: 15px 5px !important;
        box-sizing: border-box !important;
    }

    .pagination-container table,
    div[style*="margin-left:400px"] table,
    div[style*="margin-left: 400px"] table {
        width: 100% !important;
        display: table !important;
    }

    .pagination-container a,
    div[style*="margin-left:400px"] a,
    div[style*="margin-left: 400px"] a {
        display: inline-block !important;
        padding: 5px 9px !important;
        margin: 2px !important;
        background: #f1f5f9 !important;
        color: #0284c7 !important;
        border-radius: 4px !important;
        font-size: 13px !important;
        text-decoration: none !important;
    }

    /* Product Detail page (viewdetail.asp) */
    div[style*="width:350px;float:left"],
    div[style*="width: 350px;float:left"],
    div[style*="width:40%"],
    div[style*="width: 40%"] {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #loadarea {
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    #loadarea img {
        width: 100% !important;
        max-width: 280px !important;
        height: auto !important;
        float: none !important;
        margin: 0 auto !important;
    }

    div[style*="padding-left:345px"] {
        padding-left: 0 !important;
        width: 100% !important;
    }

    /* Shopping Cart (shop_cart.asp) */
    div[style*="width:730px; margin-left:20%"],
    div[style*="width: 730px; margin-left: 20%"],
    div[style*="width:730px"],
    div[style*="width: 730px"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-top: 15px !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    .form-card, 
    div[style*="width:430px; float:left; left:25%"] {
        width: 95% !important;
        max-width: 430px !important;
        float: none !important;
        left: 0 !important;
        margin: 20px auto !important;
    }

    /* Breadcrumbs on mobile */
    .bar_menus {
        width: 100% !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* ==========================================================================
       TRIỆT TIÊU HOÀN TOÀN THANH MÀU ĐEN NGANG CỐ ĐỊNH TRÊN MOBILE
       (Eliminate Fixed Black Floating Footer Bar on Mobile Screens)
       ========================================================================== */
    .footer-fix-bottom,
    footer.footer-fix-bottom,
    .layout-footer.footer-fix-bottom,
    .layout-fix-footer,
    .hidden-fix {
        position: static !important;
        bottom: auto !important;
        width: 100% !important;
        z-index: 1 !important;
        display: block !important;
    }

    .layout-footer .footer-top,
    .footer-top,
    .footer-fix-bottom .footer-top {
        display: none !important; /* Ẩn vĩnh viễn thanh đen ngang cố định */
    }

    .layout-footer, .footer_main {
        width: 100% !important;
        padding: 10px !important;
        background: #f8fafc !important;
        box-sizing: border-box !important;
    }

    .footer-content-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .footer-left, .footer-center, .footer-right {
        width: 100% !important;
        float: none !important;
        margin-bottom: 15px !important;
    }

    /* Floating Chat icon */
    div[style*="position:fixed; z-index:9984; top:75%; right:10px"],
    div[style*="position: fixed; z-index: 9984"] {
        top: auto !important;
        bottom: 25px !important;
        right: 12px !important;
        z-index: 9999 !important;
    }

    div[style*="position:fixed; z-index:9984; top:75%; right:10px"] img {
        width: 44px !important;
        height: 44px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
        border-radius: 50% !important;
    }
}

/* ==========================================================================
   EXTRA SMALL SCREENS (<= 480px, compact smartphones)
   Maintains crisp 2-column e-commerce grid on mobile
   ========================================================================== */
@media screen and (max-width: 480px) {
    .product-grid-cell,
    .product-grid-table td {
        width: calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        flex: 0 0 calc(50% - 4px) !important;
    }
    
    .product-card-box,
    .showhim {
        padding: 6px !important;
        min-height: 260px !important;
    }

    .product-img-wrap,
    .showhim .imgs {
        height: 115px !important;
    }

    .product-thumb-img,
    .showhim img {
        max-height: 105px !important;
    }

    .product-card-box .detail2,
    .showhim .detail2 {
        font-size: 11.5px !important;
        height: 32px !important;
    }

    .current-price {
        font-size: 13px !important;
    }

    .btn-buy-card {
        height: 32px !important;
        font-size: 11.5px !important;
    }
}