/* 
 * Anphi Product Filter Style
 * Includes SBS House layout for product grid 
 */

/* 1. Layout */
.anphi-products-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    font-family: inherit;
}

.anphi-filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.anphi-sidebar {
    width: 250px;
    flex-shrink: 0;
}

.anphi-products-area {
    flex: 1;
    min-width: 0; /* Prevents flex item from overflowing */
}

/* 2. Sidebar Filter */
.anphi-sidebar__block {
    margin-bottom: 25px;
    background: #fff;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.anphi-sidebar__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    color: #333;
}

.anphi-filter-group label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    cursor: pointer;
    color: #555;
    transition: color 0.2s;
}

.anphi-filter-group label:hover {
    color: var(--cl-1, #e63027);
}

.anphi-filter-group input[type="checkbox"] {
    margin: 0 10px 0 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.anphi-filter-group .count {
    margin-left: auto;
    color: #999;
    font-size: 12px;
}

.anphi-filter-toggle-btn {
    display: none;
    width: 100%;
    padding: 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-weight: 600;
    margin-bottom: 20px;
    cursor: pointer;
    text-align: center;
}

/* 3. Toolbar */
.anphi-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background: #fff;
    padding: 15px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.anphi-toolbar__count {
    font-size: 14px;
    color: #555;
}

.anphi-toolbar__sort {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
}

/* 4. Pagination */
.anphi-pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 40px;
}

.anphi-pagination button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--e-global-color-primary, #e63027);
    transition: all 0.2s;
}

.anphi-pagination button:hover,
.anphi-pagination button.active {
    background: var(--e-global-color-primary, #e63027);
    color: #fff;
    border-radius: 50%;
}

.anphi-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.anphi-loading-overlay {
    position: relative;
}

.anphi-loading-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 10;
}

/* ==========================================================================
   SBS HOUSE GRID HTML CSS
   ========================================================================== */

/* Variables default fallback */
:root {
    --cl-1: #e63027; /* Thay thế bằng màu thực tế của SBS House (ví dụ: cam/vàng) */
    --cl-2: #333333;
}

a { background: transparent; }
a:active, a:hover { outline: 0; }
img { border: 0; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
:before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a { text-decoration: none; }
a:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
img { vertical-align: middle; }

.row { margin-left: -15px; margin-right: -15px; }
.row.col_archive_items.anphi-product-grid { display: flex; flex-wrap: wrap; }
.row.col_archive_items.anphi-product-grid:before, .row.col_archive_items.anphi-product-grid:after { display: none; }
.col-md-4, .col-lg-4, .col-sm-6, .col-xs-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }
.col-xs-12 { float: left; width: 100%; }

@media (min-width: 768px) {
    .col-sm-6 { float: left; width: 50%; }
}
@media (min-width: 992px) {
    .col-md-4 { float: left; width: 33.33333333%; }
}
@media (min-width: 1200px) {
    .col-lg-4 { float: left; width: 33.33333333%; }
}
.row:before, .row:after { content: " "; display: table; }
.row:after { clear: both; }

*, h3 { padding: 0; margin: 0; }
img { max-width: 100%; height: auto; }
a { text-decoration: none; cursor: pointer; }
a:focus, a:hover { outline: medium none; outline-offset: 0; text-decoration: none; }
*:focus { outline: 0; }

a { color: var(--cl-2); }
a:hover { color: var(--cl-1); }

.btnSite { position: relative; }
.btnSite span { transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; display: inline-block; }
.btnSite.btnSite-djf { background-color: var(--cl-1); color: #fff; padding: 10px 20px; display: inline-block; }
.btnSite:after { content: ""; display: inline-block; vertical-align: middle; margin-left: 15px; background-image: url(https://sbshouse.vn/wp-content/themes/sbshouse/images/icon_view.png); width: 12px; height: 16px; background-repeat: no-repeat; background-size: 100% auto; }
.btnSite.btnSite-djf:hover { color: var(--cl-2); }

.anphi-products-area .col_archive_item img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; }
.col_archive_item .content { background-color: #fff; padding: 15px; }
.col_archive_item a { color: var(--cl-2); }
.col_archive_item .btnSite { margin-top: 15px; padding: 5px 10px; }
.col_archive_item { display: flex; flex-direction: column; height: 100%; margin-bottom: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow: hidden;}
.col_archive_item_box { display: flex; flex-direction: column; }
.col_archive_item .content { flex-grow: 1; display: flex; flex-direction: column; background-color: #fff; padding: 15px; }
.col_archive_item .content > div:last-child { margin-top: auto; }
.col_archive_item .price { font-weight: bold; color: var(--cl-1); margin-top: 10px;}
.col_archive_item .excerpt { margin-top: 10px; color: #666; font-size: 14px; line-height: 1.5; }

@media only screen and (min-width : 1025px) {
    .htitle_archive_loop { overflow: hidden; height: 50px; margin-bottom: 10px; font-size: 18px; line-height: 1.4; }
    .col_archive_item_box:nth-child(3n+1) { clear: left; }
}

@media only screen and (max-width : 768px) {
    /* Đã dùng aspect-ratio nên không cần set cứng height cho img ở mobile nữa */
}

/* Responsive fixes for our layout */
@media (max-width: 991px) {
    .anphi-sidebar { width: 100%; }
    .anphi-filter-toggle-btn { display: block; }
    .anphi-sidebar-inner { display: none; }
    .anphi-sidebar.active .anphi-sidebar-inner { display: block; }
}

/* Modal CSS */
.anphi-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.anphi-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.anphi-modal {
    background: #fff;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    border-radius: 0;
    position: relative;
    overflow-y: auto;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transform: translateY(-20px);
    transition: transform 0.3s;
}

.anphi-modal-overlay.active .anphi-modal {
    transform: translateY(0);
}

.anphi-modal__close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #eee;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.anphi-modal__close:hover {
    background: var(--cl-1, #e63027);
    color: #fff;
}

/* Chi tiết sản phẩm & Responsive */
.anphi-detail-top {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
}
.anphi-detail-gallery {
    flex: 1;
    min-width: 300px;
    flex-basis: 40%;
}
.anphi-detail-summary {
    flex: 1;
    min-width: 300px;
    flex-basis: 50%;
}

@media (max-width: 768px) {
    .anphi-detail-top {
        gap: 20px;
        margin-bottom: 20px;
    }
    .anphi-detail-gallery,
    .anphi-detail-summary {
        min-width: 100%;
        flex-basis: 100%;
    }
    .anphi-detail-summary h1.anphi-product-title {
        font-size: 24px !important;
    }
    .anphi-product-price {
        font-size: 20px !important;
    }
    .anphi-sidebar-widget {
        padding: 15px !important;
    }
    .anphi-info-item .anphi-info-text div {
        font-size: 13px !important;
    }
    .anphi-modal {
        padding: 15px;
        width: 95%;
    }
}