/* promo.css — hiển thị giảm giá dùng chung: giá gốc (gạch) → giá sale → -% → đếm ngược.
   Render bởi views/partials/priceTag.ejs (server) + window.MeoPromo.saleBlock() (client).
   Chỉ xuất hiện khi đang có sale; off-sale các block này không được render. */

.price-tag {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 9px;
    font-family: 'Nunito', system-ui, sans-serif;
    line-height: 1.2;
}

/* Giá gốc bị gạch ngang */
.price-tag__base {
    color: var(--text-muted, #8a7772);
    text-decoration: line-through;
    text-decoration-color: rgba(214, 125, 99, 0.5);
    font-weight: 600;
    font-size: 0.86em;
    opacity: 0.9;
}

/* Giá đã giảm — nổi bật */
.price-tag__final {
    color: var(--accent, #d67d63);
    font-weight: 800;
    font-size: 1.06em;
    white-space: nowrap;
}

/* Badge -X% */
.price-tag__off {
    display: inline-flex;
    align-items: center;
    background: var(--pastel-rose, #ff9eb5);
    color: #fff;
    font-weight: 800;
    font-size: 0.72em;
    letter-spacing: .2px;
    padding: 2px 9px;
    border-radius: 999px;
    box-shadow: 0 3px 9px rgba(255, 158, 181, 0.45);
    white-space: nowrap;
}

/* Dòng đếm ngược nhỏ */
.price-tag__count,
.promo-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 3px;
    color: var(--text-muted, #8a7772);
    font-size: 0.78em;
    font-weight: 600;
}
/* Chỉ dòng đếm ngược BÊN TRONG .price-tag mới cần full-width để rớt xuống hàng riêng.
   .promo-countdown đứng độc lập → để co theo nội dung rồi cho .cta-promo căn giữa. */
.price-tag__count { width: 100%; }
/* .promo-countdown chỉ render khi đang sale → margin-bottom không tạo khoảng trống off-sale */
.promo-countdown { text-align: center; margin-bottom: 12px; }

.price-tag__count-val,
.promo-countdown-val {
    color: var(--accent, #d67d63);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
}

/* Đồng hồ cát cam — thay cho emoji ⏳ */
.promo-hg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    fill: #e8895f;
    animation: promoHg 2.4s ease-in-out infinite;
    transform-origin: center;
}
@keyframes promoHg {
    0%, 70%, 100% { transform: rotate(0deg); }
    80% { transform: rotate(180deg); }
    90% { transform: rotate(180deg); }
}

/* Khi sale kết thúc giữa chừng (countdown chạm 0) */
.price-tag.is-ended .price-tag__count-val,
.promo-countdown.is-ended .promo-countdown-val {
    color: var(--text-muted, #8a7772);
}
.price-tag.is-ended .promo-hg,
.promo-countdown.is-ended .promo-hg {
    animation: none;
    opacity: .6;
}

/* Biến thể xếp dọc (dùng cho card/panel hẹp) */
.price-tag--stack {
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.price-tag--stack .price-tag__count {
    justify-content: center;
}

/* Khối giảm giá trong paywall JS-built (unlockPanel, tarot, …) */
.promo-saleblock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin: 2px 0 14px;
}
.promo-saleblock .price-tag { justify-content: center; }

/* Khối priceTag đặt trên/cạnh nút CTA ở trang landing dịch vụ.
   Off-sale: partial render rỗng → div cao 0, vô hình (không margin). */
.cta-promo { display: flex; justify-content: center; }
.cta-promo .price-tag { margin: 8px 0 4px; justify-content: center; }
.cta-promo .price-tag__count { justify-content: center; }

/* Giá gốc gạch ngang đặt INLINE ngay cạnh giá đã giảm (trong nút/card có sẵn).
   Dùng khi muốn "gốc gạch → giảm" hiện đúng tại chỗ giá thay vì banner riêng. */
.price-base-inline,
.tv-opt-base,
.tv-cung-base {
    color: var(--text-muted, #8a7772);
    text-decoration: line-through;
    text-decoration-color: rgba(214, 125, 99, 0.5);
    font-weight: 600;
    font-size: 0.78em;
    opacity: 0.8;
    margin-right: 4px;
}
/* Cung add-on tử vi: 12 thẻ → giá gốc gạch nhỏ & mờ hơn cho giá sale nổi bật, đỡ rối */
.tv-cung-base { font-size: 0.7em; opacity: 0.62; margin-right: 3px; }