/* ============================================================================
   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 (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 Syncfusion 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.

   Đang dùng bởi:
   - Modules/CatalogModule/Catalogs/Products/ProductView/Component/ProductCreateAndUpdateV2.razor
   - Modules/CatalogModule/Catalogs/Object/Component/ObjectCreateAndUpdate.razor
   - Modules/CatalogModule/Component/SmartDialogFooter.razor  (footer chung)

   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: #F36717;
    --pi-brand-700: #D4530C;
    --pi-brand-50: #FFF3EA;
    --pi-accent: #ED1C24;
    --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(243, 103, 23, .22);
    --pi-r: 8px;

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

/* 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: 12px;
    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: 12px;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: var(--pi-muted);
    }

.pi-sect-hint {
    margin-left: auto;
    font-size: 11.5px;
    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: 12px;
        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: 13px;
    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: 12.5px;
    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: 12.5px;
    font-weight: 650;
    color: var(--pi-muted);
}

.pi-sw .e-switch-wrapper {
    height: 19px;
    width: 34px;
    flex: none;
}

    .pi-sw .e-switch-wrapper .e-switch-inner {
        background-color: var(--pi-border-2);
        border-color: var(--pi-border-2);
    }

    .pi-sw .e-switch-wrapper .e-switch-inner.e-switch-active,
    .pi-sw .e-switch-wrapper .e-switch-on {
        background-color: var(--pi-brand);
        border-color: var(--pi-brand);
    }

    .pi-sw .e-switch-wrapper .e-switch-handle.e-switch-active {
        background-color: #FFFFFF;
    }

    .pi-sw .e-switch-wrapper:focus .e-switch-inner {
        box-shadow: 0 0 0 3px var(--pi-ring);
    }

/* Ô tick thường (SfCheckBox) trong lưới trường */
.pi-f .e-checkbox-wrapper .e-frame.e-check,
.pi-sws .e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--pi-brand);
    border-color: var(--pi-brand);
}

/* ===== 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: 12.5px;
    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: 11.5px;
    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: 12.5px;
    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-tck .e-checkbox-wrapper .e-label {
        font-size: 12.5px;
        font-weight: 650;
        color: inherit;
    }

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

/* ===== Chuẩn hoá ô nhập Syncfusion cho khớp nhãn-trên ===== */
.pi-form .pi-f .e-input-group:not(.e-success):not(.e-warning):not(.e-error),
.pi-form .pi-f .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
    height: 32px;
    min-height: 32px;
    border-radius: var(--pi-r);
    border: 1px solid var(--pi-border-2) !important;
    background: var(--pi-surface);
}

    .pi-form .pi-f .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
    .pi-form .pi-f .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
        border-color: var(--pi-brand) !important;
        box-shadow: 0 0 0 3px var(--pi-ring) !important;
    }

    .pi-form .pi-f .e-input-group input.e-input {
        height: 30px;
        padding: 0 10px;
        font-size: 13px;
    }

    .pi-form .pi-f .e-input-group .e-ddl-icon,
    .pi-form .pi-f .e-input-group .e-clear-icon,
    .pi-form .pi-f .e-input-group .e-input-group-icon {
        height: 30px;
    }

    .pi-form .pi-f .e-input-group.e-disabled,
    .pi-form .pi-f .e-input-group input.e-input:disabled {
        background: var(--pi-surface-3) !important;
        color: var(--pi-muted);
    }

/* SfTextBox sinh input trực tiếp, không có wrapper .e-input-group như dropdown/numeric. */
.pi-form .pi-f input.e-input.e-textbox {
    width: 100%;
    height: 32px;
    min-height: 32px;
    box-sizing: border-box;
    padding: 0 10px;
    text-indent: 0;
    border: 1px solid var(--pi-border-2) !important;
    border-radius: var(--pi-r);
    background: var(--pi-surface);
    font-size: 13px;
}

    .pi-form .pi-f input.e-input.e-textbox:focus {
        border-color: var(--pi-brand) !important;
        box-shadow: 0 0 0 3px var(--pi-ring) !important;
    }

    .pi-form .pi-f input.e-input.e-textbox:disabled,
    .pi-form .pi-f input.e-input.e-textbox[readonly] {
        background: var(--pi-surface-3) !important;
        color: var(--pi-muted);
    }

/* SfTextArea trong lưới trường */
.pi-form .pi-f textarea.e-input {
    min-height: 72px;
    padding: 8px 10px;
    border-radius: var(--pi-r);
    border: 1px solid var(--pi-border-2) !important;
    background: var(--pi-surface);
    font-size: 13px;
    line-height: 1.55;
    resize: vertical;
}

    .pi-form .pi-f textarea.e-input:focus {
        border-color: var(--pi-brand) !important;
        box-shadow: 0 0 0 3px var(--pi-ring) !important;
    }

/* Ô số căn phải */
.pi-f .pi-num input.e-input {
    text-align: right;
}

/* ============================================================================
   TAB

   `css/smart-custom.css` dựng tab kiểu "Chrome" cho MỌI `.e-tab`: nền xám #f1f3f4, mỗi
   `.e-toolbar-item` là một pill bo góc 8px có `margin:4px` + `padding:8px 16px`, item đang chọn
   có nền trắng + viền 1px + `font-weight:bold`, và `.e-tab-content` có viền + `padding:16px`.
   Mockup thì tab phẳng: chữ xám, item đang chọn đổi màu đỏ + gạch chân 2px (`.e-indicator`).

   Nên khối dưới đây phải DẬP LẠI TỪNG THUỘC TÍNH kia — chỉ đổi màu chữ là không đủ, pill vẫn còn.
   Hai điều kiện bắt buộc để nó ăn:
   1. File này phải được nạp SAU `smart-custom.css` trong `index.html` (đã đặt đúng chỗ).
   2. Selector dùng `>` để KHÔNG rớt xuống `SfTab` lồng bên trong (tab con nằm trong card).
   ============================================================================ */

/* ===== Tab cấp 1 của dialog ===== */
.pi-tabs-top.e-tab {
    border: 0;
}

.pi-tabs-top.e-tab > .e-tab-header {
    box-sizing: border-box; /* mặc định là content-box -> 40px + 2px viền = 42px */
    /* CANH GIỮA DỌC — đừng đổi về `display: block`.
       `.e-toolbar-items` của Syncfusion cao cố định (đo được 32-34px) và dính mép TRÊN, nên ép
       header cao 40px là dư ~9px ở đáy: chữ nhìn như bị đẩy lên. Đã thử kéo cả chuỗi bằng
       `height:100%` — không ăn, `.e-toolbar-items` vẫn ra 34px chứ không phải 38px. Canh giữa
       thẳng ở đây thì đúng bất kể chiều cao nội tại của Syncfusion là bao nhiêu.
       `.e-indicator` và `.e-hor-nav` đều `position:absolute` nên flex không đụng tới chúng. */
    display: flex;
    align-items: center;
    background: var(--pi-surface-2);
    border: 1px solid var(--pi-border);
    border-radius: 10px 10px 0 0;
    min-height: 40px;
    height: 40px;
    padding: 0 6px;
}

    /* Gỡ pill của smart-custom.css */
    .pi-tabs-top.e-tab > .e-tab-header .e-toolbar-item,
    .pi-tabs-top.e-tab > .e-tab-header .e-toolbar-item.e-active,
    .pi-tabs-top.e-tab > .e-tab-header .e-toolbar-item:hover {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-weight: inherit;
    }

    /* Không ép chiều cao cứng cho wrap: wrap cao hơn item thì nó THÒ ngược lên trên
       (đo được -3px). Để cao tự nhiên, việc canh giữa do header lo. */
    .pi-tabs-top.e-tab > .e-tab-header .e-toolbar-item .e-tab-wrap {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        height: auto;
        padding: 0 13px;
        border-radius: 0;
        background: transparent;
    }

    .pi-tabs-top.e-tab > .e-tab-header .e-toolbar-item .e-tab-text {
        font-size: 12.5px;
        font-weight: 700;
        color: var(--pi-muted);
        text-transform: none;
    }

    .pi-tabs-top.e-tab > .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text {
        color: var(--pi-text);
    }

    /* smart-custom.css hạ font-weight của tab đang chọn xuống 500 (`.e-active.e-ileft .e-tab-text`)
       — phải ghi lại 700 ở đây, nếu không tab đang chọn mảnh hơn tab thường. */
    .pi-tabs-top.e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-text,
    .pi-tabs-top.e-tab > .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text,
    .pi-tabs-top.e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-text,
    .pi-tabs-top.e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:active .e-tab-text {
        color: var(--pi-accent);
        font-weight: 700;
    }

    .pi-tabs-top.e-tab > .e-tab-header .e-indicator {
        background: var(--pi-accent);
        height: 2px;
    }

.pi-tabs-top.e-tab > .e-content {
    background: var(--pi-surface);
    border: 1px solid var(--pi-border);
    border-top: 0;
    border-radius: 0 0 10px 10px;
}

    .pi-tabs-top.e-tab > .e-content > .e-item {
        padding: 13px;
        box-sizing: border-box;
        overflow: auto;
    }

/* ===== Tab con (bên trong một card) ===== */
.pi-sect-tabs > .e-tab {
    border: 0;
}

.pi-sect-tabs > .e-tab > .e-tab-header {
    box-sizing: border-box;
    /* Canh giữa dọc — xem giải thích ở khối tab cấp 1 bên trên. */
    display: flex;
    align-items: center;
    background: var(--pi-surface-2);
    border: 0;
    border-bottom: 1px solid var(--pi-border);
    border-radius: 0;
    min-height: 38px;
    height: 38px;
    padding: 0 6px;
}

    /* Gỡ pill của smart-custom.css */
    .pi-sect-tabs > .e-tab > .e-tab-header .e-toolbar-item,
    .pi-sect-tabs > .e-tab > .e-tab-header .e-toolbar-item.e-active,
    .pi-sect-tabs > .e-tab > .e-tab-header .e-toolbar-item:hover {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-weight: inherit;
    }

    .pi-sect-tabs > .e-tab > .e-tab-header .e-toolbar-item .e-tab-wrap {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        height: auto;
        padding: 0 13px;
        border-radius: 0;
        background: transparent;
    }

    .pi-sect-tabs > .e-tab > .e-tab-header .e-toolbar-item .e-tab-text {
        font-size: 12.5px;
        font-weight: 700;
        color: var(--pi-muted);
        text-transform: none;
    }

    .pi-sect-tabs > .e-tab > .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text {
        color: var(--pi-text);
    }

    .pi-sect-tabs > .e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-text,
    .pi-sect-tabs > .e-tab > .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text,
    .pi-sect-tabs > .e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-text,
    .pi-sect-tabs > .e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:active .e-tab-text {
        color: var(--pi-accent);
        font-weight: 700;
    }

    .pi-sect-tabs > .e-tab > .e-tab-header .e-indicator {
        background: var(--pi-accent);
        height: 2px;
    }

.pi-sect-tabs > .e-tab > .e-content {
    background: var(--pi-surface);
    border: 0;
}

/* `.e-tab-content` là phần tử của bản Syncfusion cũ — smart-custom.css vẫn gắn viền + padding 16px
   cho nó. Reset chung cho cả hai cấp tab, nếu DOM không có phần tử này thì quy tắc vô hại. */
.pi-tabs-top.e-tab .e-tab-content,
.pi-sect-tabs > .e-tab .e-tab-content {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    height: auto;
}

/* ===== Lưới con (SfGrid) trong dialog ===== */
.pi-form .pi-eg.e-grid {
    border: none;
}

.pi-form .pi-eg .e-headercell {
    background: var(--pi-surface-3);
    padding: 6px 8px;
}

.pi-form .pi-eg .e-headertext {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pi-muted);
}

.pi-form .pi-eg .e-rowcell {
    font-size: 12.5px;
    padding: 4px 8px;
}

.pi-form .pi-eg .e-emptyrecord {
    padding: 24px;
    color: var(--pi-muted-2);
    font-size: 12.5px;
    text-align: center;
}

/* Thanh công cụ mặc định của SfGrid (Add/Delete/Cancel) — cho hợp bộ da */
.pi-form .pi-eg .e-toolbar {
    border: 0;
    border-bottom: 1px solid var(--pi-border);
    background: var(--pi-surface);
}

    .pi-form .pi-eg .e-toolbar .e-tbar-btn {
        background: transparent;
        border-radius: var(--pi-r);
    }

        .pi-form .pi-eg .e-toolbar .e-tbar-btn:hover {
            background: var(--pi-brand-50);
            color: var(--pi-brand);
        }

    .pi-form .pi-eg .e-toolbar .e-tbar-btn-text {
        font-size: 12.5px;
        font-weight: 650;
        color: var(--pi-muted);
    }

/* Ô nhập khi sửa trực tiếp trên lưới: bỏ khung kép của Syncfusion */
.pi-form .pi-eg .e-row .e-input-group {
    border: none;
    border-radius: 0;
}

/* ===== 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: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--pi-muted);
}

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

.pi-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--pi-brand);
    color: #FFFFFF;
    font-size: 11px;
    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;
}

/* --- Ô mô tả --- */
.pi-card-body .pi-textarea textarea.e-input {
    min-height: 200px;
    resize: vertical;
    line-height: 1.55;
    border-radius: var(--pi-r);
    font-size: 13px;
}

/* --- Vùng tải tập tin --- */
.pi-card-body .pi-uploader.e-upload {
    border: 2px dashed var(--pi-border-2);
    border-radius: 10px;
    background: var(--pi-surface-2);
    transition: border-color .15s, background .15s;
}

    .pi-card-body .pi-uploader.e-upload:hover {
        border-color: var(--pi-brand);
        background: var(--pi-brand-50);
    }

    .pi-card-body .pi-uploader.e-upload .e-file-drop {
        padding: 4px 12px;
        color: var(--pi-muted);
        font-size: 12.5px;
    }

    .pi-card-body .pi-uploader.e-upload .e-upload-files {
        display: none; /* danh sách file mặc định — đã có gallery bên dưới */
    }

    /* Nút "Duyệt..." của Syncfusion Uploader — màu thương hiệu */
    .pi-card-body .pi-uploader.e-upload .e-file-select-wrap .e-css.e-btn,
    .pi-card-body .pi-uploader.e-upload .e-file-select-wrap button.e-btn {
        background-color: var(--pi-brand);
        border-color: var(--pi-brand);
        color: #FFFFFF;
        font-weight: 600;
        box-shadow: none;
    }

        .pi-card-body .pi-uploader.e-upload .e-file-select-wrap .e-css.e-btn:hover,
        .pi-card-body .pi-uploader.e-upload .e-file-select-wrap button.e-btn:hover,
        .pi-card-body .pi-uploader.e-upload .e-file-select-wrap .e-css.e-btn:focus,
        .pi-card-body .pi-uploader.e-upload .e-file-select-wrap button.e-btn:focus {
            background-color: var(--pi-brand-700);
            border-color: var(--pi-brand-700);
            color: #FFFFFF;
            box-shadow: none;
        }

.pi-hint {
    margin-top: 6px;
    font-size: 11px;
    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: 11px;
    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: 10px;
    font-weight: 700;
    line-height: 16px;
}

.pi-thumb-name {
    padding: 5px 7px;
    border-top: 1px solid var(--pi-border);
    font-size: 10.5px;
    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: 12.5px;
}

    .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: 13px;
    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 — Modules/CatalogModule/Component/SmartDialogFooter.razor
   ============================================================================ */

.pi-df {
    --pi-brand: #F36717;
    --pi-brand-700: #D4530C;
    --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: 12px;
    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: 13px;
    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;
    }
}