/*
Theme Name: Bao bì
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
:root {
    --primary-color: #224076;
    --secondary-color: #FF7B00;
    --hot-red: #E31837;          /* Đỏ nóng */
    --bright-orange: #FF6B35;    /* Cam sáng */
    --deep-orange: #FF8C42;      /* Cam đậm */
    --light-orange: #FFF3E0;     /* Cam nhạt cho background */
    --warm-yellow: #FFB84D;      /* Vàng ấm */
    --primary-orange: #ff7e46;
    --primary-red: #e63946;
    --gradient-top: linear-gradient(90deg, #ff3d3d 0%, #ff9a44 100%);
    --bg-page: #fff9f9;
        }
/*************** ADD CUSTOM CSS HERE.   ***************/

/*************** ADD MOBILE ONLY CSS HERE  ***************/

/* Đổi màu navigation */
.nav-dropdown {
    background-color: var(--primary-color) !important;
}

.header-nav-main.nav>li.active>a,
.header-nav-main.nav>li>a:hover,
#header-contact li a i {
    color: #FF7B00 !important;
}

.header-nav-main.nav>li>a {
    font-weight: 700 !important;
    font-size: 1rem !important;
}

/* Đổi màu chữ header ở trang chủ */
#header-contact li a{
    color: white !important;
}


/* them duoi banner */

        /* .shipping-banner {
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            background-color: #ffffff;
            justify-content: center;

        }

        .truck-icon {
            width: 30px;
            height: 30px;
            position: relative;
        }

        .truck-icon svg {
            width: 100%;
            height: 100%;
            fill: var(--secondary-color);
            stroke: var(--secondary-color);
            stroke-width: 1; 
        } */

        /* .speed-lines {
            position: absolute;
            left: -5px;
            top: 50%;
            transform: translateY(-50%);
        } */


        /* .shipping-text {
            color: #224076;
            font-family: Arial, sans-serif; 
        } 

        .shipping-title {
            font-size: 15px;
            font-weight: bold;
            margin: 0 0 5px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* .time-badge {
            background: rgba(255, 255, 255, 0.2);
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 14px;
        } */

        /* .shipping-subtitle {
            font-size: 14px;
            margin: 0;
            opacity: 0.95;
        } */

            /* CSS dành cho mobile và tablet nhỏ */
        /* @media (max-width: 768px) {
            .shipping-banner {
                height: 100px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                align-content: center;
                flex-wrap: nowrap;
                text-align: center;
            }
        } */

/* mini banner 382x214*/
    .mini-banner > .img-inner >img{
        border-radius: 10px;
    }

     @media (max-width: 768px) {
        .section-mini-banner {
            padding-bottom: 0;
        }
     }

    .section-mini-banner .col {
            padding: 0 15px 10px 15px;
    }

    /* add margin for button in banner */

    a.button.secondary.lowercase.nut-xem-them {
    margin-bottom: 20px !important
}

/* Thay padding bottom mặc định */
.padding-botttom-0 {
    padding-bottom: 5px;
}

/* Category bên dưới banner */

.category-container {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
        }

        .category-grid-box {
            display: grid;
            /* QUAN TRỌNG: Luôn giữ 4 cột bất kể màn hình nào */
            grid-template-columns: repeat(4, 1fr); 
            gap: 15px;
            margin: 20px 0px;
        }

        .category-item {
            position: relative;
            background: white;
            border: 1.5px solid var(--primary-orange); /* Giảm độ dày viền chút cho thanh thoát */
            border-radius: 16px;
            padding: 10px 5px; /* Padding nhỏ để icon không bị ép */
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; /* Canh giữa theo chiều dọc */
            transition: transform 0.3s ease;
            box-shadow: 0 4px 10px rgba(255, 126, 70, 0.1);
            aspect-ratio: 1 / 1; /* Tỉ lệ khung hình hơi cao hơn vuông 1 chút để chứa chữ */
            overflow: hidden;
        }

        .category-item::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 6px;
            background: var(--gradient-top);
        }

        /* Container icon */
        .icon-container {
            position: relative;
            margin-bottom: 8px; /* Khoảng cách giữa icon và chữ */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .category-icon-wrapper {
            width: 50px;
            height: 50px;
            background: var(--primary-orange);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .category-icon {
            font-size: 24px;
            color: white;
        }

        /* Badge HOT */
        .category-badge {
            position: absolute;
            top: -5px;
            right: -15px; /* Đẩy badge ra ngoài một chút cho thoáng */
            background: #ff2e4d;
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: bold;
            text-transform: uppercase;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            z-index: 2;
            white-space: nowrap;
        }

        .category-title {
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            color: #d32f2f;
            line-height: 1.2;
        }

        /* --- RESPONSIVE MOBILE (Dưới 768px) --- */
        @media (max-width: 768px) {
            body {
                padding: 20px 8px; /* Lề màn hình cực nhỏ để tận dụng diện tích */
            }

            .category-grid-box {
                gap: 8px; /* Giảm khoảng cách giữa các ô xuống tối thiểu */
            }

            .category-item {
                border-radius: 12px;
                border-width: 1px;
                padding: 15px 2px 5px 2px; /* Tăng padding top để né thanh gradient */
                aspect-ratio: 1/1.2; /* Kéo dài ô một chút theo chiều dọc */
            }

            /* Thu nhỏ Icon */
            .category-icon-wrapper {
                width: 40px;
                height: 40px;
            }

            .category-icon {
                font-size: 18px; /* Icon nhỏ lại */
            }

            .icon-container {
                margin-bottom: 5px;
            }

            /* Thu nhỏ chữ tiêu đề */
            .category-title {
                font-size: 11px; /* Chữ nhỏ để không bị xuống dòng */
                white-space: nowrap; /* Ép chữ nằm trên 1 dòng */
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100%; /* Đảm bảo canh giữa chuẩn */
            }

            /* Badge nhỏ lại và chỉnh vị trí */
            .category-badge {
                font-size: 8px;
                padding: 2px 5px;
                right: -8px;
                top: -3px;
                border: 1px solid white; /* Thêm viền trắng để tách biệt với icon */
            }
        }
        
        /* Đối với màn hình cực nhỏ (iPhone 5/SE cũ) */
        @media (max-width: 350px) {
            .category-grid-box {
                gap: 4px;
            }
            .category-title {
                font-size: 10px;
            }
        }
/* Tuyển dụng */
/* Job Filters */
.job-filters select {
    cursor: pointer;
    transition: all 0.3s ease;
}

.job-filters select:hover {
    border-color: #3498db;
}


/* Job Status Badge */
.job-status-badge {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Expired Job Style */
.post-item .col-inner[style*="opacity: 0.7"] {
    background: #f9f9f9;
}

/* Responsive */
@media (max-width: 768px) {
    .job-filters form {
        flex-direction: column;
        align-items: stretch !important;
    }
    
    .job-filters select,
    .job-filters .button {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .job-status-badge {
        position: static !important;
        display: inline-block;
        margin-bottom: 10px;
    }
    
    .job-title {
        padding-right: 0 !important;
    }
}


/* sort custom */
/* Container chính */
.custom-sorting-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

/* Label "Sắp xếp theo:" */
.custom-sorting-bar .sort-label {
    font-weight: bold;
    margin-right: 15px;
}

/* Danh sách các nút */
.custom-sorting-bar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Khoảng cách giữa các nút */
}

.custom-sorting-bar ul li {
    margin: 0;
}

/* Style cho từng link */
.custom-sorting-bar ul li a {
    text-decoration: none;
    color: #777;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.3s;
    display: inline-block;
}

/* Hiệu ứng khi di chuột hoặc đang active */
.custom-sorting-bar ul li a:hover,
.custom-sorting-bar ul li a.active {
    color: #d26e4b; /* Màu cam chủ đạo giống trong hình */
    background-color: #fcefe9; /* Nền nhạt */
    font-weight: bold;
}

/* ẩn sort mặc định */
form.woocommerce-ordering {
    display: none;
}

.product-small.box.has-hover.box-bounce.box-text-bottom {
    border: 1px solid #abb8c3;
    border-radius: 5px;
    overflow: hidden;
}