/* =======================================================================
   v1.6.2 — Service Card Layout (UI/UX + SEO)
   ------------------------------------------------------------------------
   /assets/styles/service-card/service-card-v6-2.css
   ------------------------------------------------------------------------
   - Card semantic: <article itemtype="Product"> + <figure> + <h3> + <p>
   - Title/Description bị cắt bằng JS (theo config) → CSS chỉ lo layout.
   - Price + Actions luôn ghim đáy card bằng flex-column + margin-top:auto.
   ======================================================================= */

/* ---------- Service list (cards) ---------- */
.service-card{
  margin:0 0 12px;
  padding:12px;

  display:grid;
  grid-template-columns: 96px 1fr;
  gap:12px;

  border-radius: .75rem;
  border: 1px solid var(--service-car--border-clr);
  background: transparent;
  background-color: var(--service-car--bg-clr);
}

.service-card:first-of-type
  { 
    margin-top:1rem;
}

.service-card:focus-within{
  outline:2px solid rgba(0,0,0,.08);
  outline-offset:2px;
}

.service-card .svc-thumb{
  grid-column:1/2;
  width:96px; height:96px; margin:0;
  border-radius:12px; overflow:hidden;
  border:1px solid var(--line);
}
.service-card .svc-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.service-card .svc-body{
  grid-column:2/3;
  display:flex; flex-direction:column;
  min-width:0; /* để text co, tránh bể layout */
}

.service-card h3.svc-title{
  margin:0 0 4px;
  font-size:16px; line-height:1.25; font-weight:700;
  word-break: break-word;
}
.service-card p.svc-desc{
  margin:0;
  color:var(--muted);
  font-size:13px; line-height:1.35;
  word-break: break-word;
}

/* Khoảng ngăn giữa phần mô tả và chân card */
.service-card .svc-body .spacer{
  height:8px;
}

/* Chân card: luôn nằm dưới cùng */
.service-card .svc-foot{
  margin-top:auto;           /* 🔑 đẩy foot xuống đáy */
  padding-top:8px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-top: 1px dashed var(--svc-foot--border-clr); /*line phân cách*/
}

.service-card .svc-price{
  font-weight:700;
  white-space:nowrap;
}

/* Qty actions */
.service-card .svc-actions{ display:flex; align-items:center; gap:8px; }
.service-card .qty{ display:flex; align-items:center; gap:6px; }
.service-card .qty button{
  width:32px; height:32px; border-radius:8px;
  display:inline-grid; place-items:center;
}

.service-card .qty button 
{
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;

  aspect-ratio: 1/1;
  border-radius: 50%;
}

.service-card .qty button 
{
  border: 1px solid hsl(0deg 0% 100% / 60%);
  background: #c7e3ff;
  box-shadow:  2px 2px 6px #7cbeff9c,
               -2px -2px 6px #e5ffff;
}



/* Mobile tinh chỉnh một chút */
@media (max-width: 480px){
  .service-card{
    grid-template-columns: 84px 1fr;
    gap:10px;
  }
  .service-card .svc-thumb 
  { 
    width:84px;
    height:auto;
    aspect-ratio: 3/4;
  }
}