/*
    KHỐI HIỂN THỊ GIÁ SẢN PHẨM (price-display.blade.php)

    NGHIỆP VỤ: phân biệt 2 chương trình giảm giá chạy song song
      - Chiết khấu Đại lý (.pd-agency)    : tông đỏ
      - Sale toàn sàn     (.pd-community) : tông xanh
      - Không giảm giá    (.pd-plain)     : tông vàng thương hiệu

    BỐ CỤC:
      - .pd-compact : ô sản phẩm trong danh sách -> CĂN GIỮA, bỏ nhãn chữ (badge đã nói rõ
        chương trình). Tránh kiểu dàn 2 đầu vì thẻ rộng ~340px sẽ hở khoảng giữa rất xấu.
      - .pd-full    : trang chi tiết -> có nhãn đầy đủ theo mẫu đã duyệt.

    LƯU Ý KỸ THUẬT: theme có rule ".price-products-tion span" ép font-size 21px + màu đỏ
    lên mọi span trong khối giá ở trang chi tiết. Các rule chữ ở đây viết lồng
    ".pd-wrap .pd-xxx" để thắng độ ưu tiên mà không cần !important.
*/

/* ===== Biến màu theo chương trình ===== */
.pd-wrap.pd-agency {
    --pd-accent: #dc2626;
    --pd-badge-bg: #ef4444;
    --pd-label: #0369a1;
    --pd-saved: #047857;
    --pd-box-bg: #fff7f7;
    --pd-box-border: #fecaca;
}

.pd-wrap.pd-community {
    --pd-accent: #0284c7;
    --pd-badge-bg: #0284c7;
    --pd-label: #475569;
    --pd-saved: #0369a1;
    --pd-box-bg: #f5fbff;
    --pd-box-border: #bae6fd;
}

.pd-wrap.pd-plain {
    --pd-accent: #b57630;
    --pd-box-bg: #fdfaf5;
    --pd-box-border: #ecd9bd;
}

/* ===== Khung chung ===== */
.pd-wrap {
    display: block;
    line-height: 1.5;
    font-weight: 400;
    /*
        Thẻ cha trong theme (h4.product-price) đang là display:flex, khiến khối giá bị co
        lại theo nội dung (~152px) thay vì chiếm hết bề ngang thẻ sản phẩm. Hai dòng dưới
        buộc nó luôn trải đủ chiều rộng dù cha là block hay flex.
    */
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
}

.pd-wrap .pd-box {
    background: var(--pd-box-bg);
    border: 1px solid var(--pd-box-border);
    border-radius: 8px;
    padding: 10px 12px;
}

/* ===== Badge ===== */
.pd-wrap .pd-badge-row {
    display: flex;
    margin-bottom: 7px;
}

.pd-wrap .pd-badge,
.pd-badge--inline {
    display: inline-block;
    background: var(--pd-badge-bg);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
    padding: 4px 11px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.45;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .16);
}

/*
    Badge đặt cạnh TÊN SẢN PHẨM (components/discount-badge.blade.php).
    Nằm ngoài .pd-wrap nên phải tự khai báo màu thay vì dùng biến.
*/
.pd-badge--inline {
    vertical-align: middle;
    /* Tên sản phẩm thường in đậm cỡ lớn, badge giữ cỡ riêng cho cân đối */
    font-size: 11.5px;
    padding: 3px 10px;
    text-transform: none;
    align-self: center;
}

/*
    Thẻ <a> của tên sản phẩm trong theme là display:flow-root + -webkit-line-clamp:2,
    tức chiếm trọn chiều ngang -> badge luôn bị đẩy xuống hàng dưới.
    Chuyển hàng tiêu đề sang flex để badge nằm NGAY CẠNH tên khi còn chỗ, và tự xuống
    dòng (vẫn căn giữa) khi thẻ sản phẩm quá hẹp.
    Dùng :has() nên trình duyệt cũ sẽ giữ nguyên kiểu cũ - badge nằm dưới, vẫn chấp nhận được.
*/
.product-title:has(.pd-badge--inline) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    /*
        row-gap nhỏ: khi thẻ hẹp badge xuống dòng thì vẫn bám sát tên, không bị hẫng.
        margin-bottom đặt tường minh để khoảng cách xuống khối giá LUÔN bằng nhau ở cả
        2 trường hợp (badge cùng dòng / badge xuống dòng) - trước đây ca xuống dòng chỉ
        còn 2px nên badge dính sát hộp giá.
    */
    row-gap: 3px;
    margin-bottom: 12px;
}

.product-title:has(.pd-badge--inline) > a {
    flex: 0 1 auto;
    min-width: 0;
}

.pd-badge--agency {
    background: #ef4444;
}

.pd-badge--community {
    background: #0284c7;
}

/* ===== Trạng thái KHÔNG giảm giá ===== */
.pd-wrap.pd-plain .pd-box {
    text-align: center;
}

.pd-wrap.pd-plain .pd-plain-label {
    font-size: 13px;
    font-weight: 600;
    color: #8a7355;
    margin-bottom: 2px;
}

.pd-wrap.pd-plain .pd-single {
    font-size: 23px;
    font-weight: 800;
    color: var(--pd-accent);
    line-height: 1.25;
}

.pd-wrap.pd-plain .pd-vat-only {
    font-size: 11.5px;
    font-weight: 500;
    color: #a08a6a;
    margin-top: 3px;
}

/* ===== Chế độ COMPACT (ô sản phẩm trong danh sách) =====

   Giữ nhãn chữ theo đúng mẫu đã duyệt. Để không bị hở khoảng lớn giữa nhãn và số tiền
   (thẻ sản phẩm rộng tới ~380px), bó bề ngang khối giá lại rồi căn giữa trong thẻ -
   tỉ lệ khi đó giống hệt mẫu thiết kế. Đổi lại cỡ giá nhỏ hơn chế độ không nhãn.
*/
.pd-wrap.pd-compact .pd-box,
.pd-wrap.pd-compact .pd-saved {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.pd-wrap.pd-compact .pd-badge-row {
    justify-content: flex-end;
}

.pd-wrap.pd-compact .pd-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.pd-wrap.pd-compact .pd-line--old {
    margin-bottom: 4px;
}

.pd-wrap.pd-compact .pd-line--old,
.pd-wrap.pd-compact .pd-old-label,
.pd-wrap.pd-compact .pd-old-label span {
    font-size: 12px;
    font-weight: 400;
    color: #64748b;
}

.pd-wrap.pd-compact .pd-old {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-decoration: line-through;
    white-space: nowrap;
}

.pd-wrap.pd-compact .pd-label,
.pd-wrap.pd-compact .pd-label span {
    font-size: 12px;
    font-weight: 700;
    color: var(--pd-label);
    line-height: 1.3;
    text-align: left;
}

.pd-wrap.pd-compact .pd-final {
    font-size: 19px;
    font-weight: 800;
    color: var(--pd-accent);
    line-height: 1.25;
    white-space: nowrap;
}

.pd-wrap.pd-compact .pd-saved {
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pd-saved);
    margin-top: 7px;
    line-height: 1.45;
}

.pd-wrap.pd-compact .pd-vat-note {
    font-size: 11.5px;
    font-weight: 600;
    color: inherit;
}

/* Trạng thái không giảm giá cũng bó cùng bề ngang cho đồng bộ hàng lối */
.pd-wrap.pd-compact.pd-plain .pd-box {
    max-width: 300px;
}

/* ===== Chế độ FULL (trang chi tiết) ===== */
.pd-wrap.pd-full {
    max-width: 440px;
}

.pd-wrap.pd-full .pd-badge-row {
    justify-content: flex-start;
}

.pd-wrap.pd-full .pd-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
}

.pd-wrap.pd-full .pd-line--old {
    margin-bottom: 5px;
}

.pd-wrap.pd-full .pd-line--old,
.pd-wrap.pd-full .pd-old-label,
.pd-wrap.pd-full .pd-old-label span {
    font-size: 13.5px;
    font-weight: 400;
    color: #64748b;
}

.pd-wrap.pd-full .pd-old {
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
    text-decoration: line-through;
    white-space: nowrap;
}

.pd-wrap.pd-full .pd-label,
.pd-wrap.pd-full .pd-label span {
    font-size: 14px;
    font-weight: 700;
    color: var(--pd-label);
    line-height: 1.35;
}

.pd-wrap.pd-full .pd-final {
    font-size: 27px;
    font-weight: 800;
    color: var(--pd-accent);
    white-space: nowrap;
    line-height: 1.2;
}

.pd-wrap.pd-full .pd-saved,
.pd-wrap.pd-full .pd-vat-note {
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-saved);
    margin-top: 8px;
    line-height: 1.5;
}

.pd-wrap.pd-full .pd-vat-note {
    margin-top: 0;
}

.pd-wrap.pd-full.pd-plain .pd-box {
    text-align: left;
}

.pd-wrap.pd-full.pd-plain .pd-single {
    font-size: 27px;
}

/* Nhãn dài / nhãn rút gọn - mặc định dùng bản dài */
.pd-wrap .pd-txt-short { display: none; }

/* ===== Tablet: thu nhẹ ===== */
@media (max-width: 991.98px) {
    .pd-wrap.pd-compact .pd-final {
        font-size: 18px;
    }

    .pd-wrap.pd-plain .pd-single {
        font-size: 21px;
    }

    .pd-wrap.pd-full .pd-final {
        font-size: 24px;
    }
}

/* ===== Điện thoại ===== */
@media (max-width: 767.98px) {
    .pd-wrap .pd-txt-full  { display: none; }
    .pd-wrap .pd-txt-short { display: inline; }

    .pd-wrap .pd-box {
        padding: 8px 10px;
    }

    .pd-wrap .pd-badge {
        font-size: 11px;
        padding: 3px 9px;
    }

    /* Ô sản phẩm hẹp: nhãn trên, số tiền xuống dòng dưới cho dễ đọc */
    .pd-wrap.pd-compact .pd-line--final {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
    }

    .pd-wrap.pd-compact .pd-line--old {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 3px;
    }

    .pd-wrap.pd-compact .pd-line--old .pd-old {
        margin-left: 3px;
    }

    .pd-wrap.pd-compact .pd-final {
        font-size: 17px;
    }

    .pd-wrap.pd-plain .pd-single {
        font-size: 18px;
    }

    .pd-wrap.pd-compact .pd-old,
    .pd-wrap.pd-compact .pd-line--old,
    .pd-wrap.pd-compact .pd-old-label,
    .pd-wrap.pd-compact .pd-old-label span,
    .pd-wrap.pd-compact .pd-label,
    .pd-wrap.pd-compact .pd-label span {
        font-size: 11px;
    }

    .pd-wrap.pd-compact .pd-saved,
    .pd-wrap.pd-compact .pd-vat-note {
        font-size: 10.5px;
        margin-top: 5px;
    }

    .pd-wrap.pd-plain .pd-vat-only,
    .pd-wrap.pd-plain .pd-plain-label {
        font-size: 11px;
    }

    /* Trang chi tiết trên điện thoại: nhãn trên, số dưới cho dễ đọc */
    .pd-wrap.pd-full .pd-line--final {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
    }

    .pd-wrap.pd-full .pd-final {
        font-size: 22px;
    }

    .pd-wrap.pd-full .pd-label,
    .pd-wrap.pd-full .pd-label span,
    .pd-wrap.pd-full .pd-line--old,
    .pd-wrap.pd-full .pd-old-label,
    .pd-wrap.pd-full .pd-old-label span,
    .pd-wrap.pd-full .pd-old {
        font-size: 12px;
    }

    .pd-wrap.pd-full .pd-saved,
    .pd-wrap.pd-full .pd-vat-note {
        font-size: 11.5px;
    }
}

/* ===== Màn rất hẹp: lưới 2 cột, mỗi ô chỉ ~130px ===== */
@media (max-width: 400px) {
    /* Ẩn chú thích VAT để dòng tiết kiệm gọn 1 dòng; giá hiển thị vẫn đã gồm VAT */
    .pd-wrap.pd-compact .pd-vat-note {
        display: none;
    }

    .pd-wrap.pd-compact .pd-final {
        font-size: 15.5px;
    }

    .pd-wrap.pd-plain .pd-single {
        font-size: 16.5px;
    }

    .pd-wrap .pd-badge {
        font-size: 10px;
        padding: 2px 8px;
    }

    .pd-wrap.pd-compact .pd-saved {
        font-size: 10.5px;
    }
}