/* CSS cho chức năng so sánh sản phẩm */

/* Nút so sánh trên thẻ sản phẩm */
.btn-compare {
}

.btn-compare i {
  margin-right: 5px;
}

.btn-compare:hover {
  background-color: #e0e0e0;
}

.btn-compare.active {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
}

/* Thanh so sánh ở cuối trang */
#compare-bar {
  position: fixed;
  bottom: -100px;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: bottom 0.3s ease;
  border-top: 1px solid #e0e0e0;
}

#compare-bar.active {
  bottom: 0;
}

/* Đảm bảo thanh so sánh ẩn đi khi không có class active */
/*#compare-bar:not(.active) {
  bottom: -100px !important;
  display: none !important;
  visibility: hidden !important;
}*/

.compare-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #e0e0e0;
  transition: background-color 0.3s ease, color 0.3s ease; 
}

/* Thêm một class mới để đổi màu */
.compare-bar-header.collapsing {
  background-color: #007bff;
  color: #fff;
  border-bottom-color: #0069d9;
}

/* Đảm bảo các nút bên trong cũng đổi màu */
.compare-bar-header.collapsing .compare-bar-toggle {
  color: #fff;
}

.compare-bar-header.collapsing .compare-bar-toggle:hover {
  color: #e0e0e0;
}

.compare-bar-title {
  font-weight: 600;
  font-size: 14px;
}

.compare-bar-actions {
  display: flex;
  align-items: center;
}

.compare-bar-actions button {
  margin-left: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #666;
}

.compare-bar-actions button:hover {
  color: #ff5252;
}

/* Nút mở thanh so sánh */
#compare-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 999;
  display: none;
  transition: all 0.3s ease;
}

#compare-toggle:hover {
  background-color: #0069d9;
}

#compare-toggle.show {
  display: block;
}

#compare-toggle i {
  margin-right: 5px;
}

/* Thay đổi nút đóng thành nút thu gọn */
.compare-bar-toggle {
  margin-left: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #666;
}

.compare-bar-toggle:hover {
  color: #007bff;
}

.compare-bar-toggle i {
  transition: transform 0.3s ease;
}

.compare-bar-toggle.collapsed i {
  transform: rotate(180deg);
}

.compare-bar-content {
  padding: 15px 20px;
  overflow-x: auto;
  white-space: nowrap;
}

.compare-products-wrapper {
  display: flex;
  gap: 15px;
}

.compare-product-item {
  position: relative;
  width: 150px;
  background-color: #f9f9f9;
  border-radius: 4px;
  padding: 10px;
  border: 1px solid #eee;
}

.compare-product-image {
  height: 100px;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  background: #fff;
}

.compare-product-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.compare-product-info {
  text-align: center;
}

.compare-product-title {
  text-wrap: auto;
  overflow: hidden;
}

.compare-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 10px;
  color: #666;
}

.compare-remove:hover {
  background-color: #ff5252;
  color: white;
  border-color: #ff5252;
}

.compare-bar-footer {
  padding: 10px 20px;
  text-align: center;
  border-top: 1px solid #e0e0e0;
}

.compare-action-button {
  padding: 8px 25px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.compare-action-button:hover {
  background-color: #0069d9;
}

.compare-action-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

/* Thông báo */
.compare-notification {
  position: fixed;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 12px 25px;
  border-radius: 4px;
  z-index: 1010;
  transition: bottom 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.compare-notification.show {
  bottom: 20px;
}

.notification-success {
  background-color: #28a745;
}

.notification-info {
  background-color: #17a2b8;
}

.notification-warning {
  background-color: #ffc107;
  color: #212529;
}

.notification-error {
  background-color: #dc3545;
}

/* Trang so sánh */
.page-compare-wrapper {
  padding: 30px 0;
}

.page-header, .page-footer {
  margin-bottom: 30px;
  text-align: center;
}

.page-title {
  margin-bottom: 10px;
}

.page-desc {
  color: #666;
}

.compare-loading {
  text-align: center;
  padding: 40px 0;
}

.loading-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 123, 255, 0.3);
  border-radius: 50%;
  border-top-color: #007bff;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.compare-empty {
  padding: 60px 0;
  text-align: center;
}

.empty-message i {
  font-size: 50px;
  color: #ddd;
  margin-bottom: 20px;
}

.compare-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
  gap: 10px;
}

/* Bảng so sánh */
.compare-table {
  overflow-x: auto;
  margin-bottom: 40px;
}

#product-comparison {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e0e0e0;
}

#product-comparison th,
#product-comparison td {
  border: 1px solid #e0e0e0;
  padding: 15px;
  text-align: center;
  vertical-align: middle;
}

#product-comparison th:first-child {
  background-color: #f8f8f8;
  font-weight: 600;
  text-align: left;
  width: 200px;
}

.compare-feature-title {
  position: sticky;
  left: 0;
  z-index: 2;
}

.compare-product-header {
  position: relative;
  width: 250px;
}

.compare-product-image-cell img {
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
  margin: 0 auto;
}

.compare-product-title-cell a {
  font-weight: 600;
  color: #007bff;
  text-decoration: none;
}

.compare-product-title-cell a:hover {
  color: #007bff;
}

.compare-price-current {
  font-weight: 600;
  color: #ff5252;
  font-size: 16px;
}

.compare-price-old {
  text-decoration: line-through;
  color: #999;
  font-size: 14px;
  width: 100%;
  display: block;
}

.in-stock {
  color: #28a745;
  font-weight: 600;
}

.out-of-stock {
  color: #dc3545;
  font-weight: 600;
}

.compare-attr-title {
  background-color: #f8f8f8;
  font-weight: 600;
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 2;
}

.compare-attr-value {
  text-align: center;
}

.not-available {
  color: #999;
}

/* Responsive cho bảng so sánh */
@media screen and (max-width: 767px) {
  .compare-product-header {
    width: 180px;
  }
  
  #product-comparison th:first-child {
    width: 150px;
  }
  
  .compare-product-image-cell img {
    max-width: 100px;
    max-height: 100px;
  }
  
  #product-comparison th,
  #product-comparison td {
    padding: 10px;
  }
}

/* Print styles */
@media print {
  .compare-controls,
  .compare-remove,
  .compare-product-add-cell button {
    display: none !important;
  }
  
  #product-comparison {
    width: 100%;
  }
  
  body {
    color: #000;
    background: #fff;
  }
  
  .page-header h1 {
    text-align: center;
    margin-bottom: 20px;
  }
}

/* Ẩn thanh so sánh trên trang giỏ hàng */
body.template-cart #compare-bar {
  display: none !important;
}

body.template-cart #compare-toggle {
  display: none !important;
}

/* Chỉ thêm styles cho links trong thanh so sánh */

.compare-product-image a {
  display: block;
  height: 100%;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.compare-product-image a:hover {
  opacity: 0.85;
}

.compare-product-title a {
  transition: color 0.2s ease;
}

.compare-product-title a:hover {
  color: #007bff;
  text-decoration: underline;
}

/* Định dạng nút Xóa tất cả giống nút So sánh ngay nhưng màu ghi xám */

/* Cập nhật footer thanh so sánh */
.compare-bar-footer {
  padding: 10px 20px;
  border-top: 1px solid #e0e0e0;
}

/* Thêm container cho các nút trong footer */
.compare-footer-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* Style cho nút Xóa tất cả - giống nút So sánh ngay nhưng màu ghi xám */
.compare-clear {
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.compare-clear:hover {
  background-color: #d0d0d0; /* Màu đậm hơn khi hover */
  color: #333;
}

/* Điều chỉnh lại style cho nút So sánh ngay */
.compare-action-button {
  padding: 8px 25px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.compare-action-button:hover {
  background-color: #0069d9;
}

.compare-action-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

/* CSS để cố định dòng tên sản phẩm khi cuộn trang */

/* Cấu trúc bảng so sánh */
.compare-table {
  overflow-x: auto;
  margin-bottom: 40px;
  position: relative; /* Để các phần tử con có thể định vị theo nó */
}

/* Style cơ bản cho bảng so sánh */
#product-comparison {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e0e0e0;
}

#product-comparison th,
#product-comparison td {
  border: 1px solid #e0e0e0;
  padding: 15px;
  text-align: center;
  vertical-align: middle;
}

/* Cố định dòng đầu tiên (ảnh sản phẩm) khi cuộn */
#product-comparison thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Cố định dòng thứ hai (tên sản phẩm) khi cuộn */
#product-comparison thead tr:nth-child(2) th {
  position: sticky;
  top: 180px; /* Điều chỉnh theo chiều cao của dòng ảnh sản phẩm */
  z-index: 9;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Đảm bảo cột đầu tiên (tên thuộc tính) luôn hiển thị khi cuộn ngang */
#product-comparison th:first-child,
#product-comparison td:first-child {
  position: sticky;
  left: 0;
  z-index: 8;
  background-color: #f8f8f8;
  font-weight: 500;
  text-align: left;
  width: 200px;
}

/* Khi vừa cuộn ngang vừa cuộn dọc, đảm bảo cell giao nhau hiển thị đúng */
#product-comparison thead tr:first-child th:first-child,
#product-comparison thead tr:nth-child(2) th:first-child {
  z-index: 11;
  background-color: #f8f8f8;
}

/* Style cho ô ảnh sản phẩm */
.compare-product-image-cell {
  height: 180px;
  padding: 10px !important;
}

.compare-product-image-cell img {
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
  margin: 0 auto;
}

/* Style cho ô tên sản phẩm */
.compare-product-title-cell {
  height: 50px;
  padding: 10px !important;
}

.compare-product-title-cell a:hover {
  color: #007bff;
}

/* Responsive: Điều chỉnh cho màn hình nhỏ */
@media screen and (max-width: 767px) {
  /* Giảm kích thước các ô để phù hợp với màn hình nhỏ */
  #product-comparison th,
  #product-comparison td {
    padding: 10px;
  }
  
  /* Điều chỉnh vị trí dòng tên sản phẩm khi sticky */
  #product-comparison thead tr:nth-child(2) th {
    top: 120px; /* Giảm xuống cho phù hợp với kích thước ảnh nhỏ hơn */
  }
  
  /* Giảm kích thước ảnh và chiều cao cell */
  .compare-product-image-cell {
    height: 120px;
  }
  
  .compare-product-image-cell img {
    max-width: 100px;
    max-height: 100px;
  }
}

/* Đảm bảo khả năng click của những links này trên các thiết bị di động */
@media (max-width: 767px) {
  .compare-product-image a,
  .compare-product-title a {
    padding: 2px;
  }
}

/* Đảm bảo thanh so sánh ẩn đi khi không có class active */
#compare-bar:not(.active) {
  bottom: -100px !important;
  display: none !important;
  visibility: hidden !important;
}

/* Styles bổ sung để tăng trải nghiệm người dùng cho bảng so sánh */

/* Tạo highlight khi hover vào hàng */
#product-comparison tbody tr:hover {
  background-color: rgba(0, 123, 255, 0.05);
}

/* Thêm class highlight-row được dùng bởi JavaScript */
#product-comparison tr.highlight-row {
  background-color: rgba(0, 123, 255, 0.05);
}

/* Làm nổi bật các tiêu đề phần trong bảng */
#product-comparison .section-title {
  background-color: #f0f0f0;
  font-weight: bold;
  color: #333;
}

/* Cải thiện hiển thị khi sticky header active */
#product-comparison thead tr:first-child th,
#product-comparison thead tr:nth-child(2) th {
  transition: box-shadow 0.3s ease;
}

#product-comparison thead tr:first-child th.sticky-active,
#product-comparison thead tr:nth-child(2) th.sticky-active {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Màu sắc xen kẽ cho các hàng để dễ đọc hơn */
#product-comparison tbody tr:nth-child(even) {
  background-color: #fafafa;
}

/* Cải thiện hiển thị của các nút trong bảng */
#product-comparison .btn {
  min-width: 120px;
  margin: 5px auto;
}

/* Thêm thanh điều hướng nhanh đến các phần của bảng */
.compare-section-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
  padding: 10px;
  background: #f8f8f8;
  border-radius: 4px;
}

.compare-section-nav a {
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  text-decoration: none;
  color: #333;
  font-size: 13px;
  transition: all 0.2s ease;
}

.compare-section-nav a:hover {
  background: #f0f0f0;
  border-color: #ccc;
}

/* Cải thiện hiển thị trên thiết bị di động */
@media (max-width: 767px) {
  .compare-section-nav {
    flex-direction: column;
    gap: 5px;
  }
  
  .compare-section-nav a {
    text-align: center;
  }
  
  /* Điểm nhấn visual để người dùng biết có thể cuộn ngang */
  .compare-table:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 15px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.05));
    pointer-events: none;
  }
}

/* Kiểu cho nút in bảng và nút tải về PDF */
.compare-print-button,
.compare-pdf-button {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 15px;
  margin-left: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
}

.compare-print-button i,
.compare-pdf-button i {
  margin-right: 5px;
}

.compare-print-button:hover,
.compare-pdf-button:hover {
  background-color: #e8e8e8;
}
/* Kiểu dáng cho các điểm khác nhau */
#product-comparison tr.highlight-row {
  background-color: rgba(255, 245, 230, 0.5) !important;
}

#product-comparison tr.highlight-row:hover {
  background-color: rgba(255, 245, 230, 0.8) !important;
}

#product-comparison tr.highlight-row th {
  color: #d04000;
  font-weight: 700;
}

#product-comparison tr.highlight-row {
  color: #d04000;
}

/* Thêm biểu tượng cho các thuộc tính khác nhau */
#product-comparison tr.highlight-row th:before {
  content: "⚡ ";
  font-size: 0.9em;
}

/* Định dạng cho tooltip hiển thị giải thích */
.tooltip-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #f0f0f0;
  border-radius: 50%;
  text-align: center;
  line-height: 16px;
  margin-left: 5px;
  font-size: 10px;
  color: #666;
  cursor: help;
  position: relative;
}

.tooltip-icon:hover:after {
  content: "Đặc điểm này có sự khác biệt giữa các sản phẩm";
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 12px;
  z-index: 1000;
}

/* Animation nhẹ cho các điểm nổi bật khi trang tải xong */
@keyframes highlightFade {
  from { background-color: rgba(255, 230, 180, 0.8); }
  to { background-color: rgba(255, 245, 230, 0.5); }
}

#product-comparison tr.highlight-row {
  animation: highlightFade 1.5s ease-out;
}

/* Định dạng đặc biệt cho điện thoại di động */
@media (max-width: 767px) {
  #product-comparison tr.highlight-row th strong:before {
    content: "⚡";
    font-size: 0.8em;
    margin-right: 2px;
  }
  
  #product-comparison tr.highlight-row strong {
    display: block;
    padding: 2px 0;
  }
}

/* Kiểu cho nút lọc điểm khác biệt */
.compare-toggle-similar {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

.compare-toggle-similar:hover {
  background-color: #e9ecef;
}

/* Kiểu cho hộp thông tin */
.compare-info-box {
  margin-bottom: 15px;
}

.compare-info-box .alert {
  padding: 10px 15px;
  background-color: #e8f4f8;
  border: 1px solid #bee5eb;
  border-radius: 4px;
  color: #0c5460;
}
.compare-bar-footer .compare-clear {
  padding: 0px 16px;
}