/* V221 - Single source of truth for Homepage "DANH MỤC SẢN PHẨM"
   Removes stacked overrides from V163/V203/V216-V220.
   Goal: approved mockup, same shell width as Featured Products, 4 x 2 desktop.
*/

:root{
  --v221-shell-large:1600px;
  --v221-gap-x:16px;
  --v221-gap-y:14px;
  --v221-card-radius:16px;
}

/* ---------- Shared section ---------- */
body:not(.admin-layout) .v119-categories{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background:linear-gradient(180deg,#fff 0%,#f6fbf8 100%)!important;
  box-sizing:border-box!important;
}

body:not(.admin-layout) .v119-categories .v119-category-grid{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
}

body:not(.admin-layout) .v119-category-card{
  min-width:0!important;
  box-sizing:border-box!important;
  text-decoration:none!important;
  overflow:hidden!important;
  border-radius:var(--v221-card-radius)!important;
  border:1px solid rgba(17,74,49,.08)!important;
  box-shadow:0 8px 24px rgba(21,67,47,.055)!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}

body:not(.admin-layout) .v119-category-card:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 12px 28px rgba(21,67,47,.09)!important;
}

body:not(.admin-layout) .v119-category-media{
  position:relative!important;
  overflow:hidden!important;
}

body:not(.admin-layout) .v119-category-media>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center bottom!important;
}

body:not(.admin-layout) .v119-category-body{
  min-width:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
}

body:not(.admin-layout) .v119-category-body h3{
  color:#10252c!important;
  font-weight:850!important;
  letter-spacing:-.2px!important;
}

body:not(.admin-layout) .v119-category-body p{
  color:#5e7069!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
}

body:not(.admin-layout) .v119-category-foot{
  margin-top:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}

body:not(.admin-layout) .v119-category-foot b{
  color:#0d2f25!important;
  white-space:nowrap!important;
}

body:not(.admin-layout) .v119-category-foot>i{
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  flex:0 0 auto!important;
}

/* ---------- Large desktop >=1500 ---------- */
@media(min-width:1500px){
  body:not(.admin-layout) .v119-categories{
    padding:20px 0 20px!important;
  }

  /* EXACTLY the same shell rule used by Featured Products */
  body:not(.admin-layout) .v119-categories>.v117-shell,
  body:not(.admin-layout) .v117-featured>.v117-shell{
    width:min(var(--v221-shell-large),calc(100% - 48px))!important;
    max-width:var(--v221-shell-large)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  body:not(.admin-layout) .v119-category-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    align-items:center!important;
    gap:30px!important;
    margin:0 0 20px!important;
  }

  body:not(.admin-layout) .v119-category-heading h2{
    margin:0!important;
    font-size:26px!important;
    line-height:1.08!important;
  }

  body:not(.admin-layout) .v119-category-heading p{
    margin:6px 0 0!important;
    font-size:11px!important;
    line-height:1.45!important;
  }

  body:not(.admin-layout) .v119-category-slogan{
    min-width:240px!important;
    text-align:center!important;
    transform:rotate(-2deg)!important;
  }

  body:not(.admin-layout) .v119-category-slogan span{
    font-size:20px!important;
    line-height:1.1!important;
  }

  body:not(.admin-layout) .v119-category-slogan b{
    font-size:16px!important;
  }

  body:not(.admin-layout) .v119-category-all{
    height:42px!important;
    padding:0 18px!important;
    border-radius:24px!important;
    white-space:nowrap!important;
  }

  body:not(.admin-layout) .v119-category-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:var(--v221-gap-y) var(--v221-gap-x)!important;
    align-items:stretch!important;
  }

  body:not(.admin-layout) .v119-category-card{
    width:100%!important;
    max-width:none!important;
    height:168px!important;
    min-height:168px!important;
    display:grid!important;
    grid-template-columns:150px minmax(0,1fr)!important;
  }

  body:not(.admin-layout) .v119-category-media{
    width:150px!important;
    height:168px!important;
    min-height:168px!important;
  }

  body:not(.admin-layout) .v119-category-icon{
    top:12px!important;
    left:12px!important;
    width:40px!important;
    height:40px!important;
  }

  body:not(.admin-layout) .v119-category-body{
    height:168px!important;
    min-height:168px!important;
    padding:18px 16px 14px!important;
  }

  body:not(.admin-layout) .v119-category-body h3{
    margin:0 0 6px!important;
    font-size:16px!important;
    line-height:1.2!important;
  }

  body:not(.admin-layout) .v119-category-body p{
    margin:0!important;
    min-height:31px!important;
    font-size:10.5px!important;
    line-height:1.48!important;
  }

  body:not(.admin-layout) .v119-category-foot{
    min-height:32px!important;
  }

  body:not(.admin-layout) .v119-category-foot b{
    font-size:11px!important;
  }

  body:not(.admin-layout) .v119-category-foot>i{
    width:32px!important;
    height:32px!important;
  }

  body:not(.admin-layout) .v119-category-foot>i svg{
    width:14px!important;
    height:14px!important;
  }

  /* Approved design has only a small visual gap before Featured Products */
  body:not(.admin-layout) .v117-featured{
    padding-top:14px!important;
  }
}

/* ---------- Standard desktop 1200-1499 ---------- */
@media(min-width:1200px) and (max-width:1499px){
  body:not(.admin-layout) .v119-categories{
    padding:18px 0!important;
  }

  body:not(.admin-layout) .v119-categories>.v117-shell,
  body:not(.admin-layout) .v117-featured>.v117-shell{
    width:calc(100% - 40px)!important;
    max-width:1380px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  body:not(.admin-layout) .v119-category-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    align-items:center!important;
    gap:20px!important;
    margin:0 0 18px!important;
  }

  body:not(.admin-layout) .v119-category-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:12px!important;
  }

  body:not(.admin-layout) .v119-category-card{
    width:100%!important;
    max-width:none!important;
    height:154px!important;
    min-height:154px!important;
    display:grid!important;
    grid-template-columns:122px minmax(0,1fr)!important;
  }

  body:not(.admin-layout) .v119-category-media{
    width:122px!important;
    height:154px!important;
    min-height:154px!important;
  }

  body:not(.admin-layout) .v119-category-body{
    height:154px!important;
    min-height:154px!important;
    padding:15px 12px 12px!important;
  }

  body:not(.admin-layout) .v119-category-body h3{
    margin:0 0 5px!important;
    font-size:14.5px!important;
    line-height:1.2!important;
  }

  body:not(.admin-layout) .v119-category-body p{
    margin:0!important;
    font-size:10px!important;
    line-height:1.45!important;
  }

  body:not(.admin-layout) .v119-category-foot b{
    font-size:10.5px!important;
  }

  body:not(.admin-layout) .v119-category-foot>i{
    width:30px!important;
    height:30px!important;
  }
}

/* ---------- Tablet 768-1199 ---------- */
@media(min-width:768px) and (max-width:1199px){
  body:not(.admin-layout) .v119-categories{
    padding:16px 0!important;
  }

  body:not(.admin-layout) .v119-category-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }

  body:not(.admin-layout) .v119-category-card{
    width:100%!important;
    max-width:none!important;
  }
}

/* ---------- Mobile <=767 ---------- */
@media(max-width:767px){
  body:not(.admin-layout) .v119-categories{
    padding:14px 0!important;
  }

  body:not(.admin-layout) .v119-category-head{
    margin-bottom:12px!important;
  }

  body:not(.admin-layout) .v119-category-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  body:not(.admin-layout) .v119-category-card{
    width:100%!important;
    max-width:none!important;
    min-height:132px!important;
    display:grid!important;
    grid-template-columns:110px minmax(0,1fr)!important;
  }

  body:not(.admin-layout) .v119-category-media{
    width:110px!important;
    min-height:132px!important;
    height:132px!important;
  }

  body:not(.admin-layout) .v119-category-body{
    min-height:132px!important;
    height:132px!important;
    padding:13px 12px 11px!important;
  }

  body:not(.admin-layout) .v119-category-body h3{
    margin:0 0 4px!important;
    font-size:14px!important;
    line-height:1.2!important;
  }

  body:not(.admin-layout) .v119-category-body p{
    margin:0!important;
    font-size:10px!important;
    line-height:1.42!important;
  }

  body:not(.admin-layout) .v119-category-foot b{
    font-size:10px!important;
  }

  body:not(.admin-layout) .v119-category-foot>i{
    width:29px!important;
    height:29px!important;
  }
}