/* VTW Bộ lọc nước - Giao diện bộ lọc gọn full ngang */
.vtw-wwf-wrap,
.vtw-wwf-wrap *{
    box-sizing:border-box;
}
.vtw-wwf-wrap{
    width:100%;
    max-width:100%;
    font-family:inherit;
    color:#07152f;
}
.vtw-wwf-box{
    width:100%;
    max-width:none;
    margin:0;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    border:1px solid #e6edf7;
    box-shadow:0 8px 20px rgba(12,33,66,.08);
}
.vtw-wwf-hero-head{
    display:none !important;
}
.vtw-wwf-steps{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    padding:18px 20px 10px;
    align-items:stretch;
}
.vtw-wwf-step{
    min-width:0;
    padding:0 18px;
    display:flex;
    flex-direction:column;
}
.vtw-wwf-step:first-child{
    padding-left:0;
}
.vtw-wwf-step:last-child{
    padding-right:0;
}
.vtw-wwf-step + .vtw-wwf-step{
    border-left:1px solid #edf1f7;
}
.vtw-wwf-step h3{
    margin:0 0 12px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#07152f;
    font-size:15px;
    line-height:1.2;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.vtw-wwf-step h3 span{
    width:24px;
    height:24px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--vtw-wwf-primary,#0046b8);
    color:#fff;
    font-size:13px;
    font-weight:800;
    flex:0 0 24px;
}
.vtw-wwf-options{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.vtw-wwf-option{
    min-height:52px;
    width:100%;
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 12px;
    border:1px solid #e8edf4;
    border-radius:9px;
    background:#fff;
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
    box-shadow:0 4px 11px rgba(15,38,80,.03);
}
.vtw-wwf-option:hover{
    border-color:#9cc8ff;
    transform:translateY(-1px);
}
.vtw-wwf-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.vtw-wwf-icon{
    width:28px;
    min-width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--vtw-wwf-accent,#0068ff);
    font-size:23px;
    line-height:1;
}
.vtw-wwf-icon i{
    font-size:21px;
}
.vtw-wwf-emoji{
    line-height:1;
}
.vtw-wwf-text{
    flex:1;
    min-width:0;
    display:block;
}
.vtw-wwf-text strong{
    display:block;
    font-size:13px;
    line-height:1.22;
    color:#06172f;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.vtw-wwf-text small{
    display:block;
    margin-top:2px;
    font-size:11px;
    line-height:1.2;
    color:#5b6678;
    font-weight:500;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.vtw-wwf-radio{
    width:20px;
    height:20px;
    border:2px solid #d9e0eb;
    border-radius:999px;
    flex:0 0 20px;
    position:relative;
    background:#fff;
}
.vtw-wwf-radio:after{
    content:"";
    width:9px;
    height:9px;
    border-radius:999px;
    background:var(--vtw-wwf-accent,#0068ff);
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0);
    transition:.18s ease;
}
.vtw-wwf-option:has(input:checked){
    border-color:#69b7f4;
    background:#f3f8ff;
    box-shadow:0 6px 15px rgba(0,104,255,.10);
}
.vtw-wwf-option:has(input:checked) .vtw-wwf-radio{
    border-color:var(--vtw-wwf-accent,#0068ff);
}
.vtw-wwf-option:has(input:checked) .vtw-wwf-radio:after{
    transform:translate(-50%,-50%) scale(1);
}
.vtw-wwf-submit-wrap{
    display:flex;
    justify-content:center;
    padding:10px 20px 18px;
}
.vtw-wwf-submit{
    width:auto;
    min-width:min(300px,100%);
    min-height:38px;
    border:0;
    border-radius:9px;
    background:linear-gradient(135deg,var(--vtw-wwf-primary,#0046b8),var(--vtw-wwf-accent,#0068ff));
    color:#fff;
    font-size:14px;
    line-height:1.15;
    font-weight:800;
    cursor:pointer;
    padding:7px 18px;
    box-shadow:0 8px 18px rgba(0,92,230,.18);
    transition:transform .2s ease, opacity .2s ease;
    white-space:nowrap;
}
.vtw-wwf-submit:hover{
    transform:translateY(-1px);
    opacity:.96;
}
.vtw-wwf-submit.is-loading{
    opacity:.72;
    cursor:wait;
}
.vtw-wwf-submit em{
    font-style:normal;
    margin-left:8px;
}
.vtw-wwf-empty{
    padding:10px;
    border:1px dashed #dbe3ee;
    border-radius:9px;
    color:#617086;
    font-size:13px;
}
.vtw-wwf-term-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
}
.vtw-wwf-term-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    border:1px solid #e8edf4;
    border-radius:12px;
    color:inherit;
    text-decoration:none;
}
.vtw-wwf-term-item:hover{
    border-color:#9cc8ff;
}

@media (max-width: 1024px){
    .vtw-wwf-steps{
        grid-template-columns:repeat(2,minmax(0,1fr));
        padding:16px;
        gap:14px;
    }
    .vtw-wwf-step,
    .vtw-wwf-step:first-child,
    .vtw-wwf-step:last-child{
        padding:0;
        border-left:0 !important;
    }
    .vtw-wwf-step h3{
        font-size:15px;
    }
}
@media (max-width: 640px){
    .vtw-wwf-box{
        border-radius:12px;
    }
    .vtw-wwf-steps{
        grid-template-columns:1fr;
        padding:14px;
        gap:14px;
    }
    .vtw-wwf-step h3{
        margin-bottom:9px;
        font-size:14px;
    }
    .vtw-wwf-option{
        min-height:48px;
        padding:8px 10px;
    }
    .vtw-wwf-text strong{
        font-size:12.5px;
    }
    .vtw-wwf-submit-wrap{
        padding:2px 14px 14px;
    }
    .vtw-wwf-submit{
        width:100%;
        min-height:38px;
        font-size:13.5px;
        padding:7px 10px;
    }
}

/* Căn lại nút Xem ngay full theo cột lựa chọn */
.vtw-wwf-submit-wrap{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px 20px 18px;
}
.vtw-wwf-submit{
    width:calc((100% - 74px) / 3) !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.vtw-wwf-submit .vtw-wwf-count-text,
.vtw-wwf-submit em{
    flex:0 0 auto;
}
@media (max-width: 1024px){
    .vtw-wwf-submit{
        width:calc((100% - 46px) / 2) !important;
    }
}
@media (max-width: 640px){
    .vtw-wwf-submit-wrap{
        padding:4px 14px 14px;
    }
    .vtw-wwf-submit{
        width:100% !important;
        min-height:38px;
        font-size:12px;
        padding:7px 8px;
        gap:5px;
        letter-spacing:-.15px;
    }
    .vtw-wwf-submit .vtw-wwf-count-text{
        max-width:42%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
}


/* Fix v1.0.18 - Canh giữa nút Xem ngay đúng theo cột lựa chọn */
.vtw-wwf-box .vtw-wwf-submit-wrap{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding:10px 20px 18px !important;
    margin:0 !important;
}
.vtw-wwf-box .vtw-wwf-submit{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    margin:0 auto !important;
    width:calc((100% - 148px) / 3) !important;
    min-width:0 !important;
    max-width:100% !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 14px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    text-align:center !important;
    line-height:1 !important;
    vertical-align:middle !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}
.vtw-wwf-box .vtw-wwf-submit:hover{
    transform:none !important;
}
.vtw-wwf-box .vtw-wwf-submit span,
.vtw-wwf-box .vtw-wwf-submit em{
    display:inline-block !important;
    line-height:1 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
}
.vtw-wwf-box .vtw-wwf-submit em{
    margin-left:4px !important;
}
@media (max-width:1024px){
    .vtw-wwf-box .vtw-wwf-submit{
        width:calc((100% - 44px) / 2) !important;
    }
}
@media (max-width:640px){
    .vtw-wwf-box .vtw-wwf-submit-wrap{
        padding:4px 14px 14px !important;
    }
    .vtw-wwf-box .vtw-wwf-submit{
        width:100% !important;
        height:38px !important;
        min-height:38px !important;
        padding:0 10px !important;
        font-size:12px !important;
    }
}

/* Fix v1.0.19 - Đặt nút Xem ngay vào đúng cột giữa, không lệch trái */
.vtw-wwf-box .vtw-wwf-submit-wrap{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:0 !important;
    align-items:center !important;
    justify-items:center !important;
    justify-content:stretch !important;
    padding:10px 20px 18px !important;
    margin:0 !important;
    text-align:center !important;
}
.vtw-wwf-box .vtw-wwf-submit{
    grid-column:2 / 3 !important;
    justify-self:center !important;
    align-self:center !important;
    position:static !important;
    float:none !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    margin:0 !important;
    width:calc(100% - 36px) !important;
    max-width:none !important;
    min-width:0 !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    text-align:center !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}
.vtw-wwf-box .vtw-wwf-submit:hover,
.vtw-wwf-box .vtw-wwf-submit:focus,
.vtw-wwf-box .vtw-wwf-submit:active{
    transform:none !important;
}
@media (max-width:1024px){
    .vtw-wwf-box .vtw-wwf-submit-wrap{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        padding:8px 16px 16px !important;
    }
    .vtw-wwf-box .vtw-wwf-submit{
        grid-column:1 / -1 !important;
        width:calc((100% - 18px) / 2) !important;
    }
}
@media (max-width:640px){
    .vtw-wwf-box .vtw-wwf-submit-wrap{
        grid-template-columns:1fr !important;
        padding:4px 14px 14px !important;
    }
    .vtw-wwf-box .vtw-wwf-submit{
        grid-column:1 / -1 !important;
        width:100% !important;
        height:38px !important;
        min-height:38px !important;
        font-size:12px !important;
        padding:0 8px !important;
    }
}

/* v1.0.22 - Mobile dùng dropdown để bộ lọc gọn hơn */
.vtw-wwf-mobile-select{
    display:none;
    width:100%;
}
.vtw-wwf-select{
    width:100%;
    height:40px;
    min-height:40px;
    border:1px solid #dfe7f2;
    border-radius:9px;
    background:#fff;
    color:#07152f;
    font-size:13px;
    font-weight:700;
    line-height:1.2;
    padding:0 36px 0 12px;
    outline:none;
    box-shadow:0 4px 11px rgba(15,38,80,.03);
}
.vtw-wwf-select:focus{
    border-color:#80b9ff;
    box-shadow:0 0 0 3px rgba(0,104,255,.08);
}
@media (max-width:640px){
    .vtw-wwf-single-filter .vtw-wwf-box{
        border-radius:12px;
        box-shadow:0 8px 18px rgba(12,33,66,.06);
    }
    .vtw-wwf-single-filter .vtw-wwf-steps{
        padding:12px;
        gap:10px;
    }
    .vtw-wwf-single-filter .vtw-wwf-step{
        gap:7px;
    }
    .vtw-wwf-single-filter .vtw-wwf-step h3{
        margin-bottom:0;
        font-size:13.5px;
        white-space:normal;
    }
    .vtw-wwf-single-filter .vtw-wwf-step h3 span{
        width:22px;
        height:22px;
        flex-basis:22px;
        font-size:12px;
    }
    .vtw-wwf-single-filter .vtw-wwf-mobile-select{
        display:block;
    }
    .vtw-wwf-single-filter .vtw-wwf-options{
        display:none !important;
    }
    .vtw-wwf-single-filter .vtw-wwf-submit-wrap{
        padding:2px 12px 12px !important;
    }
    .vtw-wwf-single-filter .vtw-wwf-submit{
        height:40px !important;
        min-height:40px !important;
        font-size:12.5px !important;
        border-radius:9px !important;
    }
}

/* Shortcode sidebar: [vtw_bo_loc_nuoc_sidebar] */
.vtw-wwf-sidebar-filter{
    width:100%;
}
/* Tạm ẩn style khung sidebar vì sidebar theme đã có CSS riêng.
.vtw-wwf-sidebar-box{
    width:100%;
    background:#fff;
    border:1px solid #e6edf7;
    border-radius:12px;
    padding:14px;
    box-shadow:0 6px 16px rgba(12,33,66,.06);
}
*/
/* Tiêu đề sidebar dùng style của theme: .widget-title và .widget-title::after */
.vtw-wwf-sidebar-title{
    /* Không set style riêng để kế thừa CSS widget-title của website */
}
.vtw-wwf-sidebar-field{
    display:block;
    margin:0 0 10px;
}
.vtw-wwf-sidebar-field > span{
    display:block;
    margin:0 0 5px;
    font-size:12.5px;
    line-height:1.25;
    color:#07152f;
    font-weight:800;
}
.vtw-wwf-sidebar-filter .vtw-wwf-select{
    height:38px;
    min-height:38px;
    font-size:12.5px;
}
.vtw-wwf-sidebar-filter .vtw-wwf-sidebar-submit{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:39px !important;
    min-height:39px !important;
    margin-top:4px !important;
    padding:0 10px !important;
    font-size:12.5px !important;
    border-radius:9px !important;
}
.vtw-wwf-sidebar-filter .vtw-wwf-count-text{
    max-width:48%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* v1.0.27 - Sidebar lọc AJAX */
.vtw-wwf-sidebar-filter .vtw-wwf-sidebar-title{
    text-transform:uppercase;
}
.vtw-wwf-sidebar-filter .vtw-wwf-sidebar-submit{
    display:none !important;
}
.vtw-wwf-sidebar-filter.is-loading .vtw-wwf-select{
    opacity:.72;
    pointer-events:none;
}
.products.vtw-wwf-products-loading,
ul.products.vtw-wwf-products-loading{
    opacity:.5;
    pointer-events:none;
    position:relative;
}
.vtw-wwf-no-products{
    list-style:none !important;
    width:100% !important;
    max-width:100% !important;
    padding:14px !important;
    border:1px solid #e6edf7;
    border-radius:10px;
    background:#fff;
    font-size:14px;
    color:#07152f;
}