@import '_content/ZXingBlazor/ZXingBlazor.bundle.scp.css';

/* /Components/Dialog/DislogShowimage.razor.rz.scp.css */
.premium-dialog .mud-dialog-title[b-lp6you57il] {
    padding: 16px 20px;
    background: linear-gradient(90deg, #1B5E20, #2E7D32 60%, #66BB6A);
    color: #fff;
}

.title-wrap[b-lp6you57il] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title-left[b-lp6you57il] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.title-right[b-lp6you57il] {
    display: flex;
    align-items: center;
}

.flex[b-lp6you57il] {
    display: flex;
    gap: 16px;
}

.left-pane[b-lp6you57il] {
    width: 24%;
    padding: 16px;
}

.right-pane[b-lp6you57il] {
    width: 76%;
    padding: 16px;
    border-left: 1px solid rgba(0,0,0,.06);
}

.sticky-pane[b-lp6you57il] {
    position: sticky;
    top: 0;
}

.shadow-soft[b-lp6you57il] {
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.upload-drop[b-lp6you57il] {
    border: 2px dashed rgba(0,0,0,.12);
    border-radius: 16px;
    padding: 28px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    transition: .2s ease;
}

    .upload-drop:hover[b-lp6you57il] {
        background: rgba(102,187,106,.08);
    }

.section-head[b-lp6you57il] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

    .section-head .grow[b-lp6you57il] {
        flex: 1;
    }

.gallery-scroll[b-lp6you57il] {
    overflow: auto;
    max-height: 60vh;
    padding-right: 6px;
}

.img-card[b-lp6you57il] {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: transform .15s ease, box-shadow .2s ease;
}

    .img-card:hover[b-lp6you57il] {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
    }

.img-wrap[b-lp6you57il] {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f5f5f5;
}

    .img-wrap img[b-lp6you57il] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.img-meta[b-lp6you57il] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #fff;
}

.truncate[b-lp6you57il] {
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.img-actions[b-lp6you57il] {
    position: absolute;
    right: 8px;
    top: 8px;
    background: rgba(255,255,255,.85);
    border-radius: 12px;
    padding: 2px;
}

.actions-bar[b-lp6you57il] {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.06);
}

/* Responsive */
@media (max-width: 1200px) {
    .left-pane[b-lp6you57il] {
        width: 30%;
    }

    .right-pane[b-lp6you57il] {
        width: 70%;
    }
}

@media (max-width: 900px) {
    .flex[b-lp6you57il] {
        flex-direction: column;
    }

    .left-pane[b-lp6you57il], .right-pane[b-lp6you57il] {
        width: 100%;
    }

    .sticky-pane[b-lp6you57il] {
        position: static;
    }
}
/* /Components/IPtv/menubanner.razor.rz.scp.css */
:root[b-fjwg4rrqtv] {
    --mb-green: #166534;
    --mb-green-2: #22c55e;
    --mb-bg: #f5f8f5;
    --mb-muted: #64748b;
}

*[b-fjwg4rrqtv] {
    font-family: 'Kanit', 'Prompt', system-ui, sans-serif;
}

.mb-wrap[b-fjwg4rrqtv] {
    max-width: 1180px;
    padding-top: 24px;
    padding-bottom: 64px;
}

.mb-hero[b-fjwg4rrqtv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(255,255,255,.20), transparent 28%),
        linear-gradient(135deg, #14532d, #16a34a);
    box-shadow: 0 18px 45px rgba(20, 83, 45, .22);
}

.mb-hero h1[b-fjwg4rrqtv] {
    margin: 4px 0;
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 800;
}

.mb-hero p[b-fjwg4rrqtv] {
    margin: 0;
    opacity: .85;
}

.mb-eyebrow[b-fjwg4rrqtv] {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    opacity: .72;
}

.mb-hero-count[b-fjwg4rrqtv] {
    min-width: 130px;
    padding: 16px 22px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
}

.mb-hero-count strong[b-fjwg4rrqtv],
.mb-hero-count span[b-fjwg4rrqtv] {
    display: block;
}

.mb-hero-count strong[b-fjwg4rrqtv] {
    font-size: 36px;
    line-height: 1;
}

.mb-hero-count span[b-fjwg4rrqtv] {
    margin-top: 5px;
    font-size: 13px;
}

.mb-upload-card[b-fjwg4rrqtv] {
    margin-top: 22px;
    padding: 24px;
    border: 1px solid #dcfce7;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .07);
}

.mb-section-heading[b-fjwg4rrqtv],
.mb-gallery-header[b-fjwg4rrqtv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mb-section-heading[b-fjwg4rrqtv] {
    margin-bottom: 18px;
}

.mb-section-title[b-fjwg4rrqtv] {
    color: #14532d;
    font-weight: 800;
}

.mb-muted[b-fjwg4rrqtv],
.mb-gallery-header span[b-fjwg4rrqtv] {
    color: var(--mb-muted);
}

.mb-file-picker[b-fjwg4rrqtv] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 70px;
    padding: 12px 16px;
    cursor: pointer;
    overflow: hidden;
    border: 1.5px dashed #86efac;
    border-radius: 14px;
    color: #166534;
    background: #f0fdf4;
}

.mb-file-picker:hover[b-fjwg4rrqtv] {
    border-color: #16a34a;
    background: #dcfce7;
}

.mb-file-picker span[b-fjwg4rrqtv],
.mb-file-picker strong[b-fjwg4rrqtv],
.mb-file-picker small[b-fjwg4rrqtv] {
    display: block;
}

.mb-file-picker small[b-fjwg4rrqtv] {
    margin-top: 2px;
    color: #64748b;
}

.mb-file-picker input[b-fjwg4rrqtv] {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.mb-selected-preview[b-fjwg4rrqtv] {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid #dbe4dc;
    border-radius: 16px;
    background: #f8fafc;
}

.mb-selected-preview img[b-fjwg4rrqtv] {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.mb-gallery-header[b-fjwg4rrqtv] {
    margin: 30px 0 16px;
}

.mb-gallery-header h2[b-fjwg4rrqtv] {
    margin: 0;
    color: #173b1a;
    font-weight: 800;
}

.mb-gallery[b-fjwg4rrqtv] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.mb-banner-card[b-fjwg4rrqtv] {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .07);
    transition: transform .18s ease, box-shadow .18s ease;
}

.mb-banner-card:hover[b-fjwg4rrqtv] {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .12);
}

.mb-banner-image[b-fjwg4rrqtv] {
    position: relative;
    height: 140px;
    overflow: hidden;
    background: #e2e8f0;
}

.mb-banner-image img[b-fjwg4rrqtv] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mb-order[b-fjwg4rrqtv] {
    position: absolute;
    top: 12px;
    left: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    background: rgba(15, 23, 42, .78);
    backdrop-filter: blur(5px);
}

.mb-banner-info[b-fjwg4rrqtv] {
    padding: 13px 15px 6px;
}

.mb-banner-name[b-fjwg4rrqtv] {
    overflow: hidden;
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mb-banner-meta[b-fjwg4rrqtv] {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

.mb-banner-actions[b-fjwg4rrqtv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 15px 13px;
}

.mb-loading[b-fjwg4rrqtv],
.mb-empty[b-fjwg4rrqtv] {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 240px;
    text-align: center;
    color: #64748b;
}

.mb-empty[b-fjwg4rrqtv] {
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    background: #fff;
}

.mb-empty h3[b-fjwg4rrqtv],
.mb-empty p[b-fjwg4rrqtv] {
    margin: 0;
}

@media (max-width: 980px) {
    .mb-gallery[b-fjwg4rrqtv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mb-hero[b-fjwg4rrqtv] {
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .mb-wrap[b-fjwg4rrqtv] {
        padding-top: 12px;
    }

    .mb-hero[b-fjwg4rrqtv],
    .mb-section-heading[b-fjwg4rrqtv],
    .mb-gallery-header[b-fjwg4rrqtv] {
        align-items: stretch;
        flex-direction: column;
    }

    .mb-hero-count[b-fjwg4rrqtv] {
        min-width: 0;
    }

    .mb-upload-card[b-fjwg4rrqtv] {
        padding: 16px;
    }

    .mb-gallery[b-fjwg4rrqtv] {
        grid-template-columns: 1fr;
    }

    .mb-banner-image[b-fjwg4rrqtv] {
        height: 170px;
    }

    .mb-selected-preview img[b-fjwg4rrqtv] {
        height: 180px;
    }
}

body[b-fjwg4rrqtv] {
    background: var(--mb-bg);
}
/* /Components/Pages/Admin/ProductAdd.razor.rz.scp.css */
body[b-w9kka96ja8] {
}
/* /Components/Pages/Admin/ProductEdit.razor.rz.scp.css */
.masonry-grid[b-0c9cyvz4on] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 6fr)); /* กำหนดจำนวนคอลัมน์ */
    grid-auto-rows: minmax(100px, auto); /* กำหนดความสูงของแถว */
    gap: 10px; /* ช่องว่างระหว่างภาพ */
}

.masonry-item img[b-0c9cyvz4on] {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block; /* ป้องกันช่องว่างใต้ภาพ */
}


.gallery[b-0c9cyvz4on] {
    display: block;
}

.gallery-item[b-0c9cyvz4on] {
    width: 200px;
    margin: 5px;
    border-radius: 8px;
    object-fit: cover;
}

.hover-zoom[b-0c9cyvz4on] {
    transition: transform 0.3s ease-in-out;
}

    .hover-zoom:hover[b-0c9cyvz4on] {
        transform: scale(1.3);
    }

.scroll-container[b-0c9cyvz4on] {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 10px;
    padding: 10px;
    border: 1px solid #ccc;
}

.item[b-0c9cyvz4on] {
    min-width: 100px;
    padding: 10px;
    background-color: lightblue;
    text-align: center;
    border-radius: 5px;
}


.boxZoom[b-0c9cyvz4on] {
    width: 100px;
    height: 100px;
    cursor: pointer;
    background-color: blue;
    transition: transform 0.3s ease;
    transform-origin: top left; /* กำหนดตำแหน่งขยายจากมุมบนซ้าย */
}

    .boxZoom:hover[b-0c9cyvz4on] {
        transform: scale(1.5); /* ขยายขนาด 1.5 เท่า */
    }
.FontFile[b-0c9cyvz4on] {
    font-family: "Kanit", sans-serif;
    font-weight: 200;
    font-style: normal
}
/* /Components/Pages/Admin/ProductEdit2.razor.rz.scp.css */
.masonry-grid[b-dp8fnjpgcj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 6fr)); /* กำหนดจำนวนคอลัมน์ */
    grid-auto-rows: minmax(100px, auto); /* กำหนดความสูงของแถว */
    gap: 10px; /* ช่องว่างระหว่างภาพ */
}

.masonry-item img[b-dp8fnjpgcj] {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block; /* ป้องกันช่องว่างใต้ภาพ */
}


.gallery[b-dp8fnjpgcj] {
    display: block;
}

.gallery-item[b-dp8fnjpgcj] {
    width: 200px;
    margin: 5px;
    border-radius: 8px;
    object-fit: cover;
}

.hover-zoom[b-dp8fnjpgcj] {
    transition: transform 0.3s ease-in-out;
}

    .hover-zoom:hover[b-dp8fnjpgcj] {
        transform: scale(1.3);
    }

.scroll-container[b-dp8fnjpgcj] {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 10px;
    padding: 10px;
    border: 1px solid #ccc;
}

.item[b-dp8fnjpgcj] {
    min-width: 100px;
    padding: 10px;
    background-color: lightblue;
    text-align: center;
    border-radius: 5px;
}


.boxZoom[b-dp8fnjpgcj] {
    width: 100px;
    height: 100px;
    cursor: pointer;
    background-color: blue;
    transition: transform 0.3s ease;
    transform-origin: top left; /* กำหนดตำแหน่งขยายจากมุมบนซ้าย */
}

    .boxZoom:hover[b-dp8fnjpgcj] {
        transform: scale(1.5); /* ขยายขนาด 1.5 เท่า */
    }
.FontFile[b-dp8fnjpgcj] {
    font-family: "Kanit", sans-serif;
    font-weight: 200;
    font-style: normal
}
/* /Components/Pages/Admin/ProductList.razor.rz.scp.css */
.masonry-grid[b-lq010wpm5h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 6fr)); /* กำหนดจำนวนคอลัมน์ */
    grid-auto-rows: minmax(100px, auto); /* กำหนดความสูงของแถว */
    gap: 10px; /* ช่องว่างระหว่างภาพ */
}

.masonry-item img[b-lq010wpm5h] {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block; /* ป้องกันช่องว่างใต้ภาพ */
}


.gallery[b-lq010wpm5h] {
    display: block;
}

.gallery-item[b-lq010wpm5h] {
    width: 200px;
    margin: 5px;
    border-radius: 8px;
    object-fit: cover;
}

.hover-zoom[b-lq010wpm5h] {
    transition: transform 0.3s ease-in-out;
}

    .hover-zoom:hover[b-lq010wpm5h] {
        transform: scale(1.3);
    }

.scroll-container[b-lq010wpm5h] {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 10px;
    padding: 10px;
    border: 1px solid #ccc;
}

.item[b-lq010wpm5h] {
    min-width: 100px;
    padding: 10px;
    background-color: lightblue;
    text-align: center;
    border-radius: 5px;
}


.boxZoom[b-lq010wpm5h] {
    width: 100px;
    height: 100px;
    cursor: pointer;
    background-color: blue;
    transition: transform 0.3s ease;
    transform-origin: top left; /* กำหนดตำแหน่งขยายจากมุมบนซ้าย */
}

    .boxZoom:hover[b-lq010wpm5h] {
        transform: scale(1.5); /* ขยายขนาด 1.5 เท่า */
    }