/* v1.1.02 - thiết kế lại khối Danh mục trang chủ */
/* chỉ áp dụng khối Danh mục ở homepage desktop/mobile, không đụng sidebar */
.container.section .categories{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:flex-start !important;
  gap:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
}

.container.section .categories .cat{
  flex:1 1 150px !important;
  max-width:170px !important;
  min-width:130px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
  gap:10px !important;
  padding:14px 12px 12px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

.container.section .categories .cat:hover{
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}

.container.section .categories .cat .circle,
.container.section .categories .cat .category-photo{
  width:96px !important;
  height:96px !important;
  min-width:96px !important;
  min-height:96px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  display:block !important;
  padding:0 !important;
  margin:0 auto !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.container.section .categories .cat .circle img,
.container.section .categories .cat .category-photo img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  border-radius:50% !important;
}

.container.section .categories .cat b{
  display:block !important;
  margin:0 !important;
  font-size:14px !important;
  line-height:1.35 !important;
  font-weight:700 !important;
  color:#2d2630 !important;
  text-align:center !important;
}

@media (max-width: 768px){
  .container.section .categories{
    gap:6px 0 !important;
  }
  .container.section .categories .cat{
    flex:1 1 25% !important;
    min-width:84px !important;
    max-width:25% !important;
    padding:10px 6px 8px !important;
    gap:8px !important;
  }
  .container.section .categories .cat .circle,
  .container.section .categories .cat .category-photo{
    width:72px !important;
    height:72px !important;
    min-width:72px !important;
    min-height:72px !important;
  }
  .container.section .categories .cat b{
    font-size:12px !important;
    line-height:1.3 !important;
  }
}
