/* =====================================================
   PRODUCT DETAIL – LIN XÉN (PDP SCOPED)
   Namespace: .lx-pdp
===================================================== */

/* =====================================================
   RESET / BASE
===================================================== */

.lx-pdp .lx-product-info {
    padding-top: 8px;
    color: #111;
}

/* =====================================================
   PRODUCT CONTENT – CONTAINER
===================================================== */

.lx-pdp .lx-product-content {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width: 768px) {
    .lx-pdp .lx-product-content {
        padding: 0 24px;
    }
}

@media (min-width: 1280px) {
    .lx-pdp .lx-product-content {
        padding: 0 32px;
    }
}

/* =====================================================
   PRODUCT GALLERY – FULL BLEED MAIN IMAGE
===================================================== */

.lx-pdp .lx-product-gallery {
    width: 100%;
    margin-bottom: 16px;
}

/* ===== MAIN SWIPER – FULL BLEED ===== */

.lx-pdp .lx-product-main-swiper {
    position: relative;
    overflow: hidden;

    /* full bleed trick */
    margin-left: calc(-1 * var(--lx-content-padding, 16px));
    margin-right: calc(-1 * var(--lx-content-padding, 16px));
}

.lx-pdp .lx-product-main-swiper img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    background: #f4f4f4;
}

/* Pagination */
.lx-pdp .lx-product-main-swiper .swiper-pagination {
    bottom: 12px !important;
}

.lx-pdp .lx-product-main-swiper .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: rgba(255,255,255,.55);
    opacity: 1;
    margin: 0 4px !important;
}

.lx-pdp .lx-product-main-swiper .swiper-pagination-bullet-active {
    background: #fff;
}

/* ===== THUMBNAILS – STAY INSIDE ===== */

.lx-pdp .lx-product-thumb-swiper {
    margin-top: 12px;
}

.lx-pdp .lx-product-thumb-swiper .swiper-slide {
    width: 64px;
    height: 86px;
    opacity: .45;
    cursor: pointer;
}

.lx-pdp .lx-product-thumb-swiper .swiper-slide-thumb-active {
    opacity: 1;
    outline: 2px solid #111;
    outline-offset: 2px;
}

.lx-pdp .lx-product-thumb-swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== RESPONSIVE PADDING SYNC ===== */

@media (min-width: 768px) {
    .lx-pdp .lx-product-main-swiper {
        margin-left: -24px;
        margin-right: -24px;
    }

    .lx-pdp .lx-product-gallery {
        position: sticky;
        top: 80px;
    }

    .lx-pdp .lx-product-thumb-swiper .swiper-slide {
        width: 70px;
        height: 94px;
    }
}

@media (min-width: 1280px) {
    .lx-pdp .lx-product-main-swiper {
        margin-left: -32px;
        margin-right: -32px;
    }
}


/* =====================================================
   BREADCRUMB – CONTEXT ART
===================================================== */

.lx-pdp .lx-art-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    white-space: nowrap;
    overflow-x: auto;
}

.lx-pdp .lx-art-breadcrumb::-webkit-scrollbar {
    display: none;
}

.lx-pdp .lx-art-item {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9ca3af;
}

.lx-pdp .lx-art-item.is-home {
    color: #bfa16a;
}

.lx-pdp .lx-art-item.is-active {
    color: #111;
    font-weight: 500;
}

.lx-pdp .lx-art-connector {
    font-size: 10px;
    color: #d1d5db;
    opacity: .8;
}

/* =====================================================
   BRAND HERO
===================================================== */

.lx-pdp .lx-brand-hero {
    text-align: center;
    margin-bottom: 18px;
}

.lx-pdp .lx-brand-typewriter {
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #c7a26d;
    font-weight: 500;
    margin-bottom: 14px;
}

.lx-pdp .luxury-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
    color: #111;
}

.lx-pdp .lx-title-icon {
    font-size: 16px;
}
/* =====================================================
   META – PRICE – DESCRIPTION
===================================================== */

.lx-pdp .lx-product-meta {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 16px;
}

.lx-pdp .lx-meta-tag {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(17,17,17,0.04);
    color: #6b7280;
}

.lx-pdp .lx-meta-tag.accent {
    background: rgba(199,162,109,0.14);
    color: #6b5a3c;
}

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

.lx-pdp .lx-product-price-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 12px;
    margin: 18px 0 22px;
}

.lx-pdp .lx-product-price {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #111;
}

.lx-pdp .lx-price-note {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9ca3af;
}

/* ================= DESCRIPTION ================= */

.lx-pdp .lx-product-description {
    max-width: 560px;
    margin: 0 0 28px;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
    color: #4b5563;
}

/* =====================================================
   VARIANTS – LUXE STACKED (SAFE CLICK)
===================================================== */

.lx-pdp .lx-product-variants {
    margin: 22px 0 26px;
}

.lx-pdp .lx-variant-row {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    padding: 10px 0;
    position: relative;
}

.lx-pdp .lx-variant-label {
    margin-bottom: 8px;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6b7280;
}

/* OPTIONS */
.lx-pdp .lx-variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* OPTION BASE */
.lx-pdp .variant-option {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 12px;
    color: #374151;
    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease,
        transform .12s ease;
}

/* HOVER */
@media (hover: hover) {
    .lx-pdp .variant-option:hover {
        border-color: #9ca3af;
        transform: translateY(-1px);
    }
}

/* ACTIVE */
.lx-pdp .variant-option.active {
    background: #111;
    color: #fff;
    border-color: #111;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

/* DISABLED (SAFE) */
.lx-pdp .variant-option.disabled {
    opacity: .45;
    cursor: not-allowed;
}



/* =====================================================
   ERROR TOAST – RÕ RÀNG NHƯNG KHÔNG GẮT
===================================================== */

.lx-toast-product.lx-toast-error {
    border-left: 5px solid #b91c1c;
    background: linear-gradient(
        to right,
        rgba(185,28,28,.06),
        #ffffff 35%
    );
}

.lx-toast-product.lx-toast-error .lx-toast-icon {
    color: #b91c1c;
}

/* =====================================================
   MOBILE OPTIMIZE
===================================================== */

@media (max-width: 768px) {

    .lx-toast-container {
        left: 12px;
        right: 12px;
        bottom: 76px;
    }

    .lx-toast-product {
        width: auto;
    }
}


/* =====================================================
   STOCK – SUBTLE STATUS
===================================================== */

.lx-pdp .lx-product-stock {
    font-size: 11px;
    color: #9ca3af;
    margin: 12px 0 18px;
    text-align: left;
}

/* =====================================================
   TRUST – LOW PRIORITY
===================================================== */

.lx-pdp .lx-product-trust {
    font-size: 11px;
    color: #9ca3af;
    text-align: left;
    padding-left: 0;
}

.lx-pdp .lx-product-trust li {
    margin-bottom: 4px;
}
/* =====================================================
   PDP BOTTOM GROUP – SPACING CONTROL
===================================================== */

.lx-pdp-bottom {
    display: flex;
    flex-direction: column;
    gap: 28px; /* 👈 khoảng cách CHUẨN giữa các section */
}

/* Giảm margin mặc định của từng section */
.lx-pdp-bottom > * {
    margin-top: 0 !important;
}

/* REAL GALLERY không cần margin-top lớn nữa */
.lx-pdp-bottom .lx-real-editorial {
    margin-top: 0;
}

.lx-pdp .lx-product-price-wrap{
    margin: 0px;
    margin-bottom: 5px;
}
.lx-pdp .lx-variant-row{
    margin-bottom: 0px;
}
.lx-pdp .lx-product-description{
    margin: 0px;
}
/* HERO */

.lx-product-hero{
    margin-bottom:18px;
}

.lx-brand-line{
    font-size:13px;
    letter-spacing:1.5px;
    color:#555;
    margin-bottom:6px;
    font-weight:500;
}

.lx-brand{
    font-weight:700;
    color:#111;
}

.lx-product-title{
    font-size:30px;
    font-weight:700;
    line-height:1.35;
    margin-bottom:14px;
    color:#111;
}


/* SOCIAL PROOF */

.lx-product-proof{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:12px;
}

.lx-proof-badge{
    font-size:13px;
    padding:6px 10px;
    background:#f3f3f3;
    border-radius:8px;
    font-weight:500;
}

.lx-proof-badge.hot{
    background:#ffe9e9;
    color:#b10000;
    font-weight:600;
}


/* META */

.lx-product-meta{
    margin-bottom:14px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.lx-meta-tag{
    font-size:12px;
    padding:6px 8px;
    background:#f3f3f3;
    border-radius:6px;
    font-weight:500;
}

.lx-meta-tag.accent{
    background:#111;
    color:#fff;
}


/* PRICE */

.lx-price-block{
    margin:16px 0 10px;
}

.lx-product-price{
    font-size:34px;
    font-weight:800;
    color:#111;
}

.lx-price-note{
    font-size:13px;
    color:#555;
    margin-top:4px;
}


/* SCARCITY */

.lx-stock-alert{
    font-size:14px;
    color:#c20000;
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
    font-weight:600;
}

.lx-stock-dot{
    width:8px;
    height:8px;
    background:red;
    border-radius:50%;
    animation:pulse 1.5s infinite;
}

@keyframes pulse{
    0%{opacity:1}
    50%{opacity:.4}
    100%{opacity:1}
}


/* DESCRIPTION BOX */

.lx-product-description{

    font-size:15px;
    line-height:1.7;
    color:#222;

    background:#fafafa;
    border:1px solid #eee;

    padding:14px 16px;
    border-radius:10px;

    margin-bottom:16px;
}


/* DESCRIPTION TEXT SPACING */

.lx-product-description p{
    margin-bottom:8px;
}
/* ================= VARIANT BLOCK ================= */

.lx-product-variants{
    margin:20px 0;
}


/* LABEL */

.lx-variant-label{

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

    margin-bottom:10px;

    color:#111;
    letter-spacing:.5px;
}


/* OPTIONS CONTAINER */

.lx-variant-options{

    display:flex;
    flex-wrap:wrap;
    gap:10px;
}


/* BUTTON */

.variant-option{

    min-width:44px;
    height:40px;

    padding:0 14px;

    border-radius:8px;

    border:1.5px solid #ddd;

    background:#fff;

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

    color:#111;

    cursor:pointer;

    transition:all .15s ease;
}


/* HOVER */

.variant-option:hover{

    border-color:#111;
}


/* ACTIVE */

.variant-option.active{

    background:#111;
    color:#fff;

    border-color:#111;

    box-shadow:0 2px 6px rgba(0,0,0,0.15);
}


/* DISABLED */

.variant-option.disabled{

    background:#f5f5f5;
    color:#aaa;

    border-color:#eee;

    cursor:not-allowed;
}


/* ERROR STATE */

.lx-variant-row.lx-variant-error .variant-option{

    border-color:#ff3b3b;
}


/* MOBILE */

@media (max-width:768px){

    .variant-option{

        min-width:42px;
        height:38px;

        font-size:14px;
    }

}
/* SIZE ASSISTANT */

.lx-size-assistant{
margin:12px 0;
}

.lx-size-toggle{

width:100%;
text-align:left;

padding:10px 12px;

border:1px solid #eee;
border-radius:8px;

background:#fafafa;

font-size:14px;
font-weight:500;

cursor:pointer;
}

.lx-size-panel{

margin-top:10px;

padding:12px;

border:1px solid #eee;
border-radius:8px;

background:#fff;
}

.lx-size-form{

display:grid;

grid-template-columns:1fr 1fr;

gap:8px;
}

.lx-size-form input{

padding:8px;

border:1px solid #ddd;
border-radius:6px;

font-size:13px;
}

.lx-size-submit{

margin-top:10px;

width:100%;

padding:10px;

background:#111;
color:#fff;

border-radius:8px;

font-weight:600;
}
.lx-action-buttons{
display:flex;
gap:10px;
margin-top:10px;
}

.lx-btn-addtocart{

flex:1;

background:#111;
color:#fff;

padding:12px;

border-radius:8px;

font-weight:600;
}

.lx-btn-buynow{

flex:1;

background:#ff4d4f;
color:#fff;

padding:12px;

border-radius:8px;

font-weight:700;
}
/* SIZE HELP */

.lx-size-help{

margin:14px 0;

border:1px solid #eee;
border-radius:10px;

padding:12px;
background:#fafafa;
}

.lx-size-help-header{

display:flex;
justify-content:space-between;
align-items:center;
}

.lx-size-help-title{

font-weight:700;
font-size:14px;
color:#111;
}

.lx-size-help-actions{

display:flex;
gap:8px;
}

.lx-size-btn{

font-size:13px;
padding:6px 10px;

border-radius:6px;

background:#111;
color:#fff;

border:none;

cursor:pointer;
}

.lx-size-btn.outline{

background:#fff;
color:#111;

border:1px solid #ddd;
}

.lx-size-panel{

margin-top:12px;
}

.lx-size-form{

display:grid;
grid-template-columns:1fr 1fr;

gap:8px;
}

.lx-size-form input{

padding:8px;
border:1px solid #ddd;
border-radius:6px;

font-size:13px;
}

.lx-size-submit{

margin-top:10px;

width:100%;

padding:10px;

background:#111;
color:#fff;

border-radius:8px;

font-weight:600;
}
/* ================= PDP ACTION BAR ================= */

.lx-product-actions{

display:flex;
gap:12px;

align-items:stretch;
margin-top:12px;
}


/* ================= QTY BAR ================= */

.lx-qty-bar{

display:flex;
align-items:center;

border:1px solid #ddd;
border-radius:10px;

overflow:hidden;

height:48px;
flex-shrink:0;
}

.lx-qty-btn{

width:44px;
height:48px;

border:none;
background:#f6f6f6;

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

cursor:pointer;

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

transition:background .15s;
}

.lx-qty-btn:hover{
background:#eee;
}

#lxQty{

width:60px;
height:48px;

border:none;

text-align:center;
font-size:16px;
font-weight:600;

outline:none;
background:#fff;
}


/* remove spinner */

#lxQty::-webkit-outer-spin-button,
#lxQty::-webkit-inner-spin-button{
-webkit-appearance:none;
margin:0;
}

#lxQty{
-moz-appearance:textfield;
}


/* ================= BUTTON GROUP ================= */

.lx-action-buttons{

display:flex;
flex-direction:column;
gap:8px;

flex:1;
}


/* ================= ADD TO CART ================= */

.lx-btn-addtocart{

height:48px;

border:none;
border-radius:10px;

background:#111;
color:#fff;

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

cursor:pointer;

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

transition:all .15s;
}

.lx-btn-addtocart:hover{
background:#000;
}


/* ================= BUY NOW ================= */

.lx-btn-buynow{

height:48px;

border:none;
border-radius:10px;

background:#e60023;   /* đỏ nổi bật */
color:#fff;

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

cursor:pointer;

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

transition:all .15s ease;

box-shadow:0 4px 12px rgba(230,0,35,.25);

}

.lx-btn-buynow:hover{

background:#cc001f;

transform:translateY(-1px);

box-shadow:0 6px 16px rgba(230,0,35,.35);

}
/* ================= EXPERIENCE CARD ================= */

.lx-brand-experience{
margin:18px 0;
}

.lx-exp-card{

border:1px solid #eee;
border-radius:12px;

padding:14px;

background:#fafafa;
}


/* TITLE */

.lx-exp-title{

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

margin-bottom:10px;
color:#111;
}


/* LIST */

.lx-exp-list{
list-style:none;
padding:0;
margin:0;
}

.lx-exp-list li{

display:flex;
gap:10px;

margin-bottom:8px;
}

.lx-exp-check{

color:#16a34a;
font-weight:700;

font-size:16px;
}


/* TEXT */

.lx-exp-list strong{

font-size:13px;
color:#111;
}

.lx-exp-list p{

font-size:12px;
color:#666;

margin:2px 0 0;
}


/* NOTE */

.lx-exp-note{

margin-top:10px;

font-size:12px;
color:#444;

border-top:1px dashed #eee;
padding-top:8px;
}
/* SECTION */

.lx-ai-suggested{

margin-top:28px;
}


/* HEADER */

.lx-ai-head h3{

font-size:16px;
font-weight:700;
margin-bottom:4px;
}

.lx-ai-head p{

font-size:13px;
color:#666;
margin-bottom:12px;
}


/* SCROLL */

.lx-ai-scroll{

display:flex;
gap:12px;

overflow-x:auto;

padding-bottom:8px;
scroll-snap-type:x mandatory;
}


/* CARD */

.lx-ai-card{

min-width:150px;

text-decoration:none;
color:#111;

scroll-snap-align:start;
}


/* IMAGE */

.lx-ai-image{

position:relative;

border-radius:10px;
overflow:hidden;

background:#f5f5f5;
}

.lx-ai-image img{

width:100%;
display:block;
}


/* BADGE */

.lx-ai-badge{

position:absolute;
top:6px;
left:6px;

font-size:11px;

background:#111;
color:#fff;

padding:2px 6px;

border-radius:6px;
}


/* INFO */

.lx-ai-info{

padding-top:6px;
}

.lx-ai-name{

font-size:13px;
line-height:1.4;

height:34px;
overflow:hidden;
}

.lx-ai-price{

font-size:14px;
font-weight:700;
margin-top:4px;
}
/* IMAGE FRAME */

.lx-ai-image{

position:relative;

width:100%;
aspect-ratio:3/4;   /* váy nên dùng 3:4 */

border-radius:10px;
overflow:hidden;

background:#f5f5f5;
}


/* IMAGE */

.lx-ai-image img{

width:100%;
height:100%;

object-fit:cover;
display:block;
}
/* ================= PRICE BLOCK ================= */

.lx-price-block{
margin:18px 0 22px;
}

.lx-price-row{
display:flex;
align-items:center;
gap:12px;
}

.lx-product-price{
font-size:32px;
font-weight:700;
color:#d62828;
letter-spacing:-0.5px;
}

.lx-price-compare{
font-size:16px;
color:#999;
text-decoration:line-through;
margin-top:4px;
}

.lx-sale-badge{
background:#d62828;
color:#fff;
font-size:13px;
font-weight:600;
padding:4px 10px;
border-radius:20px;
}

.lx-price-note{
font-size:13px;
color:#777;
margin-top:6px;
}
.variant-option.is-out{

opacity:.35;

cursor:not-allowed;

position:relative;

border-color:#ddd;

background:#f6f6f6;

}

.variant-option.is-out .variant-x{

position:absolute;

top:2px;
right:4px;

font-size:16px;

color:#c1121f;

font-weight:700;

}