/*
 * Thiên Nam Product Card System v2 — v1.11.52 PRE-PRODUCTION
 * SINGLE SOURCE OF TRUTH
 * Trang chủ / Trang Sản phẩm / Sản phẩm liên quan dùng cùng markup + CSS này.
 * Không còn rule buybar/price/qty ở style.css, responsive.css, responsive-final.css hoặc components.css.
 */
.tn-product-card-system{
  --tn-card-divider:rgba(23,63,45,.10);
  --tn-card-green:#17402f;
  --tn-card-gold:#c9972b;
  --tn-card-red:#df1f1f;
  --tn-card-border:rgba(201,162,77,.38);
}

.tn-product-card-system .tn-product-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}

.tn-product-card-system .tn-main-product-card{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  cursor:default;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.tn-product-card-system .tn-main-product-card .media{
  flex:0 0 auto;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  overflow:hidden;
}
.tn-product-card-system .tn-main-product-card .media .image-detail-link{
  display:block;
  width:100%;
  height:100%;
}
.tn-product-card-system .tn-main-product-card .media img{
  display:block;
  box-sizing:border-box;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  min-height:0;
  padding:10px;
  transition:transform .28s ease;
}

.tn-product-card-system .tn-main-product-card .content{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-height:0;
  padding:22px 22px 14px;
}
.tn-product-card-system .tn-main-product-card h3{
  margin:0 0 5px;
}
.tn-product-card-system .tn-main-product-card h3 a{
  color:inherit;
  text-decoration:none;
}
.tn-product-card-system .tn-main-product-card .content>p{
  margin:0;
  padding:0;
  border:0;
  box-shadow:none;
  min-height:3.15em;
}
.tn-product-card-system .tn-main-product-card a.link{
  display:none;
}

/* Một divider duy nhất. Khoảng trên divider thuộc nội dung; khoảng dưới divider thuộc buybar. */
.tn-product-card-system .tn-card-bottom-row{
  box-sizing:border-box;
  width:100%;
  margin:14px 0 0;
  padding:9px 0 1px;
  border:0;
  border-top:.5px solid var(--tn-card-divider);
  background:none;
  box-shadow:none;
}
.tn-product-card-system .tn-card-bottom-row::before,
.tn-product-card-system .tn-card-bottom-row::after{
  content:none;
  display:none;
}

.tn-product-card-system .tn-product-card-price,
.tn-product-card-system .tn-card-price-value{
  display:flex;
  align-items:center;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.tn-product-card-system .tn-card-price-value{
  flex-wrap:wrap;
  gap:4px 7px;
}
.tn-product-card-system .tn-card-price-current,
.tn-product-card-system .tn-card-price-sale{
  display:inline-block;
  margin:0;
  padding:0;
  color:var(--tn-card-red);
  font-family:var(--tn-font-ui);
  font-size:18px;
  line-height:28px;
  font-weight:800;
  white-space:nowrap;
}
.tn-product-card-system .tn-card-price-old{
  margin:0;
  color:#8b887f;
  font-family:var(--tn-font-ui);
  font-size:11px;
  line-height:20px;
  font-weight:500;
  white-space:nowrap;
}
.tn-product-card-system .tn-card-price-contact{
  display:inline-block;
  margin:0;
  padding:0;
  color:var(--tn-card-green);
  font-family:var(--tn-font-ui);
  font-size:18px;
  line-height:28px;
  font-weight:800;
  white-space:nowrap;
}

.tn-product-card-system .tn-card-add-cart-text{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:0;
  min-height:28px;
  height:28px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--tn-card-green);
  box-shadow:none;
  cursor:pointer;
  font-family:var(--tn-font-ui);
  font-size:11px;
  line-height:1;
  font-weight:700;
  letter-spacing:0;
  text-decoration:none;
  text-transform:none;
  white-space:nowrap;
  transition:color .18s ease;
}
.tn-product-card-system .tn-card-cart-icon{
  display:inline-block;
  width:14px;
  height:14px;
  flex:0 0 14px;
  margin:0 5px 0 0;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l1.8 9.1a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 1.9-1.4L21 7H6.2'/%3E%3Ccircle cx='9' cy='19' r='1.4'/%3E%3Ccircle cx='18' cy='19' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l1.8 9.1a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 1.9-1.4L21 7H6.2'/%3E%3Ccircle cx='9' cy='19' r='1.4'/%3E%3Ccircle cx='18' cy='19' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tn-product-card-system .tn-card-cart-label{
  color:inherit;
  line-height:1;
}

.tn-product-card-system .tn-card-qty-minimal{
  box-sizing:border-box;
  display:grid;
  grid-template-columns:16px 18px 16px;
  align-items:center;
  justify-content:end;
  gap:0;
  width:auto;
  min-width:0;
  height:28px;
  margin:0;
  padding-left:8px;
  border:0;
  border-left:.5px solid rgba(23,63,45,.18);
  background:transparent;
  box-shadow:none;
}
.tn-product-card-system .tn-card-qty-btn,
.tn-product-card-system .tn-card-qty-input{
  appearance:none;
  -webkit-appearance:none;
  box-sizing:border-box;
  width:100%;
  height:28px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--tn-card-green);
  box-shadow:none;
  text-align:center;
  font-family:var(--tn-font-ui);
  font-weight:700;
}
.tn-product-card-system .tn-card-qty-btn{
  cursor:pointer;
  font-size:15px;
  line-height:28px;
  transition:color .18s ease;
}
.tn-product-card-system .tn-card-qty-input{
  font-size:12px;
  line-height:28px;
  -moz-appearance:textfield;
}
.tn-product-card-system .tn-card-qty-input::-webkit-outer-spin-button,
.tn-product-card-system .tn-card-qty-input::-webkit-inner-spin-button{
  margin:0;
  -webkit-appearance:none;
}

/* Desktop: Giá | khoảng co giãn | Thêm vào giỏ | − 1 + */
@media (min-width:1025px){
  .tn-product-card-system .tn-card-bottom-row.is-priced{
    display:grid;
    grid-template-columns:max-content minmax(10px,1fr) max-content auto;
    grid-template-areas:"price . cart qty";
    align-items:center;
    column-gap:7px;
    min-height:38px;
  }
  .tn-product-card-system .tn-product-card-price{grid-area:price}
  .tn-product-card-system .tn-card-add-cart-text{grid-area:cart;justify-self:end}
  .tn-product-card-system .tn-card-qty-minimal{grid-area:qty}
  .tn-product-card-system .tn-card-bottom-row.is-contact{
    display:flex;
    align-items:center;
    min-height:38px;
  }
}

/* Tablet rules moved to assets/css/responsive-tablet.css in v1.10.87. */

/* Mobile: đúng 1 hàng như card chuẩn đã chốt. */
@media (max-width:599px){
  .tn-product-card-system .tn-product-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .tn-product-card-system .tn-main-product-card .media{
    flex-basis:auto;
    width:100%;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1/1;
  }
  .tn-product-card-system .tn-main-product-card .media img{
    min-height:0;
    padding:5px;
  }
  .tn-product-card-system .tn-main-product-card .content{
    padding:18px 20px 12px;
  }
  .tn-product-card-system .tn-main-product-card .content>p{
    min-height:0;
  }
  .tn-product-card-system .tn-card-bottom-row{
    margin-top:12px;
    padding-top:8px;
    padding-bottom:0;
  }
  .tn-product-card-system .tn-card-bottom-row.is-priced{
    display:grid;
    grid-template-columns:max-content minmax(6px,1fr) max-content auto;
    grid-template-areas:"price . cart qty";
    align-items:center;
    column-gap:5px;
    min-height:36px;
  }
  .tn-product-card-system .tn-product-card-price{grid-area:price}
  .tn-product-card-system .tn-card-add-cart-text{grid-area:cart;justify-self:end;font-size:11px}
  .tn-product-card-system .tn-card-qty-minimal{grid-area:qty;grid-template-columns:15px 16px 15px;padding-left:7px}
  .tn-product-card-system .tn-card-price-current,
  .tn-product-card-system .tn-card-price-sale,
  .tn-product-card-system .tn-card-price-contact{font-size:18px;line-height:26px}
  .tn-product-card-system .tn-card-bottom-row.is-contact{display:flex;align-items:center;min-height:36px}
}

@media (hover:hover) and (pointer:fine){
  .tn-product-card-system .tn-main-product-card:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 32px rgba(23,63,45,.11);
    border-color:rgba(201,162,77,.55);
  }
  .tn-product-card-system .tn-main-product-card:hover .media img{transform:scale(1.015)}
  .tn-product-card-system .tn-main-product-card:hover h3{color:var(--tn-card-gold)}
  .tn-product-card-system .tn-card-add-cart-text:hover,
  .tn-product-card-system .tn-card-qty-btn:hover{color:var(--tn-card-gold)}
}

.tn-product-card-system .tn-card-add-cart-text:focus-visible,
.tn-product-card-system .tn-card-qty-btn:focus-visible,
.tn-product-card-system .tn-main-product-card h3 a:focus-visible,
.tn-product-card-system .tn-main-product-card .image-detail-link:focus-visible{
  outline:1px solid rgba(201,151,43,.60);
  outline-offset:2px;
}