/* --- 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 (phiên bản cập nhật) */

/* Container chính, dùng Flexbox để đẩy 2 nhóm ra 2 bên */
.custom-shop-controls-container {
    display: flex;
    justify-content: space-between; /* Đẩy nhóm trái và nhóm phải về 2 phía */
    align-items: center;
    width: 100%;
    padding-bottom: 15px;
}

/* Nhóm các tab bên trái */
.custom-sorting-tabs {
    display: flex;
    gap: 20px; /* Khoảng cách giữa các tab */
}

/* Nhóm các điều khiển bên phải */
.shop-controls-right {
    display: flex;
    align-items: center;
    gap: 15px; /* Khoảng cách giữa nút xem và dropdown */
}

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

/* Đảm bảo form sắp xếp của WooCommerce không có lề dưới */
.shop-controls-right .woocommerce-ordering {
    margin-bottom: 0;
}
/* CSS cho thanh điều khiển - Phiên bản cuối cùng */

/* Container ngoài cùng chỉ để tạo khoảng cách */
.shop-container .custom-shop-controls-container {
    padding-bottom: 15px;
}

/* Đây là container FLEX chính, chứa TẤT CẢ mọi thứ */
.shop-container .custom-sorting-tabs {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Các tab sắp xếp bên trái */
.shop-container .custom-sorting-tabs .sorting-tab {
    margin-right: 20px; /* Khoảng cách giữa các 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 {
    /* Đây là "phép màu" chính: */
    margin-left: auto; /* Tự động đẩy nhóm này về hết bên phải */
    
    display: flex;
    align-items: center;
    gap: 15px; /* Khoảng cách giữa nút xem và dropdown */
}

/* 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;
}
.shop-view-switcher .view-icon.active svg {
    fill: #007bff; /*! Bạn có thể thay đổi mã màu xanh này thành màu bạn muốn */
}

/* Tùy chọn: Nếu SVG của bạn phức tạp và màu được định nghĩa trong thẻ <path> */
.shop-view-switcher .view-icon.active svg path {
    fill: #007bff; /*! Bạn có thể thay đổi mã màu xanh này thành màu bạn muốn */
}