/*========== Banner ==========*/
.cat-banner{
    height:13.7vw;
    background-size:cover;
    background-position:center;
    border-radius:1vw;
    position:relative;
    overflow:hidden;
    margin: -1.8vw -1vw 1vw -1vw;
}

.cat-banner-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,0.35) 0%,
        rgba(0,0,0,0.55) 100%
    );
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:#fff;
    padding:1vw;
}

.cat-banner-brand{
    color:#D4AF37;
    font-size:0.7vw;
    letter-spacing:0.2vw;
    text-transform:uppercase;
    margin-bottom:0.5vw;
    font-weight:500;
    text-shadow:
        0 0.05vw 0.2vw rgba(0,0,0,0.4),
        0 0 0.3vw rgba(212,175,55,0.3);
}

.cat-banner-title{
    font-size:2.3vw;
    font-weight:600;
    color:#f8f8f8;
    margin-bottom:0.5vw;
    font-family: "Playfair Display", serif;
    text-shadow:
        0 0.1vw 0.3vw rgba(0,0,0,0.35),
        0 0.2vw 0.9vw rgba(0,0,0,0.25);
}

.cat-banner-title:after{
    content:"";
    display:block;
    width:3.1vw;
    height:0.1vw;
    background:#D4AF37;
    margin:0.8vw auto 0;
}

.cat-banner-sub{
    font-size:0.9vw;
    color:#eaeaea;
    font-style:italic;
    max-width:36.5vw;
    line-height:1.6;
    text-shadow: 0 0.05vw 0.2vw rgba(0,0,0,0.45);
    margin-bottom: 0;
}

.cat-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1vw;
    margin-bottom:1.3vw;
    padding-bottom:1vw;
    flex-wrap:wrap;
    border-bottom:0.05vw solid #eee;
    position:relative;
    overflow:visible;
}

.cat-filter-title{
    font-size:0.85vw;
    font-weight:700;
    color:#111;
    flex:0 0 auto;
}

.cat-filter-scroll{
	display: none;
    /*flex:1;
    overflow:visible;
    position:relative;*/
}

.cat-filter-bar{
    display:flex;
    flex-wrap:wrap;
    gap:0.7vw;
    align-items:flex-start;
}

.cat-filter-bar button{
    background:linear-gradient(145deg, #ffffff 0%, #f7f7f7 40%, #ececec 60%, #ffffff 100%);
    box-shadow:
        inset 0 0.05vw 0 rgba(255,255,255,.9),
        inset 0 -0.05vw 0 rgba(0,0,0,.05),
        0 0.1vw 0.2vw rgba(0,0,0,.05);

    border:0.05vw solid #e5e5e5;
    padding:0.5vw 1vw;
    font-size:0.7vw;
    letter-spacing:.5px;
    cursor:pointer;
    transition:all .25s ease;

    display:flex;
    align-items:center;
    gap:0.3vw;
}

.cat-filter-bar button i{
    font-size:0.7vw;
    background:linear-gradient(180deg, #f5d48f, #c9a96a, #8d6b2f);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.cat-filter-bar button:hover{
    border-color:#111;
    color:#111;
}

.cat-filter-bar button.active{
    background:linear-gradient(145deg, #c9a96a, #e6c98a, #b89655);
    color:#111;
    box-shadow:
        inset 0 0.1vw 0.2vw rgba(0,0,0,.25),
        0 0.05vw 0.16vw rgba(0,0,0,.15);
}

.cat-filter-bar button.active i{ -webkit-text-fill-color:#111; }

.cat-filter-dropdown-layer{
    position:fixed;
    inset:0;
    display:none;
    z-index:10000;
    pointer-events:none;
}

.cat-filter-dropdown-layer.open{
    display:block;
}

.cat-filter-dropdown{
    position:fixed;
    pointer-events:auto;
    visibility:hidden;
    width:min(23rem, 92vw);
    background:rgba(255,255,255,.96);
    border:1px solid rgba(201,169,106,.35);
    box-shadow:
        0 22px 55px rgba(0,0,0,.16),
        0 2px 10px rgba(201,169,106,.14);
    border-radius:18px;
    padding:18px;
    max-height:60vh;
    overflow:auto;
    z-index:10001;
    backdrop-filter:blur(10px);
}

.cat-filter-dropdown.ready{
    visibility:visible;
}

.cat-filter-box{
    position:relative;
}

.cat-filter-box h3{
    font-size:18px;
    line-height:1.25;
    margin:0 36px 16px 0;
    font-weight:600;
    color:#1d1d1f;
    font-family:inherit;
}

.cat-filter-close{
    position:absolute;
    top:0;
    right:0;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:20px;
    line-height:1;
    color:#333;
    cursor:pointer;
    user-select:none;
    transition:all .2s ease;
}

.cat-filter-close:hover{
    background:#f4ead7;
    color:#111;
}

.cat-filter-box label,
.cat-filter-item{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:11px;
    width:100%;
    padding:10px 12px;
    margin:0 0 6px;
    border:1px solid transparent;
    border-radius:12px;
    cursor:pointer;
    font-size:15px;
    line-height:1.35;
    color:#333;
    transition:all .2s ease;
}

.cat-filter-box label:hover,
.cat-filter-item:hover{
    background:#fbf7ef;
    border-color:rgba(201,169,106,.28);
}

.cat-filter-box input[type="checkbox"],
.cat-filter-box input[type="radio"]{
    flex:0 0 auto;
    width:17px;
    height:17px;
    margin:0;
    accent-color:#c9a96a;
    cursor:pointer;
}

.cat-filter-box label span,
.cat-filter-item span{
    flex:1;
    text-align:left;
}

.cat-filter-apply{
    width:100%;
    margin-top:14px;
    padding:12px 18px;
    background:linear-gradient(135deg, #111 0%, #2b2b2b 100%);
    color:#fff;
    border:none;
    border-radius:12px;
    cursor:pointer;
    letter-spacing:.4px;
    font-size:15px;
    font-weight:500;
    transition:all .25s ease;
}

.cat-filter-apply:hover{
    background:linear-gradient(135deg, #c9a96a 0%, #e6c98a 100%);
    color:#111;
    transform:translateY(-1px);
}

.cat-filter-item{
    display:flex;
    align-items:center;
    padding:0.4vw 0;
}

.cat-active-filters{
    margin-bottom:1vw;
    display:flex;
    flex-wrap:wrap;
    gap:0.5vw;
}

.cat-filter-tag{
    background:#f5f5f5;
    padding:0.3vw 0.6vw;
    font-size:0.7vw;
    display:flex;
    gap:0.3vw;
    align-items:center;
}

.cat-filter-tag a{
    text-decoration:none;
    cursor:pointer;
}

.cat-clear-filters{
    margin-left:0.5vw;
    font-size:0.7vw;
    text-decoration:underline;
    cursor:pointer;
}

.cat-sort {
    position: relative;
    flex: 0 0 auto;
}

.cat-sort form.woocommerce-ordering { margin: 0; }

.cat-sort select.orderby {
    height: 42px;
    min-width: 190px;
    padding: 0 42px 0 16px;
    border: 1px solid rgba(176, 130, 53, 0.38);
    border-radius: 999px;
    color: #5b4524;
    font-size: 14px;
    font-weight: 500;
    line-height: 42px;
    outline: none;
    cursor: pointer;
    box-shadow:
        0 8px 22px rgba(91, 69, 36, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all .25s ease;
}

.cat-sort::before {
    content: "Sắp xếp";
    position: absolute;
    top: -10px;
    left: 16px;
    z-index: 2;
    padding: 0 7px;
    background: #fffaf1;
    color: #a7792e;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1;
    pointer-events: none;
}

.cat-sort:hover select.orderby {
    border-color: rgba(167, 121, 46, 0.65);
    background: linear-gradient(180deg, #fffaf1 0%, #f5ead8 100%);
    box-shadow:
        0 10px 26px rgba(91, 69, 36, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.cat-sort:focus-within select.orderby {
    border-color: rgba(167, 121, 46, 0.85);
    box-shadow:
        0 0 0 3px rgba(167, 121, 46, 0.13),
        0 10px 26px rgba(91, 69, 36, 0.12);
}

.woocommerce .woocommerce-ordering{ margin:0; }

.woocommerce .woocommerce-ordering .orderby{ margin-right:1.6vw; }

.woocommerce-ordering select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background:#fff;
    border:0.05vw solid #e5e5e5;
    padding:0.5vw 2.1vw 0.5vw 0.7vw;
    font-size:0.7vw;
    font-weight:500;
    border-radius:0.4vw;
    cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6' stroke='%23666' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 0.6vw center;
}

.woocommerce-ordering select:hover{ border-color:#c9a96a; }

@media (min-width:768px){.cat-filter-title{ display:none; }}

@media (max-width:768px){
    .cat-banner{
        height:65vw;
        margin: -9.3vw -5.3vw 0 -5.3vw;
    }

    .cat-banner-overlay{ padding:5.3vw; }

    .cat-banner-brand{
        font-size:3.5vw;
        letter-spacing:0.8vw;
        margin-top: 8vw;
        margin-bottom:2.7vw;
        text-shadow:
            0 0.3vw 0.8vw rgba(0,0,0,0.4),
            0 0 1.6vw rgba(212,175,55,0.3);
    }

    .cat-banner-title{
        font-size:10vw;
        margin-bottom:2.7vw;
        text-shadow:
            0 0.5vw 1.6vw rgba(0,0,0,0.35),
            0 1.1vw 4.8vw rgba(0,0,0,0.25);
    }

    .cat-banner-title:after{
        width:16vw;
        height:0.5vw;
        margin:4vw auto 0;
    }

    .cat-banner-sub{
        font-size:4vw;
        max-width:186.7vw;
        text-shadow: 0 0.3vw 1.1vw rgba(0,0,0,0.45);
    }

    .cat-topbar{
		display: none;
        /*position:fixed;
        left:0;
        right:0;
        bottom:-40vw;
        z-index:9999;
        background:#fff;
        border-top:0.3vw solid #eee;
        border-bottom:0.3vw solid #eee;
        margin:0;
        padding:0;
        overflow:visible;
        transition:bottom .3s ease;
        display:flex;
        align-items:center;*/
    }

    .cat-topbar.show-filter{ bottom:80px; }

    .cat-filter-title{
        display:block;
        font-size:4.3vw;
        padding:2.7vw 5.3vw;
        font-weight:800;
        flex:0 0 auto;
        border-right:0.3vw solid #eee;
        white-space:nowrap;
    }

    .cat-filter-scroll{
        flex:1;
        overflow-x:auto;
        overflow-y:visible;
        -webkit-overflow-scrolling:touch;
        position:relative;
    }

    .cat-filter-scroll::-webkit-scrollbar{
        display:none;
    }

    .cat-filter-bar{
        display:flex;
        flex-wrap:nowrap;
        gap:2.7vw;
        padding:4vw 4vw;
        width:max-content;
        align-items:flex-start;
    }

    .cat-filter-bar button{
        flex:0 0 auto;
        white-space:nowrap;
        padding:2.7vw 3.7vw;
        box-shadow:
            inset 0 0.3vw 0 rgba(255,255,255,.9),
            inset 0 -0.3vw 0 rgba(0,0,0,.05),
            0 0.5vw 1vw rgba(0,0,0,.05);
        border:0.3vw solid #e5e5e5;
        font-size:3.7vw;
        letter-spacing:.5px;
        gap:1.6vw;
        touch-action:manipulation;
        -webkit-tap-highlight-color:transparent;
    }

    .cat-filter-bar button i{ font-size:3.5vw; }

    .cat-filter-dropdown{
        width:min(92vw, 24rem);
        max-width:92vw;
        padding:4vw;
        border-radius:2.1vw;
        max-height:60vh;
        overflow:auto;
    }

    .cat-filter-box h3{
        font-size:4vw;
        margin-bottom:4vw;
        padding-right:6vw;
    }

    .cat-filter-box label{
        font-size:3.6vw;
        gap:2vw;
        padding:1.6vw 0;
    }

    .cat-filter-box input[type="checkbox"],
    .cat-filter-box input[type="radio"]{
        width:4vw;
        height:4vw;
    }

    .cat-filter-apply{
        margin-top:4vw;
        padding:2.8vw 4vw;
        font-size:3.6vw;
        border-radius:1.6vw;
    }

    .cat-filter-close{
        top:-0.5vw;
        right:0;
        font-size:6vw;
    }

    .cat-filter-item{
        padding:1.2vw 0;
    }

    .cat-filter-count{
        font-size:3.2vw;
    }

    .cat-active-filters{
        margin:0 0 5.3vw;
        gap:2.7vw;
    }

    .cat-filter-tag{
        padding:1.6vw 3.2vw;
        font-size:3.5vw;
        gap:1.6vw;
    }

    .cat-clear-filters{
        margin-left:2.7vw;
        font-size:3.5vw;
    }

    .cat-sort{ display:none; }

    .woocommerce .woocommerce-ordering .orderby { margin-right: 8vw; }

    .woocommerce-ordering select {
        border:0.3vw solid #e5e5e5;
        padding:2.7vw 10.7vw 2.7vw 3.7vw;
        font-size:3.7vw;
        border-radius:2.1vw;
        background-position:right 3.2vw center;
    }
}

/*========== Sản phẩm ==========*/
@media (max-width:768px){
    body.tax-product_cat.woocommerce ul.products,
    body.tax-product_cat.woocommerce-page ul.products,
    body.post-type-archive-product.woocommerce ul.products,
    body.post-type-archive-product.woocommerce-page ul.products {
        column-gap: 1.1vw;
        margin-top: calc(50% - 48vw) !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: 0 5px;
    }
}

/*========== Content SEO ==========*/
.archive-seo {
    margin-top: 70px;
    padding: 70px 20px;
    background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
    color: #2f2618;
}

.archive-seo img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.archive-seo__hero,
.archive-seo__feature {
    max-width: 1180px;
    margin: 0 auto 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center;
}

.archive-seo__hero-content,
.archive-seo__feature-content { padding: 20px 0; }

.archive-seo__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #a8761a;
    font-size: 13px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 700;
}

.archive-seo h2 {
    margin: 0 0 18px;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.18;
    color: #2b2114;
}

.archive-seo h3 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #3a2a16;
}

.archive-seo p {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: #5d4b32;
}

.archive-seo__hero-image img,
.archive-seo__feature-image img {
    height: 420px;
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(94, 61, 15, 0.16);
}

.archive-seo__cards {
    max-width: 1180px;
    margin: 0 auto 56px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.archive-seo__card {
    background: #ffffff;
    border: 1px solid rgba(170, 124, 38, 0.16);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(70, 46, 12, 0.08);
}

.archive-seo__card img { height: 600px; }

.archive-seo__card-content { padding: 24px; }

.archive-seo__feature {
    background: #fff;
    border: 1px solid rgba(170, 124, 38, 0.16);
    border-radius: 32px;
    padding: 28px;
    box-shadow: 0 24px 70px rgba(70, 46, 12, 0.08);
}

.archive-seo__feature-content ul {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.archive-seo__feature-content li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 28px;
    color: #4b3a24;
    line-height: 1.7;
}

.archive-seo__feature-content li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #b88727;
}

.archive-seo__links {
    max-width: 1180px;
    margin: 0 auto;
    padding: 42px;
    border-radius: 30px;
    background: #2f2518;
    text-align: center;
}

.archive-seo__links h2 {
    color: #fff;
    font-size: clamp(24px, 2.4vw, 34px);
}

.archive-seo__link-list {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.archive-seo__link-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(218, 171, 77, 0.35);
    color: #f8dfaa;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.25s ease;
}

.archive-seo__link-list a:hover {
    background: #b88727;
    color: #fff;
}

.archive-faq { margin-top: 64px; }

.archive-faq__inner {
    max-width: 980px;
    margin: 0 auto;
}

.archive-faq__heading {
    margin-bottom: 28px;
    text-align: center;
}

.archive-faq__heading h2 { margin: 0; }

.archive-faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.archive-faq__item {
    background: #ffffff;
    border: 1px solid rgba(175, 128, 36, 0.14);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(62, 44, 17, 0.06);
    transition: all 0.25s ease;
}

.archive-faq__item[open] { box-shadow: 0 20px 60px rgba(62, 44, 17, 0.1); }

.archive-faq__item summary {
    position: relative;
    padding: 24px 70px 24px 28px;
    cursor: pointer;
    list-style: none;
    font-size: 18px;
    font-weight: 600;
    color: #2e2417;
}

.archive-faq__item summary::-webkit-details-marker { display: none; }

.archive-faq__item summary::after {
    content: "+";
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    font-weight: 300;
    color: #b88727;
    transition: transform 0.25s ease;
}

.archive-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.archive-faq__content { padding: 0 28px 28px; }

.archive-faq__content p {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: #5d4b32;
}

@media (max-width: 921px) {
    .archive-seo {
        margin-top: 20px;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 20px 20px;
    }

    .archive-seo__hero,
    .archive-seo__feature {
        grid-template-columns: 1fr;
        margin: 0 auto;
    }
    .archive-seo__cards {
        grid-template-columns: 1fr;
        margin: 0 auto;
    }
    .archive-seo__hero-image img,
    .archive-seo__feature-image img { height: 320px; }
    .archive-seo__feature { padding: 20px; }
    .archive-seo__links {
        padding: 32px 20px;
        margin: 10px auto;
    }
    .archive-faq__item summary {
        padding: 20px 58px 20px 20px;
        font-size: 16px;
    }
    .archive-faq__item summary::after { right: 20px; }
    .archive-faq__content { padding: 0 20px 20px; }
}

/*========== Pagination  ==========*/
.woocommerce-js nav.woocommerce-pagination ul li { border-radius: 10px; }

@media (max-width:768px){
    .woocommerce-js nav.woocommerce-pagination { margin: 0 auto; }
}