/*
    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 - nay do .pd-row-final lo */
    .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;
    }
}

/* ===================================================================
   NHÃN "HOT" Ở GÓC ẢNH SẢN PHẨM
   NGHIỆP VỤ: đánh dấu sản phẩm đang được công ty đẩy mạnh. Neo vào góc
   trên-trái của khối ảnh (.product-thumb đã có position: relative sẵn).
   Tách khỏi nhãn ĐẠI LÝ / SALE nằm cạnh tên để không chen chỗ nhau.
   =================================================================== */
.product-thumb { position: relative; }

.hot-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    display: inline-block;
    padding: 3px 9px;
    border-radius: 4px;
    background: linear-gradient(135deg, #ff5722, #e53935);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .5px;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(229, 57, 53, .35);
    pointer-events: none; /* không chắn nút bấm nằm dưới */
}

@media (max-width: 575px) {
    .hot-badge { top: 6px; left: 6px; padding: 2px 7px; font-size: 10px; }
}


/* =====================================================================
   GIAO DIỆN THẺ SẢN PHẨM - bản thiết kế 19/10/2026
   =====================================================================
   NGHIỆP VỤ: dựng lại thẻ sản phẩm theo mẫu khách đã duyệt:
     - Thẻ bo góc, viền nhạt, đổ bóng mềm
     - Vùng ảnh nền kem, ảnh nằm trong khung trắng bo góc
     - Nhãn HOT góc trên-trái, đỏ cam, bo góc
     - Tên sản phẩm căn giữa, in đậm
     - Khung giá viền xanh nhạt: hàng "Niêm yết" gạch ngang + nhãn % giảm
       bên phải, rồi tới nhãn chương trình, rồi số tiền to màu xanh
     - Dòng "✓ Tiết kiệm ... đ" nằm dưới khung giá

   Đặt ở cuối file để ghi đè giao diện mặc định của theme mà không phải
   sửa file CSS gốc - gốc còn dùng cho các màn khác.
   ===================================================================== */

/* ---------- Thẻ sản phẩm ---------- */
.product-card {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .06);
    transition: box-shadow .25s ease, transform .25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    box-shadow: 0 8px 22px rgba(16, 24, 40, .12);
    transform: translateY(-2px);
}

/* ---------- Vùng ảnh nền kem ---------- */
.product-card .product-thumb {
    position: relative;
    background: #f6ecdc;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card .product-thumb > a {
    display: block;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.product-card .product-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    background: #fff;
}

/* ---------- Nhãn HOT ---------- */
.hot-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 16px;
    border-radius: 10px;
    background: #f04e2a;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .8px;
    text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(240, 78, 42, .32);
    pointer-events: none;
}

.hot-badge-fire {
    width: 11px;
    height: 13px;
    display: inline-block;
    color: #ffeb3b; /* Vàng tươi rực rỡ tương phản mạnh trên nền đỏ cam */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
}

/* ---------- Phần chữ ---------- */
.product-card .product-card-body {
    padding: 16px 16px 18px;
    text-align: center;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.product-card .product-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: #16202a;
    text-align: center;
}

.product-card .product-title > a {
    color: inherit;
    transition: color .2s ease;
}

.product-card .product-title > a:hover {
    color: #169e53;
}

.product-card .product-price {
    margin: 0;
    margin-top: auto;
}


/* ---------- Khối giá kiểu mới theo ảnh thiết kế ---------- */
.pd-new-block {
    text-align: left;
    padding: 0 2px;
}

/* Hàng 1: Giá bán lớn màu xanh + Nhãn % giảm bên cạnh */
.pd-new-top-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}

.pd-new-final {
    font-size: 28px;
    font-weight: 800;
    color: #0b63c5;
    line-height: 1.2;
    white-space: nowrap;
}

.pd-agency .pd-new-final {
    color: #c62828;
}

.pd-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 20px;
    background: #e3f5ea;
    color: #1f8a4c;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.pd-agency .pd-new-badge {
    background: #fdecea;
    color: #d63025;
}

/* Hàng 2: Giá gốc gạch ngang */
.pd-new-origin-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 14.5px;
    color: #718096;
    margin-bottom: 8px;
}

.pd-new-origin-label {
    color: #718096;
    font-weight: 400;
}

.pd-new-origin-amount {
    color: #718096;
    text-decoration: line-through;
    font-weight: 500;
    white-space: nowrap;
}

/* Đường kẻ ngang phân cách mờ */
.pd-new-divider {
    height: 1px;
    background: #edf2f7;
    margin: 8px 0 10px;
}

/* Hàng 3: Tiết kiệm có icon tích xanh */
.pd-new-saved-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 700;
    color: #0b63c5;
    line-height: 1.3;
}

.pd-agency .pd-new-saved-row {
    color: #c62828;
}

.pd-new-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0b63c5;
    flex-shrink: 0;
}

.pd-agency .pd-new-check {
    color: #c62828;
}

/* Hàng 4: Ghi chú VAT nhỏ hơn thụt lề */
.pd-new-vat {
    font-size: 12.5px;
    color: #8c9ba8;
    margin-top: 2px;
    padding-left: 23px;
    line-height: 1.3;
}

/* Nút MUA NGAY chuẩn theo thiết kế: Màu xanh lá cây + icon giỏ hàng + mũi tên > */
.featured-buy-now {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 12px 14px 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #169e53 !important;
    color: #fff !important;
    text-align: center;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: .3px;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(22, 158, 83, .25);
    transition: all .2s ease;
}

.featured-buy-now:hover {
    background: #118141 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(22, 158, 83, .35);
}

.featured-buy-now i.fa-shopping-cart {
    font-size: 16px;
}

.featured-buy-now .btn-arrow {
    font-size: 17px;
    font-weight: 800;
    margin-left: 2px;
}

/* Thẻ sản phẩm */
.product-card {
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(16, 24, 40, .06);
    background: #fff;
}

.product-card .product-thumb {
    border-radius: 18px 18px 0 0;
}

.pd-wrap.pd-compact .pd-box,
.pd-wrap.pd-compact .pd-saved {
    max-width: none;
}

.pd-wrap.pd-compact .pd-box {
    background: #fbfdff;
    border: 1px solid #cfe5f3;
    border-radius: 12px;
    padding: 12px 14px;
}

/* Hàng 1: "Niêm yết: 550.000 đ"  +  nhãn "-10%" bên phải */
.pd-wrap.pd-compact .pd-line--old {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.pd-wrap.pd-compact .pd-old-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
}

.pd-wrap.pd-compact .pd-old-label,
.pd-wrap.pd-compact .pd-old-label span {
    font-size: 13px;
    font-weight: 400;
    color: #7a8794;
}

.pd-wrap.pd-compact .pd-old {
    font-size: 13px;
    font-weight: 500;
    color: #7a8794;
    text-decoration: line-through;
    white-space: nowrap;
}

/* Nhãn % giảm nằm trong khung giá */
.pd-wrap.pd-compact .pd-badge-inbox {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

/* Sale toàn sàn: xanh lá. Chiết khấu Đại lý: đỏ - giữ đúng quy ước màu cũ
   để Đại lý nhìn là biết ngay đang hưởng chương trình riêng của mình. */
.pd-wrap.pd-community .pd-badge-inbox {
    background: #e3f5ea;
    color: #1f8a4c;
}

.pd-wrap.pd-agency .pd-badge-inbox {
    background: #fdecea;
    color: #d63025;
}

/* Nhãn chương trình giá */
.pd-wrap.pd-compact .pd-label,
.pd-wrap.pd-compact .pd-label span {
    font-size: 14px;
    font-weight: 600;
    color: #16202a;
    line-height: 1.35;
}

/* Số tiền khách trả */
.pd-wrap.pd-compact .pd-final {
    font-size: 26px;
    font-weight: 800;
    color: #1769c0;
    line-height: 1.2;
    white-space: nowrap;
}

.pd-wrap.pd-agency.pd-compact .pd-final {
    color: #c62828;
}

/* Dòng tiết kiệm */
.pd-wrap.pd-compact .pd-saved {
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #1769c0;
    margin-top: 10px;
    line-height: 1.5;
}

.pd-wrap.pd-agency.pd-compact .pd-saved {
    color: #c62828;
}

/* NGHIỆP VỤ: ghi chú VAT là thông tin bắt buộc phải nêu, nhưng để nhỏ và
   nhạt hơn, xuống dòng riêng cho khỏi chen vào số tiền tiết kiệm. */
.pd-wrap.pd-compact .pd-vat-note {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: #8a96a3;
}

/* Trạng thái không có chương trình giảm giá: dùng chung kiểu khung */
.pd-wrap.pd-compact.pd-plain .pd-box {
    max-width: none;
    background: #fbfdff;
    border: 1px solid #cfe5f3;
    border-radius: 12px;
    padding: 12px 14px;
    text-align: left;
}

.pd-wrap.pd-compact.pd-plain .pd-single {
    font-size: 26px;
    font-weight: 800;
    color: #1769c0;
}

/* ---------- Màn hình hẹp ---------- */
@media (max-width: 575px) {
    .product-card .product-thumb { padding: 12px; }
    .product-card .product-card-body { padding: 12px 12px 14px; }
    .product-card .product-title { font-size: 15.5px; font-weight: 800; margin-bottom: 10px; }
    .hot-badge { top: 10px; left: 10px; padding: 5px 12px; font-size: 12.5px; }
    .hot-badge-fire { width: 9.5px; height: 11.5px; }
    .pd-wrap.pd-compact .pd-box { padding: 10px 11px; }
    .pd-wrap.pd-compact .pd-final,
    .pd-wrap.pd-compact.pd-plain .pd-single { font-size: 21px; }
    .pd-wrap.pd-compact .pd-label,
    .pd-wrap.pd-compact .pd-label span { font-size: 13px; }
}


/* ---------- Nhãn rút gọn cho thẻ trong danh sách ----------
   NGHIỆP VỤ: thẻ sản phẩm trong lưới 4 cột chỉ rộng khoảng 230px, hẹp hơn
   nhiều so với bản thiết kế phóng to. Dùng nhãn dài ("Giá niêm yết:",
   "Giá bán cộng đồng:") sẽ bị vỡ chữ xuống 2-3 dòng, nhìn rất xấu.
   Nên ở chế độ compact luôn dùng bản rút gọn: "Niêm yết:", "Giá cộng đồng:"
   - đúng chữ trong mẫu thiết kế. Trang chi tiết (pd-full) vẫn giữ nhãn dài. */
.pd-wrap.pd-compact .pd-txt-full  { display: none; }
.pd-wrap.pd-compact .pd-txt-short { display: inline; }

/* Chữ "Niêm yết:" và nhãn chương trình giá không được tự ngắt giữa chừng */
.pd-wrap.pd-compact .pd-label,
.pd-wrap.pd-compact .pd-label span,
.pd-wrap.pd-compact .pd-old-label,
.pd-wrap.pd-compact .pd-old-label span {
    white-space: nowrap;
}

/* NGHIỆP VỤ: trên màn hình hẹp (2 thẻ/hàng) khung giá chỉ còn ~130px, không đủ
   chỗ cho cả "Niêm yết: 1.080.000 đ" lẫn nhãn "-10%" trên cùng một hàng.
   Cho phép xuống hàng để nhãn tụt xuống dưới, THAY VÌ cắt cụt mất số tiền.
   Trước đây đặt overflow:hidden ở đây làm GIÁ NIÊM YẾT BIẾN MẤT trên điện thoại. */
.pd-wrap.pd-compact .pd-line--old {
    flex-wrap: wrap;
    row-gap: 4px;
}

.pd-wrap.pd-compact .pd-old-wrap {
    flex: 1 1 auto;
}


/* ---------- Màn hình rất hẹp: 2 thẻ sản phẩm trên một hàng ----------
   NGHIỆP VỤ: ở bề ngang này khung giá chỉ còn khoảng 130px. Chuỗi
   "Niêm yết: 1.080.000 đ" ở cỡ chữ 13px dài hơn khung, bị thẻ sản phẩm
   (có overflow:hidden) CẮT CỤT mất chữ số cuối và chữ "đ".
   Nên thu nhỏ cỡ chữ và cho phép xuống dòng trong chính cụm đó. */
@media (max-width: 575px) {
    .pd-wrap.pd-compact .pd-old-wrap {
        flex: 0 1 auto;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .pd-wrap.pd-compact .pd-badge-inbox {
        flex: 0 0 auto;
        padding: 3px 8px;
        font-size: 11.5px;
    }

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

    .pd-wrap.pd-compact .pd-saved {
        font-size: 12px;
        margin-top: 8px;
    }
}


/* ---------- Cân đối khung giá cho thẻ sản phẩm ----------
   NGHIỆP VỤ: Dòng giá bán (Nhãn bên trái, Số tiền bên phải, cùng một hàng).
   Dòng tiết kiệm (Tiết kiệm bên trái, VAT bên phải, cùng một hàng).
   Lấp đầy khung giá cân đối cả trái lẫn phải, không để mảng trống trơ trọi bên phải. */
.pd-wrap.pd-compact .pd-box {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 8px;
    row-gap: 4px;
}

/* Hàng 1: Niêm yết (trái) + Nhãn % giảm (phải) */
.pd-wrap.pd-compact .pd-line--old {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

/* Hàng 2: Giá cộng đồng (trái) + Số tiền (phải) */
.pd-wrap.pd-compact .pd-row-final {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 8px;
}

.pd-wrap.pd-compact .pd-row-final .pd-label {
    display: inline-block;
    flex: 0 1 auto;
}

.pd-wrap.pd-compact .pd-row-final .pd-final {
    display: inline-block;
    flex: 0 0 auto;
    text-align: right;
}

/* Hàng 3: Tiết kiệm (trái) + VAT (phải) */
.pd-wrap.pd-compact .pd-saved {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 8px;
}

.pd-wrap.pd-compact .pd-vat-note {
    flex: 0 1 auto;
    text-align: right;
}

/* Chặn cuối: dù thế nào cũng không cho chữ tràn ra ngoài khung giá */
.pd-wrap.pd-compact .pd-box,
.pd-wrap.pd-compact .pd-row-final,
.pd-wrap.pd-compact .pd-saved {
    min-width: 0;
    max-width: 100%;
}

.pd-wrap.pd-compact .pd-final {
    max-width: 100%;
    overflow-wrap: anywhere;
}


/* ---------- Chống lệch khối giữa các thẻ sản phẩm ----------
   NGHIỆP VỤ: tên sản phẩm dài ngắn khác nhau nên thẻ nào tên 1 dòng, thẻ nào
   tên 2 dòng. Khối giá và nút MUA NGAY vì thế bắt đầu ở độ cao khác nhau,
   cùng một hàng mà nhìn so le.

   Giao diện gốc căn chiều cao bằng JS (class .mh, .js-box-h), nhưng JS chạy
   SAU khi ảnh tải xong - ảnh về chậm là đo hụt, canh lệch. Nên chốt bằng CSS:
     - Tên sản phẩm luôn chiếm ĐÚNG 2 dòng, dài hơn thì cắt bằng dấu ...
     - Các ô trong slider kéo cao bằng nhau
   Nhờ vậy mọi thứ bên dưới tên luôn bắt đầu ở cùng một độ cao. */
.product-card .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.35em * 2);
}

/* Các ô trong slider kéo cao bằng nhau để thẻ bên trong giãn hết chiều cao.
   Chỉ áp dụng khi >= 768px (có từ 2 sản phẩm/hàng trở lên).
   Trên mobile (< 768px), slick hiển thị 1 sản phẩm/hàng nên giữ cơ chế mặc định
   để Slick tính toán vị trí translate3d chuẩn 100%, không bao giờ bị trôi lệch nửa vời. */
@media (min-width: 768px) {
    .slick-stage-outer-deals .slick-track {
        display: flex;
        align-items: stretch;
    }

    .slick-stage-outer-deals .slick-slide {
        height: auto;
        min-width: 0;
    }

    .slick-stage-outer-deals .slick-slide > div,
    .owl-item-slick-deals {
        height: 100%;
        display: flex;
        width: 100%;
        min-width: 0;
    }

    .owl-item-slick-deals > .product-card {
        width: 100%;
    }
}

@media (max-width: 767px) {
    /* Đảm bảo thẻ sản phẩm trong slider trên mobile vừa khít 100% và căn giữa cân đối */
    .slick-stage-outer-deals .slick-slide {
        box-sizing: border-box;
    }

    .slick-stage-outer-deals .owl-item-slick-deals {
        padding: 5px 6px;
        box-sizing: border-box;
        width: 100%;
    }

    .box_flash {
        padding: 12px 8px;
    }
}

/* Khối giá luôn nằm sát đáy phần chữ, nút MUA NGAY nhờ đó cũng thẳng hàng */
.product-card .product-card-body {
    justify-content: flex-start;
}

@media (max-width: 575px) {
    .product-card .product-title { min-height: calc(1.35em * 2); }
}


/* ---------- Màn hẹp: mỗi hàng một sản phẩm ----------
   NGHIỆP VỤ: từ 600px trở xuống, xếp 2 thẻ một hàng thì mỗi thẻ chỉ còn
   khoảng 130-150px. Khung giá không đủ chỗ, số tiền bị cắt cụt - đo ở 310px
   thấy "972.000 đ" và "2.112.353 đ" đều mất phần đuôi.

   Cho mỗi hàng MỘT sản phẩm thì thẻ rộng gần cả màn, giá đọc thoải mái.

   Dùng class riêng .clm-san-pham (gắn trong 4 trang danh sách) thay vì nhắm
   vào .clm chung - lưới .clm còn dùng cho banner, tin tức, bộ lọc... đụng vào
   là vỡ cả những khối đó. */
@media (max-width: 600px) {
    .clm-san-pham {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* =========================================================================
   19/10/2026 - TÊN SẢN PHẨM NỔI BẬT HƠN + KHUNG GIÁ KHÔNG CÒN HỞ BÊN PHẢI
   ========================================================================= */

/* ---------- 1. Tên sản phẩm ----------
   NGHIỆP VỤ: tên sản phẩm là thứ khách đọc đầu tiên để nhận ra mình đang xem
   gì, nhưng đang bị con số giá (26px, in đậm, màu xanh) lấn át hoàn toàn.
   Nâng cỡ chữ và làm đậm màu để tên "cầm trịch" lại phần chữ của thẻ.

   Viết hoa TOÀN BỘ tên ở mọi nơi hiển thị (thẻ danh sách, slider trang chủ,
   giỏ hàng, tiêu đề trang chi tiết) để đồng nhất một kiểu trình bày - tránh
   cảnh sản phẩm nhập hoa thì hoa, nhập thường thì thường, nhìn lộn xộn.
   Dùng text-transform (chỉ đổi cách HIỂN THỊ) chứ không đổi dữ liệu trong DB,
   nên tên gốc trong Admin, đơn hàng, email... vẫn giữ nguyên. */
.product-title,
.product-title > a,
.title-detail-right h3 {
    text-transform: uppercase;
}

.product-card .product-title {
    font-size: 18.5px;
    font-weight: 800;
    color: #0b1727;
    letter-spacing: .2px;
}

@media (max-width: 575px) {
    .product-card .product-title {
        font-size: 16.5px;
        letter-spacing: .1px;
    }
}

/* ---------- 2. Nhãn % giảm luôn bám lề phải ----------
   NGHIỆP VỤ: hàng "Niêm yết: 2.480.000 đ" + nhãn "-10%" được phép xuống dòng
   khi khung giá quá hẹp (để không cắt cụt mất số tiền). Nhưng lúc xuống dòng,
   justify-content:space-between không còn tác dụng (mỗi dòng chỉ còn 1 phần
   tử), nhãn "-10%" rơi về sát lề TRÁI và chừa trống cả mảng bên phải.
   margin-left:auto đẩy nhãn về lề phải trong MỌI trường hợp - dù nằm cùng
   dòng với giá niêm yết hay đã bị đẩy xuống dòng dưới. */
.pd-wrap.pd-compact .pd-badge-inbox {
    margin-left: auto;
}


/* =========================================================================
   19/10/2026 (chốt) - BÁM ĐÚNG MẪU THIẾT KẾ CỦA KHÁCH
   -------------------------------------------------------------------------
   NGHIỆP VỤ: khung giá theo mẫu là khối chữ PHẲNG, căn trái, KHÔNG đóng khung
   viền - số tiền đứng ngay dưới tên sản phẩm, nhãn % nằm sát cạnh số tiền.
   Bản đóng khung viền + căn phải mà tôi làm trước đó bị khách phản hồi "nhìn
   rất chối" nên đã gỡ bỏ, chỉ giữ lại phần dưới đây.
   ========================================================================= */

/* Nhãn "Giá Đại lý:" - CHỈ tài khoản Đại lý mới có dòng này.
   Khách thường xem giá công khai mặc định nên không cần nhãn (xem comment
   trong price-display.blade.php). */
.pd-new-label {
    display: block;
    width: 100%;
    margin-bottom: 1px;
    font-size: 14px;
    font-weight: 600;
    color: #16202a;
    line-height: 1.35;
}

.pd-agency .pd-new-label {
    color: #c62828;
}

/* NGHIỆP VỤ: tên sản phẩm luôn chiếm ĐÚNG 2 dòng ở mọi thẻ.
   Giao diện gốc căn chiều cao tên bằng JS (class .mh) - JS gán min-height
   theo tên DÀI NHẤT của cả slider, nên chỉ cần một sản phẩm tên 4-5 dòng là
   MỌI thẻ bị chừa một khoảng trống to giữa tên và khối giá (đúng khoảng hở
   khách phản ánh). Chốt cứng bằng CSS kèm !important để đè giá trị JS gán
   thẳng vào thuộc tính style của thẻ. */
.product-card .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.35em * 2) !important;
    max-height: calc(1.35em * 2);
    height: auto !important;
}

/* Khối giá nằm ngay dưới tên, KHÔNG đẩy xuống đáy thẻ.
   Nút MUA NGAY mới là thứ bám đáy, nhờ vậy nút của mọi thẻ trong cùng một
   hàng luôn thẳng nhau dù tên sản phẩm dài ngắn khác nhau. */
.product-card .product-price {
    margin-top: 10px;
}

.product-card .featured-buy-now {
    margin-top: auto;
}

/* Chặn cuối: dù cỡ chữ nào cũng không cho số tiền tràn ra ngoài thẻ */
.pd-new-top-row {
    flex-wrap: wrap;
    row-gap: 2px;
}

.pd-new-block,
.pd-new-top-row,
.pd-new-origin-row,
.pd-new-saved-row {
    min-width: 0;
    max-width: 100%;
}

/* Sản phẩm KHÔNG có chương trình giảm giá: bán đúng một giá niêm yết công khai.
   NGHIỆP VỤ: vẫn phải phẳng và căn trái giống hệt các thẻ có giảm giá, nếu không
   thì trong cùng một hàng, thẻ có giảm giá thì chữ phẳng, thẻ không giảm giá lại
   hiện ra một cái khung viền xanh kiểu cũ - nhìn như lỗi. */
.pd-wrap.pd-compact.pd-plain .pd-box {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    text-align: left;
    display: block;
}

.pd-wrap.pd-compact.pd-plain .pd-single {
    font-size: 28px;
    font-weight: 800;
    color: #0b63c5;
    line-height: 1.2;
}

.pd-wrap.pd-compact.pd-plain .pd-vat-only {
    margin-top: 4px;
    font-size: 12.5px;
    color: #8c9ba8;
    line-height: 1.3;
}

/* Vùng ảnh: nền TRẮNG bo góc theo đúng mẫu thiết kế (ảnh 2 khách gửi).
   Nền kem #f6ecdc của bản cũ làm thẻ bị chia đôi thành hai mảng màu, đúng chỗ
   khách nói "nhìn rất chối". */
.product-card .product-thumb {
    background: #fff;
    padding: 12px 12px 6px;
}

.product-card .product-thumb > a {
    border-radius: 16px;
}

/* NGHIỆP VỤ: từ 551px trở xuống mỗi hàng chỉ có MỘT sản phẩm nên không cần
   chừa sẵn 2 dòng cho tên để căn thẳng với thẻ bên cạnh. Bỏ phần chừa này đi
   thì tên 1 dòng không còn để lại một dòng trống dưới nó (khoảng hở khách
   phản ánh). Tên dài vẫn bị cắt ở 2 dòng như cũ. */
@media (max-width: 551px) {
    .product-card .product-title {
        min-height: 0 !important;
    }
}


/* =========================================================================
   19/10/2026 (lần 3) - CHỐT BỀ RỘNG THẺ SẢN PHẨM TỐI ĐA 400px
   -------------------------------------------------------------------------
   NGHIỆP VỤ: thẻ sản phẩm được thiết kế cho bề ngang khoảng 400px. Trước đây
   thẻ CO GIÃN THEO Ô CHỨA nên ở những bề ngang chỉ xếp được 1 thẻ/hàng
   (ví dụ màn 7xx px, hoặc màn rất rộng chia 3 cột), một thẻ bị kéo rộng tới
   ~710px: ảnh phình to, tên sản phẩm chỉ còn 1 dòng rồi hở một khoảng trống
   lớn, khối giá nằm lọt thỏm - nhìn mất cân đối.

   Nay chốt: thẻ RỘNG TỐI ĐA 400px và tự căn giữa ô chứa. Màn hẹp hơn 400px
   thì thẻ co lại vừa màn như cũ. Nhờ vậy từ điện thoại đến desktop, thẻ sản
   phẩm luôn giữ đúng một tỉ lệ. */
.product-card {
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================================
   19/10/2026 (lần 4) - NHÃN "GIÁ ĐẠI LÝ:" NẰM NGANG HÀNG VỚI SỐ TIỀN
   -------------------------------------------------------------------------
   NGHIỆP VỤ: trước đó nhãn chiếm trọn một dòng riêng phía trên, đọc thành hai
   ý rời nhau và làm khối giá của thẻ Đại lý cao hơn thẻ thường một dòng -> cùng
   một hàng mà hai thẻ so le. Nay cho nhãn đứng ngay trước số tiền, đọc liền
   mạch "Giá Đại lý: 469.412 đ -90%" và mọi thẻ cao bằng nhau.
   Nhãn căn theo ĐƯỜNG CHÂN CHỮ của số tiền (baseline) chứ không căn giữa, nếu
   không chữ nhỏ 14px sẽ trôi lên lưng chừng con số 28px. */
.pd-new-label {
    display: inline-block;
    width: auto;
    flex: 0 0 auto;
    align-self: baseline;
    margin-bottom: 0;
}

.pd-new-final {
    align-self: baseline;
}


/* =========================================================================
   20/10/2026 - BÁM SÁT 100% ẢNH MẪU KHÁCH GỬI
   -------------------------------------------------------------------------
   Khách gửi lại ảnh mẫu và chốt "chỉnh sao cho giống với ảnh này". Theo mẫu:
     - Tên sản phẩm: chữ THƯỜNG (không viết hoa toàn bộ), to - đậm - căn giữa.
     - Khối giá căn TRÁI, mỗi thứ một dòng, KHÔNG kéo chữ sang bám mép phải:
           972.000 đ  [-10%]
           Giá gốc: 1.080.000 đ
           -----------------------
           ✓ Tiết kiệm 108.000 đ
             (Giá đã gồm 8% VAT)
     Bản "lấp kín hai mép" làm trước đó đã gỡ bỏ để đúng mẫu.
   ========================================================================= */

/* ---------- Tên sản phẩm ---------- */
.product-card .product-title {
    /* Mẫu dùng chữ thường, chỉ viết hoa chữ đầu như tên nhập trong Admin */
    text-transform: none;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0;
    color: #16202a;
    margin-bottom: 12px;
    /* Căn giữa theo chiều dọc để tên 1 dòng không chừa một lỗ hổng bên dưới */
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 575px) {
    .product-card .product-title { font-size: 19px; }
}

/* ---------- Khối giá: căn trái, mỗi thứ một dòng ---------- */
.pd-wrap.pd-compact .pd-new-block {
    /* Đo theo bề ngang THỰC của khung giá (@container), không theo bề ngang màn,
       vì cùng một màn thì thẻ trang chủ rộng gấp đôi thẻ trang Sản phẩm. */
    container-type: inline-size;
    display: block;
    text-align: left;
}

.pd-wrap.pd-compact .pd-new-top-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: 12px;
    row-gap: 4px;
    margin-bottom: 2px;
}

/* Nhãn % bám ngay cạnh số tiền, KHÔNG đẩy sang mép phải */
.pd-wrap.pd-compact .pd-new-badge {
    margin-left: 0;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 14px;
}

.pd-wrap.pd-compact .pd-new-origin-row {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 6px;
    margin: 0 0 2px;
}

.pd-wrap.pd-compact .pd-new-divider {
    margin: 10px 0 10px;
}

.pd-wrap.pd-compact .pd-new-saved-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Ghi chú VAT xuống dòng riêng, thụt vào thẳng hàng với chữ "Tiết kiệm"
   (không thụt theo icon) - đúng như mẫu. */
.pd-wrap.pd-compact .pd-new-vat {
    display: block;
    margin: 2px 0 0;
    padding-left: 24px;
    text-align: left;
}

/* NGHIỆP VỤ: nhãn "Giá Đại lý:" vẫn đi liền số tiền trên cùng một hàng
   (yêu cầu riêng của khách), căn theo đường chân chữ của con số. */
.pd-wrap.pd-compact .pd-new-label {
    display: inline-block;
    width: auto;
    flex: 0 0 auto;
    align-self: baseline;
    margin: 0;
}

.pd-wrap.pd-compact .pd-new-final {
    align-self: baseline;
}

/* Khung giá hẹp (thẻ 2-3 cột): thu nhỏ số tiền vừa đủ để nhãn % luôn nằm
   cạnh nó, không bao giờ bị đẩy xuống dòng - đo theo bề ngang THỰC của khung
   giá chứ không theo bề ngang màn hình. */
@container (max-width: 230px) {
    .pd-wrap.pd-compact .pd-new-final { font-size: 23px; }
    .pd-wrap.pd-compact .pd-new-badge { font-size: 12.5px; padding: 3px 9px; }
}