/* Hide mobile grid on desktop */
#portfolio-grid-mobile {
    display: none !important;
}
.portfolio-filter {
background: #181817;
padding: 12px 20px;
border: 1px solid #696969;
display: flex;
align-items: center;
gap: 10px;
border-radius: 16px;
margin-bottom: 20px;
width: fit-content;
justify-self: center;
}

.portfolio-filter button,
.portfolio-filter select {
background: none !important;
color: #fff !important;
box-shadow: none !important;
padding: 6px 10px;
border: none;
border-radius: 4px;
font-size: 13px;
cursor: pointer;
min-width: 108px;
min-height: 0;
line-height: 1.5;
text-transform: none;
font-weight: 400;
text-align: center;
margin: 0;
}

.portfolio-filter option {
background: #000 !important;
color: #fff !important;
}

.portfolio-filter button:hover,
.portfolio-filter select:hover {
color: #22c55e;
}

.portfolio-filter button.active {
color: #22c55e;
}

/* Desktop Grid */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 36px;
}

/* Mobile Grid - Ẩn mặc định */
.portfolio-grid-mobile {
display: none;
}

.portfolio-grid>p {
text-align: center;
}

.portfolio-item {
background: #282827;
border-radius: 16px;
overflow: hidden;
padding-bottom: 10px;
transition: 0.3s all ease-in-out;
border: 0.14px solid #676767;
}

.portfolio-item:hover {
transform: scale(1.02);
box-shadow: 0 0 10px 0 rgba(34, 197, 94, 0.5);
}

.portfolio-item .thumb {
position: relative;
}

.portfolio-item img {
width: 100%;
display: block;
aspect-ratio: 273 / 205;
object-fit: cover
}

.portfolio-item .badge {
position: absolute;
top: 8px;
right: 8px;
background: #14532d;
color: #fff;
padding: 3px 8px;
font-size: 12px;
border-radius: 99px;
width: fit-content;
height: fit-content;
border: 1px solid #22c55e;
}

.portfolio-item .content {
padding: 10px 15px;
font-size: 13px;
color: #fff;
}

.portfolio-item h4 {
font-size: 22.22px;
}

.portfolio-item .copy-text {
background: #22c55e;
color: #0A0B0B;
padding: 5px 8px;
font-size: 12px;
border-radius: 3px;
min-width: 90px;
display: flex;
justify-content: space-between;
line-height: 1;
}

.portfolio-item .buttons {
display: flex;
gap: 8px;
margin-top: 10px;
}

.portfolio-item .btn {
display: inline-block;
text-align: center;
border-radius: 4px;
font-size: 13px;
padding: 6px 10px;
text-decoration: none;
transition: 0.3s all ease-in-out;
}

.portfolio-item .btn.yellow {
background: #22c55e;
color: #181817;
width: 45%;
}

.portfolio-item .btn.yellow img {
display: inline;
width: 5px;
height: 21px;
object-fit: contain;
}

.portfolio-item .btn.yellow:hover {
color: #000;
background: #22c55ebf;
}

.portfolio-item .btn.outline {
background-color: #454544;
color: #fff;
width: 55%;
}

.portfolio-item .btn.outline:hover {
background: #454444a3;
}

.portfolio-item .copy-icon {
cursor: pointer;
margin-left: 4px;
}

.portfolio-item .pagination {
margin-top: 20px;
text-align: center;
}

.portfolio-item .page-num {
background: none;
border: 1px solid #444;
color: #fff;
padding: 6px 10px;
margin: 0 4px;
border-radius: 4px;
cursor: pointer;
}

.page-num:hover {
background: #22c55e;
color: #181817;
}

.filter-group {
/* Giữ nguyên như cũ */
}

.portfolio-filter .filter-group label {
color: #fff;
font-size: 13px;
}

.portfolio-filter *:hover {
color: #fcd635 !important;
}

.portfolio-filter .filter-select,
#sort-fee {
color: #fff;
border-radius: 4px;
padding: 4px 6px;
font-size: 13px;
padding-right: 20px;
background-image: url("/wp-content/uploads/2025/10/dropdown.svg") !important;
background-size: 12px !important;
background-repeat: no-repeat !important;
background-position: center right !important;
background-color: transparent !important;
box-shadow: none !important;
}

.portfolio-filter .filter-select optgroup {
background-color: #181817;
}

.portfolio-filter .filter-select option {
text-align: left;
}

.custom-dropdown,
.custom-dropdown-mb{
position: relative;
display: inline-block;
}

.custom-dropdown .dropdown-toggle,
.custom-dropdown-mb .dropdown-toggle-mb{
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
white-space: nowrap;
transition: all 0.3s;
}

.custom-dropdown .dropdown-toggle:hover,
.custom-dropdown-mb .dropdown-toggle-mb:hover{
background: #2a2a28;
}

.custom-dropdown .dropdown-arrow,
.custom-dropdown-mb .dropdown-arrow{
width: 12px;
height: 6px;
transition: transform 0.3s;
}

.custom-dropdown.active .dropdown-arrow,
.custom-dropdown-mb.active .dropdown-arrow{
transform: rotate(180deg);
}

.custom-dropdown .dropdown-menu,
.custom-dropdown-mb .dropdown-menu-mb{
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: max-content;
background: #1E1E1C;
border: 1px solid rgba(180, 180, 180, 0.5);
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: none;
z-index: 900;
overflow-y: auto;
padding: 15px 18px;
}

.custom-dropdown.active .dropdown-menu,
.custom-dropdown-mb.active .dropdown-menu-mb{
display: block;
}

.custom-dropdown .dropdown-item,
.custom-dropdown-mb .dropdown-item-mb{
padding: 6px 15px;
cursor: pointer;
transition: background 0.2s;
font-size: 14px;
color: white;
white-space: nowrap;
border-radius: 6px
}

.custom-dropdown .dropdown-item:hover,
.custom-dropdown-mb .dropdown-item-:hover{
background: #2a2a28;
}

/* Mặc định: ẩn mobile grid trên desktop */
#portfolio-grid-mobile {
    display: none !important;
}

/* ===== MOBILE STYLES ===== */
@media (max-width: 768px) {
    /* Ẩn desktop grid */
    #portfolio-grid {
        display: none !important;
    }
    
    /* Hiển thị mobile grid */
    #portfolio-grid-mobile {
        display: block !important;
    }
    
    .portfolio-filter {
        gap: 5px !important;
        flex-wrap: wrap;
        width: 100%;
        padding: 10px 15px;
    }
    
    .portfolio-filter button, 
    .portfolio-filter select {
        min-width: 0;
        width: fit-content;
        font-size: 11px !important;
        padding: 6px 8px;
    }
    
    .custom-dropdown .dropdown-toggle {
        gap: 3px;
        font-size: 11px;
    }
    
    .custom-dropdown .dropdown-arrow {
        width: 8px;
        height: 5px;
    }
    
    /* Category Section */
    .category-section {
        margin-bottom: 30px;
    }
    
    .category-section h3 {
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 15px;
        padding-left: 15px;
    }
    
    .category-section .no-items {
        color: #999;
        font-size: 13px;
        text-align: center;
        padding: 20px;
    }
    
    /* Horizontal Scroll Container */
    .category-scroll-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding: 0 15px 15px 15px;
        -webkit-overflow-scrolling: touch;
    }
    
    .category-scroll-container .portfolio-item {
        flex: 0 0 85%;
        max-width: 320px;
        scroll-snap-align: start;
    }
    
    /* Custom scrollbar */
    .category-scroll-container::-webkit-scrollbar {
        height: 4px;
    }
    
    .category-scroll-container::-webkit-scrollbar-track {
        background: #1f1f1e;
        border-radius: 10px;
        margin: 0 15px;
    }
    
    .category-scroll-container::-webkit-scrollbar-thumb {
        background: #22c55e;
        border-radius: 10px;
    }
    
    /* Portfolio Item Adjustments */
    .portfolio-item h4 {
        font-size: 18px;
    }
    
    .portfolio-item .content {
        padding: 10px;
        font-size: 12px;
    }
    
    .portfolio-item .btn {
        font-size: 11px;
        padding: 5px 8px;
    }
    
    .portfolio-item .btn.yellow img {
        width: 4px;
        height: 18px;
    }
    
    /* Ẩn pagination trên mobile */
    .portfolio-pagination {
        display: none !important;
    }
}