/**
 * CSS cho trang sản phẩm WooCommerce
 * - Sidebar menu danh mục
 * - Box top
 * - Box product list
 * - Pagination
 */

/* === SIDEBAR MENU === */
.menu_cat_product_tax_page > ul > li > a > i {
    display: none;
}

.menu_cat_product_tax_page ul li {
    padding: 0 18px;
    padding-right: 0;
}

.menu_cat_product_tax_page ul ul {
    left: -18px;
    width: calc(100% + 18px);
}

.menu_cat_product_tax_page .term_parent > i {
    position: absolute;
    top: 0;
    right: 4%;
}

.term_parent {
    position: relative;
}

.content_left {
    padding-left: 0;
}

.menu_cat_product_tax_page > ul > li > i,
.menu_cat_product_tax_page .term_parent > i,
.menu_cat_product_tax_page .term_parent1 > i {
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    text-align: center;
    color: #333333;
    cursor: pointer;
    margin: 10px 0;
}

ul li.term_parent1.toggle > ul {
    max-height: 5000px;
    transition: .1s;
    padding: 0;
}

.menu_cat_product_tax_page > ul > li > a {
    width: 100%;
}

.term_parent1 {
    position: relative;
}

.menu_cat_product_tax_page ul ul li {
    padding-left: 0;
    padding-right: 0;
}

.menu_cat_product_tax_page > ul > li > ul > li > ul > li > ul > li {
    padding-left: 0% !important;
}

.menu_cat_product_tax_page .active > a {
    color: #0082ca;
}

.menu_cat_product_tax_page > ul > li > ul > li > ul > li > ul > li > ul > li {
    padding-left: 1%;
}

.menu_cat_product_tax_page > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {
    padding-left: 6%;
}

.menu_cat_product_tax_page ul li:first-child ul li a {
    margin-left: 0;
}

.menu_cat_product_tax_page > ul > li > ul > li > ul > li {
    padding-left: 14% !important;
}

div.grid-25.content_left > div > ul > li.term_parent1.root.sub2.active.toggle > ul > li.term_parent1.non-root.sub2.active.toggle {
    padding-left: 12%;
}

.menu_cat_product_tax_page > ul > li.sub3 > ul > li > ul > li {
    padding-left: 7% !important;
}

.menu_cat_product_tax_page > ul > li.sub2 > ul > li.toggle > a {
    margin-left: 0% !important;
}

/* === SIDEBAR MENU - ADDITIONAL STYLES === */
.menu_cat_product_tax_page .term_parent1 > i {
    position: absolute;
    top: 0;
    left: 10px;
}

.menu_cat_product_tax_page > ul > .sub3 > ul > li > a,
.menu_cat_product_tax_page > ul > .sub4 > ul > li > a {
    margin-left: 13%;
}

.menu_cat_product_tax_page > ul > .sub3 > ul > li > ul > li > a {
    margin-left: 18px;
}

.menu_cat_product_tax_page > ul > .sub4 > ul > li > ul > ul > li > a,
.menu_cat_product_tax_page > ul > .sub4 > ul > li > ul > li > ul > li > ul > li > a {
    margin-left: 0;
}

.menu_cat_product_tax_page > ul > .sub4 > ul > li > ul > li > ul > li > ul > li > ul > li {
    margin-left: 0;
}

.menu_cat_product_tax_page > ul > .sub4 > ul > li > ul > li > ul > li > a.sub1,
.menu_cat_product_tax_page > ul > .sub4 > ul > li > ul > li > ul > li > ul > li > a.sub1 {
    margin-left: 11%;
}

.menu_cat_product_tax_page > ul > .sub4 > ul > li > ul > li > ul > li > ul > li > ul > li > a {
    margin-left: 0;
}

.menu_cat_product_tax_page > ul > .sub4 > ul > li > ul > li > ul > li > ul > li > ul > li {
    padding-left: 0;
}

.menu_cat_product_tax_page ul li {
    padding: 0 37px;
    padding-right: 0;
}

.menu_cat_product_tax_page ul a {
    padding: 10px 0 10px 0;
}

.menu_cat_product_tax_page > ul > li > i,
.menu_cat_product_tax_page .term_parent1 > i {
    border: none;
}

.menu_cat_product_tax_page .toggle > i:before {
    content: "\f147";
}

.menu_cat_product_tax_page ul ul li {
    background-color: #f0f0f0;
}

.sub-2 a {
    margin-left: 7%;
}

.menu_cat_product_tax_page ul ul li i {
    margin-right: 1px;
}

.toggle ul li a {
    margin-left: 6%;
}

.menu_cat_product_tax_page .toggle .toggle ul {
    margin-left: 3%;
}

.menu_cat_product_tax_page > ul > .sub4 > ul > li > ul > li > a {
    margin-left: 11%;
    padding-top: 9px;
}

.menu_cat_product_tax_page > ul > li.sub2 > ul > li.sub3 > a {
    margin-left: 0% !important;
}

.menu_cat_product_tax_page ul li:first-child ul li a {
    margin-left: 0 !important;
}

div.grid-25.content_left > div > ul > li.sub2 > ul > li.toggle > a {
    margin-left: 0% !important;
}

/* === SIDEBAR MENU - FIX STYLES === */
.menu_cat_product_tax_page {
    overflow: hidden;
}

.menu_cat_product_tax_page ul {
    width: 100% !important;
}

.menu_cat_product_tax_page ul li {
    padding-left: 25px !important;
}

.menu_cat_product_tax_page ul li ul {
    margin-left: 0 !important;
    left: 0;
}

.menu_cat_product_tax_page .term_parent1 > i {
    left: 0px;
}

.menu_cat_product_tax_page .term_parent1 > a > i {
    position: absolute;
    top: 11px;
    left: 0px;
}

.menu_cat_product_tax_page > ul > li > i,
.menu_cat_product_tax_page .term_parent1 > i {
    margin-bottom: 0px;
    margin-top: 0px;
    top: 8px;
}

.menu_cat_product_tax_page ul a {
    padding: 7px 0 7px 0;
}

.menu_cat_product_tax_page ul ul li a {
    padding: 7px 0 7px 0;
}

.menu_cat_product_tax_page > ul > .sub3 > ul > li > a,
.menu_cat_product_tax_page > ul > .sub4 > ul > li > a {
    margin-left: 0px;
}

.menu_cat_product_tax_page > ul > li > ul > li > ul > li {
    padding-left: 25px !important;
}

.menu_cat_product_tax_page > ul > .sub3 > ul > li > ul > li > a {
    margin-left: 0px;
}

.menu_cat_product_tax_page > ul > li > ul > li > ul > li > ul > li {
    padding-left: 25px !important;
}

/* === PAGINATION === */
.page-numbers .current {
    background-color: #f89400;
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 4px;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
}

/* === BOX TOP === */
.box_top {
    margin-bottom: 30px;
}

.box_top h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

.box_top .box {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.box_top .box_img {
    flex: 0 0 300px;
    max-width: 300px;
}

.box_top .box_img img {
    width: 100%;
    height: auto;
}

.box_top .box_content {
    flex: 1;
}

.box_top .box_content p {
    line-height: 1.6;
    color: #666;
}

/* === BOX PRODUCT TAX PAGE === */
.box_product_tax_page {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.box_product_tax_page .item {
    flex: 0 0 calc(33.333% - 14px);
    max-width: calc(33.333% - 14px);
    background: #fff;
    border: 1px solid #eee;
    padding: 15px;
    text-align: center;
    transition: box-shadow 0.3s ease;
}

.box_product_tax_page .item:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.box_product_tax_page .item .box_img {
    margin-bottom: 10px;
}

.box_product_tax_page .item .box_img img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
}

.box_product_tax_page .item h3 {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

.box_product_tax_page .item a {
    color: inherit;
    text-decoration: none;
}

.box_product_tax_page .item a:hover h3 {
    color: #0082ca;
}

.box_product_tax_page .no-products {
    width: 100%;
    text-align: center;
    padding: 40px;
    color: #666;
}

/* === MOBILE BUTTON === */
.mobile_button_cat_product {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: #0082ca;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* === RESPONSIVE === */
@media screen and (max-width: 768px) {
    .mobile_button_cat_product {
        display: block;
    }

    .content_left {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: #fff;
        z-index: 1000;
        overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    }

    .content_left.active {
        display: block;
    }

    .box_product_tax_page .item {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }

    .box_top .box {
        flex-direction: column;
    }

    .box_top .box_img {
        flex: none;
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .box_product_tax_page .item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}