/* ==========================================================================
   1. THIẾT LẬP CHUNG
   ========================================================================== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    overflow-x: hidden;
}

/* ==========================================================================
   2. THANH NAVBAR CHÍNH
   ========================================================================== */
.main-navbar .nav-link {
    color: #333 !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    position: relative;
    transition: color 0.3s ease;
}

.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
    color: #ffc107 !important;
}

.main-navbar .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: #ffc107;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.main-navbar .nav-link:hover::after,
.main-navbar .nav-link.active::after {
    width: 70%;
}

.main-navbar .dropdown-toggle::after {
    display: none !important;
}

.small-icon {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.nav-item.dropdown:hover .small-icon {
    transform: rotate(180deg);
}

/* ==========================================================================
   3. MEGA MENU HOVER & CHỐNG RỚT CHUỘT (PC)
   ========================================================================== */
@media (min-width: 992px) {
    .has-mega-menu {
        position: static !important;
    }
    
    .mega-menu-wrapper {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        margin-top: 0;
        border-radius: 0 0 12px 12px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px);
        
        display: block !important;
        visibility: hidden;
        opacity: 0;
        transform: translateY(15px);
        transition: visibility 0.3s, opacity 0.3s, transform 0.3s;
        transition-delay: 0.15s; 
    }

    .mega-menu-wrapper::before {
        content: "";
        position: absolute;
        top: -22px; 
        left: 0;
        width: 100%;
        height: 22px;
        background: transparent;
    }

    .has-mega-menu:hover .mega-menu-wrapper {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0s; 
    }
    
    .border-end-lg {
        border-right: 1px solid #dee2e6;
    }
}

.mega-links li {
    margin-bottom: 0.6rem;
}

.mega-links a {
    color: #555;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    display: inline-block;
}

.mega-links a:hover {
    color: #ffc107;
    transform: translateX(5px);
}

.brand-grid .btn {
    font-weight: 500;
    font-size: 0.85rem;
}
.brand-grid .btn:hover {
    background-color: #f8f9fa;
    border-color: #ffc107 !important;
    color: #ffc107 !important;
}

/* ==========================================================================
   4. DROPDOWN THƯƠNG HIỆU LỚN DẠNG GRID CARD
   ========================================================================== */
@media (min-width: 992px) {
    .brand-menu-wrapper {
        width: 750px !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(15px) !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px);
        
        display: block !important;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0.3s, opacity 0.3s, transform 0.3s;
        transition-delay: 0.15s;
    }

    .brand-menu-wrapper::before {
        content: "";
        position: absolute;
        top: -20px;
        left: 35%;  
        width: 30%; 
        height: 20px;
        background: transparent;
    }

    .has-brand-menu:hover .brand-menu-wrapper {
        visibility: visible;
        opacity: 1;
        transform: translateX(-50%) translateY(0) !important;
        transition-delay: 0s;
    }
}

.brand-item-link {
    display: block;
    color: #444;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 10px 12px;
    background-color: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 8px;
    text-align: center;
    transition: all 0.25s ease;
}

.brand-item-link:hover {
    color: #fff;
    background-image: linear-gradient(135deg, #333, #000);
    border-color: #ffc107;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

@media (max-width: 991.98px) {
    .brand-menu-wrapper {
        width: 100% !important;
        box-shadow: none !important;
        padding: 10px 15px !important;
    }
    .brand-item-link {
        text-align: left;
        background-color: transparent;
        border: none;
        padding: 6px 0;
        font-size: 0.95rem;
    }
    .brand-item-link:hover {
        color: #ffc107;
        background: none;
        transform: translateX(5px);
        box-shadow: none;
    }
}

/* ==========================================================================
   5. ĐỊNH DẠNG DROPDOWN THƯỜNG (MỤC HƯỚNG DẪN)
   ========================================================================== */
@media (min-width: 992px) {
    .normal-menu-wrapper {
        display: block !important;
        visibility: hidden;
        opacity: 0;
        transform: translateY(15px);
        transition: all 0.3s ease;
        min-width: 220px;
        border-radius: 8px !important;
    }

    .has-normal-menu {
        position: relative;
    }
    .has-normal-menu::after {
        content: "";
        position: absolute;
        bottom: -15px;
        left: 0;
        width: 100%;
        height: 15px;
        background: transparent;
    }

    .has-normal-menu:hover .normal-menu-wrapper {
        visibility: visible;
        opacity: 1;
        transform: translateY(5px);
    }
}

.normal-menu-wrapper .dropdown-item {
    color: #444;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.normal-menu-wrapper .dropdown-item:hover {
    background-color: #fff4d4;
    color: #ffc107;
    padding-left: 20px; 
}

/* ==========================================================================
   6. Ô TÌM KIẾM POPUP (CLICK-TO-OPEN)
   ========================================================================== */
.search-wrapper .search-trigger {
    text-decoration: none;
    line-height: 1;
}

.search-form-popup {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 300px;
    margin-top: 18px; 
    z-index: 1060;
}

.search-form-popup.show {
    display: block;
    animation: fadeInSlideDown 0.25s ease-out;
}

.search-form-popup input:focus {
    box-shadow: none;
    outline: none;
}

@keyframes fadeInSlideDown {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 991.98px) {
    .search-form-popup {
        width: 280px; 
        right: 0px;
    }
}

@media (max-width: 420px) {
    .search-form-popup {
        width: 240px;
    }
}

/* ==========================================================================
   7. NÚT VÀNG KÈM GIỎ HÀNG (ĐÃ ĐỂ OPACITY RÕ 100%)
   ========================================================================== */
.cta-btn {
    padding: 6px 16px;
    color: #212529;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}

.cta-btn:hover {
    background-color: #e0a800 !important;
    color: #000 !important;
    transform: scale(1.03);
}

.cta-divider {
    opacity: 0.3; /* Thanh vạch ngăn cách ngang để sáng lên một chút cho tương đồng */
    font-weight: 300;
}

/* ĐÃ CẬP NHẬT: Icon giỏ hàng hiển thị rõ nét 100% không bị mờ */
.cta-cart-icon {
    display: inline-block;
    padding-right: 4px; 
    opacity: 1 !important; /* Hiển thị rõ nét hoàn toàn */
}

.cart-badge {
    font-size: 0.65rem;
    padding: 0.25em 0.45em;
    transform: translate(-10%, -30%) !important;
}


/* BEGIN Slide Xoay */


/* ==========================================================================
   8. HIỆU ỨNG ĐỘNG KHÁC
   ========================================================================== */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.animate-pulse {
    animation: pulse 2s infinite;
}

/* Khung chứa tạo không gian hiển thị 3D sâu */
.menu-3d-wrapper {
  perspective: 2000px; 
  overflow: hidden;    
  
  /* TĂNG CHIỀU CAO: Nâng từ 280px lên 360px để phần đáy không bao giờ bị cắt */
  height: 360px;       
  width: 100%;         
  
  display: flex;
  justify-content: center;
  align-items: flex-start; 
}

/* Khung xoay tròn chứa các item */
.scope-3d {
  position: relative;
  width: 160px; 
  height: 240px;
  
  /* ĐIỀU CHỈNH MARGIN: Tăng nhẹ margin âm để kéo cân đối khoảng trống phía trên */
  margin-top: -15px; 
  
  transform-style: preserve-3d;
  
  /* GIẢM TỐC ĐỘ: Tăng từ 80s lên 120s để vòng xoay chạy cực kỳ chậm rãi, mượt mà */
  animation: spin3D 240s linear infinite; 
}

/* Dừng xoay hẳn khi rê chuột vào */
.scope-3d:hover {
  animation-play-state: paused;
}

/* Cấu hình vị trí từng item trong vòng tròn */
.scope-3d span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 30deg)) translateZ(520px);
}

.scope-3d span img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; 
  transition: transform 0.4s ease;
  filter: drop-shadow(0px 8px 12px rgba(0,0,0,0.15)); 
}

/* Hiệu ứng zoom nổi bật khi di chuột vào sản phẩm */
.scope-3d span:hover img {
  transform: scale(1.1);
}

/* Định nghĩa chuyển động xoay tròn (Góc nghiêng -6 độ vừa phải) */
@keyframes spin3D {
  0% {
    transform: rotateX(-6deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(-6deg) rotateY(360deg);
  }
}

/* Tối ưu hiển thị Responsive trên màn hình điện thoại (Mobile) */
@media (max-width: 768px) {
  .menu-3d-wrapper {
    height: 180px; 
  }
  .scope-3d {
    width: 70px;
    height: 110px;
    margin-top: 0px;
    animation: spin3D 60s linear infinite; /* Mobile vòng nhỏ hơn nên để 60s là vừa */
  }
  .scope-3d span {
    transform: rotateY(calc(var(--i) * 30deg)) translateZ(150px);
  }
}
/* End Slide Xoay */



/* Begin Sidebar Home */

/* Tạo kiểu cho Header mới nằm bên trong viền của Card */
.card-header-modern {
  background-color: #f8f9fa; /* Nền xám rất nhẹ, thanh lịch */
  position: relative;
}

/* Thanh chỉ màu trang trí tinh tế dưới chữ tiêu đề */
.card-header-modern::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 45px;
  height: 2px;
  background-color: #ffc107; /* Giữ điểm nhấn màu vàng */
  z-index: 2;
}

.sidebar-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #333;
  letter-spacing: 0.5px;
}

/* Tinh chỉnh khoảng cách padding cho vừa vặn */
.py-2-5 {
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
}

/* Các tùy chỉnh chung cho các item */
.sidebar-modern .list-group-item-action {
  transition: all 0.2s ease-in-out;
  background-color: #ffffff;
  border-color: #eaeaea !important;
}
.sidebar-modern .list-group-item-action:hover {
  background-color: #f8f9fa !important;
  transform: translateX(4px);
}
.sidebar-modern .small-title {
  font-size: 0.75rem;
  line-height: 1.3;
}
.sidebar-modern .text-xs {
  font-size: 0.7rem;
}
.sidebar-modern .icon-box {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.sidebar-modern .bg-danger-soft {
  background-color: #fff5f5 !important;
}
.sidebar-modern .bg-danger-soft:hover {
  background-color: #ffe3e3 !important;
}
.sidebar-modern .text-purple {
  color: #6f42c1;
}

/* Lưới thương hiệu */
.sidebar-modern .brand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  background: #f8f9fa;
  border: 1px solid #eee;
  border-radius: 6px;
  text-decoration: none;
  color: #333;
  font-weight: 600;
  font-size: 0.75rem;
  transition: all 0.2s ease;
  height: 100%;
}
.sidebar-modern .brand-item img {
  max-width: 85%;
  height: auto;
  object-fit: contain;
  margin-bottom: 4px;
}
.sidebar-modern .brand-item:hover {
  background: #fff;
  border-color: #ffc107;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transform: translateY(-2px);
}

/* End Sidebar Home */

/* BEGIN footer */
/* Tạo dải gradient tối cho phần nhãn chữ trên hình ảnh Showroom */
.bg-gradient-dark {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}

/* Hiệu ứng mượt mà khi di chuột vào các liên kết ở footer */
.hover-link {
  transition: color 0.2s ease-in-out, padding-left 0.2s ease-in-out;
}
.hover-link:hover {
  color: #ffc107 !important;
  padding-left: 4px;
}

/* Cấu trúc hiển thị của danh sách thông tin liên hệ */
.footer-info-list p {
  color: #ced4da;
}

/* =======================================================
   [1] ĐỊNH DẠNG THANH DESKTOP: CHIỀU DỌC - NỀN MỜ 50%
   ======================================================= */
@media (min-width: 768px) {
  .quick-contact-bar-desktop {
    position: fixed;
    bottom: 25px;   
    right: 20px;    
    width: 52px;    
    /* Background mờ 50% kèm hiệu ứng kính mờ */
    background-color: rgba(247, 247, 247, 1) !important; 
    backdrop-filter: blur(4px);
    border-radius: 10px;
    padding: 6px 0;
    z-index: 1050;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08) !important;
  }

  .contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333;
    width: 100%;
    padding: 6px 0;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .contact-item span {
    font-size: 0.6rem;
    font-weight: 600;
    margin-top: 2px;
    color: #212529;
    transform: scale(0.9);
  }

  .contact-item:hover {
    background-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.05);
  }
  
  .contact-item:hover span {
    color: #ffc107;
  }

  .call-pulse img {
    animation: pulse 1.2s infinite;
    border-radius: 50%;
  }
}

/* =======================================================
   [2] ĐỊNH DẠNG THANH MOBILE: NỀN MỜ 50% & CAO 30% (CHỈ NGANG CHỮ)
   ======================================================= */
@media (max-width: 767.98px) {
  body {
    padding-bottom: 50px !important; 
  }

  .quick-contact-bar-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Giảm chiều cao nền xuống còn 18px (khoảng 30% so với bản cũ) */
    height: 18px; 
    /* Background mờ 50% kèm hiệu ứng kính mờ */
    background-color: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(4px);
    z-index: 1050;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    /* Cho phép các thành phần con hiển thị tràn ra ngoài dải nền */
    overflow: visible !important; 
  }

  .contact-item-mb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Đẩy chữ xuống sát đáy */
    text-decoration: none;
    color: #212529;
    flex: 1;
    height: 18px;
    position: relative;
  }

  /* Đẩy các Icon trồi hẳn lên trên dải nền trắng */
  .contact-item-mb img {
    position: absolute;
    bottom: 16px; /* Cách đáy để nằm hoàn toàn phía trên dải nền */
    transition: transform 0.2s;
  }

  /* Chữ nằm gọn bên trong dải nền mờ 18px */
  .contact-item-mb span {
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 18px; /* Căn giữa chữ theo chiều cao dải nền */
  }

  .call-pulse-mb img {
    animation: pulse-mb 1.2s infinite;
    border-radius: 50%;
  }
}

/* =======================================================
   [3] HIỆU ỨNG NHẤP NHÁY PULSE CHO NÚT GỌI ĐIỆN
   ======================================================= */
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.3); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

@keyframes pulse-mb {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

/* END footer */

/* BEGIN thương hiệu */
/* =======================================================
   [4] KHỐI LOGO THƯƠNG HIỆU (CHỈ ÁP DỤNG TRONG FOOTER)
   ======================================================= */

/* Thiết lập lưới linh hoạt - Chỉ ăn theo class .brand-grid ở footer */
.brand-grid {
  display: flex;
  flex-wrap: wrap;
}

/* Chia tỉ lệ hiển thị mượt mà và cô lập bằng .brand-grid */
.brand-grid .brand-item {
  flex: 0 0 25%;       /* Trên Mobile: 4 logo 1 hàng */
  max-width: 25%;
  padding: 4px;
}

@media (min-width: 576px) {
  .brand-grid .brand-item {
    flex: 0 0 16.666%; /* Trên Tablet nhỏ: 6 logo 1 hàng */
    max-width: 16.666%;
  }
}

@media (min-width: 992px) {
  .brand-grid .brand-item {
    flex: 0 0 12.5%;   /* Trên Laptop: 8 logo 1 hàng */
    max-width: 12.5%;
  }
}

@media (min-width: 1200px) {
  .brand-grid .brand-item {
    flex: 0 0 8.333%;  /* Trên Desktop lớn: Toàn bộ 12 logo trên 1 hàng */
    max-width: 8.333%;
  }
}

/* Khung bọc logo màu trắng mờ chuẩn chỉ ở footer */
.brand-grid .brand-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px; 
  background-color: #ffffff !important; 
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px; 
  padding: 6px;
  opacity: 0.75; 
  transition: all 0.25s ease-in-out;
}

/* Định dạng ảnh logo bên trong footer */
.brand-grid .brand-link img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain; 
  filter: grayscale(100%); 
  opacity: 0.8;
  transition: all 0.25s ease-in-out;
}

/* Hiệu ứng Hover - Chỉ kích hoạt tại footer */
.brand-grid .brand-link:hover {
  opacity: 1 !important;        
  border-color: #ffc107;        
  transform: translateY(-2px);  
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3); 
}

.brand-grid .brand-link:hover img {
  filter: grayscale(0%);        
  opacity: 1;
}

/* END Thương hiệu */

/* BEGIN bộ lọc */
			  /* CẤU HÌNH RESPONSIVE CHỈ KHÓA TÍNH NĂNG COLLAPSE CỦA CÁC MỤC CON TRÊN PC */
			  @media (min-width: 992px) {
				/* Ép các mục nhỏ bên trong luôn hiển thị khối block, không bị ẩn kể cả khi click */
				.filter-group .collapse:not(.show) {
				  display: block !important;
				}
				/* Vô hiệu hóa hiệu ứng click chuột làm đóng/mở trên tiêu đề mục con */
				.filter-group .filter-toggle-header {
				  cursor: default !important;
				  pointer-events: none !important;
				}
			  }

			  /* Giao diện cho các thẻ Tag đã chọn nhanh */
			  .filter-tag {
				position: relative;
				padding: 6px 30px 6px 12px;
				font-size: 13px;
				font-weight: 500;
				border-radius: 4px;
				display: inline-flex;
				align-items: center;
				text-transform: capitalize;
			  }
			  .filter-tag-primary {
				background-color: #e7f1ff;
				color: #0d6efd;
				border: 1px solid #b6d4fe;
			  }
			  .filter-tag-secondary {
				background-color: #f8f9fa;
				color: #495057;
				border: 1px solid #dee2e6;
			  }
			  .filter-tag .btn-close-tag {
				position: absolute;
				top: 50%;
				right: 8px;
				transform: translateY(-50%);
				cursor: pointer;
				font-weight: bold;
				font-size: 12px;
				opacity: 0.6;
				transition: opacity 0.15s ease;
			  }
			  .filter-tag .btn-close-tag:hover {
				opacity: 1;
			  }

			  /* Định dạng nút Xóa của từng mục giống style gốc */
			  .btn-clear-group {
				color: #6c757d !important;
				border-color: #6c757d !important;
				background-color: transparent !important;
				transition: all 0.15s ease-in-out;
				pointer-events: auto !important; /* Đảm bảo nút xóa vẫn click được trên PC */
			  }
			  .btn-clear-group:hover {
				color: #dc3545 !important;
				border-color: #dc3545 !important;
				background-color: rgba(220, 53, 69, 0.05) !important;
			  }

			  /* Hiệu ứng xoay icon khi đóng/mở sub-collapse */
			  .filter-toggle-header[aria-expanded="false"] .toggle-icon {
				transform: rotate(-90deg);
			  }
			  .toggle-icon {
				transition: transform 0.2s ease;
				display: inline-block;
			  }

			  /* Hiệu ứng kích hoạt cho bộ lọc phân cấp (Màu xanh dương) */
			  .filter-hierarchy:checked + .btn-outline-primary {
				background-color: #0d6efd !important;
				color: #fff !important;
				font-weight: bold;
				box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3) !important;
			  }
			  
			  /* Hiệu ứng kích hoạt cho bộ lọc danh mục (Màu xám đậm) */
			  .filter-category:checked + .btn-outline-secondary {
				background-color: #6c757d !important;
				color: #fff !important;
				font-weight: bold;
				box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3) !important;
			  }

			  /* --- SỬA LỖI FOCUS GIỮ MÀU --- */
			  .filter-hierarchy:not(:checked) + .btn-outline-primary,
			  .filter-hierarchy:not(:checked) + .btn-outline-primary:focus,
			  .filter-hierarchy:not(:checked) + .btn-outline-primary:active {
				background-color: transparent !important;
				color: #0d6efd !important;
				box-shadow: none !important;
			  }

			  .filter-category:not(:checked) + .btn-outline-secondary,
			  .filter-category:not(:checked) + .btn-outline-secondary:focus,
			  .filter-category:not(:checked) + .btn-outline-secondary:active {
				background-color: transparent !important;
				color: #6c757d !important;
				box-shadow: none !important;
			  }

			  .filter-group label {
				cursor: pointer;
			  }
			  .filter-group .btn {
				transition: all 0.15s ease-in-out;
			  }
/* END bộ lọc */

/* BEGIN sidebar và seo-content-block */
/* Hiệu ứng đổ bóng mịn và bo góc hiện đại theo chuẩn UI/UX */
.custom-sidebar-wrap, .custom-content-wrap {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f3f5;
    padding: 10px;
}
.category-banner {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); 
    border-left: 5px solid #ffc107;
}
/* Custom lại breadcrumb cho thanh thoát */
.breadcrumb-custom a {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.2s;
}
.breadcrumb-custom a:hover {
    color: #ffc107;
}
/* Định dạng bài viết SEO dưới chân trang cho sạch sẽ, dễ đọc */
.seo-content-block h2 {
    font-size: 20px;
    font-weight: 700;
    color: #212529;
    margin-top: 25px;
    margin-bottom: 15px;
    border-bottom: 2px solid #f1f3f5;
    padding-bottom: 8px;
}
.seo-content-block h3 {
    font-size: 16px;
    font-weight: 600;
    color: #495057;
    margin-top: 18px;
    margin-bottom: 10px;
}
.seo-content-block p, .seo-content-block li {
    font-size: 14.5px;
    color: #495057;
    line-height: 1.6;
}
/* Tinh chỉnh riêng cho khối FAQ Accordion */
.faq-section .accordion-button:not(.collapsed) {
    background-color: #fffdf5;
    color: #ffc107;
    box-shadow: none;
}
.faq-section .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(255, 193, 7, 0.5);
}

/* =======================================================
   CSS CHO TÍNH NĂNG THU GỌN / MỞ RỘNG KHỐI NỘI DUNG SEO
   ======================================================= */
.seo-collapse-wrapper {
    position: relative;
    max-height: 350px; /* Chiều cao giới hạn ban đầu khi thu gọn */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}
.seo-collapse-wrapper.expanded {
    max-height: 5000px; /* Mở rộng tối đa khi kích hoạt */
}
/* Lớp phủ mờ che mờ văn bản ở cuối khi đang thu gọn */
.seo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.seo-collapse-wrapper.expanded .seo-overlay {
    opacity: 0; /* Ẩn lớp phủ mờ khi đã mở rộng */
}

/* END sidebar và seo-content-block */

/* Sửa lỗi các cột sản phẩm bị kéo giãn theo chiều cao sidebar */
#product-results > div[class*="col-"], 
#product-results .product-layout {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}

/* Định hình lại khung Box sản phẩm vuông vắn, đều nhau */
#product-results .product-thumb,
#product-results .product-item,
#product-results .card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
    padding: 15px !important;
    transition: all 0.25s ease-in-out !important;
}

/* Sửa lỗi chữ tiêu đề sản phẩm bị ép dọc thành 1 hàng chữ */
#product-results h4,
#product-results h3,
#product-results .name,
#product-results .product-title {
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #212529 !important;
    margin: 12px 0 6px 0 !important;
    white-space: normal !important; /* Ngăn chặn việc ép chữ lỗi */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* Giới hạn tối đa 2 dòng tiêu đề */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 38px !important; /* Giữ khoảng cách chữ đồng đều */
}

/* Khống chế kích thước ảnh/icon bên trong sản phẩm không bị phóng to dị dạng */
#product-results .image img,
#product-results .img-responsive,
#product-results .product-thumb img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Căn chỉnh lại hiển thị giá tiền */
#product-results .price,
#product-results .price-new,
#product-results [class*="price"] {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #dc3545 !important;
    margin-top: auto !important; /* Đẩy giá tiền nằm sát đáy box sản phẩm */
}