/* // X-Small devices (portrait phones, less than 576px) */

@media (max-width: 575.98px) {
    .person-list-h-535 {
        height: auto;
    }

    .no-message {
        font-size: 24px;
        line-height: 36px;
    }

    .no-message-des {
        font-size: 14px;
        line-height: 22px;
    }

    /* content */
    .hero-rating {
        border-left: 0;
    }

    .hero-one-title {
        font-size: 48px;
        line-height: 1.4;
    }

    .hero-form-wrapper .form-control {
        border-left: 0;
    }

    .hero-form-wrapper .form-select {
        display: none;
    }

    .py-110 {
        padding: 50px 0;
    }

    .pt-110 {
        padding-top: 50px;
    }

    .blog-details-title {
        font-size: 26px;
        line-height: 1.4;
    }

    .service-details-title {
        font-size: 24px;
        line-height: 1.3;
    }

    .border-end {
        border-right: 0 !important;
    }

    .cta-counter-title,
    .section-title {
        font-size: 26px;
        line-height: 1.5;
    }

    .company-profile-card-title,
    .job-wage,
    .text-24,
    .service-card-price {
        font-size: 18px;
    }

    .blog-title a,
    .footer-widget-title,
    .feature-card-title,
    .job-post-title,
    .service-details-subtitle,
    .freelancer-name a {
        font-size: 20px;
    }

    .service-review-count {
        width: 100%;
    }

    .faq-accordions .accordion .accordion-item .accordion-button,
    .footer-nav-list .footer-nav-list-item .footer-nav-link,
    .text-18 {
        font-size: 16px;
    }

    .job-posts-container,
    .review-card {
        padding: 30px;
    }
}


/* // Small devices (landscape phones, less than 768px) */

@media (max-width: 767.98px) {
    .hero-one {
        padding-top: 20px;
    }

    .hero-one-title {
        font-size: 42px;
    }

    .hero-one-img {
        max-width: 100%;
    }

    /* content */
    .hero-two-title {
        font-size: 40px;
        line-height: 1.4;
    }

    /* Cta */
    .cta-wrapper {
        padding: 20px;
    }

    .custom-dropdown.dropdown {
        width: 100%;
    }

    .cta-area-bg {
        padding: 35px;
    }

    .cta-counter-item {
        width: 100%;
    }

    .section-title-light {
        font-size: 30px;
        line-height: 1.3;
    }

    .top-seller-name {
        font-size: 18px;
    }

    .job-post-horizontal-title a {
        line-height: 28px;
        font-size: 16px;
    }

    .feature-category-link a,
    .service-card-author-name,
    .service-card-title {
        font-size: 16px;
    }
}


/* // Medium devices (tablets, less than 992px) */

@media (max-width: 991.98px) {

    /* content */
    .border-end {
        border-right: 0 !important;
    }

    .custom-dropdown-toggle.dropdown-toggle {
        width: 100%;
    }

    .pb-150 {
        padding-bottom: 60px;
    }

    .py-110 {
        padding: 60px 0;
    }

    .pt-110 {
        padding-top: 60px;
    }

    .about-company {
        padding-top: 20px;
    }
}


/* // Large devices (desktops, less than 1200px) */

@media (max-width: 1199.98px) {
    .hero-two {
        padding: 150px 0 0 0;
    }

    /* content */
    .hero-two-img {
        position: relative;
        transform: none;
    }

    .dashboard-main {
        margin-left: 0;
    }

    .dashboard-header {
        margin-left: 0;
    }
}


/* // X-Large devices (large desktops, less than 1400px) */

@media (max-width: 1399.98px) {}

@media (max-width: 1440px) {}

/* ========== TABLET RESPONSIVE FIXES (768px - 991px) ========== */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* Mobile sidebar - đảm bảo hiển thị đúng trên tablet */
    .mobile-sidebar {
        display: block !important;
        width: 320px;
        /* Rộng hơn cho tablet */
    }

    /* Mobile header - hiện trên tablet */
    .mobile-header {
        display: block !important;
    }

    /* Desktop header - ẩn trên tablet */
    .header-primary {
        display: none !important;
    }

    /* Overlay styling */
    .sidebar-overlay {
        z-index: 10000 !important;
    }

    /* Fix sidebar z-index */
    .mobile-sidebar.show {
        transform: translateX(0) !important;
        z-index: 10001 !important;
    }

    /* Mobile header icons - tăng khoảng cách cho tablet */
    .mh-icons {
        gap: 12px;
    }

    .mh-icon-btn {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    /* User info trên mobile header - hiện đầy đủ hơn trên tablet */
    .mh-user {
        max-width: 200px;
        padding: 6px 14px 6px 6px;
    }

    .mh-avatar {
        width: 38px;
        height: 38px;
    }

    .mh-name {
        font-size: 13px;
    }

    .mh-balance {
        font-size: 12px;
    }

    /* Menu button */
    .mh-menu-btn {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    /* Mobile sidebar menu - tăng padding cho tablet */
    .mobile-sidebar-menu li a {
        padding: 14px 24px;
        font-size: 15px;
    }

    .mobile-sidebar-menu .submenu li a {
        padding: 12px 24px 12px 56px;
        font-size: 14px;
    }

    /* User section trong sidebar */
    .mobile-sidebar-user {
        padding: 18px 24px;
    }

    .mobile-sidebar-user img {
        width: 50px;
        height: 50px;
    }

    .mobile-sidebar-user .user-name {
        font-size: 15px;
    }

    .mobile-sidebar-user .user-balance {
        font-size: 16px;
    }

    /* Login buttons */
    .mobile-sidebar-login {
        padding: 18px 24px;
    }

    .mobile-sidebar-login .btn-login,
    .mobile-sidebar-login .btn-register {
        padding: 12px;
        font-size: 15px;
    }

    /* Main content padding khi có sidebar */
    main,
    .main-content {
        transition: margin-left 0.3s ease;
    }

    /* Grid layouts - điều chỉnh cho tablet */
    .col-xl-3 {
        flex: 0 0 auto;
        width: 50%;
    }

    .row>.col-lg-4 {
        flex: 0 0 auto;
        width: 50%;
    }
}

/* ========== SMALL TABLET (768px - 850px) ========== */
@media (min-width: 768px) and (max-width: 850px) {
    .mobile-sidebar {
        width: 280px;
    }

    .mh-user-info {
        display: none;
        /* Ẩn tên user trên small tablet để gọn */
    }

    .mh-user {
        padding: 5px;
        border-radius: 50%;
    }

    .mh-avatar {
        width: 36px;
        height: 36px;
    }
}

/* ========== LARGE TABLET / SMALL DESKTOP (992px - 1199px) ========== */
@media (min-width: 992px) and (max-width: 1199.98px) {

    /* Desktop header hiện nhưng cần tối ưu */
    .header-primary .navbar-nav .nav-link {
        font-size: 13px;
        padding: 8px 10px;
    }

    .header-primary .navbar-right .dropdown-toggle span p:first-child {
        font-size: 12px;
    }

    .header-primary .navbar-right .dropdown-toggle span p:last-child {
        font-size: 11px;
    }

    .header-primary .navbar-right .dropdown-toggle img {
        width: 30px;
        height: 30px;
    }

    /* Giảm gap giữa nav items */
    .header-primary .navbar-nav {
        gap: 2px;
    }
}

/* ========== iPAD PRO PORTRAIT (1024px width) ========== */
@media (min-width: 992px) and (max-width: 1024px) {

    /* Product grid - 3 columns */
    .grid-item,
    article.grid-item {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }

    /* Category slider - 4 items */
    .service-sliders .service-box {
        min-width: 200px;
    }

    /* Header adjustments */
    .header-primary .navbar-nav .nav-link {
        font-size: 12px;
        padding: 8px 8px;
    }

    /* Filter buttons - wrap nicely */
    .filters-btns {
        flex-wrap: wrap;
        gap: 8px !important;
    }

    .service-filter-btn {
        font-size: 13px;
        padding: 8px 14px;
    }
}

/* ========== iPAD PORTRAIT (750px - 991px) - Adjusted for scrollbar ========== */
@media (min-width: 750px) and (max-width: 991.98px) {

    /* Product grid - 2 columns on portrait tablets */
    .grid-item,
    article.grid-item,
    .row>article.grid-item,
    .services-filter article.grid-item,
    article.col-xl-3,
    article.col-lg-4,
    article.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        min-width: 0 !important;
    }

    /* Section title adjustments */
    .section-title {
        font-size: 24px;
    }

    .section-desc {
        font-size: 14px;
    }

    /* Category cards - ensure 3 visible */
    .service-sliders {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 15px;
        padding-bottom: 10px;
    }

    .service-sliders .service-box {
        flex: 0 0 auto;
        width: 200px;
        scroll-snap-align: start;
    }

    /* Promo banners */
    .promo-banner {
        padding: 16px 20px;
    }

    .promo-text h4 {
        font-size: 16px;
    }

    .promo-text p {
        font-size: 13px;
    }

    /* Product cards adjustments */
    .gigs-grid {
        margin-bottom: 20px;
    }

    .gigs-content {
        padding: 12px;
    }

    .gigs-title h3 a {
        font-size: 14px;
    }

    /* Filter buttons - horizontal scroll on narrow tablets */
    .filters-btns {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .service-filter-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Breadcrumb adjustments */
    .breadcrumb-title {
        font-size: 24px;
        line-height: 1.3;
    }

    /* Modal adjustments */
    .modal-dialog {
        max-width: 600px;
    }

    /* Service widget on product detail */
    .service-widget {
        padding: 20px;
    }

    /* Footer adjustments */
    .footer-widget {
        margin-bottom: 30px;
    }
}

/* ========== iPAD PRO LANDSCAPE (1366px width) ========== */
@media (min-width: 1024px) and (max-width: 1400px) {

    /* Product grid - 4 columns */
    .services-filter .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    /* Ensure proper spacing */
    .py-110 {
        padding: 80px 0;
    }

    /* Navbar adjustments */
    .header-primary .navbar-nav .nav-link {
        padding: 10px 12px;
    }
}