/*
Theme Name: itsaigon
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


 
/* 1. Cắt góc ảnh + tạo gốc toạ độ đúng cho ribbon */
.product-small.box{ position:relative; overflow:hidden; }
.product-small .box-image{ position:relative; overflow:hidden; }
 
/* 2. Gỡ gốc toạ độ sai ở vùng chữ (đây là chỗ làm ribbon bị tụt xuống tiêu đề) */
.product-small .box-text{ position:static; }
 
/* 3. Ribbon dạng SPAN (khi chưa dán Mục 12) */
.product-small .vt-ribbon{
  position:absolute;
  top:14px;
  right:-38px;
  z-index:12;
  width:130px;
  padding:6px 0;
  text-align:center;
  transform:rotate(45deg);
  background:#e2231a;
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1;
  letter-spacing:.3px;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  pointer-events:none;
}
 
/* 4. Ribbon dạng ::after (khi đã dán Mục 12 — class .vt-is-new) */
.vt-is-new .box-image::after{
  content:"Mới";
  position:absolute;
  top:14px;
  right:-38px;
  z-index:12;
  width:130px;
  padding:6px 0;
  text-align:center;
  transform:rotate(45deg);
  background:#e2231a;
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  pointer-events:none;
}
 
/* 5. Mobile — thu nhỏ ribbon */
@media (max-width:549px){
  .product-small .vt-ribbon,
  .vt-is-new .box-image::after{
    top:11px;
    right:-42px;
    width:120px;
    padding:5px 0;
    font-size:11px;
  }
}