/* =====================================================
   FEATURED PRODUCTS – LIN XÉN (CLEAN & OPTIMIZED)
===================================================== */

/* SECTION */
.lx-product-section {
    margin-top: 24px;
}

/* GRID */
.lx-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0 14px;
}

/* CARD */
.lx-product-card {
    display: flex;
    flex-direction: column;
}

/* =====================================================
   IMAGE
===================================================== */
.lx-product-media {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 10px;
    background: #f4f4f4;
}

.lx-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* SALE BADGE */
.lx-sale-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #b11226;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
}

/* =====================================================
   NAME + BEST SELLER
===================================================== */
.lx-product-head {
    margin-top: 8px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.lx-product-head .lx-tag-best {
    flex-shrink: 0;
}

/* tên sản phẩm: tối đa 2 dòng */
.lx-product-name {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: #222;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    min-width: 0; /* bắt buộc khi nằm trong flex */
}

/* TAG BEST – nổi nhưng sang */
.lx-tag-best {
    font-size: 10.5px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #b11226, #d42a3f);
    box-shadow: 0 2px 6px rgba(177,18,38,.25);
}

/* =====================================================
   PRICE
===================================================== */
.lx-product-price-wrap {
    margin-top: 10px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.lx-price-sale {
    font-size: 16.5px;
    font-weight: 700;
    color: #b11226;
}

.lx-price-origin {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
}

/* =====================================================
   STATUS TAGS
===================================================== */
.lx-product-tags {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lx-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.lx-tag-stock {
    color: #1f7a4f;
    border-color: #1f7a4f;
    background: rgba(31,122,79,.08);
}

.lx-tag-trend {
    color: #1f3a5f;
    border-color: #1f3a5f;
    background: rgba(31,58,95,.08);
}

/* =====================================================
   VARIANTS ROW (COLORS + QUICK ORDER)
===================================================== */
.lx-product-variants {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* COLORS */
.lx-product-colors {
    display: flex;
    gap: 8px;
}

.lx-color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #e3e3e3;
    transition: transform .15s ease, border-color .15s ease;
}

.lx-color-swatch.active {
    transform: scale(1.2);
    border-color: #111;
}

/* COLOR TYPES */
.lx-color-swatch.black { background: #111; }
.lx-color-swatch.white { background: #fff; border-color:#ccc; }
.lx-color-swatch.beige { background: #e6d5c3; }
.lx-color-swatch.brown { background: #7a4a2e; }
.lx-color-swatch.red   { background: #b11226; }
.lx-color-swatch.blue  { background: #1f3a5f; }
.lx-color-swatch.navy  { background: #0f1f33; }
.lx-color-swatch.olive { background: #6b7c3e; }

/* =====================================================
   QUICK ORDER – LUXURY SUBTLE
===================================================== */
.lx-quick-order-inline {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: 1px solid #e6e6e6;
    color: #444;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: background .2s ease, border-color .2s ease,
                color .2s ease, transform .2s ease;
}

.lx-quick-order-inline svg {
    width: 14px;
    height: 14px;
    opacity: .85;
}

@media (hover: hover) {
    .lx-quick-order-inline:hover {
        background: #fff;
        border-color: #d8d8d8;
        color: #222;
        transform: translateY(-1px);
    }
}

/* =====================================================
   MOBILE TUNING
===================================================== */
@media (max-width: 480px) {
    .lx-price-sale {
        font-size: 15.5px;
    }

    .lx-product-name {
        font-size: 13.5px;
    }

    .lx-color-swatch {
        width: 15px;
        height: 15px;
    }
}
/* COLORS */
.lx-product-colors {
    display: flex;
    gap: 8px;
}

.lx-color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-clip: padding-box;
    border: 1.5px solid #e3e3e3;
    box-sizing: border-box;
}

/* ACTIVE – giữ tròn 100% */
.lx-color-swatch.active {
    border-color: #111;
    outline: 2px solid rgba(17,17,17,.15); /* vòng nhấn */
    outline-offset: 2px;
}
/* VARIANTS ROW */
.lx-product-variants {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* COLORS */
.lx-product-colors {
    display: flex;
    gap: 8px;
    padding-left: 10px; /* chừa không gian an toàn */
    padding-bottom: 6px;
}

/* SWATCH */
.lx-color-swatch {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-clip: padding-box;
    border: 1.5px solid #e3e3e3;
    box-sizing: border-box;
}

/* ACTIVE – VÒNG NHẤN BẰNG ::after (KHÔNG CLIP) */
.lx-color-swatch.active::after {
    content: "";
    position: absolute;
    inset: -3px;                 /* vòng nằm đều mọi phía */
    border-radius: 50%;
    border: 1.5px solid rgba(17,17,17,.25);
    pointer-events: none;
}
/* =====================================================
   COLOR VARIANTS – MOBILE FRIENDLY
===================================================== */

/* VARIANTS ROW */
.lx-product-variants {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* COLORS CONTAINER */
.lx-product-colors {
    display: flex;
    gap: 12px;          /* giãn hơn để dễ bấm */
    padding-left: 10px; /* tránh cắn viền */
}

/* SWATCH – KÍCH THƯỚC CHUẨN MOBILE */
.lx-color-swatch {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-clip: padding-box;
    border: 1.5px solid #dcdcdc;
    box-sizing: border-box;
}

/* ACTIVE – VÒNG NHẤN BÊN NGOÀI (KHÔNG CLIP) */
.lx-color-swatch.active::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid rgba(17,17,17,.25);
    pointer-events: none;
}
.lx-tag-best {
    font-size: 9.5px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;

    color: #b11226;
    background: rgba(177,18,38,.08);
    border: 1px solid rgba(177,18,38,.25);
    line-height: 1;
}
/* =====================================================
   COLOR VARIANTS – SMALL & SUBTLE (LIN XÉN)
===================================================== */

/* CONTAINER */
.lx-product-colors {
    display: flex;
    gap: 8px;           /* giãn vừa phải */
    padding-left: 6px;  /* tránh sát viền */
}

/* SWATCH – nhỏ gọn */
.lx-color-swatch {
    position: relative;
    width: 22px;        /* ⬅️ nhỏ hơn */
    height: 14px;       /* ⬅️ thấp hơn */

    border-radius: 5px; /* capsule mềm */
    background-clip: padding-box;

    border: 1px solid #e1e1e1;  /* viền mảnh */
    box-sizing: border-box;

    transition: border-color .15s ease;
}

/* ACTIVE – VIỀN NHẸ, KHÔNG PHÓNG TO */
.lx-color-swatch.active {
    border-color: #111;
}

/* vòng nhấn ngoài RẤT MẢNH */
.lx-color-swatch.active::after {
    content: "";
    position: absolute;
    inset: -2px;                 /* ⬅️ nhỏ */
    border-radius: 6px;
    border: 1px solid rgba(17,17,17,.18);
    pointer-events: none;
}
/* ======================================
   FIX CHỒNG LÊN TÊN SẢN PHẨM
====================================== */

/* BLOCK TÊN */
.lx-product-head {
    margin-top: 8px;
    margin-bottom: 6px;   /* ⬅️ tạo khoảng thở rõ */
}

/* TÊN SẢN PHẨM */
.lx-product-name {
    line-height: 1.4;     /* ⬅️ tránh chữ thấp */
}

/* BLOCK MÀU */
.lx-product-colors {
    margin-top: 4px;      /* ⬅️ tách khỏi tên */
    margin-bottom: 6px;   /* ⬅️ tách khỏi giá */
}
/* =========================================
   FEATURED PRODUCT SECTION
========================================= */

.lx-product-section{
    margin-top:40px;
}

/* =========================================
   HEADER
========================================= */

.lx-section-title{
    font-size:28px;
    font-weight:700;
    letter-spacing:.5px;
    color:#111;
}

.lx-section-desc{
    font-size:15px;
    color:#666;
    margin-top:6px;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(min-width:768px){

.lx-product-grid{

    grid-template-columns:repeat(3,1fr);

    gap:22px;

}

}

@media(min-width:1200px){

.lx-product-grid{

    grid-template-columns:repeat(4,1fr);

}

}

/* =========================================
   CARD
========================================= */

.lx-product-card{

    background:#fff;
    border-radius:12px;
    overflow:hidden;

    transition:all .25s ease;

    box-shadow:
    0 6px 18px rgba(0,0,0,.05);

}

.lx-product-card:hover{

    transform:translateY(-4px);

    box-shadow:
    0 12px 30px rgba(0,0,0,.12);

}

/* =========================================
   IMAGE
========================================= */

.lx-product-media{

    position:relative;
    aspect-ratio:3/4;
    overflow:hidden;
    background:#f6f6f6;

}

.lx-product-media img{

    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform .45s ease;

}

.lx-product-card:hover img{

    transform:scale(1.05);

}

/* =========================================
   PRODUCT NAME
========================================= */

.lx-product-head{
    padding:14px 14px 4px;
}

.lx-product-name{

    font-size:15px;
    font-weight:600;

    color:#111;

    line-height:1.45;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;

}

/* =========================================
   PRICE
========================================= */

.lx-product-price-wrap{

    padding:0 14px 16px;

}

.lx-price{

    font-size:20px;
    font-weight:700;

    color:#c1121f;

    letter-spacing:.3px;

}

/* =========================================
   MOBILE TUNING
========================================= */

@media(max-width:768px){

.lx-product-grid{

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}

.lx-product-name{

    font-size:14px;

}

.lx-price{

    font-size:18px;

}

}
/* SALE PRICE */

.lx-price-sale{

font-size:20px;
font-weight:700;
color:#d62828;

}

/* ORIGINAL PRICE */

.lx-price-origin{

font-size:14px;
color:#888;
text-decoration:line-through;

margin-top:2px;

}

/* DISCOUNT */

.lx-price-discount{

font-size:13px;
font-weight:600;

color:#fff;
background:#d62828;

display:inline-block;

padding:2px 6px;
border-radius:4px;

margin-top:4px;

}

/* NORMAL PRICE */

.lx-price-normal{

font-size:20px;
font-weight:700;
color:#111;

}