/*
Theme Name:           Flatsome
Theme URI:            http://flatsome.uxthemes.com
Author:               UX-Themes
Author URI:           https://uxthemes.com
Description:          Multi-Purpose Responsive WooCommerce Theme
Version:              3.20.7
Requires at least:    6.4
Requires PHP:         7.4
WC requires at least: 8.3
Text Domain:          flatsome
License:              https://themeforest.net/licenses
License URI:          https://themeforest.net/licenses
*/


/***************
All custom CSS should be added to Flatsome > Advanced > Custom CSS,
or in the style.css of a Child Theme.
***************/
/* Thin */
@font-face {
    font-family: 'SVN Gotham';
    src: url('./assets/fonts/SVN-Gotham/SVN-Gotham Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

/* Thin Italic */
@font-face {
    font-family: 'SVN Gotham';
    src: url('./assets/fonts/SVN-Gotham/SVN-Gotham Thin Italic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
}

/* Light */
@font-face {
    font-family: 'SVN Gotham';
    src: url('./assets/fonts/SVN-Gotham/SVN-Gotham Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

/* Light Italic */
@font-face {
    font-family: 'SVN Gotham';
    src: url('./assets/fonts/SVN-Gotham/SVN-Gotham Light Italic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

/* Book */
@font-face {
    font-family: 'SVN Gotham';
    src: url('./assets/fonts/SVN-Gotham/SVN-Gotham Book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

/* Book Italic */
@font-face {
    font-family: 'SVN Gotham';
    src: url('./assets/fonts/SVN-Gotham/SVN-Gotham Book Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}

/* Regular */
@font-face {
    font-family: 'SVN Gotham';
    src: url('./assets/fonts/SVN-Gotham/SVN-Gotham Regular.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: 'SVN Gotham';
    src: url('./assets/fonts/SVN-Gotham/SVN-Gotham Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

/* Bold Italic */
@font-face {
    font-family: 'SVN Gotham';
    src: url('./assets/fonts/SVN-Gotham/SVN-Gotham Bold Italic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}

/* Black */
@font-face {
    font-family: 'SVN Gotham';
    src: url('./assets/fonts/SVN-Gotham/SVN-Gotham Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

/* Black Italic */
@font-face {
    font-family: 'SVN Gotham';
    src: url('./assets/fonts/SVN-Gotham/SVN-Gotham Black Italic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
}
.card-clean {
    background: #fff;
    border: none;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(204, 204, 204,.08);
    transition: all .3s ease;
    cursor: pointer;
	color:var(--primary-color);
}

.portfolio-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 24px;
}

/* ===== Card ===== */
.portfolio-item {
    background: #fff;
    border: 1px solid #E4E7EC;
    border-radius: 14px;
    overflow: hidden;
    transition: all .25s ease;
}

.portfolio-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .08);
}

.portfolio-content {
    padding: 24px;
}

/* ===== Title + Badge ===== */
.portfolio-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.portfolio-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #101828;
	text-align: left;
    width: fit-content;
}

.portfolio-title h3,
.portfolio-title a {
    margin: 0;
    color: inherit;
    text-decoration: none;
}

/* ===== Category Badge ===== */
.portfolio-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 5px 14px;

    background: #ECFDF3;
    color: #12B76A;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.portfolio-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #12B76A;
    border-radius: 50%;
}

/* ===== Location ===== */
.portfolio-location {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 24px;

    color: #475467;
    font-size: 18px;
}

.portfolio-location svg {
    width: 18px;
    height: 18px;
    color: #98A2B3;
    flex-shrink: 0;
}

/* ===== Button ===== */
.portfolio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 22px;

    border: 1px solid #D0D5DD;
    border-radius: 10px;

    background: #fff;

    color: #12B76A;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;

    transition: all .25s ease;
}

.portfolio-btn:hover {
    background: #12B76A;
    color: #fff;
    border-color: #12B76A;
}

/* ===========================
   AJAX Loading
=========================== */

.portfolio-list{
    position: relative;
    transition: opacity .25s ease;
	margin-top:15px;
}

.portfolio-list.loading{
    pointer-events:none;
}

/* Làm mờ list cũ */
.portfolio-list.loading .portfolio-grid{
    opacity:.35;
    filter: blur(1px);
}

/* Overlay */
.portfolio-loading{
    position:absolute;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(255,255,255,.65);
    backdrop-filter:blur(2px);

    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:99;
}

.portfolio-list.loading .portfolio-loading{
    opacity:1;
    visibility:visible;
}

/* Spinner */

.portfolio-spinner{
    width:46px;
    height:46px;

    border-radius:50%;

    border:4px solid #e5e5e5;
    border-top-color:#12B76A;

    animation:portfolio-spin .7s linear infinite;
}
.portfolio-search-wrapper{
    display:flex;
    flex-direction:column;
    gap:32px;
}
/* ===========================
   Search
=========================== */

.portfolio-search {
    position: relative;
    width: 100%;
}
#portfolio-search-input{
	padding: 25px 25px;    
	border-radius: 12px;
}
.portfolio-search-input {
    width: 100%;
    height: 58px;

   

    border: 1px solid #E4E7EC;
    border-radius: 14px;
    background: #fff;

    font-size: 16px;
    font-weight: 400;
    color: #101828;

    transition: all .25s ease;
    box-shadow: 0 2px 8px rgba(16,24,40,.04);

    box-sizing: border-box;
}

.portfolio-search-input::placeholder {
    color: #98A2B3;
}

.portfolio-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(18,183,106,.12);
}


@keyframes portfolio-spin{
    to{
        transform:rotate(360deg);
    }
}

@media (max-width: 849px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .portfolio-content {
        padding: 20px;
    }
}

/* Mobile */
@media (max-width: 549px) {

   .portfolio-filter-wrapper .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

   .portfolio-filter-wrapper .portfolio-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

   .portfolio-filter-wrapper .portfolio-title {
        font-size: 18px;
    }

   .portfolio-filter-wrapper .portfolio-location {
        font-size: 16px;
        margin-bottom: 20px;
    }

  .portfolio-filter-wrapper .portfolio-btn {
        width: 100%;
        justify-content: center;
	  
    }
	
	.portfolio-filter-wrapper .portfolio-filter-buttons{
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        --webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }

    .portfolio-badge::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
}