/* =============================================================================
   SMO CARD — THẺ NFC (danh sách + chi tiết)
   -----------------------------------------------------------------------------
   Nạp SAU home-v2.css và shop.css.
   ========================================================================== */
#page-nfc {
    --c-smoke: #FCFAF8;
    --c-smoke-deep: #ECE6DF;
    --c-gold: #B88028;
    --c-gold-deep: #8F621C;
    --c-gold-wash: #FDF7EF;
    --c-ink: #101830;
    --g-metal: linear-gradient(135deg, #F0D79A 0%, #D9A83F 34%, #B88028 62%, #8F621C 100%);
    --g-metal-soft: linear-gradient(135deg, #F7E9C6 0%, #E0BC6A 50%, #C08A2E 100%);
}

/* =============================================================================
   Hero
   ========================================================================== */
.nfc-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(3rem, 2rem + 3vw, 5rem);
    background-color: #F6E9D2;
    background-image:
        radial-gradient(rgba(140, 104, 48, .10) 1px, transparent 1px),
        radial-gradient(40rem 28rem at 74% 8%, rgba(240, 202, 128, .8), transparent 62%),
        radial-gradient(30rem 24rem at 6% 96%, rgba(122, 148, 200, .28), transparent 66%),
        linear-gradient(164deg, #FDF4E4 0%, #F7E7CC 48%, #F1DCBE 100%);
    background-size: 24px 24px, auto, auto, auto;
}
.nfc-hero__deco { position: absolute; inset: 0; pointer-events: none; }
.nfc-hero__deco::before {
    content: "";
    position: absolute;
    top: -5rem; right: -8rem;
    width: 30rem; height: 22rem;
    transform: rotate(-24deg);
    background: repeating-linear-gradient(90deg,
        rgba(184, 128, 40, .22) 0 2px, transparent 2px 16px);
    mask-image: linear-gradient(200deg, #000 8%, transparent 62%);
}
.nfc-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--s-6), 4vw, var(--s-12));
    align-items: center;
}
.nfc-hero h1 {
    margin: 0 0 var(--s-4);
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    color: var(--c-ink);
}
.nfc-hero__lede { margin: 0 0 var(--s-6); font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--c-text-muted); }
.nfc-hero__points { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.nfc-hero__points li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--c-text-muted); }
.nfc-hero__points svg { flex: none; margin-top: 3px; color: var(--c-gold); }
.nfc-hero__points strong { color: var(--c-text); font-weight: 600; }
.nfc-hero__visual img {
    display: block; width: 100%; height: auto;
    filter: drop-shadow(0 14px 20px rgba(16, 24, 48, .16));
}

.nfc-head { margin-bottom: var(--s-10); }
.nfc-head h2 { margin: var(--s-2) 0 0; font-size: var(--fs-h2); line-height: var(--lh-h2); }

/* =============================================================================
   Lưới mẫu thẻ
   ========================================================================== */
.nfcgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.nfccard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--c-paper);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-lg);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.nfccard:hover { transform: translateY(-3px); box-shadow: 0 2px 5px rgba(16,24,48,.06), 0 16px 30px rgba(16,24,48,.12); }
.nfccard__media { position: relative; display: block; background: var(--c-smoke); }
.nfccard__media img { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; }
.nfccard__ph {
    display: block;
    aspect-ratio: 16/10;
    background:
        radial-gradient(120% 140% at 78% 8%, rgba(255,255,255,.28), transparent 62%),
        linear-gradient(146deg, #1B2A4A, #101830 62%, #B88028);
}
.nfccard__off {
    position: absolute;
    top: var(--s-3); left: var(--s-3);
    padding: 3px var(--s-3);
    border-radius: var(--r-pill);
    background: var(--c-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.nfccard__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); flex: 1; }
.nfccard__name { margin: 0; font-size: var(--fs-body-lg); line-height: 1.3; }
.nfccard__name a { color: inherit; text-decoration: none; }
.nfccard__name a:hover { color: var(--c-gold); }
.nfccard__desc {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nfccard__price { display: flex; align-items: baseline; gap: var(--s-2); margin: 0; }
.nfccard__price span { font-family: var(--ff-display); font-size: var(--fs-h3); font-weight: 800; }
.nfccard__price del { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Tồn kho — trước đây không hiện ở đâu, khách vẫn bấm mua được hàng đã hết. */
.nfccard__stock { margin: 0; font-size: var(--fs-label); color: var(--c-success); }
.nfccard__stock.is-out { color: var(--c-danger); }

.nfccard__buy { margin-top: auto; }
.nfccard__cta { width: 100%; margin-top: var(--s-3); }

/* =============================================================================
   Trang chi tiết
   ========================================================================== */
.pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(var(--s-6), 4vw, var(--s-12)); align-items: start; }
.pdp__media {
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--c-paper);
    border: 1px solid var(--c-smoke-deep);
}
.pdp__media img { display: block; width: 100%; height: auto; }

.pdp__name { margin: 0 0 var(--s-4); font-size: var(--fs-h2); line-height: var(--lh-h2); }
.pdp__desc { margin: 0 0 var(--s-6); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text-muted); }
.pdp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-2); }
.pdp__price span { font-family: var(--ff-display); font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 800; line-height: 1; }
.pdp__price del { font-size: var(--fs-body); color: var(--c-text-muted); }
.pdp__off {
    padding: 3px var(--s-3);
    border-radius: var(--r-pill);
    background: var(--c-danger-wash);
    color: var(--c-danger);
    font-size: var(--fs-label);
    font-style: normal;
    font-weight: 700;
}

.pdp__buy { display: flex; gap: var(--s-3); align-items: stretch; margin: var(--s-5) 0 var(--s-6); }
.pdp__buy input {
    width: 84px;
    min-height: 48px;
    padding: var(--s-2);
    text-align: center;
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: var(--fs-body);
}
.pdp__cta { flex: 1; margin: var(--s-5) 0 var(--s-6); }
.pdp__buy .pdp__cta { margin: 0; }

.pdp__facts { display: grid; gap: var(--s-3); margin: 0; padding: var(--s-5) 0 0; border-top: 1px solid var(--c-smoke-deep); list-style: none; }
.pdp__facts li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--c-text-muted); }
.pdp__facts svg { flex: none; margin-top: 3px; color: var(--c-gold); }
.pdp__facts a { color: var(--c-indigo); font-weight: 600; }

.pdp__others { margin-top: var(--s-16); padding-top: var(--s-10); border-top: 1px solid var(--c-smoke-deep); }
.pdp__othershead { margin: 0 0 var(--s-6); font-size: var(--fs-h3); }

/* =============================================================================
   Màn hẹp
   ========================================================================== */
@media (max-width: 1000px) {
    .nfc-hero__grid { grid-template-columns: 1fr; }
    .nfcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pdp { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .nfcgrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .nfccard { transition: none; }
    .nfccard:hover { transform: none; }
}