:root {
  --primary-color:#F50000;
  --border-color:#dfdfdf;
  --caption-color:#2f2f2f;
  --base-orange:#f60 ;
}

.section-title{
  color: var(--primary-color);
  font-size: 32px;
}

/* --- PRODUCT GRID --- */
.product-grid {
  display: grid;
  align-items:stretch;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px 15px;
}

  .product-grid .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 10px;
    transition: 0.5s ease;
    border: 1px solid var(--border-color);
  }
    .product-grid .product-card .product-img {
      display: flex;
      overflow: hidden;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 230px;
      border-radius: 10px;
      object-fit: contain;
    }
      .product-grid .product-card .product-img img {
        object-fit:contain;
        height: 100%;
        width: 100%;
      }
    .product-grid .product-card a{
      margin-top: auto;
    }    
    .product-grid .product-card .product-name {
      color: var(--caption-color);
      font-size: 15px;
      margin: 12px; 
      display: inline-block;
      padding-left: 10px;
    }
    
    .product-grid .product-card::before{
      content:"";
      position:absolute;
      left:0;bottom:0px;
      height:3px;width:0;
      z-index:2;
      background: var(--primary-color);
      left: 50%;
      transform: translateX(-50%);
      transition:all .4s ease-out 0s;
    }
      .product-grid .product-card:hover::before {width: 100%;}
    
    .product-grid .product-card:hover {       
      transform: translateY(-1px);
      box-shadow: 0px 6px 20px rgba(0,0,0,0.12);
    }
      .product-grid .product-card:hover .product-name{
        color: var(--primary-color);
        /*transition:all .4s ease-out 10ms;*/
    }
    
@media (max-width: 768px) 
{
  .section-title {font-size: 22px;}
  .product-img {height: 200px;}
}

@media (max-width: 480px) 
{
    .product-grid {grid-template-columns: repeat(1, 1fr);}
    .product-img {height: 160px;}
}

/*== */
.sidebar {
  margin-top: 10px;
  padding: 0px;
}  
  .sidebar .title {
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
  }
  
  .sidebar .list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border-color); /* viền ngoài duy nhất */
    border-radius: 2px;                   /* tuỳ chọn */
    overflow: hidden;                     /* tránh “hở” biên do subpixel */
    max-width: 420px;                     /* tuỳ chỉnh theo layout */
  }
  
/* mỗi item chỉ có đường kẻ dưới (separator) */
  .sidebar .list li {
    padding: 15px 8px;
    border-bottom: 1px solid var(--border-color);
    color: #535353;
  }
  /* bỏ kẻ dưới ở item cuối để không bị “đúp” với viền ngoài */
    .sidebar .list li:last-child {
      border-bottom: none;
    }
    .sidebar .list li:hover 
    {
      background-color: var(--primary-color);
      color: #fff;
    }
    .sidebar .list li a{
      display: block;
      color: inherit;
      transition: none;
    }