/* ============================================================================
   SMART DIALOG FORM — bộ da (skin) DÙNG CHUNG cho các dialog thêm/sửa danh mục
   dựng theo mockup nhận diện Smart Software; màu nhấn nay theo màu chủ đạo XANH của app (trước cam #F36717 / đỏ #ED1C24).

   Đây là CSS TOÀN CỤC (không phải CSS isolation) nên:
   - KHÔNG cần `::deep` khi nhắm vào DOM do component con sinh ra.
   - Mọi selector đều nằm dưới `.pi-*` nên không rò rỉ ra phần còn lại của app.

   Thêm dialog mới theo bộ da này thì KHÔNG tạo file .razor.css riêng — dùng lại
   các lớp ở đây, chỉ viết .razor.css khi thật sự có phần riêng của màn đó.
   ============================================================================ */

.pi-form {
    --pi-brand: var(--st-primary, #2563eb);
    --pi-brand-700: var(--st-primary-600, #1d4ed8);
    --pi-brand-50: var(--st-primary-050, #eef4ff);
    --pi-accent: var(--st-primary, #2563eb);
    --pi-danger: #C1121F;
    --pi-danger-50: #FEF2F2;
    --pi-ok: #16794C;
    --pi-surface: #FFFFFF;
    --pi-surface-2: #FAFAFB;
    --pi-surface-3: #F2F3F4;
    --pi-border: #E4E5E8;
    --pi-border-2: #C9CBD0;
    --pi-text: #26282C;
    --pi-muted: #66686E;
    --pi-muted-2: #9B9DA3;
    --pi-ring: rgba(37, 99, 235, .22);
    --pi-r: 8px;

    position: relative;
    max-width: 1460px;
    margin: 0 auto;
    color: var(--pi-text);
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: 14px;
}

/* Chiều cao tối thiểu lúc đang tải — để khung dialog không co lại rồi giãn ra
   khi nội dung thật mount. */
.pi-form-loading {
    min-height: 420px;
    min-width: 640px;
}

/* ===== Dòng meta (thay cho phần meta trên header dialog) ===== */
.pi-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--pi-muted);
}

    .pi-meta b {
        color: var(--pi-text);
        font-weight: 700;
    }

.pi-meta-sep {
    color: var(--pi-muted-2);
}

.pi-meta-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Khối (card) ===== */
.pi-sect {
    border: 1px solid var(--pi-border);
    border-radius: 10px;
    margin-bottom: 13px;
    overflow: hidden;
    background: var(--pi-surface);
}

    .pi-sect:last-child {
        margin-bottom: 0;
    }

.pi-sect-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    background: var(--pi-surface-2);
    border-bottom: 1px solid var(--pi-border);
}

    .pi-sect-head h3 {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: var(--pi-muted);
    }

.pi-sect-hint {
    margin-left: auto;
    font-size: 13px;
    color: var(--pi-muted-2);
    text-align: right;
}

    .pi-sect-hint.is-ok {
        color: var(--pi-ok);
        font-weight: 600;
    }

    .pi-sect-hint.is-bad {
        color: var(--pi-danger);
        font-weight: 600;
    }

.pi-sect-body {
    padding: 13px;
}

/* ===== Lưới 12 cột, nhãn nằm trên ô nhập ===== */
.pi-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px 14px;
}

.pi-f {
    grid-column: span var(--s, 4);
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .pi-f > label {
        font-size: 14px;
        font-weight: 650;
        color: var(--pi-muted);
    }

        .pi-f > label i {
            color: var(--pi-danger);
            font-style: normal;
        }

/* Ô chỉ hiển thị giá trị (không phải input) — canh cùng chiều cao với ô nhập */
.pi-f .pi-static {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 0 2px;
    font-size: 14px;
    color: var(--pi-text);
}

/* Ô nhập + nút phụ trên cùng một dòng */
.pi-ing {
    display: flex;
    gap: 6px;
    min-width: 0;
}

.pi-ing-grow {
    flex: 1 1 auto;
    min-width: 0;
}

.pi-ing-fix {
    flex: 0 0 96px;
    width: 96px;
}

.pi-mini {
    height: 32px;
    padding: 0 11px;
    flex: none;
    border: 1px solid var(--pi-border-2);
    border-radius: var(--pi-r);
    background: var(--pi-surface);
    cursor: pointer;
    font-size: 14px;
    font-weight: 650;
    color: var(--pi-muted);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .pi-mini:hover:not(:disabled) {
        border-color: var(--pi-brand);
        color: var(--pi-brand);
        background: var(--pi-brand-50);
    }

    .pi-mini:disabled {
        opacity: .45;
        cursor: not-allowed;
        border-color: var(--pi-border);
        color: var(--pi-muted-2);
        background: transparent;
    }

/* ===== Công tắc ===== */
.pi-sws {
    grid-column: span 12;
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    align-items: center;
}

.pi-sw {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 650;
    color: var(--pi-muted);
}

/* ===== Thanh giá trước thuế ===== */
.pi-calcbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 9px 12px;
    border: 1px dashed var(--pi-border-2);
    border-radius: var(--pi-r);
    background: var(--pi-surface-2);
    font-size: 14px;
    color: var(--pi-muted);
}

    .pi-calcbar b {
        color: var(--pi-text);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

.pi-calcbar-gap {
    flex: 1 1 auto;
}

/* ===== Thanh công cụ của lưới con ===== */
.pi-gbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--pi-border);
    background: var(--pi-surface);
}

.pi-gbar-cnt {
    margin-left: auto;
    font-size: 13px;
    color: var(--pi-muted-2);
}

/* ===== Khối chia đôi ===== */
.pi-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

/* ===== Hàng chọn kiểu đối tượng (chip có ô tick) ===== */
.pi-types {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 9px 12px;
    margin-bottom: 12px;
    border: 1px solid var(--pi-border);
    border-radius: 10px;
    background: var(--pi-surface-2);
}

.pi-tck {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 4px 11px;
    border: 1px solid var(--pi-border-2);
    border-radius: 999px;
    background: var(--pi-surface);
    cursor: pointer;
    font-size: 14px;
    font-weight: 650;
    color: var(--pi-muted);
    user-select: none;
}

    .pi-tck:hover {
        border-color: var(--pi-brand);
    }

    .pi-tck.is-on {
        border-color: var(--pi-brand);
        background: var(--pi-brand-50);
        color: var(--pi-brand);
    }

.pi-types-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== Danh mục chọn nhiều cột (dropdown) =====
   CỐ Ý không dùng lại tên `.content-cbb`: class đó đang xuất hiện ở ~27 màn khác và KHÔNG có
   quy tắc nào cho nó ở đâu cả (trước đây nó chỉ ăn trong ProductCreateAndUpdateV2 nhờ CSS
   isolation). Đưa `.content-cbb` lên toàn cục là lặng lẽ cắt chữ ở cả 27 màn kia.

   Popup của SfDropDownList render ở CUỐI <body>, không nằm trong `.pi-form`, nên quy tắc này
   bắt buộc phải đứng một mình — bọc vào `.pi-form` là không khớp gì. */
.pi-cbb {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

/* ===== Panel ảnh / đính kèm ===== */
.pi-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--pi-surface);
    border: 1px solid var(--pi-border);
    border-radius: 10px;
    overflow: hidden;
}

.pi-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--pi-border);
    background: var(--pi-surface-2);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--pi-muted);
}

    .pi-card-head > i {
        color: var(--pi-muted-2);
        font-size: 14px;
    }

.pi-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--pi-brand);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    text-transform: none;
}

.pi-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px;
}

.pi-hint {
    margin-top: 6px;
    font-size: 13px;
    color: var(--pi-muted-2);
}

.pi-hint-foot {
    padding-top: 2px;
}

/* --- Lưới ảnh --- */
.pi-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 10px;
    margin-top: 12px;
    padding-right: 4px;
    max-height: 230px;
    overflow-y: auto;
}

.pi-thumb {
    position: relative;
    border: 1px solid var(--pi-border);
    border-radius: 9px;
    background: var(--pi-surface-2);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

    .pi-thumb:hover {
        border-color: var(--pi-brand);
        box-shadow: 0 2px 8px rgba(38, 40, 44, .12);
    }

.pi-thumb-img {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--pi-surface-3);
    cursor: zoom-in;
}

    .pi-thumb-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.pi-thumb-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 18px;
    background: rgba(24, 32, 44, .35);
    opacity: 0;
    transition: opacity .15s;
}

.pi-thumb:hover .pi-thumb-zoom {
    opacity: 1;
}

.pi-thumb-del {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    width: 22px;
    height: 22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, .55);
    color: #FFFFFF;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, background .15s;
}

.pi-thumb:hover .pi-thumb-del {
    opacity: 1;
}

.pi-thumb-del:hover {
    background: var(--pi-danger);
    color: #FFFFFF;
}

/* Nhãn ảnh mới chọn, chưa cất giữ */
.pi-thumb-tag {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--pi-brand);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
}

.pi-thumb-name {
    padding: 5px 7px;
    border-top: 1px solid var(--pi-border);
    font-size: 14px;
    color: var(--pi-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Trạng thái rỗng --- */
.pi-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 auto;
    margin-top: 12px;
    min-height: 150px;
    border: 1px solid var(--pi-border);
    border-radius: 10px;
    background: var(--pi-surface-2);
    color: var(--pi-muted-2);
    font-size: 14px;
}

    .pi-empty i {
        font-size: 26px;
        opacity: .5;
    }

/* --- Lớp phủ khi đang cất giữ --- */
.pi-saving {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .6);
    cursor: progress;
}

.pi-saving-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: var(--pi-r);
    background: var(--pi-surface);
    box-shadow: 0 4px 16px rgba(38, 40, 44, .18);
    font-size: 14px;
    color: var(--pi-text);
}

.pi-saving-dot {
    width: 16px;
    height: 16px;
    border: 2px solid var(--pi-brand);
    border-right-color: transparent;
    border-radius: 50%;
    animation: pi-spin .7s linear infinite;
}

@keyframes pi-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================================
   FOOTER CHUNG CỦA DIALOG (.pi-df)
   ============================================================================ */

.pi-df {
    --pi-brand: var(--st-primary, #2563eb);
    --pi-brand-700: var(--st-primary-600, #1d4ed8);
    --pi-surface: #FFFFFF;
    --pi-surface-3: #F2F3F4;
    --pi-border-2: #C9CBD0;
    --pi-text: #26282C;
    --pi-muted: #66686E;
    --pi-r: 8px;

    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

.pi-df-hints {
    font-size: 13px;
    color: var(--pi-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    user-select: none;
}

.pi-kbd {
    font: 650 10.5px/1 ui-monospace, Consolas, monospace;
    border: 1px solid var(--pi-border-2);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 3px 5px;
    color: var(--pi-muted);
    background: var(--pi-surface);
}

.pi-df-act {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.pi-btn {
    height: 36px;
    padding: 0 15px;
    border-radius: var(--pi-r);
    border: 1px solid var(--pi-border-2);
    background: var(--pi-surface);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--pi-text);
}

    .pi-btn:hover:not(:disabled) {
        background: var(--pi-surface-3);
    }

    .pi-btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.pi-btn-ghost {
    background: transparent;
    color: var(--pi-muted);
}

.pi-btn-pri {
    background: var(--pi-brand);
    border-color: var(--pi-brand);
    color: #FFFFFF;
}

    .pi-btn-pri:hover:not(:disabled) {
        background: var(--pi-brand-700);
        border-color: var(--pi-brand-700);
        color: #FFFFFF;
    }

/* ===== Màn hẹp ===== */
@media (max-width: 860px) {
    .pi-f {
        grid-column: span 12 !important;
    }

    .pi-split {
        grid-template-columns: 1fr;
    }
}

/* ===== PiTreeSelect — ô chọn có menu nhiều tầng =============================================
   Dùng cho ô "Nhóm VTHH" của dialog Hàng hoá. Bộ da chuyển từ SmartListSelect bên PromotionModule
   (McRoot.razor.css + McRootForOrder.razor.css), đổi bảng màu tím/xanh của màn khuyến mãi sang
   bảng cam --pi-* của dialog danh mục.

   ĐỂ Ở ĐÂY, KHÔNG dùng CSS isolation: khung bung và các popup cấp đều position:fixed do
   wwwroot/js/mc-select.js neo toạ độ, và icon bên trong do component PiIcon dựng nên KHÔNG mang
   thuộc tính scope của PiTreeSelect — rule nhắm `svg` sẽ mất tác dụng nếu bọc isolation.

   Tên lớp bên trong (mc-sel-*, mc-cay-*) GIỮ NGUYÊN của bản gốc vì mc-select.js tra theo đúng
   những tên đó (.mc-cay-pop để xếp chuỗi popup, .mc-sel-item.hi để cuộn, .cay/.hep để chọn bề
   ngang). Đổi tên lớp ở đây là gãy phần neo toạ độ mà build vẫn xanh. */
.pi-treesel {
    position: relative;
    width: 100%;
}

/* --- Nút đóng: phải cao và bo giống ô nhập bên cạnh, nếu không hàng sẽ so le --- */
.pi-treesel .mc-sel-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid var(--pi-border-2);
    border-radius: 6px;
    background: var(--pi-surface);
    color: var(--pi-text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

    .pi-treesel .mc-sel-btn > span {
        flex: 1;
        min-width: 0;
        min-height: 1.5em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        /* Chưa chọn gì: span rỗng không có hộp dòng nào, nút tụt thấp hơn ô bên cạnh.
           min-height ở trên giữ đúng một dòng chữ nên cao bằng nhau dù có chữ hay không. */
        .pi-treesel .mc-sel-btn > span.ph {
            color: var(--pi-muted-2);
        }

    .pi-treesel .mc-sel-btn > svg {
        flex: none;
        color: var(--pi-muted-2);
        transition: transform .15s;
    }

    /* Nút bỏ chọn. Là <i> chứ không phải <button> (HTML cấm lồng button trong button) nên phải
       tự khai cursor + vùng bấm; 18x18 là mức nhỏ nhất còn bấm trúng bằng chuột. */
    .pi-treesel .mc-sel-xoa {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 18px;
        height: 18px;
        border-radius: 4px;
        color: var(--pi-muted-2);
        cursor: pointer;
    }

        .pi-treesel .mc-sel-xoa:hover {
            background: var(--pi-danger-50);
            color: var(--pi-danger);
        }

        .pi-treesel .mc-sel-xoa > svg {
            flex: none;
        }

    .pi-treesel .mc-sel-btn:hover:not(:disabled) {
        border-color: var(--pi-brand);
    }

    .pi-treesel .mc-sel-btn:disabled {
        background: var(--pi-surface-3);
        color: var(--pi-muted-2);
        cursor: not-allowed;
    }

.pi-treesel.on .mc-sel-btn {
    border-color: var(--pi-brand);
    box-shadow: 0 0 0 3px var(--pi-ring);
}

    .pi-treesel.on .mc-sel-btn > svg {
        transform: rotate(180deg);
    }

/* Phủ toàn màn để bấm ra ngoài là đóng; nằm dưới khung bung một bậc */
.pi-treesel .mc-sel-veil {
    position: fixed;
    inset: 0;
    z-index: 1400;
}

/* --- Khung bung. z-index phải cao hơn các dialog (Bootstrap), nếu không popup chui xuống
       dưới nền mờ và bấm không được. --- */
.pi-treesel .mc-sel-menu {
    outline: none;
    position: absolute;
    z-index: 1401;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    background: var(--pi-surface);
    border: 1px solid var(--pi-border);
    border-radius: var(--pi-r);
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
}

    .pi-treesel .mc-sel-menu::-webkit-scrollbar {
        width: 8px;
    }

    .pi-treesel .mc-sel-menu::-webkit-scrollbar-thumb {
        background: var(--pi-border-2);
        border-radius: 8px;
    }

    .pi-treesel .mc-sel-menu::-webkit-scrollbar-track {
        background: transparent;
    }

/* --- Ô gõ tìm trên đầu khung (chỉ hiện khi danh sách từ 7 dòng trở lên) --- */
.pi-treesel .mc-sel-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -4px -4px 4px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--pi-border);
    border-radius: var(--pi-r) var(--pi-r) 0 0;
    background: var(--pi-surface);
    color: var(--pi-muted-2);
    position: sticky;
    top: -4px;
    z-index: 1;
}

    .pi-treesel .mc-sel-search input {
        flex: 1;
        min-width: 0;
        padding: 3px 4px;
        border: 0;
        outline: none;
        background: transparent;
        font: inherit;
        font-size: 14px;
        color: var(--pi-text);
    }

    .pi-treesel .mc-sel-search > svg {
        flex: none;
        margin-left: 2px;
    }

/* --- Dòng trong danh sách phẳng (chế độ gõ tìm) --- */
.pi-treesel .mc-sel-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--pi-text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

    .pi-treesel .mc-sel-item > span {
        flex: 1;
        min-width: 0;
        min-height: 1.5em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pi-treesel .mc-sel-item:hover {
        background: var(--pi-surface-2);
    }

    .pi-treesel .mc-sel-item.on {
        background: var(--pi-brand-50);
        color: var(--pi-brand-700);
        font-weight: 600;
    }

    /* Dòng đang đánh dấu bằng phím lên/xuống */
    .pi-treesel .mc-sel-item.hi {
        background: var(--pi-surface-2);
        outline: 1px solid var(--pi-brand);
    }

.pi-treesel .mc-sel-empty {
    padding: 9px;
    color: var(--pi-muted-2);
    font-size: 14px;
}

/* Mã nhánh in mờ bên phải tên */
.pi-treesel .mc-sel-note {
    flex: none;
    color: var(--pi-muted-2);
    font-size: 13px;
    font-weight: 500;
}

/* --- Nét dẫn ├ └ của danh sách phẳng. Mỗi cấp một ô; ::before là vạch dọc, ::after là gạch
       ngang của chỗ rẽ giữa. Ý nghĩa từng lớp xem hàm Guides trong PiTreeSelect.razor. --- */
.pi-treesel .mc-sel-ind {
    position: relative;
    flex: none;
    width: 16px;
    align-self: stretch;
}

    .pi-treesel .mc-sel-ind + .mc-sel-ind {
        margin-left: -8px;
    }

    .pi-treesel .mc-sel-ind.line::before,
    .pi-treesel .mc-sel-ind.tee::before {
        content: "";
        position: absolute;
        left: 7px;
        top: 0;
        bottom: 0;
        border-left: 1px solid var(--pi-border-2);
    }

    .pi-treesel .mc-sel-ind.tee::after,
    .pi-treesel .mc-sel-ind.end::after {
        content: "";
        position: absolute;
        left: 7px;
        top: 50%;
        width: 7px;
        border-top: 1px solid var(--pi-border-2);
    }

    .pi-treesel .mc-sel-ind.end::before {
        content: "";
        position: absolute;
        left: 7px;
        top: 0;
        height: 50%;
        border-left: 1px solid var(--pi-border-2);
    }

/* Gốc CÓ CON thì tách khỏi nhánh trên bằng một vạch — gốc không con là lựa chọn bình thường */
.pi-treesel .mc-sel-item.lv0.cha {
    margin-top: 4px;
    border-top: 1px solid var(--pi-border);
    font-weight: 600;
}

    .pi-treesel .mc-sel-item.lv0.cha:first-of-type {
        margin-top: 0;
        border-top: 0;
    }

/* ===== Menu nhiều tầng: mỗi cấp một popup RỜI =============================================
   Bề ngang chốt 188px — PHẢI khớp hằng RONG_CAY trong wwwroot/js/mc-select.js, vì JS tính toạ
   độ cái sau theo mép phải cái trước. Đổi một bên mà quên bên kia là các cột chồng lên nhau. */
.pi-treesel .mc-cay-pop {
    position: fixed;
    z-index: 1402;
    width: 188px;
    overflow-y: auto;
    padding: 4px;
    background: var(--pi-surface);
    border: 1px solid var(--pi-border);
    border-radius: var(--pi-r);
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
}

.pi-treesel .mc-cay-b {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--pi-text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

    /* Rê chuột và "đang mở cấp con" dùng CHUNG một sắc: cột đang mở phải nhìn ra được là cột
       nào sinh ra chuỗi popup bên phải, nếu không mở sâu ba cấp là lạc. */
    .pi-treesel .mc-cay-b:hover,
    .pi-treesel .mc-cay-b.mo {
        background: var(--pi-brand-50);
        color: var(--pi-brand-700);
    }

    .pi-treesel .mc-cay-b.on {
        background: var(--pi-brand);
        color: #FFFFFF;
    }

        .pi-treesel .mc-cay-b.on .mc-sel-note {
            color: #FFFFFF;
            opacity: .85;
        }

.pi-treesel .mc-cay-t {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mũi tên quay phải để chỉ ra chỗ cột con sẽ hiện */
.pi-treesel .mc-cay-mui {
    display: inline-flex;
    flex: none;
    color: var(--pi-muted-2);
    transform: rotate(-90deg);
}

.pi-treesel .mc-cay-b:hover .mc-cay-mui,
.pi-treesel .mc-cay-b.mo .mc-cay-mui {
    color: var(--pi-brand-700);
}

.pi-treesel .mc-cay-b.on .mc-cay-mui {
    color: #FFFFFF;
}

/* Ảnh sản phẩm: một khung 3 × 4 + nút chọn / đổi ảnh */
.pi-photo {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.pi-photo-frame {
    position: relative;
    flex: none;
    width: 150px;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--pi-line, #d5dbe5);
    border-radius: 10px;
    overflow: hidden;
    background: #f1f4f9;
    cursor: zoom-in;
}

.pi-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pi-photo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #8a94a6;
    font-size: 14px;
    cursor: pointer;
}

.pi-photo-empty i {
    font-size: 26px;
}

.pi-photo-empty:hover {
    background: #e9eef6;
    color: var(--pi-brand);
}

.pi-photo-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.pi-photo-side .pi-mini {
    cursor: pointer;
}