

/* --- 2. BỐ CỤC CHUNG CHO SẢN PHẨM DẠNG LIST --- */
.product-list-item-advanced .product-list-view-wrapper {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
}

.product-list-item-advanced .product-list-view-info {
    padding: 0 10px;
}


/* === 3. THU NHỎ NÚT MUA NGAY BÊN TRONG CỘT === */


.products.view-list .product-list-item-advanced:not(:last-child) {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 1em;
    margin-bottom: 1em;
}

/* --- 3. CHI TIẾT CÁC THÀNH PHẦN BÊN TRONG --- */
.product-list-item-advanced .product-list-view-info .price {
    font-size: 1.5em;
    font-weight: bold;
    color: #d26e4b;
    margin-bottom: 15px;
}
.product-list-item-advanced .product-list-view-info .price del {
    font-size: 0.7em;
    font-weight: normal;
}


/* === 2. THU NHỎ NÚT MUA NGAY BÊN TRONG CỘT MỚI === */
.product-list-item-advanced .product-list-view-actions .ux-buy-now-button {
    width: 100%; /* Cho phép nút co lại theo nội dung */
    display: inline-block;
    padding: 8px 15px; /* Giảm đệm để nút nhỏ hơn */
    font-size: 0.9em; /* Giảm nhẹ cỡ chữ */
    margin-bottom: 10px; /* Giảm khoảng cách dưới nút một chút */
}

.product-list-item-advanced .ux-buy-now-button {
    background: var(--secondary-gradient);
    border-radius: 5px;
    line-height: 1;
}
.product-list-item-advanced .ux-buy-now-button:hover {
    background-color: #3a5578 !important;
}
.product-list-item-advanced .product-list-view-actions .product-badges-wrapper {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* --- 4. KHU VỰC THUỘC TÍNH & THÔNG SỐ KỸ THUẬT --- */
.product-list-view-info .product-attributes-wrapper,
.product-list-view-info .product-info-table-wrapper {
    display: flex;
    font-size: 0.9em;
    color: #555;
    margin-top: 15px;
    position: relative;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    gap: 5px;
}
.product-list-view-info .product-info-container::before {
    display: none !important;
}
.product-attributes-column,
.product-column {
    width: 50% !important;
}
.product-list-item-advanced .product-attributes-wrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.product-list-item-advanced .product-attributes-wrapper ul li {
    margin-bottom: 5px;
}
.product-attribute-item,
.product-row {
    display: block !important;
    padding-bottom: 0.5em;
    text-indent: 0;
    padding-left: 0;
}
.product-attribute-item::before,
.product-row::before {
    content: "•";
    margin-right: 0.7em;
    font-weight: bold;
    flex-shrink: 0;
}
.product-list-view-info .product-info-table-wrapper .product-info-container {
    width: 100%;
}
.product-badges-wrapper .badge-icon-wrapper.tooltip {
    cursor: help; /* Đổi con trỏ chuột thành hình dấu hỏi */
}

.product-badges-wrapper .badge-icon-wrapper {
    margin: 0 2px; /* Thêm một chút khoảng cách giữa các icon */
}
.product-list-view-actions {
	padding: 0 10px;
}

.product-list-view-actions .product-badges-wrapper {
    margin-top: 10px; /* Tạo khoảng cách với nút Mua ngay ở trên */
}
.product-list-view-actions .badge-icon-wrapper {
    position: relative;
    display: inline-block;
}
.product-list-view-actions .badge-icon-wrapper[data-tooltip] {
    cursor: help;
}

/* 2. Định dạng cho KHUNG GHI CHÚ (Tooltip Box) */
.badge-icon-wrapper[data-tooltip]::after {
    content: attr(data-tooltip); 
    background-color: var(--color-dark, #333);
    color: var(--color-white, #fff);
    border-radius: var(--radius-small, 3px);
    box-shadow: 0 3px 6px rgba(0,0,0,.15);
    padding: .6em 1em;
    font-size: .9em;
    text-align: left;
    width: max-content; 
    max-width: 400px;
    white-space: pre-wrap;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    z-index: 999; 
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 12px;
}


/* 4. Hiệu ứng khi trỏ chuột (HOVER) */
.badge-icon-wrapper[data-tooltip]:hover::after,
.badge-icon-wrapper[data-tooltip]:hover::before {
    visibility: visible;
    opacity: 1;
}
/* Tùy chỉnh thanh điều khiển trên trang cửa hàng (Đã sửa lỗi) */

/* Container FLEX chính, chứa TẤT CẢ mọi thứ */
.shop-container .custom-sorting-tabs {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    border-bottom: 1px solid #eee;
    padding-bottom: 3px;
    margin-bottom: 17px;
}

/* Các tab sắp xếp bên trái */
.shop-container .custom-sorting-tabs .sorting-tab {
    position: relative; /* << THÊM DÒNG NÀY ĐỂ ĐỊNH VỊ CHO GẠCH CHÂN */
    white-space: nowrap;
    margin-right: 40px;
    padding-bottom: 10px; /* Thêm khoảng đệm để gạch chân không bị che mất */
    text-decoration: none;
    color: #333; /* Thêm màu chữ mặc định cho tab */
}

/* Đây là nhóm chứa các điều khiển bên phải */
.shop-container .custom-sorting-tabs .shop-controls-nested-right {
    margin-left: auto; 
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 15px;
}

/* Các nút chuyển đổi view */
.shop-container .shop-controls-nested-right .shop-view-switcher {
    display: flex;
    gap: 8px;
}

/* Dropdown sắp xếp */
.shop-container .shop-controls-nested-right .woocommerce-ordering {
    margin-bottom: 0;
}

/* Định dạng cho TAB ĐANG ACTIVE */
.custom-sorting-tabs .sorting-tab.active {
    color: #2196F3;
    font-weight: bold;
}

/* Gạch chân cho TAB ĐANG ACTIVE */
.custom-sorting-tabs .sorting-tab.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary-gradient);
}

/* Tô màu cho icon view đang active */
.shop-view-switcher .view-icon.active svg path {
    fill: #007bff;
}

/* Responsive cho Mobile */
@media (max-width: 549px) { 
    .shop-container .custom-sorting-tabs {
        flex-wrap: wrap;
        row-gap: 15px; /* Thêm khoảng cách giữa dòng tab và dòng dropdown */
    }

    .custom-sorting-tabs .sorting-tab {
        padding: 2px 3px;
        margin-right: 6px;
    }
    
    /* 2. Ẩn bộ chuyển đổi giao diện (vẫn giữ) */
    .custom-sorting-tabs .shop-view-switcher {
        display: none !important;
    }

    /* 3. Cho dropdown chiếm hết dòng thứ 2 và căn lề phải */
    .shop-container .custom-sorting-tabs .shop-controls-nested-right {
        width: 100%;             /* Chiếm toàn bộ chiều rộng */
        margin-left: 0;          /* Bỏ quy tắc đẩy sang phải của desktop */
        justify-content: flex-end; /* Đẩy dropdown về phía cuối (bên phải) */
    }
	.shop-container .custom-sorting-tabs .sorting-tab {
	margin-right: 24px;
	}
}