/* /Components/DeliveryCustomPrintFrom/CreateDeliveryCustomForm.razor.rz.scp.css */
.test[b-xpuzzq0o3l] {
    cursor: pointer;
    user-select: none;
}
/* /Components/DeliveryCustomPrintFrom/EditorMainCustomForm.razor.rz.scp.css */
.MainEditorBorder[b-e2j8pyron0] {
    padding: 15px;
}

.MainEditor[b-e2j8pyron0] {
    padding: 15px;
    border-radius: 5px;
    width: 100%;
    background: white;
    min-width: 1500px;
}

.HeadZone[b-e2j8pyron0] {
    display: flex;
}

.SettingPageZone[b-e2j8pyron0] {
    background: #f3f2f1;
    border-radius: 5px;
    width: 250px;
    padding: 15px;
    border: 2px solid #a0a0a0;
    box-shadow: 0px 5px 5px #e6e7e7;
    user-select: none;
}

    .SettingPageZone .Title[b-e2j8pyron0]{
        text-align: center;
        font-size: 20px;
        margin-top: 5px;
    }

    .SettingPageZone .SubTitle[b-e2j8pyron0]{
        margin-top: 5px;;
        text-align: center;
        font-size: 14px;
    }

    .SettingPageZone .Input[b-e2j8pyron0]{
        width: 100%;
        outline: none;
        border: none;
        border-radius: 5px;
        border: 1px solid #a0a0a0;
        text-align: center;
    }

.ToolsZone[b-e2j8pyron0] {
    flex: 1;
    background: white;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
}

.CurrentComponent[b-e2j8pyron0] {
    box-shadow: 0px 5px 5px #e6e7e7;
    background: #d0d0d0;
    width: 100%;
    height: 35px;
    border-radius: 5px;
    border: 2px solid #a0a0a0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.ToolsMain[b-e2j8pyron0] {
    flex: 1;
    box-shadow: 0px 5px 5px #e6e7e7;
    display: flex;
    border: 2px solid #a0a0a0;
    border-radius: 5px;
    user-select: none;
}

.ToolFont[b-e2j8pyron0]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px 15px;
    border-right: 1px solid black;
}

.ToolsPerSize[b-e2j8pyron0] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    user-select: none;
    margin-right: 2.5px;
}

    .ToolsPerSize img[b-e2j8pyron0]{
        width: 20px;
        height: 20px;
        vertical-align: top;
    }

    .ToolsPerSize input[b-e2j8pyron0]{
        padding: 0px;
        width: 20px;
        height: 20px;
        border: none;
        outline: none;
    }

.ToolSizeBase[b-e2j8pyron0] {
    padding: 0px 15px;
    border-right: 1px solid black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 14px;
}

    .ToolSizeBase input[b-e2j8pyron0]{
        width: 50px;
        margin-bottom: 5px;
    }

.ToolSizeImageBase[b-e2j8pyron0] {
    padding: 0px 30px;
    border-right: 1px solid black;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
}

    .ToolSizeImageBase .ForHover[b-e2j8pyron0] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: 0.2s;
    }

    .ToolSizeImageBase .ForHover:hover[b-e2j8pyron0] {
        transform: scale(1.1);
    }

.ToolSizeImage[b-e2j8pyron0] {
    width: 30px;
    height: 30px;
}

.ฺBodyZone1[b-e2j8pyron0] {
    background: #f3f2f1;
    border: 2px solid #a0a0a0;
    min-width: 250px;
    max-width: 250px;
    width: 250px;
    border-radius: 5px;
    padding: 0px 10px;
}

.BodyZone2[b-e2j8pyron0] {
    position: relative;
    background: #f3f2f1;
    width: 100%;
    min-height: 680px;
    border: 2px solid #a0a0a0;
    border-radius: 5px;
    display: grid;
    place-items: center;
}

.MenuMain[b-e2j8pyron0] {
    margin-top: 10px;
    background: #1d2327;
    color: white;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
}

.MenuList[b-e2j8pyron0] {
    margin-top: 10px;
}

.MenuPer[b-e2j8pyron0] {
    background: #d0d0d0;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: 0.2s;
}

    .MenuPer:hover[b-e2j8pyron0] {
        background: #b8b6b6;
    }

.ZoomMain[b-e2j8pyron0] {
    position: absolute;
    top: 15px;
    background: white;
    padding: 5px 20px;
    text-align: center;
    border-radius: 50px;
    border: 1px solid black;
    z-index: 2;
}

    .ZoomMain .InputRage[b-e2j8pyron0]{
        width: 300px;
        height: 5px;
        -webkit-appearance: none;
        background: #d3d3d3;
    }

    .ZoomMain .InputRage:focus[b-e2j8pyron0]{
        border: none!important;
        outline: none!important;
        box-shadow: none!important;
    }

    .ZoomMain .InputRage[b-e2j8pyron0]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 15px;
        height: 15px;
        background:white;
        box-shadow: 0px 0px 3px black;
        border-radius: 50%;
        cursor: pointer;
    }
      
    .ZoomMain .InputRage[b-e2j8pyron0]::-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: #04AA6D;
        cursor: pointer;
    }

    .UploadFontMainEditor[b-e2j8pyron0] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        padding: 30px;
        z-index: 100000;
        display: grid;
        place-items: center;
    }
    
    .UploadFontDiv[b-e2j8pyron0] {
        max-width: 500px;
        width: 100%;
        min-width: 300px;
        height: 50%;
        background: white;
        border-radius: 5px;
        position: relative;
    }

    .UploadFontButton[b-e2j8pyron0] {
        border-radius: 5px;
        padding: 1px 15px;
        color: white;
        background: #1d2327;
        cursor: pointer;
        user-select: none;
    }

    .CloseUploadFontButton[b-e2j8pyron0] {
        border: 1px solid rgb(255, 0, 0);
        color: rgb(255, 0, 0);
        width: fit-content;
        padding: 1px 15px;
        border-radius: 5px;
        cursor: pointer;
        user-select: none;
    }

    .FontListZone[b-e2j8pyron0] {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-height: 360px;
        overflow: auto;
        padding-top: 15px;
        margin: 10px 30px 0px 30px;
    }

        .FontListZone .Per[b-e2j8pyron0] {
            position: relative;
            background: white;
            width: 400px;
            text-align: center;
            box-shadow: 0px 5px 5px rgb(194, 193, 193);
            border-radius: 5px;
            margin-bottom: 15px;
            padding: 5px 0;
        }

        .FontListZone .Delete[b-e2j8pyron0] {
            position: absolute;
            top: 45%;
            right: -8px;
            transform: translate(-50%,-50%);
            border: 1px solid red;
            color: red;
            padding: 0px 5px;
            border-radius: 5px;
            user-select: none;
            cursor: pointer;
        }
/* /Components/Layout/BackEndMainLayout.razor.rz.scp.css */
/* [2026-10] ตัวแปรกลางของโครงหลังบ้าน — หน้า/คอมโพเนนต์ที่ต้องอ้างความกว้างเมนูซ้าย/ความสูงแถบบนให้ใช้ตัวแปรนี้ (ห้าม hardcode)
   --be-nav-w : ความกว้างแถบเมนูซ้าย (MenuZone)  ≥992 = 232 / หุบ 68 ; 768–992 = 68 (ไอคอน) ; ≤768 = 0 (ลิ้นชัก)
   --be-top-h : ความสูงแถบบน (HeaderZone)        แสดงเฉพาะ ≤768 = 52 ; จอใหญ่ = 0 */
.Main[b-kthf682jlx] {
    --be-nav-w: 232px;
    --be-top-h: 0px;
    position: relative;
    height: 100%;
    min-height: 100%;
}

    .Main.Main-NavCollapsed[b-kthf682jlx] {
        --be-nav-w: 68px;
    }

.ShowZone[b-kthf682jlx] {
    padding-left: var(--be-nav-w);
    padding-top: var(--be-top-h);
    width: fit-content;
    min-width: 100%;
    height: fit-content;
    min-height: 100%;
    background: #f0f0f1;
    position: relative;
    display: flex;
    transition: padding-left 0.2s;
}

.StatusLoadingDiv[b-kthf682jlx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: grid;
    place-items: center;
    z-index: 100000;
}


    .StatusLoadingDiv .Img[b-kthf682jlx] {
        width: 50px;
        height: 50px;
    }


@media (max-width: 992px) {
    .Main[b-kthf682jlx],
    .Main.Main-NavCollapsed[b-kthf682jlx] {
        --be-nav-w: 68px;
    }
}

@media (max-width: 768px) {
    .Main[b-kthf682jlx],
    .Main.Main-NavCollapsed[b-kthf682jlx] {
        --be-nav-w: 0px;
        --be-top-h: 52px;
    }

    /* ตอนเมนูมือถือเปิด (ลิ้นชักกว้าง 248px ที่ MenuZone.razor.css) เลื่อนเนื้อหาออกไปทางขวา
       แทนการปล่อยให้ NavBar ซ้อนทับเนื้อหา เพื่อไม่ให้อะไรถูกบังเลย ไม่ต้องพึ่ง z-index */
    .ShowZone.ShowZone-NavOpen[b-kthf682jlx] {
        padding-left: 248px;
    }
}
/* /Components/Layout/CwSoftware/Component/CwSoftwareAboutPage.razor.rz.scp.css */
.video-container[b-zympnk3qkg] {
    width: 60%;
}

.Row1[b-zympnk3qkg] {
    display: flex;
    margin: 0vw;
    font-weight: bold;
}

    .Row1 .Zone1[b-zympnk3qkg] {
        flex: 1;
    }

        .Row1 .Zone1 > span:nth-child(1)[b-zympnk3qkg] {
            font-size: 80px;
            color: #ff3a21;
        }

        .Row1 .Zone1 > span:nth-child(3)[b-zympnk3qkg] {
            font-size: 80px;
            color: #ff3a21;
        }

        .Row1 .Zone1 > span:nth-child(n+4)[b-zympnk3qkg] {
            font-size: 30px;
        }

        .Row1 .Zone1 > span:nth-child(7)[b-zympnk3qkg] {
            font-size: 40px;
            color: #2c308d;
        }

    .Row1 .Zone2[b-zympnk3qkg] {
        
    }

    .Row1 .Zone1 > p[b-zympnk3qkg] {
        text-align: center;
    }

.BaseSlotImageColor[b-zympnk3qkg] {
    border: 1px solid #efefef;
    background: #f8f8f8;
    border-radius: 20px;
    width: 100%;
    height: 300px;
}

.Row2[b-zympnk3qkg] {
    margin: 10vw;
    margin-top: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .Row2 > div:nth-child(1)[b-zympnk3qkg] {
        height: 700px;
        width: 500px;
        display: flex;
        align-items: center;
    }

    .Row2 > div:nth-child(2)[b-zympnk3qkg] {
        padding-left: 50px;
        border-left: 3px solid #ee432c;
        font-weight: bold;
        font-size: 60px;
    }

img[b-zympnk3qkg] {
    max-width: 100%;
    max-height: 100%;
}

@media (width <= 1380px)
{
    .Row1 .Zone1 > span:nth-child(1)[b-zympnk3qkg] {
        font-size: 60px;
        color: #ff3a21;
    }

    .Row1 .Zone1 > span:nth-child(3)[b-zympnk3qkg] {
        font-size: 60px;
        color: #ff3a21;
    }

    .Row1 .Zone1 > span:nth-child(n+4)[b-zympnk3qkg] {
        font-size: 25px;
    }

    .Row1 .Zone1 > span:nth-child(7)[b-zympnk3qkg] {
        font-size: 35px;
        color: #2c308d;
    }

}

@media (width <= 1260px) {
    .Row1 .Zone1 > span:nth-child(1)[b-zympnk3qkg] {
        font-size: 50px;
        color: #ff3a21;
    }

    .Row1 .Zone1 > span:nth-child(3)[b-zympnk3qkg] {
        font-size: 50px;
        color: #ff3a21;
    }

    .Row1 .Zone1 > span:nth-child(n+4)[b-zympnk3qkg] {
        font-size: 20px;
    }

    .Row1 .Zone1 > span:nth-child(7)[b-zympnk3qkg] {
        font-size: 30px;
        color: #2c308d;
    }
    .Row2 > div:nth-child(1)[b-zympnk3qkg] {
        height: 700px;
        width: 500px;
        display: flex;
        align-items: center;
    }

    .Row2 > div:nth-child(2)[b-zympnk3qkg] {
        padding-left: 50px;
        border-left: 3px solid #ee432c;
        font-weight: bold;
        font-size: 55px;
    }
}

@media (width <= 1070px) {
    .Row1 .Zone1 > span:nth-child(1)[b-zympnk3qkg] {
        font-size: 50px;
        color: #ff3a21;
    }

    .Row1 .Zone1 > span:nth-child(3)[b-zympnk3qkg] {
        font-size: 50px;
        color: #ff3a21;
    }

    .Row1 .Zone1 > span:nth-child(n+4)[b-zympnk3qkg] {
        font-size: 20px;
    }

    .Row1 .Zone1 > span:nth-child(7)[b-zympnk3qkg] {
        font-size: 30px;
        color: #2c308d;
    }

    .Row2 > div:nth-child(1)[b-zympnk3qkg] {
        height: 600px;
        width: 400px;
        display: flex;
        align-items: center;
    }

    .Row2 > div:nth-child(2)[b-zympnk3qkg] {
        padding-left: 50px;
        border-left: 3px solid #ee432c;
        font-weight: bold;
        font-size: 50px;
    }
}

@media (width <= 970px) {
    .Row1 .Zone1 > span:nth-child(1)[b-zympnk3qkg] {
        font-size: 40px;
        color: #ff3a21;
    }

    .Row1 .Zone1 > span:nth-child(3)[b-zympnk3qkg] {
        font-size: 40px;
        color: #ff3a21;
    }

    .Row1 .Zone1 > span:nth-child(n+4)[b-zympnk3qkg] {
        font-size: 15px;
    }

    .Row1 .Zone1 > span:nth-child(7)[b-zympnk3qkg] {
        font-size: 20px;
        color: #2c308d;
    }

    .Row2 > div:nth-child(1)[b-zympnk3qkg] {
        height: 500px;
        width: 300px;
        display: flex;
        align-items: center;
    }

    .Row2 > div:nth-child(2)[b-zympnk3qkg] {
        padding-left: 50px;
        border-left: 3px solid #ee432c;
        font-weight: bold;
        font-size: 35px;
    }
}

@media (width <= 830px) {
    .Row1 .Zone1 > span:nth-child(1)[b-zympnk3qkg] {
        font-size: 40px;
        color: #ff3a21;
    }

    .Row1 .Zone1 > span:nth-child(3)[b-zympnk3qkg] {
        font-size: 40px;
        color: #ff3a21;
    }

    .Row1 .Zone1 > span:nth-child(n+4)[b-zympnk3qkg] {
        font-size: 15px;
    }

    .Row1 .Zone1 > span:nth-child(7)[b-zympnk3qkg] {
        font-size: 20px;
        color: #2c308d;
    }
}


@media (width <= 730px) {
    .Row1 .Zone1 > span:nth-child(1)[b-zympnk3qkg] {
        font-size: 30px;
        color: #ff3a21;
    }

    .Row1 .Zone1 > span:nth-child(3)[b-zympnk3qkg] {
        font-size: 30px;
        color: #ff3a21;
    }

    .Row1 .Zone1 > span:nth-child(n+4)[b-zympnk3qkg] {
        font-size: 12px;
    }

    .Row1 .Zone1 > span:nth-child(7)[b-zympnk3qkg] {
        font-size: 15px;
        color: #2c308d;
    }
    .Row2 > div:nth-child(1)[b-zympnk3qkg] {
        height: 300px;
        width: 200px;
        display: flex;
        align-items: center;
    }

    .Row2 > div:nth-child(2)[b-zympnk3qkg] {
        padding-left: 50px;
        border-left: 3px solid #ee432c;
        font-weight: bold;
        font-size: 30px;
    }
}

.Row2 > div:nth-child(1)[b-zympnk3qkg] {
    transition: 0.2s;
}

    .Row2 > div:nth-child(1):hover[b-zympnk3qkg] {
        transform: scale(1.1);
    }

.Row2 > div:nth-child(2)[b-zympnk3qkg] {
    z-index: 1;
}

.NewFontSize1[b-zympnk3qkg] {
    font-size: 1.2vw;
}

.NewFontSize2[b-zympnk3qkg] {
    font-size: 1.775vw!important;
}

.NewFontSize3[b-zympnk3qkg] {
    font-size: 3.35vw;
}

.Spacebetween[b-zympnk3qkg] {
    width: 3vw;
    min-width: 3vw;
}

.Zone1[b-zympnk3qkg] {
    word-break: break-word;
}

.VideoCw[b-zympnk3qkg] {
    width: 60%;
}

.MineFontSize[b-zympnk3qkg] {
    font-size: 1.6vw;
    font-weight: normal;
    white-space: pre-line;
}

.MineFontSizeENPC[b-zympnk3qkg] {
    display: block;
    font-size: 1.6vw;
    text-indent: 5vw;
    width: 100%;
}

.MineFontSizeENMobile[b-zympnk3qkg] {
    display: none;
    text-align: center;
    white-space: pre-line;
    font-size: 0.9rem !important;
}

.MineFontSizePC[b-zympnk3qkg] {
    display: block;
    font-size: 1.6vw;
    text-indent: 5vw;
    width: 100%;
}

.MineFontSizeMobile[b-zympnk3qkg] {
    display: none;
    font-size: 1.6vw;
    font-weight: normal;
    white-space: pre-line;
    text-align: center;
    max-width: 42ch;
    font-size: 0.9rem !important;
}

@media (width <= 580px) {
    .MineFontSizeENPC[b-zympnk3qkg] {
        display: none;
    }
    .MineFontSizeENMobile[b-zympnk3qkg] {
        display: block;
    }
    .MineFontSizeMobile[b-zympnk3qkg] {
        display: block;
    }
    .MineFontSizePC[b-zympnk3qkg] {
        display: none;
    }
    .Row2 > div:nth-child(1)[b-zympnk3qkg] {
        height: 300px;
        width: 200px;
        display: flex;
        align-items: center;
    }

    .Row2 > div:nth-child(2)[b-zympnk3qkg] {
        padding-left: 25px;
        border-left: 3px solid #ee432c;
        font-weight: bold;
        font-size: 15px;
    }

    .Row1 .Zone1 > p[b-zympnk3qkg] {
        font-size: 4vw !important;
        text-align: center;
    }

    .NewFontSize2[b-zympnk3qkg] {
        font-size: 4vw !important;
        text-align: center;
    }
    .MineFontSize[b-zympnk3qkg] {
        
    }

    .HappySuccessHead[b-zympnk3qkg] {
        font-size: 39px;
    }

    .HappySuccessSub[b-zympnk3qkg] {
        font-size: 20px;
    }

    .Row1[b-zympnk3qkg] {
        margin: 0 2.5vw;
    }

    .VideoCw[b-zympnk3qkg] {
        width: 100%;
    }
}
/* /Components/Layout/CwSoftware/Component/CwSoftwareBlogsPage.razor.rz.scp.css */
body[b-r4bmsd4p8a] {
}
/* /Components/Layout/CwSoftware/Component/CwSoftwareContactPage.razor.rz.scp.css */
.Row1[b-hyugqar8mq] {
    display: grid;
    font-weight: bold;
    margin: 50px;
    grid-template-columns: 70% auto;
    grid-template-areas: "Tower Contact";
    grid-gap: 5vw;
}

    .Row1 > div:nth-child(1)[b-hyugqar8mq] {
        grid-area: Tower;
    }

        .Row1 > div:nth-child(1) > div:nth-child(1)[b-hyugqar8mq] {
        }

        .Row1 > div:nth-child(1) > div:nth-child(2)[b-hyugqar8mq] {
            margin-left: -20px;
        }

            .Row1 > div:nth-child(1) > div:nth-child(2) > img[b-hyugqar8mq] {
                width: 100%;
            }

    .Row1 > div:nth-child(2)[b-hyugqar8mq] {
        grid-area: Contact;
    }

        .Row1 > div:nth-child(2) > div:nth-child(1)[b-hyugqar8mq] {
            text-align: end;
            margin-top: 150px;
        }

        .Row1 > div:nth-child(2) > div:nth-child(2)[b-hyugqar8mq] {
            text-align: end;
            margin-bottom: 100px;
            margin-right: -10px;
        }

        .Row1 > div:nth-child(2) > p[b-hyugqar8mq] {
            text-align: center;
        }

img[b-hyugqar8mq] {
    max-width: 100%;
    max-height: 100%;
}

@media (width <= 960px) {
    .Row1[b-hyugqar8mq] {
        grid-template-columns: 100%;
        grid-template-areas:
            "Tower"
            "Contact";
    }

        .Row1 > div:nth-child(2) > div:nth-child(1)[b-hyugqar8mq] {
            text-align: start;
            margin-right: 0px;
            display: none;
        }

        .Row1 > div:nth-child(1) > div:nth-child(2)[b-hyugqar8mq] {
            margin: 0px;
        }

        .Row1 > div:nth-child(2) > div:nth-child(2)[b-hyugqar8mq] {
            text-align: center;
            margin: 0px;
            margin-top: 50px;
            margin-bottom: 50px;
        }

        .Row1 > div:nth-child(2) > p[b-hyugqar8mq] {
            text-align: center;
        }

        .Row1 > div:nth-child(1) > div:nth-child(1)[b-hyugqar8mq] {
        }
}

p[b-hyugqar8mq] {
    text-decoration: none;
}

.NewFontSize1[b-hyugqar8mq] {
    font-size: 1.2vw;
    font-weight: normal;
}

.NewFontSize2[b-hyugqar8mq] {
    font-size: 1.775vw;
    font-weight: normal;
}

.NewFontSize3[b-hyugqar8mq] {
    font-size: 3.35vw;
}

.NewFontSize-1[b-hyugqar8mq] {
    font-size: 1.2vw;
    font-weight: normal;
}

.ContactHead[b-hyugqar8mq] {

}

@media (width <= 530px) {
    .Row1 > div:nth-child(2) > div:nth-child(2)[b-hyugqar8mq] {
        margin-bottom: 0px;
    }
    .NewFontSize-1[b-hyugqar8mq] {
        font-size: 16px;
        font-weight: normal;
    }
    .NewFontSize1[b-hyugqar8mq] {
        font-size: 3vw;
    }

    .NewFontSize2[b-hyugqar8mq] {
        font-size: 7vw;
    }

    .NewFontSize3[b-hyugqar8mq] {
        font-size: 10vw;
    }
    .ContactHead[b-hyugqar8mq] {
        text-align: center;
    }
}
/* /Components/Layout/CwSoftware/Component/CwSoftwareFeaturesPage.razor.rz.scp.css */
@font-face {
    font-family: 'Mine_Sukhumvit';
    src: url('../fonts/SukhumvitSet-Medium.ttf');
}

.PhoneZone[b-sio9yrmlz5] {
    font-family: Mine_Sukhumvit;
}

    .PhoneZone .PhoneImgSize[b-sio9yrmlz5] {
        width: 250px;
        padding: 10px 5%;
    }

    .PhoneZone .TextZone[b-sio9yrmlz5] {

    }

        .PhoneZone .TextZone > div[b-sio9yrmlz5] {
            display: flex;
            flex-direction: column;
            align-items: end;
        }

        .PhoneZone .TextZone > div > div[b-sio9yrmlz5] {
            text-align: end;
        }

    .MainGridPerFeatures[b-sio9yrmlz5] {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px;
        width: fit-content;
        z-index: -1;
        font-family: Mine_Sukhumvit;
    }

        .MainGridPerFeatures .Per[b-sio9yrmlz5] {
            font-weight: normal !important;
        }

@media (width <= 960px) {
    .MainGridPerFeatures[b-sio9yrmlz5] {
        grid-template-columns: 1fr 1fr;
    }
    .PhoneZone .PhoneImgSize[b-sio9yrmlz5] {
        width: 200px;
    }
}

@media (width <= 630px) {
    .MainGridPerFeatures[b-sio9yrmlz5] {
        grid-template-columns: 1fr 1fr;
    }

    .PhoneZone .PhoneImgSize[b-sio9yrmlz5] {
        width: 150px;
    }
}

@media (width <= 430px) {
    .MainGridPerFeatures[b-sio9yrmlz5] {
        grid-template-columns: 1fr 1fr;
    }

    .PhoneZone .PhoneImgSize[b-sio9yrmlz5] {
        width: 100px;
    }
}

    .MainGridPerFeatures .Per[b-sio9yrmlz5] {
        display: flex;
        align-items: center;
        height: 100px;
        position: relative;
        font-weight: bold;
    }

        .MainGridPerFeatures .Per .Icon[b-sio9yrmlz5] {
            position: relative;
            height: 100%;
        }

            .MainGridPerFeatures .Per .Icon > img[b-sio9yrmlz5] {
                max-height: 100%;
                max-width: 100%;
            }

        .MainGridPerFeatures .Per .Name[b-sio9yrmlz5] {
        }


@media (width <= 630px) {

    .MainGridPerFeatures[b-sio9yrmlz5] {
        margin: 0 20px;
        grid-gap: 10px;
    }

    .MainGridPerFeatures .Per[b-sio9yrmlz5] {
        height: 60px;
    }

}

@media (width <= 500px) {

    .PhoneZone .PhoneImgSize[b-sio9yrmlz5] {
        width: 100px;
    }
}

.PhoneImageAnimBase[b-sio9yrmlz5] {
    opacity: 0;
}

.Title1AnimBase[b-sio9yrmlz5] {
    opacity: 0;
}

.Title2AnimBase[b-sio9yrmlz5] {
    opacity: 0;
}

.PhoneImageAnim[b-sio9yrmlz5] {
    animation: PhoneImageAnimKey-b-sio9yrmlz5 0.5s forwards 0s;
}

.Title1Anim[b-sio9yrmlz5] {
    animation: Title1AnimKey-b-sio9yrmlz5 0.5s forwards 0.5s;
}

.Title2Anim[b-sio9yrmlz5] {
    animation: Title2AnimKey-b-sio9yrmlz5 0.5s forwards 1.0s;
}

@keyframes PhoneImageAnimKey-b-sio9yrmlz5 {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes Title1AnimKey-b-sio9yrmlz5 {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes Title2AnimKey-b-sio9yrmlz5 {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.NewFontSize1[b-sio9yrmlz5] {
    font-size: 1.2vw;
}

.NewFontSize2[b-sio9yrmlz5] {
    font-size: 1.775vw;
}

.NewFontSize3[b-sio9yrmlz5] {
    font-size: 3.35vw;
}

.FreeBig[b-sio9yrmlz5] {
    font-size: 8vw;
    margin-left: 2.5vw;
}

.HeadFeature[b-sio9yrmlz5] {
    font-size: 3vw;
}

@media (width <= 530px) {
    .NewFontSize1[b-sio9yrmlz5] {
        font-size: 2vw;
    }

    .NewFontSize2[b-sio9yrmlz5] {
        font-size: 2.5vw;
    }

    .NewFontSize3[b-sio9yrmlz5] {
        font-size: 4.5vw;
    }

    .FreeBig[b-sio9yrmlz5] {
        font-size: 10vw;
        margin-left: 2.5vw;
    }

    .HeadFeature[b-sio9yrmlz5] {
        font-size: 3.5vw;
    }
}
/* /Components/Layout/CwSoftware/Component/CwSoftwareFooterZone.razor.rz.scp.css */
@font-face {
    font-family: 'Mine_Sukhumvit';
    src: url('../fonts/SukhumvitSet-Medium.ttf');
}

.MainFooter[b-ers0hb2bwz] {
    background: #e5e6e7;
    display: flex;
    justify-content: center;
    font-size: 1.25vw;
}

.GridMain[b-ers0hb2bwz] {
    padding: 30px 0px;
    font-family: Mine_Sukhumvit;
    display: grid;
    grid-template-areas: "CwInfo Line  flexgrow QrcodeZone UpdateShow ServiceShow";
    grid-template-columns: 1fr repeat(8,auto);
    width: 100%;
    padding: 20px 6vw;
}

    .GridMain > flexgrow[b-ers0hb2bwz] {
        flex-grow: 1;
        grid-area: flexgrow;
    }

    .GridMain > div[b-ers0hb2bwz] {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .GridMain .IconSize[b-ers0hb2bwz] {
        width: 2vw;
        height: 1.5vw;
        display: flex;
        align-items: center;
    }

    .GridMain .CwInfo[b-ers0hb2bwz] {
        grid-area: CwInfo;
        font-weight: bold;
    }

        .GridMain .CwInfo div:nth-child(1)[b-ers0hb2bwz] {
            font-size: 2vw;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .GridMain .CwInfo div:nth-child(n+2)[b-ers0hb2bwz] {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }

        .GridMain .CwInfo img[b-ers0hb2bwz] {
            width: 1.5vw;
            max-height: 1.5vw;
        }

    .GridMain .Line[b-ers0hb2bwz] {
        grid-area: Line;
        border-right: solid 1px black;
        margin: 0px 3vw;
    }

    .GridMain .PageZone1[b-ers0hb2bwz] {
        grid-area: PageZone1;
        width: 10vw;
        font-weight: bold;
    }

        .GridMain .PageZone1 div:first-child[b-ers0hb2bwz] {
            margin-top: 5px;
        }

        .GridMain .PageZone1 div[b-ers0hb2bwz] {
            margin-bottom: 5px;
        }

    .GridMain .PageZone2[b-ers0hb2bwz] {
        grid-area: PageZone2;
        width: 11vw;
        font-weight: bold;
    }

        .GridMain .PageZone2 div:first-child[b-ers0hb2bwz] {
            margin-top: 5px;
        }

        .GridMain .PageZone2 div[b-ers0hb2bwz] {
            margin-bottom: 5px;
        }

    .GridMain .QrcodeZone[b-ers0hb2bwz] {
        grid-area: QrcodeZone;
    }

        .GridMain .QrcodeZone img[b-ers0hb2bwz] {
            width: 8vw;
        }

    .GridMain .UpdateShow[b-ers0hb2bwz] {
        margin-left: 50px;
        grid-area: UpdateShow;
        display: flex;
        flex-direction: column;
        align-items: end;
        font-weight: bold;
    }

        .GridMain .UpdateShow img[b-ers0hb2bwz] {
            width: 3vw;
        }

        .GridMain .UpdateShow > div:nth-of-type(1)[b-ers0hb2bwz] {
            font-size: 2.5vw;
        }

    .GridMain .ServiceShow[b-ers0hb2bwz] {
        margin-left: 50px;
        grid-area: ServiceShow;
        display: flex;
        flex-direction: column;
        align-items: end;
        font-weight: bold;
    }

        .GridMain .ServiceShow > img:nth-of-type(1)[b-ers0hb2bwz] {
            width: 4vw;
            
        }

        .GridMain .ServiceShow > div:nth-of-type(1)[b-ers0hb2bwz] {
            width: 3vw;
            height: 3vw;
            background-color: #ee4a2c; /* สีที่ต้องการให้ไอคอนเป็น */
            -webkit-mask: url('/CwsoftwareImage/CallCenterIcon.svg') no-repeat center/contain;
            mask: url('/CwsoftwareImage/CallCenterIcon.svg') no-repeat center/contain;
        }

        .GridMain .ServiceShow > div:nth-of-type(2)[b-ers0hb2bwz] {
            font-size: 2.5vw;
        }

.LogoSvg[b-ers0hb2bwz] {
    aspect-ratio: 6/1;
    max-width: 100%;
    max-height: 100%;
    background-color: #000000; /* สีที่ต้องการให้ไอคอนเป็น */
    -webkit-mask: url('/CwsoftwareImage/CwLogo.svg') no-repeat center/contain;
    mask: url('/CwsoftwareImage/CwLogo.svg') no-repeat center/contain;
}

a[b-ers0hb2bwz] {
    text-decoration: none;
    color: inherit;
}
/* /Components/Layout/CwSoftware/Component/CwSoftwareHeaderZone.razor.rz.scp.css */
@font-face {
    font-family: 'Mine_Sukhumvit';
    src: url('../fonts/SukhumvitSet-Medium.ttf');
}

.MenuZone .ActiveMenu[b-5yne1uum0q] {
    font-weight: bold!important;
}

.GridMain[b-5yne1uum0q] {
    display: grid;
    font-family: Mine_Sukhumvit;
    font-weight: normal;
    font-size: 16px;
    grid-template-areas: "Logo MenuZone";
    grid-template-columns: 1fr auto;
    padding: 25px 25px;
}

    .GridMain .MenuZone[b-5yne1uum0q] {
        display: grid;
        grid-template-areas: "MainMenu Features OurCustomer Package AboutCw OurTeam Contact Blogs";
        grid-template-columns: repeat(7,auto);
        user-select: none;
    }

    .GridMain div[b-5yne1uum0q] {
        display: flex;
        align-items: end;
        justify-content: end;
        height: 50px;
        padding-left: 2vw;
        cursor: pointer;
    }

        .GridMain div:first-child[b-5yne1uum0q] {
            justify-content: start;
            padding-left: 0px;
            cursor: pointer;
        }

    .GridMain .ActiveMenu[b-5yne1uum0q] {
        color: #ff462e;
    }

    .GridMain .Logo[b-5yne1uum0q] {
        grid-area: Logo;
        position: relative;
    }

    .GridMain .MainMenu[b-5yne1uum0q] {
        grid-area: MainMenu;
    }

    .GridMain .Features[b-5yne1uum0q] {
        grid-area: Features;
    }

    .GridMain .OurCustomer[b-5yne1uum0q] {
        grid-area: OurCustomer;
    }

    .GridMain .Package[b-5yne1uum0q] {
        grid-area: Package;
    }

    .GridMain .AboutCw[b-5yne1uum0q] {
        grid-area: AboutCw;
    }

    .GridMain .OurTeam[b-5yne1uum0q] {
        grid-area: OurTeam;
    }

    .GridMain .Contact[b-5yne1uum0q] {
        grid-area: Contact;
    }

    .GridMain .Blogs[b-5yne1uum0q] {
        grid-area: Blogs;
    }

.HeadSupportFreeBar[b-5yne1uum0q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-family: Mine_Sukhumvit;
    font-weight: bold;
    font-size: 16px;
    padding-right: 25px;
    height: 50px;
    background: linear-gradient(90deg,rgba(236, 15, 103, 1) 0%, rgba(238, 66, 44, 1) 50%, rgba(239, 87, 44, 1) 100%);
}

    .HeadSupportFreeBar .CallCenterIcon[b-5yne1uum0q] {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 10px;
        padding-right: 15px;
    }


.LogoSvg[b-5yne1uum0q] {
    aspect-ratio: 6/1;
    max-width: 100%;
    max-height: 100%;
    background-color: #000000; /* สีที่ต้องการให้ไอคอนเป็น */
    -webkit-mask: url('/CwsoftwareImage/CwLogo.svg') no-repeat center/contain;
    mask: url('/CwsoftwareImage/CwLogo.svg') no-repeat center/contain;
}

@media (width <= 960px) {
    .GridMain[b-5yne1uum0q] {
        grid-template-areas: "Logo";
        grid-template-columns: 1fr;
    }

        .GridMain .Logo[b-5yne1uum0q] {
            display: flex;
            justify-content: center;
        }

        .GridMain .MenuZone[b-5yne1uum0q] {
            justify-content: center;
            padding: 0px;
        }

        .GridMain div:first-child[b-5yne1uum0q] {
            justify-content: center;
            padding-left: 0px;
        }
}

@media (width <= 700px) {
    .GridMain[b-5yne1uum0q] {
        grid-template-areas: "Logo";
        grid-template-columns: 100%;
    }
    .GridMain .MenuZone[b-5yne1uum0q] {
        display: grid;
        grid-template-areas:
            "MainMenu Features OurCustomer Package"
            "AboutCw OurTeam Contact Blogs";
        grid-template-columns: repeat(4,100px);
        grid-gap: 10px 0;
    }

    .GridMain div:nth-child(n+2)[b-5yne1uum0q] {
        height: fit-content;
        justify-content: center;
        padding: 0;
    }

    .GridMain .Logo[b-5yne1uum0q] {
        
    }
}
/* /Components/Layout/CwSoftware/Component/CwSoftwareHomePage.razor.rz.scp.css */
@font-face {
    font-family: 'Mine_Sukhumvit';
    src: url('../fonts/SukhumvitSet-Medium.ttf');
}

.PicTitleEN1[b-9g4v0wrpjd] {

}

.PicTitleEN2[b-9g4v0wrpjd] {
}

.PicTitleEN3[b-9g4v0wrpjd] {
}

.VideoCw[b-9g4v0wrpjd] {
    width: 60%;
}

.FontSize1[b-9g4v0wrpjd] {
}

.GridDetail1[b-9g4v0wrpjd] {
    font-family: Mine_Sukhumvit;
    display: grid;
    grid-template-areas: "Grid1 Grid2 Grid3";
    grid-template-columns: auto auto auto;
    grid-auto-rows: 8vw;
    margin-top: 50px;
}

    .GridDetail1 .Grid1[b-9g4v0wrpjd] {
        grid-area: Grid1;
        background: #f8f8f8;
        border: 1px solid #ededed;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1vw 2vw;
        border-radius: 20px;
        margin-right: 1vw;
        font-size: 1.2vw;
        font-weight: bold;
    }

        .GridDetail1 .Grid1 div:nth-child(1)[b-9g4v0wrpjd] {
            font-size: 1.2vw;
            font-weight: bold;
        }

    .GridDetail1 .Grid2[b-9g4v0wrpjd] {
        grid-area: Grid2;
        display: flex;
        align-items: center;
        background: #f8f8f8;
        border: 1px solid #ededed;
        border-radius: 20px;
        margin-right: 1vw;
        font-size: 1.2vw;
        font-weight: bold;
    }

        .GridDetail1 .Grid2 > div:nth-child(1)[b-9g4v0wrpjd] {
            padding: 1.5vw;
        }

        .GridDetail1 .Grid2 > div:nth-child(2) > img[b-9g4v0wrpjd] {
            height: 7vw;
            margin-right: 0.5vw;
            border-radius: 5px;
        }

    .GridDetail1 .Grid3[b-9g4v0wrpjd] {
        grid-area: Grid3;
        font-weight: bold;
        margin-left: 3vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 1.775vw;
    }


.MainDivSlide[b-9g4v0wrpjd] {
    position: relative;
    font-family: Mine_Sukhumvit;
    display: flex;
    width: auto;
    height: fit-content;
    margin: 0px 20px;
    overflow-x: hidden;
    will-change: transform;
    z-index: 1;
    padding: 50px 0;
}

    .MainDivSlide > .Special[b-9g4v0wrpjd] {
        background: #2c308d;
        color: white;
        padding: 2.5vw;
    }

        .MainDivSlide > .Special > div[b-9g4v0wrpjd] {
        }

    .MainDivSlide > div[b-9g4v0wrpjd] {
        height: 300px;
        aspect-ratio: 3.5/4;
        margin-right: 20px;
        border-radius: 10px;
        position: relative;
        transition: 0.2s;
    }

        .MainDivSlide > div:hover[b-9g4v0wrpjd] {
            transform: scale(1.1);
        }

    .MainDivSlide > div:last-child[b-9g4v0wrpjd] {
        margin-right: 0vw;
    }

        .MainDivSlide > div:nth-child(2)[b-9g4v0wrpjd] {
            background-image: url("/CwSoftwareImage/InShop2.jpg");
            background-size: contain;
        }

        .MainDivSlide > div:nth-child(3)[b-9g4v0wrpjd] {
            background-image: url("/CwSoftwareImage/InShop3.jpg");
            background-size: contain;
        }

        .MainDivSlide > .Normal > div[b-9g4v0wrpjd] {
            display: flex;
            flex-direction: column;
            justify-content: end;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            padding: 10px;
            height: 50%;
            width: 100%;
            background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
        }

            .MainDivSlide > .Normal > div div[b-9g4v0wrpjd] {
                color: black;
            }

.MainDivSlideOperator[b-9g4v0wrpjd] {
    width: 8vw;
    height: 3vw;
    background: #ed402c;
    border-radius: 1000px;
    display: flex;
}

    .MainDivSlideOperator > div[b-9g4v0wrpjd] {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        cursor: pointer;
    }

    .MainDivSlideOperator > div:nth-child(1) > div[b-9g4v0wrpjd] {
        aspect-ratio: 6/1;
        width: 100%;
        height: 60%;
        background-color: white; /* สีที่ต้องการให้ไอคอนเป็น */
        -webkit-mask: url('/CwsoftwareImage/ArrowIcon.svg') no-repeat center/contain;
        mask: url('/CwsoftwareImage/ArrowIcon.svg') no-repeat center/contain;
        transform: scaleX(-100%);
    }

        .MainDivSlideOperator > div:nth-child(2) > div[b-9g4v0wrpjd] {
            aspect-ratio: 6/1;
            width: 100%;
            height: 60%;
            background-color: white; /* สีที่ต้องการให้ไอคอนเป็น */
            -webkit-mask: url('/CwsoftwareImage/ArrowIcon.svg') no-repeat center/contain;
            mask: url('/CwsoftwareImage/ArrowIcon.svg') no-repeat center/contain;
        }

.MainHappyAndSuccess[b-9g4v0wrpjd] {
    font-family: Mine_Sukhumvit;
}

    .MainHappyAndSuccess > div[b-9g4v0wrpjd] {
        flex: 1;
    }

        .MainHappyAndSuccess > div:nth-child(1)[b-9g4v0wrpjd] {
            margin-left: 0vw;
        }

            .MainHappyAndSuccess > div:nth-child(1) > div:nth-child(1)[b-9g4v0wrpjd] {
                color: #ff3a21;
                font-weight: bold;
                font-size: 3.35vw;
            }

            .MainHappyAndSuccess > div:nth-child(1) > div:nth-child(2)[b-9g4v0wrpjd] {
                font-size: 1.775vw;
            }

        .MainHappyAndSuccess > div:nth-child(2)[b-9g4v0wrpjd] {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

            .MainHappyAndSuccess > div:nth-child(2) > div[b-9g4v0wrpjd] {
                margin-top: 1vw;
                color: #00a651;
                flex: 1;
                text-align: center;
                font-size: 1.5vw;
            }

        .MainHappyAndSuccess > div:nth-child(2) img[b-9g4v0wrpjd] {
            width: 100%;
        }

@media (width < 960px) {
    .GridDetail1[b-9g4v0wrpjd] {
        font-family: Mine_Sukhumvit;
        display: grid;
        grid-template-areas:
            "Grid1"
            "Grid2"
            "Grid3";
        grid-template-columns: auto;
        grid-auto-rows: auto;
        margin-top: 50px;
        grid-gap: 20px;
    }

        .GridDetail1 .Grid1[b-9g4v0wrpjd] {
            grid-area: Grid1;
            background: #f8f8f8;
            border: 1px solid #ededed;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 2vw 4vw;
            border-radius: 10px;
            margin-right: 0vw;
            font-size: 4.5vw;
            font-weight: bold;
        }

            .GridDetail1 .Grid1 div:nth-child(1)[b-9g4v0wrpjd] {
                font-size: 4.5vw;
                font-weight: bold;
                height: 6vw;
            }

        .GridDetail1 .Grid2[b-9g4v0wrpjd] {
            grid-area: Grid2;
            display: flex;
            align-items: center;
            background: #f8f8f8;
            border: 1px solid #ededed;
            border-radius: 10px;
            margin-right: 1vw;
            font-size: 4vw;
            font-weight: bold;
            padding: 2vw 4vw;
        }

            .GridDetail1 .Grid2 > div:nth-child(1)[b-9g4v0wrpjd] {
                padding: 2.5vw;
            }

            .GridDetail1 .Grid2 > div:nth-child(2) > img[b-9g4v0wrpjd] {
                height: 12vw;
                margin-right: 1vw;
                border-radius: 5px;
            }

        .GridDetail1 .Grid3[b-9g4v0wrpjd] {
            grid-area: Grid3;
            font-weight: bold;
            margin-left: 0vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 5vw;
        }

            .GridDetail1 .Grid3 > div[b-9g4v0wrpjd] {
                width: fit-content;
            }

    .MainDivSlideOperator[b-9g4v0wrpjd] {
        width: 24vw;
        height: 6vw;
        background: #ed402c;
        border-radius: 1000px;
        display: flex;
    }

        .MainDivSlideOperator > div[b-9g4v0wrpjd] {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50%;
            cursor: pointer;
        }

            .MainDivSlideOperator > div:nth-child(1) > div[b-9g4v0wrpjd] {
                aspect-ratio: 6/1;
                width: 100%;
                height: 60%;
                background-color: white; /* สีที่ต้องการให้ไอคอนเป็น */
                -webkit-mask: url('/CwsoftwareImage/ArrowIcon.svg') no-repeat center/contain;
                mask: url('/CwsoftwareImage/ArrowIcon.svg') no-repeat center/contain;
                transform: scaleX(-100%);
            }

            .MainDivSlideOperator > div:nth-child(2) > div[b-9g4v0wrpjd] {
                aspect-ratio: 6/1;
                width: 100%;
                height: 60%;
                background-color: white; /* สีที่ต้องการให้ไอคอนเป็น */
                -webkit-mask: url('/CwsoftwareImage/ArrowIcon.svg') no-repeat center/contain;
                mask: url('/CwsoftwareImage/ArrowIcon.svg') no-repeat center/contain;
            }

    .MainHappyAndSuccess[b-9g4v0wrpjd] {
        display: block;
        margin: 0 5vw;
        font-family: Mine_Sukhumvit;
    }

        .MainHappyAndSuccess > div[b-9g4v0wrpjd] {
            flex: 1;
        }

            .MainHappyAndSuccess > div:nth-child(1)[b-9g4v0wrpjd] {
                margin-left: 0vw;
            }

                .MainHappyAndSuccess > div:nth-child(1) > div:nth-child(1)[b-9g4v0wrpjd] {
                    color: #ff3a21;
                    font-weight: bold;
                    font-size: 8vw;
                }

                .MainHappyAndSuccess > div:nth-child(1) > div:nth-child(2)[b-9g4v0wrpjd] {
                    font-size: 5vw;
                }

            .MainHappyAndSuccess > div:nth-child(2)[b-9g4v0wrpjd] {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

                .MainHappyAndSuccess > div:nth-child(2) > div[b-9g4v0wrpjd] {
                    margin-top: 8vw;
                    color: #00a651;
                    flex: 1;
                    text-align: center;
                    font-size: 5vw;
                }

                .MainHappyAndSuccess > div:nth-child(2) img[b-9g4v0wrpjd] {
                    width: 100%;
                }
}

@media (width < 530px) {

    .MainDivSlideOperator[b-9g4v0wrpjd] {
        width: 24vw;
        height: 7vw;
        background: #ed402c;
        border-radius: 1000px;
        display: flex;
    }

        .MainDivSlideOperator > div[b-9g4v0wrpjd] {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50%;
            cursor: pointer;
        }

            .MainDivSlideOperator > div:nth-child(1) > div[b-9g4v0wrpjd] {
                aspect-ratio: 6/1;
                width: 100%;
                height: 60%;
                background-color: white; /* สีที่ต้องการให้ไอคอนเป็น */
                -webkit-mask: url('/CwsoftwareImage/ArrowIcon.svg') no-repeat center/contain;
                mask: url('/CwsoftwareImage/ArrowIcon.svg') no-repeat center/contain;
                transform: scaleX(-100%);
            }

            .MainDivSlideOperator > div:nth-child(2) > div[b-9g4v0wrpjd] {
                aspect-ratio: 6/1;
                width: 100%;
                height: 60%;
                background-color: white; /* สีที่ต้องการให้ไอคอนเป็น */
                -webkit-mask: url('/CwsoftwareImage/ArrowIcon.svg') no-repeat center/contain;
                mask: url('/CwsoftwareImage/ArrowIcon.svg') no-repeat center/contain;
            }

}

.RegisterButton[b-9g4v0wrpjd] {
    background: linear-gradient(90deg,rgba(239, 81, 44, 1) 0%, rgba(237, 52, 58, 1) 100%);
    width: fit-content;
    border-radius: 50vw;
    padding: 0.5vw 2.5vw;
    margin-top: 3vw;
}

.NewFontSize1[b-9g4v0wrpjd] {
    font-size: 1.2vw;
}

.NewFontSize2[b-9g4v0wrpjd] {
    font-size: 1.775vw;
}

.NewFontSize3[b-9g4v0wrpjd] {
    font-size: 3.35vw;
}

@media (width <= 530px) {
    .NewFontSize1[b-9g4v0wrpjd] {
        font-size: 4vw;
    }

    .NewFontSize2[b-9g4v0wrpjd] {
        font-size: 2.5vw;
    }

    .NewFontSize3[b-9g4v0wrpjd] {
        font-size: 4.5vw;
    }
    .VideoCw[b-9g4v0wrpjd] {
        width: 100%;
    }
    .MainHappyAndSuccess > div:nth-child(1) > div:nth-child(2)[b-9g4v0wrpjd]{
        font-size: 4vw;
    }
}
/* /Components/Layout/CwSoftware/Component/CwSoftwareOurCustomerPage.razor.rz.scp.css */
.Zone1[b-xlqhscoxaz] {
    display: flex;
    margin: 0 100px;
    padding-top: 30px;
}

    .Zone1 > div:nth-child(1)[b-xlqhscoxaz] {

    }

    .Zone1 > div:nth-child(2)[b-xlqhscoxaz] {
        font-weight: bold;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: end;
    }

.Zone2[b-xlqhscoxaz] {
    z-index: -1;
    display: flex;
    align-items: end;
    justify-content: center;
    margin-top: -20vw;
    min-height: 50vw;
    height: 50vw;
    position: relative;
}

    .Zone2 > div:nth-child(1)[b-xlqhscoxaz] {
        width: 30%;
        min-height: 55%;
    }

    .Zone2 > div:nth-child(3)[b-xlqhscoxaz] {
        width: 30%;
        height: 75%;
        display: flex;
        flex-direction: column;
        justify-content: end;
    }

        .Zone2 > div:nth-child(3) > div:nth-child(1)[b-xlqhscoxaz] {
            flex: 1;
        }

        .Zone2Gap[b-xlqhscoxaz] {
            height: 1vw;
            width: 1vw;
        }

        .Zone2 > div:nth-child(3) > div:nth-child(3)[b-xlqhscoxaz] {
            flex: 1;
        }

    .Zone2 > div:nth-child(5)[b-xlqhscoxaz] {
        width: 30%;
        height: 100%;
    }

.BaseSlotImageColor[b-xlqhscoxaz] {
    border: 1px solid #efefef;
    background: #f8f8f8;
}

.FeedBackGrid[b-xlqhscoxaz] {
    display: grid;
    margin: 0 80px;
    margin-bottom: 150px;
    grid-template-areas:
        "FeedBackPer1 FeedBackPer2"
        "FeedBackPer3 FeedBackPer4";
    grid-gap: 150px 50px;
}

.FeedBackPer[b-xlqhscoxaz] {
    user-select: none;
    background: #e2e2e4;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.2s;
}

    .FeedBackPer:hover[b-xlqhscoxaz] {
        transform: scale(1.1);
    }

    .FeedBackPer.FeedBackPer1[b-xlqhscoxaz] {
        grid-area: FeedBackPer1;
        margin-bottom: 100px;
        margin-bottom: 0px;
    }

    .FeedBackPer.FeedBackPer2[b-xlqhscoxaz] {
        grid-area: FeedBackPer2;
        margin-top: 100px;
        margin-top: 0px;
    }

    .FeedBackPer.FeedBackPer3[b-xlqhscoxaz] {
        grid-area: FeedBackPer3;
        margin-bottom: 100px;
        margin-bottom: 0px;
    }

    .FeedBackPer.FeedBackPer4[b-xlqhscoxaz] {
        grid-area: FeedBackPer4;
        margin-top: 100px;
        margin-top: 0px;
    }

    .FeedBackPer > div:nth-child(1)[b-xlqhscoxaz] {
        background: #2c308d;
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        border-radius: 50%;
        margin-top: -50px; /* Adjust as needed to position the icon */
    }

    .FeedBackPer > div:nth-child(2)[b-xlqhscoxaz] {
        margin-top: 10px;
        display: flex;
    }

    .FeedBackPer > div:nth-child(2) > div[b-xlqhscoxaz] {
        width: 20px;
        height: 20px;
        margin: 0px 5px;
    }

    .FeedBackPer > div:nth-child(3)[b-xlqhscoxaz] {
        margin-top: 10px;
        font-weight: bold;
    }

    .FeedBackPer > div:nth-child(4)[b-xlqhscoxaz] {
        padding: 50px;
    }

    .FeedBackPer div img[b-xlqhscoxaz] {
        max-width: 100%;
        max-height: 100%;
    }

.SuccessMessage[b-xlqhscoxaz] {
    font-weight: bold;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 100px;
}

    .SuccessMessage > div:nth-child(1)[b-xlqhscoxaz] {
        
    }

    .SuccessMessage > div:nth-child(6)[b-xlqhscoxaz] {
        margin-top: -10px;
        color: #ff3a21;
    }

.ThaiMapImg[b-xlqhscoxaz] {
    width: 25vw;
    padding: 1vw 3vw;
}


@media (width <= 1440px) {
    .Zone1 > div:nth-child(1)[b-xlqhscoxaz] {

    }

    .Zone1 > div:nth-child(2)[b-xlqhscoxaz] {
        font-size: 30px;
        font-weight: bold;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: end;
    }
}

@media (width <= 1300px) {

    .Zone1[b-xlqhscoxaz] {
        display: flex;
        margin: 0 70px;
        padding-top: 30px;
    }

        .Zone1 > div:nth-child(1)[b-xlqhscoxaz] {

        }

        .Zone1 > div:nth-child(2)[b-xlqhscoxaz] {
            font-size: 30px;
            font-weight: bold;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: end;
        }

    .FeedBackGrid[b-xlqhscoxaz] {
        display: grid;
        margin: 0 80px;
        margin-bottom: 150px;
        grid-template-areas:
            "FeedBackPer1 FeedBackPer2"
            "FeedBackPer3 FeedBackPer4";
        grid-gap: 50px;
    }

    .FeedBackPer[b-xlqhscoxaz] {
        background: #e2e2e4;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .FeedBackPer:nth-child(1)[b-xlqhscoxaz] {
            grid-area: FeedBackPer1;
        }

        .FeedBackPer:nth-child(2)[b-xlqhscoxaz] {
            grid-area: FeedBackPer2;
        }

        .FeedBackPer:nth-child(3)[b-xlqhscoxaz] {
            grid-area: FeedBackPer3;
        }

        .FeedBackPer:nth-child(4)[b-xlqhscoxaz] {
            grid-area: FeedBackPer4;
        }

        .FeedBackPer > div:nth-child(3)[b-xlqhscoxaz] {
            margin-top: 10px;
            font-weight: bold;
        }
}

@media (width <= 1000px) {

    

    .Zone1[b-xlqhscoxaz] {
        display: flex;
        margin: 0 50px;
        padding-top: 30px;
    }

        .Zone1 > div:nth-child(1)[b-xlqhscoxaz] {

        }

        .Zone1 > div:nth-child(2)[b-xlqhscoxaz] {
            font-size: 20px;
            font-weight: bold;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: end;
        }

    .FeedBackGrid[b-xlqhscoxaz] {
        display: grid;
        margin: 0 80px;
        margin-bottom: 150px;
        grid-template-areas:
            "FeedBackPer1 FeedBackPer2"
            "FeedBackPer3 FeedBackPer4";
        grid-gap: 5vw 2.5vw;
    }

    .FeedBackPer[b-xlqhscoxaz] {
        background: #e2e2e4;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: 0.2s;
    }

        .FeedBackPer:hover[b-xlqhscoxaz] {
            transform: scale(1.1);
        }
}

@media (width <= 720px) {

    .Zone1[b-xlqhscoxaz] {
        display: flex;
        margin: 0 20px;
        padding-top: 30px;
    }

        .Zone1 > div:nth-child(1)[b-xlqhscoxaz] {

        }

        .Zone1 > div:nth-child(2)[b-xlqhscoxaz] {
            font-size: 20px;
            font-weight: bold;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: end;
        }

    .FeedBackPer > div:nth-child(3)[b-xlqhscoxaz] {
        margin-top: 10px;
        font-weight: bold;
    }

    .FeedBackGrid[b-xlqhscoxaz] {
        margin: 0 40px;
    }

    .FeedBackPer > div:nth-child(4)[b-xlqhscoxaz] {
        padding: 20px;
    }
}

@media (width <= 560px) {

    .Zone1[b-xlqhscoxaz] {
        display: flex;
        margin: 0 20px;
        padding-top: 30px;
    }

        .Zone1 > div:nth-child(1)[b-xlqhscoxaz] {

        }

        .Zone1 > div:nth-child(2)[b-xlqhscoxaz] {
            font-size: 20px;
            font-weight: bold;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: end;
        }

    .SuccessMessage[b-xlqhscoxaz] {
        font-size: 20px;
        font-weight: bold;
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .FeedBackPer > div:nth-child(3)[b-xlqhscoxaz] {
        margin-top: 10px;
        font-weight: bold;
    }

    .FeedBackGrid[b-xlqhscoxaz] {
        margin: 0 40px;
    }

    .FeedBackPer > div:nth-child(4)[b-xlqhscoxaz] {
        padding: 20px;
    }
}

@media (width <= 500px) {

    .Zone1[b-xlqhscoxaz] {
        display: flex;
        margin: 0 20px;
        padding-top: 30px;
    }

        .Zone1 > div:nth-child(1)[b-xlqhscoxaz] {

        }

        .Zone1 > div:nth-child(2)[b-xlqhscoxaz] {
            font-size: 15px;
            font-weight: bold;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: end;
        }

    .FeedBackPer > div:nth-child(3)[b-xlqhscoxaz] {
        margin-top: 10px;
    }

    .FeedBackGrid[b-xlqhscoxaz] {
        margin: 0 30px;
    }

    .FeedBackPer > div:nth-child(4)[b-xlqhscoxaz] {
        padding: 20px;
    }
}

.NewFontSize1[b-xlqhscoxaz] {
    font-size: 1.2vw;
}

.NewFontSize2[b-xlqhscoxaz] {
    font-size: 1.775vw;
}

.NewFontSize3[b-xlqhscoxaz] {
    font-size: 3.35vw;
}

@media (width <= 530px) {
    .ThaiMapImg[b-xlqhscoxaz] {
        width: 42vw;
        padding: 1vw 3vw;
    }
    .FeedBackPer > div:nth-child(1)[b-xlqhscoxaz] {
        background: #2c308d;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        border-radius: 50%;
        margin-top: -25px; /* Adjust as needed to position the icon */
    }

    .FeedBackPer > div:nth-child(2) > div[b-xlqhscoxaz] {
        width: 10px;
        height: 10px;
        margin: 0px 5px;
    }

    .NewFontSize1[b-xlqhscoxaz] {
        font-size: 2vw;
    }

    .NewFontSize2[b-xlqhscoxaz] {
        font-size: 2vw;
    }

    .NewFontSize3[b-xlqhscoxaz] {
        font-size: 4.5vw;
    }
}
/* /Components/Layout/CwSoftware/Component/CwSoftwareOurTeamPage.razor.rz.scp.css */
.CallCenterIcon[b-zaggtl0vu3] {
    width: 250px;
    height: 250px;
    background: linear-gradient(90deg,rgba(236, 15, 103, 1) 0%, rgba(238, 66, 44, 1) 50%, rgba(239, 87, 44, 1) 100%);
    -webkit-mask: url(./CwsoftwareImage/CallCenterIcon.svg) no-repeat center;
    -webkit-mask-size: contain; /* ปรับขนาด svg ให้พอดี */
    mask: url(./CwsoftwareImage/CallCenterIcon.svg) no-repeat center;
    mask-size: contain;
    z-index: -1;
}

.Zone1[b-zaggtl0vu3] {
    font-weight: bold;
    margin-left: 50px;
}

    .Zone1 > div:nth-child(1)[b-zaggtl0vu3] {
        
    }

    .Zone1 > div:nth-child(2)[b-zaggtl0vu3] {
        
    }

    .Zone1 > div:nth-child(3)[b-zaggtl0vu3] {
        
    }

.CusShopGrid[b-zaggtl0vu3] {
    display: grid;
    grid-template-columns: repeat(4,auto);
    grid-template-rows: 500px;
    gap: 20px;
    margin: 50px;
}

    .CusShopGrid .ShopDetail[b-zaggtl0vu3] {
        color: white;
        background: #2c308d;
        text-align: center;
        padding: 5px;
        border-radius: 10px;
        font-weight: bold;
    }

    .CusShopGrid > div[b-zaggtl0vu3] {
        display: flex;
        flex-direction: column;
    }

    .CusShopGrid > div > div:nth-child(2)[b-zaggtl0vu3] {
        margin-top: 20px;
    }

    .CusShopGrid .ShopImg[b-zaggtl0vu3] {
        flex: 1;
        background-size: cover;
        background-position: center;
        border-radius: 10px;
    }

.OranageColor[b-zaggtl0vu3] {
    color: black;
}

.OurTeamGrid[b-zaggtl0vu3] {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-auto-rows: 1fr;
    gap: 50px 30px;
    margin: 50px;
}

    .OurTeamGrid > .FakeGrid[b-zaggtl0vu3] {
        background: none;
    }

    .OurTeamGrid > div[b-zaggtl0vu3] {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #f8f8f8;
    }

    .OurTeamGrid .TeamImg[b-zaggtl0vu3] {
        min-height: 300px;
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .OurTeamGrid .TeamName[b-zaggtl0vu3] {
        width: 90%;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .OurTeamGrid .TeamLine[b-zaggtl0vu3] {
        border-bottom: 1px solid black;
        width: 90%;
    }

    .OurTeamGrid .TeamPosition[b-zaggtl0vu3] {
        width: 90%;
        margin-top: 10px;
        padding-bottom: 10px;
    }

.CwGoodMain[b-zaggtl0vu3] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.OurTeamTextMain[b-zaggtl0vu3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    margin-top: 100px;
    margin-bottom: 100px;
}

@media (width <= 1460px) {
    .OurTeamGrid[b-zaggtl0vu3] {
        grid-template-columns: repeat(4,1fr);
    }
        .OurTeamGrid .TeamName[b-zaggtl0vu3] {

        }

        .OurTeamGrid .TeamLine[b-zaggtl0vu3] {
            border-bottom: 1px solid black;
            width: 90%;
        }

        .OurTeamGrid .TeamPosition[b-zaggtl0vu3] {

        }

        .OurTeamGrid .TeamImg[b-zaggtl0vu3] {
            min-height: 300px;
        }
}

@media (width <= 1200px) {
    .CusShopGrid[b-zaggtl0vu3] {
        grid-template-columns: repeat(2,auto);
        grid-template-rows: 500px 500px;
    }
    .OurTeamGrid .TeamName[b-zaggtl0vu3] {

    }

    .OurTeamGrid .TeamLine[b-zaggtl0vu3] {
        border-bottom: 1px solid black;
        width: 90%;
    }

    .OurTeamGrid .TeamPosition[b-zaggtl0vu3] {

    }

    .OurTeamGrid .TeamImg[b-zaggtl0vu3] {
        min-height: 250px;
    }
}

@media (width <= 960px) {
    .CallCenterIcon[b-zaggtl0vu3] {
        width: 200px;
        height: 200px;
    }

    .Zone1 > div:nth-child(1)[b-zaggtl0vu3] {
        
    }

    .Zone1 > div:nth-child(2)[b-zaggtl0vu3] {
        
    }

    .Zone1 > div:nth-child(3)[b-zaggtl0vu3] {
        
    }

    .OurTeamGrid[b-zaggtl0vu3] {
        gap: 30px 10px;
    }

    .OurTeamGrid .TeamName[b-zaggtl0vu3] {
        margin: 10px 0;
    }

    .OurTeamGrid .TeamLine[b-zaggtl0vu3] {
        border-bottom: 1px solid black;
        width: 90%;
    }

    .OurTeamGrid .TeamPosition[b-zaggtl0vu3] {

    }

    .OurTeamGrid .TeamImg[b-zaggtl0vu3] {
        min-height: 200px;
    }
}

@media (width <= 800px) {
    .CallCenterIcon[b-zaggtl0vu3] {
        width: 100px;
        height: 100px;
    }

    .Zone1 > div:nth-child(1)[b-zaggtl0vu3] {
       
    }

    .Zone1 > div:nth-child(2)[b-zaggtl0vu3] {
        
    }

    .Zone1 > div:nth-child(3)[b-zaggtl0vu3] {
        
    }

    .OranageColor[b-zaggtl0vu3] {
        font-size: 100px;
        font-weight: bold;
    }

    .CwGoodMain[b-zaggtl0vu3] {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .OurTeamGrid[b-zaggtl0vu3] {
        gap: 30px 10px;
    }

    .OurTeamGrid .TeamName[b-zaggtl0vu3] {
        margin: 5px 0;
    }

    .OurTeamGrid .TeamLine[b-zaggtl0vu3] {
        border-bottom: 1px solid black;
        width: 90%;
    }

    .OurTeamGrid .TeamPosition[b-zaggtl0vu3] {

    }

    .OurTeamGrid .TeamImg[b-zaggtl0vu3] {
        min-height: 150px;
    }
}

@media (width <= 640px) {

    .Zone1[b-zaggtl0vu3] {
        font-weight: bold;
        margin-left: 20px;
    }

    .CallCenterIcon[b-zaggtl0vu3] {
        width: 100px;
        height: 100px;
    }

    .Zone1 > div:nth-child(1)[b-zaggtl0vu3] {
        
    }

    .Zone1 > div:nth-child(2)[b-zaggtl0vu3] {
        
    }

    .Zone1 > div:nth-child(3)[b-zaggtl0vu3] {
        
    }

    .CusShopGrid[b-zaggtl0vu3] {
        grid-template-columns: repeat(1,auto);
        grid-template-rows: 500px 500px 500px 500px;
    }

    .OranageColor[b-zaggtl0vu3] {
        font-size: 70px;
        font-weight: bold;
    }

    .CwGoodMain[b-zaggtl0vu3] {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .OurTeamGrid .TeamName[b-zaggtl0vu3] {

    }

    .OurTeamGrid .TeamLine[b-zaggtl0vu3] {
        border-bottom: 1px solid black;
        width: 90%;
    }

    .OurTeamGrid .TeamPosition[b-zaggtl0vu3] {

    }

    .OurTeamGrid .TeamImg[b-zaggtl0vu3] {
        min-height: 100px;
    }

}

@media (width <= 530px) {
    .OurTeamGrid[b-zaggtl0vu3] {
        gap: 20px 5px;
        grid-template-columns: repeat(5,1fr);
    }
    .OurTeamGrid .TeamImg[b-zaggtl0vu3] {
        min-height: 75px;
    }
    .OurTeamGrid .TeamName[b-zaggtl0vu3] {

    }
}

@media (width <= 430px) {

    .Zone1[b-zaggtl0vu3] {
        font-weight: bold;
        margin-left: 20px;
    }

    .CallCenterIcon[b-zaggtl0vu3] {
        width: 100px;
        height: 100px;
    }

    .Zone1 > div:nth-child(1)[b-zaggtl0vu3] {
        
    }

    .Zone1 > div:nth-child(2)[b-zaggtl0vu3] {
        
    }

    .Zone1 > div:nth-child(3)[b-zaggtl0vu3] {
        
    }
    .OranageColor[b-zaggtl0vu3] {
        font-size: 50px;
        font-weight: bold;
    }

    .CwGoodMain[b-zaggtl0vu3] {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.OurTeamGrid > div[b-zaggtl0vu3] {
    transition: 0.2s;
    user-select: none;
}

.OurTeamGrid > div:hover[b-zaggtl0vu3] {
    transform: scale(1.1);
}

.NewFontSize1[b-zaggtl0vu3] {
    font-size: 1.2vw;
    font-weight: normal;
}

.NewFontSize2[b-zaggtl0vu3] {
    font-size: 1.775vw;
    font-weight: normal;
}

.NewFontSize3[b-zaggtl0vu3] {
    font-size: 3.35vw;
}

.NewHead2[b-zaggtl0vu3] {
    font-size: 1.775vw;
    font-weight: normal;
}

@media (width <= 530px) {
    .NewHead2[b-zaggtl0vu3] {
        font-size: 4vw;
        font-weight: normal;
    }
    .OranageColor[b-zaggtl0vu3] {
        font-size: 4vw;
    }
    .CwGoodMain > span[b-zaggtl0vu3] {
        font-size: 4vw;
    }
    .NewFontSize1[b-zaggtl0vu3] {
        font-size: 2vw;
    }

    .NewFontSize2[b-zaggtl0vu3] {
        font-size: 2.5vw;
    }

    .NewFontSize3[b-zaggtl0vu3] {
        font-size: 6vw;
    }

    .CusShopGrid .ShopDetail > div:nth-child(1)[b-zaggtl0vu3] {
        font-size: 5vw;
    }

    .CusShopGrid .ShopDetail > div:nth-child(2)[b-zaggtl0vu3] {
        font-size: 4vw;
    }
    .CusShopGrid[b-zaggtl0vu3] {
        margin-bottom: 25px;
    }
    .OurTeamTextMain[b-zaggtl0vu3] {
        margin-top: 25px;
        margin-bottom: 15px;
    }
    .OurTeamGrid[b-zaggtl0vu3] {
        margin-top: 0px;
    }
}

/* /Components/Layout/CwSoftware/Component/CwSoftwarePackagePage.razor.rz.scp.css */
img[b-xzko4f8zox] {
    max-width: 100%;
    max-height: 100%;
}

.Space1[b-xzko4f8zox] {
    margin: 80px 50px;
}

.IconOneTimeBuy[b-xzko4f8zox] {
    height: 50px;
}

.OneTimeBuy[b-xzko4f8zox] {
    margin-left: 30px;
    font-size: 60px;
    font-weight: bold;
}

.MarkDetail[b-xzko4f8zox] {
    color: #9d9fa1;
    text-align: end;
    margin: 20px 50px;
    font-size: 16px;
}

.PackageGrid[b-xzko4f8zox] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 50px;
}

    .PackageGrid > div[b-xzko4f8zox] {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .PackageGrid .PackageName[b-xzko4f8zox] {
        width: 70%;
        border: 2px solid #221f1f;
        border-radius: 500px;
        text-align: center;
        margin-bottom: 50px;
    }

    .PackageGrid .PackageDetailMain[b-xzko4f8zox] {
        background: #f8f8f8;
        width: 100%;
        border: 3px solid #e8e8e8;
        border-radius: 10px;
    }

        .PackageGrid .PackageDetailMain .Per[b-xzko4f8zox] {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px;
            border-bottom: 3px solid #e8e8e8;
            font-weight: bold;
        }

            .PackageGrid .PackageDetailMain .Per > .Head[b-xzko4f8zox] {
                font-weight: normal !important;
            }

            .PackageGrid .PackageDetailMain .Per > .Detail[b-xzko4f8zox] {
                text-align: center;
                font-weight: normal!important;
            }

            .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark[b-xzko4f8zox] {
                width: 100%;
                display: flex;
                align-items: center;
                margin-top: 10px;
            }
                .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .TrueMarkDiv[b-xzko4f8zox] {
                    height: 1vw!important;
                    width: 1vw!important;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .Text[b-xzko4f8zox] {
                    margin-left: 15px;
                    font-size: 30px;
                }

            .PackageGrid .PackageDetailMain .Per > .Price[b-xzko4f8zox] {
                font-size: 1.2vw !important;
                font-weight: normal !important;
            }

.TextMorePackage[b-xzko4f8zox] {
    margin: 50px;
}

    .TextMorePackage > span:nth-child(1)[b-xzko4f8zox] {
        color: #ff3a21;
    }

    .TextMorePackage > span:nth-child(2)[b-xzko4f8zox] {
    }

    .TextMorePackage > span:nth-child(3)[b-xzko4f8zox] {
    }

.RegisterTestButton[b-xzko4f8zox] {
    display: flex;
    align-items: center;
    height: 30px;
    border-radius: 9000px;
    font-size: 55px;
    width: fit-content;
    color: white;
    border-radius: 50vw;
    padding: 1.5vw 2.5vw;
    margin-top: 3vw;
    font-size: 1.775vw;
    background: linear-gradient(90deg,rgba(236, 15, 103, 1) 0%, rgba(238, 66, 44, 1) 50%, rgba(239, 87, 44, 1) 100%);
}

@media (width < 3000px) and (width > 530px) 
{
    .PackageGrid .PackageName[b-xzko4f8zox] {
        font-size: 1.775vw;
    }

    .PackageDetailMain .Per .Head[b-xzko4f8zox] {
        font-size: 1.775vw;
    }

    .PackageDetailMain > .Per .Detail[b-xzko4f8zox] {
        font-size: 1.775vw;
    }

    .PackageDetailMain > .Per .Price[b-xzko4f8zox] {
        font-size: 1.2vw;
    }
    .RegisterTestButton[b-xzko4f8zox] {
        padding: 1.5vw 2.5vw;
        font-size: 1.775vw;
    }
    .TextMorePackage[b-xzko4f8zox] {
        font-size: 1.775vw !important;
        margin: 50px;
    }
    .PackageGrid .PackageName[b-xzko4f8zox] {
        font-size: 1.775vw !important;
        width: 70%;
        border: 2px solid #221f1f;
        border-radius: 500px;
        text-align: center;
        margin-bottom: 50px;
    }
    .OneTimeBuy[b-xzko4f8zox] {
        font-size: 1.775vw;
    }
    .PackageGrid .PackageDetailMain .Per > .Head[b-xzko4f8zox] {
        font-size: 1.775vw !important;
        font-weight: normal !important;
    }

    .PackageGrid .PackageDetailMain .Per > .Detail[b-xzko4f8zox] {
        font-size: 1.775vw !important;
        text-align: center;
        font-weight: normal !important;
    }

    .PackageGrid .PackageDetailMain .Per > .Price[b-xzko4f8zox] {
        font-size: 1.2vw !important;
        font-weight: normal !important;
    }
}

@media (max-width: 1620px) {

    .PackageGrid .PackageName[b-xzko4f8zox] {
        font-size: 30px;
        width: 70%;
        border: 2px solid #221f1f;
        border-radius: 500px;
        text-align: center;
        margin-bottom: 50px;
    }

    .PackageGrid .PackageDetailMain .Per > .Head[b-xzko4f8zox] {
        
    }

    .PackageGrid .PackageDetailMain .Per > .Detail[b-xzko4f8zox] {
        font-size: 30px;
        text-align: center;
    }

    .PackageGrid .PackageDetailMain .Per > .Price[b-xzko4f8zox] {
        font-size: 25px;
    }

    .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .TrueMarkDiv[b-xzko4f8zox] {
        height: 30px;
        width: 30px;
    }

    .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .Text[b-xzko4f8zox] {
        margin-left: 15px;
        font-size: 30px;
    }

    .TextMorePackage[b-xzko4f8zox] {
        font-size: 65px;
    }
}

@media (max-width: 1360px) {
    .PackageGrid .PackageName[b-xzko4f8zox] {
        font-size: 20px;
    }

    .PackageGrid .PackageDetailMain .Per > .Head[b-xzko4f8zox] {
       
    }

    .PackageGrid .PackageDetailMain .Per > .Detail[b-xzko4f8zox] {
        font-size: 20px;
    }
    .PackageGrid .PackageDetailMain .Per > .Price[b-xzko4f8zox] {
        font-size: 15px;
    }
    .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark[b-xzko4f8zox] {
        width: 80%;
    }
    .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .TrueMarkDiv[b-xzko4f8zox] {
        height: 20px;
        width: 20px;
    }

    .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .Text[b-xzko4f8zox] {
        margin-left: 15px;
        font-size: 16px;
    }

    .TextMorePackage[b-xzko4f8zox] {
        font-size: 50px;
    }
}


@media (max-width: 1050px) {
    .PackageGrid .PackageName[b-xzko4f8zox] {
        font-size: 15px;
    }

    .PackageGrid .PackageDetailMain .Per > .Head[b-xzko4f8zox] {
       
    }

    .PackageGrid .PackageDetailMain .Per > .Detail[b-xzko4f8zox] {
        font-size: 15px;
    }

    .PackageGrid .PackageDetailMain .Per > .Price[b-xzko4f8zox] {
        font-size: 13px;
    }
    .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark[b-xzko4f8zox] {
        width: 100%;
    }

    .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .TrueMarkDiv[b-xzko4f8zox] {
        height: 20px;
        width: 20px;
    }

    .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .Text[b-xzko4f8zox] {
        margin-left: 15px;
        font-size: 15px;
    }
    .TextMorePackage[b-xzko4f8zox] {
        font-size: 40px;
    }
}

@media (max-width: 880px) {
    .PackageGrid[b-xzko4f8zox] {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        margin: 0 50px;
    }

        .PackageGrid .PackageName[b-xzko4f8zox] {
            font-size: 50px;
            width: 100%;
        }

        .PackageGrid .PackageDetailMain .Per > .Head[b-xzko4f8zox] {
            
        }

        .PackageGrid .PackageDetailMain .Per > .Detail[b-xzko4f8zox] {
            font-size: 40px;
        }

        .PackageGrid .PackageDetailMain .Per > .Price[b-xzko4f8zox] {
            font-size: 40px;
        }

        .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark[b-xzko4f8zox] {
            width: 60%;
        }

            .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .TrueMarkDiv[b-xzko4f8zox] {
                height: 30px;
                width: 30px;
            }

            .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .Text[b-xzko4f8zox] {
                margin-left: 15px;
                font-size: 36px;
            }

        .PackageGrid > div[b-xzko4f8zox] {
            margin-top: 30px;
        }

    .OneTimeBuy[b-xzko4f8zox] {
        margin-left: 30px;
        font-size: 50px;
        font-weight: bold;
    }

    .TextMorePackage[b-xzko4f8zox] {
        font-size: 35px;
    }

}

@media (max-width: 820px) {
    .PackageGrid[b-xzko4f8zox] {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        margin: 0 50px;
    }

        .PackageGrid .PackageName[b-xzko4f8zox] {
            font-size: 40px;
        }

        .PackageGrid .PackageDetailMain .Per > .Head[b-xzko4f8zox] {
            
        }

        .PackageGrid .PackageDetailMain .Per > .Detail[b-xzko4f8zox] {
            font-size: 30px;
        }

        .PackageGrid .PackageDetailMain .Per > .Price[b-xzko4f8zox] {
            font-size: 26px!important;
        }

        .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark[b-xzko4f8zox] {
            width: 60%;
        }

            .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .TrueMarkDiv[b-xzko4f8zox] {
                height: 30px;
                width: 30px;
            }

            .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .Text[b-xzko4f8zox] {
                margin-left: 15px;
                font-size: 30px;
            }

        .PackageGrid > div[b-xzko4f8zox] {
            margin-top: 30px;
        }
    .OneTimeBuy[b-xzko4f8zox] {
        margin-left: 30px;
        font-size: 40px;
        font-weight: bold;
    }
    .TextMorePackage[b-xzko4f8zox] {
        font-size: 30px;
    }
}

@media (max-width: 660px) {
    .PackageGrid[b-xzko4f8zox] {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        margin: 0 50px;
    }

        .PackageGrid .PackageName[b-xzko4f8zox] {
            font-size: 40px;
        }

        .PackageGrid .PackageDetailMain .Per > .Head[b-xzko4f8zox] {
            
        }

        .PackageGrid .PackageDetailMain .Per > .Detail[b-xzko4f8zox] {
            font-size: 30px;
        }

        .PackageGrid .PackageDetailMain .Per > .Price[b-xzko4f8zox] {
            font-size: 30px;
        }

        .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark[b-xzko4f8zox] {
            width: 80%;
        }

            .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .TrueMarkDiv[b-xzko4f8zox] {
                height: 30px;
                width: 30px;
            }

            .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .Text[b-xzko4f8zox] {
                margin-left: 15px;
                font-size: 26px;
            }

        .PackageGrid > div[b-xzko4f8zox] {
            margin-top: 30px;
        }
    .OneTimeBuy[b-xzko4f8zox] {
        margin-left: 30px;
        font-size: 30px;
        font-weight: bold;
    }
    .IconOneTimeBuy[b-xzko4f8zox] {
        height: 40px;
    }
    .TextMorePackage[b-xzko4f8zox] {
        font-size: 23px;
    }

    .MarkDetail[b-xzko4f8zox] {
        font-size: 12px;
    }
}

@media (max-width: 550px) {
    .PackageGrid[b-xzko4f8zox] {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        margin: 0 50px;
    }

        .PackageGrid .PackageName[b-xzko4f8zox] {
            font-size: 35px;
        }

        .PackageGrid .PackageDetailMain .Per > .Head[b-xzko4f8zox] {
            
        }

        .PackageGrid .PackageDetailMain .Per > .Detail[b-xzko4f8zox] {
            font-size: 25px;
        }

        .PackageGrid .PackageDetailMain .Per > .Price[b-xzko4f8zox] {
            font-size: 18px!important;
        }

        .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark[b-xzko4f8zox] {
            width: 80%;
        }

            .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .TrueMarkDiv[b-xzko4f8zox] {
                height: 30px;
                width: 30px;
            }

            .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .Text[b-xzko4f8zox] {
                margin-left: 15px;
                font-size: 21px;
            }

        .PackageGrid > div[b-xzko4f8zox] {
            margin-top: 30px;
        }
    .OneTimeBuy[b-xzko4f8zox] {
        margin-left: 30px;
        font-size: 20px;
        font-weight: bold;
    }
    .IconOneTimeBuy[b-xzko4f8zox] {
        height: 30px;
    }
    .TextMorePackage[b-xzko4f8zox] {
        font-size: 20px;
    }

    .MarkDetail[b-xzko4f8zox] {
        font-size: 8px;
    }
}

@media (max-width: 490px) {
    .PackageGrid[b-xzko4f8zox] {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        margin: 0 50px;
    }

        .PackageGrid .PackageName[b-xzko4f8zox] {
            font-size: 30px;
        }

        .PackageGrid .PackageDetailMain .Per > .Head[b-xzko4f8zox] {
            
        }

        .PackageGrid .PackageDetailMain .Per > .Detail[b-xzko4f8zox] {
            font-size: 20px;
        }

        .PackageGrid .PackageDetailMain .Per > .Price[b-xzko4f8zox] {
            font-size: 16px!important;
        }

        .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark[b-xzko4f8zox] {
            width: 80%;
        }

            .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .TrueMarkDiv[b-xzko4f8zox] {
                height: 30px;
                width: 30px;
            }

            .PackageGrid .PackageDetailMain .Per > .Detail.TrueMark > .Text[b-xzko4f8zox] {
                margin-left: 15px;
                font-size: 16px;
            }

        .PackageGrid > div[b-xzko4f8zox] {
            margin-top: 0px;
        }

    .TextMorePackage[b-xzko4f8zox] {
        margin: 20px;
        display: flex;
        justify-content: center;
    }

    .RegisterTestButton[b-xzko4f8zox] {
        margin-top: 5px;
        font-size: 12px;
        padding: 15px;
        cursor: pointer;
    }

    .MarkDetail[b-xzko4f8zox] {
        font-size: 8px;
        margin: 20px;
    }
}

.NewFontSize1[b-xzko4f8zox] {
    font-size: 1.2vw;
}

.NewFontSize2[b-xzko4f8zox] {
    font-size: 1.775vw;
}

.NewFontSize3[b-xzko4f8zox] {
    font-size: 3.35vw;
}

.NewFontSize1[b-xzko4f8zox] {
    font-size: 1.2vw;
}

.NewFontSize2[b-xzko4f8zox] {
    font-size: 1.775vw;
}

.NewFontSize3[b-xzko4f8zox] {
    font-size: 3.35vw;
}

.HeaderIconPer[b-xzko4f8zox] {
    width: 100%;
}

.NewFontSize1EN[b-xzko4f8zox] {
    font-size: 1.2vw;
}

@media (width <= 530px) {
    .TextMorePackage[b-xzko4f8zox] {
        font-size: 3.35vw;
    }
    .PackageDetailMain > .Per .Head[b-xzko4f8zox] {
        font-size: 3.35vw;
    }
    .PackageDetailMain > .Per .Detail[b-xzko4f8zox] {
        font-size: 1.775vw;
    }
    .PackageDetailMain > .Per .Price[b-xzko4f8zox] {
        font-size: 1.2vw;
    }
    .NewFontSize1[b-xzko4f8zox] {
        font-size: 2vw;
    }
    .NewFontSize1EN[b-xzko4f8zox] {
        font-size: 1.5vw;
    }

    .NewFontSize2[b-xzko4f8zox] {
        font-size: 2.5vw;
    }

    .NewFontSize3[b-xzko4f8zox] {
        font-size: 4.5vw;
    }
    .Space1[b-xzko4f8zox] {
        margin: 40px 50px 40px 50px;
    }
    .PackageName[b-xzko4f8zox] {
        margin-bottom: 25px!important;
    }
    .HeaderIconPer[b-xzko4f8zox] {
        width: 10vw;
    }
}

.LineWhiteGradient[b-xzko4f8zox] {
    width: 1px;
    min-width: 1px;
    margin: 0px 2vw;
    background: linear-gradient(0deg,rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
}
/* /Components/Layout/CwSoftware/CwSoftwareMainLayout.razor.rz.scp.css */
@font-face {
    font-family: 'Mine_Sukhumvit';
    src: url('../fonts/SukhumvitSet-Medium.ttf');
}

.MainFont[b-bxd2alec9d] {
    font-family: Mine_Sukhumvit;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 8vw;
}

.hidescroll[b-bxd2alec9d]::-webkit-scrollbar {
    display: none;
}

@media (width <= 530px) {
    .MainFont[b-bxd2alec9d] {
        font-size: 14px;
        margin: 0 0;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */


.page[b-0h018imvqa] {
    position: relative;
    background: #f5f5f5 !important;
    min-height: 100%;
    user-select: none;
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

main[b-0h018imvqa] {
    flex: 1;
}

.sidebar[b-0h018imvqa] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-0h018imvqa] {

    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-0h018imvqa]  a, .top-row[b-0h018imvqa]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-0h018imvqa]  a:hover, .top-row[b-0h018imvqa]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-0h018imvqa]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-0h018imvqa] {
        justify-content: space-between;
    }

    .top-row[b-0h018imvqa]  a, .top-row[b-0h018imvqa]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {

    .sidebar[b-0h018imvqa] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-0h018imvqa] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-0h018imvqa]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-0h018imvqa], article[b-0h018imvqa] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-0h018imvqa] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-0h018imvqa] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.RowMaxWidth[b-0h018imvqa] {
    position: relative;
    max-width: 1110px;
    width: 100%;
    padding-top: 0;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    flex: 1;
}

.StatusLoadingDiv[b-0h018imvqa] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: grid;
    place-items: center;
    z-index: 100000;
}


    .StatusLoadingDiv .Img[b-0h018imvqa] {
        width: 50px;
        height: 50px;
    }

.TopNav[b-0h018imvqa] {
    position: fixed;
    /*left: env(safe-area-inset-bottom, 0);
    top: env(safe-area-inset-bottom, 0);*/
    left: 0;
    top: 0;
    width: 100%;
    height: 80px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 999;
    /*    box-shadow: #cac6c6 0px 5px 20px;*/
    position: fixed;
    inset: 0 auto auto 0; /* top: 0; left: 0 */
    width: 100%;
    height: 80px;
    padding-top: env(safe-area-inset-top);
    background-color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 999;
    box-sizing: border-box;
}

    .TopNav .SearchBarDiv[b-0h018imvqa] {
        background: white;
        width: 95%;
        border-radius: 5px;
        display: flex;
        overflow: hidden;
    }

        .TopNav .SearchBarDiv svg[b-0h018imvqa] {
            fill: #233134;
        }

        .TopNav .SearchBarDiv input[b-0h018imvqa] {
            border: none;
            outline: none;
            flex: 1;
            padding-left: 15px;
            font-size: 20px;
            font-weight: normal;
        }

            .TopNav .SearchBarDiv input:focus[b-0h018imvqa] {
                border: none !important;
                box-shadow: none;
                outline: none;
            }

.BottomNav[b-0h018imvqa] {
    position: fixed;
    left: env(safe-area-inset-bottom, 0);
    bottom: env(safe-area-inset-bottom, 0);
    /*left: 0;
    bottom: 0;*/
    width: 100%;
    height: 80px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 999;
    box-shadow: #cac6c6 0px -5px 20px;
}

.BottomNav .Per[b-0h018imvqa] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .BottomNav .Per div:nth-child(2)[b-0h018imvqa] {
        margin-top: 5px;
        color: #bfbfbf;
    }

    .BottomNav .Per.CenterSVG[b-0h018imvqa] {
        margin-top: -35px;
    }

        .BottomNav .Per.CenterSVG div:nth-child(1)[b-0h018imvqa] {
            background: #f3f1f1;
            border-radius: 50%;
            padding: 10px;
            border: solid 1px #eae9e9;
            box-shadow: #cac6c6 0px 3px 5px;
        }

        .BottomNav .Per.CenterSVG div:nth-child(2)[b-0h018imvqa] {
            margin-top: 0px;
        }

.ClassSVG[b-0h018imvqa] {
    fill: #bfbfbf;
}


@media (min-width: 768px)
{
    .TopNav[b-0h018imvqa] {
        display: none;
    }
    .BottomNav[b-0h018imvqa] {
        display: none;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-10ipabd57v] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-10ipabd57v] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-10ipabd57v] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
    background: #dbd9d9;
}

.navbar-brand[b-10ipabd57v] {
    font-size: 1.1rem;
}

.bi[b-10ipabd57v] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-10ipabd57v] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-10ipabd57v] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-10ipabd57v] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-10ipabd57v] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-10ipabd57v] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-10ipabd57v] {
        padding-bottom: 1rem;
    }

    .nav-item[b-10ipabd57v]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-10ipabd57v]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-10ipabd57v]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-10ipabd57v] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-10ipabd57v] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-10ipabd57v] {
        display: none;
    }

    .nav-scrollable[b-10ipabd57v] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ProductListLayout.razor.rz.scp.css */
/* /Components/M_Components/AddNewAddress.razor.rz.scp.css */
.ModalAddAddressDiv[b-aebb9d3hg2] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.AddressInputText[b-aebb9d3hg2] {
    padding: 10px;
    width: 100%;
    font-size: 14px;
    height: 38px;
    border: none;
    outline: 1px solid rgba(0,0,0,.14);
}


.ModalAddAddress[b-aebb9d3hg2] {
    width: 500px;
    padding: 24px;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,.54);
    border-radius: 2px;
}

.HeaderTitle[b-aebb9d3hg2] {
    font-size: 20px;
}

.TestAlertValid[b-aebb9d3hg2] {
    
}

.CustomerNameZone[b-aebb9d3hg2]{
    display: flex;
}

    .CustomerNameZone .input[b-aebb9d3hg2] {
        padding: 10px;
        width: 100%;
        font-size: 14px;
        height: 38px;
        border: none;
        outline: 1px solid rgba(0,0,0,.14);
    }

.CustomerName[b-aebb9d3hg2] {
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 12px;
    background: white;
    padding: 0 5px;
}

.CustomerPhone[b-aebb9d3hg2] {
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 12px;
    background: white;
    padding: 0 5px;
}

.AddressZone1[b-aebb9d3hg2] {
    position: relative;
    display: flex;
}

    .AddressZone1 select[b-aebb9d3hg2] {
        height: 38px;
        font-size: 14px;
        width: 100%;
        padding: 10px;
        border: none;
        outline: 1px solid rgba(0,0,0,.14);
        text-align: center;
    }

.AddressZone2[b-aebb9d3hg2] {
    position: relative;
    display: flex;
}

    .AddressZone2 select[b-aebb9d3hg2] {
        height: 38px;
        font-size: 14px;
        width: 100%;
        padding: 10px;
        border: none;
        outline: 1px solid rgba(0,0,0,.14);
    }

.AddressZone3[b-aebb9d3hg2] {
    position: relative;
    display: flex;
}

    .AddressZone3 select[b-aebb9d3hg2] {
        height: 38px;
        font-size: 14px;
        width: 100%;
        padding: 10px;
        border: none;
        outline: 1px solid rgba(0,0,0,.14);
    }

.ZipPostCode[b-aebb9d3hg2] {
    position: relative;
    height: 38px;
    font-size: 14px;
    width: 100%;
    padding: 10px;
    border: none;
    outline: 1px solid rgba(0,0,0,.14);
    text-align: center;
}

.AddressZone4[b-aebb9d3hg2] {
    position: relative;
    display: flex;
}

    .AddressZone4 .ToolTips[b-aebb9d3hg2] {
        position: absolute;
        display: none;
    }

    .AddressZone4 .AddressTextarea[b-aebb9d3hg2] {
        width: 100%;
        resize: none;
        height: 50px;
        padding: 10px;
        font-size: 14px;
        outline: 1px solid rgba(0,0,0,.14);
        border: none;
    }

.AddressNameTitle[b-aebb9d3hg2] {
    font-size: 14px;
}

.AddressNameInput[b-aebb9d3hg2] {
    font-size: 14px;
    padding: 10px;
    width: 100%;
    font-size: 14px;
    height: 38px;
    border: none;
    outline: 1px solid rgba(0,0,0,.14);
    margin-bottom: 23px;
}

.SelectDefaultZone[b-aebb9d3hg2] {
    font-size: 14px;
    margin-top: 23px;
    margin-bottom: 23px;
    display: flex;
    align-items: center;
    cursor: pointer;
    width: fit-content;
}

.DefaultButton[b-aebb9d3hg2] {
    width: 18px;
    height: 18px;
    border: 1px solid #808080;
}

    .DefaultButton.Active[b-aebb9d3hg2] {

    }

        .DefaultButton.Active[b-aebb9d3hg2]::after {
            font-family: GoogleFont;
            content: "\e876";
            font-size: 20px;
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 200, 'opsz' 20;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
        }

.DefaultButtonText[b-aebb9d3hg2] {
    margin-left: 10px;
}

.OperatorZone[b-aebb9d3hg2] {
    display: flex;
    justify-content: end;
}

.OperatorButtonSize[b-aebb9d3hg2] {
    padding: 10px;
    font-size: 14px;
    height: 36.8px;
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.25s;
}

.CancelButton[b-aebb9d3hg2] {
    outline: 1px solid rgba(0,0,0,.14);
}

    .CancelButton:hover[b-aebb9d3hg2] {
        background: rgb(242, 242, 242);
    }

.AcceptButton:hover[b-aebb9d3hg2] {
    filter: brightness(1.5);
}

@font-face {
    font-family: 'GoogleFont';
    font-style: normal;
    font-weight: 100 700;
    src: url('../fonts/google-font.woff2') format('woff2');
}

.Geogharpie[b-aebb9d3hg2] {
    position: absolute;
    top: -10px;
    left: 50%;
    font-size: 12px;
    background: white;
    padding: 0 5px;
    transform: translateX(-50%);
}

.LeftToolsTip[b-aebb9d3hg2] {
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 12px;
    background: white;
    padding: 0 5px;
    z-index: 2;
}
/* /Components/M_Components/Billing/BillActionBar.razor.rz.scp.css */
/* กันเนื้อหาท้ายหน้าโดนแถบ fixed บัง */
.BAB-Spacer[b-6z4a64g57b] {
    height: 76px;
}

/* left = ความกว้างเมนูซ้าย --be-nav-w (BackEndMainLayout.razor.css)
   z-index 8: สูงกว่า hero sticky (5) แต่ต่ำกว่า popup แก้ไขสินค้า (SearchProductDetail z-index 10) */
.BAB-Bar[b-6z4a64g57b] {
    position: fixed;
    left: var(--be-nav-w, 0px);
    right: 0;
    bottom: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 24px;
    background: #fff;
    border-top: 1px solid #e6eaf1;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, .06);
    box-sizing: border-box;
    font-family: 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
}

/* หน้าร้าน: ไม่มีเมนูซ้าย + มี footer ต่อท้ายหน้า → sticky ในเนื้อหา (กว้างเท่าการ์ด, เลื่อนถึง footer แล้วหยุดไม่ทับ) */
.BAB-Bar.BAB-Front[b-6z4a64g57b] {
    position: sticky;
    left: auto;
    right: auto;
    bottom: 12px;
    margin-top: 14px;
    padding: 12px 20px;
    border: 1px solid #e6eaf1;
    border-radius: 14px;
    box-shadow: 0 6px 20px -8px rgba(15, 23, 42, .18);
}

.BAB-Total[b-6z4a64g57b] {
    flex-shrink: 0;
    min-width: 0;
}

.BAB-TotalLabel[b-6z4a64g57b] {
    font-size: 12px;
    color: #4a5f86;
}

.BAB-TotalValue[b-6z4a64g57b] {
    font-family: 'IBM Plex Mono', 'IBM Plex Sans Thai', monospace;
    font-size: 20px;
    font-weight: 600;
    color: #095E5A;
    line-height: 1.25;
    white-space: nowrap;
}

.BAB-TotalSub[b-6z4a64g57b] {
    font-size: 11.5px;
    color: #5c666f;
    white-space: nowrap;
}

.BAB-Actions[b-6z4a64g57b] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* ปุ่มมาจาก ChildContent (scope ของหน้าที่เรียกใช้) — ต้องใช้ ::deep */
.BAB-Actions[b-6z4a64g57b]  .BAB-Btn {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition: filter .12s, background .12s;
}

/* [2026-09] ปุ่มหลัก = teal gradient เดียวกับปุ่ม "รีเซ็ตการกรอง" (BillFilterBar) ; ปุ่มรอง = outline teal ; ยกเลิก (Danger) คงสีแดง */
.BAB-Actions[b-6z4a64g57b]  .BAB-Btn-Primary {
    background: linear-gradient(135deg, #0B7A75, #3FB0A9);
    border: none;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 10px 22px -12px rgba(11,122,117,0.7);
    transition: filter .15s, transform .05s;
}

    .BAB-Actions[b-6z4a64g57b]  .BAB-Btn-Primary:hover {
        filter: brightness(1.06);
    }

    .BAB-Actions[b-6z4a64g57b]  .BAB-Btn-Primary:active {
        transform: translateY(1px);
    }

.BAB-Actions[b-6z4a64g57b]  .BAB-Btn-Outline {
    background: #fff;
    border-color: #B9E0DC;
    color: #0B7A75;
}

    .BAB-Actions[b-6z4a64g57b]  .BAB-Btn-Outline:hover {
        background: #E7F5F4;
    }

.BAB-Actions[b-6z4a64g57b]  .BAB-Btn-Danger {
    background: #fff;
    border-color: #fecaca;
    color: #dc2626;
}

    .BAB-Actions[b-6z4a64g57b]  .BAB-Btn-Danger:hover {
        background: #fef2f2;
    }

.BAB-Actions[b-6z4a64g57b]  .BAB-Btn-Disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

/* มือถือ: เมนูซ้ายซ่อน → เต็มจอ, ยอดรวมอยู่บน + ปุ่มแถวเดียวเลื่อนแนวนอน
   [2026-10] เดิมปุ่มตัดหลายแถว (บิล CPO 5 ปุ่ม = แถบสูง ~250px) + หัวบิล sticky ~460px → เหลือพื้นที่เนื้อหาบนจอ 844px แค่ ~80px
   (ตรวจพบโดย E2E UI audit) ; ปุ่มกลับลำดับ (row-reverse) ให้ปุ่มหลักที่อยู่ท้ายสุดขึ้นก่อนไม่ตกขอบขวา ; ซ่อนป้ายคีย์ลัด */
@media (max-width: 768px) {
    .BAB-Bar[b-6z4a64g57b] {
        left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 8px 12px;
    }

    .BAB-Actions[b-6z4a64g57b] {
        flex-wrap: nowrap;
        flex-direction: row-reverse;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

        .BAB-Actions[b-6z4a64g57b]::-webkit-scrollbar {
            display: none;
        }

        .BAB-Actions[b-6z4a64g57b]  .BAB-Btn {
            flex: 0 0 auto;
            height: 36px;
            padding: 0 12px;
            font-size: 13px;
        }

        .BAB-Actions[b-6z4a64g57b]  .MB-Kbd {
            display: none;
        }

    .BAB-Spacer[b-6z4a64g57b] {
        height: 100px;
    }
}
/* /Components/M_Components/Billing/BillCard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   MineBillCard — การ์ดสรุปบิล (ใช้ร่วม: SalesManage / StockRec ฯลฯ)
   ปรับใหม่: แยกส่วนชัด, การ์ดลอยมีขอบ+เงา, hover ยก, หัว/ท้ายมีพื้นต่างระดับ
   ════════════════════════════════════════════════════════════ */

.MineBillCard[b-bu0fsup2ex] {
    background: #fff;
    margin: 14px 0;
    border: 1px solid #e6e9f0;
    border-left: 4px solid var(--status-accent, #c9d3e3);
    border-radius: 14px;
    box-shadow: 0 10px 24px -18px rgba(23,45,80,0.45);
    overflow: hidden;
    transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}

    .MineBillCard:hover[b-bu0fsup2ex] {
        border-color: #cfd9ea;
        border-left-color: var(--status-accent, #c9d3e3);
        box-shadow: 0 18px 34px -20px rgba(23,45,80,0.55);
        transform: translateY(-2px);
    }

/* ── Header : ประเภท + เลขบิล + สถานะ ── */
.MineBillCard-Header[b-bu0fsup2ex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px 18px;
    padding: 13px 20px;
    flex-wrap: wrap;
    background: linear-gradient(180deg, #f7f9fc 0%, #f2f5fa 100%);
    border-bottom: 1px solid #eceff5;
}

.MineBillCard-HeaderLeft[b-bu0fsup2ex] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.MineBillCard-Code[b-bu0fsup2ex] {
    font-size: 14px;
    font-weight: 700;
    color: #1c2b45;
    letter-spacing: 0.2px;
}

/* ป้ายประเภทบิล — สีเข้ม อ่านออกทันทีว่าเป็นบิลอะไร */
.MineBillCard-TypeBadge[b-bu0fsup2ex] {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #fff;
    background: var(--accent, #3f5b86);
    padding: 3px 10px;
    border-radius: 6px;
    white-space: nowrap;
    text-transform: uppercase;
}

/* ป้ายสถานะบิล — พื้นอ่อน + จุดสี */
.MineBillCard-StatusBadge[b-bu0fsup2ex] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent, #3f5b86);
    background: color-mix(in srgb, var(--accent, #3f5b86) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent, #3f5b86) 32%, #fff);
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.MineBillCard-StatusDot[b-bu0fsup2ex] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent, #3f5b86);
    flex-shrink: 0;
}

/* ── Body : ลูกค้า / ที่อยู่ / ยอดเงิน ── */
.MineBillCard-Body[b-bu0fsup2ex] {
    padding: 16px 22px;
}

.MineBillCard-Row[b-bu0fsup2ex] {
    display: flex;
    width: 100%;
    gap: 16px;
    cursor: pointer;
    flex-wrap: wrap;
    border-radius: 10px;
    transition: background .14s ease;
}

    .MineBillCard-Row:hover[b-bu0fsup2ex] {
        background: #f8fafd;
    }

.MineBillCard-ImgDiv[b-bu0fsup2ex] {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 12px;
    border: 1px solid #e6e9f0;
    background: #f4f6fa;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .MineBillCard-ImgDiv img[b-bu0fsup2ex] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.MineBillCard-InfoZone[b-bu0fsup2ex] {
    flex: 1;
    min-width: 170px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}

.MineBillCard-NameZone[b-bu0fsup2ex] {
    white-space: nowrap;
    font-size: 16px;
    font-weight: 700;
    color: #17233a;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.MineBillCard-UnitZone[b-bu0fsup2ex] {
    color: #6b7688;
    font-size: 13px;
    line-height: 1.45;
    white-space: normal;
    word-break: break-word;
}

.MineBillCard-QtyZone[b-bu0fsup2ex] {
    font-size: 13px;
    color: #6b7688;
    letter-spacing: 0.2px;
}

.MineBillCard-RightZone[b-bu0fsup2ex] {
    min-width: 210px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    padding-left: 12px;
    border-left: 1px dashed #e6e9f0;
}

.MineBillCard-PriceZone[b-bu0fsup2ex] {
    color: #6b7688;
    font-size: 12.5px;
}

    .MineBillCard-PriceZone label[b-bu0fsup2ex] {
        padding-right: 4px;
        color: #9aa4b4;
    }

.MineBillCard-ItemCountZone[b-bu0fsup2ex] {
    color: #6b7688;
    font-size: 12.5px;
}

    .MineBillCard-ItemCountZone label[b-bu0fsup2ex] {
        padding-right: 4px;
        color: #9aa4b4;
    }

.MineBillCard-SumZone[b-bu0fsup2ex] {
    color: #ee4d2d;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

    .MineBillCard-SumZone label[b-bu0fsup2ex] {
        color: #9aa4b4;
        font-size: 12.5px;
        font-weight: 600;
        margin: 0;
        padding: 0;
    }

/* ── Footer : คำแนะนำสถานะ + ปุ่ม action ── */
.MineBillCard-Footer[b-bu0fsup2ex] {
    padding: 12px 22px 14px;
    background: #fbfcfe;
    border-top: 1px solid #eceff5;
}

.MineBillCard-ButtonZone[b-bu0fsup2ex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.MineBillCard-AdviceZone[b-bu0fsup2ex] {
    font-size: 13px;
    color: #6b7688;
    padding-left: 12px;
    border-left: 3px solid #cdd7e6;
    line-height: 1.4;
}

    .MineBillCard-AdviceZone:empty[b-bu0fsup2ex] {
        display: none;
    }

.MineBillCard-RefLink[b-bu0fsup2ex] {
    color: #2563a8;
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-style: dotted;
}

    .MineBillCard-RefLink:hover[b-bu0fsup2ex] {
        color: #17406e;
    }

.MineBillCard-Buttons[b-bu0fsup2ex] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}

/* ── มือถือ ── */
@media (max-width: 560px) {
    .MineBillCard[b-bu0fsup2ex] { margin: 12px 0; border-radius: 12px; }

    .MineBillCard-Header[b-bu0fsup2ex] { padding: 12px 16px; }

    .MineBillCard-Body[b-bu0fsup2ex] { padding: 14px 16px; }

    .MineBillCard-Row[b-bu0fsup2ex] { flex-direction: column; }

    .MineBillCard-ImgDiv[b-bu0fsup2ex] { width: 60px; height: 60px; min-width: 60px; }

    .MineBillCard-NameZone[b-bu0fsup2ex] { max-width: 100%; white-space: normal; }

    .MineBillCard-RightZone[b-bu0fsup2ex] {
        min-width: 0;
        width: 100%;
        align-items: flex-start;
        padding-left: 0;
        border-left: none;
        border-top: 1px dashed #e6e9f0;
        padding-top: 10px;
    }

    .MineBillCard-SumZone[b-bu0fsup2ex] { justify-content: flex-start; font-size: 22px; }

    .MineBillCard-Footer[b-bu0fsup2ex] { padding: 12px 16px; }

    .MineBillCard-ButtonZone[b-bu0fsup2ex] { flex-direction: column; align-items: stretch; }

    .MineBillCard-AdviceZone[b-bu0fsup2ex] { border-left: none; padding-left: 0; }

    .MineBillCard-Buttons[b-bu0fsup2ex] { width: 100%; margin-left: 0; }
}
/* /Components/M_Components/Billing/BillConfirmDialog.razor.rz.scp.css */
/* Popup ยืนยันของชุดหน้าบิลกลาง — สีอ้างตัวแปร --mb-* ใน wwwroot/css/bill-ui.css */
.BCD-Overlay[b-chj4po5e4d] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(2px);
    animation: BCDFade-b-chj4po5e4d .16s ease both;
    font-family: 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
}

.BCD-Card[b-chj4po5e4d] {
    --bcd-c: #0B7A75;
    --bcd-soft: #E7F5F4;
    --bcd-dark: #095E5A;
    width: min(440px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border-radius: 18px;
    border-top: 4px solid var(--bcd-c);
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .35);
    padding: 22px 22px 18px;
    outline: none;
    animation: BCDPop-b-chj4po5e4d .2s cubic-bezier(.2, .9, .3, 1.2) both;
    box-sizing: border-box;
}

.BCD-Success[b-chj4po5e4d] { --bcd-c: #15803d; --bcd-soft: #f0fdf4; --bcd-dark: #166534; }
.BCD-Warning[b-chj4po5e4d] { --bcd-c: #d97706; --bcd-soft: #fff7ed; --bcd-dark: #b45309; }
.BCD-Danger[b-chj4po5e4d]  { --bcd-c: #dc2626; --bcd-soft: #fef2f2; --bcd-dark: #b91c1c; }

.BCD-Head[b-chj4po5e4d] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.BCD-Icon[b-chj4po5e4d] {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bcd-soft);
    color: var(--bcd-c);
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--bcd-soft) 55%, transparent);
}

.BCD-HeadText[b-chj4po5e4d] { min-width: 0; padding-top: 2px; }

.BCD-Title[b-chj4po5e4d] {
    font-size: 17px;
    font-weight: 700;
    color: #12141a;
    line-height: 1.35;
}

.BCD-Message[b-chj4po5e4d] {
    margin-top: 4px;
    font-size: 13.5px;
    color: #5c666f;
    line-height: 1.55;
}

.BCD-Details[b-chj4po5e4d] {
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #f7f9fa;
    border: 1px solid #eef1f4;
}

.BCD-Row[b-chj4po5e4d] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 5px 0;
    font-size: 13px;
    color: #334155;
}

    .BCD-Row + .BCD-Row[b-chj4po5e4d] { border-top: 1px dashed #e4e8ec; }

.BCD-RowLabel[b-chj4po5e4d] { color: #5c666f; flex-shrink: 0; }

.BCD-RowValue[b-chj4po5e4d] {
    font-weight: 600;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

.BCD-Row.Total .BCD-RowValue[b-chj4po5e4d] {
    font-family: 'IBM Plex Mono', 'IBM Plex Sans Thai', monospace;
    font-size: 16px;
    color: var(--bcd-dark);
}

.BCD-Row.Due .BCD-RowValue[b-chj4po5e4d] { color: #dc2626; }
.BCD-Row.Paid .BCD-RowValue[b-chj4po5e4d] { color: #15803d; }

.BCD-Images[b-chj4po5e4d] { margin-top: 12px; }

.BCD-ImagesTitle[b-chj4po5e4d] {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

    .BCD-ImagesTitle span[b-chj4po5e4d] { font-weight: 400; color: #8a949c; }

.BCD-ImagesRow[b-chj4po5e4d] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.BCD-Thumb[b-chj4po5e4d] {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    border: 1px solid #e4e8ec;
    background: #f7f9fa;
    overflow: hidden;
    display: block;
    transition: border-color .15s;
}

    .BCD-Thumb:hover[b-chj4po5e4d] { border-color: var(--bcd-c); }

    .BCD-Thumb img[b-chj4po5e4d] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.BCD-Note[b-chj4po5e4d] {
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--bcd-soft);
    color: var(--bcd-dark);
    font-size: 12.5px;
    line-height: 1.5;
}

.BCD-Buttons[b-chj4po5e4d] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.BCD-Btn[b-chj4po5e4d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 116px;
    height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s, background .15s, transform .05s;
}

    .BCD-Btn:active:not(:disabled)[b-chj4po5e4d] { transform: translateY(1px); }
    .BCD-Btn:disabled[b-chj4po5e4d] { cursor: not-allowed; opacity: .7; }

.BCD-Cancel[b-chj4po5e4d] {
    background: #fff;
    border: 1px solid #dfe4e8;
    color: #334155;
}

    .BCD-Cancel:hover:not(:disabled)[b-chj4po5e4d] { background: #f4f6f8; }

.BCD-Confirm[b-chj4po5e4d] {
    background: var(--bcd-c);
    border: 1px solid var(--bcd-c);
    color: #fff;
}

    .BCD-Confirm:hover:not(:disabled)[b-chj4po5e4d] { filter: brightness(1.08); }

.BCD-Key[b-chj4po5e4d] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    padding: 0 5px;
    border-radius: 5px;
    border: 1px solid currentColor;
    opacity: .55;
    line-height: 1.6;
}

.BCD-Spinner[b-chj4po5e4d] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    animation: BCDSpin-b-chj4po5e4d .7s linear infinite;
}

@keyframes BCDFade-b-chj4po5e4d { from { opacity: 0; } to { opacity: 1; } }
@keyframes BCDPop-b-chj4po5e4d { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes BCDSpin-b-chj4po5e4d { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
    .BCD-Card[b-chj4po5e4d] { padding: 18px 16px 14px; }
    .BCD-Buttons[b-chj4po5e4d] { flex-direction: column-reverse; }
    .BCD-Btn[b-chj4po5e4d] { width: 100%; }
    .BCD-Key[b-chj4po5e4d] { display: none; }
}
/* /Components/M_Components/Billing/BillDocumentBoard.razor.rz.scp.css */
.MDB[b-41rd4a5r0c] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 26px 30px;
    font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
    font-size: 14px;
    color: #1e293b;
    background: #f8fafc;
    min-height: calc(100vh - var(--be-top-h, 0px));
}

.MDB input[b-41rd4a5r0c],
.MDB button[b-41rd4a5r0c],
.MDB table[b-41rd4a5r0c] {
    font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
}

/* ─── Header ─── */
.MDB-Head[b-41rd4a5r0c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.MDB-Title[b-41rd4a5r0c] {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}

.MDB-Sub[b-41rd4a5r0c] {
    margin-top: 4px;
    font-size: 12.5px;
    color: #64748b;
}

.MDB-HeadActions[b-41rd4a5r0c] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.MDB-BtnGhost[b-41rd4a5r0c],
.MDB-BtnDark[b-41rd4a5r0c] {
    border-radius: 9px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    transition: .15s;
}

.MDB-BtnGhost:hover[b-41rd4a5r0c] {
    background: #f1f5f9;
}

.MDB-BtnDark[b-41rd4a5r0c] {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

.MDB-BtnDark:hover[b-41rd4a5r0c] {
    background: #1e293b;
}

/* ─── Status tabs ─── */
.MDB-StatusTabs[b-41rd4a5r0c] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.MDB-STab[b-41rd4a5r0c] {
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: .15s;
}

.MDB-STab:hover[b-41rd4a5r0c] {
    border-color: #94a3b8;
    color: #0f172a;
}

.MDB-STab.On[b-41rd4a5r0c] {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.MDB-STabN[b-41rd4a5r0c] {
    background: #e2e8f0;
    color: #475569;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
}

.MDB-STab.On .MDB-STabN[b-41rd4a5r0c] {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* ─── Stat cards ─── */
.MDB-Stats[b-41rd4a5r0c] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.MDB-StatCard[b-41rd4a5r0c] {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    padding: 16px 18px;
}

.MDB-StatLabel[b-41rd4a5r0c] {
    font-size: 12.5px;
    color: #64748b;
    margin-bottom: 8px;
}

.MDB-StatValue[b-41rd4a5r0c] {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}

.MDB-StatValue.Warn[b-41rd4a5r0c] {
    color: #d97706;
}

.MDB-StatValue.Info[b-41rd4a5r0c] {
    color: #1d4ed8;
}

.MDB-StatFoot[b-41rd4a5r0c] {
    margin-top: 6px;
    font-size: 11.5px;
    color: #94a3b8;
}

.MDB-StatFoot.Up[b-41rd4a5r0c] {
    color: #15803d;
}

.MDB-StatFoot.Down[b-41rd4a5r0c] {
    color: #b91c1c;
}

/* ─── Filter row ─── */
.MDB-FilterRow[b-41rd4a5r0c] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.MDB-Search[b-41rd4a5r0c] {
    position: relative;
    flex: 1;
    min-width: 240px;
    max-width: 360px;
}

.MDB-SearchIcon[b-41rd4a5r0c] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
}

.MDB-Search input[b-41rd4a5r0c] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px 10px 34px;
    font-size: 13px;
    background: #fff;
}

.MDB-Search input:focus[b-41rd4a5r0c] {
    outline: none;
    border-color: #94a3b8;
}

.MDB-DateRange[b-41rd4a5r0c] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.MDB-DateLabel[b-41rd4a5r0c] {
    font-size: 12.5px;
    color: #64748b;
}

.MDB-DateField[b-41rd4a5r0c] {
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    font-weight: 600;
}

.MDB-DateField:hover[b-41rd4a5r0c] {
    border-color: #94a3b8;
}

.MDB-DateDash[b-41rd4a5r0c] {
    color: #94a3b8;
}

.MDB-DateReset[b-41rd4a5r0c] {
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 9px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    color: #64748b;
}

.MDB-DateReset:hover[b-41rd4a5r0c] {
    background: #f1f5f9;
}

.MDB-FilterMeta[b-41rd4a5r0c] {
    margin-left: auto;
    font-size: 12.5px;
    color: #64748b;
}

/* ─── Body ─── */
.MDB-Body[b-41rd4a5r0c] {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 18px;
    align-items: stretch;
}

.MDB-ListZone[b-41rd4a5r0c] {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    overflow: hidden;
    min-height: 440px;
}

.MDB-Empty[b-41rd4a5r0c] {
    padding: 60px 0;
    text-align: center;
    color: #94a3b8;
}

.MDB-Table[b-41rd4a5r0c] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.MDB-Table thead th[b-41rd4a5r0c] {
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: #94a3b8;
    padding: 12px 16px;
    border-bottom: 1px solid #eef2f7;
    background: #fbfcfe;
}

.MDB-Table th.Num[b-41rd4a5r0c],
.MDB-Table td.Num[b-41rd4a5r0c] {
    text-align: right;
}

.MDB-Table tbody tr[b-41rd4a5r0c] {
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    user-select: none;
}

.MDB-Table tbody tr:hover[b-41rd4a5r0c] {
    background: #f8fafc;
}

.MDB-Table tbody tr.On[b-41rd4a5r0c] {
    background: #eff6ff;
    box-shadow: inset 3px 0 0 #1d4ed8;
}

.MDB-Table td[b-41rd4a5r0c] {
    padding: 13px 16px;
    vertical-align: middle;
}

.MDB-Table td.Code[b-41rd4a5r0c] {
    font-weight: 700;
    color: #0f172a;
}

.MDB-Table td.Party[b-41rd4a5r0c] {
    color: #334155;
}

.MDB-Table td.Amount[b-41rd4a5r0c] {
    font-weight: 700;
    color: #0f172a;
}

.MDB-Badge[b-41rd4a5r0c] {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11.5px;
    font-weight: 700;
}

.MDB-PayLine[b-41rd4a5r0c] {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: #94a3b8;
}

/* ─── Pager ─── */
.MDB-Pager[b-41rd4a5r0c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid #eef2f7;
}

.MDB-PagerInfo[b-41rd4a5r0c] {
    font-size: 12px;
    color: #94a3b8;
}

.MDB-PagerBtns[b-41rd4a5r0c] {
    display: flex;
    gap: 4px;
}

.MDB-PagerBtns button[b-41rd4a5r0c] {
    min-width: 30px;
    height: 30px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    color: #475569;
}

.MDB-PagerBtns button.On[b-41rd4a5r0c] {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

.MDB-PagerBtns button:disabled[b-41rd4a5r0c] {
    opacity: .4;
    cursor: default;
}

/* ─── Preview ─── */
.MDB-Preview[b-41rd4a5r0c] {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    padding: 18px;
    position: sticky;
    top: 12px;
    min-height: 440px;
}

.MDB-PreviewEmpty[b-41rd4a5r0c] {
    padding: 50px 0;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}

.MDB-PvHead[b-41rd4a5r0c] {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.MDB-PvCode[b-41rd4a5r0c] {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.MDB-PvParty[b-41rd4a5r0c] {
    color: #475569;
    margin-top: 2px;
}

.MDB-PvRef[b-41rd4a5r0c] {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

.MDB-PvMeta[b-41rd4a5r0c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 14px 0;
    padding: 12px 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12.5px;
}

.MDB-PvMeta label[b-41rd4a5r0c] {
    display: block;
    color: #94a3b8;
    font-size: 11px;
    margin-bottom: 2px;
}

.MDB-PvItems[b-41rd4a5r0c] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 260px;
    overflow-y: auto;
}

.MDB-PvItem[b-41rd4a5r0c] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.MDB-PvImg[b-41rd4a5r0c] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #94a3b8;
    flex-shrink: 0;
    overflow: hidden;
}

.MDB-PvImg img[b-41rd4a5r0c] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.MDB-PvItemInfo[b-41rd4a5r0c] {
    flex: 1;
    min-width: 0;
}

.MDB-PvItemName[b-41rd4a5r0c] {
    font-size: 12.5px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.MDB-PvItemSku[b-41rd4a5r0c] {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

.MDB-PvItemTotal[b-41rd4a5r0c] {
    font-weight: 700;
    font-size: 12.5px;
    color: #0f172a;
}

.MDB-PvNoItem[b-41rd4a5r0c] {
    color: #94a3b8;
    font-size: 12px;
    padding: 12px 0;
}

.MDB-PvSum[b-41rd4a5r0c] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    color: #64748b;
}

.MDB-PvSum > div[b-41rd4a5r0c] {
    display: flex;
    justify-content: space-between;
}

.MDB-PvSum .Net[b-41rd4a5r0c] {
    color: #0f172a;
    font-size: 14px;
    margin-top: 4px;
}

.MDB-PvRemain[b-41rd4a5r0c] {
    margin-top: 10px;
    background: #fff7ed;
    color: #c2410c;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 700;
}

.MDB-PvBtns[b-41rd4a5r0c] {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.MDB-PvBtns button[b-41rd4a5r0c] {
    flex: 1;
}

@media (max-width: 1100px) {
    .MDB-Stats[b-41rd4a5r0c] {
        grid-template-columns: repeat(2, 1fr);
    }

    .MDB-Body[b-41rd4a5r0c] {
        grid-template-columns: 1fr;
    }

    .MDB-Preview[b-41rd4a5r0c] {
        position: static;
    }
}

/* ── ตัวเลข = IBM Plex Mono (Thai fallback ให้ Sans Thai) ── */
.MDB-StatValue[b-41rd4a5r0c],
.MDB-StatFoot[b-41rd4a5r0c],
.MDB-FilterMeta[b-41rd4a5r0c],
.MDB-Table td.Code[b-41rd4a5r0c],
.MDB-Table td.Num[b-41rd4a5r0c],
.MDB-Table td.Amount[b-41rd4a5r0c],
.MDB-PayLine[b-41rd4a5r0c],
.MDB-DateField[b-41rd4a5r0c],
.MDB-PvCode[b-41rd4a5r0c],
.MDB-PvSum b[b-41rd4a5r0c],
.MDB-PvRemain[b-41rd4a5r0c],
.MDB-PvItemSku[b-41rd4a5r0c],
.MDB-PvItemTotal[b-41rd4a5r0c],
.MDB-PagerInfo[b-41rd4a5r0c],
.MDB-PagerBtns button[b-41rd4a5r0c] {
    font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', sans-serif;
}
/* /Components/M_Components/Billing/BillFilterBar.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   MineBillFilterBar — แถบตัวกรองบิล (ใช้ร่วม: SalesManage / StockRec)
   ปรับใหม่: การ์ดมุมโค้ง + <select> สไตล์เดียวกับระบบ + ปุ่มมีทรง
   ════════════════════════════════════════════════════════════ */

.MineBillFilterBar[b-e1lotn2yy1] {
    padding: 14px 18px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #e6e9f0;
    border-radius: 14px;
    box-shadow: 0 10px 24px -20px rgba(23,45,80,0.4);
    position: relative;
}

.MineBillFilterBar-Row[b-e1lotn2yy1] {
    position: relative;
    min-height: 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* ป้ายกำกับ (label ข้อความเปล่าที่ caller ส่งมาใน FilterContent) */
.MineBillFilterBar-Row[b-e1lotn2yy1]  div:not([class]) {
    font-size: 13px;
    font-weight: 700;
    color: #6b7688;
    white-space: nowrap;
}

/* <select> ที่ caller ส่งเข้ามา */
.MineBillFilterBar[b-e1lotn2yy1]  select {
    height: 38px;
    padding: 0 34px 0 12px;
    border: 1px solid #d8deea;
    border-radius: 9px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236b7688' d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 13.5px;
    font-weight: 600;
    color: #17233a;
    cursor: pointer;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

    .MineBillFilterBar[b-e1lotn2yy1]  select:hover {
        border-color: #b9c4d8;
    }

    .MineBillFilterBar[b-e1lotn2yy1]  select:focus {
        border-color: #2f6fd0;
        box-shadow: 0 0 0 3px rgba(47,111,208,0.15);
    }

/* รายการใน dropdown (เบราว์เซอร์จำกัดการจัดสไตล์ native option ได้แค่สีพื้น/สีตัวอักษร) */
.MineBillFilterBar[b-e1lotn2yy1]  option {
    background: #fff;
    color: #17233a;
    padding: 8px 12px;
}

    .MineBillFilterBar[b-e1lotn2yy1]  option:checked {
        background: #eef3fb;
        color: #1c4f97;
        font-weight: 700;
    }

/* ช่องกรอกวันที่ + ปุ่มปฏิทิน (ExtraContent) */
.MineBillFilterBar[b-e1lotn2yy1]  .DateInput {
    height: 38px;
    padding: 0 12px;
    border: 1px solid #d8deea;
    border-radius: 9px;
    font-size: 13.5px;
    color: #17233a;
    outline: none;
}

    .MineBillFilterBar[b-e1lotn2yy1]  .DateInput:focus {
        border-color: #2f6fd0;
        box-shadow: 0 0 0 3px rgba(47,111,208,0.15);
    }

.MineBillFilterBar[b-e1lotn2yy1]  .Carlendar {
    height: 38px;
    width: 38px;
    margin-left: 4px;
    border: 1px solid #d8deea;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    background: #f7f9fc;
    transition: background .15s;
}

    .MineBillFilterBar[b-e1lotn2yy1]  .Carlendar:hover {
        background: #eef2f8;
    }

.MineBillFilterBar-Divider[b-e1lotn2yy1] {
    height: 1px;
    width: 100%;
    background: #eceff5;
    margin: 12px 0;
}

/* ปุ่มรีเซ็ต */
.MineBillFilterBar-Reset[b-e1lotn2yy1] {
    color: #fff;
    background: linear-gradient(135deg, #0B7A75, #3FB0A9);
    height: 38px;
    padding: 0 22px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 22px -12px rgba(11,122,117,0.7);
    transition: filter .15s, transform .05s;
}

    .MineBillFilterBar-Reset:hover[b-e1lotn2yy1] { filter: brightness(1.06); }
    .MineBillFilterBar-Reset:active[b-e1lotn2yy1] { transform: translateY(1px); }

/* ปุ่ม RealTime */
.MineBillFilterBar-Realtime[b-e1lotn2yy1] {
    height: 38px;
    padding: 0 16px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d0d3d6;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    transition: background .15s, color .15s, border-color .15s;
}

.MineBillFilterBar-RealtimeDot[b-e1lotn2yy1] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.MineBillFilterBar-Realtime.On[b-e1lotn2yy1] {
    color: #2e7d32;
    background: #e8f5e9;
    border-color: #a5d6a7;
}

    .MineBillFilterBar-Realtime.On .MineBillFilterBar-RealtimeDot[b-e1lotn2yy1] {
        background: #43a047;
        box-shadow: 0 0 0 3px rgba(67,160,71,0.2);
        animation: MineBillFilterBarPulse-b-e1lotn2yy1 1.4s infinite;
    }

.MineBillFilterBar-Realtime.Off[b-e1lotn2yy1] {
    color: #8a8d90;
    background: #f3f4f5;
    border-color: #d0d3d6;
}

    .MineBillFilterBar-Realtime.Off .MineBillFilterBar-RealtimeDot[b-e1lotn2yy1] {
        background: #b0b3b6;
    }

@keyframes MineBillFilterBarPulse-b-e1lotn2yy1 {
    0% { box-shadow: 0 0 0 0 rgba(67,160,71,0.35); }
    70% { box-shadow: 0 0 0 6px rgba(67,160,71,0); }
    100% { box-shadow: 0 0 0 0 rgba(67,160,71,0); }
}

.MineBillFilterBar-Space[b-e1lotn2yy1] {
    width: 14px;
}

/* จอแคบ — พับตัวกรองเป็นแนวตั้ง */
@media (max-width: 560px) {
    .MineBillFilterBar[b-e1lotn2yy1] {
        padding: 12px;
    }

    .MineBillFilterBar-Row[b-e1lotn2yy1] {
        flex-direction: column;
        align-items: stretch;
    }

        .MineBillFilterBar-Row > div[b-e1lotn2yy1] {
            width: 100%;
        }

        .MineBillFilterBar-Row[b-e1lotn2yy1]  select {
            width: 100%;
        }

    .MineBillFilterBar-Reset[b-e1lotn2yy1],
    .MineBillFilterBar-Realtime[b-e1lotn2yy1] {
        justify-content: center;
    }

    .MineBillFilterBar-Space[b-e1lotn2yy1] {
        width: 0;
        height: 6px;
    }
}
/* /Components/M_Components/Billing/BillHeroHeader.razor.rz.scp.css */
/* ยกมาจาก CustomerOrders.razor.css (.CO2-Hero* + override ::deep ของ HeaderCoreBill/DecorateTopBox)
   ค่าเดิมทุกตัว — เปลี่ยนแค่ prefix .CO2- → .BHH- และ .CO2-Root ::deep → .BHH-Hero ::deep
   font-family เดิมได้จาก .CO2-Root จึงใส่ไว้ที่ .BHH-Hero ; sticky แยกเป็น .BHH-Sticky (param Sticky) */
.BHH-Hero[b-rj4jy5uuwa] {
    background: #fff;
    border: 1px solid #e6eaf1;
    border-radius: 16px;
    padding: 4px 4px 0;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .05);
    font-family: 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
}

/* ค้างบนสุดตอน scroll — top = --be-top-h พ้นแถบบน (HeaderZone มือถือ) ; z-index 5 ต่ำกว่า popup แก้ไขสินค้า (10) */
.BHH-Hero.BHH-Sticky[b-rj4jy5uuwa] {
    position: sticky;
    top: var(--be-top-h, 0px);
    z-index: 5;
}

/* หน้าร้าน: แถบเมนูบนไม่ค้างจอ → ชิดขอบบน */
.BHH-Hero.BHH-Sticky.BHH-Front[b-rj4jy5uuwa] {
    top: 0;
}

/* [2026-10] มือถือ: การ์ดหัวบิลเรียง 1 คอลัมน์สูง ~460px — ค้างจอแล้วบังเนื้อหาเกือบหมด (รวมแถบล่าง เหลือที่ดูรายการ ~80px บนจอ 844px)
   → จอ ≤768px ไม่ค้าง (เลื่อนไปกับหน้าปกติ) ; ตรวจพบโดย E2E UI audit */
@media (max-width: 768px) {
    .BHH-Hero.BHH-Sticky[b-rj4jy5uuwa] {
        position: static;
    }
}

.BHH-HeroGrid[b-rj4jy5uuwa] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
    padding: 10px 16px 16px;
}

@media (min-width: 860px) {
    .BHH-HeroGrid[b-rj4jy5uuwa] {
        grid-template-columns: minmax(0, 1fr) 420px;
    }
}

.BHH-HeroMain[b-rj4jy5uuwa] {
    min-width: 0;
}

.BHH-HeroPills[b-rj4jy5uuwa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
}

/* ปุ่มย้อนกลับ — ขนาดเท่าป้ายสถานะ แต่พื้นแดงทึบ + ลูกศร ให้เห็นชัดกว่า pill อื่น */
.BHH-BackBtn[b-rj4jy5uuwa] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px 5px 9px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #d63a31, #f0625a);
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    box-shadow: 0 6px 14px -8px rgba(214,58,49,0.8);
    transition: filter .15s, transform .05s;
}

    .BHH-BackBtn:hover[b-rj4jy5uuwa] {
        filter: brightness(1.08);
    }

    .BHH-BackBtn:active[b-rj4jy5uuwa] {
        transform: translateY(1px);
    }

.BHH-BackArrow[b-rj4jy5uuwa] {
    font-size: 17px;
    line-height: 0;
    margin-top: -2px;
    transition: transform .15s;
}

.BHH-BackBtn:hover .BHH-BackArrow[b-rj4jy5uuwa] {
    transform: translateX(-2px);
}

.BHH-HeroBadge[b-rj4jy5uuwa] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #E7F5F4;
    color: #095E5A;
    border: 1px solid #B9E0DC;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
}

.BHH-HeroBadgeDot[b-rj4jy5uuwa] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0B7A75;
    flex-shrink: 0;
}

/* ::deep = pill ที่หน้าแม่ส่งมาทาง ExtraPills (render ด้วย scope ของหน้าแม่ — selector ปกติไม่โดน) */
.BHH-HeroPill[b-rj4jy5uuwa],
.BHH-HeroPills[b-rj4jy5uuwa]  .BHH-HeroPill {
    border: 1px solid #e6eaf1;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 11.5px;
    color: #5b6a86;
}

.BHH-HeroTiles[b-rj4jy5uuwa] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    min-width: 0;
}

@media (min-width: 780px) {
    .BHH-HeroTiles[b-rj4jy5uuwa] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.BHH-HeroTile[b-rj4jy5uuwa] {
    border-radius: 12px;
    padding: 14px;
    min-width: 0;
}

.BHH-HeroTile-Total[b-rj4jy5uuwa] {
    background: #E7F5F4;
    border: 1px solid #B9E0DC;
}

.BHH-HeroTile-Pending[b-rj4jy5uuwa] {
    background: #fff8ec;
    border: 1px solid #f6e3c0;
}

.BHH-HeroTileLabel[b-rj4jy5uuwa] {
    font-size: 12px;
}

.BHH-HeroTile-Total .BHH-HeroTileLabel[b-rj4jy5uuwa] {
    color: #4a5f86;
}

.BHH-HeroTile-Pending .BHH-HeroTileLabel[b-rj4jy5uuwa] {
    color: #8a6a2f;
}

.BHH-HeroTileValue[b-rj4jy5uuwa] {
    font-family: 'IBM Plex Mono', 'IBM Plex Sans Thai', monospace;
    font-size: 26px;
    font-weight: 600;
    color: #095E5A;
    line-height: 1.25;
    margin-top: 2px;
    overflow-wrap: break-word;
}

.BHH-HeroTileValue-Small[b-rj4jy5uuwa] {
    font-size: 15px;
    font-weight: 600;
    color: #14213d;
    line-height: 1.35;
    margin-top: 4px;
}

.BHH-HeroTileSub[b-rj4jy5uuwa] {
    font-size: 11.5px;
    color: #7c879b;
    margin-top: 2px;
}

.BHH-HeroTileWarn[b-rj4jy5uuwa] {
    font-size: 11.5px;
    color: #a08349;
    margin-top: 4px;
}

.BHH-Hero[b-rj4jy5uuwa]  .BHH-HeroMain > div[style*="position: sticky"] {
    position: static !important;
    top: auto !important;
}

.BHH-Hero[b-rj4jy5uuwa]  .BillCode {
    background: transparent !important;
    color: #14213d !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    padding: 14px 2px 4px !important;
}

/* [2026-09 แก้] div ครอบ .BillCode ใน HeaderCoreBill มี class "bg-white" ติด
   พื้นหลังขาวมาด้วย (ใช้ scope เฉพาะใต้ .BHH-Hero กันกระทบหน้าอื่น) */
.BHH-Hero[b-rj4jy5uuwa]  .bg-white {
    background: transparent !important;
}

/* คอลัมน์ที่ 1 ของ .BillCode เป็น div ว่างเปล่า (แค่ spacer flex:1 เดิม) — ซ่อนทิ้ง */
.BHH-Hero[b-rj4jy5uuwa]  .BillCode > div:first-child {
    display: none !important;
}

/* คอลัมน์ที่ 2 (หัวข้อ + เลขบิลตัวใหญ่) — เดิม flex:1 อยู่กลาง 1 ใน 3 คอลัมน์ ตอนนี้ให้กว้างเต็ม */
.BHH-Hero[b-rj4jy5uuwa]  .BillCode > div:nth-child(2) {
    flex: none !important;
    width: 100% !important;
    text-align: left !important;
}

    .BHH-Hero[b-rj4jy5uuwa]  .BillCode > div:nth-child(2) > div:first-child {
        color: #9aa4b8;
        font-size: 11px;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .BHH-Hero[b-rj4jy5uuwa]  .BillCode > div:nth-child(2) > div:nth-child(2) {
        color: #14213d;
        font-weight: 600;
        font-family: 'IBM Plex Mono', monospace;
        letter-spacing: .01em;
        font-size: clamp(18px, 2.3vw, 28px) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

/* คอลัมน์ที่ 3 (เมตา "ผู้ใช้งาน/วันที่") — เดิม flex:1 + display:flex มี spacer ซ้าย/ขวา
   ว่างเปล่าอยู่ในตัว ให้ยุบเหลือแค่เนื้อหาจริง เรียงเป็นบรรทัดเล็กใต้เลขบิล ชิดซ้าย */
.BHH-Hero[b-rj4jy5uuwa]  .BillCode > div:nth-child(3) {
    flex: none !important;
    width: 100% !important;
    display: block !important;
    margin-top: 8px !important;
    font-size: 12.5px !important;
    color: #7c879b !important;
}

    .BHH-Hero[b-rj4jy5uuwa]  .BillCode > div:nth-child(3) > div:first-child,
    .BHH-Hero[b-rj4jy5uuwa]  .BillCode > div:nth-child(3) > div:last-child {
        display: none !important;
    }

    .BHH-Hero[b-rj4jy5uuwa]  .BillCode > div:nth-child(3) > div:nth-child(2) .mf {
        display: inline-flex !important;
        margin-right: 14px;
    }

    .BHH-Hero[b-rj4jy5uuwa]  .BillCode > div:nth-child(3) > div:nth-child(2) .mf > div:first-child {
        width: auto !important;
        font-weight: 600;
        margin-right: 4px;
    }

/* [2026-09 อัปเดต] ซ่อนแถวเช็คบ็อกซ์สถานะแบนของ StatusCoreBill (ภายใน HeaderCoreBill)
   ทิ้งไปเลย — สถานะแสดงด้วย <BillStatusStepper> แทน */
.BHH-Hero[b-rj4jy5uuwa]  .StatusBill {
    display: none;
}

/* DecorateTopBox — เส้นคาดหัวลาย กลายเป็นเส้น accent teal บาง ๆ */
.BHH-Hero[b-rj4jy5uuwa]  .HeaderTopDiv {
    background-image: none !important;
    background: linear-gradient(90deg, #0B7A75, #095E5A);
    height: 3px;
}
/* /Components/M_Components/Billing/BillItemEntryPopup.razor.rz.scp.css */
.IEOverlay[b-wgv7psb1gr] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
    padding: 24px;
}

.IEBox[b-wgv7psb1gr] {
    width: 100%;
    max-width: 1040px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: #eef1f5;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .38);
    font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
    font-size: 13px;
    color: #1e293b;
}

.IEBox input[b-wgv7psb1gr],
.IEBox button[b-wgv7psb1gr],
.IEBox select[b-wgv7psb1gr] {
    font-family: inherit;
}

/* ═══ HEADER ═══ */
.IEHead[b-wgv7psb1gr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #12141a;
    color: #fff;
    padding: 13px 18px;
}

.IEHeadL[b-wgv7psb1gr] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.IECode[b-wgv7psb1gr] {
    background: linear-gradient(135deg, #0fb47a, #14c98a);
    color: #fff;
    font-weight: 800;
    border-radius: 9px;
    padding: 7px 11px;
    font-size: 12px;
    white-space: nowrap;
}

.IEHeadInfo[b-wgv7psb1gr] {
    min-width: 0;
}

.IETitle[b-wgv7psb1gr] {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.IESub[b-wgv7psb1gr] {
    font-size: 11.5px;
    color: #9aa3b2;
    margin-top: 2px;
}

.IEDot[b-wgv7psb1gr] {
    margin: 0 6px;
    opacity: .5;
}

.IEHeadR[b-wgv7psb1gr] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.IEModeBadge[b-wgv7psb1gr] {
    background: #232630;
    color: #cdd3dd;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.IEClose[b-wgv7psb1gr] {
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
}

.IEClose:hover[b-wgv7psb1gr] {
    color: #fff;
}

.IEErr[b-wgv7psb1gr] {
    background: #fef2f2;
    color: #b91c1c;
    padding: 10px 18px;
    font-size: 12.5px;
    font-weight: 700;
}

/* ═══ BODY ═══ */
.IEBody[b-wgv7psb1gr] {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 14px;
    padding: 16px;
    overflow-y: auto;
}

.IECol[b-wgv7psb1gr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ═══ SECTION ═══ */
.IESec[b-wgv7psb1gr] {
    background: #fff;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    overflow: hidden;
}

.IESecWarn[b-wgv7psb1gr] {
    border-color: #f0e2c2;
}

.IESecHead[b-wgv7psb1gr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
}

.IESecWarn .IESecHead[b-wgv7psb1gr] {
    background: #fffdf5;
    border-bottom-color: #f0e2c2;
}

.IESecIcon[b-wgv7psb1gr] {
    font-size: 13px;
}

.IESecHeadToggle[b-wgv7psb1gr] {
    cursor: pointer;
    user-select: none;
}

.IESecHeadToggle:hover[b-wgv7psb1gr] {
    background: #f1f5f9;
}

.IECaret[b-wgv7psb1gr] {
    margin-left: auto;
    color: #94a3b8;
    font-size: 11px;
}

.IESecMuted[b-wgv7psb1gr] {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 600;
    color: #94a3b8;
}

.IESecMuted + .IECaret[b-wgv7psb1gr] {
    margin-left: 8px;
}

.IESecHeadRow[b-wgv7psb1gr] {
    justify-content: space-between;
}

.IESecHeadRow > span:first-child[b-wgv7psb1gr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.IESecBody[b-wgv7psb1gr] {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ═══ FIELDS ═══ */
.IERow2[b-wgv7psb1gr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.IERow3[b-wgv7psb1gr] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.IEField[b-wgv7psb1gr] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.IEField label[b-wgv7psb1gr] {
    font-size: 11px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 18px;
}

.IEInput[b-wgv7psb1gr] {
    border: 1px solid #d5dce5;
    border-radius: 9px;
    padding: 9px 10px;
    font-size: 13px;
    width: 100%;
    background: #fff;
    color: #0f172a;
}

.IEInput:focus[b-wgv7psb1gr] {
    outline: none;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}

.IEInput:disabled[b-wgv7psb1gr] {
    background: #f1f5f9;
    color: #94a3b8;
}

.IEInputBig[b-wgv7psb1gr] {
    font-size: 18px;
    font-weight: 700;
    padding: 10px 12px;
}

.IEInputEdit[b-wgv7psb1gr] {
    border-color: #f59e0b;
    background: #fffbeb;
}

.IERO[b-wgv7psb1gr] {
    border: 1px solid #eef2f7;
    background: #f8fafc;
    border-radius: 9px;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.IEROAccent[b-wgv7psb1gr] {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #15803d;
    font-size: 15px;
}

.IEInlineToggle[b-wgv7psb1gr] {
    border: 1px solid #d5dce5;
    background: #fff;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 10.5px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
}

.IEInlineToggle.On[b-wgv7psb1gr] {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #b45309;
}

.IEHint[b-wgv7psb1gr] {
    font-size: 10.5px;
    color: #94a3b8;
}

/* ═══ DISCOUNT ═══ */
.IEDiscZone[b-wgv7psb1gr] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px dashed #e2e8f0;
}

.IESeg[b-wgv7psb1gr] {
    display: inline-flex;
    border: 1px solid #d5dce5;
    border-radius: 9px;
    overflow: hidden;
}

.IESeg button[b-wgv7psb1gr] {
    border: none;
    background: #fff;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
}

.IESeg button + button[b-wgv7psb1gr] {
    border-left: 1px solid #d5dce5;
}

.IESeg button.On[b-wgv7psb1gr] {
    background: #1d4ed8;
    color: #fff;
}

.IESegWide[b-wgv7psb1gr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
}

.IESegWide button + button[b-wgv7psb1gr] {
    border-left: 1px solid #d5dce5;
}

.IEDiscInput[b-wgv7psb1gr] {
    position: relative;
    flex: 1;
    min-width: 90px;
}

.IEDiscInput .IEInput[b-wgv7psb1gr] {
    padding-right: 28px;
}

.IEUnitTag[b-wgv7psb1gr] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #94a3b8;
    font-weight: 700;
}

/* ═══ TABLES / PANELS ═══ */
.IETable[b-wgv7psb1gr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.IETable th[b-wgv7psb1gr] {
    text-align: left;
    font-weight: 600;
    font-size: 10.5px;
    color: #94a3b8;
    padding: 6px 8px;
    border-bottom: 1px solid #e8edf3;
}

.IETable td[b-wgv7psb1gr] {
    padding: 6px 8px;
    border-bottom: 1px solid #f1f5f9;
}

.IETable th.R[b-wgv7psb1gr],
.IETable td.R[b-wgv7psb1gr] {
    text-align: right;
}

.IETable tr.On[b-wgv7psb1gr] {
    background: #eff6ff;
}

.IELotNeed[b-wgv7psb1gr] {
    font-size: 12px;
    color: #475569;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 7px 10px;
    margin-bottom: 4px;
}
.IELotNeed b[b-wgv7psb1gr] { color: #0f172a; }

.IELotTable td[b-wgv7psb1gr] { vertical-align: middle; }
.IELotTable tbody tr.Picked[b-wgv7psb1gr] { background: #eff6ff; }
.IELotTable tbody tr.Picked td:first-child[b-wgv7psb1gr] { box-shadow: inset 3px 0 0 #1d4ed8; }

.IELotCode[b-wgv7psb1gr] { font-weight: 700; color: #0f172a; font-size: 12.5px; }
.IELotExp[b-wgv7psb1gr] { font-size: 11px; color: #94a3b8; margin-top: 1px; }
.IELotExp.Near[b-wgv7psb1gr] { color: #b91c1c; font-weight: 600; }
.IELotExpTag[b-wgv7psb1gr] {
    display: inline-block; margin-left: 5px; padding: 0 6px;
    border-radius: 999px; font-size: 10px; font-weight: 700;
    background: #fee2e2; color: #b91c1c;
}
.IELotExpTag.Bad[b-wgv7psb1gr] { background: #b91c1c; color: #fff; }
.IELotCost[b-wgv7psb1gr] { font-size: 10.5px; color: #94a3b8; margin-top: 2px; }
.IELotRemain[b-wgv7psb1gr] { font-weight: 700; color: #334155; }

.IELotStatusNum[b-wgv7psb1gr] { font-size: 15px; font-weight: 800; }
.IELotStatusUnit[b-wgv7psb1gr] { font-weight: 600; margin-left: 3px; }

.IELotCount[b-wgv7psb1gr] {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .02em;
}
.IELotCount.Ok[b-wgv7psb1gr] { background: #dcfce7; color: #15803d; }

.IELotInput[b-wgv7psb1gr] {
    width: 100%;
    border: 1px solid #d5dce5;
    border-radius: 7px;
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}
.IELotInput.On[b-wgv7psb1gr] {
    border-color: #1d4ed8;
    background: #f5f9ff;
}

.IELotStatus[b-wgv7psb1gr] {
    margin-top: 8px;
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}
.IELotStatus b[b-wgv7psb1gr] { font-weight: 800; }
.IELotStatus.Ok[b-wgv7psb1gr] { background: #ecfdf5; color: #15803d; }
.IELotStatus.Warn[b-wgv7psb1gr] { background: #fffbeb; color: #b45309; }
.IELotStatus.Bad[b-wgv7psb1gr] { background: #fef2f2; color: #b91c1c; }

.IELotBtns[b-wgv7psb1gr] {
    display: flex;
    gap: 6px;
}

.IEMiniBtn[b-wgv7psb1gr] {
    border: 1px solid #d5dce5;
    background: #fff;
    border-radius: 7px;
    padding: 5px 9px;
    font-size: 10.5px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}

.IEMiniBtn:hover[b-wgv7psb1gr] {
    border-color: #1d4ed8;
    color: #1d4ed8;
}

.IEPanelNote[b-wgv7psb1gr] {
    font-size: 11.5px;
    color: #94a3b8;
}

.IEKv[b-wgv7psb1gr] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    padding: 3px 0;
}

.IEKv span[b-wgv7psb1gr] {
    color: #94a3b8;
}

.IEKv b[b-wgv7psb1gr] {
    color: #1e293b;
}

/* ═══ WARN ═══ */
.IEWarnItem[b-wgv7psb1gr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.IEWarnItem label[b-wgv7psb1gr] {
    font-size: 11px;
    color: #92700f;
    font-weight: 600;
}

.IEReadBox[b-wgv7psb1gr] {
    background: #fffdf5;
    border: 1px solid #f0e2c2;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12.5px;
    color: #7c2d12;
    min-height: 34px;
    white-space: pre-wrap;
}

/* ═══ FOOTER ═══ */
.IEFoot[b-wgv7psb1gr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 18px;
    background: #fff;
    border-top: 1px solid #e5eaf1;
}

.IEFootTotal[b-wgv7psb1gr] {
    display: flex;
    flex-direction: column;
}

.IEFootTotal span[b-wgv7psb1gr] {
    font-size: 11px;
    color: #94a3b8;
}

.IEFootTotal b[b-wgv7psb1gr] {
    font-size: 22px;
    font-weight: 800;
    color: #15803d;
}

.IEFootBtns[b-wgv7psb1gr] {
    display: flex;
    gap: 10px;
}

.IEBtnCancel[b-wgv7psb1gr],
.IEBtnSave[b-wgv7psb1gr] {
    border-radius: 10px;
    padding: 11px 22px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.IEBtnCancel[b-wgv7psb1gr] {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
}

.IEBtnCancel:hover[b-wgv7psb1gr] {
    background: #f1f5f9;
}

.IEBtnSave[b-wgv7psb1gr] {
    border: 1px solid #0f172a;
    background: #0f172a;
    color: #fff;
}

.IEBtnSave:hover[b-wgv7psb1gr] {
    background: #1e293b;
}

@media (max-width: 860px) {
    .IEBody[b-wgv7psb1gr] {
        grid-template-columns: 1fr;
    }
}

/* ── ตัวเลข = IBM Plex Mono (Thai fallback ให้ Sans Thai) ── */
.IECode[b-wgv7psb1gr],
.IEInput[b-wgv7psb1gr],
.IEInputBig[b-wgv7psb1gr],
.IERO[b-wgv7psb1gr],
.IEROAccent[b-wgv7psb1gr],
.IEHint[b-wgv7psb1gr],
.IEFootTotal b[b-wgv7psb1gr],
.IELotInput[b-wgv7psb1gr],
.IEKv b[b-wgv7psb1gr],
.IETable td.R[b-wgv7psb1gr],
.IEUnitTag[b-wgv7psb1gr] {
    font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', sans-serif;
}
/* /Components/M_Components/Billing/BillItemSearchBar.razor.rz.scp.css */
.SBRow[b-op34yx0akt] {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.SBBar[b-op34yx0akt] {
    flex: 1; min-width: 220px;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px 6px 14px;
    background: #fff; border: 1.5px solid #e6e9f0;
    border-radius: 12px; position: relative;
    transition: border-color .15s, box-shadow .15s;
}
.SBBar:focus-within[b-op34yx0akt] { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,.1); }
.SBIcon[b-op34yx0akt] { font-size: 14px; flex-shrink: 0; color: #64748b; }
.SBInput[b-op34yx0akt] {
    flex: 1; border: none; outline: none; background: transparent;
    padding: 8px 0; font-size: 13px; color: #1f2937; font-family: inherit;
}
.SBInput[b-op34yx0akt]::placeholder { color: #aab2bf; }
.SBInput:disabled[b-op34yx0akt] { color: #9ca3af; }

.SBSearchBtn[b-op34yx0akt] {
    flex-shrink: 0; padding: 9px 20px; border-radius: 10px; border: none; cursor: pointer;
    background: #12141a; color: #fff; font-size: 12.5px; font-weight: 700;
    transition: opacity .15s;
}
.SBSearchBtn:hover:not(:disabled)[b-op34yx0akt] { opacity: .88; }
.SBDetailBtn[b-op34yx0akt] {
    flex-shrink: 0; padding: 9px 16px; border-radius: 10px; cursor: pointer;
    background: #fff; border: 1.5px solid #d7dbe2; color: #475569;
    font-size: 12.5px; font-weight: 700; transition: border-color .15s;
}
.SBDetailBtn:hover:not(:disabled)[b-op34yx0akt] { border-color: #93c5fd; }
.SBSearchBtn:disabled[b-op34yx0akt], .SBDetailBtn:disabled[b-op34yx0akt] { opacity: .45; cursor: default; }

.SBCheck[b-op34yx0akt] {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #64748b; cursor: pointer; user-select: none;
    white-space: nowrap;
}
.SBCheck input[b-op34yx0akt] { width: 15px; height: 15px; accent-color: #3b82f6; cursor: pointer; }

/* ── result dropdown ── */
.SBDropdown[b-op34yx0akt] {
    position: absolute; left: 34px; right: 8px; top: calc(100% + 6px);
    background: #fff; border: 1px solid #e0e6f0; border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15,23,42,.16); z-index: 45;
    max-height: 320px; overflow-y: auto; padding: 4px;
}
.SBResRow[b-op34yx0akt] { padding: 9px 12px; cursor: pointer; border-radius: 9px; }
.SBResRow:hover[b-op34yx0akt] { background: #f3f7ff; }
.SBResMain[b-op34yx0akt] { display: flex; align-items: center; gap: 8px; }
.SBName[b-op34yx0akt] { font-size: 13px; font-weight: 600; color: #1f2937; }
.SBResSub[b-op34yx0akt] { font-size: 11px; color: #9ca3af; margin-top: 2px; }
.SBResDetail[b-op34yx0akt] { font-size: 10.5px; color: #64748b; margin-top: 3px; padding-top: 3px; border-top: 1px dashed #eef1f6; }

.SBMode[b-op34yx0akt] {
    font-size: 9.5px; font-weight: 800; padding: 1px 8px; border-radius: 20px;
    background: #f1f5f9; color: #64748b; letter-spacing: .02em;
}
.SBMode-StockReal[b-op34yx0akt] { background: #ede9fe; color: #7c3aed; }
.SBMode-StockQty[b-op34yx0akt] { background: #dbeafe; color: #1d4ed8; }
.SBMode-StockStatus[b-op34yx0akt] { background: #dcfce7; color: #15803d; }

.SBMsg[b-op34yx0akt] { padding: 6px 4px 0; font-size: 11.5px; font-weight: 600; }
.SBMsg.Err[b-op34yx0akt] { color: #dc2626; }
.SBMsg.Ok[b-op34yx0akt] { color: #16a34a; }

@media (max-width: 620px) {
    .SBCheck[b-op34yx0akt] { width: 100%; order: 3; }
}
/* /Components/M_Components/Billing/BillListInfiniteScroll.razor.rz.scp.css */
.MineInfiniteFoot[b-okac071idy] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 0 6px;
    min-height: 44px;
}

.MineInfiniteFoot-Loading[b-okac071idy] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7688;
}

.MineInfiniteFoot-Spinner[b-okac071idy] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #d3dae6;
    border-top-color: #2f6fd0;
    animation: MineInfiniteSpin-b-okac071idy .7s linear infinite;
    flex-shrink: 0;
}

@keyframes MineInfiniteSpin-b-okac071idy {
    to { transform: rotate(360deg); }
}

.MineInfiniteFoot-End[b-okac071idy],
.MineInfiniteFoot-Empty[b-okac071idy] {
    font-size: 12.5px;
    font-weight: 600;
    color: #9aa6b8;
    letter-spacing: 0.3px;
}

.MineInfiniteFoot-Empty[b-okac071idy] {
    padding: 30px 0;
    color: #8a97ab;
}
/* /Components/M_Components/Billing/BillStatusStepper.razor.rz.scp.css */
/* ยกมาจาก CustomerOrders.razor.css (.CO2-Stepper*) ค่าเดิมทุกตัว — font-family เดิมได้จาก .CO2-Root */
.BSS-Stepper[b-i8x3ww9iht] {
    font-family: 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
    background: #fff;
    border: 1px solid #e4e8ec;
    border-radius: 14px;
    padding: 16px 22px 14px;
    margin-bottom: 14px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .06);
}

.BSS-StepperLabel[b-i8x3ww9iht] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: #1f2328;
    margin-bottom: 16px;
}

.BSS-StepperLabelEn[b-i8x3ww9iht] {
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #98a2ad;
}

.BSS-StepList[b-i8x3ww9iht] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 0;
}

.BSS-StepItem[b-i8x3ww9iht] {
    flex: 1;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;
}

.BSS-StepItem:not(:last-child)[b-i8x3ww9iht]::after {
    content: '';
    position: absolute;
    top: 15px;
    left: calc(50% + 15px);
    right: calc(-50% + 15px);
    height: 2px;
    background: #e6eaee;
    z-index: 0;
}

.BSS-StepItem.Completed:not(:last-child)[b-i8x3ww9iht]::after {
    background: #0B7A75;
}

.BSS-StepItem.Active:not(:last-child)[b-i8x3ww9iht]::after {
    background: linear-gradient(90deg, #0B7A75 0%, #e6eaee 100%);
}

.BSS-StepCircle[b-i8x3ww9iht] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    border: 2px solid #dfe4e9;
    background: #fff;
    color: #9aa4ae;
    z-index: 1;
    position: relative;
    transition: all .2s;
}

.BSS-StepItem.Completed .BSS-StepCircle[b-i8x3ww9iht] {
    background: #0B7A75;
    border-color: #0B7A75;
    color: #fff;
}

.BSS-StepItem.Active .BSS-StepCircle[b-i8x3ww9iht] {
    background: #0B7A75;
    border-color: #0B7A75;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(11, 122, 117, .16);
}

/* ขั้น "ยกเลิก" (BillStepState.Canceled) — ต่อท้ายขั้นปกติเมื่อบิลถูกยกเลิก */
.BSS-StepItem.Canceled .BSS-StepCircle[b-i8x3ww9iht] {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .14);
}

.BSS-StepItem.Canceled .BSS-StepName[b-i8x3ww9iht] {
    color: #dc2626;
    font-weight: 600;
}

.BSS-StepName[b-i8x3ww9iht] {
    margin-top: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: #1f2328;
    line-height: 1.35;
}

.BSS-StepItem.Active .BSS-StepName[b-i8x3ww9iht] {
    font-weight: 600;
}

.BSS-StepItem.Pending .BSS-StepName[b-i8x3ww9iht] {
    color: #9aa4ae;
    font-weight: 500;
}

/* วันเวลากำกับแต่ละขั้น (ว่างเมื่อขั้นยังไม่ถึง) */
.BSS-StepTime[b-i8x3ww9iht] {
    margin-top: 2px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    color: #79838d;
    line-height: 1.3;
    white-space: nowrap;
}

.BSS-StepTime:empty[b-i8x3ww9iht] {
    display: none;
}

.BSS-StepCanceled[b-i8x3ww9iht] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    color: #dc2626;
    font-weight: 700;
    font-size: 14px;
}

.BSS-StepCanceledIcon[b-i8x3ww9iht] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

/* มือถือ (<780px) — แนวตั้ง วงกลม+ชื่อขั้นตอนเรียงข้างกัน เส้นเชื่อมอยู่ทางซ้าย */
@media (max-width: 779px) {
    .BSS-StepList[b-i8x3ww9iht] {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .BSS-StepItem[b-i8x3ww9iht] {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        width: 100%;
        min-width: 0;
        padding-bottom: 18px;
    }

    .BSS-StepItem:last-child[b-i8x3ww9iht] {
        padding-bottom: 0;
    }

    .BSS-StepItem:not(:last-child)[b-i8x3ww9iht]::after {
        top: 30px;
        left: 14px;
        right: auto;
        width: 2px;
        height: calc(100% - 14px);
        background: #e5e9ef;
    }

    .BSS-StepItem.Active:not(:last-child)[b-i8x3ww9iht]::after {
        background: linear-gradient(180deg, #0B7A75 0%, #e5e9ef 100%);
    }

    .BSS-StepName[b-i8x3ww9iht] {
        margin-top: 5px;
        margin-left: 11px;
        text-align: left;
    }

    .BSS-StepTime[b-i8x3ww9iht] {
        margin-top: 6px;
        margin-left: auto;
        padding-left: 10px;
    }
}
/* /Components/M_Components/Billing/BillTabBar.razor.rz.scp.css */
.MineBillTabBar[b-98kvghvm7e] {
    position: relative;
    height: 54px;
    background: #fff;
    border: 1px solid #e6e9f0;
    border-radius: 14px;
    padding: 0;
    font-size: 14px;
    display: flex;
    gap: 0;
    overflow-x: auto;
    box-shadow: 0 10px 24px -20px rgba(23,45,80,0.4);
    scrollbar-width: thin;
}

    .MineBillTabBar[b-98kvghvm7e]::-webkit-scrollbar { height: 4px; }
    .MineBillTabBar[b-98kvghvm7e]::-webkit-scrollbar-thumb { background: #d3dae6; border-radius: 4px; }

.MineBillTabBar-Item[b-98kvghvm7e] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex: 1 0 auto;
    width: auto;
    min-width: fit-content;
    padding: 0 18px;
    font-size: 15px;
    font-weight: 600;
    color: #6b7688;
    cursor: pointer;
    transition: color .15s, background .15s;
    white-space: nowrap;
}

    .MineBillTabBar-Item + .MineBillTabBar-Item[b-98kvghvm7e] {
        border-left: 1px solid #eef1f6;
    }

    .MineBillTabBar-Item:hover[b-98kvghvm7e] {
        color: #17233a;
        background: #f2f5fa;
    }

    .MineBillTabBar-Item.ItemActive[b-98kvghvm7e] {
        color: var(--mine-theme-main, #2563a8);
        font-weight: 800;
        background: color-mix(in srgb, var(--mine-theme-main, #2563a8) 10%, #fff);
    }

    .MineBillTabBar-Item.Disabled[b-98kvghvm7e] {
        cursor: not-allowed;
        opacity: 0.35;
    }

        .MineBillTabBar-Item.Disabled:hover[b-98kvghvm7e] {
            background: transparent;
            color: #6b7688;
        }

.MineBillTabBar-Active[b-98kvghvm7e] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--mine-theme-main, #2563a8);
}

.MineBillTabBar-Badge[b-98kvghvm7e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    background: #e5484d;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    box-shadow: 0 2px 6px -1px rgba(229,72,77,0.5);
}

/* Variant: Pill (StockRec_Man) — แท็บแบบเม็ดยา แทนเส้นใต้ */
.Variant-Pill[b-98kvghvm7e] {
    height: auto;
    padding: 8px;
    gap: 8px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

    .Variant-Pill .MineBillTabBar-Item:hover[b-98kvghvm7e] {
        background: white;
    }

    .Variant-Pill .MineBillTabBar-Item + .MineBillTabBar-Item[b-98kvghvm7e] {
        border-left: none;
    }

    .Variant-Pill .MineBillTabBar-Item[b-98kvghvm7e] {
        flex: 0 0 auto;
        width: auto;
        height: 36px;
        border-radius: 18px;
        background: white;
        box-shadow: 0 1px 1px 0 rgba(0,0,0,.05);
    }

        .Variant-Pill .MineBillTabBar-Item:hover[b-98kvghvm7e] {
            color: inherit;
        }

    .Variant-Pill .MineBillTabBar-Active[b-98kvghvm7e] {
        position: static;
        display: none;
    }

    .Variant-Pill .MineBillTabBar-Item.ItemActive[b-98kvghvm7e] {
        background: var(--mine-theme-main);
        color: var(--mine-theme-font);
    }

/* จอแคบมาก — scroll แนวนอนแทนการบีบให้ล้น */
@media (max-width: 480px) {
    .MineBillTabBar-Item[b-98kvghvm7e] {
        width: auto;
        padding: 0 12px;
        font-size: 14px;
    }
}
/* /Components/M_Components/Billing/DrugLabelDialog.razor.rz.scp.css */
/* DrugLabelDialog — ธีมหลังบ้าน teal ; z-index ต่ำกว่า ReceiptPrinter (60000) ให้ popup ไม่พบ agent ขึ้นทับได้ */
.dl-overlay[b-j185q7vptf] { position: fixed; inset: 0; z-index: 55000; background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center; font-family: 'Mine_ThaiFont', 'IBM Plex Sans Thai', sans-serif; }
.dl-dlg[b-j185q7vptf] { background: #fff; border-radius: 14px; width: min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 32px); display: flex; flex-direction: column; color: #0f172a; font-size: 14px; }
.dl-head[b-j185q7vptf] { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #e5e8ee; font-weight: 700; }
.dl-x[b-j185q7vptf] { cursor: pointer; font-size: 20px; line-height: 1; color: #64748b; }
.dl-body[b-j185q7vptf] { padding: 14px 18px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.dl-split[b-j185q7vptf] { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; }
.dl-foot[b-j185q7vptf] { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid #e5e8ee; }
.dl-foot .dl-hint[b-j185q7vptf] { margin-right: auto; }
.dl-hint[b-j185q7vptf] { font-size: 12.5px; color: #64748b; }
.dl-err[b-j185q7vptf] { color: #b42318; font-size: 13px; padding: 0 18px 8px; }

.dl-label[b-j185q7vptf] { font-size: 13px; color: #334155; }
.dl-input[b-j185q7vptf] { border: 1px solid #cfd6df; border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 14px; background: #fff; min-width: 0; }
.dl-input:focus[b-j185q7vptf] { outline: none; border-color: #0B7A75; }
.dl-num[b-j185q7vptf] { width: 80px; }
.dl-link[b-j185q7vptf] { border: none; background: none; color: #0B7A75; font: inherit; font-size: 13px; cursor: pointer; padding: 0; }

.dl-list[b-j185q7vptf] { display: flex; flex-direction: column; gap: 6px; }
.dl-listhead[b-j185q7vptf] { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 13px; color: #334155; }
.dl-item[b-j185q7vptf] { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #e5e8ee; border-radius: 10px; cursor: pointer; }
.dl-item.on[b-j185q7vptf] { border-color: #0B7A75; background: #f0f9f8; }
.dl-item input[type=checkbox][b-j185q7vptf] { width: 18px; height: 18px; accent-color: #0B7A75; flex-shrink: 0; }
.dl-itemtext[b-j185q7vptf] { flex: 1; min-width: 0; }
.dl-itemname[b-j185q7vptf] { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-itemsub[b-j185q7vptf] { font-size: 12px; color: #64748b; display: flex; gap: 6px; align-items: center; }
.dl-badge[b-j185q7vptf] { background: #e6f4f3; color: #0B7A75; border-radius: 999px; padding: 0 8px; font-size: 11px; }
.dl-count[b-j185q7vptf] { display: flex; align-items: center; gap: 4px; }
.dl-count input[b-j185q7vptf] { width: 52px; border: 1px solid #cfd6df; border-radius: 6px; padding: 4px 6px; font: inherit; }
.dl-count small[b-j185q7vptf] { color: #64748b; }

.dl-form[b-j185q7vptf] { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dl-formtitle[b-j185q7vptf] { font-weight: 700; font-size: 15px; }
.dl-grid[b-j185q7vptf] { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 10px; align-items: center; }
.dl-inline[b-j185q7vptf] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dl-seg[b-j185q7vptf] { display: flex; flex-wrap: wrap; gap: 6px; }
.dl-seg button[b-j185q7vptf] { border: 1px solid #cfd6df; background: #fff; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; color: #0f172a; }
.dl-seg button.on[b-j185q7vptf] { background: #0B7A75; border-color: #0B7A75; color: #fff; }
.dl-checks[b-j185q7vptf] { display: flex; flex-wrap: wrap; gap: 14px; }
.dl-checks label[b-j185q7vptf], .dl-checkone[b-j185q7vptf] { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.dl-checks input[b-j185q7vptf], .dl-checkone input[b-j185q7vptf] { width: 17px; height: 17px; accent-color: #0B7A75; }
.dl-instrhead[b-j185q7vptf] { display: flex; justify-content: space-between; align-items: center; }
.dl-instr[b-j185q7vptf] { min-height: 70px; resize: vertical; }

.dl-previewwrap[b-j185q7vptf] { display: flex; justify-content: center; background: #eef1f5; border-radius: 10px; padding: 14px; }
.dl-paper[b-j185q7vptf] { background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.18); }

.dl-primary[b-j185q7vptf], .dl-ghost[b-j185q7vptf] { border-radius: 8px; padding: 8px 16px; font: inherit; font-size: 14px; cursor: pointer; }
.dl-primary[b-j185q7vptf] { background: #0B7A75; color: #fff; border: 1px solid #0B7A75; }
.dl-primary:disabled[b-j185q7vptf] { opacity: .5; cursor: not-allowed; }
.dl-ghost[b-j185q7vptf] { background: #fff; color: #0f172a; border: 1px solid #cfd6df; }

@media (max-width: 860px) {
    .dl-split[b-j185q7vptf] { grid-template-columns: minmax(0, 1fr); }
    .dl-overlay[b-j185q7vptf] { align-items: flex-end; }
    .dl-dlg[b-j185q7vptf] { width: 100%; max-height: 94vh; border-radius: 16px 16px 0 0; }
    .dl-foot[b-j185q7vptf] { flex-wrap: wrap; }
    .dl-foot .dl-hint[b-j185q7vptf] { width: 100%; }
}
/* /Components/M_Components/Billing/PopupBillPicker.razor.rz.scp.css */
.PBP-Overlay[b-jvw5bqckak] {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(15, 23, 42, .45);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}

.PBP-Modal[b-jvw5bqckak] {
    background: #fff;
    border-radius: 16px;
    width: min(1180px, 96vw);
    height: min(88vh, 860px);
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    font-family: 'Mine_ThaiFont', 'IBM Plex Sans Thai', sans-serif;
}

.PBP-Head[b-jvw5bqckak] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #eef1f5;
    flex-shrink: 0;
}

.PBP-Title[b-jvw5bqckak] { font-size: 15px; font-weight: 700; color: #1e293b; }

.PBP-Close[b-jvw5bqckak] {
    border: none; background: #f1f5f9; color: #475569;
    width: 30px; height: 30px; border-radius: 8px;
    font-size: 14px; cursor: pointer; line-height: 1;
}
.PBP-Close:hover[b-jvw5bqckak] { background: #e2e8f0; color: #1e293b; }

.PBP-Body[b-jvw5bqckak] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 16px;
    overflow: hidden;           /* ไม่ scroll ทั้งก้อน — ให้แต่ละฝั่งข้างใน scroll เอง */
}

/* ── ปรับ BillDocumentBoard ให้พอดีความสูง popup + สองฝั่ง scroll แยกกัน ── */
.PBP-Body[b-jvw5bqckak]  .MDB {
    min-height: 0;
    height: 100%;
    padding: 0;
    gap: 14px;
    background: transparent;
}

.PBP-Body[b-jvw5bqckak]  .MDB-Body {
    min-height: 0;
    align-items: stretch;
}

/* ฝั่งซ้าย: ตาราง scroll เอง, แถบแบ่งหน้าตรึงล่าง */
.PBP-Body[b-jvw5bqckak]  .MDB-ListZone {
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.PBP-Body[b-jvw5bqckak]  .MDB-TableScroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.PBP-Body[b-jvw5bqckak]  .MDB-Pager {
    flex-shrink: 0;
}

/* ฝั่งขวา: แผงพรีวิว scroll เอง (ยกเลิก sticky) */
.PBP-Body[b-jvw5bqckak]  .MDB-Preview {
    position: static;
    top: auto;
    min-height: 0;
    overflow-y: auto;
}

/* แถบล่างติดขอบ modal เสมอ */
.PBP-Foot[b-jvw5bqckak] {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid #eef1f5;
    background: #fbfcfe;
}

.PBP-FootInfo[b-jvw5bqckak] { font-size: 12.5px; color: #64748b; }
.PBP-FootInfo b[b-jvw5bqckak] { color: #1e293b; font-weight: 700; }

.PBP-FootBtns[b-jvw5bqckak] { display: flex; gap: 10px; }

.PBP-BtnGhost[b-jvw5bqckak],
.PBP-BtnPrimary[b-jvw5bqckak] {
    padding: 9px 20px; border-radius: 9px; font-size: 13px; font-weight: 700;
    cursor: pointer; border: 1px solid transparent;
}

.PBP-BtnGhost[b-jvw5bqckak] { background: #fff; border-color: #d5dbe3; color: #475569; }
.PBP-BtnGhost:hover[b-jvw5bqckak] { background: #f1f5f9; }

.PBP-BtnPrimary[b-jvw5bqckak] { background: #12141a; color: #fff; }
.PBP-BtnPrimary:hover[b-jvw5bqckak] { background: #23262f; }
.PBP-BtnPrimary:disabled[b-jvw5bqckak] { background: #cbd5e1; color: #eef2f7; cursor: not-allowed; }
/* /Components/M_Components/Billing/PopupLotPicker_Local.razor.rz.scp.css */
.LPOverlay[b-m0gvleqw1n] {
    position: fixed; inset: 0; z-index: 50000;
    background: rgba(15,23,42,.55); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
}
.LPBox[b-m0gvleqw1n] {
    background: #fff; border-radius: 14px; width: min(620px, calc(100vw - 32px));
    max-height: calc(100vh - 48px); overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,.28); display: flex; flex-direction: column;
}
.LPHead[b-m0gvleqw1n] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 12px; border-bottom: 1px solid #eef1f6;
}
.LPTitle[b-m0gvleqw1n] { font-size: 15px; font-weight: 800; color: #1e293b; }
.LPSub[b-m0gvleqw1n] { font-size: 12px; color: #94a3b8; margin-left: 8px; }
.LPClose[b-m0gvleqw1n] { width: 30px; height: 30px; border-radius: 8px; border: none; background: #f1f5f9; color: #64748b; cursor: pointer; font-size: 15px; }
.LPClose:hover[b-m0gvleqw1n] { background: #fee2e2; color: #dc2626; }

.LPBody[b-m0gvleqw1n] { padding: 16px 20px; }
.LPEmpty[b-m0gvleqw1n] { text-align: center; color: #94a3b8; padding: 32px; font-size: 13px; }
.LPNeed[b-m0gvleqw1n] { font-size: 12.5px; color: #475569; margin-bottom: 10px; }
.LPNeed b.Ok[b-m0gvleqw1n] { color: #16a34a; }

.LPTable[b-m0gvleqw1n] { width: 100%; border-collapse: collapse; font-size: 13px; }
.LPTable th[b-m0gvleqw1n] {
    text-align: left; padding: 8px 8px; font-size: 10.5px; font-weight: 800;
    color: #64748b; text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 2px solid #e5e9ef;
}
.LPTable th.R[b-m0gvleqw1n], .LPTable td.R[b-m0gvleqw1n] { text-align: right; }
.LPTable td[b-m0gvleqw1n] { padding: 9px 8px; border-bottom: 1px solid #f0f2f5; }
.LPInput[b-m0gvleqw1n] {
    width: 110px; box-sizing: border-box; min-height: 34px;
    border: 1.5px solid #e3e6ea; border-radius: 8px; padding: 6px 9px;
    font-size: 13px; text-align: right; outline: none; background: #fafbfc;
}
.LPInput:focus[b-m0gvleqw1n] { border-color: #3b82f6; background: #fff; box-shadow: 0 0 0 3px rgba(59,130,246,.14); }

.LPErr[b-m0gvleqw1n] {
    margin-top: 10px; padding: 8px 12px; border-radius: 8px;
    background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; font-size: 12px; font-weight: 700;
}

.LPFoot[b-m0gvleqw1n] {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 20px 16px; border-top: 1px solid #eef1f6;
}
.LPBtnSave[b-m0gvleqw1n] {
    padding: 9px 22px; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer;
    border: none; background: linear-gradient(135deg, #293649, #1e3a8a, #3b82f6); color: #fff;
}
.LPBtnAuto[b-m0gvleqw1n] {
    padding: 9px 16px; border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer;
    border: 1.5px solid #bfdbfe; background: #eff6ff; color: #1d4ed8;
}
.LPBtnCancel[b-m0gvleqw1n] {
    padding: 9px 16px; border-radius: 9px; font-size: 13px; cursor: pointer;
    border: 1.5px solid #d1d5db; background: #fff; color: #374151;
}
/* /Components/M_Components/Billing/PopupPayment.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   PopupPayment.razor.css — popup บันทึกการชำระเงินกลาง (ทุกบิลฝั่งหลังบ้าน)
   [2026-10] ปรับให้เป็นชุดเดียวกับ popup ชำระเงินบิลสั่งซื้อ (CPO .CO2-PayPop) / BillConfirmDialog :
   พื้นขาว + เส้นบน teal · ยอดคงค้างตัวใหญ่ที่หัว · ชิป/ปุ่มบันทึก teal ทึบ (ไม่ gradient)
   ═══════════════════════════════════════════════════════════════ */

.PPOverlay[b-irbkffqs55] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 60000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: PPFadeIn-b-irbkffqs55 .15s ease;
}

@keyframes PPFadeIn-b-irbkffqs55 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.PPBox[b-irbkffqs55] {
    background: #fff;
    border-radius: 18px;
    border-top: 4px solid #0B7A75;
    width: 520px;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .35);
    animation: PPSlideUp-b-irbkffqs55 .2s ease;
    overflow: hidden;
    font-family: 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
    color: #0f172a;
}

    .PPBox button[b-irbkffqs55],
    .PPBox input[b-irbkffqs55],
    .PPBox select[b-irbkffqs55],
    .PPBox textarea[b-irbkffqs55] {
        font-family: inherit;
    }

@keyframes PPSlideUp-b-irbkffqs55 {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ─── Header ─── */
.PPHeader[b-irbkffqs55] {
    padding: 18px 22px 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #eef2f6;
    flex-shrink: 0;
}

.PPHeaderText[b-irbkffqs55] {
    min-width: 0;
}

.PPHeaderSub[b-irbkffqs55] {
    font-size: 12.5px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.PPHeaderAmount[b-irbkffqs55] {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

    .PPHeaderAmount span[b-irbkffqs55] {
        font-size: 13px;
        font-weight: 500;
        color: #64748b;
        margin-right: 4px;
    }

.PPCloseBtn[b-irbkffqs55] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

    .PPCloseBtn:hover[b-irbkffqs55] {
        background: #e2e8f0;
        color: #0f172a;
    }

/* ─── Body ─── */
.PPBody[b-irbkffqs55] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.PPRow[b-irbkffqs55] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.PPFieldGroup[b-irbkffqs55] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.PPLabel[b-irbkffqs55] {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

.PPInput[b-irbkffqs55] {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #0f172a;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

    .PPInput:focus[b-irbkffqs55] {
        outline: none;
        border-color: #0B7A75;
        box-shadow: 0 0 0 3px rgba(11, 122, 117, .12);
    }

    .PPInput[readonly][b-irbkffqs55] {
        background: #f8fafc;
        color: #64748b;
        cursor: default;
    }

textarea.PPInput[b-irbkffqs55] {
    resize: vertical;
    min-height: 44px;
}

/* ─── จำนวนเงิน + ปุ่มเต็มจำนวน ─── */
.PPAmountRow[b-irbkffqs55] {
    display: flex;
    gap: 8px;
}

.PPInputAmount[b-irbkffqs55] {
    flex: 1;
    height: 46px;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.PPFullBtn[b-irbkffqs55] {
    padding: 0 14px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .PPFullBtn:hover[b-irbkffqs55] { border-color: #9fd3ce; }

    .PPFullBtn.Active[b-irbkffqs55] {
        border-color: #0B7A75;
        color: #0B7A75;
    }

/* ─── เลือกบัญชีโอน — การ์ดรายการ (ชุดเดียวกับ PaymentSelectChoice Compact) ─── */
.PPAccountList[b-irbkffqs55] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 264px;
    overflow-y: auto;
    padding: 2px;
}

.PPAccountCard[b-irbkffqs55] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

    .PPAccountCard:hover[b-irbkffqs55] { border-color: #9fd3ce; }

    .PPAccountCard.Selected[b-irbkffqs55] {
        border-color: #0B7A75;
        background: #fbfefe;
    }

.PPAccountBadge[b-irbkffqs55] {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    overflow: hidden;
}

    .PPAccountBadge img[b-irbkffqs55] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.PPAccountText[b-irbkffqs55] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

    .PPAccountText b[b-irbkffqs55] {
        font-size: 13.5px;
        font-weight: 600;
        color: #0f172a;
    }

    .PPAccountText small[b-irbkffqs55] {
        font-size: 11.5px;
        color: #64748b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.PPAccountNo[b-irbkffqs55] {
    font-size: 12px;
    color: #334155;
    font-variant-numeric: tabular-nums;
}

.PPAccountRadio[b-irbkffqs55] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
}

.PPAccountCard.Selected .PPAccountRadio[b-irbkffqs55] {
    border-color: #0B7A75;
    background: #0B7A75;
    box-shadow: inset 0 0 0 3px #fff;
}

.PPAccountEmpty[b-irbkffqs55] {
    padding: 12px;
    border-radius: 10px;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 12.5px;
    text-align: center;
}

/* ─── Payment Type Chips ─── */
.PPTypeRow[b-irbkffqs55] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.PPTypeChip[b-irbkffqs55] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    user-select: none;
    margin: 0;
    transition: border-color .12s, background .12s, color .12s;
}

    .PPTypeChip input[type="radio"][b-irbkffqs55] { display: none; }

    .PPTypeChip:hover[b-irbkffqs55] { border-color: #9fd3ce; }

    .PPTypeChip.Active[b-irbkffqs55] {
        border-color: #0B7A75;
        background: #0B7A75;
        color: #fff;
        font-weight: 600;
    }

/* ─── วันที่ชำระ (อ่านอย่างเดียว) ─── */
.PPMeta[b-irbkffqs55] {
    font-size: 12px;
    color: #94a3b8;
}

/* ─── Alert ─── */
.PPAlert[b-irbkffqs55] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 12.5px;
    padding: 9px 12px;
    border-radius: 10px;
}

/* ─── เงินทอน — กรอกจำนวนเงินเกินยอดคงค้าง ─── */
.PPChangeHint[b-irbkffqs55] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #b45309;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 12px;
    border-radius: 10px;
}

/* ─── Footer ─── */
.PPFooter[b-irbkffqs55] {
    padding: 12px 22px;
    background: #f8fafc;
    border-top: 1px solid #eef2f6;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.PPBtn[b-irbkffqs55] {
    padding: 9px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background .15s;
}

.PPBtnConfirm[b-irbkffqs55] {
    background: #0B7A75;
    border: 1px solid #0B7A75;
    color: #fff;
}

    .PPBtnConfirm:hover[b-irbkffqs55] { background: #095E5A; }

.PPBtnCancel[b-irbkffqs55] {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

    .PPBtnCancel:hover[b-irbkffqs55] { background: #f1f5f9; }

/* ─── Mobile ─── */
@media (max-width: 560px) {
    .PPOverlay[b-irbkffqs55] { padding: 0; align-items: flex-end; }
    .PPBox[b-irbkffqs55] { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
    .PPRow[b-irbkffqs55] { grid-template-columns: 1fr; }
    .PPFooter > .PPBtn[b-irbkffqs55] { flex: 1; }
}
/* /Components/M_Components/Billing/PrintSettingsPanel.razor.rz.scp.css */
/* PrintSettingsPanel (ใช้ใน Settings_Receipt + popup POS) — .st-* กลาง + ส่วนเฉพาะ prefix .rc- */
.rc-inline[b-10ene4orpm] { display: flex; align-items: center; gap: 12px; }
.rc-inline.top[b-10ene4orpm] { align-items: flex-start; }
.rc-inline .st-input[b-10ene4orpm], .rc-inline .st-textarea[b-10ene4orpm] { flex: 1; min-width: 0; }
/* .st-row-control.grow > * { flex: 1 1 auto } (minesettings.css) ยืด toggle จนเต็มแถว — ล็อกขนาดกลับ */
.rc-inline[b-10ene4orpm]  .Main { flex: 0 0 42px; }
.rc-num[b-10ene4orpm] { width: 90px; }

.rc-logo[b-10ene4orpm] { display: flex; align-items: center; gap: 10px; }
.rc-logobox[b-10ene4orpm] { width: 120px; height: 64px; border: 1.5px dashed #cfd6df; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; color: #64748b; font: inherit; font-size: 13px; padding: 4px; }
.rc-logobox img[b-10ene4orpm] { max-width: 100%; max-height: 100%; object-fit: contain; }
.rc-logobox:hover[b-10ene4orpm] { border-color: #0B7A75; }

.rc-missing[b-10ene4orpm] { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid #f3d9a4; background: #fffaf0; border-radius: 10px; font-size: 13.5px; line-height: 1.5; }
.rc-actions[b-10ene4orpm] { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.rc-actions a.st-btn[b-10ene4orpm] { text-decoration: none; }
.rc-dirty[b-10ene4orpm] { font-size: 12.5px; color: #b45309; padding-top: 6px; }

.rc-typeseg[b-10ene4orpm] { margin-left: auto; }
.rc-previewwrap[b-10ene4orpm] { display: flex; justify-content: center; background: #eef1f5; border-radius: 0 0 12px 12px; padding: 18px 12px; }
.rc-paper[b-10ene4orpm] { background: #fff; padding: 10px 0 18px; box-shadow: 0 1px 3px rgba(15,23,42,.18); overflow: hidden; }

@media (max-width: 1100px) {
    .rc-grid[b-10ene4orpm] { grid-template-columns: minmax(0, 1fr); }
}

/* แท็บ ใบเสร็จ / ฉลากยา / เครื่องพิมพ์เครื่องนี้ */
.rc-tabs[b-10ene4orpm] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid #e5e8ee; }
.rc-tabs button[b-10ene4orpm] { border: none; background: none; font: inherit; font-size: 14px; padding: 10px 14px; cursor: pointer; color: #475569; border-bottom: 2.5px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.rc-tabs button.on[b-10ene4orpm] { color: #0B7A75; border-bottom-color: #0B7A75; font-weight: 700; }
.rc-tabs .st-tag[b-10ene4orpm] { margin: 0; }

/* ช่องขอบ 4 ด้าน */
.rc-padgrid[b-10ene4orpm] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 6px 0; }
.rc-padgrid label[b-10ene4orpm] { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #475569; }
.rc-padgrid .st-input[b-10ene4orpm] { width: 100%; }
.rc-pad[b-10ene4orpm] { padding: 0 16px 14px; }
.rc-labelpaper[b-10ene4orpm] { padding: 0; }
.rc-inline .st-input.rc-lic[b-10ene4orpm] { flex: 0 0 130px; }
/* /Components/M_Components/Billing/ReceiptPrinter.razor.rz.scp.css */
/* ReceiptPrinter — ธีมหลังบ้าน teal (#0B7A75) ปุ่มสีทึบเรียบ ไม่ gradient */
.rp-overlay[b-cxzxx7i4nk] { position: fixed; inset: 0; z-index: 60000; background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center; font-family: 'Mine_ThaiFont', 'IBM Plex Sans Thai', sans-serif; }
.rp-busy[b-cxzxx7i4nk] { background: #fff; border-radius: 12px; padding: 16px 22px; display: flex; align-items: center; gap: 12px; font-size: 14px; color: #0f172a; }
.rp-spin[b-cxzxx7i4nk] { width: 18px; height: 18px; border: 3px solid #d7ecea; border-top-color: #0B7A75; border-radius: 50%; animation: rp-rot-b-cxzxx7i4nk .8s linear infinite; }
@keyframes rp-rot-b-cxzxx7i4nk { to { transform: rotate(360deg); } }

.rp-dlg[b-cxzxx7i4nk] { background: #fff; border-radius: 14px; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; display: flex; flex-direction: column; color: #0f172a; font-size: 14px; }
.rp-head[b-cxzxx7i4nk] { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #e5e8ee; font-weight: 700; }
.rp-x[b-cxzxx7i4nk] { cursor: pointer; font-size: 20px; line-height: 1; color: #64748b; }
.rp-body[b-cxzxx7i4nk] { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.rp-body p[b-cxzxx7i4nk] { margin: 0; line-height: 1.5; }
.rp-steps[b-cxzxx7i4nk] { margin: 0; padding-left: 20px; line-height: 1.7; }
.rp-hint[b-cxzxx7i4nk] { font-size: 12.5px; color: #64748b; }
.rp-foot[b-cxzxx7i4nk] { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid #e5e8ee; }

.rp-label[b-cxzxx7i4nk] { font-size: 13px; color: #334155; }
.rp-chips[b-cxzxx7i4nk] { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chip[b-cxzxx7i4nk] { border: 1px solid #cfd6df; background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; color: #0f172a; }
.rp-chip.on[b-cxzxx7i4nk] { background: #0B7A75; border-color: #0B7A75; color: #fff; }
.rp-input[b-cxzxx7i4nk] { border: 1px solid #cfd6df; border-radius: 8px; padding: 8px 10px; font: inherit; }
.rp-input:focus[b-cxzxx7i4nk] { outline: none; border-color: #0B7A75; }
.rp-err[b-cxzxx7i4nk] { color: #b42318; font-size: 13px; }

.rp-primary[b-cxzxx7i4nk], .rp-ghost[b-cxzxx7i4nk] { border-radius: 8px; padding: 8px 16px; font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.rp-primary[b-cxzxx7i4nk] { background: #0B7A75; color: #fff; border: 1px solid #0B7A75; }
.rp-primary:disabled[b-cxzxx7i4nk] { opacity: .5; cursor: not-allowed; }
.rp-ghost[b-cxzxx7i4nk] { background: #fff; color: #0f172a; border: 1px solid #cfd6df; }

@media (max-width: 640px) {
    .rp-overlay[b-cxzxx7i4nk] { align-items: flex-end; }
    .rp-dlg[b-cxzxx7i4nk] { width: 100%; border-radius: 16px 16px 0 0; }
    .rp-foot > *[b-cxzxx7i4nk] { flex: 1; justify-content: center; min-height: 42px; }
}
/* /Components/M_Components/Billing/SaleBillEditor.razor.rz.scp.css */
/* ═══════════ POS (ขายปลีก / ขายส่ง) — ธีมสว่าง teal หลังบ้าน · responsive PC / Tablet / Mobile [2026-10 รอบ 2] ═══════════
   PC ≥ 1200px : ซ้าย (ค้นหา · สินค้าด่วน · ตารางบิล) | ขวา 330px (ลูกค้า · สรุป · บันทึก) — ทั้งหน้าพอดีจอ scroll เฉพาะตาราง
   Tablet 768–1199px : ขวาแคบลง 280px · แถบปุ่มฟังก์ชันเลื่อนแนวนอน · timeline ย่อ
   Mobile < 768px : คอลัมน์เดียว ทั้งหน้า scroll · ตารางบิลเป็นการ์ด · แถบชำระเงินติดล่างจอ
   ตัวเลขล้วน = 'IBM Plex Split' ; ข้อความไทย/ปน = 'Mine_ThaiFont' */

.POS[b-sj4aql1z6b], .POSModalOverlay[b-sj4aql1z6b] {
    --p: #0B7A75;          /* หลัก teal */
    --p-dark: #08605c;
    --p-soft: #e7f4f3;
    --p-line: #b9dfdc;
    --bg: #f3f5f8;
    --surface: #ffffff;
    --line: #e5e8ee;
    --line-soft: #eff1f5;
    --ink: #0f172a;
    --ink-2: #334155;
    --muted: #64748b;
    --muted-2: #94a3b8;
    --danger: #dc2626;
    --warn: #b45309;
    --num: 'IBM Plex Split', 'IBM Plex Sans Thai', sans-serif;
    --thai: 'Mine_ThaiFont', 'IBM Plex Sans Thai', sans-serif;
}

.POSLoad[b-sj4aql1z6b] { text-align: center; padding: 80px 16px; color: #94a3b8; font-size: 15px; }

.POS input[b-sj4aql1z6b], .POS button[b-sj4aql1z6b], .POS textarea[b-sj4aql1z6b], .POS select[b-sj4aql1z6b] { font-family: var(--thai); }

.POS[b-sj4aql1z6b] {
    display: flex; flex-direction: column;
    height: calc(100vh - var(--be-top-h, 0px)); /* เต็มพื้นที่ใต้แถบบน (.ShowZone padding-top = --be-top-h) */
    /* .ShowZone (layout) เป็น flex + width:fit-content → ถ้าปล่อย width:auto หน้าจะขยายตามเนื้อหาจนล้นจอ
       ให้ยืดเต็มพื้นที่ที่เหลือจริงด้วย flex-basis 0 (ไม่ใช้ 100vw — ดู memory .ShowZone) */
    flex: 1 1 0; width: 0; min-width: 0;
    margin: 0;
    box-sizing: border-box;
    background: var(--bg);
    overflow: hidden;
    font-family: var(--thai);
    font-size: 13px; color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.POS kbd[b-sj4aql1z6b], .POSDlg kbd[b-sj4aql1z6b] {
    display: inline-block; min-width: 20px; padding: 0 5px; box-sizing: border-box;
    border-radius: 5px; border: 1px solid var(--line); background: var(--bg);
    font-family: var(--num); font-size: 10px; font-weight: 700;
    color: var(--muted); line-height: 1.6; text-align: center;
}

/* ─────────── Header ─────────── */
.POSHeader[b-sj4aql1z6b] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 10px 16px; flex-shrink: 0;
}
.POSHeaderL[b-sj4aql1z6b] { display: flex; align-items: center; gap: 11px; min-width: 0; }
.POSLogo[b-sj4aql1z6b] {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    background: var(--p); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px;
}
.POSHTitle[b-sj4aql1z6b] { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.POSHCode[b-sj4aql1z6b] { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.POSHeaderR[b-sj4aql1z6b] { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; min-width: 0; }
.POSHeaderDev[b-sj4aql1z6b] {
    font-size: 11.5px; color: var(--muted); background: var(--bg); border: 1px solid var(--line);
    border-radius: 20px; padding: 4px 11px; display: inline-flex; align-items: center; gap: 6px; margin-right: 4px;
}
.POSDeviceDot[b-sj4aql1z6b] { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; }
.POSUserAvatar[b-sj4aql1z6b] {
    width: 28px; height: 28px; border-radius: 50%; background: var(--p-soft); color: var(--p);
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.POSUserName[b-sj4aql1z6b] { overflow: hidden; text-overflow: ellipsis; }

/* ─────────── Timeline สถานะ ─────────── */
.POSTimeline[b-sj4aql1z6b] {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px 16px;
    overflow-x: auto; scrollbar-width: none;
}
.POSTimeline[b-sj4aql1z6b]::-webkit-scrollbar { display: none; }
.POSStep[b-sj4aql1z6b] { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.POSStepDot[b-sj4aql1z6b] {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; background: var(--bg); color: var(--muted-2); border: 1.5px solid var(--line);
}
.POSStepTxt[b-sj4aql1z6b] { display: flex; flex-direction: column; line-height: 1.25; }
.POSStepTxt b[b-sj4aql1z6b] { font-size: 12px; font-weight: 700; color: var(--muted-2); white-space: nowrap; }
.POSStepTxt small[b-sj4aql1z6b] { font-size: 10.5px; color: var(--muted-2); font-family: var(--num); white-space: nowrap; }
.POSStep.Done .POSStepDot[b-sj4aql1z6b] { background: var(--p-soft); color: var(--p); border-color: var(--p-line); }
.POSStep.Done .POSStepTxt b[b-sj4aql1z6b] { color: var(--ink-2); }
.POSStep.Done .POSStepTxt small[b-sj4aql1z6b] { color: var(--muted); }
.POSStep.Now .POSStepDot[b-sj4aql1z6b] { background: var(--p); color: #fff; border-color: var(--p); }
.POSStep.Now .POSStepTxt b[b-sj4aql1z6b] { color: var(--p-dark); font-weight: 800; }
.POSStep.Now .POSStepTxt small[b-sj4aql1z6b] { color: var(--ink-2); }
.POSStep.Skip .POSStepTxt b[b-sj4aql1z6b] { text-decoration: line-through; text-decoration-color: #cbd5e1; }
.POSStep.Cancel.Now .POSStepDot[b-sj4aql1z6b] { background: var(--danger); border-color: var(--danger); }
.POSStep.Cancel.Now .POSStepTxt b[b-sj4aql1z6b] { color: var(--danger); }
.POSStepLine[b-sj4aql1z6b] { flex: 0 1 40px; min-width: 12px; height: 2px; background: var(--line); border-radius: 2px; }
.POSStepLine.Done[b-sj4aql1z6b] { background: var(--p-line); }
.POSStepSep[b-sj4aql1z6b] { width: 1px; height: 24px; background: var(--line); margin: 0 4px; flex-shrink: 0; }
.POSStatMove[b-sj4aql1z6b] {
    margin-left: auto; flex-shrink: 0; padding: 6px 14px; border-radius: 8px;
    border: 1px solid var(--p); background: var(--surface);
    font-size: 12px; font-weight: 700; color: var(--p); cursor: pointer;
}
.POSStatMove:hover[b-sj4aql1z6b] { background: var(--p-soft); }

.POSAlert[b-sj4aql1z6b] {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 7px 16px; font-size: 12.5px; font-weight: 600; flex-shrink: 0;
}
.POSAlert.Ok[b-sj4aql1z6b] { background: #ecfdf5; color: #047857; }
.POSAlert.Err[b-sj4aql1z6b] { background: #fef2f2; color: var(--danger); }
.POSAlertX[b-sj4aql1z6b] { cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; }

/* ─────────── Body ─────────── */
.POSBody[b-sj4aql1z6b] { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 12px; overflow: hidden; }
.POSMain[b-sj4aql1z6b] { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.POSAside[b-sj4aql1z6b] { width: 330px; flex-shrink: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.POSAside[b-sj4aql1z6b]::-webkit-scrollbar { width: 6px; }
.POSAside[b-sj4aql1z6b]::-webkit-scrollbar-thumb { background: #cfd4dc; border-radius: 6px; }

.POSCard[b-sj4aql1z6b] { background: var(--surface); border-radius: 12px; border: 1px solid var(--line); }
.POSCardHead[b-sj4aql1z6b] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 13px; border-bottom: 1px solid var(--line-soft); font-size: 13px; font-weight: 800; color: var(--ink);
}
.POSCardBody[b-sj4aql1z6b] { padding: 10px 13px; display: flex; flex-direction: column; gap: 8px; }

/* ค้นหาสินค้า (override สีของ BillItemSearchBar ให้เข้าธีม) */
.POSSearchCard[b-sj4aql1z6b] {
    position: relative; flex-shrink: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px;
}
.POSSearchKey[b-sj4aql1z6b] { position: absolute; top: -8px; left: 12px; }
.POSSearchCard[b-sj4aql1z6b]  .SBBar:focus-within { border-color: var(--p); box-shadow: 0 0 0 3px rgba(11,122,117,.12); }
.POSSearchCard[b-sj4aql1z6b]  .SBSearchBtn { background: var(--p); }
.POSSearchCard[b-sj4aql1z6b]  .SBDetailBtn:hover:not(:disabled) { border-color: var(--p); color: var(--p); }

/* ─────────── สินค้าด่วน (★ ปักหมุด / 🔥 ขายบ่อย) ─────────── */
.POSQuick[b-sj4aql1z6b] {
    flex-shrink: 0; display: flex; align-items: flex-start; gap: 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 7px 10px;
}
.POSQTabs[b-sj4aql1z6b] { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.POSQTabs button[b-sj4aql1z6b] {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    min-width: 100px; padding: 4px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface);
    font-size: 11.5px; font-weight: 700; color: var(--muted); cursor: pointer;
}
.POSQTabs button span[b-sj4aql1z6b] {
    font-size: 10px; font-weight: 800; color: var(--muted); background: var(--bg); border-radius: 10px; padding: 0 6px;
    font-family: var(--num);
}
.POSQTabs button.On[b-sj4aql1z6b] { background: var(--p-soft); border-color: var(--p-line); color: var(--p-dark); }
.POSQTabs button.On span[b-sj4aql1z6b] { background: var(--p); color: #fff; }
.POSQChips[b-sj4aql1z6b] {
    flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start;
    max-height: 80px; overflow-y: auto; padding: 1px;
}
.POSQChips[b-sj4aql1z6b]::-webkit-scrollbar { width: 5px; height: 5px; }
.POSQChips[b-sj4aql1z6b]::-webkit-scrollbar-thumb { background: #d5dae2; border-radius: 5px; }
.POSQEmpty[b-sj4aql1z6b] { font-size: 11.5px; color: var(--muted-2); align-self: center; padding: 6px 2px; }
.POSQChip[b-sj4aql1z6b] {
    display: inline-flex; align-items: stretch; max-width: 220px; flex-shrink: 0;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden;
    transition: border-color .12s, background .12s;
}
.POSQChip:hover[b-sj4aql1z6b] { border-color: var(--p-line); background: var(--p-soft); }
.POSQChipMain[b-sj4aql1z6b] {
    display: flex; align-items: center; gap: 7px; min-width: 0;
    border: none; background: none; padding: 3px 2px 3px 3px; cursor: pointer; text-align: left;
}
.POSQThumb[b-sj4aql1z6b] {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 6px; overflow: hidden;
    background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.POSQThumb img[b-sj4aql1z6b] { width: 100%; height: 100%; object-fit: cover; display: block; }
.POSQTxt[b-sj4aql1z6b] { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.POSQName[b-sj4aql1z6b] { font-size: 12px; font-weight: 700; color: var(--ink); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.POSQCode[b-sj4aql1z6b] { font-size: 9.5px; color: var(--muted-2); font-family: var(--num); }
.POSQPin[b-sj4aql1z6b] { border: none; background: none; padding: 0 8px; cursor: pointer; font-size: 14px; color: #cbd5e1; }
.POSQPin:hover[b-sj4aql1z6b], .POSQPin.On[b-sj4aql1z6b] { color: #f59e0b; }

/* ─────────── ตารางรายการในบิล ─────────── */
.POSItemsCard[b-sj4aql1z6b] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.POSItemsCard[b-sj4aql1z6b]  .SLSection {
    flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    border-radius: 12px; border-color: var(--line); box-shadow: none;
}
.POSItemsCard[b-sj4aql1z6b]  .SLTop { padding: 10px 16px; flex-shrink: 0; border-bottom-color: var(--line-soft); }
.POSItemsCard[b-sj4aql1z6b]  .SLTitle { font-size: 14px; color: var(--ink); }
.POSItemsCard[b-sj4aql1z6b]  .SLSub { font-size: 12px; color: var(--muted); }
.POSItemsCard[b-sj4aql1z6b]  .SLEmpty { flex: 1; padding: 36px 16px; }
.POSItemsCard[b-sj4aql1z6b]  .SLTableWrap { flex: 1; min-height: 0; overflow: auto; }
.POSItemsCard[b-sj4aql1z6b]  .SLTable { font-size: 13.5px; table-layout: fixed; }
.POSItemsCard[b-sj4aql1z6b]  .SLTable thead th:nth-child(1) { width: 26px; }
.POSItemsCard[b-sj4aql1z6b]  .SLTable thead th {
    position: sticky; top: 0; z-index: 1;
    font-size: 11px; color: var(--muted); padding: 9px 12px; background: #f7f9fb; border-bottom-color: var(--line);
}
.POSItemsCard[b-sj4aql1z6b]  .SLTable tbody tr { border-bottom-color: var(--line-soft); }
.POSItemsCard[b-sj4aql1z6b]  .SLTable tbody tr:hover { background: var(--p-soft); }
.POSItemsCard[b-sj4aql1z6b]  .SLTable td.R b { font-size: 15px; color: var(--ink); }
.POSItemsCard[b-sj4aql1z6b]  .SLBtnEdit { border-color: var(--p-line); background: var(--p-soft); color: var(--p); }

/* ─────────── ขวา: ลูกค้า ─────────── */
.POSMiniBtn[b-sj4aql1z6b] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface);
    font-size: 11.5px; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.POSMiniBtn:hover:not(:disabled)[b-sj4aql1z6b] { border-color: var(--p); color: var(--p); }
.POSMiniBtn kbd[b-sj4aql1z6b] { font-size: 9px; padding: 0 4px; min-width: 0; }
.POSMiniBtn:disabled[b-sj4aql1z6b] { opacity: .5; cursor: default; }

.POSMemberRow[b-sj4aql1z6b] { display: flex; gap: 6px; }
.POSMemberDrop[b-sj4aql1z6b] {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 12px 28px -10px rgba(15,23,42,.25);
    max-height: 280px; overflow-y: auto;
}
.POSMemberDropItem[b-sj4aql1z6b] { padding: 8px 11px; cursor: pointer; border-bottom: 1px solid var(--line-soft); }
.POSMemberDropItem:last-child[b-sj4aql1z6b] { border-bottom: none; }
.POSMemberDropItem:hover[b-sj4aql1z6b] { background: var(--p-soft); }
.POSMemberDropName[b-sj4aql1z6b] { font-size: 13px; font-weight: 700; color: var(--ink); }
.POSMemberDropSub[b-sj4aql1z6b] { font-size: 11px; color: var(--muted-2); margin-top: 1px; }
.POSInput[b-sj4aql1z6b] {
    flex: 1; min-width: 0; box-sizing: border-box; min-height: 34px; border: 1.5px solid var(--line);
    border-radius: 8px; padding: 6px 10px; font-size: 13px; outline: none; background: var(--surface);
}
.POSInput:focus[b-sj4aql1z6b] { border-color: var(--p); }
.POSGhostBtn[b-sj4aql1z6b] {
    padding: 0 12px; min-height: 34px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--surface);
    font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer;
}
.POSGhostBtn:hover:not(:disabled)[b-sj4aql1z6b] { border-color: var(--muted-2); color: var(--ink-2); }
.POSGhostBtn:disabled[b-sj4aql1z6b] { opacity: .5; cursor: default; }
.POSSetBtn[b-sj4aql1z6b] { min-height: 32px; white-space: nowrap; }
.POSDlg.POSPrintSet[b-sj4aql1z6b] { width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.POSPrintSet .POSDlgBody[b-sj4aql1z6b] { background: #f3f5f8; }
.POSPrintSetMsg[b-sj4aql1z6b] { padding: 8px 18px; font-size: 13px; color: #0B7A75; border-top: 1px solid var(--line); }
.POSPrintSetMsg.Err[b-sj4aql1z6b] { color: var(--danger); }
.POSPrintBtn[b-sj4aql1z6b] { min-height: 44px; padding: 0 16px; color: var(--p); border-color: var(--p); white-space: nowrap; }

.POSCustBox[b-sj4aql1z6b] {
    display: flex; align-items: center; gap: 9px;
    background: var(--bg); border-radius: 10px; padding: 8px 10px;
}
.POSCustAvatar[b-sj4aql1z6b] {
    width: 32px; height: 32px; border-radius: 50%; background: var(--p-soft); color: var(--p);
    display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0;
}
.POSCustInfo[b-sj4aql1z6b] { flex: 1; min-width: 0; }
.POSCustName[b-sj4aql1z6b] { font-size: 13.5px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.POSCustSub[b-sj4aql1z6b] { font-size: 11px; color: var(--muted-2); margin-top: 1px; }

.POSPriceLevelRow[b-sj4aql1z6b] { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); }
.POSPriceLevelVal[b-sj4aql1z6b] { font-weight: 800; color: var(--ink); text-align: right; }

.POSChipRow[b-sj4aql1z6b] { display: flex; flex-wrap: wrap; gap: 6px; }
.POSChip[b-sj4aql1z6b] {
    padding: 3px 10px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface);
    font-size: 11px; font-weight: 700; color: var(--muted); cursor: pointer;
}
.POSChip:hover[b-sj4aql1z6b] { border-color: var(--p-line); color: var(--p); }
.POSChip.Warn[b-sj4aql1z6b] { border-color: #f5c9a0; color: #c2620f; background: #fff7ed; }

.POSDarkBtn[b-sj4aql1z6b] {
    padding: 9px 16px; border-radius: 9px; border: none; cursor: pointer;
    background: var(--p); color: #fff; font-size: 13px; font-weight: 700; width: 100%;
}
.POSDarkBtn:hover:not(:disabled)[b-sj4aql1z6b] { background: var(--p-dark); }
.POSDarkBtn:disabled[b-sj4aql1z6b] { opacity: .5; cursor: default; }

/* ─────────── ขวา: สรุปยอด ─────────── */
.POSSumCard[b-sj4aql1z6b] { padding: 10px 13px; display: flex; flex-direction: column; gap: 2px; }
.POSSumRow[b-sj4aql1z6b] {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 12.5px; color: var(--muted); padding: 3px 0;
}
.POSSumRow:first-child[b-sj4aql1z6b] { font-size: 11.5px; color: var(--muted-2); padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); margin-bottom: 3px; }
.POSSumRow b[b-sj4aql1z6b] { color: var(--ink); font-size: 14px; }
.POSSumRow kbd[b-sj4aql1z6b] { font-size: 9px; padding: 0 4px; min-width: 0; margin-left: 3px; }
.POSSumRow.Click[b-sj4aql1z6b] { cursor: pointer; border-radius: 6px; margin: 0 -6px; padding: 3px 6px; }
.POSSumRow.Click:hover[b-sj4aql1z6b] { background: var(--p-soft); }
.POSSumRow.Click.Lock[b-sj4aql1z6b] { cursor: default; }
.POSSumRow.Click.Lock:hover[b-sj4aql1z6b] { background: none; }
.POSSumRow .Neg[b-sj4aql1z6b] { color: var(--danger); }
.POSSumRow.Sub[b-sj4aql1z6b] { font-size: 11px; color: var(--muted-2); padding: 0; }
.POSSumRow.Remain b[b-sj4aql1z6b] { color: var(--warn); }
.POSSumRow.Change b[b-sj4aql1z6b] { color: var(--p); }
.POSNum[b-sj4aql1z6b] { font-family: var(--num); }
.POSGrand[b-sj4aql1z6b] {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--p-soft); border-radius: 10px; margin: 6px 0; padding: 8px 12px;
}
.POSGrand label[b-sj4aql1z6b] { font-size: 13px; font-weight: 700; color: var(--p-dark); }
.POSGrandTotal[b-sj4aql1z6b] { font-size: 28px; font-weight: 800; color: var(--p); line-height: 1.1; font-family: var(--num); }

/* ─────────── ขวา: บันทึกช่วยจำ ─────────── */
.POSNoteCard[b-sj4aql1z6b] { padding: 10px 13px; display: flex; flex-direction: column; gap: 8px; }
.POSBillMeta[b-sj4aql1z6b] { font-size: 11px; color: var(--muted); line-height: 1.7; }
.POSBillMeta b[b-sj4aql1z6b] { color: var(--ink); font-weight: 600; }
.POSBillMeta span[b-sj4aql1z6b] { font-family: var(--num); }
.POSNote[b-sj4aql1z6b] {
    display: block; width: 100%; box-sizing: border-box; height: 52px; resize: none;
    border: 1px solid var(--line) !important; border-radius: 9px; margin: 0;
    padding: 8px 10px; font-size: 12px; line-height: 1.4; font-family: var(--thai);
    outline: none; color: var(--ink); background: var(--surface);
}
.POSNote[b-sj4aql1z6b]::placeholder { color: #aeb6c1; }
.POSNote:focus[b-sj4aql1z6b] { border-color: var(--p) !important; }

/* ─────────── แถบปุ่มฟังก์ชัน + ชำระเงิน ─────────── */
.POSFBar[b-sj4aql1z6b] {
    display: flex; align-items: stretch; gap: 12px; flex-shrink: 0;
    background: var(--surface); border-top: 1px solid var(--line); padding: 8px 12px;
}
.POSFKeys[b-sj4aql1z6b] { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; padding-top: 5px; scrollbar-width: thin; }
.POSFKeys[b-sj4aql1z6b]::-webkit-scrollbar { height: 5px; }
.POSFKeys[b-sj4aql1z6b]::-webkit-scrollbar-thumb { background: #d5dae2; border-radius: 5px; }
.POSFKey[b-sj4aql1z6b] {
    position: relative; flex: 1 0 76px; max-width: 112px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 52px; padding: 5px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
    font-size: 11.5px; font-weight: 700; color: var(--ink-2); cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.POSFKey span[b-sj4aql1z6b] { white-space: nowrap; }
.POSFKey:hover:not(:disabled)[b-sj4aql1z6b] { background: var(--p-soft); border-color: var(--p-line); color: var(--p-dark); }
.POSFKey:hover:not(:disabled) kbd[b-sj4aql1z6b] { border-color: var(--p-line); color: var(--p); background: #fff; }
.POSFKey:disabled[b-sj4aql1z6b] { opacity: .4; cursor: default; }
.POSFKey.Danger[b-sj4aql1z6b] { color: var(--danger); }
.POSFKey.Danger:hover:not(:disabled)[b-sj4aql1z6b] { background: #fef2f2; border-color: #fecaca; color: var(--danger); }
.POSFKey.Danger kbd[b-sj4aql1z6b] { color: var(--danger); }
.POSActBadge[b-sj4aql1z6b] {
    position: absolute; top: -6px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; border-radius: 999px; line-height: 1;
    font-family: var(--num);
}
.POSFPay[b-sj4aql1z6b] { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding-left: 12px; border-left: 1px solid var(--line-soft); }
.POSFTotal[b-sj4aql1z6b] { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.POSFTotal small[b-sj4aql1z6b] { font-size: 11px; color: var(--muted-2); }
.POSFTotal b[b-sj4aql1z6b] { font-size: 24px; color: var(--ink); font-weight: 800; font-family: var(--num); }
.POSPayBtn[b-sj4aql1z6b] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0 28px; min-height: 52px; border-radius: 11px; border: none; cursor: pointer;
    background: var(--p); color: #fff; font-size: 15px; font-weight: 800;
}
.POSPayBtn:hover[b-sj4aql1z6b] { background: var(--p-dark); }
.POSPayBtn kbd[b-sj4aql1z6b] { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); color: #fff; }

/* ─────────── modal / dialog ─────────── */
.POSModalOverlay[b-sj4aql1z6b] { position: fixed; inset: 0; z-index: 50000; background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center; }
.POSModalBox[b-sj4aql1z6b] { background: #fff; border-radius: 14px; max-height: calc(100vh - 48px); overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.25); }

.POSDlg[b-sj4aql1z6b] { width: min(440px, calc(100vw - 32px)); display: flex; flex-direction: column; font-family: var(--thai); color: var(--ink); }
.POSDlg.Wide[b-sj4aql1z6b] { width: min(760px, calc(100vw - 32px)); }
.POSDlg.Pay[b-sj4aql1z6b] { width: min(620px, calc(100vw - 32px)); }
.POSDlgHead[b-sj4aql1z6b] { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 700; }
.POSDlgHead small[b-sj4aql1z6b] { font-weight: 400; color: var(--muted); margin-left: 6px; }
.POSDlgBody[b-sj4aql1z6b] { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.POSDlgFoot[b-sj4aql1z6b] { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.POSDlgFoot .POSDarkBtn[b-sj4aql1z6b] { width: auto; margin: 0; padding-left: 18px; padding-right: 18px; }
.POSDlgFoot a.POSGhostBtn[b-sj4aql1z6b] { text-decoration: none; display: inline-flex; align-items: center; }
.POSDlgLabel[b-sj4aql1z6b] { font-size: 13px; color: var(--ink-2); }
.POSDlgHint[b-sj4aql1z6b] { font-size: 12.5px; color: var(--muted-2); text-align: center; padding: 6px 0; }
.POSDlgErr[b-sj4aql1z6b] { font-size: 13px; color: var(--danger); }
.POSDlgCalc[b-sj4aql1z6b] { background: var(--bg); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.POSDlgCalc div[b-sj4aql1z6b] { display: flex; justify-content: space-between; }
.POSDlgCalc .Total[b-sj4aql1z6b] { border-top: 1px dashed #cbd5e1; padding-top: 6px; }
.POSSeg[b-sj4aql1z6b] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.POSSeg button[b-sj4aql1z6b] { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 8px; font: inherit; cursor: pointer; color: var(--ink-2); }
.POSSeg button.On[b-sj4aql1z6b] { background: var(--p-soft); border-color: var(--p); color: var(--p-dark); font-weight: 700; }
.POSInfoBlock[b-sj4aql1z6b] { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; white-space: pre-line; font-size: 14px; }
.POSInfoBlock label[b-sj4aql1z6b] { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.POSInfoBlock.Warn[b-sj4aql1z6b] { border-color: #f5c9a0; background: #fff7ed; }
.POSInfoBlock.Focus[b-sj4aql1z6b] { box-shadow: 0 0 0 2px var(--p-line); }
.POSHistRow[b-sj4aql1z6b] { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.POSHistHead[b-sj4aql1z6b] { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; font-size: 13.5px; }
.POSHistHead:hover[b-sj4aql1z6b] { background: var(--p-soft); }
.POSHistCaret[b-sj4aql1z6b] { color: var(--muted-2); width: 12px; }
.POSHistDate[b-sj4aql1z6b], .POSHistQty[b-sj4aql1z6b] { color: var(--muted); font-size: 12.5px; }
.POSHistAmt[b-sj4aql1z6b] { margin-left: auto; }
.POSHistItems[b-sj4aql1z6b] { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--bg); }
.POSHistItems td[b-sj4aql1z6b] { padding: 6px 12px; border-top: 1px solid var(--line-soft); }
.POSHistItems td.R[b-sj4aql1z6b] { text-align: right; white-space: nowrap; }
/* [2026-10] dialog โปรโมชั่น (F7) */
.POSPromoCode[b-sj4aql1z6b] { display: flex; gap: 8px; align-items: center; }
.POSPromoCode b[b-sj4aql1z6b] { font-size: 16px; letter-spacing: .5px; color: var(--p-dark, #095E5A); background: var(--p-soft); border: 1px dashed var(--p-line, #B9E0DC); border-radius: 8px; padding: 6px 12px; }
.POSPromoEmpty[b-sj4aql1z6b] { font-size: 13px; color: #94a3b8; padding: 8px 0; }
.POSPromoRow[b-sj4aql1z6b] { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line, #e5e7eb); }
.POSPromoRow.Off[b-sj4aql1z6b] { opacity: .65; }
.POSPromoMain[b-sj4aql1z6b] { flex: 1 1 auto; min-width: 0; }
.POSPromoName[b-sj4aql1z6b] { font-weight: 700; font-size: 14px; }
.POSPromoSub[b-sj4aql1z6b] { font-size: 12px; color: #64748b; margin-top: 2px; }
.POSPromoGifts[b-sj4aql1z6b] { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: #475569; margin-top: 6px; }
.POSChip.On[b-sj4aql1z6b] { background: var(--p); color: #fff; border-color: var(--p); }

@media (max-width: 640px) { .POSHistDate[b-sj4aql1z6b] { display: none; } }

/* popup ชำระเงิน */
.POSPayTotals[b-sj4aql1z6b] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.POSPayTotals div[b-sj4aql1z6b] { background: var(--bg); border-radius: 10px; padding: 9px 12px; text-align: right; }
.POSPayTotals label[b-sj4aql1z6b] { display: block; font-size: 12px; color: var(--muted); text-align: left; }
.POSPayTotals b[b-sj4aql1z6b] { font-size: 22px; font-weight: 800; color: var(--ink); font-family: var(--num); }
.POSPayTotals .Remain[b-sj4aql1z6b] { background: #fffbeb; }
.POSPayTotals .Remain b[b-sj4aql1z6b] { color: var(--warn); }
.POSPayTotals .Change[b-sj4aql1z6b] { background: var(--p-soft); }
.POSPayTotals .Change b[b-sj4aql1z6b] { color: var(--p); }

/* ═══════════ Tablet 768–1199px ═══════════ */
@media (max-width: 1199px) {
    .POSAside[b-sj4aql1z6b] { width: 280px; }
    .POSHeaderDev[b-sj4aql1z6b] { display: none; }
    .POSFKey[b-sj4aql1z6b] { flex-basis: 70px; min-height: 48px; }
    .POSFTotal b[b-sj4aql1z6b] { font-size: 21px; }
    .POSPayBtn[b-sj4aql1z6b] { padding: 0 20px; min-height: 48px; }
    .POSStepTxt small[b-sj4aql1z6b] { display: none; }
    .POSItemsCard[b-sj4aql1z6b]  .SLTable { font-size: 13px; }
    .POSItemsCard[b-sj4aql1z6b]  .SLTable thead th:nth-child(3) { width: 92px !important; }
    .POSItemsCard[b-sj4aql1z6b]  .SLTable thead th:nth-child(4) { width: 80px !important; }
    .POSItemsCard[b-sj4aql1z6b]  .SLTable thead th:nth-child(5) { width: 66px !important; }
    .POSItemsCard[b-sj4aql1z6b]  .SLTable thead th:nth-child(6) { width: 92px !important; }
    .POSItemsCard[b-sj4aql1z6b]  .SLTable thead th:nth-child(7) { width: 70px !important; }
}

/* ═══════════ Mobile < 768px ═══════════ */
@media (max-width: 767px) {
    .POS[b-sj4aql1z6b] { height: auto; margin: 0; border-radius: 0; border: none; overflow: visible; }

    .POSHeader[b-sj4aql1z6b] { padding: 8px 12px; }
    .POSLogo[b-sj4aql1z6b] { width: 30px; height: 30px; font-size: 14px; border-radius: 8px; }
    .POSHCode[b-sj4aql1z6b] { font-size: 15px; }
    .POSUserName[b-sj4aql1z6b] { display: none; }

    .POSTimeline[b-sj4aql1z6b] { padding: 7px 12px; gap: 6px; }
    .POSStep:not(.Now):not(.Done) .POSStepTxt[b-sj4aql1z6b] { display: none; } /* ขั้นที่ยังไม่ถึง เหลือแค่จุด */
    .POSStepTxt small[b-sj4aql1z6b] { display: block; }
    .POSStepLine[b-sj4aql1z6b] { flex-basis: 14px; }
    .POSStatMove[b-sj4aql1z6b] { padding: 5px 10px; font-size: 11.5px; }

    .POSBody[b-sj4aql1z6b] { flex-direction: column; overflow: visible; padding: 10px; gap: 10px; }
    .POSMain[b-sj4aql1z6b], .POSAside[b-sj4aql1z6b] { width: 100%; overflow: visible; }
    .POSItemsCard[b-sj4aql1z6b] { flex: none; }
    .POSItemsCard[b-sj4aql1z6b]  .SLSection, .POSItemsCard[b-sj4aql1z6b]  .SLTableWrap { overflow: visible; }
    .POSQuick[b-sj4aql1z6b], .POSSearchCard[b-sj4aql1z6b], .POSCard[b-sj4aql1z6b] { min-width: 0; }

    .POSSearchKey[b-sj4aql1z6b], .POSMiniBtn kbd[b-sj4aql1z6b], .POSSumRow kbd[b-sj4aql1z6b] { display: none; }
    .POSSearchCard[b-sj4aql1z6b]  .SBBar { min-width: 0; flex-basis: 100%; }
    .POSSearchCard[b-sj4aql1z6b]  .SBSearchBtn, .POSSearchCard[b-sj4aql1z6b]  .SBDetailBtn { flex: 1; }

    /* สินค้าด่วน: แท็บแนวนอน + chip เลื่อนแนวนอนแถวเดียว */
    .POSQuick[b-sj4aql1z6b] { flex-direction: column; gap: 6px; padding: 8px; }
    .POSQTabs[b-sj4aql1z6b] { flex-direction: row; width: 100%; }
    .POSQTabs button[b-sj4aql1z6b] { flex: 1; min-width: 0; justify-content: center; padding: 6px 8px; }
    .POSQChips[b-sj4aql1z6b] { width: 100%; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-height: none; padding-bottom: 4px; }
    .POSQChipMain[b-sj4aql1z6b] { padding: 4px 2px 4px 4px; }


    /* แถบล่าง: ชำระเงินติดล่างจอ + ปุ่มฟังก์ชันเลื่อนแนวนอน */
    .POSFBar[b-sj4aql1z6b] {
        position: sticky; bottom: 0; z-index: 20;
        flex-direction: column; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        box-shadow: 0 -4px 14px rgba(15,23,42,.08);
    }
    .POSFPay[b-sj4aql1z6b] { order: -1; border-left: none; padding-left: 0; justify-content: space-between; }
    .POSFTotal[b-sj4aql1z6b] { align-items: flex-start; }
    .POSPayBtn[b-sj4aql1z6b] { flex: 1; max-width: 230px; min-height: 46px; }
    .POSFKeys[b-sj4aql1z6b] { padding-top: 6px; }
    .POSFKey[b-sj4aql1z6b] { flex: 0 0 68px; min-height: 46px; font-size: 11px; }
    .POSFKey kbd[b-sj4aql1z6b] { font-size: 9px; }

    /* dialog เต็มความกว้างจอ ชิดล่าง */
    .POSModalOverlay[b-sj4aql1z6b] { align-items: flex-end; }
    .POSModalBox[b-sj4aql1z6b] { width: 100% !important; max-height: 92vh; border-radius: 16px 16px 0 0; }
    .POSPayTotals[b-sj4aql1z6b] { grid-template-columns: 1fr 1fr; }
    .POSPayTotals div:last-child[b-sj4aql1z6b] { grid-column: 1 / -1; }
    .POSPayTotals b[b-sj4aql1z6b] { font-size: 20px; }
    .POSDlgFoot[b-sj4aql1z6b] { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
    .POSDlgFoot button[b-sj4aql1z6b] { flex: 1; min-height: 42px; }
}

/* ═══════════ ตารางบิล → การ์ดเตี้ย 2 บรรทัด (Tablet แนวตั้ง + Mobile < 992px) ═══════════
   คอลัมน์ของ Section_Sale_ItemList (Compact): 1 # · 2 สินค้า(รูป+ชื่อ) · 3 จำนวน · 4 ราคา/หน่วย · 5 ส่วนลด · 6 ยอด · 7 จัดการ
   ┌──────────────────────────────┬────────────┬────┐
   │ [รูป] ชื่อสินค้า …            │     ยอดรวม  │ ✏  │
   │       P-8 · Lot · โหมด        │ 2 กล่อง @49 │ ✕  │
   └──────────────────────────────┴────────────┴────┘  (ส่วนลดรวมอยู่ในยอดแล้ว — ซ่อนช่องส่วนลด) */
@media (max-width: 991px) {
    .POSItemsCard[b-sj4aql1z6b]  .SLTable thead { display: none; }
    .POSItemsCard[b-sj4aql1z6b]  .SLTable,
    .POSItemsCard[b-sj4aql1z6b]  .SLTable tbody { display: block; width: 100%; }
    .POSItemsCard[b-sj4aql1z6b]  .SLTable tbody tr.SLRowC {
        display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 8px; row-gap: 0;
        align-items: center; padding: 6px 10px; background: none !important;
    }
    .POSItemsCard[b-sj4aql1z6b]  .SLTable tbody tr.SLRowC td { display: block; padding: 0; }
    .POSItemsCard[b-sj4aql1z6b]  .SLRowC td:nth-child(1) { display: none; }
    .POSItemsCard[b-sj4aql1z6b]  .SLRowC td:nth-child(2) { grid-column: 1; grid-row: 1 / 3; min-width: 0; }
    .POSItemsCard[b-sj4aql1z6b]  .SLRowC td:nth-child(6) { grid-column: 2 / 4; grid-row: 1; text-align: right; }
    .POSItemsCard[b-sj4aql1z6b]  .SLRowC td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; font-size: 11.5px; color: var(--muted); }
    .POSItemsCard[b-sj4aql1z6b]  .SLRowC td:nth-child(3) .SLQty { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
    .POSItemsCard[b-sj4aql1z6b]  .SLRowC td:nth-child(3) .SLBase { display: none; }
    .POSItemsCard[b-sj4aql1z6b]  .SLRowC td:nth-child(4) { grid-column: 3; grid-row: 2; text-align: right; font-size: 11.5px; color: var(--muted); }
    .POSItemsCard[b-sj4aql1z6b]  .SLRowC td:nth-child(4)::before { content: "@"; margin-right: 1px; }
    .POSItemsCard[b-sj4aql1z6b]  .SLRowC td:nth-child(5) { display: none; }
    .POSItemsCard[b-sj4aql1z6b]  .SLRowC td:nth-child(7) { grid-column: 4; grid-row: 1 / 3; }
    .POSItemsCard[b-sj4aql1z6b]  .SLRowC .SLActions { flex-direction: column; gap: 4px; }
    .POSItemsCard[b-sj4aql1z6b]  .SLRowC .SLBtnEdit, .POSItemsCard[b-sj4aql1z6b]  .SLRowC .SLBtnDel { width: 30px; height: 26px; }
}

/* ─── เสียบบัตรประชาชน [2026-10] ─── */
.POSCardHeadTools[b-sj4aql1z6b] { display: inline-flex; align-items: center; gap: 6px; }
.POSNewCustOverlay[b-sj4aql1z6b] { z-index: 50500; align-items: stretch; padding: 24px 16px; }
.POSNewCustBox[b-sj4aql1z6b] {
    width: min(1180px, 100%); max-height: 100%; overflow-y: auto;
    background: #f7f8fa; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
/* /Components/M_Components/Billing/SaleReturnEditor.razor.rz.scp.css */
.SREWrap[b-qfx7ktl8n4] { max-width: 1000px; margin: 0 auto; padding: 16px; }
.SREEmpty[b-qfx7ktl8n4] { text-align: center; padding: 48px; color: #94a3b8; }

.SREBreadcrumb[b-qfx7ktl8n4] { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 12.5px; }
.SREBack[b-qfx7ktl8n4] { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; padding: 6px 12px; border-radius: 8px; background: #eff6ff; color: #1d4ed8; font-weight: 700; }
.SRECrumbLink[b-qfx7ktl8n4] { color: #64748b; text-decoration: none; }
.SRECrumbSep[b-qfx7ktl8n4] { color: #cbd5e1; }
.SRECrumbNow[b-qfx7ktl8n4] { color: #1e293b; font-weight: 700; }

.SREAlert[b-qfx7ktl8n4] { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.SREAlert.Ok[b-qfx7ktl8n4] { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.SREAlert.Err[b-qfx7ktl8n4] { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
.SREx[b-qfx7ktl8n4] { cursor: pointer; font-size: 18px; }

.SRECard[b-qfx7ktl8n4] { background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.08); overflow: hidden; margin-bottom: 14px; }
.SRECardHead[b-qfx7ktl8n4] { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px 10px; border-bottom: 1px solid #f0f2f5; font-size: 13px; font-weight: 800; color: #293649; }
.SRECardSub[b-qfx7ktl8n4] { font-size: 11px; font-weight: 600; color: #9ca3af; }
.SRECardBody[b-qfx7ktl8n4] { padding: 14px 18px; }

.SREInput[b-qfx7ktl8n4] { width: 100%; box-sizing: border-box; border: 1.5px solid #e3e6ea; border-radius: 8px; padding: 9px 12px; font-size: 13px; }
.SREOriginLocked[b-qfx7ktl8n4] { font-size: 15px; font-weight: 800; color: #1e293b; }
.SREMuted[b-qfx7ktl8n4] { font-weight: 500; color: #94a3b8; font-size: 12px; }

.SRETable[b-qfx7ktl8n4] { width: 100%; border-collapse: collapse; font-size: 13px; }
.SRETable th[b-qfx7ktl8n4] { text-align: left; padding: 8px; font-size: 10.5px; font-weight: 800; color: #64748b; text-transform: uppercase; border-bottom: 2px solid #e5e9ef; }
.SRETable th.R[b-qfx7ktl8n4], .SRETable td.R[b-qfx7ktl8n4] { text-align: right; }
.SRETable td[b-qfx7ktl8n4] { padding: 9px 8px; border-bottom: 1px solid #f0f2f5; }
.SRETable td small[b-qfx7ktl8n4] { color: #94a3b8; font-size: 10.5px; }
.SRETable tr.On[b-qfx7ktl8n4] { background: #eff6ff; }
.SRENum[b-qfx7ktl8n4] { width: 100px; box-sizing: border-box; border: 1.5px solid #e3e6ea; border-radius: 7px; padding: 6px 9px; font-size: 12.5px; text-align: right; }
.SRERowErr[b-qfx7ktl8n4] { color: #dc2626; font-size: 11.5px; font-weight: 700; padding: 4px 8px 8px; }

.SREActions[b-qfx7ktl8n4] { margin-top: 14px; display: flex; gap: 10px; }
.SREBtn[b-qfx7ktl8n4] { padding: 11px 22px; border-radius: 9px; font-size: 13.5px; font-weight: 700; cursor: pointer; border: none; color: #fff; }
.SREBtn.Primary[b-qfx7ktl8n4] { background: linear-gradient(135deg, #059669, #10b981); }
.SREBtn.Ready[b-qfx7ktl8n4] { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.SREBtn.Danger[b-qfx7ktl8n4] { background: linear-gradient(135deg, #b91c1c, #ef4444); }
.SREBtn.Ghost[b-qfx7ktl8n4] { background: #fff; color: #475569; border: 1.5px solid #d1d5db; }
.SREBtn:hover[b-qfx7ktl8n4] { opacity: .9; }
.SREState[b-qfx7ktl8n4] { padding: 10px 16px; border-radius: 9px; font-weight: 700; font-size: 13px; }
.SREState.Ok[b-qfx7ktl8n4] { background: #ecfdf5; color: #047857; }
.SREState.Cancel[b-qfx7ktl8n4] { background: #fef2f2; color: #dc2626; }
/* /Components/M_Components/Billing/SaleReturnList.razor.rz.scp.css */
.SBLWrap[b-7nfj4obmuv] { max-width: 1080px; margin: 0 auto; padding: 16px; }
.SBLHead[b-7nfj4obmuv] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.SBLTitle[b-7nfj4obmuv] { font-size: 17px; font-weight: 800; color: #1e293b; }
.SBLCount[b-7nfj4obmuv] { font-size: 12.5px; color: #64748b; margin-left: 10px; }
.SBLNew[b-7nfj4obmuv] {
    padding: 9px 18px; border-radius: 9px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #293649, #1e3a8a, #3b82f6); color: #fff; font-weight: 700; font-size: 13px;
}

.SBLTabs[b-7nfj4obmuv] { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.SBLTab[b-7nfj4obmuv] {
    padding: 7px 14px; border-radius: 20px; border: 1.5px solid #e2e8f0; background: #fff;
    font-size: 12.5px; font-weight: 600; color: #64748b; cursor: pointer;
}
.SBLTab.On[b-7nfj4obmuv] { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; }
.SBLTabN[b-7nfj4obmuv] { font-size: 10.5px; opacity: .7; margin-left: 4px; }

.SBLEmpty[b-7nfj4obmuv] { text-align: center; padding: 48px; color: #94a3b8; }
.SBLList[b-7nfj4obmuv] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }

.SBLCard[b-7nfj4obmuv] {
    background: #fff; border-radius: 12px; border: 1px solid #e5e9ef; padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06); cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.SBLCard:hover[b-7nfj4obmuv] { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(23,45,80,.14); }
.SBLCardTop[b-7nfj4obmuv] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.SBLCode[b-7nfj4obmuv] { font-size: 14px; font-weight: 800; color: #1e293b; }
.SBLStatus[b-7nfj4obmuv] { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 20px; }
.SBLCardMid[b-7nfj4obmuv] { display: flex; justify-content: space-between; font-size: 12.5px; color: #475569; margin-bottom: 8px; }
.SBLDate[b-7nfj4obmuv] { color: #94a3b8; }
.SBLCardBot[b-7nfj4obmuv] { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #e5e9ef; padding-top: 8px; font-size: 12.5px; color: #64748b; }
.SBLCardBot b[b-7nfj4obmuv] { font-size: 16px; color: #1d4ed8; }
/* /Components/M_Components/Billing/Section_Sale_ItemList.razor.rz.scp.css */
.SLSection[b-lnrhkrquvs] {
    background: #fff; border: 1px solid #e9ecf2; border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15,23,42,.06); overflow: visible;
}
.SLSearchWrap[b-lnrhkrquvs] { padding: 14px 16px 12px; }

.SLTop[b-lnrhkrquvs] { padding: 14px 18px 12px; border-bottom: 1px solid #f1f3f7; }
.SLSearchWrap + .SLTop[b-lnrhkrquvs] { padding-top: 4px; }
.SLTitle[b-lnrhkrquvs] { font-size: 13.5px; font-weight: 800; color: #1e293b; }
.SLSub[b-lnrhkrquvs] { font-size: 11.5px; font-weight: 600; color: #94a3b8; margin-left: 10px; }

.SLErr[b-lnrhkrquvs] {
    margin: 12px 16px 0; padding: 9px 13px; border-radius: 9px;
    background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; font-size: 12.5px; font-weight: 700;
}

.SLEmpty[b-lnrhkrquvs] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 56px 20px 60px; gap: 8px;
}
.SLEmptyBox[b-lnrhkrquvs] {
    width: 84px; height: 84px; border-radius: 16px;
    border: 2px dashed #d7dce4; background: repeating-linear-gradient(45deg, #f7f9fc, #f7f9fc 6px, #f1f4f9 6px, #f1f4f9 12px);
    display: flex; align-items: center; justify-content: center; font-size: 30px; opacity: .55;
    margin-bottom: 6px;
}
.SLEmptyTitle[b-lnrhkrquvs] { font-size: 14px; font-weight: 700; color: #8b95a5; }
.SLEmptySub[b-lnrhkrquvs] { font-size: 12px; color: #aab2bf; }

.SLTableWrap[b-lnrhkrquvs] { width: 100%; overflow-x: auto; }
.SLTable[b-lnrhkrquvs] { width: 100%; border-collapse: collapse; font-size: 13px; }
.SLTable thead th[b-lnrhkrquvs] {
    padding: 11px 12px; font-size: 10px; font-weight: 800; color: #8b95a5;
    letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; text-align: left;
    background: #fafbfd; border-bottom: 1px solid #eceff4;
}
.SLTable th.R[b-lnrhkrquvs], .SLTable td.R[b-lnrhkrquvs] { text-align: right; }
.SLTable th.C[b-lnrhkrquvs], .SLTable td.C[b-lnrhkrquvs] { text-align: center; }
.SLTable td.C[b-lnrhkrquvs] { padding-left: 4px; padding-right: 4px; white-space: nowrap; }
.SLTable tbody tr[b-lnrhkrquvs] { border-bottom: 1px solid #f3f5f9; transition: background .12s; }
.SLTable tbody tr:hover[b-lnrhkrquvs] { background: #f7faff; }
.SLTable tbody tr:last-child[b-lnrhkrquvs] { border-bottom: none; }
.SLTable td[b-lnrhkrquvs] { padding: 12px; vertical-align: middle; color: #1f2937; }
.SLTable td small[b-lnrhkrquvs] { font-size: 10px; color: #9ca3af; }

.SLProdCode[b-lnrhkrquvs] {
    display: inline-block; font-size: 10px; font-weight: 800; color: #1d4ed8;
    background: #eef4ff; padding: 1px 8px; border-radius: 20px; margin-bottom: 4px; letter-spacing: .02em;
}
.SLProdName[b-lnrhkrquvs] { font-size: 13.5px; color: #1e293b; font-weight: 600; }
.SLPin[b-lnrhkrquvs] {
    border: none; background: none; padding: 0 2px; margin-left: 4px; cursor: pointer;
    font-size: 13px; line-height: 1; color: #cbd5e1; vertical-align: top;
}
.SLPin:hover[b-lnrhkrquvs] { color: #f59e0b; }
.SLPin.On[b-lnrhkrquvs] { color: #f59e0b; }

/* ── โหมดกะทัดรัด (Compact — หน้า POS): แถวเตี้ย ~46px มีรูปสินค้า ── */
.SLTable tbody tr.SLRowC td[b-lnrhkrquvs] { padding: 5px 10px; }
.SLRowC .SLNo[b-lnrhkrquvs] { color: #94a3b8; font-size: 12px; width: 26px; }
.SLProdRow[b-lnrhkrquvs] { display: flex; align-items: center; gap: 9px; min-width: 0; }
.SLThumb[b-lnrhkrquvs] {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 7px; overflow: hidden;
    background: #f3f5f8; border: 1px solid #e8ebf0;
    display: flex; align-items: center; justify-content: center; font-size: 16px; opacity: .95;
}
.SLThumb img[b-lnrhkrquvs] { width: 100%; height: 100%; object-fit: cover; display: block; }
.SLProdTxt[b-lnrhkrquvs] { flex: 1; min-width: 0; }
.SLRowC .SLProdName[b-lnrhkrquvs] {
    font-size: 13.5px; font-weight: 700; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.SLRowC .SLProdSub[b-lnrhkrquvs] { font-size: 10.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.SLProdCodeC[b-lnrhkrquvs] { font-weight: 700; color: #0B7A75; }
.SLRowC .SLPin[b-lnrhkrquvs] { margin-left: 0; flex-shrink: 0; font-size: 14px; }
.SLRowC td.R[b-lnrhkrquvs] { white-space: nowrap; }
.SLQty[b-lnrhkrquvs] { font-size: 14px; }
.SLBase[b-lnrhkrquvs] { margin-left: 3px; }
.SLRowC .SLDisc[b-lnrhkrquvs] { color: #dc2626; }
.SLRowC .SLBtnEdit[b-lnrhkrquvs], .SLRowC .SLBtnDel[b-lnrhkrquvs] { width: 28px; height: 28px; }
.SLProdSub[b-lnrhkrquvs] { font-size: 10.5px; color: #94a3b8; margin-top: 3px; }
.SLEdited[b-lnrhkrquvs] { color: #d97706; font-weight: 700; }

.SLActions[b-lnrhkrquvs] {
    display: flex; flex-wrap: nowrap; gap: 6px;
    align-items: center; justify-content: center;
}
.SLBtnEdit[b-lnrhkrquvs], .SLBtnDel[b-lnrhkrquvs] {
    flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 8px; font-size: 12px; cursor: pointer;
    transition: transform .1s;
}
.SLBtnEdit[b-lnrhkrquvs] { border: 1.5px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.SLBtnDel[b-lnrhkrquvs] { border: 1.5px solid #fca5a5; background: #fee2e2; color: #dc2626; }
.SLBtnEdit:hover[b-lnrhkrquvs], .SLBtnDel:hover[b-lnrhkrquvs] { transform: translateY(-1px); }

/* คอลัมน์ที่เป็นตัวเลข + อักษรพิเศษล้วน (ราคา/หน่วย, ส่วนลด, ยอดรายการ) = ใช้ฟอนต์เดิม
   คอลัมน์ "จำนวน" มีหน่วยภาษาไทยปน → ใช้ Mine ที่สืบทอดจาก .POS */
tbody td.R:nth-child(4)[b-lnrhkrquvs],
tbody td.R:nth-child(5)[b-lnrhkrquvs],
tbody td.R:nth-child(6)[b-lnrhkrquvs] { font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', sans-serif; }
/* ป้าย "(แก้ราคา)" เป็นข้อความไทย → Mine */
.SLEdited[b-lnrhkrquvs] { font-family: 'Mine_ThaiFont', 'IBM Plex Sans Thai', sans-serif; }
.SLRowC .SLBtnEdit[b-lnrhkrquvs], .SLRowC .SLBtnDel[b-lnrhkrquvs] { display: inline-flex; align-items: center; justify-content: center; padding: 0; }

/* [2026-10] โปรโมชั่น — ป้ายโปรต่อบรรทัด / ป้าย "แถม" (ระบบเพิ่มเอง แก้/ลบไม่ได้) */
.SLGift[b-lnrhkrquvs] { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: #fff1f3; color: #be123c; font-size: 11px; font-weight: 700; vertical-align: middle; }
.SLPromo[b-lnrhkrquvs] { margin-top: 2px; font-size: 11px; color: #0B7A75; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.SLGiftNote[b-lnrhkrquvs] { font-size: 11px; color: #94a3b8; }

.SLReward[b-lnrhkrquvs] { background: #fff7e8; color: #a16207; }
/* /Components/M_Components/Billing/Section_Sale_PaymentZone.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Section_StockRec_PaymentZone.razor.css
   Design: CwSoftware Modern — สอดคล้องกับ StockRec_Bill.razor.css (#293649, #3b82f6)
   Blazor CSS isolation ไม่ไหลข้าม component จึงต้องประกาศ .BillCard/.CardHeader/.BtnAction
   ซ้ำที่นี่ (เหมือนที่ VenderPickerPopup.razor.css ทำ) ให้หน้าตาตรงกับการ์ดอื่นในบิล
   ═══════════════════════════════════════════════════════════════ */

.BillCard[b-o4zf3gfpl2] {
    background: #fff;
    border: 1px solid #e5e9ef;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.BillCard .CardHeader[b-o4zf3gfpl2] {
    padding: 12px 18px 10px;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.BillCard .CardHeader .CardTitle[b-o4zf3gfpl2] {
    font-size: 13px;
    font-weight: 700;
    color: #293649;
    letter-spacing: .01em;
}

.BillCard .CardHeader .CardSubTitle[b-o4zf3gfpl2] {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ─── Payment History List ─── */
.PZList[b-o4zf3gfpl2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.PZRow[b-o4zf3gfpl2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #eef1f6;
    border-radius: 8px;
    background: #fafbfc;
}

.PZIcon[b-o4zf3gfpl2] {
    font-size: 18px;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.PZInfo[b-o4zf3gfpl2] { flex: 1; min-width: 0; }

.PZType[b-o4zf3gfpl2] {
    font-size: 13px;
    font-weight: 600;
    color: #293649;
}

.PZDate[b-o4zf3gfpl2] {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 1px;
}

.PZComment[b-o4zf3gfpl2] {
    font-size: 11.5px;
    color: #6b7280;
    font-style: italic;
    margin-top: 2px;
}

.PZBankInfo[b-o4zf3gfpl2] {
    font-size: 11.5px;
    color: #1e3a8a;
    background: #eff6ff;
    border-radius: 4px;
    padding: 3px 6px;
    margin-top: 3px;
    display: inline-block;
}

.PZAmount[b-o4zf3gfpl2] {
    font-size: 14px;
    font-weight: 700;
    color: #16a34a;
    flex-shrink: 0;
    white-space: nowrap;
}

.PZEmpty[b-o4zf3gfpl2] {
    font-size: 12.5px;
    color: #9ca3af;
    text-align: center;
    padding: 14px 0;
}

/* ─── เงินทอน — ชำระเกินยอดบิล ─── */
.PZChangeRow[b-o4zf3gfpl2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 8px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #b45309;
}

/* ─── แก้ไข / ลบ ต่อรายการ ─── */
.PZActions[b-o4zf3gfpl2] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.PZActionBtn[b-o4zf3gfpl2] {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease;
}

.PZActionBtn:hover[b-o4zf3gfpl2] { background: #eef1f6; }
.PZActionBtnDanger:hover[b-o4zf3gfpl2] { background: #fee2e2; }

/* ─── Action Button (reuse หน้าตาเดียวกับ .BtnAction ของ StockRec_Bill) ─── */
.BtnAction[b-o4zf3gfpl2] {
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-align: center;
    transition: opacity .18s, transform .12s;
    font-family: inherit;
}

.BtnAction:active[b-o4zf3gfpl2] { transform: translateY(0); }

/* [2026-10] teal ทึบ (ไม่ gradient) — ชุดเดียวกับปุ่มบันทึกใน PopupPayment */
.BtnAction.Primary[b-o4zf3gfpl2] {
    background: #0B7A75;
    color: #fff;
    transition: background .15s;
}

.BtnAction.Primary:hover[b-o4zf3gfpl2] { background: #095E5A; }

/* จำนวนเงิน = ใช้ฟอนต์เดิม (ข้อความอื่นสืบทอด Mine_ThaiFont จาก .POS) */
.PZAmount[b-o4zf3gfpl2], .PZChangeRow strong[b-o4zf3gfpl2] { font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', sans-serif; }
/* /Components/M_Components/BlockDesigner/MineBlockDesigner.razor.rz.scp.css */
/* MineBlockDesigner [2026-10] — ตัวออกแบบเต็มจอ ธีมหลังบ้าน (teal) ; เนื้อหาในพรีวิวใช้ CSS .mbd-* ของหน้าร้าน */

.bd-root[b-wd1q2t7hpe] {
    --p: #0B7A75; --p-d: #095E5A; --p-soft: #E7F5F4; --p-line: #B9E0DC;
    --ink: #0f172a; --ink2: #475569; --mut: #94a3b8; --line: #e3e8ef; --bg: #eef1f5;
    position: fixed; inset: 0; z-index: 9000;
    display: flex; flex-direction: column;
    background: var(--bg); color: var(--ink);
    font-family: 'Mine_ThaiFont', 'IBM Plex Sans Thai', sans-serif; font-size: 13px;
    animation: bd-in-b-wd1q2t7hpe .16s ease-out;
}
@keyframes bd-in-b-wd1q2t7hpe { from { opacity: 0; transform: scale(.995); } to { opacity: 1; transform: none; } }

/* ─── Top bar ─── */
.bd-top[b-wd1q2t7hpe] {
    flex: none; display: flex; align-items: center; gap: 12px;
    height: 58px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--line);
}
.bd-top-l[b-wd1q2t7hpe] { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; }
.bd-top-c[b-wd1q2t7hpe] { display: flex; align-items: center; gap: 6px; flex: none; }
.bd-top-r[b-wd1q2t7hpe] { display: flex; align-items: center; gap: 8px; flex: 1 1 0; justify-content: flex-end; min-width: 0; }
.bd-titles[b-wd1q2t7hpe] { min-width: 0; }
.bd-title[b-wd1q2t7hpe] { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-sub[b-wd1q2t7hpe] { font-size: 11.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 8px; }
.bd-dirty[b-wd1q2t7hpe] { color: #d97706; font-weight: 600; }
.bd-saved[b-wd1q2t7hpe] { color: var(--p); font-weight: 600; }

.bd-ico-btn[b-wd1q2t7hpe] {
    width: 34px; height: 34px; flex: none; border-radius: 9px; border: 1px solid var(--line); background: #fff;
    color: var(--ink2); font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.bd-ico-btn:hover:not(:disabled)[b-wd1q2t7hpe] { background: var(--p-soft); color: var(--p); border-color: var(--p-line); }
.bd-ico-btn:disabled[b-wd1q2t7hpe] { opacity: .35; cursor: default; }
.bd-ico-btn.sm[b-wd1q2t7hpe] { width: 30px; height: 30px; font-size: 13px; }
.bd-ico-btn.danger:hover[b-wd1q2t7hpe] { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

.bd-btn[b-wd1q2t7hpe] {
    height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid transparent; cursor: pointer;
    font: inherit; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.bd-btn:disabled[b-wd1q2t7hpe] { opacity: .45; cursor: default; }
.bd-btn-primary[b-wd1q2t7hpe] { background: var(--p); color: #fff; }
.bd-btn-primary:hover:not(:disabled)[b-wd1q2t7hpe] { background: var(--p-d); }
.bd-btn-ghost[b-wd1q2t7hpe] { background: #fff; color: var(--p); border-color: var(--p-line); }
.bd-btn-ghost:hover:not(:disabled)[b-wd1q2t7hpe], .bd-btn-ghost.on[b-wd1q2t7hpe] { background: var(--p-soft); }
.bd-btn-danger[b-wd1q2t7hpe] { background: #dc2626; color: #fff; }
.bd-btn-danger:hover:not(:disabled)[b-wd1q2t7hpe] { background: #b91c1c; }
.bd-btn-danger-ghost[b-wd1q2t7hpe] { background: #fff; color: #dc2626; border-color: #fecaca; margin-top: 10px; }
.bd-btn-danger-ghost:hover[b-wd1q2t7hpe] { background: #fef2f2; }
.bd-btn-sm[b-wd1q2t7hpe] { height: 28px; padding: 0 10px; font-size: 12px; }
.bd-btn-block[b-wd1q2t7hpe] { width: 100%; margin-top: 6px; }

.bd-seg[b-wd1q2t7hpe] { display: inline-flex; padding: 3px; border-radius: 10px; background: #f1f4f8; border: 1px solid var(--line); gap: 2px; }
.bd-seg button[b-wd1q2t7hpe] {
    border: 0; background: transparent; padding: 0 11px; height: 28px; border-radius: 7px; cursor: pointer;
    font: inherit; font-size: 12px; color: var(--ink2); white-space: nowrap;
}
.bd-seg button.on[b-wd1q2t7hpe] { background: #fff; color: var(--p); font-weight: 700; box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.bd-seg.full[b-wd1q2t7hpe] { display: flex; width: 100%; }
.bd-seg.full button[b-wd1q2t7hpe] { flex: 1; padding: 0 4px; }

/* ─── Layout ─── */
.bd-main[b-wd1q2t7hpe] { flex: 1; display: flex; min-height: 0; position: relative; }

.bd-left[b-wd1q2t7hpe], .bd-right[b-wd1q2t7hpe] {
    flex: none; background: #fff; overflow-y: auto; overscroll-behavior: contain;
}
.bd-left[b-wd1q2t7hpe] { width: 248px; border-right: 1px solid var(--line); padding: 14px 12px; }
.bd-right[b-wd1q2t7hpe] { width: 330px; border-left: 1px solid var(--line); display: flex; flex-direction: column; position: relative; }

.bd-panel-h[b-wd1q2t7hpe] {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11.5px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
.bd-count[b-wd1q2t7hpe] { background: #f1f4f8; border-radius: 99px; padding: 1px 8px; font-weight: 600; }
.bd-hint[b-wd1q2t7hpe] { font-size: 11.5px; color: var(--mut); line-height: 1.5; margin-bottom: 8px; }

.bd-tiles[b-wd1q2t7hpe] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bd-tiles.wide[b-wd1q2t7hpe] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 14px 16px 18px; }
.bd-tile[b-wd1q2t7hpe] {
    border: 1px solid var(--line); border-radius: 10px; padding: 10px 6px 8px; background: #fff;
    display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: grab; user-select: none;
    transition: border-color .12s, background .12s, transform .12s;
}
.bd-tile:hover[b-wd1q2t7hpe] { border-color: var(--p-line); background: var(--p-soft); transform: translateY(-1px); }
.bd-tile:active[b-wd1q2t7hpe] { cursor: grabbing; }
.bd-tile-ic[b-wd1q2t7hpe] {
    width: 32px; height: 32px; border-radius: 8px; background: #f1f4f8; color: var(--p);
    display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700;
}
.bd-tile:hover .bd-tile-ic[b-wd1q2t7hpe] { background: #fff; }
.bd-tile-l[b-wd1q2t7hpe] { font-size: 12px; font-weight: 600; text-align: center; }
.bd-tile-d[b-wd1q2t7hpe] { font-size: 11px; color: var(--mut); text-align: center; line-height: 1.35; }
.bd-tiles.wide .bd-tile[b-wd1q2t7hpe] { cursor: pointer; padding: 14px 8px 12px; }

.bd-outline[b-wd1q2t7hpe] { display: flex; flex-direction: column; gap: 2px; }
.bd-ol-row[b-wd1q2t7hpe] {
    display: flex; align-items: center; gap: 7px; padding: 6px 6px; border-radius: 8px; cursor: pointer;
    border: 1px solid transparent;
}
.bd-ol-row:hover[b-wd1q2t7hpe] { background: #f6f8fb; }
.bd-ol-row.on[b-wd1q2t7hpe] { background: var(--p-soft); border-color: var(--p-line); }
.bd-ol-ic[b-wd1q2t7hpe] { width: 22px; text-align: center; color: var(--p); font-weight: 700; flex: none; }
.bd-ol-t[b-wd1q2t7hpe] { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.bd-ol-btns[b-wd1q2t7hpe] { display: none; gap: 2px; }
.bd-ol-row:hover .bd-ol-btns[b-wd1q2t7hpe], .bd-ol-row.on .bd-ol-btns[b-wd1q2t7hpe] { display: flex; }
.bd-ol-btns button[b-wd1q2t7hpe] {
    width: 22px; height: 22px; border: 0; border-radius: 5px; background: #fff; color: var(--ink2); cursor: pointer; font-size: 11px;
}
.bd-ol-btns button:disabled[b-wd1q2t7hpe] { opacity: .3; cursor: default; }

/* ─── Stage / พรีวิว ─── */
.bd-stage[b-wd1q2t7hpe] { flex: 1; min-width: 0; overflow-y: auto; padding: 22px 26px 40px; display: flex; flex-direction: column; align-items: center; }
/* ลูกของ stage ห้ามหดตามความสูงจอ (flex column) — ไม่งั้นกรอบขาวหดเหลือ min-height แล้วเนื้อหาล้นออกนอกกรอบ */
.bd-stage > *[b-wd1q2t7hpe] { flex-shrink: 0; }
.bd-frame[b-wd1q2t7hpe] {
    width: 100%; max-width: 1000px; background: #fff; border-radius: 14px; padding: 26px 28px;
    box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 30px -18px rgba(15,23,42,.35);
    transition: max-width .25s ease, padding .25s ease; min-height: 240px;
}
.bd-frame.mobile[b-wd1q2t7hpe] { max-width: 390px; padding: 18px 14px; border-radius: 26px; border: 8px solid #1f2937; }
.bd-keys[b-wd1q2t7hpe] { margin-top: 14px; font-size: 11px; color: var(--mut); text-align: center; }

.bd-notice[b-wd1q2t7hpe] {
    width: 100%; max-width: 1000px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 12.5px;
}
.bd-notice > span[b-wd1q2t7hpe] { flex: 1; }

.bd-canvas .mbd-inner[b-wd1q2t7hpe] { gap: 0 !important; }

.bd-block[b-wd1q2t7hpe] {
    position: relative; border-radius: 10px; outline: 2px solid transparent; outline-offset: 4px;
    cursor: pointer; transition: outline-color .12s, opacity .12s;
}
.bd-block:hover[b-wd1q2t7hpe] { outline-color: #c7d6e6; }
.bd-block.sel[b-wd1q2t7hpe] { outline-color: var(--p); }
.bd-block.dim[b-wd1q2t7hpe] { opacity: .35; }
.bd-block.moving[b-wd1q2t7hpe] { opacity: .4; }
.bd-block[b-wd1q2t7hpe]  iframe, .bd-block[b-wd1q2t7hpe]  video, .bd-block[b-wd1q2t7hpe]  a, .bd-block[b-wd1q2t7hpe]  summary { pointer-events: none; }
.bd-block[b-wd1q2t7hpe]  .mbd-sp { outline: 1px dashed #d5dce6; border-radius: 6px; }

.bd-chip[b-wd1q2t7hpe] {
    position: absolute; top: -26px; left: -4px; z-index: 3; display: none; gap: 4px; align-items: center;
    padding: 2px 8px; border-radius: 6px 6px 6px 0; background: var(--p); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.bd-chip-tag[b-wd1q2t7hpe] { background: rgba(255,255,255,.22); border-radius: 4px; padding: 0 5px; font-weight: 500; }
.bd-block:hover .bd-chip[b-wd1q2t7hpe] { display: flex; background: #64748b; }
.bd-block.sel .bd-chip[b-wd1q2t7hpe] { display: flex; background: var(--p); }
.bd-block.dim .bd-chip[b-wd1q2t7hpe] { display: flex; }

.bd-tools[b-wd1q2t7hpe] {
    position: absolute; top: -30px; right: -4px; z-index: 3; display: none; gap: 2px;
    padding: 3px; border-radius: 8px; background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 14px -6px rgba(15,23,42,.3);
}
.bd-block.sel .bd-tools[b-wd1q2t7hpe] { display: flex; }
.bd-tools button[b-wd1q2t7hpe] {
    width: 26px; height: 24px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; color: var(--ink2); font-size: 12px;
}
.bd-tools button:hover:not(:disabled)[b-wd1q2t7hpe] { background: var(--p-soft); color: var(--p); }
.bd-tools button.danger:hover[b-wd1q2t7hpe] { background: #fef2f2; color: #dc2626; }
.bd-tools button:disabled[b-wd1q2t7hpe] { opacity: .3; cursor: default; }

/* ช่องว่างระหว่างบล็อก = ที่วาง + ปุ่มแทรก (สูงเท่าระยะห่างของหน้า) */
.bd-drop[b-wd1q2t7hpe] {
    position: relative; height: max(14px, var(--mbd-gap, 18px)); display: flex; align-items: center; justify-content: center;
    border-radius: 8px; transition: height .12s, background .12s;
}
.bd-drop.edge[b-wd1q2t7hpe] { height: 14px; }
.bd-drop[b-wd1q2t7hpe]::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed transparent; }
.bd-drop:hover[b-wd1q2t7hpe]::before { border-top-color: var(--p-line); }
.bd-drop.dragging[b-wd1q2t7hpe] { height: 34px; background: rgba(11,122,117,.04); }
.bd-drop.dragging[b-wd1q2t7hpe]::before { border-top-color: var(--p-line); }
.bd-drop.dragging.hover[b-wd1q2t7hpe] { height: 52px; background: var(--p-soft); }
.bd-drop.dragging.hover[b-wd1q2t7hpe]::before { border-top-color: var(--p); }
.bd-drop-l[b-wd1q2t7hpe] { position: relative; font-size: 11px; color: var(--p); font-weight: 600; background: #fff; padding: 0 8px; border-radius: 99px; }
.bd-plus[b-wd1q2t7hpe] {
    position: relative; z-index: 2; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--p-line);
    background: #fff; color: var(--p); font-weight: 700; cursor: pointer; opacity: 0; transition: opacity .12s, transform .12s;
}
.bd-drop:hover .bd-plus[b-wd1q2t7hpe] { opacity: 1; }
.bd-plus:hover[b-wd1q2t7hpe] { transform: scale(1.12); background: var(--p); color: #fff; }

.bd-empty[b-wd1q2t7hpe] {
    border: 2px dashed #cdd6e2; border-radius: 14px; padding: 46px 18px; text-align: center; color: var(--ink2);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.bd-empty-ic[b-wd1q2t7hpe] { font-size: 34px; }
.bd-empty-t[b-wd1q2t7hpe] { font-size: 16px; font-weight: 700; color: var(--ink); }
.bd-empty-d[b-wd1q2t7hpe] { font-size: 12.5px; color: var(--mut); max-width: 360px; }
.bd-empty-btns[b-wd1q2t7hpe] { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }

/* ─── แผงขวา ─── */
.bd-insp-h[b-wd1q2t7hpe] { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid var(--line); }
.bd-insp-ic[b-wd1q2t7hpe] {
    width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--p-soft); color: var(--p);
    display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700;
}
.bd-insp-t[b-wd1q2t7hpe] { font-size: 14px; font-weight: 700; }
.bd-insp-d[b-wd1q2t7hpe] { font-size: 11.5px; color: var(--mut); }
.bd-tabs[b-wd1q2t7hpe] { display: flex; padding: 0 14px; border-bottom: 1px solid var(--line); gap: 4px; }
.bd-tabs button[b-wd1q2t7hpe] {
    flex: 1; border: 0; background: transparent; padding: 10px 0 9px; cursor: pointer; font: inherit; font-weight: 600;
    color: var(--mut); border-bottom: 2px solid transparent;
}
.bd-tabs button.on[b-wd1q2t7hpe] { color: var(--p); border-bottom-color: var(--p); }
.bd-insp-body[b-wd1q2t7hpe] { padding: 14px; flex: 1; }

.bd-field[b-wd1q2t7hpe] { margin-bottom: 14px; }
.bd-lab[b-wd1q2t7hpe] { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; font-weight: 600; font-size: 12px; }
.bd-lab small[b-wd1q2t7hpe] { font-weight: 400; color: var(--mut); font-size: 11px; }
.bd-lab b[b-wd1q2t7hpe] { color: var(--p); font-family: 'IBM Plex Split', sans-serif; font-size: 11.5px; }

.bd-in[b-wd1q2t7hpe] {
    width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font: inherit; color: var(--ink);
    background: #fff; outline: none; box-sizing: border-box;
}
.bd-in:focus[b-wd1q2t7hpe] { border-color: var(--p); box-shadow: 0 0 0 3px rgba(11,122,117,.12); }
.bd-ta[b-wd1q2t7hpe] { height: auto; min-height: 76px; padding: 8px 10px; resize: vertical; line-height: 1.55; }
.bd-ta.sm[b-wd1q2t7hpe] { min-height: 54px; margin-top: 6px; }
.bd-in-ic[b-wd1q2t7hpe] { width: 46px; flex: none; text-align: center; font-size: 16px; padding: 0 4px; }
.bd-item .bd-in + .bd-in[b-wd1q2t7hpe] { margin-top: 6px; }

.bd-range[b-wd1q2t7hpe] { width: 100%; accent-color: var(--p); }

.bd-colors[b-wd1q2t7hpe] { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-sw[b-wd1q2t7hpe] {
    width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(15,23,42,.14); cursor: pointer; padding: 0;
    position: relative; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink2);
}
.bd-sw.on[b-wd1q2t7hpe] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--p); }
.bd-sw.none[b-wd1q2t7hpe] { background: repeating-linear-gradient(135deg, #fff 0 5px, #f1f4f8 5px 10px); }
.bd-sw.pick[b-wd1q2t7hpe] { background: #fff; overflow: hidden; }
.bd-sw.pick input[b-wd1q2t7hpe] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

.bd-switch[b-wd1q2t7hpe] { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12.5px; margin-bottom: 10px; user-select: none; }
.bd-switch input[b-wd1q2t7hpe] { display: none; }
.bd-switch-k[b-wd1q2t7hpe] { width: 34px; height: 20px; border-radius: 99px; background: #cbd5e1; position: relative; flex: none; transition: background .15s; }
.bd-switch-k[b-wd1q2t7hpe]::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
    transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.bd-switch input:checked + .bd-switch-k[b-wd1q2t7hpe] { background: var(--p); }
.bd-switch input:checked + .bd-switch-k[b-wd1q2t7hpe]::after { transform: translateX(14px); }
.bd-switches[b-wd1q2t7hpe] { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; margin-top: 4px; }

.bd-icon-row[b-wd1q2t7hpe] { display: flex; gap: 8px; align-items: flex-start; }
.bd-emojis[b-wd1q2t7hpe] { display: flex; flex-wrap: wrap; gap: 3px; }
.bd-emojis button[b-wd1q2t7hpe] {
    width: 26px; height: 26px; border: 1px solid transparent; border-radius: 6px; background: #f6f8fb; cursor: pointer; font-size: 13px; padding: 0;
}
.bd-emojis button:hover[b-wd1q2t7hpe], .bd-emojis button.on[b-wd1q2t7hpe] { border-color: var(--p); background: var(--p-soft); }

.bd-imgpick[b-wd1q2t7hpe] { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.bd-imgpick img[b-wd1q2t7hpe] { display: block; width: 100%; max-height: 170px; object-fit: contain; background: #f6f8fb; }
.bd-imgpick-empty[b-wd1q2t7hpe] {
    height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: #f6f8fb; color: var(--mut); font-size: 22px;
}
.bd-imgpick-empty span[b-wd1q2t7hpe] { font-size: 11.5px; }
.bd-imgpick-btns[b-wd1q2t7hpe] { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }

.bd-item[b-wd1q2t7hpe] { border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin-bottom: 8px; background: #fbfcfd; }
.bd-item-h[b-wd1q2t7hpe] { display: flex; align-items: center; gap: 6px; }
.bd-item-h + .bd-in[b-wd1q2t7hpe] { margin-top: 6px; }
.bd-item-n[b-wd1q2t7hpe] { font-size: 11.5px; color: var(--mut); font-weight: 600; flex: none; }
.bd-item-h .bd-item-n:not(:first-child)[b-wd1q2t7hpe] { flex: 1; }
.bd-item-thumb[b-wd1q2t7hpe] { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; background: #eef1f5; flex: none; }
.bd-item-btns[b-wd1q2t7hpe] { display: flex; gap: 2px; flex: none; margin-left: auto; }
.bd-item-btns button[b-wd1q2t7hpe] {
    width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; font-size: 11px; color: var(--ink2);
}
.bd-item-btns button:disabled[b-wd1q2t7hpe] { opacity: .3; cursor: default; }
.bd-item-btns button.danger:hover[b-wd1q2t7hpe] { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

.bd-warn[b-wd1q2t7hpe] { font-size: 11.5px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 6px 9px; margin: -6px 0 12px; }

.bd-tips[b-wd1q2t7hpe] { margin-top: 18px; background: #f6f8fb; border-radius: 10px; padding: 10px 12px; font-size: 12px; color: var(--ink2); }
.bd-tips-t[b-wd1q2t7hpe] { font-weight: 700; margin-bottom: 4px; color: var(--ink); }
.bd-tips ul[b-wd1q2t7hpe] { margin: 0; padding-left: 18px; line-height: 1.7; }

/* ช่องข้อความจัดรูปแบบ */
.bd-rtb[b-wd1q2t7hpe] {
    display: flex; flex-wrap: wrap; gap: 2px; padding: 5px; border: 1px solid var(--line); border-bottom: 0;
    border-radius: 9px 9px 0 0; background: #f6f8fb;
}
.bd-rtb button[b-wd1q2t7hpe], .bd-rtb-color[b-wd1q2t7hpe] {
    min-width: 27px; height: 27px; padding: 0 5px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
    font: inherit; font-size: 12px; color: var(--ink2); display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.bd-rtb button:hover[b-wd1q2t7hpe], .bd-rtb-color:hover[b-wd1q2t7hpe] { background: #fff; color: var(--p); }
.bd-rtb i[b-wd1q2t7hpe] { width: 1px; height: 18px; background: var(--line); margin: 4px 3px; }
.bd-rtb-color[b-wd1q2t7hpe] { font-weight: 700; text-decoration: underline; text-decoration-color: #ef4444; text-decoration-thickness: 3px; }
.bd-rtb-color.hl[b-wd1q2t7hpe] { text-decoration: none; color: #eab308; }
.bd-rtb-color input[b-wd1q2t7hpe] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.bd-rich[b-wd1q2t7hpe] {
    min-height: 150px; max-height: 360px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--line);
    border-radius: 0 0 9px 9px; outline: none; line-height: 1.65; font-size: 13.5px; background: #fff;
}
.bd-rich:focus[b-wd1q2t7hpe] { border-color: var(--p); box-shadow: 0 0 0 3px rgba(11,122,117,.12); }
.bd-rich[b-wd1q2t7hpe]  p { margin: 0 0 .6em; }
.bd-rich[b-wd1q2t7hpe]  h2 { font-size: 1.3em; margin: .3em 0 .5em; }
.bd-rich[b-wd1q2t7hpe]  h3 { font-size: 1.12em; margin: .3em 0 .5em; }
.bd-rich[b-wd1q2t7hpe]  ul, .bd-rich[b-wd1q2t7hpe]  ol { padding-left: 1.4em; margin: 0 0 .6em; }
.bd-rich[b-wd1q2t7hpe]  img { max-width: 100%; }

/* ─── Popup ─── */
.bd-ov[b-wd1q2t7hpe] {
    position: absolute; inset: 0; z-index: 50; background: rgba(15,23,42,.42); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; padding: 16px; animation: bd-in-b-wd1q2t7hpe .12s ease-out;
}
.bd-modal[b-wd1q2t7hpe] {
    width: 100%; max-width: 860px; max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border-radius: 16px;
    box-shadow: 0 24px 60px -20px rgba(15,23,42,.5);
}
.bd-modal.sm[b-wd1q2t7hpe] { max-width: 720px; }
.bd-modal.xs[b-wd1q2t7hpe] { max-width: 420px; }
.bd-modal-h[b-wd1q2t7hpe] {
    display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 6px;
    font-size: 15px; font-weight: 700; position: sticky; top: 0; background: #fff; z-index: 1;
}
.bd-modal-sub[b-wd1q2t7hpe] { padding: 0 18px 4px; color: var(--mut); font-size: 12px; }
.bd-modal-f[b-wd1q2t7hpe] {
    display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--line);
    position: sticky; bottom: 0; background: #fff; flex-wrap: wrap;
}
.bd-x-sm[b-wd1q2t7hpe] {
    width: 28px; height: 28px; border: 0; border-radius: 7px; background: #f1f4f8; cursor: pointer; color: var(--ink2); flex: none;
}
.bd-x-sm:hover[b-wd1q2t7hpe] { background: #e2e8f0; }
.bd-confirm-msg[b-wd1q2t7hpe] { padding: 4px 18px 16px; color: var(--ink2); line-height: 1.6; }

.bd-tpls[b-wd1q2t7hpe] { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 12px 18px 18px; }
.bd-tpl[b-wd1q2t7hpe] {
    border: 1.5px solid var(--line); border-radius: 12px; padding: 10px; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.bd-tpl:hover[b-wd1q2t7hpe] { border-color: var(--p-line); }
.bd-tpl.on[b-wd1q2t7hpe] { border-color: var(--p); box-shadow: 0 0 0 3px rgba(11,122,117,.14); }
.bd-tpl-thumb[b-wd1q2t7hpe] {
    height: 118px; border-radius: 8px; background: #f6f8fb; padding: 9px 12px; display: flex; flex-direction: column; gap: 5px; overflow: hidden;
}
.bd-tpl-blank[b-wd1q2t7hpe] { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--mut); }
.bd-tpl-bar[b-wd1q2t7hpe] { height: 8px; border-radius: 3px; background: #dbe3ec; flex: none; }
.bd-tpl-bar.k-heading[b-wd1q2t7hpe] { height: 11px; width: 60%; background: #93a5bb; }
.bd-tpl-bar.k-text[b-wd1q2t7hpe] { width: 92%; }
.bd-tpl-bar.k-image[b-wd1q2t7hpe] { height: 26px; background: #c9d6e6; }
.bd-tpl-bar.k-imagetext[b-wd1q2t7hpe] { height: 22px; background: linear-gradient(90deg, #c9d6e6 0 42%, #fff 42% 46%, #dbe3ec 46%); }
.bd-tpl-bar.k-gallery[b-wd1q2t7hpe] { height: 22px; background: repeating-linear-gradient(90deg, #c9d6e6 0 30%, #f6f8fb 30% 35%); }
.bd-tpl-bar.k-features[b-wd1q2t7hpe] { height: 16px; background: repeating-linear-gradient(90deg, #cfe9e7 0 30%, #f6f8fb 30% 35%); }
.bd-tpl-bar.k-specs[b-wd1q2t7hpe] { height: 14px; background: repeating-linear-gradient(180deg, #dbe3ec 0 3px, #f6f8fb 3px 5px); }
.bd-tpl-bar.k-callout[b-wd1q2t7hpe] { height: 12px; background: #cfe9e7; border-left: 3px solid var(--p); }
.bd-tpl-bar.k-button[b-wd1q2t7hpe] { width: 34%; height: 10px; border-radius: 99px; background: var(--p); margin: 0 auto; }
.bd-tpl-bar.k-video[b-wd1q2t7hpe] { height: 24px; background: #334155; }
.bd-tpl-bar.k-faq[b-wd1q2t7hpe] { height: 12px; background: #fff; border: 1px solid #dbe3ec; }
.bd-tpl-bar.k-divider[b-wd1q2t7hpe] { height: 1px; }
.bd-tpl-bar.k-columns[b-wd1q2t7hpe] { height: 18px; background: repeating-linear-gradient(90deg, #dbe3ec 0 28%, #f6f8fb 28% 36%); }
.bd-col-item .bd-field[b-wd1q2t7hpe] { margin: 8px 0 0; }
.bd-col-item .bd-rich[b-wd1q2t7hpe] { min-height: 90px; }
.bd-tpl-n[b-wd1q2t7hpe] { font-weight: 700; margin-top: 8px; }
.bd-tpl-d[b-wd1q2t7hpe] { font-size: 11.5px; color: var(--mut); line-height: 1.45; }

.bd-copy-search[b-wd1q2t7hpe] { display: flex; gap: 8px; padding: 10px 18px; }
.bd-copy-list[b-wd1q2t7hpe] { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.bd-copy-row[b-wd1q2t7hpe] {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.bd-copy-row:hover[b-wd1q2t7hpe] { border-color: var(--p-line); background: var(--p-soft); }
.bd-copy-n[b-wd1q2t7hpe] { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-copy-s[b-wd1q2t7hpe] { font-size: 11.5px; color: var(--mut); }
.bd-tag[b-wd1q2t7hpe] { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: #f1f4f8; color: var(--ink2); white-space: nowrap; }
.bd-tag.ok[b-wd1q2t7hpe] { background: var(--p-soft); color: var(--p); font-weight: 600; }

.bd-toast[b-wd1q2t7hpe] {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60;
    background: #0f172a; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 12.5px;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); animation: bd-in-b-wd1q2t7hpe .15s ease-out; max-width: calc(100% - 32px);
}
.bd-toast.err[b-wd1q2t7hpe] { background: #b91c1c; }

/* ─── ดูตัวอย่าง ─── */
.bd-root.is-preview .bd-stage[b-wd1q2t7hpe] { background: #e9edf2; }

/* ─── จอแคบ: แผงซ้าย/ขวาเป็นลิ้นชัก ─── */
.bd-only-narrow[b-wd1q2t7hpe] { display: none; }
.bd-narrow-bar[b-wd1q2t7hpe] { width: 100%; gap: 8px; margin-bottom: 12px; justify-content: center; flex-wrap: wrap; }
.bd-right-x[b-wd1q2t7hpe] { position: absolute; top: 10px; right: 10px; z-index: 2; }

@media (max-width: 1180px) {
    .bd-left[b-wd1q2t7hpe] { width: 214px; }
    .bd-right[b-wd1q2t7hpe] { width: 300px; }
    .bd-top-r .bd-btn-ghost[b-wd1q2t7hpe] { padding: 0 10px; }
}

@media (max-width: 1000px) {
    .bd-only-narrow[b-wd1q2t7hpe] { display: inline-flex; }
    .bd-narrow-bar.bd-only-narrow[b-wd1q2t7hpe] { display: flex; }
    .bd-left[b-wd1q2t7hpe], .bd-right[b-wd1q2t7hpe] {
        position: absolute; top: 0; bottom: 0; z-index: 30; box-shadow: 0 0 40px -10px rgba(15,23,42,.45);
        transition: transform .2s ease;
    }
    .bd-left[b-wd1q2t7hpe] { left: 0; width: 280px; transform: translateX(-102%); }
    .bd-right[b-wd1q2t7hpe] { right: 0; width: min(360px, 92vw); transform: translateX(102%); }
    .bd-left.open[b-wd1q2t7hpe], .bd-right.open[b-wd1q2t7hpe] { transform: none; }
    .bd-insp-h[b-wd1q2t7hpe] { padding-right: 48px; }
    .bd-stage[b-wd1q2t7hpe] { padding: 14px 12px 30px; }
    .bd-keys[b-wd1q2t7hpe] { display: none; }
}

@media (max-width: 720px) {
    .bd-top[b-wd1q2t7hpe] { height: auto; flex-wrap: wrap; padding: 8px 10px; row-gap: 6px; }
    .bd-top-l[b-wd1q2t7hpe] { flex: 1 1 60%; }
    .bd-top-r[b-wd1q2t7hpe] { flex: 0 0 auto; }
    .bd-top-c[b-wd1q2t7hpe] { order: 3; flex: 1 1 100%; justify-content: center; }
    .bd-top-r .bd-btn-ghost[b-wd1q2t7hpe] { display: none; }
    .bd-frame[b-wd1q2t7hpe] { padding: 16px 12px; border-radius: 12px; }
    .bd-frame.mobile[b-wd1q2t7hpe] { border-width: 0; border-radius: 12px; }
    .bd-tools button[b-wd1q2t7hpe] { width: 30px; height: 28px; }
}

/* ─── [2026-10] บล็อกข้อมูลสด (หมวดหมู่ / สินค้า) + Animation ─── */
.bd-tpl-bar.k-categories[b-wd1q2t7hpe] { height: 16px; background: repeating-linear-gradient(90deg, #dbeafe 0 14%, #f6f8fb 14% 17%); }
.bd-tpl-bar.k-products[b-wd1q2t7hpe] { height: 24px; background: repeating-linear-gradient(90deg, #e2e8f0 0 22%, #f6f8fb 22% 26%); }
.bd-live[b-wd1q2t7hpe] { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; padding: 4px 10px; border-radius: 99px; background: #ecfdf5; color: #047857; font-size: 11.5px; font-weight: 600; }
.bd-sec-h[b-wd1q2t7hpe] { margin: 16px 0 10px; padding-top: 12px; border-top: 1px dashed var(--line); font-weight: 700; font-size: 12.5px; color: var(--ink); }
.bd-link[b-wd1q2t7hpe] { border: 0; background: none; padding: 0; color: var(--p); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.bd-link:hover[b-wd1q2t7hpe] { text-decoration: underline; }
.bd-chips[b-wd1q2t7hpe] { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-chips button[b-wd1q2t7hpe] { padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink2); font: inherit; font-size: 12px; cursor: pointer; transition: all .15s; }
.bd-chips button:hover[b-wd1q2t7hpe] { border-color: var(--p); color: var(--p); }
.bd-chips button.on[b-wd1q2t7hpe] { background: var(--p); border-color: var(--p); color: #fff; font-weight: 600; }
.bd-catpick[b-wd1q2t7hpe] { display: flex; flex-wrap: wrap; gap: 5px; max-height: 210px; overflow-y: auto; padding: 2px; }
.bd-catpick button[b-wd1q2t7hpe] { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink2); font: inherit; font-size: 12px; cursor: pointer; }
.bd-catpick button span[b-wd1q2t7hpe] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-catpick button img[b-wd1q2t7hpe] { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; }
.bd-catpick button b[b-wd1q2t7hpe] { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #fff; color: var(--p); font-size: 10.5px; display: inline-flex; align-items: center; justify-content: center; }
.bd-catpick button.on[b-wd1q2t7hpe] { background: var(--p); border-color: var(--p); color: #fff; }
.bd-field .bd-copy-search[b-wd1q2t7hpe] { padding: 0; }
.bd-prod-row[b-wd1q2t7hpe] { padding: 6px 8px; margin-bottom: 6px; }
.bd-prod-n[b-wd1q2t7hpe] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink) !important; font-weight: 500 !important; }
.bd-prod-results[b-wd1q2t7hpe] { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; margin-top: 8px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfd; }
.bd-prod-results button[b-wd1q2t7hpe] { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; border: 1px solid transparent; background: #fff; font: inherit; font-size: 12px; color: var(--ink); text-align: left; cursor: pointer; }
.bd-prod-results button:hover:not(:disabled)[b-wd1q2t7hpe] { border-color: var(--p); }
.bd-prod-results button:disabled[b-wd1q2t7hpe] { opacity: .55; cursor: default; }
.bd-prod-results img[b-wd1q2t7hpe] { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; background: #eef1f5; flex: none; }
.bd-prod-results span[b-wd1q2t7hpe] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-prod-results b[b-wd1q2t7hpe] { color: var(--p); flex: none; }
.bd-two[b-wd1q2t7hpe] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bd-anim[b-wd1q2t7hpe] { margin-top: 6px; }
.bd-anim-grid[b-wd1q2t7hpe] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 12px; }
.bd-anim-grid button[b-wd1q2t7hpe] { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--ink2); font: inherit; font-size: 11.5px; cursor: pointer; transition: all .15s; }
.bd-anim-grid button span[b-wd1q2t7hpe] { font-size: 16px; line-height: 1; color: var(--p); }
.bd-anim-grid button:hover[b-wd1q2t7hpe] { border-color: var(--p); }
.bd-anim-grid button.on[b-wd1q2t7hpe] { background: var(--p-soft); border-color: var(--p); color: var(--p); font-weight: 700; }
.bd-anim-btns[b-wd1q2t7hpe] { display: flex; gap: 6px; margin: 4px 0 8px; }
.bd-anim-btns .bd-btn[b-wd1q2t7hpe] { flex: 1; }
/* /Components/M_Components/CustomerChat/ChatCallPanel.razor.rz.scp.css */
/* หน้าต่างโทรเสียง / วิดีโอคอล [2026-10] — โทนเข้มกลาง ใช้ได้ทั้งหน้าร้าน/หลังบ้าน (สีวงกลมชื่อ = --ccp-accent) */
.ccp[b-tkni4qhxfo] {
    --ccp-bg: #111827;
    --ccp-soft: rgba(255, 255, 255, .14);
    --ccp-soft-hover: rgba(255, 255, 255, .24);
    --ccp-red: #dc2626;
    --ccp-green: #16a34a;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10050;
    width: min(380px, calc(100vw - 32px));
    height: min(540px, calc(100vh - 40px));
    border-radius: 16px;
    overflow: hidden;
    background: var(--ccp-bg);
    color: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .35);
    font-size: 14px;
    display: flex;
    flex-direction: column;
}

.ccp.max[b-tkni4qhxfo] {
    inset: 24px;
    width: auto;
    height: auto;
}

.ccp.min[b-tkni4qhxfo] {
    height: auto;
    width: min(340px, calc(100vw - 32px));
    border-radius: 999px;
}

.ccp.incoming[b-tkni4qhxfo] {
    height: auto;
    width: min(320px, calc(100vw - 32px));
}

/* ─── สายเข้า ─── */
.ccp-ring[b-tkni4qhxfo] {
    padding: 26px 20px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.ccp-ring-name[b-tkni4qhxfo] {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ccp-ring-sub[b-tkni4qhxfo] {
    color: #cbd5e1;
    font-size: 13px;
}

.ccp-ring-actions[b-tkni4qhxfo] {
    margin-top: 18px;
    display: flex;
    gap: 22px;
    justify-content: center;
}

/* ─── วงกลมชื่อ ─── */
.ccp-avatar[b-tkni4qhxfo] {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--ccp-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 600;
    position: relative;
}

.ccp-avatar.pulse[b-tkni4qhxfo]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--ccp-accent);
    animation: ccp-pulse-b-tkni4qhxfo 1.6s ease-out infinite;
}

@keyframes ccp-pulse-b-tkni4qhxfo {
    from { transform: scale(1); opacity: .9; }
    to { transform: scale(1.6); opacity: 0; }
}

/* ─── ปุ่มกลม ─── */
.ccp-round[b-tkni4qhxfo] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: var(--ccp-soft);
    transition: background .15s, transform .1s;
    flex: 0 0 auto;
}

.ccp-round:hover:not(:disabled)[b-tkni4qhxfo] { background: var(--ccp-soft-hover); }
.ccp-round:active:not(:disabled)[b-tkni4qhxfo] { transform: scale(.95); }
.ccp-round:disabled[b-tkni4qhxfo] { opacity: .45; cursor: default; }
.ccp-round.red[b-tkni4qhxfo] { background: var(--ccp-red); }
.ccp-round.red:hover:not(:disabled)[b-tkni4qhxfo] { background: #b91c1c; }
.ccp-round.green[b-tkni4qhxfo] { background: var(--ccp-green); }
.ccp-round.green:hover:not(:disabled)[b-tkni4qhxfo] { background: #15803d; }
/* ปิดไมค์/กล้องอยู่ = ปุ่มขาว ไอคอนเข้ม (เห็นชัดว่าปิด) */
.ccp-round.off[b-tkni4qhxfo] { background: #fff; color: #111827; }
.ccp-round.off:hover:not(:disabled)[b-tkni4qhxfo] { background: #e5e7eb; }
/* แชร์หน้าจออยู่ */
.ccp-round.on[b-tkni4qhxfo] { background: var(--ccp-accent); }

/* ─── จอสนทนา ─── */
.ccp-stage[b-tkni4qhxfo] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    background: #0b1220;
}

.ccp-remote[b-tkni4qhxfo] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0b1220;
}

.ccp-remote.screen[b-tkni4qhxfo] { object-fit: contain; }

/* ไม่มีภาพจากอีกฝั่ง — ซ่อนแต่ยังเล่นเสียง (ห้าม display:none ในบางเบราว์เซอร์จะหยุดเล่น) */
.ccp-remote.off[b-tkni4qhxfo] {
    opacity: 0;
    pointer-events: none;
}

.ccp-placeholder[b-tkni4qhxfo] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px 90px;
    text-align: center;
}

.ccp-ph-name[b-tkni4qhxfo] {
    font-size: 17px;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ccp-ph-sub[b-tkni4qhxfo] { color: #cbd5e1; font-size: 13px; }

.ccp-local[b-tkni4qhxfo] {
    position: absolute;
    right: 12px;
    bottom: 88px;
    width: 30%;
    max-width: 180px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 10px;
    background: #1f2937;
    border: 2px solid rgba(255, 255, 255, .7);
    transform: scaleX(-1); /* กระจกเงาเหมือนส่องกล้อง */
}

.ccp-local.screen[b-tkni4qhxfo] {
    transform: none;
    aspect-ratio: 16 / 10;
    object-fit: contain;
}

.ccp-local.off[b-tkni4qhxfo] { display: none; }

.ccp-top[b-tkni4qhxfo] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 10px 24px 16px;
    background: linear-gradient(rgba(0, 0, 0, .5), transparent);
}

.ccp-top-who[b-tkni4qhxfo] { flex: 1 1 auto; min-width: 0; }

.ccp-top-name[b-tkni4qhxfo] {
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ccp-top-status[b-tkni4qhxfo] {
    font-size: 12.5px;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}

.ccp-live[b-tkni4qhxfo] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
}

.ccp-tag[b-tkni4qhxfo] {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11.5px;
}

.ccp-icon[b-tkni4qhxfo] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ccp-icon:hover[b-tkni4qhxfo] { background: rgba(255, 255, 255, .15); }
.ccp-icon[b-tkni4qhxfo]  svg { width: 18px; height: 18px; }

.ccp-controls[b-tkni4qhxfo] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 18px 12px 18px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .55));
}

.ccp-warn[b-tkni4qhxfo] {
    margin-top: 12px;
    background: #fef3c7;
    color: #78350f;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.45;
}

.ccp-warn.floating[b-tkni4qhxfo] {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 64px;
    margin: 0;
    z-index: 2;
}

/* ─── แถบย่อ ─── */
.ccp-mini[b-tkni4qhxfo] { display: none; }

.ccp.min .ccp-mini[b-tkni4qhxfo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 16px;
}

/* ย่อ = ซ่อนจอแต่ไม่ลบ <video> (ยังได้ยินเสียง) */
.ccp.min .ccp-stage[b-tkni4qhxfo] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.ccp-mini-dot[b-tkni4qhxfo] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #f59e0b;
    flex: 0 0 auto;
}

.ccp-mini-dot.on[b-tkni4qhxfo] { background: #22c55e; }

.ccp-mini-name[b-tkni4qhxfo] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ccp-mini-time[b-tkni4qhxfo] {
    font-size: 12.5px;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ccp-mini-btn[b-tkni4qhxfo] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--ccp-soft);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.ccp-mini-btn.red[b-tkni4qhxfo] { background: var(--ccp-red); }
.ccp-mini-btn[b-tkni4qhxfo]  svg { width: 17px; height: 17px; }

.ccp.ended .ccp-controls[b-tkni4qhxfo],
.ccp.ended .ccp-local[b-tkni4qhxfo] { opacity: .5; }

/* ─── มือถือ: เต็มจอ ; ย่อ = แถบบนสุด ─── */
@media (max-width: 768px) {
    .ccp[b-tkni4qhxfo], .ccp.max[b-tkni4qhxfo] {
        inset: 0;
        width: auto;
        height: auto;
        border-radius: 0;
    }

    .ccp.incoming[b-tkni4qhxfo] {
        inset: auto 12px 12px 12px;
        border-radius: 16px;
    }

    .ccp.min[b-tkni4qhxfo] {
        inset: 8px 8px auto 8px;
        border-radius: 999px;
    }

    .ccp-local[b-tkni4qhxfo] { width: 32%; bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
    .ccp-avatar.pulse[b-tkni4qhxfo]::after { animation: none; }
}
/* /Components/M_Components/CustomerChat/ChatLauncherButton.razor.rz.scp.css */
.clb[b-td8c7jvch6] {
    position: fixed;
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'IBM Plex Sans Thai', 'Sarabun', sans-serif;
}

    .clb.preview[b-td8c7jvch6] {
        position: absolute;
        z-index: 2;
    }

    .clb.h-right[b-td8c7jvch6] {
        right: var(--x);
        flex-direction: row;
    }

    .clb.h-left[b-td8c7jvch6] {
        left: var(--x);
        flex-direction: row-reverse;
    }

    .clb.v-bottom[b-td8c7jvch6] {
        bottom: var(--y);
    }

    .clb.v-top[b-td8c7jvch6] {
        top: var(--y);
    }


.clb-btn[b-td8c7jvch6] {
    position: relative;
    width: var(--size);
    height: var(--size);
    border-radius: var(--radius);
    border: none;
    background: var(--bg);
    color: var(--fg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 30, 50, .22);
    transition: transform .15s ease;
    padding: 0;
}

    .clb-btn:hover[b-td8c7jvch6] {
        transform: scale(1.06);
    }

    .clb-btn.img[b-td8c7jvch6] {
        background: transparent;
        box-shadow: none;
    }

        .clb-btn.img img[b-td8c7jvch6] {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: var(--radius);
        }

/* ─── [2026-10] แอนิเมชันเรียกความสนใจ (Mine.CustomerChat.Function.AttentionClass) — ใช้ได้ทั้งปุ่มไอคอน/รูปภาพ
   ความยาว 1 รอบ = --att-dur (แบบ × ความเร็ว) ; สีใช้ --bg (สีปุ่ม) ─── */

/* วงแหวนกระเพื่อม — ตามทรงปุ่ม */
.clb-btn.att-ring[b-td8c7jvch6]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    border: 2px solid var(--bg);
    animation: clb-ring-b-td8c7jvch6 var(--att-dur, 2.2s) infinite;
    pointer-events: none;
}

@keyframes clb-ring-b-td8c7jvch6 {
    0% {
        transform: scale(1);
        opacity: .7;
    }

    70%, 100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

/* แสงเรือง — drop-shadow ตามขอบจริงของรูป (PNG พื้นโปร่งใส) / ตามทรงปุ่มไอคอน */
.clb-btn.att-glow[b-td8c7jvch6] {
    animation: clb-glow-b-td8c7jvch6 var(--att-dur, 2s) ease-in-out infinite;
}

@keyframes clb-glow-b-td8c7jvch6 {
    0%, 100% {
        filter: drop-shadow(0 0 0 transparent);
    }

    50% {
        filter: drop-shadow(0 0 10px var(--bg)) drop-shadow(0 0 4px var(--bg));
    }
}

/* เด้ง / ขยายเป็นจังหวะ */
.clb-btn.att-bounce[b-td8c7jvch6] {
    animation: clb-bounce-b-td8c7jvch6 var(--att-dur, 1.8s) ease-in-out infinite;
}

@keyframes clb-bounce-b-td8c7jvch6 {
    0%, 60%, 100% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.14);
    }

    30% {
        transform: scale(.96);
    }

    45% {
        transform: scale(1.05);
    }
}

/* สั่น / โยก — โยกสั้นๆ ช่วงท้ายรอบ แล้วพัก */
.clb-btn.att-shake[b-td8c7jvch6] {
    transform-origin: 50% 60%;
    animation: clb-shake-b-td8c7jvch6 var(--att-dur, 3s) ease-in-out infinite;
}

@keyframes clb-shake-b-td8c7jvch6 {
    0%, 60%, 88%, 100% {
        transform: rotate(0);
    }

    64% {
        transform: rotate(-12deg);
    }

    68% {
        transform: rotate(10deg);
    }

    72% {
        transform: rotate(-8deg);
    }

    76% {
        transform: rotate(6deg);
    }

    80% {
        transform: rotate(-3deg);
    }
}

/* ชี้เมาส์ = หยุดเด้ง/โยก ให้ขยาย hover ปกติทำงาน */
.clb-btn.att-bounce:hover[b-td8c7jvch6],
.clb-btn.att-shake:hover[b-td8c7jvch6] {
    animation: none;
}

/* ผู้ใช้ตั้งลดการเคลื่อนไหวในเครื่อง — ปิดแอนิเมชันบนหน้าร้าน (พรีวิวหลังบ้านยังแสดง) */
@media (prefers-reduced-motion: reduce) {
    .clb:not(.preview) .clb-btn.att[b-td8c7jvch6],
    .clb:not(.preview) .clb-btn.att[b-td8c7jvch6]::after {
        animation: none;
    }

    .clb:not(.preview) .clb-btn.att-ring[b-td8c7jvch6]::after {
        display: none;
    }
}

.clb-label[b-td8c7jvch6] {
    background: #fff;
    color: #1c2530;
    border: 1px solid #e4e8ef;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(15, 30, 50, .14);
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}

.clb-badge[b-td8c7jvch6] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

@media (max-width: 768px) {
    .clb:not(.preview).h-right[b-td8c7jvch6] {
        right: var(--mx);
    }

    .clb:not(.preview).h-left[b-td8c7jvch6] {
        left: var(--mx);
    }

    .clb:not(.preview).v-bottom[b-td8c7jvch6] {
        bottom: var(--my);
    }

    .clb:not(.preview).v-top[b-td8c7jvch6] {
        top: var(--my);
    }

    .clb.hide-mobile[b-td8c7jvch6] {
        display: none;
    }

    /* [2026-10] ขนาดปุ่มบนมือถือ (MobileButtonSize) — ตั้งที่ตัวปุ่ม (inline style --size บน .clb ชนะ rule ที่ตัวมันเอง) */
    .clb:not(.preview) .clb-btn[b-td8c7jvch6] {
        width: var(--msize);
        height: var(--msize);
        border-radius: var(--mradius);
    }

        .clb:not(.preview) .clb-btn.img img[b-td8c7jvch6],
        .clb:not(.preview) .clb-btn.att-ring[b-td8c7jvch6]::after {
            border-radius: var(--mradius);
        }
}
/* /Components/M_Components/CustomerChat/ChatMessageList.razor.rz.scp.css */
.cml[b-ys126cd8sc] {
    --cml-accent: #1e4f8a;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 12px 6px;
    font-family: 'IBM Plex Sans Thai', 'Sarabun', sans-serif;
    font-size: 14px;
    color: #1c2530;
}

.cml-notice[b-ys126cd8sc] {
    align-self: stretch;
    background: #fff6e8;
    color: #92400e;
    border: 1px solid #fde3b5;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 4px;
}

.cml-day[b-ys126cd8sc] {
    display: flex;
    justify-content: center;
    margin: 8px 0 4px;
}

    .cml-day span[b-ys126cd8sc] {
        background: rgba(28, 37, 48, .07);
        color: #5b6672;
        font-size: 11.5px;
        padding: 2px 10px;
        border-radius: 999px;
    }

.cml-system[b-ys126cd8sc] {
    align-self: center;
    font-size: 12px;
    color: #6b7684;
    padding: 2px 8px;
}

.cml-row[b-ys126cd8sc] {
    display: flex;
    width: 100%;
}

    .cml-row.mine[b-ys126cd8sc] {
        justify-content: flex-end;
    }

    .cml-row.other[b-ys126cd8sc] {
        justify-content: flex-start;
    }

.cml-col[b-ys126cd8sc] {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    min-width: 0;
}

.cml-row.mine .cml-col[b-ys126cd8sc] {
    align-items: flex-end;
}

.cml-sender[b-ys126cd8sc] {
    font-size: 11.5px;
    color: #6b7684;
    margin: 0 4px 2px;
}

.cml-line[b-ys126cd8sc] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex-direction: row;
    flex-wrap: wrap;
}

.cml-row.mine .cml-line[b-ys126cd8sc] {
    flex-direction: row-reverse;
}

.cml-meta[b-ys126cd8sc] {
    display: flex;
    flex-direction: column;
    font-size: 10.5px;
    color: #8a94a1;
    line-height: 1.25;
    white-space: nowrap;
    padding-bottom: 2px;
}

.cml-row.mine .cml-meta[b-ys126cd8sc] {
    align-items: flex-end;
}

.cml-read[b-ys126cd8sc] {
    color: var(--cml-accent);
    font-weight: 600;
}

.cml-bubble[b-ys126cd8sc] {
    background: #fff;
    border: 1px solid #e4e8ef;
    border-radius: 16px;
    border-bottom-left-radius: 6px;
    padding: 8px 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.cml-row.mine .cml-bubble[b-ys126cd8sc] {
    background: var(--cml-accent);
    border-color: var(--cml-accent);
    color: #fff;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 6px;
}

.cml-bubble.welcome[b-ys126cd8sc] {
    background: #f1f5fa;
    border-color: #e1e8f1;
}

/* ─── รูปภาพ ─── */
.cml-bubble.img[b-ys126cd8sc],
.cml-row.mine .cml-bubble.img[b-ys126cd8sc] {
    padding: 4px;
    background: #fff;
    border-color: #e4e8ef;
    color: #1c2530;
}

    .cml-bubble.img img[b-ys126cd8sc] {
        display: block;
        max-width: 220px;
        max-height: 260px;
        width: auto;
        height: auto;
        border-radius: 12px;
        cursor: zoom-in;
        background: #f1f4f8;
    }

.cml-caption[b-ys126cd8sc] {
    padding: 6px 6px 2px;
    font-size: 13px;
}

/* ─── การ์ดสินค้า ─── */
.cml-bubble.product[b-ys126cd8sc],
.cml-row.mine .cml-bubble.product[b-ys126cd8sc] {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 250px;
    padding: 8px;
    background: #fff;
    border: 1px solid #dfe5ee;
    color: #1c2530;
    text-decoration: none;
    white-space: normal;
}

    .cml-bubble.product:hover[b-ys126cd8sc] {
        border-color: var(--cml-accent);
    }

.cml-pimg[b-ys126cd8sc] {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    object-fit: cover;
    border-radius: 10px;
    background: #f1f4f8;
}

    .cml-pimg.empty[b-ys126cd8sc] {
        display: block;
        background: linear-gradient(135deg, #e8eef6 0%, #d5dfec 100%);
    }

.cml-pinfo[b-ys126cd8sc] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.cml-pname[b-ys126cd8sc] {
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cml-pcode[b-ys126cd8sc] {
    font-size: 11.5px;
    color: #6b7684;
}

.cml-plink[b-ys126cd8sc] {
    font-size: 12px;
    font-weight: 600;
    color: var(--cml-accent);
}

/* ─── กำลังพิมพ์ ─── */
.cml-bubble.typing[b-ys126cd8sc] {
    display: flex;
    gap: 4px;
    padding: 10px 12px;
}

    .cml-bubble.typing i[b-ys126cd8sc] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #9aa4b1;
        animation: cml-dot-b-ys126cd8sc 1.2s infinite ease-in-out;
    }

        .cml-bubble.typing i:nth-child(2)[b-ys126cd8sc] {
            animation-delay: .15s;
        }

        .cml-bubble.typing i:nth-child(3)[b-ys126cd8sc] {
            animation-delay: .3s;
        }

@keyframes cml-dot-b-ys126cd8sc {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: .5;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* ─── ดูรูปเต็มจอ ─── */
.cml-zoom[b-ys126cd8sc] {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 22, .85);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
}

    .cml-zoom img[b-ys126cd8sc] {
        max-width: 100%;
        max-height: 100%;
        border-radius: 8px;
    }

.cml-zoom-x[b-ys126cd8sc] {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

/* [2026-10] บันทึกการโทร — กล่องขาวขอบเทา (ไม่ใช้สีฝั่งเรา) ; ไม่ได้คุย = ไอคอนแดง */
.cml-row .cml-bubble.call[b-ys126cd8sc] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    min-width: 170px;
}

.cml-call-ic[b-ys126cd8sc] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dcfce7;
    color: #15803d;
}

.cml-bubble.call.bad .cml-call-ic[b-ys126cd8sc] {
    background: #fee2e2;
    color: #dc2626;
}

.cml-call-info[b-ys126cd8sc] {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

    .cml-call-info b[b-ys126cd8sc] { font-weight: 600; font-size: 13.5px; }
    .cml-call-info span[b-ys126cd8sc] { font-size: 12.5px; color: #6b7280; }
/* /Components/M_Components/CustomerChat/CustomerChatWidget.razor.rz.scp.css */
/* หน้าต่างแชทหน้าร้าน — โทนตามสีหัวที่ตั้งไว้ (--head) ; มือถือเต็มจอ */
.ccw-win[b-qvwp275ygy] {
    --head: #1e4f8a;
    position: fixed;
    z-index: 9991;
    width: 370px;
    height: min(560px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    background: #f6f8fb;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(15, 30, 50, .25);
    overflow: hidden;
    font-family: 'IBM Plex Sans Thai', 'Sarabun', sans-serif;
    color: #1c2530;
    animation: ccw-in-b-qvwp275ygy .18s ease-out;
}

    .ccw-win.h-right[b-qvwp275ygy] { right: var(--x); }
    .ccw-win.h-left[b-qvwp275ygy] { left: var(--x); }
    .ccw-win.v-bottom[b-qvwp275ygy] { bottom: var(--y); }
    .ccw-win.v-top[b-qvwp275ygy] { top: var(--y); }

@keyframes ccw-in-b-qvwp275ygy {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
    .ccw-win[b-qvwp275ygy],
    .ccw-win.h-right[b-qvwp275ygy], .ccw-win.h-left[b-qvwp275ygy], .ccw-win.v-bottom[b-qvwp275ygy], .ccw-win.v-top[b-qvwp275ygy] {
        inset: 0;
        width: 100%;
        height: 100%;
        height: 100dvh;
        border-radius: 0;
        z-index: 9995;
    }
}

.ccw-head[b-qvwp275ygy] {
    background: var(--head);
    color: #fff;
    padding: 12px 12px 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.ccw-head-main[b-qvwp275ygy] { flex: 1 1 auto; min-width: 0; }

.ccw-title[b-qvwp275ygy] {
    font-weight: 700;
    font-size: 15.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ccw-status[b-qvwp275ygy] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    opacity: .92;
    margin-top: 2px;
}

    .ccw-status .dot[b-qvwp275ygy] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex: 0 0 8px;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
    }

        .ccw-status .dot.on[b-qvwp275ygy] { background: #22c55e; }
        .ccw-status .dot.away[b-qvwp275ygy] { background: #facc15; }
        .ccw-status .dot.off[b-qvwp275ygy] { background: #94a3b8; }

.ccw-close[b-qvwp275ygy] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 34px;
}

    .ccw-close:hover[b-qvwp275ygy] { background: rgba(255, 255, 255, .28); }

/* [2026-10] ปุ่มโทร / วิดีโอคอล บนหัวหน้าต่าง — โทรไม่ได้ = จางลง (ยังกดได้เพื่อดูเหตุผล) */
.ccw-call[b-qvwp275ygy] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 34px;
}

    .ccw-call:hover[b-qvwp275ygy] { background: rgba(255, 255, 255, .28); }
    .ccw-call.blocked[b-qvwp275ygy] { opacity: .45; }

.ccw-callmsg[b-qvwp275ygy] {
    background: #fff7ed;
    color: #9a3412;
    border-bottom: 1px solid #fed7aa;
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.45;
}

.ccw-body[b-qvwp275ygy] {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
}

.ccw-more[b-qvwp275ygy] {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

    .ccw-more button[b-qvwp275ygy] {
        border: 1px solid #dfe5ee;
        background: #fff;
        border-radius: 999px;
        padding: 4px 12px;
        font-size: 12px;
        color: #45505c;
        cursor: pointer;
        font-family: inherit;
    }

/* ─── ฟอร์มผู้เยี่ยมชม ─── */
.ccw-guest[b-qvwp275ygy] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ccw-welcome[b-qvwp275ygy] {
    background: #fff;
    border: 1px solid #e4e8ef;
    border-radius: 14px;
    padding: 10px 12px;
    line-height: 1.55;
    font-size: 14px;
    white-space: pre-wrap;
}

.ccw-offline[b-qvwp275ygy] {
    background: #fff6e8;
    color: #92400e;
    border: 1px solid #fde3b5;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.5;
}

.ccw-guest-hint[b-qvwp275ygy] {
    font-size: 12.5px;
    color: #5b6672;
    line-height: 1.5;
}

    .ccw-guest-hint a[b-qvwp275ygy] { color: var(--head); font-weight: 600; }

.ccw-field[b-qvwp275ygy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #33404d;
}

    .ccw-field b[b-qvwp275ygy] { color: #dc2626; }

    .ccw-field input[b-qvwp275ygy] {
        border: 1px solid #d5dce6;
        border-radius: 10px;
        padding: 9px 12px;
        font-size: 14px;
        font-family: inherit;
        background: #fff;
        outline: none;
    }

        .ccw-field input:focus[b-qvwp275ygy] { border-color: var(--head); }

.ccw-err[b-qvwp275ygy], .ccw-senderr[b-qvwp275ygy] {
    color: #b42318;
    font-size: 12.5px;
}

.ccw-senderr[b-qvwp275ygy] {
    padding: 0 12px 8px;
    background: #fff;
}

.ccw-start[b-qvwp275ygy] {
    margin-top: 4px;
    border: none;
    border-radius: 10px;
    background: var(--head);
    color: #fff;
    font-weight: 700;
    font-size: 14.5px;
    padding: 11px;
    cursor: pointer;
    font-family: inherit;
}

    .ccw-start:disabled[b-qvwp275ygy] { opacity: .6; cursor: default; }

/* ─── ช่องพิมพ์ ─── */
.ccw-compose[b-qvwp275ygy] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 10px;
    background: #fff;
    border-top: 1px solid #e4e8ef;
}

    .ccw-compose textarea[b-qvwp275ygy] {
        flex: 1 1 auto;
        min-width: 0;
        resize: none;
        border: 1px solid #d5dce6;
        border-radius: 18px;
        padding: 8px 12px;
        font-size: 14px;
        line-height: 1.4;
        max-height: 120px;
        font-family: inherit;
        outline: none;
        background: #f8fafc;
    }

        .ccw-compose textarea:focus[b-qvwp275ygy] { border-color: var(--head); background: #fff; }

.ccw-attach[b-qvwp275ygy] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5b6672;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .ccw-attach:hover[b-qvwp275ygy] { background: #eef2f7; color: var(--head); }

    .ccw-attach[b-qvwp275ygy]  input[type=file] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

.ccw-send[b-qvwp275ygy] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    border: none;
    background: var(--head);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .ccw-send:disabled[b-qvwp275ygy] { opacity: .45; cursor: default; }
/* /Components/M_Components/DateTimePicker.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   DateTimePicker — ปฏิทินเลือกวันที่ (modal)
   ════════════════════════════════════════════════════════════ */

.MineDTP-Overlay[b-o4wb30qe0t] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: MineDTPFade-b-o4wb30qe0t .14s ease;
}

@keyframes MineDTPFade-b-o4wb30qe0t { from { opacity: 0; } to { opacity: 1; } }

.MineDTP[b-o4wb30qe0t] {
    width: 340px;
    max-width: 100%;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 30px 70px -20px rgba(2, 6, 23, 0.5);
    overflow: hidden;
    animation: MineDTPPop-b-o4wb30qe0t .16s ease;
}

@keyframes MineDTPPop-b-o4wb30qe0t {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ── */
.MineDTP-Head[b-o4wb30qe0t] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 12px 12px 14px;
    background: #0B7A75;
    color: #fff;
}

.MineDTP-Title[b-o4wb30qe0t] {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    border: none;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-radius: 9px;
    padding: 4px 8px;
    cursor: pointer;
    font-family: inherit;
    transition: background .13s;
}

    .MineDTP-Title:hover[b-o4wb30qe0t] { background: rgba(255,255,255,0.2); }

/* ── Year picker grid ── */
.MineDTP-Years[b-o4wb30qe0t] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 16px 14px;
}

.MineDTP-YearItem[b-o4wb30qe0t] {
    height: 46px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    color: #33415c;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s, color .12s, border-color .12s;
}

    .MineDTP-YearItem:hover[b-o4wb30qe0t] {
        background: #E7F5F4;
        border-color: #B9E0DC;
    }

    .MineDTP-YearItem.IsToday[b-o4wb30qe0t] {
        border-color: #0B7A75;
        color: #095E5A;
    }

    .MineDTP-YearItem.IsSelected[b-o4wb30qe0t] {
        background: #0B7A75;
        border-color: transparent;
        color: #fff;
        box-shadow: 0 8px 16px -6px rgba(11,122,117,.6);
    }

.MineDTP-TMonth[b-o4wb30qe0t] { font-size: 15px; font-weight: 800; }
.MineDTP-TYear[b-o4wb30qe0t]  { font-size: 11px; opacity: .8; letter-spacing: 1px; }

.MineDTP-Nav[b-o4wb30qe0t] {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 9px;
    background: rgba(255,255,255,0.16);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .13s;
    flex-shrink: 0;
}

    .MineDTP-Nav:hover[b-o4wb30qe0t] { background: rgba(255,255,255,0.3); }

.MineDTP-Close[b-o4wb30qe0t] {
    width: 30px;
    height: 30px;
    margin-left: 2px;
    border: none;
    border-radius: 9px;
    background: rgba(255,255,255,0.10);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: background .13s;
    flex-shrink: 0;
}

    .MineDTP-Close:hover[b-o4wb30qe0t] { background: rgba(239, 68, 68, 0.9); }

/* ── Day grid ── */
.MineDTP-Grid[b-o4wb30qe0t] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    padding: 12px;
}

.MineDTP-Dow[b-o4wb30qe0t] {
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #94a3b8;
    padding: 4px 0 6px;
}

    .MineDTP-Dow.IsWeekend[b-o4wb30qe0t] { color: #ef7a7a; }

.MineDTP-Day[b-o4wb30qe0t] {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    color: #33415c;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

    .MineDTP-Day:hover[b-o4wb30qe0t] {
        background: #E7F5F4;
        border-color: #B9E0DC;
    }

    .MineDTP-Day.IsWeekend[b-o4wb30qe0t] { color: #d9534f; }
    .MineDTP-Day.IsOther[b-o4wb30qe0t]    { color: #c3cbd6; font-weight: 500; }

    .MineDTP-Day.IsToday[b-o4wb30qe0t] {
        border-color: #0B7A75;
        color: #095E5A;
    }

    .MineDTP-Day.IsSelected[b-o4wb30qe0t] {
        background: #0B7A75;
        border-color: transparent;
        color: #fff;
        box-shadow: 0 8px 16px -6px rgba(11,122,117,.6);
    }

/* ── Footer ── */
.MineDTP-Foot[b-o4wb30qe0t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #eef1f6;
    background: #f8fafc;
}

.MineDTP-Field[b-o4wb30qe0t] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #d8deea;
    border-radius: 9px;
    padding: 0 10px;
    height: 38px;
}

.MineDTP-FieldLabel[b-o4wb30qe0t] {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
}

.MineDTP-Field input[b-o4wb30qe0t] {
    flex: 1;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    color: #17233a;
    font-family: inherit;
    text-align: center;
    letter-spacing: .5px;
}

.MineDTP-TodayBtn[b-o4wb30qe0t] {
    height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 9px;
    background: #0B7A75;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .13s;
    flex-shrink: 0;
}

    .MineDTP-TodayBtn:hover[b-o4wb30qe0t] { background: #095E5A; }
/* /Components/M_Components/IdCard/IdCardPopup.razor.rz.scp.css */
.icp-overlay[b-lyhidbbxbs] {
    position: fixed;
    inset: 0;
    z-index: 60000; /* เหนือ POSModalOverlay (50000) + popup เพิ่มลูกค้าในหน้าขาย */
    background: rgba(15, 23, 32, .55);
    backdrop-filter: blur(2px);
    display: grid;
    place-items: center;
    padding: 16px;
}

.icp-dlg[b-lyhidbbxbs] {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
    color: #1f2937;
    font-size: 13.5px;
    overflow: hidden;
}

    .icp-dlg.icp-wide[b-lyhidbbxbs] { max-width: 760px; }

.icp-head[b-lyhidbbxbs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #eef2f6;
    font-size: 15px;
    font-weight: 600;
}

.icp-x[b-lyhidbbxbs] { cursor: pointer; font-size: 20px; line-height: 1; color: #94a3b8; }

.icp-body[b-lyhidbbxbs] {
    padding: 14px 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.icp-msg[b-lyhidbbxbs] { white-space: pre-line; line-height: 1.6; }

.icp-warn[b-lyhidbbxbs] {
    padding: 8px 12px;
    border-radius: 8px;
    background: #fff4e5;
    border: 1px solid #f3d3a8;
    color: #8a4b08;
    white-space: pre-line;
}

.icp-card[b-lyhidbbxbs] {
    display: flex;
    gap: 14px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.icp-photo[b-lyhidbbxbs] {
    flex: 0 0 96px;
    height: 120px;
    border-radius: 8px;
    background: #e5e7eb;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 12px;
}

    .icp-photo img[b-lyhidbbxbs] { width: 100%; height: 100%; object-fit: cover; }

.icp-photo-sm[b-lyhidbbxbs] { flex: 0 0 48px; height: 60px; }

.icp-fields[b-lyhidbbxbs] { flex: 1 1 auto; min-width: 0; }

.icp-name[b-lyhidbbxbs] { font-size: 16px; font-weight: 600; }

.icp-sub[b-lyhidbbxbs] { color: #64748b; font-size: 12.5px; margin-top: 2px; }

.icp-mono[b-lyhidbbxbs] { font-family: "IBM Plex Mono", ui-monospace, monospace; }

.icp-grid[b-lyhidbbxbs] {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 4px 10px;
    margin-top: 10px;
}

.icp-k[b-lyhidbbxbs] { color: #64748b; }

.icp-v[b-lyhidbbxbs] { min-width: 0; overflow-wrap: anywhere; }

.icp-cmp-head[b-lyhidbbxbs] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icp-cmp-all[b-lyhidbbxbs] { margin-left: auto; font-size: 12.5px; color: #475569; }
    .icp-cmp-all label[b-lyhidbbxbs] { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }

.icp-table[b-lyhidbbxbs] {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.icp-tr[b-lyhidbbxbs] {
    display: grid;
    grid-template-columns: 32px 130px 1fr 1fr;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border-top: 1px solid #eef2f6;
    cursor: pointer;
    margin: 0;
    font-weight: 400;
}

    .icp-tr:first-child[b-lyhidbbxbs] { border-top: none; }
    .icp-tr.on[b-lyhidbbxbs] { background: #f0faf9; }

.icp-th[b-lyhidbbxbs] {
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    cursor: default;
}

.icp-old[b-lyhidbbxbs] { color: #a4231f; text-decoration: line-through; text-decoration-color: rgba(164, 35, 31, .45); }
.icp-new[b-lyhidbbxbs] { color: #0B7A75; font-weight: 600; }
.icp-none[b-lyhidbbxbs] { color: #94a3b8; }

.icp-thumb[b-lyhidbbxbs] { width: 44px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid #e2e8f0; }

.icp-matches[b-lyhidbbxbs] { display: flex; flex-direction: column; gap: 8px; }

.icp-match[b-lyhidbbxbs] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

    .icp-match:hover[b-lyhidbbxbs] { border-color: #0B7A75; background: #f0faf9; }

.icp-match-name[b-lyhidbbxbs] { font-weight: 600; }
.icp-match-sub[b-lyhidbbxbs] { color: #64748b; font-size: 12px; }

.icp-foot[b-lyhidbbxbs] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 18px 16px 18px;
    border-top: 1px solid #eef2f6;
}

    .icp-foot:empty[b-lyhidbbxbs] { display: none; }

    .icp-foot[b-lyhidbbxbs]  .icp-btn {
        display: inline-flex;
        align-items: center;
        height: 36px;
        padding: 0 16px;
        border-radius: 8px;
        border: 1px solid #cbd5e1;
        background: #fff;
        color: #334155;
        font-size: 13.5px;
        font-family: inherit;
        cursor: pointer;
    }

        .icp-foot[b-lyhidbbxbs]  .icp-btn:disabled { opacity: .55; cursor: default; }

    .icp-foot[b-lyhidbbxbs]  .icp-btn-primary { background: #0B7A75; border-color: #0B7A75; color: #fff; }
        .icp-foot[b-lyhidbbxbs]  .icp-btn-primary:hover:not(:disabled) { background: #095E5A; }

    .icp-foot[b-lyhidbbxbs]  .icp-btn-warn { background: #fff; border-color: #f3d3a8; color: #9a5b0f; }

@media (max-width: 600px) {
    .icp-card[b-lyhidbbxbs] { flex-direction: column; }
    .icp-tr[b-lyhidbbxbs] { grid-template-columns: 28px 1fr; }
        .icp-tr > :nth-child(3)[b-lyhidbbxbs], .icp-tr > :nth-child(4)[b-lyhidbbxbs] { grid-column: 2; }
    .icp-th[b-lyhidbbxbs] { display: none; }
}
/* /Components/M_Components/IdCard/IdCardReaderStatus.razor.rz.scp.css */
.ic-wrap[b-722h4k43st] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ic-chip[b-722h4k43st] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px 0 8px;
    border: 1px solid #d9e1ea;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, background .15s;
}

    .ic-chip:hover[b-722h4k43st] { border-color: #9fb3c8; background: #f8fafc; }

.ic-card[b-722h4k43st] { display: inline-flex; color: currentColor; }

.ic-dot[b-722h4k43st] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
    flex: 0 0 8px;
}

.ic-text[b-722h4k43st] { line-height: 1; }

/* สถานะ: เขียว = พร้อม / ฟ้า = มีบัตร·กำลังอ่าน / ส้ม = ต้องแก้ที่เครื่อง / เทา = ไม่พบ agent */
.ic-ready .ic-dot[b-722h4k43st] { background: #16a34a; }
.ic-ready[b-722h4k43st] { color: #166534; border-color: #bbe5c8; }
.ic-card-present .ic-dot[b-722h4k43st], .ic-reading .ic-dot[b-722h4k43st] { background: #0B7A75; }
.ic-card-present[b-722h4k43st], .ic-reading[b-722h4k43st] { color: #0B7A75; border-color: #B9E0DC; }
.ic-reading .ic-dot[b-722h4k43st] { animation: ic-pulse-b-722h4k43st 0.9s ease-in-out infinite; }
.ic-no-reader .ic-dot[b-722h4k43st], .ic-not-paired .ic-dot[b-722h4k43st], .ic-agent-too-old .ic-dot[b-722h4k43st], .ic-service-error .ic-dot[b-722h4k43st] { background: #ea8a1a; }
.ic-no-reader[b-722h4k43st], .ic-not-paired[b-722h4k43st], .ic-agent-too-old[b-722h4k43st], .ic-service-error[b-722h4k43st] { color: #9a5b0f; border-color: #f3d3a8; }
.ic-connecting .ic-dot[b-722h4k43st] { animation: ic-pulse-b-722h4k43st 1.2s ease-in-out infinite; }

@keyframes ic-pulse-b-722h4k43st {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

.ic-pop[b-722h4k43st] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 900;
    width: 300px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
    font-size: 13px;
    color: #1f2937;
    text-align: left;
}

.ic-pop-head[b-722h4k43st] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #eef2f6;
    font-weight: 600;
}

.ic-x[b-722h4k43st] { cursor: pointer; font-size: 18px; color: #94a3b8; line-height: 1; }

.ic-pop-body[b-722h4k43st] { padding: 10px 14px; line-height: 1.55; }
    .ic-pop-body p[b-722h4k43st] { margin: 6px 0; }

.ic-pop-status[b-722h4k43st] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    background: none;
    border: none;
}

.ic-hint[b-722h4k43st] { color: #64748b; font-size: 12px; }

.ic-err[b-722h4k43st] {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fdecea;
    color: #a4231f;
    font-size: 12.5px;
}

.ic-pop-foot[b-722h4k43st] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 14px 12px 14px;
}

    .ic-pop-foot:empty[b-722h4k43st] { display: none; }

.ic-btn[b-722h4k43st] {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #B9E0DC;
    background: #fff;
    color: #0B7A75;
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}

    .ic-btn:disabled[b-722h4k43st] { opacity: .55; cursor: default; }

.ic-btn-primary[b-722h4k43st] { background: #0B7A75; border-color: #0B7A75; color: #fff; }
    .ic-btn-primary:hover:not(:disabled)[b-722h4k43st] { background: #095E5A; }
/* /Components/M_Components/MineDateInput.razor.rz.scp.css */
.MineDateInput[b-3z1n2p2rkx] {
    position: relative;
    display: inline-block;
}

.MineDateInput-Trigger[b-3z1n2p2rkx] {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid #d8deea;
    border-radius: 9px;
    background: #fff;
    color: #17233a;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

    .MineDateInput-Trigger:hover[b-3z1n2p2rkx] { border-color: #b9c4d8; }

.MineDateInput.IsOpen .MineDateInput-Trigger[b-3z1n2p2rkx] {
    border-color: #2f6fd0;
    box-shadow: 0 0 0 3px rgba(47,111,208,0.15);
}

.MineDateInput-Icon[b-3z1n2p2rkx] {
    display: flex;
    align-items: center;
    color: #6b7688;
    flex-shrink: 0;
}

.MineDateInput-Text.IsPlaceholder[b-3z1n2p2rkx] {
    color: #98a2b3;
    font-weight: 500;
}

.MineDateInput-Clear[b-3z1n2p2rkx] {
    margin-left: 2px;
    color: #98a2b3;
    font-size: 11px;
    line-height: 1;
    padding: 3px;
    border-radius: 50%;
}

    .MineDateInput-Clear:hover[b-3z1n2p2rkx] {
        background: #f0f2f6;
        color: #e5484d;
    }

.MineDateInput-Backdrop[b-3z1n2p2rkx] {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: transparent;
}

.MineDateInput-Pop[b-3z1n2p2rkx] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 61;
    background: #fff;
    border: 1px solid #e2e7f0;
    border-radius: 12px;
    box-shadow: 0 20px 44px -14px rgba(23,45,80,0.4);
    padding: 6px;
    animation: MineDateInputIn-b-3z1n2p2rkx .13s ease;
}

@keyframes MineDateInputIn-b-3z1n2p2rkx {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Components/M_Components/MineDropdown.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   MineDropdown — dropdown ที่ทำเอง จัดสไตล์ได้เต็มที่ (แทน <select> native)
   ปิดเมื่อคลิกนอกกล่อง ด้วย backdrop โปร่งใสเต็มจอ
   ════════════════════════════════════════════════════════════ */

.MineDropdown[b-zuhj7kbo48] {
    position: relative;
    display: inline-block;
    min-width: 150px;
    font-size: 13.5px;
}

.MineDropdown-Trigger[b-zuhj7kbo48] {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid #d8deea;
    border-radius: 9px;
    background: #fff;
    color: #17233a;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

    .MineDropdown-Trigger:hover[b-zuhj7kbo48] {
        border-color: #b9c4d8;
    }

.MineDropdown.IsOpen .MineDropdown-Trigger[b-zuhj7kbo48] {
    border-color: #2f6fd0;
    box-shadow: 0 0 0 3px rgba(47,111,208,0.15);
}

.MineDropdown.IsDisabled[b-zuhj7kbo48] {
    opacity: 0.55;
    pointer-events: none;
}

.MineDropdown-Text[b-zuhj7kbo48] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .MineDropdown-Text.IsPlaceholder[b-zuhj7kbo48] {
        color: #98a2b3;
        font-weight: 500;
    }

.MineDropdown-Chevron[b-zuhj7kbo48] {
    display: flex;
    align-items: center;
    color: #6b7688;
    flex-shrink: 0;
    transition: transform .18s ease;
}

.MineDropdown.IsOpen .MineDropdown-Chevron[b-zuhj7kbo48] {
    transform: rotate(180deg);
}

/* backdrop โปร่งใส — คลิกที่ไหนก็ปิด */
.MineDropdown-Backdrop[b-zuhj7kbo48] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.MineDropdown-Menu[b-zuhj7kbo48] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 100%;
    z-index: 41;
    background: #fff;
    border: 1px solid #e2e7f0;
    border-radius: 10px;
    box-shadow: 0 16px 36px -12px rgba(23,45,80,0.35);
    padding: 5px;
    max-height: 280px;
    overflow-y: auto;
    animation: MineDropdownIn-b-zuhj7kbo48 .13s ease;
}

@keyframes MineDropdownIn-b-zuhj7kbo48 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.MineDropdown-Option[b-zuhj7kbo48] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    color: #33415c;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, color .12s;
    white-space: nowrap;
}

    .MineDropdown-Option:hover[b-zuhj7kbo48] {
        background: #f2f5fa;
        color: #17233a;
    }

    .MineDropdown-Option.IsSelected[b-zuhj7kbo48] {
        background: color-mix(in srgb, #2f6fd0 10%, #fff);
        color: #1c4f97;
    }

.MineDropdown-Check[b-zuhj7kbo48] {
    display: flex;
    align-items: center;
    color: #2f6fd0;
    flex-shrink: 0;
}

.MineDropdown-Menu[b-zuhj7kbo48]::-webkit-scrollbar { width: 6px; }
.MineDropdown-Menu[b-zuhj7kbo48]::-webkit-scrollbar-thumb { background: #d3dae6; border-radius: 6px; }

@media (max-width: 560px) {
    .MineDropdown[b-zuhj7kbo48] {
        display: block;
        width: 100%;
    }
}
/* /Components/M_Components/MinemelodyDataTable.razor.rz.scp.css */
.MainAllProducts[b-ucki68956q] {
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.ConfirmOrCancelDeleteCustomerButton[b-ucki68956q] {
    background: #be0202;
    width: fit-content;
    padding: 5px 20px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}

.CancelColor[b-ucki68956q] {
    background: #1d2327;
}

.MenuBoxCss[b-ucki68956q] {
    font-size: 15px;
    padding: 0px 10px 0px 10px;
    border: solid 1px #2271b1;
    color: #2271b1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    transition: 0.2s;
    cursor: pointer;
    user-select: none;
    height: 35px;
}

.Row[b-ucki68956q] {
    font-size: 13px;
}

    .Row .User[b-ucki68956q] {
        font-size: 15px;
        cursor: pointer;
        color: #2271b1;
    }

    .Row .Edit[b-ucki68956q] {
        font-size: 13px;
        cursor: pointer;
        color: #2271b1;
    }

    .Row .Slash[b-ucki68956q] {
        font-size: 16px;
    }

    .Row .Delete[b-ucki68956q] {
        color: #be0202;
        cursor: pointer;
    }

.MenuBoxCss:hover[b-ucki68956q] {
    filter: brightness(0.5);
}

.ProductsMenu[b-ucki68956q] {
    display: flex;
    align-items: center;
}

    .ProductsMenu .MenuName[b-ucki68956q] {
        font-size: 25px;
    }

    .ProductsMenu .Per[b-ucki68956q] {
        margin-left: 5px;
    }

.AllProductsStatusZone[b-ucki68956q] {
    display: flex;
    font-size: 15px;
    color: #2271b1;
    margin-top: 10px;
}

    .AllProductsStatusZone .Space[b-ucki68956q] {
        margin-right: 5px;
        margin-left: 5px;
        color: black;
    }

.CommandSelect[b-ucki68956q] {
    font-size: 15px;
    height: 35px;
    display: flex;
    align-items: center;
    border-radius: 5px;
}

.PageButtonCss[b-ucki68956q] {
    font-size: 15px;
    padding: 0px 5px 0px 5px;
    border: solid 1px #2271b1;
    color: #2271b1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    transition: 0.2s;
    cursor: pointer;
    user-select: none;
    height: 25px;
    width: 25px;
    font-size: 10px;
}

    .PageButtonCss:hover[b-ucki68956q] {
        filter: brightness(0.5);
    }

.PageInputCss[b-ucki68956q] {
    width: 40px;
    border-radius: 5px;
    outline: none;
    border: solid 1px rgba(0,0,0,0.5);
    text-align: center;
    height: 25px;
}

.SetItCenter[b-ucki68956q] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.TableContainer[b-ucki68956q] {
    margin-top: 10px;
    max-height: calc(100vh - 220px);
    overflow-y: scroll;
}

.TableShowDataList[b-ucki68956q] {
    table-layout: fixed;
    width: 100%;
    background: #ffffff;
    margin-bottom: 10px;
}

    .TableShowDataList thead[b-ucki68956q] {
    }

        .TableShowDataList thead tr th[b-ucki68956q] {
            font-weight: normal;
            color: #2271b1;
            height: 40px;
            vertical-align: middle;
            cursor: pointer;
            user-select: none;
            position: sticky;
            top: 0;
            z-index: 2;
            background: #ffffff;
        }

    .TableShowDataList tbody[b-ucki68956q] {
    }

        .TableShowDataList tbody tr td[b-ucki68956q] {
            height: 57px;
            word-break: break-all;
        }

            .TableShowDataList tbody tr td img[b-ucki68956q] {
                max-width: 40px;
                max-height: 40px;
            }

    .TableShowDataList input[b-ucki68956q] {
        width: 17px;
        height: 17px;
    }

    .TableShowDataList tfoot[b-ucki68956q] {
        border: solid 1px #c3c4c7;
    }

        .TableShowDataList tfoot tr th[b-ucki68956q] {
            font-weight: normal;
            color: #2271b1;
            height: 40px;
            vertical-align: middle;
            cursor: pointer;
            user-select: none;
        }

.IconDesc[b-ucki68956q]::after {
    font-family: dashicons;
    content: "\f140";
    color: #a7aaad;
    font-size: 18px;
    margin-left: -2px;
}

.IconAsc[b-ucki68956q]::after {
    font-family: dashicons;
    content: "\f142";
    color: #a7aaad;
    font-size: 18px;
    margin-left: -2px;
}

@media (max-width: 768px) {
}
/* /Components/M_Components/MinemelodyDataTableColumn.razor.rz.scp.css */
body[b-2w9hzgoyjg] {
}
/* /Components/M_Components/ModernToggle.razor.rz.scp.css */
.Main[b-zhwy1mxqrr] {
    position: relative;
    background: #d1d5db;
    height: 22px;
    width: 42px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    cursor: pointer;
    padding: 0 3px;
    box-sizing: border-box;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
    user-select: none;
    flex-shrink: 0;
}

    .Main:hover[b-zhwy1mxqrr] {
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(37, 152, 243, 0.15);
    }

    .Main.Active[b-zhwy1mxqrr] {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(37, 99, 235, 0.4);
    }

    .Main.Active:hover[b-zhwy1mxqrr] {
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(37, 99, 235, 0.5), 0 0 0 3px rgba(37, 99, 235, 0.2);
    }

    .Main.Disabled[b-zhwy1mxqrr] {
        cursor: not-allowed;
        opacity: 0.55;
        filter: grayscale(0.3);
    }

        .Main.Disabled:hover[b-zhwy1mxqrr] {
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
        }

        .Main.Disabled.Active:hover[b-zhwy1mxqrr] {
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(37, 99, 235, 0.4);
        }

.CircleShow[b-zhwy1mxqrr] {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.1);
    transform: translateX(0px);
    flex-shrink: 0;
}

    .CircleShow.Active[b-zhwy1mxqrr] {
        transform: translateX(20px);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.1);
    }
/* /Components/M_Components/M_Input/M_InputSelectValidate.razor.rz.scp.css */
/* /Components/M_Components/M_Input/M_InputTextarea.razor.rz.scp.css */
/* /Components/M_Components/M_Input/M_InputValidate.razor.rz.scp.css */
.InputCss[b-33d2z1loev] {
    padding: 10px;
    width: 100%;
    font-size: 14px;
    height: 38px;
    border: none;
    outline: 1px solid rgba(0,0,0,.14);
}


.PlaceHeader[b-33d2z1loev] {
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 12px;
    background: white;
    padding: 0 5px;
}

.ValidateFail[b-33d2z1loev] {
    color: red;
}

.AddressInputText[b-33d2z1loev] {
    padding: 10px;
    width: 100%;
    font-size: 14px;
    height: 38px;
    border: none;
    outline: 1px solid rgba(0,0,0,.14);
}
/* /Components/M_Components/M_Input/ValidateType/M_InputValidatePhone.razor.rz.scp.css */
.InputCss[b-6bsprw1vm1] {
    padding: 10px;
    width: 100%;
    font-size: 14px;
    height: 38px;
    border: none;
    outline: 1px solid rgba(0,0,0,.14);
}


.PlaceHeader[b-6bsprw1vm1] {
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 12px;
    background: white;
    padding: 0 5px;
}

.ValidateFail[b-6bsprw1vm1] {
    color: red;
}

.AddressInputText[b-6bsprw1vm1] {
    padding: 10px;
    width: 100%;
    font-size: 14px;
    height: 38px;
    border: none;
    outline: 1px solid rgba(0,0,0,.14);
}
/* /Components/M_Components/SlideComponent.razor.rz.scp.css */
.main-div-slide[b-3w3eko2rcr] {
    width: 100%;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
}

.slide-track[b-3w3eko2rcr] {
    display: flex;
    gap: var(--gap, 0px);
    will-change: transform;
    animation: scroll-x-b-3w3eko2rcr var(--duration, 20s) linear infinite;
}

/* หยุดเมื่อโฮเวอร์ (ถ้าตั้งค่าไว้) */
.pause-on-hover .slide-track:hover[b-3w3eko2rcr] {
    animation-play-state: paused;
}

/* ความกว้างต่อชิ้นอิง container (คำนวณด้วย JS -> --item-width) */
.slide-track > *[b-3w3eko2rcr] {
    flex: 0 0 var(--item-width);
    min-width: var(--item-width);
    box-sizing: border-box;
}

@keyframes scroll-x-b-3w3eko2rcr {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
    /* ครึ่งหนึ่งของ track = ยาวเท่าชุดแรก */
}
/* /Components/Pages/BackEnd/Alert_Popup/AcceptOnly.razor.rz.scp.css */
.AcceptOnlyMain[b-72di8mcxww] {
    position: fixed;
    top: 0;
    left: 0;
    color: black;
    z-index: 999999;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0, 0.50);
    user-select: none;
}

.DivMainBox[b-72di8mcxww] {
    height: fit-content;
    width: auto;
    background: white;
    padding: 10px 20px;
    min-width: 200px;
    flex-direction: column;
    border-radius: 5px;
}

.AcceptButton[b-72di8mcxww] {
    margin-top: 10px;
    cursor: pointer;
    padding: 5px 10px;
    background: #1d2327;
    color: white;
}
/* /Components/Pages/BackEnd/Alert_Popup/AskForDeleteOrConfirm.razor.rz.scp.css */
.AC-Overlay[b-wflhza4s6r] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 32, 0.55);
    backdrop-filter: blur(2px);
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 16px;
    animation: AC-FadeIn-b-wflhza4s6r .15s ease-out;
}

@keyframes AC-FadeIn-b-wflhza4s6r {
    from { opacity: 0; }
    to { opacity: 1; }
}

.AC-Card[b-wflhza4s6r] {
    background: #fff;
    border-radius: 14px;
    padding: 26px 28px 22px 28px;
    width: 100%;
    max-width: 380px;
    text-align: center;
    user-select: none;
    box-shadow: 0 20px 50px rgba(0,0,0,0.28);
    animation: AC-PopIn-b-wflhza4s6r .18s cubic-bezier(.2,.9,.3,1.1);
}

@keyframes AC-PopIn-b-wflhza4s6r {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.AC-Icon[b-wflhza4s6r] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fdecea;
    color: #d64545;
    font-weight: 700;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px auto;
}

.AC-Text[b-wflhza4s6r] {
    font-size: 15px;
    color: #1f2937;
    line-height: 1.55;
}

.AC-Buttons[b-wflhza4s6r] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.AC-Btn[b-wflhza4s6r] {
    min-width: 96px;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
}

    .AC-Btn:hover[b-wflhza4s6r] {
        opacity: .9;
    }

    .AC-Btn:active[b-wflhza4s6r] {
        transform: scale(.97);
    }

.AC-BtnCancel[b-wflhza4s6r] {
    background: #eef1f3;
    color: #3b4653;
}

.AC-BtnConfirm[b-wflhza4s6r] {
    background: #0B7A75;
    color: #fff;
}

@media (max-width: 420px) {
    .AC-Buttons[b-wflhza4s6r] {
        flex-direction: column-reverse;
    }

    .AC-Btn[b-wflhza4s6r] {
        width: 100%;
    }
}
/* /Components/Pages/BackEnd/BackEndMain.razor.rz.scp.css */
/* /Components/Pages/BackEnd/Blogs/BlogsAllList.razor.rz.scp.css */
/* [2026-10] รายการบทความ — โครง/สีหลักมาจาก wwwroot/css/minelist.css (MineListShell)
   ไฟล์นี้มีเฉพาะส่วนเสริมของบทความ (ป้ายสถานะ, รูปหลักในแผงรายละเอียด, พรีวิวเนื้อหา) */

.pl-badge.bl-badge-pub[b-ynbbh98om3] {
    background: #e7f6ec;
    color: #15803d;
}

.pl-badge.bl-badge-draft[b-ynbbh98om3] {
    background: #eef1f6;
    color: #475569;
}

.bl-muted[b-ynbbh98om3] {
    color: #8A94A6;
    font-size: 13px;
}

.bl-warn[b-ynbbh98om3] {
    color: #b45309;
}

.bl-warnbox[b-ynbbh98om3] {
    margin: 10px 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 13px;
}

.bl-cover[b-ynbbh98om3] {
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    border: 1px solid #E4E9F0;
    background: repeating-linear-gradient(135deg, #f6f7f9 0 7px, #eef0f4 7px 14px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #8A94A6;
    font-size: 13px;
    margin-bottom: 12px;
}

    .bl-cover img[b-ynbbh98om3] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* พรีวิวเนื้อหา — HTML จริงของบทความ (สไตล์ mbd-* มากับเนื้อหาเอง) ย่อให้พอดีแผง */
.bl-preview[b-ynbbh98om3] {
    border: 1px solid #E4E9F0;
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    font-size: 13px;
    overflow-x: hidden;
    word-break: break-word;
}

    .bl-preview[b-ynbbh98om3]  img {
        max-width: 100%;
        height: auto;
    }
/* /Components/Pages/BackEnd/Blogs/BlogsManage.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   BlogsManage.razor.css — เพิ่ม/แก้ไขบทความ [2026-10]
   โครงเดียวกับ ProductDetail / DataCustomer : พื้น #f7f8fa เต็มพื้นที่ .ShowZone (flex — ห้ามใช้ calc(100vw - เมนู))
   แถบบนขาว sticky (top: --be-top-h) · เนื้อหา max 1560 กึ่งกลาง · การ์ด #fff r14 · accent teal #0B7A75
   ห้ามใส่ overflow:hidden ที่ .BM — แถบบน sticky จะไม่ติด
   ══════════════════════════════════════════════════════════════════════════════ */

.BM[b-zvcsexphuf], .BMLoad[b-zvcsexphuf] {
    font-family: 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
}

    .BM input[b-zvcsexphuf], .BM button[b-zvcsexphuf], .BM textarea[b-zvcsexphuf] {
        font-family: inherit;
    }

.BM[b-zvcsexphuf] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 100%;
    background: #f7f8fa;
    color: #1b2333;
    font-size: 13px;
}

.BMLoad[b-zvcsexphuf] {
    flex: 1 1 auto;
    text-align: center;
    padding: 80px 16px;
    color: #94a3b8;
    font-size: 15px;
}

/* ─────────── แถบบน ─────────── */
.BMTopbar[b-zvcsexphuf] {
    position: sticky;
    top: var(--be-top-h, 0px);
    z-index: 30;
    background: #fff;
    border-bottom: 1px solid #e4e8ef;
    padding: 9px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.BMTopMain[b-zvcsexphuf] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.BMBack[b-zvcsexphuf] {
    width: 29px;
    height: 29px;
    flex: none;
    border-radius: 8px;
    border: 1px solid #e0e5ee;
    background: #fff;
    color: #5c6675;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

    .BMBack:hover[b-zvcsexphuf] {
        background: #f4f6fa;
        border-color: #c9d2e0;
    }

.BMTitleBlock[b-zvcsexphuf] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.BMCrumb[b-zvcsexphuf] {
    font-size: 11px;
    color: #8d95a3;
}

.BMTitle[b-zvcsexphuf] {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.BMTopActions[b-zvcsexphuf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.BMTagRow[b-zvcsexphuf] {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 41px;
}

.BMBadge[b-zvcsexphuf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #bbf7d0;
}

    .BMBadge.Draft[b-zvcsexphuf] {
        background: #f1f5f9;
        color: #475569;
        border-color: #e2e8f0;
    }

.BMBadgeDot[b-zvcsexphuf] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
}

.BMBadge.Draft .BMBadgeDot[b-zvcsexphuf] {
    background: #94a3b8;
}

.BMChip[b-zvcsexphuf] {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    background: #f6f7f9;
    border: 1px solid #e7ebf1;
    padding: 4px 9px;
    border-radius: 6px;
}

    .BMChip.Dirty[b-zvcsexphuf] {
        color: #b45309;
        background: #fffbeb;
        border-color: #fde68a;
    }

/* ─────────── ปุ่ม ─────────── */
.BMBtn[b-zvcsexphuf] {
    height: 32px;
    padding: 0 12px;
    border-radius: 7px;
    border: 1px solid #e0e5ee;
    background: #fff;
    color: #424d5e;
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .BMBtn:hover[b-zvcsexphuf] {
        background: #f4f6fa;
        border-color: #c9d2e0;
    }

    .BMBtn:disabled[b-zvcsexphuf] {
        opacity: .5;
        cursor: not-allowed;
    }

    .BMBtn.Primary[b-zvcsexphuf] {
        border-color: #0B7A75;
        background: #0B7A75;
        color: #fff;
        font-weight: 600;
        padding: 0 17px;
    }

        .BMBtn.Primary:hover:not(:disabled)[b-zvcsexphuf] {
            background: #095E5A;
        }

    .BMBtn.Publish[b-zvcsexphuf] {
        border-color: #bbf7d0;
        background: #ecfdf5;
        color: #047857;
        font-weight: 600;
    }

        .BMBtn.Publish:hover:not(:disabled)[b-zvcsexphuf] {
            background: #d1fae5;
        }

    .BMBtn.Danger[b-zvcsexphuf] {
        border-color: #f5cfcb;
        color: #a4231f;
    }

        .BMBtn.Danger:hover:not(:disabled)[b-zvcsexphuf] {
            background: #fdf4f3;
        }

    .BMBtn.Small[b-zvcsexphuf] {
        height: 28px;
        padding: 0 10px;
        font-size: 11.5px;
    }

.BMFlex1[b-zvcsexphuf] {
    flex: 1;
}

.BMBtnRow[b-zvcsexphuf] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.BMDesignBtn[b-zvcsexphuf] {
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #0B7A75;
    background: #e4f3f2;
    color: #095E5A;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

    .BMDesignBtn:hover:not(:disabled)[b-zvcsexphuf] {
        background: #d2ecea;
    }

    .BMDesignBtn:disabled[b-zvcsexphuf] {
        opacity: .5;
        cursor: not-allowed;
    }

/* ─────────── แจ้งเตือน ─────────── */
.BMAlert[b-zvcsexphuf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: pre-line;
}

    .BMAlert.Ok[b-zvcsexphuf] {
        background: #ecfdf5;
        color: #047857;
    }

    .BMAlert.Err[b-zvcsexphuf] {
        background: #fef2f2;
        color: #dc2626;
    }

.BMAlertX[b-zvcsexphuf] {
    cursor: pointer;
    font-size: 17px;
}

.BMInlineErr[b-zvcsexphuf] {
    padding: 8px 12px;
    border-radius: 8px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 12.5px;
}

/* ─────────── เนื้อหา ─────────── */
.BMBody[b-zvcsexphuf] {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 14px 16px 26px;
    box-sizing: border-box;
}

.BMGrid[b-zvcsexphuf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 14px;
    align-items: start;
}

.BMCol[b-zvcsexphuf] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.BMSide[b-zvcsexphuf] {
    position: sticky;
    top: calc(var(--be-top-h, 0px) + 96px);
}

@media (max-width: 1100px) {
    .BMGrid[b-zvcsexphuf] {
        grid-template-columns: minmax(0, 1fr);
    }

    .BMSide[b-zvcsexphuf] {
        position: static;
    }
}

@media (max-width: 760px) {
    .BMTagRow[b-zvcsexphuf] {
        padding-left: 0;
    }
}

.BMCard[b-zvcsexphuf] {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #edeff3;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
    overflow: hidden;
}

.BMCardHead[b-zvcsexphuf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 15px;
    border-bottom: 1px solid #f1f3f7;
    font-size: 12.5px;
    font-weight: 800;
    color: #1e293b;
}

.BMCardHeadSub[b-zvcsexphuf] {
    font-size: 10.5px;
    font-weight: 400;
    color: #94a3b8;
}

.BMCardBody[b-zvcsexphuf] {
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.BMGate[b-zvcsexphuf] {
    max-width: 560px;
    margin: 24px auto 0;
}

.BMGateNext[b-zvcsexphuf] {
    font-size: 12px;
    color: #64748b;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
}

.BMField label[b-zvcsexphuf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
    font-weight: 600;
}

.BMInput[b-zvcsexphuf] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dfe4ec;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    outline: none;
}

    .BMInput:focus[b-zvcsexphuf] {
        border-color: #0B7A75;
        box-shadow: 0 0 0 3px rgba(11,122,117,.12);
    }

    .BMInput:disabled[b-zvcsexphuf] {
        background: #f6f7f9;
        color: #64748b;
    }

.BMTextarea[b-zvcsexphuf] {
    min-height: 84px;
    resize: vertical;
    line-height: 1.5;
}

.BMInline[b-zvcsexphuf] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.BMHint[b-zvcsexphuf] {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}

.BMCounter[b-zvcsexphuf] {
    font-weight: 400;
    color: #94a3b8;
}

    .BMCounter.Over[b-zvcsexphuf] {
        color: #dc2626;
        font-weight: 700;
    }

/* ─────────── เนื้อหา: ว่าง / พรีวิว ─────────── */
.BMEmpty[b-zvcsexphuf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 34px 16px;
    border: 1px dashed #d8dee8;
    border-radius: 12px;
    background: #fbfcfd;
}

.BMEmptyIco[b-zvcsexphuf] {
    font-size: 26px;
}

.BMEmptyTitle[b-zvcsexphuf] {
    font-size: 14px;
    font-weight: 800;
}

.BMEmptySub[b-zvcsexphuf] {
    font-size: 12px;
    color: #64748b;
    max-width: 440px;
    margin-bottom: 6px;
}

.BMPreview[b-zvcsexphuf] {
    border: 1px solid #edeff3;
    border-radius: 12px;
    padding: 16px;
    max-height: 620px;
    overflow: auto;
    word-break: break-word;
}

    .BMPreview[b-zvcsexphuf]  img {
        max-width: 100%;
        height: auto;
    }

/* ─────────── รูปหลัก ─────────── */
.BMCover[b-zvcsexphuf] {
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    border: 1px solid #e7ebf1;
    background: repeating-linear-gradient(135deg, #f6f7f9 0 7px, #eef0f4 7px 14px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #94a3b8;
    font-size: 12px;
}

    .BMCover.Click[b-zvcsexphuf] {
        cursor: pointer;
    }

        .BMCover.Click:hover[b-zvcsexphuf] {
            border-color: #0B7A75;
        }

    .BMCover img[b-zvcsexphuf] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* ─────────── ความพร้อมเผยแพร่ ─────────── */
.BMCheck[b-zvcsexphuf] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
}

.BMCheckIco[b-zvcsexphuf] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex: none;
}

.BMCheck.Ok .BMCheckIco[b-zvcsexphuf] {
    background: #dcfce7;
    color: #15803d;
}

.BMCheck.Bad .BMCheckIco[b-zvcsexphuf] {
    background: #fee2e2;
    color: #dc2626;
}

.BMCheck.Warn .BMCheckIco[b-zvcsexphuf] {
    background: #fef3c7;
    color: #b45309;
}

.BMCheck.Bad[b-zvcsexphuf] {
    color: #b91c1c;
}

.BMCheckOpt[b-zvcsexphuf] {
    margin-left: auto;
    font-size: 10.5px;
    color: #94a3b8;
}

/* ─────────── ตัวอย่างการ์ดหน้าเว็บ (โทนหน้าร้าน ฟ้า/navy) ─────────── */
.BMCardPreview[b-zvcsexphuf] {
    border: 1px solid #e5e9ef;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.BMCardPreviewImg[b-zvcsexphuf] {
    aspect-ratio: 16 / 9;
    background: #f2f4f8;
}

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

.BMCardPreviewBody[b-zvcsexphuf] {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.BMCardPreviewMeta[b-zvcsexphuf] {
    font-size: 11px;
    color: #6b7280;
}

.BMCardPreviewTitle[b-zvcsexphuf] {
    font-size: 15px;
    font-weight: 700;
    color: #293649;
    line-height: 1.35;
    word-break: break-word;
}

.BMCardPreviewText[b-zvcsexphuf] {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /Components/Pages/BackEnd/Credit_Debitor/Billing/Componant/BillingCredit_Debitor_Add.razor.rz.scp.css */
.MainPopUp[b-8xvg23a1il] {
    position: relative;
    width: 960px;
    background: #ffffff;
    border-radius: 10px;
    border: solid 1px #acacac;
    padding: 15px;
    margin: auto;
}

.BoxMenu[b-8xvg23a1il] {
    position: relative;
    margin: auto;
    border: solid 1px #cccccc;
    width: 100%;
    min-height: 60px;
}

.SubMenuBox[b-8xvg23a1il] {
    position: relative;
    background: #f8edee;
}

.MainTitle[b-8xvg23a1il] {
    font-size: 14px;
    padding-bottom: 10px;
    margin: 0 0 20px 0;
    border-bottom: solid 1px #cccccc;
}

.TitleBox[b-8xvg23a1il] {
    position: absolute;
    top: -15px;
    left: 50px;
    background: white;
    padding: 0 10px;
}

.TitleBoxSub[b-8xvg23a1il] {
    position: absolute;
    top: -10px;
    left: 25px;
    padding: 0 10px;
    font-size: 12px;
    display: flex;
}

.SearchCusButton[b-8xvg23a1il] {
    margin-left: 5px;
    font-weight: bold;
    background: #cfe2f5;
    color: #0558a3;
    padding: 0px 5px;
    cursor: pointer;
    border: solid 1px #acacac;
}

.SearchSellerButton[b-8xvg23a1il] {
    font-weight: bold;
    background: #cfe2f5;
    color: #0558a3;
    padding: 0px 5px;
    cursor: pointer;
    border: solid 1px #acacac;
}

.WidthSubBoxTitle[b-8xvg23a1il] {
    width: 100px;
}

.InputHeight[b-8xvg23a1il] {
    height: 19px;
}

.CyanTitle1Width[b-8xvg23a1il] {
    width: 90px;
}

.ButtonStyle[b-8xvg23a1il] {
    color: #0558a3;
    background: #cfe2f5;
    border: solid 1px #c0c0c0;
    width: 50px;
    font-size: 12px;
    text-align: center;
    user-select: none;
    cursor: pointer;
}
/* /Components/Pages/BackEnd/Credit_Debitor/Billing/Componant/BillingCredit_SelectCredit.razor.rz.scp.css */
.MainBox[b-sjg3nlwhrk] {
    width: 960px;
    background: white;
    border: solid 1px black;
    border-radius: 10px;
    margin: 0 auto;
    padding: 15px;
}

.TableStyle[b-sjg3nlwhrk] {
    width: 100%;
    font-size: 12px;
}

.TableStyle thead[b-sjg3nlwhrk] {
    background: #3c7e12;
    color: white;
    border: solid 1px #808080;
}

.TableStyle thead tr td[b-sjg3nlwhrk] {
    border: solid 1px #808080;
}

.TableStyle thead tr td:nth-child(1)[b-sjg3nlwhrk]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(2)[b-sjg3nlwhrk]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(3)[b-sjg3nlwhrk]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(4)[b-sjg3nlwhrk]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(5)[b-sjg3nlwhrk]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(6)[b-sjg3nlwhrk]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(7)[b-sjg3nlwhrk]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(8)[b-sjg3nlwhrk]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(9)[b-sjg3nlwhrk]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(10)[b-sjg3nlwhrk]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(11)[b-sjg3nlwhrk]
{
    text-align: center;
}

.TableStyle tbody tr td:nth-child(1)[b-sjg3nlwhrk]
{
    text-align: center;
}

.TableStyle tbody tr td:nth-child(2)[b-sjg3nlwhrk]
{
    text-align: center;
}

.TableStyle tbody tr td:nth-child(3)[b-sjg3nlwhrk]
{
    text-align: left;
}

.TableStyle tbody tr td:nth-child(4)[b-sjg3nlwhrk]
{
    text-align: left;
    color: #3a75d6;
    padding-left: 5px;
}

.TableStyle tbody tr td:nth-child(5)[b-sjg3nlwhrk]
{
    text-align: left;
    padding-left: 5px;
    color: #118411;
}

.TableStyle tbody tr td:nth-child(6)[b-sjg3nlwhrk]
{
    text-align: center;
}

.TableStyle tbody tr td:nth-child(7)[b-sjg3nlwhrk]
{
    text-align: left;
    padding-left: 5px;
}

.TableStyle tbody tr td:nth-child(8)[b-sjg3nlwhrk]
{
    text-align: center;
}

.TableStyle tbody tr td:nth-child(9)[b-sjg3nlwhrk]
{
    text-align: left;
    padding-left: 5px;
}

.TableStyle tbody tr td:nth-child(10)[b-sjg3nlwhrk]
{
    text-align: right;
}

.TableStyle tbody tr td:nth-child(11)[b-sjg3nlwhrk]
{
    text-align: right;
    color: #ff4500;
}

.TableStyle tbody tr td[b-sjg3nlwhrk] {
    border: 1px solid #808080;
}

.TableStyle tfoot tr td[b-sjg3nlwhrk] {
    border: 1px solid #808080;
    background: #ffd3d3;
}

.Button[b-sjg3nlwhrk] {
    background: #cfe2f5;
    border: solid 1px #cccccc;
    height: fit-content;
    color: #0558a3;
    font-size: 12px;
    padding: 0px 15px;
    cursor: pointer;
}
/* /Components/Pages/BackEnd/Credit_Debitor/Billing/Componant/SectionComponant/Section_BillingCreditCus_Detail.razor.rz.scp.css */
.MainPopUp[b-zk5xdy22i7] {
    position: relative;
    width: 960px;
    background: #ffffff;
    border-radius: 10px;
    border: solid 1px #acacac;
    padding: 15px;
    margin: auto;
}

.BoxMenu[b-zk5xdy22i7] {
    position: relative;
    margin: auto;
    border: solid 1px #cccccc;
    width: 100%;
    min-height: 60px;
}

.SubMenuBox[b-zk5xdy22i7] {
    position: relative;
    background: #f8edee;
}

.MainTitle[b-zk5xdy22i7] {
    font-size: 14px;
    padding-bottom: 10px;
    margin: 0 0 20px 0;
    border-bottom: solid 1px #cccccc;
}

.TitleBox[b-zk5xdy22i7] {
    position: absolute;
    top: -15px;
    left: 50px;
    background: white;
    padding: 0 10px;
}

.TitleBoxSub[b-zk5xdy22i7] {
    position: absolute;
    top: -10px;
    left: 25px;
    padding: 0 10px;
    font-size: 12px;
    display: flex;
}

.SearchCusButton[b-zk5xdy22i7] {
    margin-left: 5px;
    font-weight: bold;
    background: #cfe2f5;
    color: #0558a3;
    padding: 0px 5px;
    cursor: pointer;
    border: solid 1px #acacac;
}

.SearchSellerButton[b-zk5xdy22i7] {
    font-weight: bold;
    background: #cfe2f5;
    color: #0558a3;
    padding: 0px 5px;
    cursor: pointer;
    border: solid 1px #acacac;
}

.WidthSubBoxTitle[b-zk5xdy22i7] {
    width: 100px;
}

.InputHeight[b-zk5xdy22i7] {
    height: 19px;
}

.CyanTitle1Width[b-zk5xdy22i7] {
    width: 90px;
}

.ButtonStyle[b-zk5xdy22i7] {
    color: #0558a3;
    background: #cfe2f5;
    border: solid 1px #c0c0c0;
    width: 50px;
    font-size: 12px;
    text-align: center;
    user-select: none;
    cursor: pointer;
}

.LinkDiv[b-zk5xdy22i7] {
    color: #2558a3;
    background: #cfe2f5;
    border: solid 1px #cec7c8;
    padding-left: 5px;
    user-select: none;
    cursor: pointer;
}
/* /Components/Pages/BackEnd/Credit_Debitor/Billing/Componant/SectionComponant/Section_BillingCredit_Detail.razor.rz.scp.css */
.MainPopUp[b-vdmyllinbk] {
    position: relative;
    width: 960px;
    background: #ffffff;
    border-radius: 10px;
    border: solid 1px #acacac;
    padding: 15px;
    margin: auto;
}

.BoxMenu[b-vdmyllinbk] {
    position: relative;
    margin: auto;
    border: solid 1px #cccccc;
    width: 100%;
    min-height: 60px;
}

.SubMenuBox[b-vdmyllinbk] {
    position: relative;
    background: #f8edee;
}

.MainTitle[b-vdmyllinbk] {
    font-size: 14px;
    padding-bottom: 10px;
    margin: 0 0 20px 0;
    border-bottom: solid 1px #cccccc;
}

.TitleBox[b-vdmyllinbk] {
    position: absolute;
    top: -15px;
    left: 50px;
    background: white;
    padding: 0 10px;
}

.TitleBoxSub[b-vdmyllinbk] {
    position: absolute;
    top: -10px;
    left: 25px;
    padding: 0 10px;
    font-size: 12px;
    display: flex;
}

.SearchCusButton[b-vdmyllinbk] {
    margin-left: 5px;
    font-weight: bold;
    background: #cfe2f5;
    color: #0558a3;
    padding: 0px 5px;
    cursor: pointer;
    border: solid 1px #acacac;
}

.SearchSellerButton[b-vdmyllinbk] {
    font-weight: bold;
    background: #cfe2f5;
    color: #0558a3;
    padding: 0px 5px;
    cursor: pointer;
    border: solid 1px #acacac;
}

.WidthSubBoxTitle[b-vdmyllinbk] {
    width: 100px;
}

.InputHeight[b-vdmyllinbk] {
    height: 19px;
}

.CyanTitle1Width[b-vdmyllinbk] {
    width: 90px;
}

.ButtonStyle[b-vdmyllinbk] {
    color: #0558a3;
    background: #cfe2f5;
    border: solid 1px #c0c0c0;
    width: 50px;
    font-size: 12px;
    text-align: center;
    user-select: none;
    cursor: pointer;
}

.LinkDiv[b-vdmyllinbk] {
    color: #2558a3;
    background: #cfe2f5;
    border: solid 1px #cec7c8;
    padding-left: 5px;
    user-select: none;
    cursor: pointer;
}
/* /Components/Pages/BackEnd/Credit_Debitor/Billing/Componant/SectionComponant/Section_BillingCredit_PaymentZone.razor.rz.scp.css */
.BasePaymentType[b-u2ttf2o0uz] {
    background: #dddddd;
    border: solid 1px #c0c0c0;
    color: #286fb7;
    width: fit-content;
    padding: 0px 5px;
    margin: 0px 2px;
}

.TableStyle[b-u2ttf2o0uz] {
    width: 100%;
    font-size: 12px;
}

.TableStyle thead[b-u2ttf2o0uz] {
    background: #3c7e12;
    color: white;
    border: solid 1px #808080;
}

.TableStyle thead tr td[b-u2ttf2o0uz] {
    border: solid 1px #808080;
}

.TableStyle thead tr td:nth-child(1)[b-u2ttf2o0uz]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(2)[b-u2ttf2o0uz]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(3)[b-u2ttf2o0uz]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(4)[b-u2ttf2o0uz]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(5)[b-u2ttf2o0uz]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(6)[b-u2ttf2o0uz]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(7)[b-u2ttf2o0uz]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(8)[b-u2ttf2o0uz]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(9)[b-u2ttf2o0uz]
{
    text-align: center;
}

.TableStyle tbody tr td[b-u2ttf2o0uz] {
    border: solid 1px #808080;
}


.TableStyle tbody tr td:nth-child(1)[b-u2ttf2o0uz]
{
    text-align: center;
}

.TableStyle tbody tr td:nth-child(2)[b-u2ttf2o0uz]
{
    text-align: left;
    padding-left: 5px;
}

.TableStyle tbody tr td:nth-child(3)[b-u2ttf2o0uz]
{
    text-align: center;
}

.TableStyle tbody tr td:nth-child(4)[b-u2ttf2o0uz]
{
    text-align: left;
    padding-left: 5px;
}

.TableStyle tbody tr td:nth-child(5)[b-u2ttf2o0uz]
{
    text-align: center;
}

.TableStyle tbody tr td:nth-child(6)[b-u2ttf2o0uz]
{
    text-align: right;
    padding-right: 5px;
}

.TableStyle tbody tr td:nth-child(7)[b-u2ttf2o0uz]
{
    text-align: left;
}

.TableStyle tbody tr td:nth-child(8)[b-u2ttf2o0uz]
{
    text-align: right;
}

.TableStyle tbody tr td:nth-child(9)[b-u2ttf2o0uz]
{
    text-align: right;
}

.TableStyle tfoot tr td[b-u2ttf2o0uz]{
    font-weight: bold;
    background: #ffd3d3;
    border: solid 1px #808080;
}

.FindCreditDebitButton[b-u2ttf2o0uz] {
    background: #cfe2f5;
    border: solid 1px #cccccc;
    height: fit-content;
    color: #0558a3;
    font-size: 12px;
    padding: 0px 2px;
    cursor: pointer;
}
/* /Components/Pages/BackEnd/Credit_Debitor/Billing/Componant/SectionComponant/Section_BillingCredit_TableCreditList.razor.rz.scp.css */
.TableStyle[b-e02ue9aqt7] {
    width: 100%;
    font-size: 12px;
}

.TableStyle thead[b-e02ue9aqt7] {
    background: #3c7e12;
    color: white;
    border: solid 1px #808080;
}

.TableStyle thead tr td[b-e02ue9aqt7] {
    border: solid 1px #808080;
}

.TableStyle thead tr td:nth-child(1)[b-e02ue9aqt7]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(2)[b-e02ue9aqt7]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(3)[b-e02ue9aqt7]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(4)[b-e02ue9aqt7]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(5)[b-e02ue9aqt7]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(6)[b-e02ue9aqt7]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(7)[b-e02ue9aqt7]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(8)[b-e02ue9aqt7]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(9)[b-e02ue9aqt7]
{
    text-align: center;
}

.TableStyle tbody tr td[b-e02ue9aqt7] {
    border: solid 1px #808080;
}


.TableStyle tbody tr td:nth-child(1)[b-e02ue9aqt7]
{
    text-align: center;
}

.TableStyle tbody tr td:nth-child(2)[b-e02ue9aqt7]
{
    text-align: left;
    padding-left: 5px;
}

.TableStyle tbody tr td:nth-child(3)[b-e02ue9aqt7]
{
    text-align: center;
}

.TableStyle tbody tr td:nth-child(4)[b-e02ue9aqt7]
{
    text-align: left;
    padding-left: 5px;
}

.TableStyle tbody tr td:nth-child(5)[b-e02ue9aqt7]
{
    text-align: center;
}

.TableStyle tbody tr td:nth-child(6)[b-e02ue9aqt7]
{
    text-align: right;
    padding-right: 5px;
}

.TableStyle tbody tr td:nth-child(7)[b-e02ue9aqt7]
{
    text-align: left;
}

.TableStyle tbody tr td:nth-child(8)[b-e02ue9aqt7]
{
    text-align: right;
}

.TableStyle tbody tr td:nth-child(9)[b-e02ue9aqt7]
{
    text-align: right;
}

.TableStyle tfoot tr td[b-e02ue9aqt7]{
    font-weight: bold;
    background: #ffd3d3;
    border: solid 1px #808080;
}

.FindCreditDebitButton[b-e02ue9aqt7] {
    background: #cfe2f5;
    border: solid 1px #cccccc;
    height: fit-content;
    color: #0558a3;
    font-size: 12px;
    padding: 0px 2px;
    cursor: pointer;
}
/* /Components/Pages/BackEnd/Credit_Debitor/Billing/Componant/SectionComponant/Section_BillingCredit_TableMainPage.razor.rz.scp.css */
.TableStyle[b-okhnc2qjrv] {
    width: 100%;
    font-size: 12px;
}

.TableStyle thead[b-okhnc2qjrv] {
    background: #3c7e12;
    color: white;
    border: solid 1px #808080;
}

.TableStyle thead tr td[b-okhnc2qjrv] {
    border: solid 1px #808080;
}

.TableStyle thead tr td:nth-child(1)[b-okhnc2qjrv]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(2)[b-okhnc2qjrv]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(3)[b-okhnc2qjrv]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(4)[b-okhnc2qjrv]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(5)[b-okhnc2qjrv]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(6)[b-okhnc2qjrv]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(7)[b-okhnc2qjrv]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(8)[b-okhnc2qjrv]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(9)[b-okhnc2qjrv]
{
    text-align: center;
}

.TableStyle tbody tr td[b-okhnc2qjrv] {
    border: solid 1px #808080;
}


.TableStyle tbody tr td:nth-child(1)[b-okhnc2qjrv]
{
    text-align: center;
}

.TableStyle tbody tr td:nth-child(2)[b-okhnc2qjrv]
{
    text-align: left;
    padding-left: 5px;
}

.TableStyle tbody tr td:nth-child(3)[b-okhnc2qjrv]
{
    text-align: center;
}

.TableStyle tbody tr td:nth-child(4)[b-okhnc2qjrv]
{
    text-align: left;
    padding-left: 5px;
}

.TableStyle tbody tr td:nth-child(5)[b-okhnc2qjrv]
{
    text-align: center;
}

.TableStyle tbody tr td:nth-child(6)[b-okhnc2qjrv]
{
    text-align: right;
    padding-right: 5px;
}

.TableStyle tbody tr td:nth-child(7)[b-okhnc2qjrv]
{
    text-align: left;
}

.TableStyle tbody tr td:nth-child(8)[b-okhnc2qjrv]
{
    text-align: right;
}

.TableStyle tbody tr td:nth-child(9)[b-okhnc2qjrv]
{
    text-align: right;
}

.TableStyle tfoot tr td[b-okhnc2qjrv]{
    font-weight: bold;
    background: #ffd3d3;
    border: solid 1px #808080;
}
/* /Components/Pages/BackEnd/Credit_Debitor/Billing/Credit_Debitor_Billing.razor.rz.scp.css */
.MainBox[b-dlct4rd0rc] {
    margin: auto;
    border-radius: 10px;
    background: rgb(255, 255, 255);
    /* [2026-10] จอคอมเท่าเดิม 960px ; จอเล็กกว่าย่อตามจอ (เดิมตายตัว 960px → มือถือ 390 เลื่อนแนวนอน) */
    width: min(960px, 100%);
    box-sizing: border-box;
    min-height: 500px;
    border: solid 2px #c0c0c0;
    padding: 20px;
}

.BoxMenu[b-dlct4rd0rc] {
    position: relative;
    margin: auto;
    border: solid 1px #cccccc;
    width: 100%;
    display: grid;
    place-items: center;
    min-height: 60px;
}

.TitleBox[b-dlct4rd0rc] {
    position: absolute;
    top: -15px;
    left: 50px;
    background: white;
    padding: 0 10px;
}

.CreateNewCreditButton[b-dlct4rd0rc] {
    width: fit-content;
    background: #1d2327;
    color: white;
    padding: 5px 15px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
}
/* /Components/Pages/BackEnd/Credit_Debitor/Billing/Credit_Debitor_Billing_Bill.razor.rz.scp.css */
.MainPopUp[b-7ct6fm13l0] {
    position: relative;
    width: 960px;
    background: #ffffff;
    border-radius: 10px;
    border: solid 1px #acacac;
    padding: 15px;
    margin: auto;
}

.BoxMenu[b-7ct6fm13l0] {
    position: relative;
    margin: auto;
    border: solid 1px #cccccc;
    width: 100%;
    min-height: 60px;
}

.MainTitle[b-7ct6fm13l0] {
    font-size: 14px;
    padding-bottom: 10px;
    margin: 0 0 20px 0;
    border-bottom: solid 1px #cccccc;
}

.TitleBox[b-7ct6fm13l0] {
    position: absolute;
    top: -15px;
    left: 50px;
    background: white;
    padding: 0 10px;
    font-size: 12px;
}

.ButtonChangeBillStatus[b-7ct6fm13l0] {
    font-size: 13px;
    border: solid 1px #4f4f4f;
    border-radius: 2px;
    background: #efefef;
    padding: 2px 40px;
    cursor: pointer;
    user-select: none;
}

.ButtonChangeBillStatus:hover[b-7ct6fm13l0] {
    background: #e5e5e5;
}

.FindCreditDebitButton[b-7ct6fm13l0] {
    background: #cfe2f5;
    border: solid 1px #cccccc;
    height: fit-content;
    color: #0558a3;
    font-size: 12px;
    padding: 0px 15px;
    cursor: pointer;
}
/* /Components/Pages/BackEnd/Credit_Debitor/Componant/Credit_Debitor_Add.razor.rz.scp.css */
.MainPopUp[b-bzxjjtzzmj] {
    position: relative;
    width: 960px;
    background: #ffffff;
    border-radius: 10px;
    border: solid 1px #acacac;
    padding: 15px;
    margin: auto;
}

.BoxMenu[b-bzxjjtzzmj] {
    position: relative;
    margin: auto;
    border: solid 1px #cccccc;
    width: 100%;
    min-height: 60px;
}

.SubMenuBox[b-bzxjjtzzmj] {
    position: relative;
    background: #f8edee;
}

.MainTitle[b-bzxjjtzzmj] {
    font-size: 14px;
    padding-bottom: 10px;
    margin: 0 0 20px 0;
    border-bottom: solid 1px #cccccc;
}

.TitleBox[b-bzxjjtzzmj] {
    position: absolute;
    top: -15px;
    left: 50px;
    background: white;
    padding: 0 10px;
}

.TitleBoxSub[b-bzxjjtzzmj] {
    position: absolute;
    top: -10px;
    left: 25px;
    padding: 0 10px;
    font-size: 12px;
    display: flex;
}

.SearchCusButton[b-bzxjjtzzmj] {
    margin-left: 5px;
    font-weight: bold;
    background: #cfe2f5;
    color: #0558a3;
    padding: 0px 5px;
    cursor: pointer;
    border: solid 1px #acacac;
}

.SearchSellerButton[b-bzxjjtzzmj] {
    font-weight: bold;
    background: #cfe2f5;
    color: #0558a3;
    padding: 0px 5px;
    cursor: pointer;
    border: solid 1px #acacac;
}

.WidthSubBoxTitle[b-bzxjjtzzmj] {
    width: 100px;
}

.InputHeight[b-bzxjjtzzmj] {
    height: 19px;
}

.CyanTitle1Width[b-bzxjjtzzmj] {
    width: 90px;
}

.ButtonStyle[b-bzxjjtzzmj] {
    color: #0558a3;
    background: #cfe2f5;
    border: solid 1px #c0c0c0;
    width: 50px;
    font-size: 12px;
    text-align: center;
    user-select: none;
    cursor: pointer;
}
/* /Components/Pages/BackEnd/Credit_Debitor/Componant/Credit_Debitor_Bill.razor.rz.scp.css */
.MainPopUp[b-ute0qrbxlr] {
    position: relative;
    width: 960px;
    background: #ffffff;
    border-radius: 10px;
    border: solid 1px #acacac;
    padding: 15px;
    margin: auto;
}

.BoxMenu[b-ute0qrbxlr] {
    position: relative;
    margin: auto;
    border: solid 1px #cccccc;
    width: 100%;
    min-height: 60px;
}

.MainTitle[b-ute0qrbxlr] {
    font-size: 14px;
    padding-bottom: 10px;
    margin: 0 0 20px 0;
    border-bottom: solid 1px #cccccc;
}

.TitleBox[b-ute0qrbxlr] {
    position: absolute;
    top: -15px;
    left: 50px;
    background: white;
    padding: 0 10px;
    font-size: 12px;
}

.ButtonChangeBillStatus[b-ute0qrbxlr] {
    font-size: 13px;
    border: solid 1px #4f4f4f;
    border-radius: 2px;
    background: #efefef;
    padding: 2px 40px;
    cursor: pointer;
    user-select: none;
}

.ButtonChangeBillStatus:hover[b-ute0qrbxlr] {
    background: #e5e5e5;
}
/* /Components/Pages/BackEnd/Credit_Debitor/Componant/SectionComponant/Section_CreditCus_Detail.razor.rz.scp.css */
.MainPopUp[b-5w7irroifd] {
    position: relative;
    width: 960px;
    background: #ffffff;
    border-radius: 10px;
    border: solid 1px #acacac;
    padding: 15px;
    margin: auto;
}

.BoxMenu[b-5w7irroifd] {
    position: relative;
    margin: auto;
    border: solid 1px #cccccc;
    width: 100%;
    min-height: 60px;
}

.SubMenuBox[b-5w7irroifd] {
    position: relative;
    background: #f8edee;
}

.MainTitle[b-5w7irroifd] {
    font-size: 14px;
    padding-bottom: 10px;
    margin: 0 0 20px 0;
    border-bottom: solid 1px #cccccc;
}

.TitleBox[b-5w7irroifd] {
    position: absolute;
    top: -15px;
    left: 50px;
    background: white;
    padding: 0 10px;
}

.TitleBoxSub[b-5w7irroifd] {
    position: absolute;
    top: -10px;
    left: 25px;
    padding: 0 10px;
    font-size: 12px;
    display: flex;
}

.SearchCusButton[b-5w7irroifd] {
    margin-left: 5px;
    font-weight: bold;
    background: #cfe2f5;
    color: #0558a3;
    padding: 0px 5px;
    cursor: pointer;
    border: solid 1px #acacac;
}

.SearchSellerButton[b-5w7irroifd] {
    font-weight: bold;
    background: #cfe2f5;
    color: #0558a3;
    padding: 0px 5px;
    cursor: pointer;
    border: solid 1px #acacac;
}

.WidthSubBoxTitle[b-5w7irroifd] {
    width: 100px;
}

.InputHeight[b-5w7irroifd] {
    height: 19px;
}

.CyanTitle1Width[b-5w7irroifd] {
    width: 90px;
}

.ButtonStyle[b-5w7irroifd] {
    color: #0558a3;
    background: #cfe2f5;
    border: solid 1px #c0c0c0;
    width: 50px;
    font-size: 12px;
    text-align: center;
    user-select: none;
    cursor: pointer;
}

.LinkDiv[b-5w7irroifd] {
    color: #2558a3;
    background: #cfe2f5;
    border: solid 1px #cec7c8;
    padding-left: 5px;
    user-select: none;
    cursor: pointer;
}
/* /Components/Pages/BackEnd/Credit_Debitor/Componant/SectionComponant/Section_CreditTo_Detail.razor.rz.scp.css */
.MainPopUp[b-3aqt9n4c1q] {
    position: relative;
    width: 960px;
    background: #ffffff;
    border-radius: 10px;
    border: solid 1px #acacac;
    padding: 15px;
    margin: auto;
}

.BoxMenu[b-3aqt9n4c1q] {
    position: relative;
    margin: auto;
    border: solid 1px #cccccc;
    width: 100%;
    min-height: 60px;
}

.SubMenuBox[b-3aqt9n4c1q] {
    position: relative;
    background: #def8de;
}

.MainTitle[b-3aqt9n4c1q] {
    font-size: 14px;
    padding-bottom: 10px;
    margin: 0 0 20px 0;
    border-bottom: solid 1px #cccccc;
}

.TitleBox[b-3aqt9n4c1q] {
    position: absolute;
    top: -15px;
    left: 50px;
    background: white;
    padding: 0 10px;
}

.TitleBoxSub[b-3aqt9n4c1q] {
    position: absolute;
    top: -10px;
    left: 25px;
    padding: 0 10px;
    font-size: 12px;
    display: flex;
}

.SearchCusButton[b-3aqt9n4c1q] {
    margin-left: 5px;
    font-weight: bold;
    background: #cfe2f5;
    color: #0558a3;
    padding: 0px 5px;
    cursor: pointer;
    border: solid 1px #acacac;
}

.SearchSellerButton[b-3aqt9n4c1q] {
    font-weight: bold;
    background: #cfe2f5;
    color: #0558a3;
    padding: 0px 5px;
    cursor: pointer;
    border: solid 1px #acacac;
}

.WidthSubBoxTitle[b-3aqt9n4c1q] {
    width: 100px;
}

.InputHeight[b-3aqt9n4c1q] {
    height: 19px;
}

.CyanTitle1Width[b-3aqt9n4c1q] {
    width: 90px;
}

.ButtonStyle[b-3aqt9n4c1q] {
    color: #0558a3;
    background: #cfe2f5;
    border: solid 1px #c0c0c0;
    width: 50px;
    font-size: 12px;
    text-align: center;
    user-select: none;
    cursor: pointer;
}

.LinkDiv[b-3aqt9n4c1q] {
    color: #2558a3;
    background: #cfe2f5;
    border: solid 1px #cec7c8;
    padding-left: 5px;
    user-select: none;
    cursor: pointer;
}
/* /Components/Pages/BackEnd/Credit_Debitor/Componant/SectionComponant/Section_Credit_Detail.razor.rz.scp.css */
.MainPopUp[b-8tzfqcif3a] {
    position: relative;
    width: 960px;
    background: #ffffff;
    border-radius: 10px;
    border: solid 1px #acacac;
    padding: 15px;
    margin: auto;
}

.BoxMenu[b-8tzfqcif3a] {
    position: relative;
    margin: auto;
    border: solid 1px #cccccc;
    width: 100%;
    min-height: 60px;
}

.SubMenuBox[b-8tzfqcif3a] {
    position: relative;
    background: #f8edee;
}

.MainTitle[b-8tzfqcif3a] {
    font-size: 14px;
    padding-bottom: 10px;
    margin: 0 0 20px 0;
    border-bottom: solid 1px #cccccc;
}

.TitleBox[b-8tzfqcif3a] {
    position: absolute;
    top: -15px;
    left: 50px;
    background: white;
    padding: 0 10px;
}

.TitleBoxSub[b-8tzfqcif3a] {
    position: absolute;
    top: -10px;
    left: 25px;
    padding: 0 10px;
    font-size: 12px;
    display: flex;
}

.SearchCusButton[b-8tzfqcif3a] {
    margin-left: 5px;
    font-weight: bold;
    background: #cfe2f5;
    color: #0558a3;
    padding: 0px 5px;
    cursor: pointer;
    border: solid 1px #acacac;
}

.SearchSellerButton[b-8tzfqcif3a] {
    font-weight: bold;
    background: #cfe2f5;
    color: #0558a3;
    padding: 0px 5px;
    cursor: pointer;
    border: solid 1px #acacac;
}

.WidthSubBoxTitle[b-8tzfqcif3a] {
    width: 100px;
}

.InputHeight[b-8tzfqcif3a] {
    height: 19px;
}

.CyanTitle1Width[b-8tzfqcif3a] {
    width: 90px;
}

.ButtonStyle[b-8tzfqcif3a] {
    color: #0558a3;
    background: #cfe2f5;
    border: solid 1px #c0c0c0;
    width: 50px;
    font-size: 12px;
    text-align: center;
    user-select: none;
    cursor: pointer;
}

.LinkDiv[b-8tzfqcif3a] {
    color: #2558a3;
    background: #cfe2f5;
    border: solid 1px #cec7c8;
    padding-left: 5px;
    user-select: none;
    cursor: pointer;
}
/* /Components/Pages/BackEnd/Credit_Debitor/Componant/SectionComponant/Section_Credit_PaymentZone.razor.rz.scp.css */
.MainPopUp[b-x0fqhdz9b5] {
    position: relative;
    width: 960px;
    background: #ffffff;
    border-radius: 10px;
    border: solid 1px #acacac;
    padding: 15px;
    margin: auto;
}

.BoxMenu[b-x0fqhdz9b5] {
    position: relative;
    margin: auto;
    border: solid 1px #cccccc;
    width: 100%;
    min-height: 60px;
}

.SubMenuBox[b-x0fqhdz9b5] {
    position: relative;
    background: #f8edee;
}

.MainTitle[b-x0fqhdz9b5] {
    font-size: 14px;
    padding-bottom: 10px;
    margin: 0 0 20px 0;
    border-bottom: solid 1px #cccccc;
}

.TitleBox[b-x0fqhdz9b5] {
    position: absolute;
    top: -15px;
    left: 50px;
    background: white;
    padding: 0 10px;
}

.TitleBoxSub[b-x0fqhdz9b5] {
    position: absolute;
    top: -10px;
    left: 25px;
    padding: 0 10px;
    font-size: 12px;
    display: flex;
}

.SearchCusButton[b-x0fqhdz9b5] {
    margin-left: 5px;
    font-weight: bold;
    background: #cfe2f5;
    color: #0558a3;
    padding: 0px 5px;
    cursor: pointer;
    border: solid 1px #acacac;
}

.SearchSellerButton[b-x0fqhdz9b5] {
    font-weight: bold;
    background: #cfe2f5;
    color: #0558a3;
    padding: 0px 5px;
    cursor: pointer;
    border: solid 1px #acacac;
}

.WidthSubBoxTitle[b-x0fqhdz9b5] {
    width: 100px;
}

.InputHeight[b-x0fqhdz9b5] {
    height: 19px;
}

.CyanTitle1Width[b-x0fqhdz9b5] {
    width: 90px;
}

.ButtonStyle[b-x0fqhdz9b5] {
    color: #0558a3;
    background: #cfe2f5;
    border: solid 1px #c0c0c0;
    width: 50px;
    font-size: 12px;
    text-align: center;
    user-select: none;
    cursor: pointer;
}

.LinkDiv[b-x0fqhdz9b5] {
    color: #2558a3;
    background: #cfe2f5;
    border: solid 1px #cec7c8;
    padding-left: 5px;
    user-select: none;
    cursor: pointer;
}

.TablePaymentBill[b-x0fqhdz9b5] {
    border: solid 1px #808080;
    font-size: 12px;
    width: 100%;
}

    .TablePaymentBill thead tr td[b-x0fqhdz9b5] {
        border: solid 1px #808080;
        text-align: center;
        background: #3c7e12;
        color: white;
        font-weight: bold;
    }

    .TablePaymentBill tbody tr td[b-x0fqhdz9b5] {
        border: solid 1px #808080;
    }

    .TablePaymentBill tfoot tr td[b-x0fqhdz9b5] {
        border: solid 1px #808080;
        background: #ffd3d3;
        font-weight: bold;
    }

    .TablePaymentBill tbody tr td:nth-child(1)[b-x0fqhdz9b5] {
        text-align: left;
        padding-left: 5px;
        color: #1975d1;
    }

    .TablePaymentBill tbody tr td:nth-child(2)[b-x0fqhdz9b5] {
        text-align: center;
    }

    .TablePaymentBill tbody tr td:nth-child(3)[b-x0fqhdz9b5] {
        text-align: center;
    }

    .TablePaymentBill tbody tr td:nth-child(4)[b-x0fqhdz9b5] {
        text-align: right;
        padding-right: 5px;
    }
/* /Components/Pages/BackEnd/Credit_Debitor/Componant/SectionComponant/Section_Credit_TableMainPage.razor.rz.scp.css */
.TableStyle[b-jbh4cbsgem] {
    width: 100%;
    font-size: 12px;
}

.TableStyle thead[b-jbh4cbsgem] {
    background: #3c7e12;
    color: white;
    border: solid 1px #808080;
}

.TableStyle thead tr td[b-jbh4cbsgem] {
    border: solid 1px #808080;
}

.TableStyle thead tr td:nth-child(1)[b-jbh4cbsgem]
{
    text-align: center;
    width: 30px;
}

    .TableStyle thead tr td:nth-child(2)[b-jbh4cbsgem] {
        text-align: center;
    }

.TableStyle thead tr td:nth-child(3)[b-jbh4cbsgem]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(4)[b-jbh4cbsgem]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(5)[b-jbh4cbsgem]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(6)[b-jbh4cbsgem]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(7)[b-jbh4cbsgem]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(8)[b-jbh4cbsgem]
{
    text-align: center;
}

.TableStyle thead tr td:nth-child(9)[b-jbh4cbsgem]
{
    text-align: center;
}

.TableStyle tbody tr td[b-jbh4cbsgem] {
    border: solid 1px #808080;
}


.TableStyle tbody tr td:nth-child(1)[b-jbh4cbsgem]
{
    text-align: center;
}

    .TableStyle tbody tr td:nth-child(2)[b-jbh4cbsgem] {
        text-align: center;
        width: 100px;
    }

    .TableStyle tbody tr td:nth-child(3)[b-jbh4cbsgem] {
        text-align: center;
        width: 100px;
    }

.TableStyle tbody tr td:nth-child(4)[b-jbh4cbsgem]
{
    text-align: left;
    padding: 0px 5px;
    width: 50px;
}

.TableStyle tbody tr td:nth-child(5)[b-jbh4cbsgem]
{
    text-align: left;
    padding-left: 5px;
}

.TableStyle tbody tr td:nth-child(6)[b-jbh4cbsgem]
{
    text-align: center;
}

    .TableStyle tbody tr td:nth-child(7)[b-jbh4cbsgem] {
        text-align: left;
        padding-left: 5px;
    }

.TableStyle tbody tr td:nth-child(8)[b-jbh4cbsgem]
{
    text-align: right;
}

.TableStyle tbody tr td:nth-child(9)[b-jbh4cbsgem]
{
    text-align: right;
}

.TableStyle tfoot tr td[b-jbh4cbsgem]{
    font-weight: bold;
    background: #ffd3d3;
    border: solid 1px #808080;
}
/* /Components/Pages/BackEnd/Credit_Debitor/Credit_Debitor.razor.rz.scp.css */
.MainBox[b-9ua0z5otv1] {
    margin: auto;
    border-radius: 10px;
    background: rgb(255, 255, 255);
    width: 960px;
    min-height: 500px;
    border: solid 2px #c0c0c0;
    padding: 20px;
}

.BoxMenu[b-9ua0z5otv1] {
    position: relative;
    margin: auto;
    border: solid 1px #cccccc;
    width: 100%;
    display: grid;
    place-items: center;
    min-height: 60px;
}

.TitleBox[b-9ua0z5otv1] {
    position: absolute;
    top: -15px;
    left: 50px;
    background: white;
    padding: 0 10px;
}

.CreateNewCreditButton[b-9ua0z5otv1] {
    width: fit-content;
    background: #1d2327;
    color: white;
    padding: 5px 15px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
}
/* /Components/Pages/BackEnd/CustomerChat/ChatInbox.razor.rz.scp.css */
/* กล่องแชทลูกค้า (หลังบ้าน) — โทน teal หลังบ้าน (#0B7A75) ; 3 คอลัมน์ → มือถือสลับ รายการ/ข้อความ */
.ci-wrap[b-4yizrexan7] {
    --teal: #0B7A75;
    --teal-soft: #e7f5f4;
    --ink: #1c2530;
    --mute: #6b7684;
    --line: #e4e8ef;
    --bg: #f4f6f9;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: calc(100vh - var(--be-top-h, 0px));
    display: flex;
    background: var(--bg);
    font-family: 'IBM Plex Sans Thai', 'Sarabun', sans-serif;
    color: var(--ink);
    overflow: hidden;
    position: relative;
}

    .ci-wrap *[b-4yizrexan7], .ci-wrap *[b-4yizrexan7]::before, .ci-wrap *[b-4yizrexan7]::after {
        box-sizing: border-box;
    }

/* ─── รายการห้อง ─── */
.ci-list[b-4yizrexan7] {
    width: 340px;
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid var(--line);
    min-height: 0;
}

.ci-list-head[b-4yizrexan7] {
    padding: 16px 14px 10px;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ci-list-title[b-4yizrexan7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .ci-list-title h1[b-4yizrexan7] {
        font-size: 19px;
        font-weight: 700;
        margin: 0;
        flex: 1 1 auto;
    }

.ci-pill[b-4yizrexan7] {
    background: #fdecea;
    color: #b42318;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.ci-search[b-4yizrexan7] {
    border: 1px solid #d5dce6;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    width: 100%;
}

    .ci-search:focus[b-4yizrexan7] {
        border-color: var(--teal);
    }

.ci-filters[b-4yizrexan7] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .ci-filters button[b-4yizrexan7] {
        border: 1px solid var(--line);
        background: #fff;
        border-radius: 999px;
        padding: 3px 10px;
        font-size: 12.5px;
        color: #45505c;
        cursor: pointer;
        font-family: inherit;
    }

        .ci-filters button.active[b-4yizrexan7] {
            background: var(--teal);
            border-color: var(--teal);
            color: #fff;
        }

.ci-warn[b-4yizrexan7] {
    background: #fff6e8;
    color: #92400e;
    border: 1px solid #fde3b5;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
}

.ci-items[b-4yizrexan7] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.ci-empty[b-4yizrexan7] {
    padding: 40px 16px;
    text-align: center;
    color: var(--mute);
    font-size: 13.5px;
}

.ci-item[b-4yizrexan7] {
    width: 100%;
    display: flex;
    gap: 10px;
    padding: 11px 14px;
    border: none;
    border-bottom: 1px solid #f0f2f6;
    background: #fff;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

    .ci-item:hover[b-4yizrexan7] {
        background: #f7f9fb;
    }

    .ci-item.active[b-4yizrexan7] {
        background: var(--teal-soft);
    }

.ci-avatar[b-4yizrexan7] {
    overflow: hidden;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

    .ci-avatar.guest[b-4yizrexan7] {
        background: #94a3b8;
    }

    /* [2026-10] รูปประจำตัวลูกค้า */
    .ci-avatar img[b-4yizrexan7] {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }

    .ci-avatar.big[b-4yizrexan7] {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
        font-size: 26px;
    }

.ci-item-main[b-4yizrexan7] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ci-item-top[b-4yizrexan7], .ci-item-bottom[b-4yizrexan7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ci-item-name[b-4yizrexan7] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ci-item-time[b-4yizrexan7] {
    font-size: 11.5px;
    color: var(--mute);
    white-space: nowrap;
}

.ci-item-preview[b-4yizrexan7] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    color: var(--mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ci-item.unread .ci-item-preview[b-4yizrexan7] {
    color: var(--ink);
    font-weight: 600;
}

.ci-item-kind[b-4yizrexan7] {
    font-size: 11px;
    color: #98a2ae;
}

.ci-count[b-4yizrexan7] {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ci-tag[b-4yizrexan7] {
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

    .ci-tag.closed[b-4yizrexan7] {
        background: #eef1f5;
        color: #5b6672;
    }

/* ─── ข้อความ ─── */
.ci-thread[b-4yizrexan7] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #f6f8fb;
}

.ci-placeholder[b-4yizrexan7] {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #98a2ae;
    font-size: 14px;
}

.ci-thread-head[b-4yizrexan7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}

.ci-back[b-4yizrexan7] {
    display: none;
    border: none;
    background: none;
    font-size: 28px;
    line-height: 1;
    color: var(--teal);
    cursor: pointer;
    padding: 0 4px;
}

.ci-thread-who[b-4yizrexan7] {
    flex: 1 1 auto;
    min-width: 0;
}

.ci-thread-name[b-4yizrexan7] {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ci-thread-sub[b-4yizrexan7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--mute);
}

.ci-thread-actions[b-4yizrexan7] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ci-btn[b-4yizrexan7] {
    border: 1px solid var(--teal);
    background: var(--teal);
    color: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ci-btn.ghost[b-4yizrexan7] {
        background: #fff;
        color: var(--teal);
    }

    .ci-btn.full[b-4yizrexan7] {
        width: 100%;
    }

    .ci-btn:disabled[b-4yizrexan7] {
        opacity: .55;
        cursor: default;
    }

.ci-iconbtn[b-4yizrexan7] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    color: #45505c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 34px;
    text-decoration: none;
}

    .ci-iconbtn:hover[b-4yizrexan7], .ci-iconbtn.on[b-4yizrexan7] {
        color: var(--teal);
        border-color: var(--teal);
        background: var(--teal-soft);
    }

    /* [2026-10] ปุ่มโทรที่ใช้ไม่ได้ตอนนี้ — จางลง แต่ยังกดได้เพื่อดูเหตุผล */
    .ci-iconbtn.blocked[b-4yizrexan7] { opacity: .45; }

.ci-thread-body[b-4yizrexan7] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: 0 8px;
}

.ci-more[b-4yizrexan7] {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

    .ci-more button[b-4yizrexan7] {
        border: 1px solid #dfe5ee;
        background: #fff;
        border-radius: 999px;
        padding: 4px 12px;
        font-size: 12px;
        color: #45505c;
        cursor: pointer;
        font-family: inherit;
    }

.ci-quick[b-4yizrexan7] {
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 8px 12px;
    flex: 0 0 auto;
}

.ci-quick-head[b-4yizrexan7] {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 700;
    color: #45505c;
    margin-bottom: 6px;
}

    .ci-quick-head a[b-4yizrexan7] {
        color: var(--teal);
        font-weight: 600;
    }

.ci-quick-empty[b-4yizrexan7] {
    font-size: 12.5px;
    color: var(--mute);
    padding: 6px 0;
}

.ci-quick-item[b-4yizrexan7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    padding: 7px 10px;
    margin-bottom: 6px;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

    .ci-quick-item:hover[b-4yizrexan7] {
        border-color: var(--teal);
        background: var(--teal-soft);
    }

    .ci-quick-item b[b-4yizrexan7] {
        font-size: 13px;
    }

    .ci-quick-item span[b-4yizrexan7] {
        font-size: 12px;
        color: var(--mute);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.ci-compose[b-4yizrexan7] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 10px 12px;
    background: #fff;
    border-top: 1px solid var(--line);
    flex: 0 0 auto;
}

    .ci-compose textarea[b-4yizrexan7] {
        flex: 1 1 auto;
        min-width: 0;
        resize: none;
        border: 1px solid #d5dce6;
        border-radius: 10px;
        padding: 8px 12px;
        font-size: 14px;
        line-height: 1.4;
        max-height: 120px;
        font-family: inherit;
        outline: none;
        background: #f8fafc;
    }

        .ci-compose textarea:focus[b-4yizrexan7] {
            border-color: var(--teal);
            background: #fff;
        }

.ci-tool[b-4yizrexan7] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 8px;
    border: none;
    background: none;
    color: #5b6672;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .ci-tool:hover[b-4yizrexan7], .ci-tool.on[b-4yizrexan7] {
        background: var(--teal-soft);
        color: var(--teal);
    }

    .ci-tool[b-4yizrexan7]  input[type=file] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

.ci-send[b-4yizrexan7] {
    border: none;
    background: var(--teal);
    color: #fff;
    border-radius: 10px;
    padding: 0 18px;
    height: 38px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
}

    .ci-send:disabled[b-4yizrexan7] {
        opacity: .45;
        cursor: default;
    }

.ci-err[b-4yizrexan7] {
    background: #fff;
    color: #b42318;
    font-size: 12.5px;
    padding: 0 14px 8px;
}

.ci-readonly[b-4yizrexan7] {
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--mute);
}

/* ─── ข้อมูลลูกค้า ─── */
.ci-info[b-4yizrexan7] {
    width: 300px;
    flex: 0 0 300px;
    background: #fff;
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ci-info-head[b-4yizrexan7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
    font-size: 14px;
}

.ci-info-body[b-4yizrexan7] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ci-info-card[b-4yizrexan7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.ci-info-name[b-4yizrexan7] {
    font-weight: 700;
    font-size: 16px;
}

.ci-info-kind[b-4yizrexan7] {
    font-size: 12px;
    color: var(--mute);
}

.ci-dl[b-4yizrexan7] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 10px;
    margin: 0;
    font-size: 13px;
}

    .ci-dl dt[b-4yizrexan7] {
        color: var(--mute);
        font-weight: 500;
        white-space: nowrap;
    }

    .ci-dl dd[b-4yizrexan7] {
        margin: 0;
        overflow-wrap: anywhere;
    }

.ci-link[b-4yizrexan7] {
    color: var(--teal);
}

.ci-info-sec[b-4yizrexan7] {
    font-weight: 700;
    font-size: 13px;
    margin-top: 4px;
}

.ci-info-empty[b-4yizrexan7] {
    font-size: 12.5px;
    color: var(--mute);
}

.ci-bill[b-4yizrexan7] {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px;
}

    /* [2026-10] คลิกเปิดบิล (แท็บใหม่) */
    .ci-bill.link[b-4yizrexan7] {
        display: block;
        color: inherit;
        text-decoration: none;
        cursor: pointer;
        transition: border-color .15s, background .15s;
    }

        .ci-bill.link:hover[b-4yizrexan7] {
            border-color: var(--teal);
            background: #f3faf9;
        }

.ci-bill-top[b-4yizrexan7] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

    .ci-bill-top span[b-4yizrexan7] {
        color: var(--mute);
        font-size: 12px;
    }

.ci-bill-sub[b-4yizrexan7] {
    font-size: 12px;
    color: var(--mute);
}

.ci-info-note[b-4yizrexan7] {
    margin-top: auto;
    font-size: 11.5px;
    color: #98a2ae;
    line-height: 1.5;
}

/* ─── จอเล็ก ─── */
@media (max-width: 1280px) {
    .ci-info[b-4yizrexan7] {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 20;
        box-shadow: -8px 0 24px rgba(15, 30, 50, .12);
    }
}

@media (max-width: 860px) {
    .ci-list[b-4yizrexan7] {
        width: 100%;
        flex: 1 1 auto;
        border-right: none;
    }

    .ci-thread[b-4yizrexan7] {
        display: none;
    }

    .ci-wrap.has-sel .ci-list[b-4yizrexan7] {
        display: none;
    }

    .ci-wrap.has-sel .ci-thread[b-4yizrexan7] {
        display: flex;
    }

    .ci-back[b-4yizrexan7] {
        display: block;
    }

    .ci-info[b-4yizrexan7] {
        width: 100%;
        left: 0;
    }

    .ci-thread-actions .ci-btn[b-4yizrexan7] {
        padding: 6px 8px;
        font-size: 12px;
    }
}
/* /Components/Pages/BackEnd/CustomerChat/ChatSettings.razor.rz.scp.css */
/* หน้าตั้งค่าแชท — ใช้ธีม st-* (wwwroot/css/minesettings.css) + ส่วนเฉพาะหน้า cs-* */
.cs-grid[b-hjyyl780es] {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
}

.cs-side[b-hjyyl780es] {
    position: sticky;
    top: 110px;
}

@media (max-width: 1100px) {
    .cs-grid[b-hjyyl780es] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-side[b-hjyyl780es] {
        position: static;
        order: -1;
    }
}

.cs-checks[b-hjyyl780es] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 6px 14px;
}

.cs-check[b-hjyyl780es] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    cursor: pointer;
}

    .cs-check input[b-hjyyl780es] {
        width: 16px;
        height: 16px;
        accent-color: #0B7A75;
    }

.cs-pair[b-hjyyl780es] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

    .cs-pair label[b-hjyyl780es] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: #6b7684;
    }

.cs-num[b-hjyyl780es] {
    width: 90px !important;
}

.cs-time[b-hjyyl780es] {
    width: 120px !important;
}

.cs-inline[b-hjyyl780es] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

    /* toggle ไม่ยืดตาม .st-row-control.grow > * (flex:1) — ขนาดเท่าตัวเอง ช่องข้อความกินที่เหลือ */
    .st-row-control.grow.cs-inline > .cs-inline-toggle[b-hjyyl780es] {
        flex: 0 0 auto;
        display: inline-flex;
    }

.cs-icons[b-hjyyl780es] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cs-icon[b-hjyyl780es] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #e4e8ef;
    background: #fff;
    color: #45505c;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .cs-icon.active[b-hjyyl780es] {
        border-color: #0B7A75;
        background: #e7f5f4;
        color: #0B7A75;
        box-shadow: 0 0 0 2px rgba(11, 122, 117, .18);
    }

.cs-color[b-hjyyl780es] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e4e8ef;
    border-radius: 8px;
    padding: 4px 10px 4px 4px;
    background: #fff;
    cursor: pointer;
}

    .cs-color input[type=color][b-hjyyl780es] {
        width: 32px;
        height: 28px;
        border: none;
        padding: 0;
        background: none;
        cursor: pointer;
    }

    .cs-color span[b-hjyyl780es] {
        font-family: ui-monospace, Consolas, monospace;
        font-size: 12.5px;
        color: #1c2530;
    }

.cs-range[b-hjyyl780es] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .cs-range input[b-hjyyl780es] {
        width: 180px;
        accent-color: #0B7A75;
    }

    .cs-range span[b-hjyyl780es] {
        font-size: 13px;
        min-width: 52px;
    }

.cs-imgpick[b-hjyyl780es] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cs-imgbox[b-hjyyl780es] {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    border: 1px dashed #c4ccd7;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    color: #6b7684;
    padding: 4px;
}

    .cs-imgbox img[b-hjyyl780es] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.cs-days[b-hjyyl780es] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .cs-days button[b-hjyyl780es] {
        width: 40px;
        height: 34px;
        border-radius: 8px;
        border: 1px solid #e4e8ef;
        background: #fff;
        font-size: 13px;
        cursor: pointer;
        font-family: inherit;
        color: #45505c;
    }

        .cs-days button.active[b-hjyyl780es] {
            background: #0B7A75;
            border-color: #0B7A75;
            color: #fff;
        }

/* ─── ข้อความด่วน ─── */
.cs-qr[b-hjyyl780es] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #eef1f5;
}

.cs-qr-main[b-hjyyl780es] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .cs-qr-main b[b-hjyyl780es] {
        font-size: 13.5px;
    }

    .cs-qr-main span[b-hjyyl780es] {
        font-size: 12.5px;
        color: #6b7684;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

.cs-qr-edit[b-hjyyl780es] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-qr-actions[b-hjyyl780es] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.cs-add[b-hjyyl780es] {
    margin-top: 10px;
}

/* ─── พรีวิว ─── */
.cs-preview-card .st-card-head[b-hjyyl780es] {
    flex-wrap: wrap;
    gap: 8px;
}

.cs-frame[b-hjyyl780es] {
    position: relative;
    height: 380px;
    border: 1px solid #e4e8ef;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
}

    .cs-frame.mobile[b-hjyyl780es] {
        width: 230px;
        height: 420px;
        border-radius: 26px;
        border: 6px solid #1c2530;
    }

.cs-mock[b-hjyyl780es] {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* แถบหัวเว็บจำลอง — สีกลาง (ไม่ใช่ค่าสีของแชท — เดิมสีน้ำเงินตายตัว ทำให้ดูเหมือนตัวอย่างไม่เปลี่ยนสี) */
.cs-mock-bar[b-hjyyl780es] {
    height: 28px;
    border-radius: 6px;
    background: #e4e8ef;
}

.cs-mock-line[b-hjyyl780es] {
    height: 10px;
    border-radius: 5px;
    background: #e8edf3;
}

    .cs-mock-line.w70[b-hjyyl780es] {
        width: 70%;
    }

    .cs-mock-line.w50[b-hjyyl780es] {
        width: 50%;
    }

.cs-mock-cards[b-hjyyl780es] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

    .cs-mock-cards i[b-hjyyl780es] {
        display: block;
        height: 90px;
        border-radius: 8px;
        background: linear-gradient(135deg, #eef2f7, #dfe6ef);
    }

.cs-mock-off[b-hjyyl780es] {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    background: #fff6e8;
    color: #92400e;
    border: 1px solid #fde3b5;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
}

/* [2026-10] ตัวอย่าง: สลับ ปุ่ม / หน้าต่างแชท + หน้าต่างจำลอง (สีหัว = --hc) */
.cs-pv-tools[b-hjyyl780es] { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.cs-pv-win[b-hjyyl780es] { position: absolute; right: 12px; bottom: 92px; width: 240px; max-height: calc(100% - 104px); display: flex; flex-direction: column;
             background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(15, 23, 32, .18); border: 1px solid #e4e8ef; z-index: 2; }
.cs-pv-win.left[b-hjyyl780es] { right: auto; left: 12px; }
.cs-pv-win.mobile[b-hjyyl780es] { left: 6px; right: 6px; width: auto; bottom: 80px; }
.cs-pv-head[b-hjyyl780es] { background: var(--hc); color: #fff; padding: 10px 12px; }
.cs-pv-title[b-hjyyl780es] { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-pv-status[b-hjyyl780es] { font-size: 11px; opacity: .85; margin-top: 2px; }
.cs-pv-body[b-hjyyl780es] { flex: 1 1 auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: #f6f8fb; overflow: hidden; }
.cs-pv-welcome[b-hjyyl780es] { font-size: 11.5px; color: #4a5868; background: #fff; border: 1px dashed #d5dbe3; border-radius: 10px; padding: 6px 8px; white-space: pre-line;
                 max-height: 72px; overflow: hidden; }
.cs-pv-msg[b-hjyyl780es] { max-width: 80%; font-size: 12px; padding: 6px 10px; border-radius: 12px; }
.cs-pv-msg.me[b-hjyyl780es] { align-self: flex-end; background: var(--hc); color: #fff; border-bottom-right-radius: 4px; }
.cs-pv-msg.shop[b-hjyyl780es] { align-self: flex-start; background: #fff; color: #1c2530; border: 1px solid #e4e8ef; border-bottom-left-radius: 4px; }
.cs-pv-compose[b-hjyyl780es] { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid #eef1f5; font-size: 11.5px; color: #94a3b8; }
.cs-pv-compose span[b-hjyyl780es] { flex: 1 1 auto; }
.cs-pv-compose i[b-hjyyl780es] { width: 22px; height: 22px; border-radius: 50%; background: var(--hc); }

/* [2026-10] สถานะ STUN/TURN ในการ์ดโทร */
.cs-call-note[b-hjyyl780es] {
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 12.5px;
    line-height: 1.5;
}

    .cs-call-note.ok[b-hjyyl780es] {
        background: #ecfdf5;
        color: #065f46;
    }
/* /Components/Pages/BackEnd/Customer/AddCustomer.razor.rz.scp.css */
/* /Components/Pages/BackEnd/Customer/Componants/CustomerCartViewer.razor.rz.scp.css */
.ccv-root[b-rvyimj25ss] {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 18px 16px 32px;
    font-family: "IBM Plex Sans Thai", system-ui, sans-serif;
}

.ccv-head[b-rvyimj25ss] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ccv-back[b-rvyimj25ss] {
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #B9E0DC;
    background: #fff;
    color: #0B7A75;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .ccv-back:hover[b-rvyimj25ss] {
        background: #E7F5F4;
    }

.ccv-titles[b-rvyimj25ss] {
    flex: 1;
    min-width: 0;
}

.ccv-title[b-rvyimj25ss] {
    font-size: 17px;
    font-weight: 700;
    color: #14213d;
}

.ccv-sub[b-rvyimj25ss] {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 2px;
}

.ccv-tag[b-rvyimj25ss] {
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1f2f5;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
}

    .ccv-tag.edit[b-rvyimj25ss] {
        background: #E7F5F4;
        color: #0B7A75;
    }

.ccv-noperm[b-rvyimj25ss] {
    margin-top: 18px;
    padding: 40px 20px;
    border: 1px solid #e4e8ef;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    font-size: 13px;
    color: #9aa1ae;
}
/* /Components/Pages/BackEnd/Customer/Componants/SearchCustomer.razor.rz.scp.css */
.MainBox[b-efl1342ozu] {
    width: 960px;
    background: white;
    border: solid 1px black;
    border-radius: 10px;
    margin: 0 auto;
    padding: 15px;
}

.FilterCheckBox[b-efl1342ozu] {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.FilterCheckBox label[b-efl1342ozu] {
    margin-left: 5px;
}

.Column1[b-efl1342ozu] 
{
    width: 150px;
    text-align: center;
}

.Column2[b-efl1342ozu]
{
    width: 250px;
    text-align: center;
}

.Column3[b-efl1342ozu]
{
    width: 180px;
    text-align: center;
}

.Column4[b-efl1342ozu]
{
    flex: 1;
    text-align: center;
}

.ColumnHeadStyle[b-efl1342ozu] {
    background: #eeeeee;
    border: solid 1px #767676;
}

.ButtonStyle[b-efl1342ozu] {
    border: solid 1px rgb(77, 77, 77);
    border-radius: 5px;
}

.OperatorButton[b-efl1342ozu] {
    width: 70px;
}

.SelectedCustomer[b-efl1342ozu] {
    color: white;
    background: #767676;
}

.HideToDot[b-efl1342ozu] {
    overflow: hidden; 
    text-overflow: ellipsis;
    text-wrap: nowrap;
}
/* /Components/Pages/BackEnd/Customer/Componants/SearchCwCustomer.razor.rz.scp.css */
/* ===== ผูกบัญชีกับ CW — ใช้โครง pl-modal-overlay/pl-modal (minelist.css, global) + ส่วนต่อขยาย scw-* เฉพาะ popup นี้ ===== */

.scw-modal[b-o06y0np2en] {
    max-width: 980px;
}

.scw-body[b-o06y0np2en] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Search bar ── */
.scw-searchbar[b-o06y0np2en] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F5F7FA;
    border: 1.5px solid #E6EAF0;
    border-radius: 10px;
    padding: 0 6px 0 12px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.scw-searchbar:focus-within[b-o06y0np2en] {
    border-color: #0B7A75;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(11, 122, 117, 0.12);
}

.scw-searchicon[b-o06y0np2en] {
    font-size: 14px;
    opacity: .55;
}

.scw-searchinput[b-o06y0np2en] {
    flex: 1;
    height: 42px;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #1e293b;
}

.scw-searchbtn[b-o06y0np2en] {
    height: 34px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background: #0B7A75;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, transform .1s;
}
.scw-searchbtn:hover[b-o06y0np2en]   { background: #095E5A; }
.scw-searchbtn:active[b-o06y0np2en]  { transform: scale(0.97); }

/* ── Data table ── */
.scw-datazone[b-o06y0np2en] {
    display: flex;
    flex-direction: column;
    height: 380px;
    border: 1px solid #EEF1F5;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.scw-tablehead[b-o06y0np2en] {
    display: flex;
    flex-shrink: 0;
    background: #F5F7FA;
    border-bottom: 1px solid #E6EAF0;
}

.scw-th[b-o06y0np2en] {
    padding: 10px 14px;
    font-size: 11.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
}

.scw-tablebody[b-o06y0np2en] {
    flex: 1;
    overflow-y: auto;
}
.scw-tablebody[b-o06y0np2en]::-webkit-scrollbar        { width: 6px; }
.scw-tablebody[b-o06y0np2en]::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 3px; }
.scw-tablebody[b-o06y0np2en]::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.scw-row[b-o06y0np2en] {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #F5F7FA;
    cursor: pointer;
    transition: background .1s;
}
.scw-row:hover[b-o06y0np2en]     { background: #F0FBFA; }
.scw-row-selected[b-o06y0np2en]  {
    background: #E6F5F3 !important;
    box-shadow: inset 3px 0 0 #0B7A75;
}

.scw-td[b-o06y0np2en] {
    padding: 10px 14px;
    font-size: 13px;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.scw-codechip[b-o06y0np2en] {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: #E6F5F3;
    color: #0B7A75;
    font-size: 12px;
    font-weight: 700;
}

/* Column widths (shared header + body) */
.scw-col-code[b-o06y0np2en]  { width: 120px; min-width: 120px; }
.scw-col-name[b-o06y0np2en]  { width: 200px; min-width: 200px; }
.scw-col-nid[b-o06y0np2en]   { width: 170px; min-width: 170px; }
.scw-col-phone[b-o06y0np2en] { width: 130px; min-width: 130px; }
.scw-col-addr[b-o06y0np2en]  { flex: 1; min-width: 0; }

/* Empty / not-found state */
.scw-emptystate[b-o06y0np2en] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px 20px;
    color: #94a3b8;
    font-size: 13.5px;
    line-height: 1.9;
    text-align: center;
}
.scw-emptyicon[b-o06y0np2en] { font-size: 32px; margin-bottom: 8px; opacity: .7; }

/* ── Hint ── */
.scw-hint[b-o06y0np2en] {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
}

/* ── Footer buttons ── */
.scw-btn[b-o06y0np2en] {
    height: 38px;
    padding: 0 26px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 0;
    transition: opacity .15s, background .15s, transform .1s;
}
.scw-btn:active[b-o06y0np2en] { transform: scale(0.97); }

.scw-btn-ghost[b-o06y0np2en] {
    background: #ffffff;
    color: #475569;
    border: 1.5px solid #E6EAF0;
}
.scw-btn-ghost:hover[b-o06y0np2en] { background: #F5F7FA; }

.scw-btn-primary[b-o06y0np2en] {
    background: #0B7A75;
    color: #fff;
}
.scw-btn-primary:hover:not(:disabled)[b-o06y0np2en] { background: #095E5A; }
.scw-btn-primary:disabled[b-o06y0np2en] {
    background: #CBD5E1;
    cursor: not-allowed;
}

/* ── Responsive ── */
@media (max-width: 720px) {
    .scw-tablehead[b-o06y0np2en], .scw-row[b-o06y0np2en] { font-size: 12px; }
    .scw-col-nid[b-o06y0np2en], .scw-col-addr[b-o06y0np2en] { display: none; }
}
/* /Components/Pages/BackEnd/Customer/DataCustomer.razor.rz.scp.css */
.cd-wrap[b-o0acp24cjx] {
    min-height: 100%;
    /* [2026-10] ยืดเท่าพื้นที่ที่เหลือจริง (.ShowZone เป็น width:fit-content) — เดิม flex:1 มือถือ 390 หน้ากว้าง 754px */
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    color: #1b2333;
    font-family: 'IBM Plex Sans Thai', system-ui, sans-serif;
    background: #f7f8fa;
}

.cd-inner[b-o0acp24cjx] {
    padding: 14px 16px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
}

/* ---- top bar ---- */
.cd-topbar[b-o0acp24cjx] {
    position: sticky;
    top: var(--be-top-h, 0px);
    z-index: 30;
    background: #fff;
    border-bottom: 1px solid #e4e8ef;
    padding: 9px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cd-topbar-main[b-o0acp24cjx] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cd-topbar-badges[b-o0acp24cjx] {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 41px;
}

.cd-backbtn[b-o0acp24cjx] {
    width: 29px;
    height: 29px;
    flex: none;
    border: 1px solid #e0e5ee;
    background: #fff;
    border-radius: 8px;
    font-size: 14px;
    color: #5c6675;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cd-backbtn:hover[b-o0acp24cjx] {
        background: #f4f6fa;
        border-color: #c9d2e0;
    }

.cd-crumb[b-o0acp24cjx] {
    display: flex;
    gap: 5px;
    font-size: 11px;
    color: #8d95a3;
    flex-wrap: wrap;
}

.cd-titleblock[b-o0acp24cjx] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.cd-title[b-o0acp24cjx] {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cd-topactions[b-o0acp24cjx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---- generic buttons ---- */
.cd-btn[b-o0acp24cjx] {
    height: 32px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 12.5px;
    cursor: pointer;
    border: 1px solid #e0e5ee;
    background: #fff;
    color: #424d5e;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

    .cd-btn:hover[b-o0acp24cjx] {
        background: #f4f6fa;
        border-color: #c9d2e0;
    }

.cd-btn-primary[b-o0acp24cjx] {
    border: 0;
    background: #1f6fdd;
    color: #fff;
    font-weight: 600;
    padding: 0 17px;
}

    .cd-btn-primary:hover[b-o0acp24cjx] {
        background: #1a5cba;
    }

.cd-btn-danger[b-o0acp24cjx] {
    border-color: #f5cfcb;
    background: #fff;
    color: #a4231f;
}

    .cd-btn-danger:hover[b-o0acp24cjx] {
        background: #fdf4f3;
    }

.cd-btn-block[b-o0acp24cjx] {
    width: 100%;
}

.cd-btn-sm[b-o0acp24cjx] {
    height: 28px;
    padding: 0 10px;
    font-size: 11.5px;
}

/* ---- hero section ---- */
.cd-hero[b-o0acp24cjx] {
    background: #fff;
    border: 1px solid #e4e8ef;
    border-radius: 12px;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
    gap: 16px;
    align-items: start;
}

.cd-heroleft[b-o0acp24cjx] {
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-width: 0;
}

.cd-herotop[b-o0acp24cjx] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: stretch;
}

.cd-avatarcol[b-o0acp24cjx] {
    width: 316px;
    flex: none;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.cd-avataritem[b-o0acp24cjx] {
    width: 150px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cd-avatarbox[b-o0acp24cjx] {
    width: 150px;
    flex: 1;
    min-height: 118px;
    border: 1px solid #e4e8ef;
    border-radius: 9px;
    background: repeating-linear-gradient(45deg, #f1f4f8, #f1f4f8 7px, #e7ebf2 7px, #e7ebf2 14px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .cd-avatarbox img[b-o0acp24cjx] {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
    }

.cd-avatarbox-clickable[b-o0acp24cjx] {
    cursor: zoom-in;
}

    .cd-avatarbox-clickable:hover[b-o0acp24cjx] {
        border-color: #1f6fdd;
    }

.cd-avatarplaceholder[b-o0acp24cjx] {
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    font-size: 9.5px;
    color: #8d95a3;
    text-align: center;
    padding: 8px;
    line-height: 1.5;
}

.cd-avatarbtnrow[b-o0acp24cjx] {
    display: flex;
    gap: 8px;
}

.cd-avatarbtn[b-o0acp24cjx] {
    flex: 1;
    min-width: 0;
    height: 60px;
    border: 1px dashed #ccd4e0;
    border-radius: 8px;
    background: #fbfcfe;
    font-size: 9.5px;
    color: #7b8494;
    cursor: pointer;
    line-height: 1.4;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

    .cd-avatarbtn span[b-o0acp24cjx] {
        display: block;
    }

    .cd-avatarbtn u[b-o0acp24cjx] {
        color: #1f6fdd;
        text-decoration: underline;
    }

    .cd-avatarbtn:hover[b-o0acp24cjx] {
        border-color: #1f6fdd;
        color: #1f6fdd;
    }

.cd-herofields[b-o0acp24cjx] {
    flex: 1;
    min-width: 230px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cd-badgerow[b-o0acp24cjx] {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
}

.cd-badge[b-o0acp24cjx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    background: #f6f8fb;
    border: 1px solid #e4e8ef;
    color: #5c6675;
}

.cd-badge-active[b-o0acp24cjx] {
    background: #e8f6ee;
    border-color: #c6e7d5;
    color: #1f6b47;
}

.cd-badge-inactive[b-o0acp24cjx] {
    background: #fdecea;
    border-color: #f5cfcb;
    color: #a4231f;
}

.cd-badge-dot[b-o0acp24cjx] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.cd-badge-group[b-o0acp24cjx] {
    background: #eef4ff;
    border-color: #cfdcf7;
    color: #1e4fa3;
}

.cd-badge-warn[b-o0acp24cjx] {
    background: #fff4e5;
    border-color: #f6d9a8;
    color: #9a5b00;
}

/* แถบเตือน ผู้ใช้งานยังไม่มีกลุ่มสิทธิ์ */
.cd-warnbar[b-o0acp24cjx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: #fff8ec;
    border: 1px solid #f6d9a8;
    border-left: 4px solid #e08a00;
}

.cd-warnbar-icon[b-o0acp24cjx] {
    font-size: 18px;
    color: #e08a00;
    flex: 0 0 auto;
}

.cd-warnbar-text[b-o0acp24cjx] {
    flex: 1 1 auto;
    min-width: 0;
}

.cd-warnbar-title[b-o0acp24cjx] {
    font-size: 14px;
    font-weight: 600;
    color: #7a4800;
}

.cd-warnbar-sub[b-o0acp24cjx] {
    font-size: 12.5px;
    color: #8a6a3a;
    margin-top: 2px;
}

@media (max-width: 600px) {
    .cd-warnbar[b-o0acp24cjx] { flex-wrap: wrap; }
    .cd-warnbar .cd-btn[b-o0acp24cjx] { width: 100%; }
}

.cd-badge-mono[b-o0acp24cjx] {
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    background: #f6f8fb;
    border-color: #e4e8ef;
    color: #5c6675;
    font-weight: 500;
}

.cd-heroname[b-o0acp24cjx] {
    margin: 0;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.3px;
}

.cd-herosub[b-o0acp24cjx] {
    font-size: 12.5px;
    color: #5c6675;
    line-height: 1.6;
}

.cd-quickgrid[b-o0acp24cjx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 9px;
}

.cd-quick[b-o0acp24cjx] {
    border: 1px solid #e4e8ef;
    border-radius: 9px;
    padding: 8px 11px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cd-quick-k[b-o0acp24cjx] {
    font-size: 10.5px;
    color: #8d95a3;
}

.cd-quick-v[b-o0acp24cjx] {
    font-size: 16px;
    font-weight: 600;
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
}

.cd-herobottom[b-o0acp24cjx] {
    padding-top: 12px;
    border-top: 1px solid #f1f3f7;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cd-herobottomgrid[b-o0acp24cjx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 10px;
}

.cd-togglebox[b-o0acp24cjx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid #e4e8ef;
    border-radius: 9px;
    background: #fbfcfe;
    min-width: 0;
}

.cd-togglebox-label[b-o0acp24cjx] {
    font-size: 11.5px;
    font-weight: 600;
}

.cd-togglebox-hint[b-o0acp24cjx] {
    font-size: 10px;
    color: #8d95a3;
}

.cd-syncbox[b-o0acp24cjx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cd-syncbox label[b-o0acp24cjx] {
    font-size: 10.5px;
    color: #7b8494;
}

.cd-hintline[b-o0acp24cjx] {
    font-size: 10.5px;
    color: #9aa1ae;
    line-height: 1.5;
}

.cd-syncrow[b-o0acp24cjx] {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

    .cd-syncrow .cd-btn[b-o0acp24cjx] {
        height: auto;
    }

.cd-updatedline[b-o0acp24cjx] {
    font-size: 11px;
    color: #9aa1ae;
}

/* hero right column: points / credit / rows / actions */
.cd-heroright[b-o0acp24cjx] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.cd-statcards[b-o0acp24cjx] {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.cd-statcard[b-o0acp24cjx] {
    flex: 1;
    min-width: 130px;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cd-statcard.point[b-o0acp24cjx] {
    border: 1px solid #cfe0f7;
    background: #f2f7fe;
}

.cd-statcard.credit[b-o0acp24cjx] {
    border: 1px solid #f2ddbe;
    background: #fef8ee;
}

.cd-statcard-k[b-o0acp24cjx] {
    font-size: 10.5px;
}

.cd-statcard.point .cd-statcard-k[b-o0acp24cjx] { color: #4d6b96; }
.cd-statcard.credit .cd-statcard-k[b-o0acp24cjx] { color: #8a6524; }

.cd-statcard-v[b-o0acp24cjx] {
    font-size: 24px;
    font-weight: 700;
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    letter-spacing: -.5px;
}

.cd-statcard.point .cd-statcard-v[b-o0acp24cjx] { color: #123f79; }
.cd-statcard.credit .cd-statcard-v[b-o0acp24cjx] { color: #7a4f0d; }

.cd-statcard-bar[b-o0acp24cjx] {
    height: 4px;
    border-radius: 3px;
    background: #dbe7f8;
    overflow: hidden;
}

    .cd-statcard-bar > div[b-o0acp24cjx] {
        height: 100%;
        background: #1f6fdd;
    }

.cd-statcard-sub[b-o0acp24cjx] {
    font-size: 10px;
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
}

.cd-statcard.point .cd-statcard-sub[b-o0acp24cjx] { color: #4d6b96; }
.cd-statcard.credit .cd-statcard-sub[b-o0acp24cjx] { color: #8a6524; }

.cd-statcard-note[b-o0acp24cjx] {
    font-size: 9.5px;
    line-height: 1.5;
}

.cd-statcard.point .cd-statcard-note[b-o0acp24cjx] { color: #5a789f; }

.cd-rowbox[b-o0acp24cjx] {
    border: 1px solid #e4e8ef;
    border-radius: 10px;
    overflow: hidden;
}

.cd-rowbox-item[b-o0acp24cjx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f2f6;
}

    .cd-rowbox-item:last-child[b-o0acp24cjx] {
        border-bottom: 0;
    }

.cd-rowbox-k[b-o0acp24cjx] {
    font-size: 11.5px;
    color: #6b7688;
}

.cd-rowbox-v[b-o0acp24cjx] {
    font-size: 12.5px;
    font-weight: 600;
    text-align: right;
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
}

.cd-heroactions[b-o0acp24cjx] {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

/* ---- tab bar ---- */
/* [2026-10] เลิก sticky — เดิม top:132px ตายตัว ไม่ตรงความสูง topbar จริง แถบแท็บลอยค้างกลางจอ เนื้อหาโผล่ช่องว่างด้านบน */
.cd-tabsticky[b-o0acp24cjx] {
    position: relative;
    z-index: 20;
    background: #f7f8fa;
    padding-top: 2px;
}

.cd-tabbar[b-o0acp24cjx] {
    background: #fff;
    border: 1px solid #e4e8ef;
    border-radius: 12px 12px 0 0;
    border-bottom: 0;
    padding: 0 6px;
    display: flex;
    gap: 2px;
    overflow-x: auto;
}

.cd-tab[b-o0acp24cjx] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 41px;
    padding: 0 13px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-size: 12.5px;
    font-weight: 500;
    color: #6b7688;
    cursor: pointer;
    white-space: nowrap;
}

    .cd-tab:hover[b-o0acp24cjx] {
        color: #1b2333;
        border-bottom-color: #d6dde8;
    }

    .cd-tab.active[b-o0acp24cjx] {
        border-bottom-color: #1f6fdd;
        font-weight: 600;
        color: #123f79;
    }

.cd-tabline[b-o0acp24cjx] {
    height: 1px;
    background: #e4e8ef;
}

.cd-tabbody[b-o0acp24cjx] {
    animation: cdUp-b-o0acp24cjx .2s ease;
}

@keyframes cdUp-b-o0acp24cjx {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes cdFade-b-o0acp24cjx {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cdSlide-b-o0acp24cjx {
    from { transform: translateX(22px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ---- 2-column section grid (tab: ข้อมูลลูกค้า) ---- */
.cd-grid[b-o0acp24cjx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 16px;
    align-items: start;
}

.cd-col[b-o0acp24cjx] {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.cd-colhead[b-o0acp24cjx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px 2px;
}

.cd-colhead-label[b-o0acp24cjx] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .13em;
    color: #9aa1ae;
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
}

.cd-colhead-line[b-o0acp24cjx] {
    flex: 1;
    height: 1px;
    background: #e4e8ef;
}

.cd-section[b-o0acp24cjx] {
    background: #fff;
    border: 1px solid #e4e8ef;
    border-radius: 12px;
    overflow: hidden;
}

.cd-section-head[b-o0acp24cjx] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border-bottom: 1px solid #eef1f5;
    background: #fbfcfe;
}

.cd-section-num[b-o0acp24cjx] {
    flex: none;
    width: 21px;
    height: 21px;
    border-radius: 6px;
    background: #eaf2fd;
    color: #1a5cba;
    font-size: 10.5px;
    font-weight: 700;
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* จัดกลุ่มการ์ดด้วยสีของเลขลำดับ — แยกหมวดให้เห็นง่ายโดยไม่เปลี่ยนพื้นหลังการ์ด (พื้นหลังหลากสีจะรกและปนกับสี error/success ที่ใช้อยู่แล้ว) */
.cd-section-num-security[b-o0acp24cjx] {
    background: #f1eefc;
    color: #6d3fd6;
}

.cd-section-num-personal[b-o0acp24cjx] {
    background: #e9f8ee;
    color: #1f8a4c;
}

.cd-section-num-money[b-o0acp24cjx] {
    background: #fef3e2;
    color: #b3660a;
}

.cd-section-num-muted[b-o0acp24cjx] {
    background: #f1f2f5;
    color: #6b7280;
}

.cd-section-title[b-o0acp24cjx] {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    flex: 1;
    min-width: 0;
}

.cd-section-hint[b-o0acp24cjx] {
    display: inline-flex;
    align-items: center;
    height: 21px;
    padding: 0 8px;
    border-radius: 6px;
    background: #f2f7fe;
    border: 1px solid #cfe0f7;
    font-size: 10.5px;
    font-weight: 600;
    color: #1a5cba;
}

.cd-section-link[b-o0acp24cjx] {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 11.5px;
    color: #1f6fdd;
    cursor: pointer;
    font-weight: 600;
}

.cd-section-body[b-o0acp24cjx] {
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.cd-fieldgrid[b-o0acp24cjx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.cd-field[b-o0acp24cjx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cd-label[b-o0acp24cjx] {
    font-size: 11px;
    color: #7b8494;
}

.cd-need[b-o0acp24cjx] {
    color: #d9483f;
    margin-left: 2px;
}

.cd-input[b-o0acp24cjx], .cd-select[b-o0acp24cjx], .cd-textarea[b-o0acp24cjx] {
    height: 34px;
    padding: 0 10px;
    border: 1px solid #e2e7ef;
    border-radius: 7px;
    font-size: 12.5px;
    outline: none;
    background: #fdfdfe;
    min-width: 0;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

    .cd-input:focus[b-o0acp24cjx], .cd-select:focus[b-o0acp24cjx], .cd-textarea:focus[b-o0acp24cjx] {
        border-color: #1f6fdd;
        background: #fff;
    }

    .cd-input:disabled[b-o0acp24cjx] {
        background: #f3f4f7;
        color: #9aa1ae;
    }

.cd-textarea[b-o0acp24cjx] {
    height: auto;
    min-height: 58px;
    padding: 9px 11px;
    line-height: 1.6;
    resize: vertical;
}

.cd-static[b-o0acp24cjx] {
    min-height: 34px;
    padding: 7px 10px;
    border: 1px dashed #e2e7ef;
    border-radius: 7px;
    background: #f8f9fc;
    font-size: 12.5px;
    color: #6b7688;
    display: flex;
    align-items: center;
}

/* ใช้กับข้อมูลสำคัญ (บัญชีผู้ใช้/รหัสผ่าน) — ให้เด่นกว่า .cd-static ปกติ ไม่ใช่เส้นประจาง ๆ ปนกับ field อื่น */
.cd-static-strong[b-o0acp24cjx] {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #d7e3f7;
    background: #f2f7fe;
    font-size: 13.5px;
    font-weight: 600;
    color: #123f79;
}

.cd-static-mono[b-o0acp24cjx] {
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    letter-spacing: 1px;
}

.cd-alert[b-o0acp24cjx] {
    color: #d9483f;
    font-size: 11px;
    margin-top: 2px;
}

/* field ที่มี .cd-alert แสดงอยู่ → กรอบ input เป็นสีแดง (หายเองเมื่อ alert ถูกเคลียร์) */
.cd-field:has(.cd-alert) .cd-input[b-o0acp24cjx],
.cd-field:has(.cd-alert) .cd-select[b-o0acp24cjx],
.cd-field:has(.cd-alert) .cd-textarea[b-o0acp24cjx] {
    border-color: #d9483f;
    background: #fff6f5;
}

    .cd-field:has(.cd-alert) .cd-input:focus[b-o0acp24cjx],
    .cd-field:has(.cd-alert) .cd-select:focus[b-o0acp24cjx],
    .cd-field:has(.cd-alert) .cd-textarea:focus[b-o0acp24cjx] {
        border-color: #d9483f;
        box-shadow: 0 0 0 3px rgba(217, 72, 63, .12);
    }

.cd-pillrow[b-o0acp24cjx] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cd-pill[b-o0acp24cjx] {
    height: 34px;
    padding: 0 13px;
    border: 1px solid #e0e5ee;
    background: #fff;
    color: #5c6675;
    border-radius: 7px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
}

    .cd-pill:hover[b-o0acp24cjx] {
        background: #f4f6fa;
    }

    .cd-pill.active[b-o0acp24cjx] {
        border-color: #1f6fdd;
        background: #1f6fdd;
        color: #fff;
        font-weight: 600;
    }

.cd-pill-sm[b-o0acp24cjx] {
    height: 28px;
    padding: 0 11px;
    font-size: 11.5px;
}

/* toggle row (holds <ModernToggle>) */
.cd-togglerow[b-o0acp24cjx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border: 1px solid #e4e8ef;
    border-radius: 8px;
    background: #fbfcfe;
}

.cd-togglerow-label[b-o0acp24cjx] {
    font-size: 12.5px;
    font-weight: 500;
}

.cd-togglerow-hint[b-o0acp24cjx] {
    font-size: 10.5px;
    color: #8d95a3;
}

.cd-lockednote[b-o0acp24cjx] {
    font-size: 11px;
    color: #8a6524;
    background: #fef8ee;
    border: 1px solid #f2ddbe;
    border-radius: 8px;
    padding: 9px 11px;
    line-height: 1.6;
}

.cd-hr[b-o0acp24cjx] {
    height: 1px;
    background: #f1f3f7;
}

/* point/credit/purchase log rows */
.cd-lotsum[b-o0acp24cjx] {
    font-size: 12.5px;
    color: #4b5666;
    background: #f5f7fa;
    border-radius: 9px;
    padding: 8px 10px;
}

.cd-lotrow[b-o0acp24cjx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e9edf3;
    border-radius: 11px;
}

.cd-lotrow-main[b-o0acp24cjx] {
    flex: 1;
    min-width: 0;
}

.cd-lotrow-code[b-o0acp24cjx] {
    font-size: 13px;
    font-weight: 600;
}

.cd-lotrow-sub[b-o0acp24cjx] {
    font-size: 11.5px;
    color: #8d95a3;
    margin-top: 2px;
}

.cd-lotrow-v[b-o0acp24cjx] {
    font-size: 13.5px;
    font-weight: 700;
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    flex: none;
}

.cd-empty[b-o0acp24cjx] {
    font-size: 12.5px;
    color: #9aa1ae;
    line-height: 1.6;
}

/* tags */
.cd-tagrow[b-o0acp24cjx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
}

.cd-tag[b-o0acp24cjx] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px 5px 10px;
    border-radius: 7px;
    background: #f4f6fa;
    border: 1px solid #e4e8ef;
    font-size: 11.5px;
    color: #424d5e;
}

.cd-tag-x[b-o0acp24cjx] {
    width: 17px;
    height: 17px;
    border: 0;
    border-radius: 4px;
    background: #e2e7ef;
    color: #5c6675;
    font-size: 10px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cd-tag-x:hover[b-o0acp24cjx] {
        background: #cfd6e1;
    }

.cd-addrow[b-o0acp24cjx] {
    display: flex;
    gap: 8px;
}

/* note/other cards */
.cd-notecard[b-o0acp24cjx] {
    background: #fff;
    border: 1px solid #e4e8ef;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cd-notecard-bar[b-o0acp24cjx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: #1f6fdd;
}

.cd-notecard-title[b-o0acp24cjx] {
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
}

.cd-notecard-hint[b-o0acp24cjx] {
    font-size: 10px;
    color: rgba(255,255,255,.78);
}

.cd-notecard-body[b-o0acp24cjx] {
    padding: 12px 13px;
}

/* member / summary group cards */
.cd-groupcard[b-o0acp24cjx] {
    background: #fff;
    border: 1px solid #e4e8ef;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.cd-groupcard-head[b-o0acp24cjx] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.cd-groupcard-title[b-o0acp24cjx] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

/* summary card (table style) */
.cd-sumcard[b-o0acp24cjx] {
    border: 1px solid #e4e8ef;
    border-radius: 10px;
    overflow: hidden;
}

.cd-sumcard-head[b-o0acp24cjx] {
    padding: 8px 12px;
    background: #f6f8fb;
    border-bottom: 1px solid #e4e8ef;
    font-size: 12px;
    font-weight: 600;
}

.cd-sumcard-body[b-o0acp24cjx] {
    padding: 4px 12px 9px;
}

.cd-sumrow[b-o0acp24cjx] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f2f4f8;
}

    .cd-sumrow:last-child[b-o0acp24cjx] {
        border-bottom: 0;
    }

.cd-sumrow-k[b-o0acp24cjx] {
    font-size: 12px;
    color: #6b7688;
}

.cd-sumrow-v[b-o0acp24cjx] {
    font-size: 13px;
    font-weight: 600;
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
}

/* filter bar (date range + scope pills) */
.cd-filterbar[b-o0acp24cjx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cd-filterbar .cd-scope[b-o0acp24cjx] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* ---- popup: ดูรูปภาพขนาดใหญ่ ---- */
.cd-imgpreview-overlay[b-o0acp24cjx] {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 30, 0.72);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.cd-imgpreview-modal[b-o0acp24cjx] {
    background: #fff;
    border-radius: 12px;
    max-width: min(90vw, 820px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

.cd-imgpreview-head[b-o0acp24cjx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #e4e8ef;
}

.cd-imgpreview-title[b-o0acp24cjx] {
    font-size: 13px;
    font-weight: 600;
    color: #1b2333;
}

.cd-imgpreview-close[b-o0acp24cjx] {
    border: none;
    background: transparent;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    color: #7b8494;
    padding: 4px 6px;
    border-radius: 6px;
}

    .cd-imgpreview-close:hover[b-o0acp24cjx] {
        background: #f1f4f8;
        color: #1b2333;
    }

.cd-imgpreview-body[b-o0acp24cjx] {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg, #f1f4f8, #f1f4f8 7px, #e7ebf2 7px, #e7ebf2 14px);
    padding: 12px;
}

    .cd-imgpreview-body img[b-o0acp24cjx] {
        max-width: 100%;
        max-height: 78vh;
        object-fit: contain;
    }

/* table */
.cd-tablewrap[b-o0acp24cjx] {
    overflow-x: auto;
    border: 1px solid #e4e8ef;
    border-radius: 10px;
}

.cd-table[b-o0acp24cjx] {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

    .cd-table thead tr[b-o0acp24cjx] {
        background: #f6f8fb;
    }

    .cd-table th[b-o0acp24cjx] {
        padding: 9px 12px;
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        color: #5c6675;
        border-bottom: 1px solid #e4e8ef;
        white-space: nowrap;
    }

    .cd-table td[b-o0acp24cjx] {
        padding: 9px 12px;
        font-size: 12px;
        border-bottom: 1px solid #f2f4f8;
    }

    .cd-table tr:hover td[b-o0acp24cjx] {
        background: #fafbfd;
    }

    .cd-table td.mono[b-o0acp24cjx] {
        font-family: 'IBM Plex Mono', 'Consolas', monospace;
        white-space: nowrap;
    }

    .cd-table td.num[b-o0acp24cjx] {
        text-align: right;
        font-weight: 600;
        font-family: 'IBM Plex Mono', 'Consolas', monospace;
    }

.cd-tableempty[b-o0acp24cjx] {
    padding: 24px;
    text-align: center;
    font-size: 12px;
    color: #9aa1ae;
}

/* bottom actions */
.cd-bottombar[b-o0acp24cjx] {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    padding-top: 2px;
    align-items: center;
}

.cd-vline[b-o0acp24cjx] {
    width: 1px;
    height: 24px;
    background: #e4e8ef;
}

/* ---- drawer (quick edit) ---- */
.cd-drawerbackdrop[b-o0acp24cjx] {
    position: fixed;
    inset: 0;
    background: rgba(17,24,38,.42);
    z-index: 60;
    animation: cdFade-b-o0acp24cjx .16s ease;
}

.cd-drawer[b-o0acp24cjx] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(560px, 100%);
    background: #fff;
    z-index: 61;
    display: flex;
    flex-direction: column;
    box-shadow: -16px 0 42px rgba(17,24,38,.2);
    animation: cdSlide-b-o0acp24cjx .22s ease;
}

.cd-drawerhead[b-o0acp24cjx] {
    padding: 14px 16px;
    border-bottom: 1px solid #e4e8ef;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cd-drawertitle[b-o0acp24cjx] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.cd-drawersub[b-o0acp24cjx] {
    font-size: 11.5px;
    color: #8d95a3;
}

.cd-drawerclose[b-o0acp24cjx] {
    width: 30px;
    height: 30px;
    flex: none;
    border: 1px solid #e0e5ee;
    background: #fff;
    border-radius: 7px;
    font-size: 14px;
    color: #5c6675;
    cursor: pointer;
    line-height: 1;
}

    .cd-drawerclose:hover[b-o0acp24cjx] {
        background: #f4f6fa;
    }

.cd-drawerbody[b-o0acp24cjx] {
    flex: 1;
    overflow: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cd-drawersection[b-o0acp24cjx] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.cd-drawersection-label[b-o0acp24cjx] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    color: #8d95a3;
}

.cd-drawerfoot[b-o0acp24cjx] {
    padding: 12px 16px;
    border-top: 1px solid #e4e8ef;
    display: flex;
    gap: 9px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background: #fafbfc;
}

@media (max-width: 980px) {
    .cd-grid[b-o0acp24cjx] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .cd-hero[b-o0acp24cjx] {
        grid-template-columns: 1fr;
    }
}

/* ---- ข้อมูลจากบัตรประชาชน [2026-10] ---- */
.cd-idcard[b-o0acp24cjx] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.cd-idcard-photo[b-o0acp24cjx] {
    flex: 0 0 84px;
    height: 104px;
    border-radius: 8px;
    border: 1px solid #e4e8ef;
    background: #f1f3f7;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #9aa1ae;
}

    .cd-idcard-photo img[b-o0acp24cjx] { width: 100%; height: 100%; object-fit: cover; }

.cd-idcard-fields[b-o0acp24cjx] { flex: 1 1 auto; min-width: 0; }

.cd-idcard-wide[b-o0acp24cjx] { grid-column: 1 / -1; }

.cd-idcard-expired[b-o0acp24cjx] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fff4e5;
    color: #9a5b0f;
    font-size: 11px;
}

.cd-idcard-pending[b-o0acp24cjx] {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff4e5;
    color: #8a4b08;
    font-size: 12px;
}

@media (max-width: 560px) {
    .cd-idcard[b-o0acp24cjx] { flex-direction: column; }
}

/* ---- โหมด popup (หน้าขาย: เพิ่มลูกค้าใหม่จากบัตร) ---- */
.cd-popupmode .cd-topbar[b-o0acp24cjx] { top: 0; }
.cd-popupmode[b-o0acp24cjx] { min-height: 0; }

/* ---- ลูกค้าที่ยังไม่มีบัญชีเข้าเว็บ (สร้างจากหน้าขาย) ---- */
.cd-nologin-hint[b-o0acp24cjx] {
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff4e5;
    color: #8a4b08;
    font-size: 12px;
    line-height: 1.5;
}
/* /Components/Pages/BackEnd/Customer/EditCustomer.razor.rz.scp.css */
.ButtonBack[b-wy42qig1sv] {
    margin: 20px;
    background: #1d2327;
    width: fit-content;
    padding: 5px 20px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}
/* /Components/Pages/BackEnd/Customer/RequestCustomerRegistor.razor.rz.scp.css */
.MainDiv[b-faf07yojij] {
    padding: 15px;
}

.TitleMain[b-faf07yojij] {
    font-size: 25px;
}

.AllProductsStatusZone[b-faf07yojij] {
    display: flex;
    font-size: 15px;
    color: #2271b1;
    margin-top: 10px;
}

    .AllProductsStatusZone .Space[b-faf07yojij] {
        margin-right: 5px;
        margin-left: 5px;
        color: black;
    }

.SetItCenter[b-faf07yojij] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.Row[b-faf07yojij] {
    font-size: 13px;
}

    .Row .User[b-faf07yojij] {
        font-size: 15px;
        cursor: pointer;
        color: #2271b1;
    }

    .Row .Edit[b-faf07yojij] {
        font-size: 13px;
        cursor: pointer;
        color: #2271b1;
    }

    .Row .Slash[b-faf07yojij] {
        font-size: 16px;
    }

    .Row .Delete[b-faf07yojij] {
        color: #be0202;
        cursor: pointer;
    }

.MenuBoxCss:hover[b-faf07yojij] {
    filter: brightness(0.5);
}

.CommandSelect[b-faf07yojij] {
    font-size: 15px;
    height: 35px;
    display: flex;
    align-items: center;
    border-radius: 5px;
}

.PageButtonCss[b-faf07yojij] {
    font-size: 15px;
    padding: 0px 5px 0px 5px;
    border: solid 1px #2271b1;
    color: #2271b1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    transition: 0.2s;
    cursor: pointer;
    user-select: none;
    height: 25px;
    width: 25px;
    font-size: 10px;
}

    .PageButtonCss:hover[b-faf07yojij] {
        filter: brightness(0.5);
    }

.PageInputCss[b-faf07yojij] {
    width: 40px;
    border-radius: 5px;
    outline: none;
    border: solid 1px rgba(0,0,0,0.5);
    text-align: center;
    height: 25px;
}


.TableShowDataList[b-faf07yojij] {
    table-layout: fixed;
    width: 100%;
    border: solid 1px #c3c4c7;
    margin-top: 10px;
    background: #ffffff;
    margin-bottom: 10px;
}

    .TableShowDataList thead[b-faf07yojij] {
        border: solid 1px #c3c4c7;
    }

        .TableShowDataList thead tr th[b-faf07yojij] {
            font-weight: normal;
            color: #2271b1;
            height: 40px;
            vertical-align: middle;
            cursor: pointer;
            user-select: none;
        }

    .TableShowDataList tbody tr td[b-faf07yojij] {
        height: 57px;
    }

        .TableShowDataList tbody tr td img[b-faf07yojij] {
            max-width: 40px;
            max-height: 40px;
        }

    .TableShowDataList input[b-faf07yojij] {
        width: 17px;
        height: 17px;
    }

    .TableShowDataList tfoot[b-faf07yojij] {
        border: solid 1px #c3c4c7;
    }

        .TableShowDataList tfoot tr th[b-faf07yojij] {
            font-weight: normal;
            color: #2271b1;
            height: 40px;
            vertical-align: middle;
            cursor: pointer;
            user-select: none;
        }
/* /Components/Pages/BackEnd/HeaderZone.razor.rz.scp.css */
/* แถบบนมือถือ — สูงเท่ากับ --be-top-h (BackEndMainLayout.razor.css) ; จอ >768 ไม่แสดง */
.Main[b-gw1enw8vdl] {
    display: none;
}

@media (max-width: 768px) {
    .Main[b-gw1enw8vdl] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 52px;
        z-index: 6;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 12px 0 6px;
        background: #fff;
        border-bottom: 1px solid #e6e9ee;
    }
}

.MenuBar[b-gw1enw8vdl] {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    cursor: pointer;
    color: #3d4852;
}

    .MenuBar:hover[b-gw1enw8vdl] {
        background: #f1f4f6;
    }

/* GoogleFont (Material Symbols) ประกาศ @font-face ใน MenuZone.razor.css — "menu" */
.MenuBarIcon[b-gw1enw8vdl]::before {
    font-family: GoogleFont;
    content: "\e5d2";
    font-size: 24px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.Logo[b-gw1enw8vdl] {
    height: 34px;
    width: auto;
}
/* /Components/Pages/BackEnd/Help/Componant/HelpAppInfoCard.razor.rz.scp.css */
.hi-top[b-9bggvkz22r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 18px 16px;
    background: linear-gradient(180deg, #e7f5f4 0%, #fff 100%);
    border-bottom: 1px solid #e4e8ef;
}

.hi-logo[b-9bggvkz22r] {
    width: 76px;
    height: 76px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e4e8ef;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 10px;
}

    .hi-logo img[b-9bggvkz22r] {
        max-width: 80%;
        max-height: 80%;
        object-fit: contain;
    }

.hi-name[b-9bggvkz22r] {
    font-size: 18px;
    font-weight: 700;
}

.hi-sub[b-9bggvkz22r] {
    font-size: 12.5px;
    color: #6b7684;
    margin-top: 2px;
}

.hi-chips[b-9bggvkz22r] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 14px;
}

.hi-chip[b-9bggvkz22r] {
    background: #fff;
    border: 1px solid #e4e8ef;
    border-radius: 10px;
    padding: 8px 10px;
    text-align: left;
}

    .hi-chip.wide[b-9bggvkz22r] {
        grid-column: 1 / -1;
    }

.hi-k[b-9bggvkz22r] {
    font-size: 11px;
    color: #6b7684;
}

.hi-v[b-9bggvkz22r] {
    font-family: 'IBM Plex Mono', Consolas, monospace;
    font-size: 13.5px;
    font-weight: 600;
    color: #0B7A75;
    margin-top: 1px;
    word-break: break-all;
}

.hi-body[b-9bggvkz22r] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 18px 16px;
}

.hi-contact[b-9bggvkz22r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 13px;
    color: #1c2530;
    text-decoration: none;
    word-break: break-all;
}

    .hi-contact:hover[b-9bggvkz22r] {
        background: #f4f6f9;
        color: #0B7A75;
    }

.hi-ico[b-9bggvkz22r] {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #eef1f5;
    color: #4a5868;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

    .hi-ico.fb[b-9bggvkz22r] {
        background: #e8f0fe;
        color: #1877f2;
    }

.hi-copy[b-9bggvkz22r] {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #f1f3f6;
    font-size: 11.5px;
    color: #8a94a3;
    text-align: center;
}
/* /Components/Pages/BackEnd/Help/License.razor.rz.scp.css */
/* License — เฉพาะส่วนที่ไม่มีใน minesettings.css (ธีมกลาง st-*) */

.lc-layout[b-4cgc2j9yxg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}

/* ---------- status ---------- */
.lc-status-main[b-4cgc2j9yxg] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid #e4e8ef;
}

.lc-status-icon[b-4cgc2j9yxg] {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    background: #94a3b8;
}

.lc-ok .lc-status-icon[b-4cgc2j9yxg] {
    background: #16a34a;
}

.lc-warn .lc-status-icon[b-4cgc2j9yxg] {
    background: #d97706;
}

.lc-bad .lc-status-icon[b-4cgc2j9yxg] {
    background: #dc2626;
}

.lc-ok .lc-status-main[b-4cgc2j9yxg] {
    background: linear-gradient(90deg, #e8f6ee 0%, #fff 70%);
}

.lc-warn .lc-status-main[b-4cgc2j9yxg] {
    background: linear-gradient(90deg, #fff6e8 0%, #fff 70%);
}

.lc-bad .lc-status-main[b-4cgc2j9yxg] {
    background: linear-gradient(90deg, #fdecea 0%, #fff 70%);
}

.lc-status-text[b-4cgc2j9yxg] {
    flex: 1 1 auto;
    min-width: 0;
}

.lc-status-title[b-4cgc2j9yxg] {
    font-size: 18px;
    font-weight: 700;
}

.lc-status-sub[b-4cgc2j9yxg] {
    font-size: 13px;
    color: #4a5868;
    margin-top: 2px;
}

.lc-kpis[b-4cgc2j9yxg] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 18px;
}

.lc-kpi-v[b-4cgc2j9yxg] {
    font-size: 15px;
    font-weight: 600;
    margin-top: 4px;
}

.lc-kpi-sub[b-4cgc2j9yxg] {
    font-size: 12px;
    color: #6b7684;
    margin-top: 2px;
}

    .lc-kpi-sub.warn[b-4cgc2j9yxg] {
        color: #b45309;
        font-weight: 600;
    }

    .lc-kpi-sub.bad[b-4cgc2j9yxg] {
        color: #b42318;
        font-weight: 600;
    }

/* ---------- detail values ---------- */
.lc-val[b-4cgc2j9yxg] {
    font-size: 14px;
    text-align: right;
    word-break: break-all;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

    .lc-val.mono[b-4cgc2j9yxg] {
        font-family: 'IBM Plex Mono', Consolas, monospace;
        font-size: 13px;
    }

.lc-serial[b-4cgc2j9yxg] {
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ---------- system info ---------- */
.lc-clickhead[b-4cgc2j9yxg] {
    cursor: pointer;
    user-select: none;
}

.lc-caret[b-4cgc2j9yxg] {
    color: #6b7684;
    font-size: 18px;
    transition: transform .15s;
}

    .lc-caret.open[b-4cgc2j9yxg] {
        transform: rotate(90deg);
    }

.lc-sysgrid[b-4cgc2j9yxg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    padding: 14px 18px 18px;
}

.lc-sys[b-4cgc2j9yxg] {
    background: #f8fafc;
    border: 1px solid #eef1f5;
    border-radius: 8px;
    padding: 8px 10px;
    min-width: 0;
}

.lc-sys-k[b-4cgc2j9yxg] {
    font-size: 11px;
    color: #6b7684;
}

.lc-sys-v[b-4cgc2j9yxg] {
    font-family: 'IBM Plex Mono', Consolas, monospace;
    font-size: 12px;
    word-break: break-all;
    margin-top: 1px;
}

/* ---------- hub ---------- */
.lc-hub[b-4cgc2j9yxg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px;
    border-radius: 8px;
    background: #f4f6f9;
    font-size: 12px;
    color: #4a5868;
    font-family: 'IBM Plex Mono', Consolas, monospace;
}

.lc-hub-dot[b-4cgc2j9yxg] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
}

    .lc-hub-dot.ok[b-4cgc2j9yxg] {
        background: #16a34a;
    }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
    .lc-kpis[b-4cgc2j9yxg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .lc-layout[b-4cgc2j9yxg] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .lc-status-main[b-4cgc2j9yxg] {
        flex-wrap: wrap;
    }

        .lc-status-main .st-btn[b-4cgc2j9yxg] {
            width: 100%;
        }

    .lc-kpis[b-4cgc2j9yxg] {
        grid-template-columns: minmax(0, 1fr);
    }

    .lc-val[b-4cgc2j9yxg] {
        justify-content: flex-start;
        text-align: left;
    }
}
/* /Components/Pages/BackEnd/Help/UpdateLogs.razor.rz.scp.css */
/* UpdateLogs — เฉพาะส่วนที่ไม่มีใน minesettings.css (ธีมกลาง st-*) */

.ul-accent[b-ooujxv7lfd] {
    color: #0B7A75;
    font-family: 'IBM Plex Mono', Consolas, monospace;
}

.ul-layout[b-ooujxv7lfd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.ul-aside[b-ooujxv7lfd] {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- toolbar ---------- */
.ul-toolbar[b-ooujxv7lfd] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #e4e8ef;
    border-radius: 14px;
    padding: 10px 12px;
}

.ul-search[b-ooujxv7lfd] {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}

    .ul-search > span[b-ooujxv7lfd] {
        position: absolute;
        left: 11px;
        top: 50%;
        transform: translateY(-50%);
        color: #6b7684;
    }

    .ul-search .st-input[b-ooujxv7lfd] {
        padding-left: 30px;
        padding-right: 30px;
    }

.ul-clear[b-ooujxv7lfd] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #6b7684;
    cursor: pointer;
}

.ul-toolbar-end[b-ooujxv7lfd] {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

/* ---------- version card ---------- */
.ul-ver.latest[b-ooujxv7lfd] {
    border-color: #0B7A75;
    box-shadow: 0 0 0 3px rgba(11, 122, 117, .10);
}

.ul-ver-head[b-ooujxv7lfd] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    background: #fbfcfd;
}

.ul-ver-badge[b-ooujxv7lfd] {
    font-family: 'IBM Plex Mono', Consolas, monospace;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: #0B7A75;
    padding: 3px 10px;
    border-radius: 8px;
}

.ul-ver.latest .ul-ver-badge[b-ooujxv7lfd] {
    background: linear-gradient(135deg, #0B7A75, #0f9a93);
}

.ul-ver-date[b-ooujxv7lfd] {
    font-size: 13px;
    color: #6b7684;
}

.ul-flex[b-ooujxv7lfd] {
    flex: 1 1 auto;
}

.ul-ver-stats[b-ooujxv7lfd] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ul-mini[b-ooujxv7lfd] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    background: #eef1f5;
    color: #4a5868;
}

.ul-caret[b-ooujxv7lfd] {
    color: #6b7684;
    font-size: 18px;
    transition: transform .15s;
}

    .ul-caret.open[b-ooujxv7lfd] {
        transform: rotate(90deg);
    }

.ul-ver-body[b-ooujxv7lfd] {
    border-top: 1px solid #e4e8ef;
    padding: 6px 18px 12px;
}

/* ---------- item ---------- */
.ul-item[b-ooujxv7lfd] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    border-top: 1px solid #f1f3f6;
}

    .ul-item:first-child[b-ooujxv7lfd] {
        border-top: 0;
    }

.ul-type[b-ooujxv7lfd] {
    flex: 0 0 112px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    padding: 3px 6px;
    border-radius: 6px;
    background: #eef1f5;
    color: #4a5868;
    margin-top: 1px;
}

.ul-lines[b-ooujxv7lfd] {
    flex: 1 1 auto;
    min-width: 0;
}

.ul-line[b-ooujxv7lfd] {
    font-size: 14px;
    line-height: 1.6;
}

.ul-note[b-ooujxv7lfd] {
    font-size: 12.5px;
    color: #4f46e5;
    line-height: 1.5;
    margin-top: 2px;
}

    .ul-note.inline[b-ooujxv7lfd] {
        margin-left: 4px;
    }

    .ul-note.warn[b-ooujxv7lfd] {
        color: #b45309;
    }

/* ชนิด: ใหม่ / แก้ไข / แผน / ทั่วไป */
.k-feature .ul-type[b-ooujxv7lfd], .ul-mini.k-feature[b-ooujxv7lfd] {
    background: #e8f6ee;
    color: #15803d;
}

.k-fix .ul-type[b-ooujxv7lfd], .ul-mini.k-fix[b-ooujxv7lfd] {
    background: #fff6e8;
    color: #b45309;
}

.k-future .ul-type[b-ooujxv7lfd], .ul-mini.k-future[b-ooujxv7lfd] {
    background: #eef0fb;
    color: #4f46e5;
}

/* ---------- jump list ---------- */
.ul-jump[b-ooujxv7lfd] {
    padding: 8px;
    max-height: calc(100vh - 560px);
    min-height: 160px;
    overflow-y: auto;
}

.ul-jump-head[b-ooujxv7lfd] {
    font-size: 11.5px;
    font-weight: 600;
    color: #6b7684;
    padding: 6px 8px;
}

.ul-jump-item[b-ooujxv7lfd] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

    .ul-jump-item:hover[b-ooujxv7lfd] {
        background: #f4f6f9;
    }

    .ul-jump-item.latest .ul-jump-v[b-ooujxv7lfd] {
        color: #0B7A75;
    }

.ul-jump-v[b-ooujxv7lfd] {
    font-family: 'IBM Plex Mono', Consolas, monospace;
    font-weight: 600;
    font-size: 13px;
}

.ul-jump-d[b-ooujxv7lfd] {
    flex: 1 1 auto;
    font-size: 12px;
    color: #6b7684;
}

.ul-jump-c[b-ooujxv7lfd] {
    font-size: 11px;
    color: #6b7684;
    background: #eef1f5;
    border-radius: 999px;
    padding: 1px 7px;
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
    .ul-layout[b-ooujxv7lfd] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ul-aside[b-ooujxv7lfd] {
        position: static;
        order: -1;
    }

    .ul-jump[b-ooujxv7lfd] {
        max-height: 240px;
    }
}

@media (max-width: 640px) {
    .ul-item[b-ooujxv7lfd] {
        flex-direction: column;
        gap: 6px;
    }

    .ul-type[b-ooujxv7lfd] {
        flex: 0 0 auto;
    }

    .ul-toolbar-end[b-ooujxv7lfd] {
        margin-left: 0;
    }

    .ul-ver-stats[b-ooujxv7lfd] {
        width: 100%;
    }
}
/* /Components/Pages/BackEnd/Main/Main.razor.rz.scp.css */
body[b-0fyff7eb6c] {
}
/* /Components/Pages/BackEnd/Media/ImagePreviewFullDetail.razor.rz.scp.css */
/* ===== Media full-detail preview — ใช้ pl-modal-overlay/pl-modal จาก minelist.css เป็นโครง + ส่วนต่อขยาย ipd-* ===== */

.ipd-overlay[b-4q1lfp8aud] {
    /* popup นี้ render นอก .pl-root (ตัวกำหนดตัวแปรสีใน minelist.css) — ประกาศซ้ำที่นี่กันปุ่ม pl-btn-primary จางเพราะ var(--pl-teal) ไม่มีค่า */
    --pl-teal: #0B7A75;
    --pl-teal-dark: #095E5A;
    --pl-ink: #0F172A;
    --pl-line: #E4E9F0;
    --pl-line-soft: #EDF1F6;
    --pl-muted: #8A94A6;
    z-index: 9999999;
    padding: 24px;
}

.ipd-modal[b-4q1lfp8aud] {
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ipd-headactions[b-4q1lfp8aud] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.ipd-body[b-4q1lfp8aud] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: auto;
}

.ipd-preview[b-4q1lfp8aud] {
    flex: 1 1 65%;
    min-width: 0;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0F172A08;
    border-right: 1px solid var(--pl-line-soft, #EDF1F6);
}

    .ipd-preview img[b-4q1lfp8aud] {
        max-width: 100%;
        max-height: 60vh;
        border-radius: 10px;
    }

    .ipd-preview video[b-4q1lfp8aud] {
        max-width: 100%;
        max-height: 60vh;
        border-radius: 10px;
    }

.ipd-filebadge[b-4q1lfp8aud] {
    width: 160px;
    height: 160px;
    border-radius: 20px;
    background: #EEF0FB;
    color: #4F46E5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
}

.ipd-side[b-4q1lfp8aud] {
    flex: 0 0 340px;
    width: 340px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: #F7F9FC;
    overflow-y: auto;
}

.ipd-info[b-4q1lfp8aud] {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--pl-line-soft, #EDF1F6);
}

.ipd-fields[b-4q1lfp8aud] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pl-line-soft, #EDF1F6);
}

.ipd-field[b-4q1lfp8aud] {
    display: flex;
    flex-direction: column;
}

.ipd-input[b-4q1lfp8aud] {
    width: 100%;
}

.ipd-textarea[b-4q1lfp8aud] {
    min-height: 64px;
    resize: vertical;
}

.ipd-actions[b-4q1lfp8aud] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

@media (max-width: 900px) {
    .ipd-body[b-4q1lfp8aud] { flex-direction: column; }
    .ipd-preview[b-4q1lfp8aud] { border-right: 0; border-bottom: 1px solid var(--pl-line-soft, #EDF1F6); }
    .ipd-side[b-4q1lfp8aud] { flex: 0 0 auto; width: 100%; }
}
/* /Components/Pages/BackEnd/Media/MediaManage.razor.rz.scp.css */
/* ===== Media Manage — ใช้ชุด design เดียวกับหน้ารายการ (pl-*) จาก minelist.css + ส่วนต่อขยายเฉพาะ grid สื่อ (mm-*) ===== */

.mm-root[b-yz3hgdtv8j] {
    position: relative;
}

/* ---- upload progress overlay ---- */
.mm-uploading[b-yz3hgdtv8j] {
    position: fixed;
    z-index: 99999;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(15,23,42,.35);
}

.mm-uploading-box[b-yz3hgdtv8j] {
    background: #fff;
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: 0 18px 40px -12px rgba(15,23,42,.35);
    font-size: 13.5px;
    color: #1E293B;
    min-width: 260px;
}

    .mm-uploading-box progress[b-yz3hgdtv8j] {
        width: 100%;
        margin-top: 8px;
        height: 8px;
        accent-color: #0B7A75;
    }

/* ---- drag & drop overlay zone ---- */
.mm-dropzone[b-yz3hgdtv8j] {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 40;
    background: rgba(11,122,117,.9);
    display: none;
    opacity: 0;
    transition: .2s;
    border-radius: 16px;
    pointer-events: none;
}

.mm-dropzone.ShowDropUploadZone[b-yz3hgdtv8j] {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.mm-dropzone-inner[b-yz3hgdtv8j] {
    margin: auto;
    text-align: center;
    color: #fff;
}

    .mm-dropzone-inner .pl-drop-ico[b-yz3hgdtv8j] {
        color: #fff;
        font-size: 40px;
    }

    .mm-dropzone-inner .pl-drop-title[b-yz3hgdtv8j] {
        color: #fff;
        font-size: 18px;
        margin-top: 8px;
    }

.mm-hiddeninput[b-yz3hgdtv8j] {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.mm-dropzone.ShowDropUploadZone .mm-hiddeninput[b-yz3hgdtv8j] {
    pointer-events: auto;
}

/* ---- search input (แบบง่าย ไม่มี tag) ---- */
.mm-search[b-yz3hgdtv8j] {
    flex: 1 1 260px;
}

.mm-searchinput[b-yz3hgdtv8j] {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 30px;
    border: 1px solid #DDE3EC;
    border-radius: 10px;
    background: #F7F9FC;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: .15s;
}

    .mm-searchinput:focus[b-yz3hgdtv8j] {
        border-color: var(--pl-teal);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(11, 122, 117, .13);
    }

/* ---- body / grid ---- */
.mm-body[b-yz3hgdtv8j] {
    padding-top: 12px;
}

.mm-listcard[b-yz3hgdtv8j] {
    flex: 1 1 auto;
}

.mm-scroll[b-yz3hgdtv8j] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
}

.mm-grid[b-yz3hgdtv8j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.mm-card[b-yz3hgdtv8j] {
    cursor: pointer;
    border: 1px solid var(--pl-line, #E4E9F0);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: .15s;
}

    .mm-card:hover[b-yz3hgdtv8j] {
        border-color: var(--pl-teal, #0B7A75);
        box-shadow: 0 8px 20px -10px rgba(11,122,117,.4);
        transform: translateY(-2px);
    }

.mm-card-thumb[b-yz3hgdtv8j] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #F1F4F9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .mm-card-thumb img[b-yz3hgdtv8j],
    .mm-card-thumb video[b-yz3hgdtv8j] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mm-playbadge[b-yz3hgdtv8j] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    background: rgba(15,23,42,.25);
    text-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* ไฟล์ในคลังสื่อหาย (onerror ใส่ class missing ที่ .mm-card-thumb) */
.mm-missing[b-yz3hgdtv8j] {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(135deg, #F3F5F7 0px, #F3F5F7 6px, #E9EDF0 6px, #E9EDF0 12px);
    color: #64748B;
    font-size: 12px;
    font-weight: 600;
}

.mm-missing-ico[b-yz3hgdtv8j] {
    font-size: 26px;
    opacity: .55;
    filter: grayscale(1);
}

.mm-missing.custom[b-yz3hgdtv8j] {
    position: relative;
    justify-content: flex-end;
    padding-bottom: 6px;
    background: #F1F4F9;
}

.mm-missing-img[b-yz3hgdtv8j] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mm-missing.custom .mm-missing-txt[b-yz3hgdtv8j] {
    position: relative;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    color: #475569;
    font-size: 11px;
}

.mm-card-thumb.missing .mm-missing[b-yz3hgdtv8j] {
    display: flex;
}

.mm-card-thumb.missing > img[b-yz3hgdtv8j],
.mm-card-thumb.missing > video[b-yz3hgdtv8j],
.mm-card-thumb.missing .mm-playbadge[b-yz3hgdtv8j] {
    display: none;
}

.mm-filebadge[b-yz3hgdtv8j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: #EEF0FB;
    color: #4F46E5;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.mm-card-name[b-yz3hgdtv8j] {
    padding: 8px 10px;
    font-size: 12px;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 1px solid #F1F4F9;
}

@media (max-width: 560px) {
    .mm-grid[b-yz3hgdtv8j] {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 10px;
    }
}
/* /Components/Pages/BackEnd/Media/MediaSelectImage.razor.rz.scp.css */
/* ===== Media Select popup — ใช้ pl-modal-overlay/pl-modal จาก minelist.css เป็นโครง + ส่วนต่อขยาย msi-*/mm-* เฉพาะ popup นี้ ===== */

.msi-overlay[b-djrgxmdejo] {
    /* popup นี้ render นอก .pl-root (ตัวกำหนดตัวแปรสีใน minelist.css) — ประกาศซ้ำที่นี่กันปุ่ม pl-btn-primary จางเพราะ var(--pl-teal) ไม่มีค่า */
    --pl-teal: #0B7A75;
    --pl-teal-dark: #095E5A;
    --pl-ink: #0F172A;
    --pl-line: #E4E9F0;
    --pl-line-soft: #EDF1F6;
    --pl-muted: #8A94A6;
    z-index: 999999;
    padding: 20px;
}

.msi-modal[b-djrgxmdejo] {
    max-width: 1100px;
    width: 100%;
    height: 85vh;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* ---- drag & drop overlay ---- */
.msi-dropzone[b-djrgxmdejo] {
    position: absolute;
    inset: 0;
    z-index: 40;
    background: rgba(11,122,117,.9);
    display: none;
    opacity: 0;
    transition: .2s;
    pointer-events: none;
}

.msi-dropzone.ShowDropUploadZone[b-djrgxmdejo] {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.msi-dropzone-inner[b-djrgxmdejo] {
    margin: auto;
    text-align: center;
    color: #fff;
}

    .msi-dropzone-inner .pl-drop-ico[b-djrgxmdejo] { color: #fff; font-size: 36px; }
    .msi-dropzone-inner .pl-drop-title[b-djrgxmdejo] { color: #fff; font-size: 16px; margin-top: 6px; }

.msi-hiddeninput[b-djrgxmdejo] {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.msi-dropzone.ShowDropUploadZone .msi-hiddeninput[b-djrgxmdejo] {
    pointer-events: auto;
}

/* ---- tabs ---- */
.msi-tabs[b-djrgxmdejo] {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    border-bottom: 1px solid var(--pl-line-soft, #EDF1F6);
    flex: 0 0 auto;
}

.msi-tab[b-djrgxmdejo] {
    height: 40px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: #7C8698;
    cursor: pointer;
}

.msi-tab.on[b-djrgxmdejo] {
    color: var(--pl-teal, #0B7A75);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--pl-teal, #0B7A75);
}

/* ---- body split: list + detail ---- */
.msi-body[b-djrgxmdejo] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.msi-listcol[b-djrgxmdejo] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--pl-line-soft, #EDF1F6);
}

.msi-filterbar[b-djrgxmdejo] {
    flex: 0 0 auto;
    padding: 14px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--pl-line-soft, #EDF1F6);
}

.msi-searchinput[b-djrgxmdejo] {
    max-width: 220px;
}

.msi-scroll[b-djrgxmdejo] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px;
}

.msi-detailcol[b-djrgxmdejo] {
    flex: 0 0 260px;
    width: 260px;
    background: #F7F9FC;
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.msi-detail-scroll[b-djrgxmdejo] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.msi-detail[b-djrgxmdejo] {
    flex: 1 1 auto;
}

.msi-detail-title[b-djrgxmdejo] {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}

.msi-detail-preview[b-djrgxmdejo] {
    max-width: 100%;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
    background: #EEF1F6;
}

    .msi-detail-preview img[b-djrgxmdejo],
    .msi-detail-preview video[b-djrgxmdejo] {
        width: 100%;
        display: block;
    }

.msi-detail-filebadge[b-djrgxmdejo] {
    width: 100%;
    height: 120px;
    border-radius: 10px;
    font-size: 18px;
}

.msi-detail-text[b-djrgxmdejo] {
    font-size: 12.5px;
    color: #4B5666;
    word-break: break-all;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pl-line-soft, #EDF1F6);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.msi-detail-actions[b-djrgxmdejo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.msi-selectbtn[b-djrgxmdejo] {
    flex: 0 0 auto;
    margin-top: 12px;
}

/* ---- upload panel ---- */
.msi-uploadpanel[b-djrgxmdejo] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.msi-uploadhint[b-djrgxmdejo] {
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--pl-muted, #8A94A6);
}

/* ---- media grid (เหมือนหน้า MediaManage) ---- */
.mm-grid[b-djrgxmdejo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.mm-card[b-djrgxmdejo] {
    position: relative;
    cursor: pointer;
    border: 1px solid var(--pl-line, #E4E9F0);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: .15s;
}

    .mm-card:hover[b-djrgxmdejo] {
        border-color: var(--pl-teal, #0B7A75);
    }

    .mm-card.sel[b-djrgxmdejo] {
        border-color: var(--pl-teal, #0B7A75);
        box-shadow: 0 0 0 3px rgba(11,122,117,.2);
    }

.mm-card-thumb[b-djrgxmdejo] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #F1F4F9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .mm-card-thumb img[b-djrgxmdejo],
    .mm-card-thumb video[b-djrgxmdejo] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mm-playbadge[b-djrgxmdejo] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    background: rgba(15,23,42,.25);
}

/* ไฟล์ในคลังสื่อหาย (onerror ใส่ class missing ที่ .mm-card-thumb) */
.mm-missing[b-djrgxmdejo] {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(135deg, #F3F5F7 0px, #F3F5F7 6px, #E9EDF0 6px, #E9EDF0 12px);
    color: #64748B;
    font-size: 12px;
    font-weight: 600;
}

.mm-missing-ico[b-djrgxmdejo] {
    font-size: 24px;
    opacity: .55;
    filter: grayscale(1);
}

.mm-missing.custom[b-djrgxmdejo] {
    position: relative;
    justify-content: flex-end;
    padding-bottom: 6px;
    background: #F1F4F9;
}

.mm-missing-img[b-djrgxmdejo] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mm-missing.custom .mm-missing-txt[b-djrgxmdejo] {
    position: relative;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    color: #475569;
    font-size: 11px;
}

.mm-card-thumb.missing .mm-missing[b-djrgxmdejo] {
    display: flex;
}

.mm-card-thumb.missing > img[b-djrgxmdejo],
.mm-card-thumb.missing > video[b-djrgxmdejo],
.mm-card-thumb.missing .mm-playbadge[b-djrgxmdejo] {
    display: none;
}

.mm-filebadge[b-djrgxmdejo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #EEF0FB;
    color: #4F46E5;
    font-size: 12px;
    font-weight: 700;
}

.mm-card-name[b-djrgxmdejo] {
    padding: 6px 8px;
    font-size: 11px;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 1px solid #F1F4F9;
}

.msi-order[b-djrgxmdejo] {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #0B7A75;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
    text-shadow: none;
}

/* ---- ล็อกสีปุ่มให้ชัดเจน ไม่พึ่งพา --pl-teal ที่อาจถูกหน้าเรียกทับ/ไม่ inherit เพราะ popup นี้ถูกฝังในหลายหน้า ---- */
.msi-modal .pl-btn-primary[b-djrgxmdejo] {
    background: #0B7A75;
    color: #fff;
    font-weight: 700;
}

    .msi-modal .pl-btn-primary:hover[b-djrgxmdejo] {
        background: #095E5A;
    }

.msi-modal .pl-btn-ghost[b-djrgxmdejo] {
    background: #fff;
    color: #1E293B;
    border: 1px solid #B9C2D0;
    font-weight: 600;
}

.msi-modal .pl-btn-danger[b-djrgxmdejo] {
    background: #E11D48;
    color: #fff;
    font-weight: 700;
}

@media (max-width: 900px) {
    .msi-modal[b-djrgxmdejo] { height: 92vh; max-height: 92vh; }
    .msi-body[b-djrgxmdejo] { flex-direction: column; overflow-y: auto; }
    .msi-listcol[b-djrgxmdejo] { border-right: 0; border-bottom: 1px solid var(--pl-line-soft, #EDF1F6); }
    .msi-detailcol[b-djrgxmdejo] { flex: 0 0 auto; width: 100%; }
}
/* /Components/Pages/BackEnd/MenuZone.razor.rz.scp.css */
@font-face {
    font-family: 'GoogleFont';
    font-style: normal;
    font-weight: 100 700;
    src: url('../fonts/google-font.woff2') format('woff2');
}

/* =========================================================
   [2026-10] แถบเมนูหลังบ้าน — โทนขาว + ไอคอนเส้น (Material Symbols) + teal หลังบ้าน
   ความกว้างอ้าง --be-nav-w (BackEndMainLayout.razor.css) : ≥992 = 232 / หุบ 68 ; 768–992 = 68 ; ≤768 ลิ้นชัก 248
   เมนูย่อย: แถบกว้าง = กางลงในแถบ (accordion) ; แถบไอคอน = เด้งออกด้านขวาตอน hover (flyout)
   ========================================================= */

.NavBar[b-hxexdl7ctu] {
    --nav-ink: #3d4852;
    --nav-muted: #8a939c;
    --nav-line: #eceff2;
    --nav-hover: #f3f6f7;
    --nav-accent: #0B7A75;
    --nav-accent-soft: #e4f3f2;
    position: fixed;
    top: var(--be-top-h, 0px);
    left: 0;
    bottom: 0;
    z-index: 5;
    width: var(--be-nav-w, 232px);
    background: #fff;
    border-right: 1px solid var(--nav-line);
    color: var(--nav-ink);
    font-family: 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
    user-select: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.2s;
}

    .NavBar > *[b-hxexdl7ctu] {
        flex-shrink: 0;
    }

.NavBarBackdrop[b-hxexdl7ctu] {
    display: none;
}

/* ---------- ไอคอน (Material Symbols เส้น) ---------- */
.MenuMain[b-hxexdl7ctu]::before,
.NavSiteIcon[b-hxexdl7ctu]::before,
.NavSiteExt[b-hxexdl7ctu]::before,
.NavLogout[b-hxexdl7ctu]::before,
.NavCollapseIcon[b-hxexdl7ctu]::before,
.MenuMain[b-hxexdl7ctu]::after {
    font-family: GoogleFont;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.FontMenu_Dashboard[b-hxexdl7ctu]::before { content: "\e871"; }
.FontMenu_Media[b-hxexdl7ctu]::before { content: "\e8a7"; }
.FontMenu_Report[b-hxexdl7ctu]::before { content: "\e104"; }
.FontMenu_Blogs[b-hxexdl7ctu]::before { content: "\ea3e"; }
.FontMenu_Customer[b-hxexdl7ctu]::before { content: "\e7ef"; }
.FontMenu_Chat[b-hxexdl7ctu]::before { content: "\e0b7"; }
.FontMenu_Sales[b-hxexdl7ctu]::before { content: "\eb88"; }
.FontMenu_Promotion[b-hxexdl7ctu]::before { content: "\e54e"; }
.FontMenu_Retail[b-hxexdl7ctu]::before { content: "\ea12"; }
.FontMenu_Wholesale[b-hxexdl7ctu]::before { content: "\e558"; }
.FontMenu_SupplierReturn[b-hxexdl7ctu]::before { content: "\e860"; }
.FontMenu_StockReceiving[b-hxexdl7ctu]::before { content: "\e168"; }
.FontMenu_Product[b-hxexdl7ctu]::before { content: "\f867"; }
.FontMenu_Vender[b-hxexdl7ctu]::before { content: "\e7ee"; }
.FontMenu_Analytics[b-hxexdl7ctu]::before { content: "\f092"; }
.FontMenu_Theme[b-hxexdl7ctu]::before { content: "\e40a"; }
.FontMenu_User[b-hxexdl7ctu]::before { content: "\f02e"; }
.FontMenu_Setting[b-hxexdl7ctu]::before { content: "\e8b8"; }
.LicenseMenu_Setting[b-hxexdl7ctu]::before { content: "\e887"; }

/* ---------- หัวแถบ: โลโก้ + การ์ดไปหน้าเว็บไซต์ ---------- */
.NavBrand[b-hxexdl7ctu] {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 18px;
}

.NavBrandLogo[b-hxexdl7ctu] {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.NavSiteCard[b-hxexdl7ctu] {
    margin: 0 12px 6px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--nav-line);
    border-radius: 12px;
    color: var(--nav-ink);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

    .NavSiteCard:hover[b-hxexdl7ctu] {
        background: var(--nav-hover);
        border-color: #dde3e7;
    }

.NavSiteIcon[b-hxexdl7ctu] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--nav-accent-soft);
    color: var(--nav-accent);
}

    .NavSiteIcon[b-hxexdl7ctu]::before {
        content: "\e88a";
        font-size: 18px;
    }

.NavSiteName[b-hxexdl7ctu] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.NavSiteExt[b-hxexdl7ctu] {
    color: var(--nav-muted);
}

    .NavSiteExt[b-hxexdl7ctu]::before {
        content: "\e89e";
        font-size: 16px;
    }

/* ---------- รายการเมนู (เลื่อนได้) ---------- */
.NavScroll[b-hxexdl7ctu] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 10px 10px;
    scrollbar-width: thin;
    scrollbar-color: #d6dbe0 transparent;
}

    .NavScroll[b-hxexdl7ctu]::-webkit-scrollbar {
        width: 6px;
    }

    .NavScroll[b-hxexdl7ctu]::-webkit-scrollbar-thumb {
        background: #d6dbe0;
        border-radius: 3px;
    }

.MenuGroupLabel[b-hxexdl7ctu] {
    padding: 14px 10px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--nav-muted);
}

.MenuMain[b-hxexdl7ctu] {
    height: 38px;
    margin: 1px 0;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    color: var(--nav-ink);
    transition: background 0.15s, color 0.15s;
}

    .MenuMain[b-hxexdl7ctu]::before {
        font-size: 20px;
        width: 22px;
        text-align: center;
        color: #6b7580;
        flex-shrink: 0;
    }

    /* ลูกศรกาง/หุบเมนูย่อย (expand_more) */
    .MenuMain[b-hxexdl7ctu]::after {
        content: "\e5cf";
        margin-left: auto;
        font-size: 18px;
        color: var(--nav-muted);
        transition: transform 0.2s;
    }

    .MenuMain:hover[b-hxexdl7ctu] {
        background: var(--nav-hover);
    }

    .MenuMain .PadShowHover[b-hxexdl7ctu] {
        display: none;
    }

    .MenuMain .Text[b-hxexdl7ctu] {
        font-size: 13.5px;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }

.ActiveMenu[b-hxexdl7ctu] {
    background: var(--nav-accent-soft);
    color: var(--nav-accent);
    font-weight: 600;
}

    .ActiveMenu:hover[b-hxexdl7ctu] {
        background: var(--nav-accent-soft);
    }

    .ActiveMenu[b-hxexdl7ctu]::before,
    .ActiveMenu[b-hxexdl7ctu]::after {
        color: var(--nav-accent);
    }

    .ActiveMenu[b-hxexdl7ctu]::after {
        transform: rotate(180deg);
    }

.MenuMain .NotifyBadge[b-hxexdl7ctu] {
    position: absolute;
    top: 50%;
    right: 34px;
    transform: translateY(-50%);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
}

/* ปิดใช้งานชั่วคราว: เมนูขายปลีก/ขายส่ง/ส่งคืนสินค้าให้บริษัท/รับสินค้า/บริษัท เมื่อเปิด Sync PMC อยู่ */
.MenuLockedPmc[b-hxexdl7ctu] {
    pointer-events: none;
    opacity: 0.4;
    filter: grayscale(0.4);
}

    .MenuLockedPmc .MenuMain[b-hxexdl7ctu] {
        cursor: not-allowed;
    }

/* ---------- เมนูย่อย (accordion) ---------- */
.liMenu[b-hxexdl7ctu] {
    display: none;
    position: relative;
    margin: 2px 0 6px 21px;
    padding: 0 0 0 10px;
    border-left: 1px solid var(--nav-line);
}

.MenuMain.ActiveMenu + .liMenu[b-hxexdl7ctu] {
    display: block;
}

.liMenu .PerMain[b-hxexdl7ctu] {
    display: none;
}

.liMenu .Per[b-hxexdl7ctu] {
    list-style-type: none;
    min-height: 32px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.35;
    color: #5b6670;
    cursor: pointer;
    position: relative;
}

    .liMenu .Per:hover[b-hxexdl7ctu] {
        background: var(--nav-hover);
        color: var(--nav-ink);
    }

    .liMenu .Per .PadShowHover[b-hxexdl7ctu] {
        display: none;
    }

    .liMenu .Per.Active[b-hxexdl7ctu] {
        color: var(--nav-accent);
        font-weight: 600;
        background: #f1f8f8;
    }

        /* จุดบนเส้นนำทางตรงเมนูที่เลือก */
        .liMenu .Per.Active[b-hxexdl7ctu]::before {
            content: "";
            position: absolute;
            left: -14px;
            top: 50%;
            width: 7px;
            height: 7px;
            margin-top: -3.5px;
            border-radius: 50%;
            background: var(--nav-accent);
        }

/* ---------- ท้ายแถบ: ผู้ใช้ + หุบ/กาง ---------- */
.NavFoot[b-hxexdl7ctu] {
    border-top: 1px solid var(--nav-line);
    padding: 10px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.NavUser[b-hxexdl7ctu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px;
}

.NavUserAvatar[b-hxexdl7ctu] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--nav-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.NavUserInfo[b-hxexdl7ctu] {
    flex: 1 1 auto;
    min-width: 0;
}

.NavUserName[b-hxexdl7ctu] {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.NavUserRole[b-hxexdl7ctu] {
    font-size: 11px;
    color: var(--nav-muted);
}

.NavLogout[b-hxexdl7ctu] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #6b7580;
    cursor: pointer;
}

    .NavLogout[b-hxexdl7ctu]::before {
        content: "\e9ba";
        font-size: 20px;
    }

    .NavLogout:hover[b-hxexdl7ctu] {
        background: #fdecec;
        color: #d32f2f;
    }

.NavCollapseBtn[b-hxexdl7ctu] {
    height: 34px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    color: #6b7580;
    font-size: 13px;
    cursor: pointer;
}

    .NavCollapseBtn:hover[b-hxexdl7ctu] {
        background: var(--nav-hover);
        color: var(--nav-ink);
    }

.NavCollapseIcon[b-hxexdl7ctu]::before {
    content: "\eac3";
    font-size: 20px;
}

.NavDev[b-hxexdl7ctu] {
    font-size: 10px;
    color: #b0b7be;
    text-align: center;
}

/* =========================================================
   แถบไอคอน (rail) — ใช้ 2 กรณี: (ก) ≥992 + กดหุบ (.NavBar-Collapsed) ; (ข) จอ 768–992 เสมอ
   กฎชุดเดียวกัน ต้องแก้ทั้ง 2 บล็อกให้ตรงกัน
   ========================================================= */
@media (min-width: 993px) {
    .NavBar.NavBar-Collapsed[b-hxexdl7ctu],
    .NavBar.NavBar-Collapsed .NavScroll[b-hxexdl7ctu] {
        overflow: visible; /* ให้ flyout เมนูย่อยโผล่พ้นแถบ */
    }

    .NavBar-Collapsed .NavBrand[b-hxexdl7ctu] { padding: 0; justify-content: center; }
    .NavBar-Collapsed .NavBrandLogo[b-hxexdl7ctu] { height: 30px; }
    .NavBar-Collapsed .NavSiteCard[b-hxexdl7ctu] { margin: 0 12px 6px; padding: 9px 0; justify-content: center; border-color: transparent; }
    .NavBar-Collapsed .NavSiteName[b-hxexdl7ctu],
    .NavBar-Collapsed .NavSiteExt[b-hxexdl7ctu],
    .NavBar-Collapsed .MenuGroupLabel[b-hxexdl7ctu],
    .NavBar-Collapsed .MenuMain .Text[b-hxexdl7ctu],
    .NavBar-Collapsed .MenuMain[b-hxexdl7ctu]::after,
    .NavBar-Collapsed .NavUserInfo[b-hxexdl7ctu],
    .NavBar-Collapsed .NavCollapseText[b-hxexdl7ctu],
    .NavBar-Collapsed .NavDev[b-hxexdl7ctu] { display: none; }
    .NavBar-Collapsed .NavScroll[b-hxexdl7ctu] { padding: 4px 12px 10px; }
    .NavBar-Collapsed .MenuMain[b-hxexdl7ctu] { justify-content: center; padding: 0; }
    .NavBar-Collapsed .MenuMain .NotifyBadge[b-hxexdl7ctu] { top: 2px; right: 0; transform: none; }
    .NavBar-Collapsed .NavUser[b-hxexdl7ctu] { flex-direction: column; gap: 6px; }
    .NavBar-Collapsed .NavCollapseBtn[b-hxexdl7ctu] { justify-content: center; padding: 0; }
    .NavBar-Collapsed .NavCollapseIcon[b-hxexdl7ctu]::before { content: "\eac9"; }

    .NavBar-Collapsed .liMenu[b-hxexdl7ctu],
    .NavBar-Collapsed .MenuMain.ActiveMenu + .liMenu[b-hxexdl7ctu] {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        margin: 0;
        padding: 6px;
        min-width: 210px;
        border: 1px solid var(--nav-line);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
        z-index: 9999;
    }

    .NavBar-Collapsed .MenuMain:hover + .liMenu[b-hxexdl7ctu],
    .NavBar-Collapsed .liMenu:hover[b-hxexdl7ctu] { display: block; }
    .NavBar-Collapsed .liMenu .PerMain[b-hxexdl7ctu] { display: flex; list-style-type: none; padding: 6px 10px 8px; font-size: 12px; font-weight: 600; color: var(--nav-muted); }
    .NavBar-Collapsed .liMenu .Per.Active[b-hxexdl7ctu]::before { display: none; }
}

@media (min-width: 769px) and (max-width: 992px) {
    .NavBar[b-hxexdl7ctu],
    .NavBar .NavScroll[b-hxexdl7ctu] {
        overflow: visible;
    }

    .NavBrand[b-hxexdl7ctu] { padding: 0; justify-content: center; }
    .NavBrandLogo[b-hxexdl7ctu] { height: 30px; }
    .NavSiteCard[b-hxexdl7ctu] { margin: 0 12px 6px; padding: 9px 0; justify-content: center; border-color: transparent; }
    .NavSiteName[b-hxexdl7ctu],
    .NavSiteExt[b-hxexdl7ctu],
    .MenuGroupLabel[b-hxexdl7ctu],
    .MenuMain .Text[b-hxexdl7ctu],
    .MenuMain[b-hxexdl7ctu]::after,
    .NavUserInfo[b-hxexdl7ctu],
    .NavCollapseBtn[b-hxexdl7ctu],
    .NavDev[b-hxexdl7ctu] { display: none; }
    .NavScroll[b-hxexdl7ctu] { padding: 4px 12px 10px; }
    .MenuMain[b-hxexdl7ctu] { justify-content: center; padding: 0; }
    .MenuMain .NotifyBadge[b-hxexdl7ctu] { top: 2px; right: 0; transform: none; }
    .NavUser[b-hxexdl7ctu] { flex-direction: column; gap: 6px; }

    .liMenu[b-hxexdl7ctu],
    .MenuMain.ActiveMenu + .liMenu[b-hxexdl7ctu] {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        margin: 0;
        padding: 6px;
        min-width: 210px;
        border: 1px solid var(--nav-line);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
        z-index: 9999;
    }

    .MenuMain:hover + .liMenu[b-hxexdl7ctu],
    .liMenu:hover[b-hxexdl7ctu] { display: block; }
    .liMenu .PerMain[b-hxexdl7ctu] { display: flex; list-style-type: none; padding: 6px 10px 8px; font-size: 12px; font-weight: 600; color: var(--nav-muted); }
    .liMenu .Per.Active[b-hxexdl7ctu]::before { display: none; }
}

/* =========================================================
   มือถือ ≤768 — ลิ้นชักใต้แถบบน (HeaderZone) เปิดด้วย ☰
   ========================================================= */
@media (max-width: 768px) {
    .NavBarBackdrop[b-hxexdl7ctu] {
        display: block;
        position: fixed;
        inset: 0;
        top: var(--be-top-h, 52px);
        z-index: 4;
        background: rgba(0,0,0,0.35);
    }

    .NavBar[b-hxexdl7ctu] {
        width: 0;
        border-right: none;
    }

        .NavBar.ActiveNavBar[b-hxexdl7ctu] {
            width: 248px;
            border-right: 1px solid var(--nav-line);
        }

    /* โลโก้อยู่บนแถบบนแล้ว / ไม่มีโหมดหุบบนมือถือ */
    .NavBrand[b-hxexdl7ctu],
    .NavCollapseBtn[b-hxexdl7ctu] {
        display: none;
    }

    .NavSiteCard[b-hxexdl7ctu] {
        margin-top: 12px;
    }
}
/* /Components/Pages/BackEnd/Products/AddProduct.razor.rz.scp.css */
@font-face {
    font-family: 'GoogleFont';
    font-style: normal;
    font-weight: 100 700;
    src: url('../fonts/google-font.woff2') format('woff2');
}

.GalleryImagePerDiv[b-awm9w1fxca] {
    position: relative;
}

    .GalleryImagePerDiv:hover .RemoveImgButton[b-awm9w1fxca] {
        opacity: 1;
    }

.RemoveImgButton[b-awm9w1fxca] {
    position: absolute;
    top: -8%;
    right: -10%;
    background: white;
    border-radius: 50%;
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: 0.2s;
}

    .RemoveImgButton[b-awm9w1fxca]::after {
        font-family: GoogleFont;
        content: "\e5c9";
        font-size: 18px;
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 200, 'opsz' 20;
        color: rgb(190, 190, 190);
    }

.ProductMainImage[b-awm9w1fxca] {
    
}

    .ProductMainImage img[b-awm9w1fxca] {
        max-width: 100%;
        width: auto;
        height: auto;
    }

.ProductGalleryImage[b-awm9w1fxca] {
    display: grid;
    grid-template-columns: repeat(3,78px);
    gap: 12px;
}

    .ProductGalleryImage img[b-awm9w1fxca] {
        width: 78px;
        min-width: 78px;
        border: 1px solid #cacaca;
    }

.MainAddProduct[b-awm9w1fxca] {
    padding: 15px;
    background: #f0f0f1;
    min-height: 100%;
}

.ManageBlock[b-awm9w1fxca] {
    position: relative;
    margin-right: 300px;
}

.FirstBlock[b-awm9w1fxca] {
    position: relative;
    display: block;
    margin-bottom: 20px;
    outline: 0;
    width: 100%;
    min-width: 463px;
    float: left;
}

.SecondBlock[b-awm9w1fxca] {
    float: right;
    margin-right: -300px;
    width: 280px;
}

.HeadMenuName[b-awm9w1fxca] {
    font-size: 28px;
    margin-bottom: 10px;
}

.InputProductName[b-awm9w1fxca] {
    height: 60px;
    font-size: 24px;
    padding-left: 10px;
    width: 100%;
}

.ProductDetail[b-awm9w1fxca] {
    margin-top: 20px;
    border: 1px solid #c3c4c7;
    background: white;
}

    .ProductDetail .Head[b-awm9w1fxca] {
        border-bottom: 1px solid #c3c4c7;
        padding: 5px 10px 5px 10px;
    }

    .ProductDetail .Body[b-awm9w1fxca] {
        padding: 5px 10px 5px 10px;
    }

.MenuBoxCss[b-awm9w1fxca] {
    font-size: 15px;
    padding: 0px 10px 0px 10px;
    border: solid 1px #2271b1;
    color: #2271b1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    transition: 0.2s;
    cursor: pointer;
    user-select: none;
    height: 35px;
    width: fit-content;
}

    .MenuBoxCss:hover[b-awm9w1fxca] {
        filter: brightness(0.5);
    }

.RichTextBox[b-awm9w1fxca] {
    border: 1px solid #c3c4c7;
    height: 300px;
    margin-top: 5px;
}

.ProductStatus[b-awm9w1fxca] {
    border: 1px solid #c3c4c7;
    float: right;
    width: 280px;
    margin-bottom: 20px;
    background: white;
}

    .ProductStatus .Head[b-awm9w1fxca] {
        border-bottom: 1px solid #c3c4c7;
        padding: 5px 10px 5px 10px;
        font-size: 14px;
    }

    .ProductStatus .Body[b-awm9w1fxca] {
        position: relative;
        width: 100%;
        padding: 10px 10px 10px 10px;
    }

    .ProductStatus .PerRow[b-awm9w1fxca] {
        font-size: 13px;
        display: flex;
        align-items: center;
        margin: 0px 0px 5px 0px;
    }

        .ProductStatus .PerRow .Status[b-awm9w1fxca] {
            padding-left: 10px;
            font-size: 13px;
        }

.ImageFont_Key[b-awm9w1fxca]::before {
    color: #8c91a2;
    font: normal 15px/1 dashicons;
    content: "\f173";
    padding-right: 10px;
}

.ImageFont_Eye[b-awm9w1fxca]::before {
    color: #8c91a2;
    font: normal 20px/1 dashicons;
    content: "\f177";
    padding-right: 10px;
}

.ImageFont_Calendar[b-awm9w1fxca]::before {
    color: #8c91a2;
    font: normal 15px/1 dashicons;
    content: "\f145";
    padding-right: 10px;
}

.ProductStatus .Footer[b-awm9w1fxca] {
    border-top: 1px solid #c3c4c7;
    background: #f6f7f7;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between; 
}

    .ProductStatus .Footer .Copy[b-awm9w1fxca] {
        font-size: 13px;
        color: #137fbf;
        text-decoration: underline;
        cursor: pointer;
        padding-left: 10px;
    }

    .ProductStatus .Footer .Show[b-awm9w1fxca] {
        margin-right: 10px;
        background: #2271b1;
        color: white;
        padding: 5px 10px 5px 10px;
        border-radius: 3px;
        user-select: none;
        cursor: pointer;
        font-size: 14px;
    }

.ThirdBlock[b-awm9w1fxca] {
    float: left;
    width: 100%;
    min-width: 463px;
}

    .ThirdBlock .SelectedMenu[b-awm9w1fxca] {
        color: #555555!important;
        background: #eeeeee;
    }

    .ThirdBlock .SelectedMenu[b-awm9w1fxca]::before {
        color: #555555 !important;
    }


.ProductData[b-awm9w1fxca] {
    margin-top: 20px;
    border: 1px solid #c3c4c7;
    background: white;
}

    .ProductData .Head[b-awm9w1fxca] {
        border-bottom: 1px solid #c3c4c7;
        padding: 5px 10px 5px 10px;
    }

    .ProductData .Body[b-awm9w1fxca] {
    }

        .ProductData .Body .Menu[b-awm9w1fxca] {
            background: #fafafa;
            border-right: 1px solid #eee;
            min-width: 210px;
            max-width: 210px;
        }

            .ProductData .Body .Menu .Per[b-awm9w1fxca] {
                padding-left: 20px;
                color: #2271b1;
                border-bottom: 1px solid #eee;
                font-size: 14px;
                height: 40px;
                display: flex;
                align-items: center;
                cursor: pointer;
                user-select: none;
            }

                .ProductData .Body .Menu .Per.Disabled[b-awm9w1fxca] {
                    opacity: 0.25;
                    cursor: not-allowed;
                }

        .ProductData .Body .Data[b-awm9w1fxca] {
        }

.Menu1[b-awm9w1fxca]::before {
    color: #2271b1;
    font: normal 20px/1 dashicons;
    content: "\f107";
    padding-right: 10px;
    font-size: 15px;
}

.Menu2[b-awm9w1fxca]::before {
    color: #2271b1;
    font: normal 20px/1 dashicons;
    content: "\f481";
    padding-right: 10px;
    font-size: 15px;
}

.Menu3[b-awm9w1fxca]::before {
    color: #2271b1;
    font: normal 20px/1 dashicons;
    content: "\f481";
    padding-right: 10px;
    font-size: 15px;
}

.Menu4[b-awm9w1fxca]::before {
    color: #2271b1;
    font: normal 20px/1 dashicons;
    content: "\f481";
    padding-right: 10px;
    font-size: 15px;
}

.Menu5[b-awm9w1fxca]::before {
    color: #2271b1;
    font: normal 20px/1 dashicons;
    content: "\f481";
    padding-right: 10px;
    font-size: 15px;
}

.Menu6[b-awm9w1fxca]::before {
    color: #2271b1;
    font: normal 20px/1 dashicons;
    content: "\f481";
    padding-right: 10px;
    font-size: 15px;
}

.FakeLink[b-awm9w1fxca] {
    font-size: 13px;
    color: #137fbf;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 5px;
}

.Maincategori[b-awm9w1fxca] {
    min-height: 42px;
    max-height: 200px;
    overflow: auto;
    padding: 0.4em 0.9em 0.0em 0.9em;
    border: solid 1px #dcdcde;
    background-color: #fff;
    word-break: break-word;
}

.categori[b-awm9w1fxca] {
    cursor: pointer;
    width: fit-content;
    user-select: none;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

    .categori .checkbox[b-awm9w1fxca] {
        margin-right: 5px;
        margin-top: 3px;
        cursor: pointer;
    }

    .categori .label[b-awm9w1fxca] {
        font-size: 12px;
        cursor: pointer;
    }

.subcategori[b-awm9w1fxca] {
    cursor: pointer;
    padding-left: 20px;
}

    .subcategori .checkbox[b-awm9w1fxca] {
        margin-right: 5px;
    }

    .subcategori .label[b-awm9w1fxca] {
        font-size: 15px;
    }


@media (max-width: 768px) {
    .ManageBlock[b-awm9w1fxca]{
        margin-right: 0px;
    }
    .FirstBlock[b-awm9w1fxca]{
        min-width: auto;
    }
    .SecondBlock[b-awm9w1fxca] {
        float: left;
        margin-right: 0px;
        width: 100%;
        min-width: auto;
    }
    .ThirdBlock[b-awm9w1fxca] {
        min-width: auto;
    }
    .ProductStatus[b-awm9w1fxca]{
        margin-right: 0px;
        width: 100%;
    }
    .ProductGalleryImage[b-awm9w1fxca] {
        
        grid-template-columns: repeat(7,78px);
    }

        .ProductGalleryImage img[b-awm9w1fxca] {
            width: 78px;
            min-width: 78px;
            border: 1px solid #cacaca;
        }
}

@media (max-width: 680px) {
    .ProductGalleryImage[b-awm9w1fxca] {
        grid-template-columns: repeat(6,78px);
    }
}

@media (max-width: 590px) {
    .ProductGalleryImage[b-awm9w1fxca] {
        grid-template-columns: repeat(5,78px);
    }
}

@media (max-width: 500px) {
    .ProductGalleryImage[b-awm9w1fxca] {
        grid-template-columns: repeat(4,78px);
    }
}

@media (max-width: 410px) {
    .ProductGalleryImage[b-awm9w1fxca] {
        grid-template-columns: repeat(3,78px);
    }
}

@media (max-width: 320px) {
    .ProductGalleryImage[b-awm9w1fxca] {
        grid-template-columns: repeat(2,78px);
    }
}

@media (max-width: 230px) {
    .ProductGalleryImage[b-awm9w1fxca] {
        grid-template-columns: repeat(1,78px);
    }
}
/* /Components/Pages/BackEnd/Products/CategoryList.razor.rz.scp.css */
.MainAllProducts[b-kpygx5edm2] {
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.ConfirmOrCancelDeleteCustomerButton[b-kpygx5edm2] {
    background: #be0202;
    width: fit-content;
    padding: 5px 20px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}

.CancelColor[b-kpygx5edm2] {
    background: #1d2327;
}

.MenuBoxCss[b-kpygx5edm2] {
    font-size: 15px;
    padding: 0px 10px 0px 10px;
    border: solid 1px #2271b1;
    color: #2271b1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    transition: 0.2s;
    cursor: pointer;
    user-select: none;
    height: 35px;
}

.Row[b-kpygx5edm2] {
    font-size: 13px;
}

    .Row .User[b-kpygx5edm2] {
        font-size: 15px;
        cursor: pointer;
        color: #2271b1;
    }

    .Row .Edit[b-kpygx5edm2] {
        font-size: 13px;
        cursor: pointer;
        color: #2271b1;
    }

    .Row .Slash[b-kpygx5edm2] {
        font-size: 16px;
    }

    .Row .Delete[b-kpygx5edm2] {
        color: #be0202;
        cursor: pointer;
    }

.MenuBoxCss:hover[b-kpygx5edm2] {
    filter: brightness(0.5);
}

.ProductsMenu[b-kpygx5edm2] {
    display: flex;
    align-items: center;
}

    .ProductsMenu .MenuName[b-kpygx5edm2] {
        font-size: 25px;
    }

    .ProductsMenu .Per[b-kpygx5edm2] {
        margin-left: 5px;
    }

.AllProductsStatusZone[b-kpygx5edm2] {
    display: flex;
    font-size: 15px;
    color: #2271b1;
    margin-top: 10px;
}

    .AllProductsStatusZone .Space[b-kpygx5edm2] {
        margin-right: 5px;
        margin-left: 5px;
        color: black;
    }

.CommandSelect[b-kpygx5edm2] {
    font-size: 15px;
    height: 35px;
    display: flex;
    align-items: center;
    border-radius: 5px;
}

.PageButtonCss[b-kpygx5edm2] {
    font-size: 15px;
    padding: 0px 5px 0px 5px;
    border: solid 1px #2271b1;
    color: #2271b1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    transition: 0.2s;
    cursor: pointer;
    user-select: none;
    height: 25px;
    width: 25px;
    font-size: 10px;
}

    .PageButtonCss:hover[b-kpygx5edm2] {
        filter: brightness(0.5);
    }

.PageInputCss[b-kpygx5edm2] {
    width: 40px;
    border-radius: 5px;
    outline: none;
    border: solid 1px rgba(0,0,0,0.5);
    text-align: center;
    height: 25px;
}

.SetItCenter[b-kpygx5edm2] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.TableContainer[b-kpygx5edm2] {
    margin-top: 10px;
    max-height: calc(100vh - 220px);
    overflow-y: scroll;
}

.TableShowDataList[b-kpygx5edm2] {
    table-layout: fixed;
    width: 100%;
    background: #ffffff;
    margin-bottom: 10px;
}

    .TableShowDataList thead[b-kpygx5edm2] {
    }

        .TableShowDataList thead tr th[b-kpygx5edm2] {
            font-weight: normal;
            color: #2271b1;
            height: 40px;
            vertical-align: middle;
            cursor: pointer;
            user-select: none;
            position: sticky;
            top: 0;
            z-index: 2;
            background: #ffffff;
        }

    .TableShowDataList tbody[b-kpygx5edm2] {
    }

        .TableShowDataList tbody tr td[b-kpygx5edm2] {
            height: 57px;
            word-break: break-all;
        }

            .TableShowDataList tbody tr td img[b-kpygx5edm2] {
                max-width: 40px;
                max-height: 40px;
            }

    .TableShowDataList input[b-kpygx5edm2] {
        width: 17px;
        height: 17px;
    }

    .TableShowDataList tfoot[b-kpygx5edm2] {
        border: solid 1px #c3c4c7;
    }

        .TableShowDataList tfoot tr th[b-kpygx5edm2] {
            font-weight: normal;
            color: #2271b1;
            height: 40px;
            vertical-align: middle;
            cursor: pointer;
            user-select: none;
        }

.IconDesc[b-kpygx5edm2]::after {
    font-family: dashicons;
    content: "\f140";
    color: #a7aaad;
    font-size: 18px;
    margin-left: -2px;
}

.IconAsc[b-kpygx5edm2]::after {
    font-family: dashicons;
    content: "\f142";
    color: #a7aaad;
    font-size: 18px;
    margin-left: -2px;
}

.ShoppingCartIcon[b-kpygx5edm2] {
    margin-left: 0px;
    position: relative;
    cursor: pointer;
}

    .ShoppingCartIcon[b-kpygx5edm2]::after {
        font-family: GoogleFont;
        content: "\e8cc";
        color: #a7aaad;
        font-size: 14px;
        margin-left: -2px;
        transform: translate(-50%,-50%);
    }

@media (max-width: 768px) {
}
/* /Components/Pages/BackEnd/Products/Component/CategoryManage.razor.rz.scp.css */
.cm-root[b-umgoe8kofd] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 100%;
    background: #F4F7F7;
    font-family: 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
    color: #1F2A37;
    font-size: 14px;
    box-sizing: border-box;
}

    .cm-root *[b-umgoe8kofd], .cm-root *[b-umgoe8kofd]::before, .cm-root *[b-umgoe8kofd]::after {
        box-sizing: border-box;
    }

/* ===== topbar ===== */
.cm-topbar[b-umgoe8kofd] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    background: #ffffff;
    border-bottom: 1px solid #E3EAEA;
}

.cm-topbar-left[b-umgoe8kofd] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.cm-titles[b-umgoe8kofd] {
    min-width: 0;
}

.cm-crumb[b-umgoe8kofd] {
    font-size: 12px;
    color: #7A8794;
}

.cm-title[b-umgoe8kofd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.cm-code[b-umgoe8kofd] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    color: #0B7A75;
    background: #E7F5F4;
    border-radius: 6px;
    padding: 2px 8px;
}

.cm-tag[b-umgoe8kofd] {
    font-size: 12px;
    font-weight: 500;
    border-radius: 999px;
    padding: 2px 10px;
}

    .cm-tag.sync[b-umgoe8kofd] {
        background: #ECFAF7;
        color: #0B7A75;
        box-shadow: inset 0 0 0 1px #B9E0DC;
    }

    .cm-tag.self[b-umgoe8kofd] {
        background: #F1F5F5;
        color: #55636F;
    }

    .cm-tag.dirty[b-umgoe8kofd] {
        background: #FFF7E8;
        color: #A16207;
    }

.cm-topbar-actions[b-umgoe8kofd] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ===== buttons ===== */
.cm-btn[b-umgoe8kofd], .cm-back[b-umgoe8kofd] {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}

.cm-btn-primary[b-umgoe8kofd] {
    background: #0B7A75;
    color: #ffffff;
}

    .cm-btn-primary:hover[b-umgoe8kofd] {
        background: #095E5A;
    }

.cm-btn-ghost[b-umgoe8kofd] {
    background: #ffffff;
    border-color: #D5DEDE;
    color: #3B4754;
}

    .cm-btn-ghost:hover[b-umgoe8kofd] {
        background: #F1F5F5;
    }

.cm-back[b-umgoe8kofd] {
    background: #ffffff;
    border-color: #F3C7C3;
    color: #BE2D23;
    padding: 6px 12px;
    flex-shrink: 0;
}

    .cm-back:hover[b-umgoe8kofd] {
        background: #FFF1F0;
    }

/* ===== sync note ===== */
.cm-note[b-umgoe8kofd] {
    margin: 16px 24px 0;
    padding: 10px 14px;
    border: 1px solid #B9E0DC;
    border-left: 4px solid #0B7A75;
    border-radius: 8px;
    background: #F2FAF9;
    color: #095E5A;
    font-size: 13px;
}

/* ===== layout ===== */
.cm-body[b-umgoe8kofd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
    padding: 16px 24px 32px;
}

.cm-main[b-umgoe8kofd], .cm-side[b-umgoe8kofd] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ===== card ===== */
.cm-card[b-umgoe8kofd] {
    background: #ffffff;
    border: 1px solid #E3EAEA;
    border-radius: 12px;
    overflow: hidden;
}

.cm-card-head[b-umgoe8kofd] {
    padding: 14px 18px;
    border-bottom: 1px solid #EEF2F2;
}

.cm-card-title[b-umgoe8kofd] {
    font-size: 15px;
    font-weight: 600;
}

.cm-card-desc[b-umgoe8kofd] {
    margin-top: 2px;
    font-size: 12.5px;
    color: #7A8794;
}

.cm-card-body[b-umgoe8kofd] {
    padding: 18px;
}

.cm-card-foot[b-umgoe8kofd] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #EEF2F2;
    background: #FAFCFC;
}

/* ===== fields ===== */
.cm-field + .cm-field[b-umgoe8kofd] {
    margin-top: 18px;
}

.cm-label-row[b-umgoe8kofd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.cm-label[b-umgoe8kofd] {
    font-size: 13.5px;
    font-weight: 500;
    color: #3B4754;
}

.cm-req[b-umgoe8kofd] {
    color: #D9483F;
}

.cm-count[b-umgoe8kofd] {
    font-size: 12px;
    color: #98A2AD;
}

.cm-input[b-umgoe8kofd] {
    display: block;
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 14.5px;
    color: #1F2A37;
    background: #ffffff;
    border: 1px solid #D5DEDE;
    border-radius: 8px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

    .cm-input:focus[b-umgoe8kofd] {
        border-color: #0B7A75;
        box-shadow: 0 0 0 3px rgba(11, 122, 117, .15);
    }

    .cm-input:disabled[b-umgoe8kofd] {
        background: #F1F5F5;
        color: #7A8794;
        cursor: not-allowed;
    }

.cm-textarea[b-umgoe8kofd] {
    height: auto;
    min-height: 96px;
    resize: vertical;
    line-height: 1.5;
}

.cm-field.error .cm-input[b-umgoe8kofd] {
    border-color: #D9483F;
    background: #FFF6F5;
}

    .cm-field.error .cm-input:focus[b-umgoe8kofd] {
        box-shadow: 0 0 0 3px rgba(217, 72, 63, .15);
    }

.cm-hint[b-umgoe8kofd], .cm-alert[b-umgoe8kofd], .cm-warn[b-umgoe8kofd] {
    margin-top: 6px;
    font-size: 12.5px;
}

.cm-hint[b-umgoe8kofd] {
    color: #98A2AD;
}

.cm-alert[b-umgoe8kofd] {
    color: #D9483F;
}

.cm-warn[b-umgoe8kofd] {
    color: #A16207;
}

/* ===== toggles ===== */
.cm-toggles[b-umgoe8kofd] {
    padding: 6px 18px;
}

.cm-toggle-row[b-umgoe8kofd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    cursor: pointer;
    user-select: none;
}

    .cm-toggle-row + .cm-toggle-row[b-umgoe8kofd] {
        border-top: 1px dashed #E3EAEA;
    }

.cm-toggle-text[b-umgoe8kofd] {
    min-width: 0;
}

.cm-toggle-label[b-umgoe8kofd] {
    font-size: 14px;
    font-weight: 500;
}

.cm-toggle-hint[b-umgoe8kofd] {
    margin-top: 2px;
    font-size: 12.5px;
    color: #7A8794;
}

.cm-toggle-row[b-umgoe8kofd]  .Main.Active {
    background: #0B7A75;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
}

.cm-toggle-row[b-umgoe8kofd]  .Main:hover,
.cm-toggle-row[b-umgoe8kofd]  .Main.Active:hover {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15), 0 0 0 3px rgba(11, 122, 117, .15);
}

/* ===== summary ===== */
.cm-kvs[b-umgoe8kofd] {
    padding: 8px 18px;
}

.cm-kv[b-umgoe8kofd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-size: 13.5px;
}

    .cm-kv + .cm-kv[b-umgoe8kofd] {
        border-top: 1px solid #EEF2F2;
    }

    .cm-kv > span:first-child[b-umgoe8kofd] {
        color: #7A8794;
    }

    .cm-kv > span:last-child[b-umgoe8kofd] {
        font-weight: 500;
        text-align: right;
    }

.cm-badge[b-umgoe8kofd] {
    font-size: 12px;
    border-radius: 999px;
    padding: 2px 10px;
}

/* ===== สินค้าในหมวดหมู่ ===== */
.cm-card-head-row[b-umgoe8kofd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cm-btn-sm[b-umgoe8kofd] {
    font-size: 13px;
    padding: 6px 12px;
}

.cm-btn:disabled[b-umgoe8kofd], .cm-premove:disabled[b-umgoe8kofd] {
    opacity: .5;
    cursor: not-allowed;
}

.cm-countpill[b-umgoe8kofd] {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #0B7A75;
    background: #E7F5F4;
    border-radius: 999px;
    padding: 2px 10px;
}

.cm-members[b-umgoe8kofd] {
    padding: 14px 18px 18px;
}

.cm-search[b-umgoe8kofd] {
    height: 38px;
    font-size: 14px;
}

.cm-msg[b-umgoe8kofd] {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    background: #ECFAF7;
    color: #0B7A75;
}

    .cm-msg.error[b-umgoe8kofd] {
        background: #FFF1F0;
        color: #BE2D23;
    }

.cm-empty[b-umgoe8kofd] {
    padding: 28px 12px;
    text-align: center;
    color: #98A2AD;
    font-size: 13.5px;
}

.cm-plist[b-umgoe8kofd] {
    margin-top: 10px;
}

.cm-prow[b-umgoe8kofd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px;
    border-radius: 8px;
}

    .cm-prow + .cm-prow[b-umgoe8kofd] {
        border-top: 1px solid #EEF2F2;
    }

    .cm-prow:hover[b-umgoe8kofd] {
        background: #F7FAFA;
    }

.cm-thumb[b-umgoe8kofd] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #E3EAEA;
    background: repeating-linear-gradient(135deg, #f3f5f7 0px, #f3f5f7 5px, #e9edf0 5px, #e9edf0 10px);
}

    .cm-thumb img[b-umgoe8kofd] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.cm-pinfo[b-umgoe8kofd] {
    flex: 1 1 auto;
    min-width: 0;
}

.cm-pname[b-umgoe8kofd] {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cm-psub[b-umgoe8kofd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
    font-size: 12px;
}

.cm-pcode[b-umgoe8kofd] {
    font-family: 'IBM Plex Mono', monospace;
    color: #7A8794;
}

.cm-poff[b-umgoe8kofd], .cm-pin[b-umgoe8kofd] {
    border-radius: 999px;
    padding: 1px 8px;
}

.cm-poff[b-umgoe8kofd] {
    background: #F1F5F5;
    color: #7A8794;
}

.cm-pin[b-umgoe8kofd] {
    background: #E7F5F4;
    color: #0B7A75;
}

.cm-plink[b-umgoe8kofd] {
    flex-shrink: 0;
    font-size: 13px;
    color: #0B7A75;
    text-decoration: none;
}

    .cm-plink:hover[b-umgoe8kofd] {
        text-decoration: underline;
    }

.cm-premove[b-umgoe8kofd] {
    flex-shrink: 0;
    font-family: inherit;
    font-size: 13px;
    color: #BE2D23;
    background: #ffffff;
    border: 1px solid #F3C7C3;
    border-radius: 8px;
    padding: 5px 10px;
    cursor: pointer;
}

    .cm-premove:hover:not(:disabled)[b-umgoe8kofd] {
        background: #FFF1F0;
    }

.cm-selbar[b-umgoe8kofd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    padding: 6px;
    font-size: 13px;
    color: #55636F;
}

.cm-selall[b-umgoe8kofd] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 auto 0 0;
    cursor: pointer;
    user-select: none;
}

.cm-selcount[b-umgoe8kofd] {
    color: #0B7A75;
    font-weight: 500;
}

.cm-pcheck[b-umgoe8kofd] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: #0B7A75;
    cursor: pointer;
}

.cm-prow.picked[b-umgoe8kofd] {
    background: #F2FAF9;
}

.cm-pager[b-umgoe8kofd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    font-size: 13px;
    color: #7A8794;
}

/* ===== modal เลือกสินค้า ===== */
.cm-overlay[b-umgoe8kofd] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .45);
}

.cm-modal[b-umgoe8kofd] {
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    max-height: min(86vh, 760px);
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px -20px rgba(15, 23, 42, .5);
}

.cm-modal-head[b-umgoe8kofd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
}

.cm-x[b-umgoe8kofd] {
    font-size: 15px;
    line-height: 1;
    color: #7A8794;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
}

    .cm-x:hover[b-umgoe8kofd] {
        background: #F1F5F5;
    }

.cm-modal-search[b-umgoe8kofd] {
    padding: 0 18px 10px;
    border-bottom: 1px solid #EEF2F2;
}

.cm-modal-body[b-umgoe8kofd] {
    flex: 1 1 auto;
    min-height: 180px;
    overflow-y: auto;
    padding: 0 12px 8px;
}

.cm-pick[b-umgoe8kofd] {
    cursor: pointer;
    user-select: none;
}

    .cm-pick input[type=checkbox][b-umgoe8kofd] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        accent-color: #0B7A75;
        pointer-events: none;
    }

    .cm-pick.picked[b-umgoe8kofd] {
        background: #F2FAF9;
    }

    .cm-pick.disabled[b-umgoe8kofd] {
        cursor: default;
        opacity: .6;
    }

.cm-modal-foot[b-umgoe8kofd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #EEF2F2;
    background: #FAFCFC;
}

.cm-picked[b-umgoe8kofd] {
    margin-right: auto;
    font-size: 13px;
    color: #55636F;
}

/* ===== responsive ===== */
@media (max-width: 1000px) {
    .cm-body[b-umgoe8kofd] {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px 16px 28px;
    }

    .cm-topbar[b-umgoe8kofd] {
        padding: 12px 16px;
    }

    .cm-note[b-umgoe8kofd] {
        margin: 16px 16px 0;
    }
}

@media (max-width: 768px) {
    .cm-topbar[b-umgoe8kofd] {
        top: var(--be-top-h, 0px);
    }
}

@media (max-width: 640px) {
    .cm-topbar[b-umgoe8kofd] {
        flex-wrap: wrap;
    }

    .cm-title[b-umgoe8kofd] {
        font-size: 17px;
    }

    .cm-topbar-actions[b-umgoe8kofd], .cm-topbar-actions .cm-btn[b-umgoe8kofd] {
        width: 100%;
    }

    .cm-card-foot .cm-btn[b-umgoe8kofd] {
        flex: 1;
    }
}
/* /Components/Pages/BackEnd/Products/Component/CategoryPickerPopup.razor.rz.scp.css */
/* CategoryPickerPopup — modal เดี่ยว (list + checkbox) สำหรับเลือกกลุ่มสินค้าแบบ multi-select
   ธีมเดียวกับ VenderPickerPopup */

.CPOverlay[b-5zwaz8f6pq] {
    position: fixed; inset: 0; z-index: 1200; background: rgba(15,23,42,.45);
    display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px;
}

.CPBox[b-5zwaz8f6pq] {
    width: 100%; max-width: 520px; max-height: calc(100vh - 96px);
    display: flex; flex-direction: column;
    background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(15,23,42,.30); overflow: hidden;
    font-family: inherit;
}

.CPHeader[b-5zwaz8f6pq] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #eef1f4;
}
.CPHeaderTitle[b-5zwaz8f6pq] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #1e293b; }
.CPHeaderIcon[b-5zwaz8f6pq] { font-size: 16px; }
.CPCloseBtn[b-5zwaz8f6pq] {
    width: 28px; height: 28px; border-radius: 8px; background: #f1f5f9; color: #475569;
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px;
}
.CPCloseBtn:hover[b-5zwaz8f6pq] { background: #e2e8f0; }

.CPSearch[b-5zwaz8f6pq] { padding: 12px 16px; border-bottom: 1px solid #eef1f4; }
.CPSearchInner[b-5zwaz8f6pq] { display: flex; align-items: center; gap: 8px; border: 1.5px solid #e3e6ea; border-radius: 9px; padding: 8px 10px; }
.CPSearchInner:focus-within[b-5zwaz8f6pq] { border-color: #0f766e; }
.CPSearchIcon[b-5zwaz8f6pq] { font-size: 13px; color: #94a3b8; }
.CPSearchInput[b-5zwaz8f6pq] { flex: 1; border: none; outline: none; font-size: 13px; font-family: inherit; background: transparent; }
.CPSearchClear[b-5zwaz8f6pq] { cursor: pointer; color: #94a3b8; font-size: 12px; }
.CPSearchHint[b-5zwaz8f6pq] { margin-top: 6px; font-size: 11px; color: #94a3b8; }

.CPBody[b-5zwaz8f6pq] { flex: none; overflow-y: auto; padding: 6px; height: 460px; }
.CPRow[b-5zwaz8f6pq] {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer;
}
.CPRow:hover[b-5zwaz8f6pq] { background: #f1f5f9; }
.CPRowSelected[b-5zwaz8f6pq], .CPRowSelected:hover[b-5zwaz8f6pq] { background: #ecfdf5; box-shadow: inset 0 0 0 1.5px #0f766e; }
.CPCheckbox[b-5zwaz8f6pq] {
    width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #cbd5e1; background: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; flex: none;
}
.CPCheckboxOn[b-5zwaz8f6pq] { background: #0f766e; border-color: #0f766e; }
.CPInfo[b-5zwaz8f6pq] { min-width: 0; flex: 1; }
.CPName[b-5zwaz8f6pq] { font-size: 13px; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.CPDesc[b-5zwaz8f6pq] { font-size: 11px; color: #64748b; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.CPBadge[b-5zwaz8f6pq] { border-radius: 999px; padding: 2px 8px; font-size: 10.5px; font-weight: 700; flex: none; }
.CPBadgeWarn[b-5zwaz8f6pq] { background: #fef2f2; color: #dc2626; }

.CPEmpty[b-5zwaz8f6pq] { text-align: center; padding: 40px 16px; color: #94a3b8; }
.CPEmptyIcon[b-5zwaz8f6pq] { font-size: 30px; }
.CPEmptyText[b-5zwaz8f6pq] { margin-top: 8px; font-size: 13px; font-weight: 700; color: #64748b; }
.CPEmptyHint[b-5zwaz8f6pq] { margin-top: 2px; font-size: 11.5px; }

.CPPager[b-5zwaz8f6pq] {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 8px 16px; border-top: 1px solid #eef1f4;
}
.CPPagerBtn[b-5zwaz8f6pq] {
    width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid #e3e6ea; background: #fff; color: #475569;
    display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.CPPagerBtn:hover:not(:disabled)[b-5zwaz8f6pq] { background: #f1f5f9; border-color: #0f766e; color: #0f766e; }
.CPPagerBtn:disabled[b-5zwaz8f6pq] { opacity: .4; cursor: not-allowed; }
.CPPagerInfo[b-5zwaz8f6pq] { font-size: 12px; color: #64748b; font-weight: 700; }

.CPFooter[b-5zwaz8f6pq] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 18px; border-top: 1px solid #eef1f4; background: #fff;
}
.CPFootInfo[b-5zwaz8f6pq] { font-size: 12px; color: #64748b; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.CPFootBtns[b-5zwaz8f6pq] { display: flex; gap: 8px; flex: none; }
.CPBtnCancel[b-5zwaz8f6pq] {
    padding: 8px 16px; border-radius: 9px; border: 1.5px solid #d1d5db; background: #fff; color: #475569;
    font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.CPBtnCancel:hover[b-5zwaz8f6pq] { background: #f3f4f6; }
.CPBtnConfirm[b-5zwaz8f6pq] {
    padding: 8px 18px; border-radius: 9px; border: none; background: linear-gradient(135deg, #0f766e, #14b8a6); color: #fff;
    font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
/* /Components/Pages/BackEnd/Products/Component/ManageUnit.razor.rz.scp.css */
.MainModal[b-uovcctnuj1] {
    position: fixed;
    top: 0;
    left: 0;
    color: black;
    z-index: 999999;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0, 0.50);
    user-select: none;
}

.DivMainBox[b-uovcctnuj1] {
    width: 860px;
    max-height: 600px;
    height: 600px;
    background: #f0f0f1;
    min-width: 200px;
    flex-direction: column;
    border-radius: 5px;
    position: relative;
}

.Padding[b-uovcctnuj1] {
    overflow: auto;
    height: 520px;
    padding: 15px 15px 30px 15px;
    border: solid 1px rgb(195, 191, 191);
}

.Title[b-uovcctnuj1] {
    font-size: 28px;
    padding: 15px 15px 15px 15px;
}

.AddButton[b-uovcctnuj1] {
    height: 25px;
    margin-left: 10px;
}

.UnitTable[b-uovcctnuj1]{
    border: solid 1px rgb(195, 191, 191);
    margin: 0 auto;
}

    .UnitTable thead tr td[b-uovcctnuj1] {
        color: #2271b1;
        text-align: center;
        border: solid 1px rgb(195, 191, 191);
    }

    .UnitTable tfoot tr td[b-uovcctnuj1] {
        color: #2271b1 ;
        text-align: center;
        border: solid 1px rgb(195, 191, 191);
    }

    .UnitTable tbody tr[b-uovcctnuj1] {
        height: 40px;
        border: solid 1px rgb(195, 191, 191);
    }

        .UnitTable tbody tr td[b-uovcctnuj1] {
            border: solid 1px rgb(195, 191, 191);
        }

.Place[b-uovcctnuj1] {
    min-width: 50px;
    max-width: 50px;
}

.NameTH[b-uovcctnuj1] {
    min-width: 200px;
    max-width: 200px;
}

.NameENG[b-uovcctnuj1] {
    min-width: 200px;
    max-width: 200px;
}

.Operator[b-uovcctnuj1] {
    min-width: 200px;
    max-width: 200px;
}

.AddDiv[b-uovcctnuj1] {
    width: 100%;
}

.AddTable[b-uovcctnuj1] {
    color: white;
    background: #1d2327;
    border: solid 1px rgb(195, 191, 191);
    text-align: center;
}

    .AddTable tbody[b-uovcctnuj1] {
        color: black;
    }

    .AddTable .Frist[b-uovcctnuj1] {
        width: 150px;
    }

    .AddTable .Second[b-uovcctnuj1] {
        width: 200px;
    }

    .AddTable .Third[b-uovcctnuj1] {
        width: 200px;
    }

    .AddTable input[b-uovcctnuj1]{
        width: 100%;
        text-align: center;
    }

.AddConfirmButton[b-uovcctnuj1] {
    width: fit-content;
    margin-top: 10px;
    height: 30px;
}
/* /Components/Pages/BackEnd/Products/Component/Mine_Data_Product_Editor.razor.rz.scp.css */
@font-face {
    font-family: 'GoogleFont';
    font-style: normal;
    font-weight: 100 700;
    src: url('../fonts/google-font.woff2') format('woff2');
}

.ManageUnitButton[b-gr0cp0taxe] {
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    transform: translateY(3px);
}

    .ManageUnitButton[b-gr0cp0taxe]::after {
        width: 20px;
        height: 20px;
        font-family: GoogleFont;
        content: "\f775";
        color: #2271b1;
        font-size: 22px;
        font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.MainModal[b-gr0cp0taxe] {
    position: fixed;
    top: 0;
    left: 0;
    color: black;
    z-index: 999999;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0, 0.50);
    user-select: none;
}

.RedLabel[b-gr0cp0taxe] {
    color: red;
    font-size: 12px;
}

.MinModalBoxSize[b-gr0cp0taxe] {
    min-width: 300px;
    width: 300px;
}

.ModalInputBoxHeight[b-gr0cp0taxe] {
    height: 30px;
}

.DivMainBox[b-gr0cp0taxe] {
    width: fit-content;
    height: fit-content;
    background: #f0f0f1;
    flex-direction: column;
    border-radius: 5px;
    position: relative;
    padding-bottom: 30px;
}

.Title[b-gr0cp0taxe] {
    font-size: 28px;
    padding: 15px 15px 15px 15px;
}

.MenuBoxCss[b-gr0cp0taxe] {
    font-size: 15px;
    padding: 0px 10px 0px 10px;
    border: solid 1px #2271b1;
    color: #2271b1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    transition: 0.2s;
    cursor: pointer;
    user-select: none;
    height: 30px;
    width: fit-content;
    min-width: 105px;
}

.UnitSelectTag[b-gr0cp0taxe] {
    width: 150px;
    height: 30px;
    margin-right: 10px;
    padding-left: 10px;
}

.DeleteButton[b-gr0cp0taxe] {
    color: red;
    border: solid 1px red;
}

    .DeleteButton:hover[b-gr0cp0taxe] {
        border: solid 1px red !important;
        box-shadow: red 0px 0px 5px;
        filter: brightness(1) !important;
    }

.EditButton[b-gr0cp0taxe] {
    color: rgb(255, 156, 0);
    border: solid 1px rgb(255, 156, 0);
}

    .EditButton:hover[b-gr0cp0taxe] {
        border: solid 1px rgb(255, 156, 0) !important;
        box-shadow: rgb(255, 156, 0) 0px 0px 5px;
        filter: brightness(1) !important;
    }

.UnitLabel[b-gr0cp0taxe] {
    font-size: 14px;
}

.UnitInput[b-gr0cp0taxe] {
    width: 120px;
    text-align: center;
    margin-right: 10px;
}

.PriceTableDiv[b-gr0cp0taxe] {
    margin-top: 5px;
}

.PriceTable[b-gr0cp0taxe] {
    background: rgb(222, 245, 255);
    margin-right: 10px;
}

.PriceTable .PerPriceLevel[b-gr0cp0taxe]{
    width: 100px;
}

    .PriceTable .PerPriceLevel input[b-gr0cp0taxe]{
        width: 100%;
        text-align: right;
        padding-right: 5px;
    }

table thead tr th[b-gr0cp0taxe] {
    font-weight: normal;
    font-size: 14px;
    text-align: center;
}

tr th[b-gr0cp0taxe] {
    padding: 2px;
}

    tr th div[b-gr0cp0taxe] {
        background: rgb(185, 232, 252);
        border: solid 1px rgb(186, 186, 186);
    }

tr td[b-gr0cp0taxe] {
    font-size: 14px;
    padding: 2px;
    height: 27px;
}

    tr td div[b-gr0cp0taxe] {
        background: rgb(185, 232, 252);
        border: solid 1px rgb(186, 186, 186);
        height: 27px;
    }

    tr td div input[b-gr0cp0taxe] {
        width: 100%;
        height: 100%;
    }

.SaleTypeDiv[b-gr0cp0taxe] {
    display: flex;
    align-items: center;
    width: 100%;
}

.SaleTypeDiv input[b-gr0cp0taxe]{
    height: 15px;
    width: 15px;
    margin-left: 10px;
    margin-right: 5px;
}

tr td div input[type=number][b-gr0cp0taxe] {
    -moz-appearance: textfield;
}

    tr td div input[type=number][b-gr0cp0taxe]::-webkit-inner-spin-button,
    tr td div input[type=number][b-gr0cp0taxe]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.StockManageWidth[b-gr0cp0taxe] {
    min-width: 150px;
    width: 150px;
}

.StockStatus[b-gr0cp0taxe] {
    list-style-type: none;
    font-size: 14px;
}

.StockStatus li[b-gr0cp0taxe]{
    margin-bottom: 10px;
}

    .StockStatus input[b-gr0cp0taxe] {
        margin-right: 10px;
    }

.LinkPromoteProductInput[b-gr0cp0taxe] {
    padding-left: 10px;
    width: 305px;
    height: 40px;
}
/* /Components/Pages/BackEnd/Products/Component/Mine_Text_Rich_Editor.razor.rz.scp.css */
@font-face {
    font-family: 'GoogleFont';
    font-style: normal;
    font-weight: 100 700;
    src: url('../fonts/google-font.woff2') format('woff2');
}

[contenteditable][b-u6x3c87087] {
    outline: 0px solid transparent;
}

img[b-u6x3c87087] {
    max-width: 100%;
    height: auto;
    cursor: grab;
}

/* === Head === */
.rte-head[b-u6x3c87087] {
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
}

/* === Wrap === */
.rte-wrap[b-u6x3c87087] {
    padding: 10px;
    box-sizing: border-box;
}

/* === Action Bar (เพิ่มรูปภาพ / เพิ่มคอลัมน์) === */
.rte-action-bar[b-u6x3c87087] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.rte-action-btn[b-u6x3c87087] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid #1a73e8;
    color: #1a73e8;
    background: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.rte-action-btn:hover[b-u6x3c87087] {
    background: #1a73e8;
    color: #fff;
}

.rte-action-btn-email[b-u6x3c87087] {
    border-color: #1254c0;
    color: #1254c0;
    background: #f0f5ff;
}

.rte-action-btn-email:hover[b-u6x3c87087] {
    background: #1254c0;
    color: #fff;
}

.rte-col-wrap[b-u6x3c87087] {
    position: relative;
}

.rte-col-dropdown[b-u6x3c87087] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 100;
    min-width: 120px;
    overflow: hidden;
}

.rte-col-option[b-u6x3c87087] {
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    color: #333;
    transition: background 0.12s;
}

.rte-col-option:hover[b-u6x3c87087] {
    background: #1a73e8;
    color: #fff;
}

/* === Editor Box === */
.rte-editor-box[b-u6x3c87087] {
    border: 1px solid #dde1e7;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* === Toolbar === */
.rte-toolbar[b-u6x3c87087] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    background: #f8f9fa;
    border-bottom: 1px solid #dde1e7;
    min-height: 40px;
}

.rte-tool-group[b-u6x3c87087] {
    display: flex;
    align-items: center;
    gap: 1px;
}

.rte-sep[b-u6x3c87087] {
    width: 1px;
    height: 22px;
    background: #dde1e7;
    margin: 0 4px;
    flex-shrink: 0;
}

/* === Heading Dropdown === */
.rte-heading-btn[b-u6x3c87087] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #dde1e7;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    min-width: 80px;
}

.rte-heading-btn:hover[b-u6x3c87087] {
    border-color: #1a73e8;
    color: #1a73e8;
}

.rte-chevron[b-u6x3c87087] {
    font-size: 10px;
    color: #888;
}

.rte-heading-dropdown[b-u6x3c87087] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #fff;
    border: 1px solid #dde1e7;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 200;
    min-width: 160px;
    overflow: hidden;
}

.rte-heading-opt[b-u6x3c87087] {
    display: block;
    padding: 6px 14px;
    color: #222;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.12s;
    white-space: nowrap;
}

.rte-heading-opt:hover[b-u6x3c87087] {
    background: #f0f5ff;
    color: #1a73e8;
}

/* === Toolbar Buttons === */
.ButtonMain[b-u6x3c87087] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid transparent;
    text-decoration: none;
    flex-shrink: 0;
}

.ButtonMain:hover[b-u6x3c87087] {
    background: #e8f0fb;
    border-color: #c5d8f8;
}

.Button-Bold[b-u6x3c87087]::after {
    font-family: GoogleFont;
    content: "\e238";
    color: #333;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
}

.Button-Italic[b-u6x3c87087]::after {
    font-family: GoogleFont;
    content: "\e23f";
    color: #333;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
}

.Button-ListBullet[b-u6x3c87087]::after {
    font-family: GoogleFont;
    content: "\e241";
    color: #333;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
}

.Button-ListNumber[b-u6x3c87087]::after {
    font-family: GoogleFont;
    content: "\e242";
    color: #333;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
}

.Button-Quote[b-u6x3c87087]::after {
    font-family: GoogleFont;
    content: "\e23e";
    color: #333;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
}

.Button-RemoveQuote[b-u6x3c87087]::after {
    font-family: GoogleFont;
    content: "\e23d";
    color: #c0392b;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
}

.Button-AlignLeft[b-u6x3c87087]::after {
    font-family: GoogleFont;
    content: "\e236";
    color: #333;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
}

.Button-AlignCenter[b-u6x3c87087]::after {
    font-family: GoogleFont;
    content: "\e234";
    color: #333;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
}

.Button-AlignRight[b-u6x3c87087]::after {
    font-family: GoogleFont;
    content: "\e237";
    color: #333;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
}

.Button-Link[b-u6x3c87087]::after {
    font-family: GoogleFont;
    content: "\e157";
    color: #333;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
}

.Button-UnLink[b-u6x3c87087]::after {
    font-family: GoogleFont;
    content: "\e16f";
    color: #333;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
}

.Button-MiddleLine[b-u6x3c87087]::after {
    font-family: GoogleFont;
    content: "\e246";
    color: #333;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
}

.Button-Underline[b-u6x3c87087]::after {
    font-family: GoogleFont;
    content: "\e249";
    color: #333;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
}

.Button-Html[b-u6x3c87087]::after {
    font-family: GoogleFont;
    content: "\eb7e";
    color: #333;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
}

.Button-RemoveFormat[b-u6x3c87087]::after {
    font-family: GoogleFont;
    content: "\e6d0";
    color: #333;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
}

.Button-Undo[b-u6x3c87087]::after {
    font-family: GoogleFont;
    content: "\e166";
    color: #333;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
}

.Button-Redo[b-u6x3c87087]::after {
    font-family: GoogleFont;
    content: "\e15a";
    color: #333;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
}

/* === Code Toggle === */
.rte-code-toggle[b-u6x3c87087] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid #dde1e7;
    border-radius: 5px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    user-select: none;
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
}

.rte-code-toggle:hover[b-u6x3c87087],
.rte-code-toggle.active[b-u6x3c87087] {
    background: #e8f0fb;
    border-color: #1a73e8;
    color: #1a73e8;
}

/* === Editor Content === */
.rte-content[b-u6x3c87087] {
    background: #fff;
}

.rte-editable[b-u6x3c87087] {
    min-height: 280px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.7;
    color: #222;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}

.rte-editable[b-u6x3c87087]  [data-mine-cols] > div {
    outline: 1px dashed #93c5fd;
}

.rte-textarea[b-u6x3c87087] {
    width: 100%;
    min-height: 280px;
    padding: 14px 16px;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    border: none;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
    color: #222;
    background: #fafafa;
}

/* === Color Palette === */
.rte-palette-bar[b-u6x3c87087] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 10px 4px 10px;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    margin-top: 4px;
}

.rte-palette-group[b-u6x3c87087] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rte-palette-label[b-u6x3c87087] {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.rte-swatches[b-u6x3c87087] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    max-width: 160px;
}

.rte-swatch[b-u6x3c87087] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 2px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.1s, box-shadow 0.1s;
    text-decoration: none;
}

.rte-swatch:hover[b-u6x3c87087] {
    transform: scale(1.3);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    z-index: 1;
}

.rte-swatch-clear span[b-u6x3c87087] {
    font-size: 10px;
    color: #999;
    font-weight: 700;
}

.rte-color-pick[b-u6x3c87087] {
    width: 28px;
    height: 28px;
    border: 1px solid #dde1e7;
    border-radius: 5px;
    padding: 2px;
    cursor: pointer;
    background: #fff;
    flex-shrink: 0;
}

/* === Column Config Modal (คงเดิม) === */
.ColumnConfigOverlay[b-u6x3c87087] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    z-index: 200000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.ColumnConfigPanel[b-u6x3c87087] {
    background: white;
    border-radius: 10px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ColumnConfigScrollBody[b-u6x3c87087] {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.ColumnConfigSection[b-u6x3c87087] {
    margin: 14px 20px 0 20px;
}

.ColumnConfigSectionLabel[b-u6x3c87087] {
    font-size: 13px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.ContainerWidthRow[b-u6x3c87087] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ColUnitGroup[b-u6x3c87087] {
    display: flex;
    border: 2px solid #1a73e8;
    border-radius: 6px;
    overflow: hidden;
}

.ColUnitBtn[b-u6x3c87087] {
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    color: #1a73e8;
    background: white;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.ColUnitBtn:hover:not(.Active)[b-u6x3c87087] {
    background: #e8f0fb;
}

.ColUnitBtn.Active[b-u6x3c87087] {
    background: #1a73e8;
    color: white;
}

.ColumnConfigTitle[b-u6x3c87087] {
    background: linear-gradient(135deg, #1a73e8, #1254c0);
    color: white;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 20px;
    letter-spacing: 0.3px;
}

.ColumnConfigRows[b-u6x3c87087] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ColumnConfigColGroup[b-u6x3c87087] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fafafa;
}

.ColumnConfigColHeader[b-u6x3c87087] {
    font-size: 13px;
    font-weight: 700;
    color: #1a73e8;
    margin-bottom: 2px;
}

.ColumnConfigRow[b-u6x3c87087] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ColumnConfigLabel[b-u6x3c87087] {
    min-width: 90px;
    font-size: 13px;
    color: #333;
}

.ColumnWidthInput[b-u6x3c87087] {
    width: 70px;
    height: 32px;
    border: 1px solid #dde1e7;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.ColumnWidthInput:focus[b-u6x3c87087] {
    border-color: #1a73e8;
}

.ColumnWidthInput:disabled[b-u6x3c87087] {
    background: #f0f0f0;
    color: #aaa;
    border-color: #ddd;
    cursor: not-allowed;
}

.ColumnConfigPreview[b-u6x3c87087] {
    display: flex;
    margin: 14px 20px 0 20px;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    gap: 1px;
}

.ColumnPreviewBar[b-u6x3c87087] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a73e8;
    color: white;
    font-size: 11px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
}

.ColumnPreviewBar:nth-child(even)[b-u6x3c87087] {
    background: #1254c0;
}

.ColumnConfigActions[b-u6x3c87087] {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    justify-content: center;
}

.ColumnConfigBtn[b-u6x3c87087] {
    padding: 8px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s, transform 0.1s;
}

.ConfirmBtn[b-u6x3c87087] {
    background: linear-gradient(135deg, #1a73e8, #1254c0);
    color: white;
    box-shadow: 0 2px 6px rgba(26,115,232,0.35);
}

.ConfirmBtn:hover[b-u6x3c87087] {
    opacity: 0.88;
    transform: translateY(-1px);
}

.CancelBtn[b-u6x3c87087] {
    background: white;
    color: #666;
    border: 1px solid #dde1e7;
}

.CancelBtn:hover[b-u6x3c87087] {
    border-color: #999;
    color: #333;
}

/* === Responsive: Mobile === */
@media (max-width: 600px) {
    .rte-toolbar[b-u6x3c87087] {
        gap: 3px;
        padding: 6px 6px;
    }

    .rte-sep[b-u6x3c87087] {
        display: none;
    }

    .rte-heading-btn[b-u6x3c87087] {
        font-size: 12px;
        padding: 4px 8px;
        min-width: 70px;
    }

    .ButtonMain[b-u6x3c87087] {
        width: 28px;
        height: 28px;
    }

    .rte-editable[b-u6x3c87087] {
        min-height: 200px;
        padding: 10px 12px;
        font-size: 14px;
    }

    .rte-palette-bar[b-u6x3c87087] {
        flex-direction: column;
        align-items: flex-start;
    }

    .rte-swatches[b-u6x3c87087] {
        max-width: 100%;
    }

    .ColumnConfigPanel[b-u6x3c87087] {
        max-width: 100%;
    }

    .ColumnConfigRow[b-u6x3c87087] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/BackEnd/Products/Component/ProductGroupsManageComponent.razor.rz.scp.css */
/* /Components/Pages/BackEnd/Products/Component/SpecialReportPickerPopup.razor.rz.scp.css */
/* SpecialReportPickerPopup — modal เดี่ยว (list + checkbox) สำหรับเลือกกลุ่มรายงานพิเศษแบบ multi-select
   ธีมเดียวกับ CategoryPickerPopup/VenderPickerPopup */

.CPOverlay[b-559r8si6kx] {
    position: fixed; inset: 0; z-index: 1200; background: rgba(15,23,42,.45);
    display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px;
}

.CPBox[b-559r8si6kx] {
    width: 100%; max-width: 520px; max-height: calc(100vh - 96px);
    display: flex; flex-direction: column;
    background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(15,23,42,.30); overflow: hidden;
    font-family: inherit;
}

.CPHeader[b-559r8si6kx] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #eef1f4;
}
.CPHeaderTitle[b-559r8si6kx] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #1e293b; }
.CPHeaderIcon[b-559r8si6kx] { font-size: 16px; }
.CPCloseBtn[b-559r8si6kx] {
    width: 28px; height: 28px; border-radius: 8px; background: #f1f5f9; color: #475569;
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px;
}
.CPCloseBtn:hover[b-559r8si6kx] { background: #e2e8f0; }

.CPSearch[b-559r8si6kx] { padding: 12px 16px; border-bottom: 1px solid #eef1f4; }
.CPSearchHint[b-559r8si6kx] { font-size: 11px; color: #94a3b8; }

.CPBody[b-559r8si6kx] { flex: none; overflow-y: auto; padding: 6px; max-height: 460px; }
.CPRow[b-559r8si6kx] {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer;
}
.CPRow:hover[b-559r8si6kx] { background: #f1f5f9; }
.CPRowSelected[b-559r8si6kx], .CPRowSelected:hover[b-559r8si6kx] { background: #ecfdf5; box-shadow: inset 0 0 0 1.5px #0f766e; }
.CPCheckbox[b-559r8si6kx] {
    width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #cbd5e1; background: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; flex: none;
}
.CPCheckboxOn[b-559r8si6kx] { background: #0f766e; border-color: #0f766e; }
.CPInfo[b-559r8si6kx] { min-width: 0; flex: 1; }
.CPName[b-559r8si6kx] { font-size: 13px; font-weight: 700; color: #1e293b; }

.CPFooter[b-559r8si6kx] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 18px; border-top: 1px solid #eef1f4; background: #fff;
}
.CPFootInfo[b-559r8si6kx] { font-size: 12px; color: #64748b; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.CPFootBtns[b-559r8si6kx] { display: flex; gap: 8px; flex: none; }
.CPBtnCancel[b-559r8si6kx] {
    padding: 8px 16px; border-radius: 9px; border: 1.5px solid #d1d5db; background: #fff; color: #475569;
    font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.CPBtnCancel:hover[b-559r8si6kx] { background: #f3f4f6; }
.CPBtnConfirm[b-559r8si6kx] {
    padding: 8px 18px; border-radius: 9px; border: none; background: linear-gradient(135deg, #0f766e, #14b8a6); color: #fff;
    font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
/* /Components/Pages/BackEnd/Products/ProductDetail.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   ProductDetail.razor.css — รายละเอียดสินค้า
   Theme อ้างอิง SaleBillEditor.razor.css (POS) + SaleBillList.razor.css
   แถบบนขาว sticky (แบบ DataCustomer) · card #fff r14 border #edeff3 · accent #0B7A75/#095E5A
   bg #f7f8fa · font Mine_ThaiFont / IBM Plex Split (ตัวเลข)
   ══════════════════════════════════════════════════════════════════════════════ */

.PD input[b-kire8zx6dk], .PD button[b-kire8zx6dk], .PD textarea[b-kire8zx6dk], .PD select[b-kire8zx6dk] {
    font-family: 'Mine_ThaiFont', 'IBM Plex Sans Thai', sans-serif;
}

.PDLoad[b-kire8zx6dk] { text-align: center; padding: 80px; color: #94a3b8; font-size: 15px; }

/* [2026-10] ความกว้าง/ส่วนบนตามหน้า DataCustomer (.cd-wrap / .cd-topbar / .cd-inner)
   พื้นหลังเต็มพื้นที่ .ShowZone (flex — ห้ามใช้ calc(100vw - เมนู)) ; เนื้อหา max 1560 กึ่งกลาง
   ห้ามใส่ overflow:hidden ที่ .PD — ทำให้แถบบน sticky ไม่ติด */
.PD[b-kire8zx6dk] {
    display: flex; flex-direction: column;
    flex: 1 1 auto; width: auto; min-width: 0; min-height: 100%;
    background: #f7f8fa;
    font-family: 'Mine_ThaiFont', 'IBM Plex Sans Thai', sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .005em;
}

/* ─────────── แถบบน (sticky) ─────────── */
.PDTopbar[b-kire8zx6dk] {
    position: sticky; top: var(--be-top-h, 0px); z-index: 30;
    background: #fff; border-bottom: 1px solid #e4e8ef;
    padding: 9px 16px;
    display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;
}
.PDTopMain[b-kire8zx6dk] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.PDBack[b-kire8zx6dk] {
    width: 29px; height: 29px; flex: none; border-radius: 8px;
    border: 1px solid #e0e5ee; background: #fff; color: #5c6675;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1; cursor: pointer;
}
.PDBack:hover[b-kire8zx6dk] { background: #f4f6fa; border-color: #c9d2e0; }
.PDTitleBlock[b-kire8zx6dk] { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.PDHCrumb[b-kire8zx6dk] { font-size: 11px; color: #8d95a3; }
.PDHTitle[b-kire8zx6dk] {
    margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.2px; color: #1b2333;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.PDTopActions[b-kire8zx6dk] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.PDTopBtn[b-kire8zx6dk] {
    height: 32px; padding: 0 12px; border-radius: 7px;
    border: 1px solid #e0e5ee; background: #fff; color: #424d5e;
    font-size: 12.5px; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.PDTopBtn:hover[b-kire8zx6dk] { background: #f4f6fa; border-color: #c9d2e0; }
.PDTopbar .PDTagRow[b-kire8zx6dk] { padding-left: 41px; }

/* ปุ่มสีเข้ม (เดิมใช้ใน header ดำ) — ยังใช้ในเนื้อหา เช่น "+ เพิ่มหน่วย" */
.PDHBtn[b-kire8zx6dk] {
    padding: 7px 13px; border-radius: 8px; border: 1px solid #2b2f3a;
    background: #1b1e26; color: #cdd3dd; font-size: 12px; font-weight: 700; cursor: pointer;
}
.PDHBtn:hover[b-kire8zx6dk] { background: #262a34; color: #fff; }
.PDHBtn:disabled[b-kire8zx6dk] { opacity: .45; cursor: not-allowed; }
.PDHBtn:disabled:hover[b-kire8zx6dk] { background: #1b1e26; color: #cdd3dd; }
.PDHBtn.Primary[b-kire8zx6dk] { background: #0B7A75; border-color: #0B7A75; color: #fff; }
.PDHBtn.Primary:hover[b-kire8zx6dk] { background: #095E5A; border-color: #095E5A; }

.PDAlert[b-kire8zx6dk] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 14px; font-size: 12.5px; font-weight: 600; flex-shrink: 0;
}
.PDAlert.Ok[b-kire8zx6dk] { background: #ecfdf5; color: #047857; }
.PDAlert.Err[b-kire8zx6dk] { background: #fef2f2; color: #dc2626; }
.PDAlertX[b-kire8zx6dk] { cursor: pointer; font-size: 17px; }

/* ─────────── Body ─────────── */
.PDBody[b-kire8zx6dk] {
    display: flex; flex-direction: column; gap: 14px;
    width: 100%; max-width: 1560px; margin: 0 auto; padding: 14px 16px 26px; box-sizing: border-box;
}

.PDCard[b-kire8zx6dk] {
    background: #fff; border-radius: 14px; border: 1px solid #edeff3;
    box-shadow: 0 1px 3px rgba(15,23,42,.05); overflow: hidden;
}
.PDCardHead[b-kire8zx6dk] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 15px; border-bottom: 1px solid #f1f3f7;
    font-size: 12.5px; font-weight: 800; color: #1e293b;
}
.PDCardHeadSub[b-kire8zx6dk] { font-size: 10.5px; font-weight: 400; color: #94a3b8; }
.PDCardBody[b-kire8zx6dk] { padding: 13px 15px; display: flex; flex-direction: column; gap: 11px; }

/* ─────────── Hero ─────────── */
.PDHero[b-kire8zx6dk] { display: flex; flex-wrap: wrap; gap: 18px; padding: 16px 18px; }

.PDHeroImg[b-kire8zx6dk] { width: 168px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.PDImgMain[b-kire8zx6dk] {
    aspect-ratio: 1; border-radius: 12px; border: 1px solid #e7ebf1;
    background: repeating-linear-gradient(135deg, #f6f7f9 0 7px, #eef0f4 7px 14px);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #94a3b8; text-align: center; overflow: hidden;
}
.PDImgMain img[b-kire8zx6dk] { width: 100%; height: 100%; object-fit: cover; }
.PDImgThumbs[b-kire8zx6dk] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.PDImgThumb[b-kire8zx6dk] {
    height: 78px; border-radius: 7px; border: 1px solid #e7ebf1; cursor: pointer;
    background: repeating-linear-gradient(135deg, #f8f9fb 0 6px, #f0f2f6 6px 12px);
    overflow: hidden;
}
.PDImgThumb:hover[b-kire8zx6dk] { border-color: #0B7A75; }
.PDImgThumb img[b-kire8zx6dk] { width: 100%; height: 100%; object-fit: cover; }
.PDImgLink[b-kire8zx6dk] { font-size: 11px; color: #095E5A; cursor: pointer; }
.PDImgLink:hover[b-kire8zx6dk] { text-decoration: underline; }

.PDHeroInfo[b-kire8zx6dk] { flex: 1 1 300px; min-width: 300px; display: flex; flex-direction: column; gap: 11px; }
.PDTagRow[b-kire8zx6dk] { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.PDBadge[b-kire8zx6dk] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px;
    background: #ecfdf5; color: #047857; border: 1px solid #bbf7d0;
}
.PDBadge.Off[b-kire8zx6dk] { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.PDBadgeDot[b-kire8zx6dk] { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.PDBadge.Off .PDBadgeDot[b-kire8zx6dk] { background: #ef4444; }
.PDCode[b-kire8zx6dk] {
    font-size: 11px; font-weight: 700; color: #475569;
    background: #f6f7f9; border: 1px solid #e7ebf1; padding: 4px 9px; border-radius: 6px;
    font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', sans-serif;
}
.PDName[b-kire8zx6dk] { font-size: 22px; font-weight: 800; color: #1e293b; line-height: 1.3; word-break: break-word; }
.PDSub[b-kire8zx6dk] { font-size: 12.5px; color: #64748b; margin-top: 3px; }
.PDChipRow[b-kire8zx6dk] { display: flex; gap: 8px; flex-wrap: wrap; }
.PDChipBox[b-kire8zx6dk] {
    border: 1px solid #e7ebf1; border-radius: 9px; padding: 7px 11px;
    background: #fbfcfd; min-width: 118px;
}
.PDChipBox label[b-kire8zx6dk] { display: block; font-size: 10.5px; color: #94a3b8; }
.PDChipBox b[b-kire8zx6dk] {
    font-size: 13px; font-weight: 800; color: #1e293b;
    font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', sans-serif;
}
.PDMeta[b-kire8zx6dk] { font-size: 11px; color: #94a3b8; }

/* ─────────── Stock + Reserve ─────────── */
.PDHeroStock[b-kire8zx6dk] { flex: 1 1 330px; min-width: 300px; max-width: 400px; display: flex; flex-direction: column; gap: 10px; }
.PDStockRow[b-kire8zx6dk] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.PDStockBox[b-kire8zx6dk] {
    border: 1px solid #e7ebf1; border-radius: 12px; padding: 13px 14px;
    background: linear-gradient(180deg, #fdfefe, #f5f7fa);
}
.PDStockBox label[b-kire8zx6dk] { display: block; font-size: 11px; color: #64748b; }
.PDStockVal[b-kire8zx6dk] {
    display: flex; align-items: baseline; gap: 5px; margin-top: 4px;
    font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', sans-serif;
}
.PDStockVal b[b-kire8zx6dk] { font-size: 26px; font-weight: 800; color: #1e293b; letter-spacing: -.02em; }
.PDStockVal b.Status[b-kire8zx6dk] { font-size: 15px; white-space: nowrap; }
.PDStockVal span[b-kire8zx6dk] { font-size: 11.5px; color: #64748b; font-family: 'Mine_ThaiFont', sans-serif; }
.PDStockBar[b-kire8zx6dk] { margin-top: 8px; height: 5px; border-radius: 5px; background: #e6e9ee; overflow: hidden; }
.PDStockBarIn[b-kire8zx6dk] { height: 100%; background: #22c55e; }
.PDStockBarIn.Low[b-kire8zx6dk] { background: #f59e0b; }
.PDStockHint[b-kire8zx6dk] { font-size: 10px; color: #94a3b8; margin-top: 5px; font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', sans-serif; }
.PDStockWarn[b-kire8zx6dk] { font-size: 10px; font-weight: 800; color: #c2620f; margin-top: 4px; }

/* การ์ดจำนวนจอง — คลิกได้ */
.PDReserveBox[b-kire8zx6dk] {
    border: 1px solid #fbd6a8; border-radius: 12px; padding: 13px 14px; cursor: pointer;
    background: linear-gradient(180deg, #fffdf9, #fff7ed);
    transition: transform .14s, box-shadow .14s;
}
.PDReserveBox:hover[b-kire8zx6dk] { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(217,119,6,.18); }
.PDReserveTop[b-kire8zx6dk] { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #b45309; }
.PDReserveTop b[b-kire8zx6dk] { font-size: 10px; font-weight: 800; }
.PDReserveVal[b-kire8zx6dk] { display: flex; align-items: baseline; gap: 5px; margin-top: 4px; }
.PDReserveVal b[b-kire8zx6dk] {
    font-size: 26px; font-weight: 800; color: #c2620f; letter-spacing: -.02em;
    font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', sans-serif;
}
.PDReserveVal span[b-kire8zx6dk] { font-size: 11.5px; color: #b45309; }
.PDReserveFoot[b-kire8zx6dk] { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 10.5px; color: #b45309; }
.PDPulse[b-kire8zx6dk] { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; animation: PDPulse-b-kire8zx6dk 2s infinite; }
@keyframes PDPulse-b-kire8zx6dk {
    0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.45); }
    70%  { box-shadow: 0 0 0 10px rgba(245,158,11,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

.PDCostList[b-kire8zx6dk] { border: 1px solid #e7ebf1; border-radius: 12px; background: #fbfcfd; overflow: hidden; }
.PDCostRow[b-kire8zx6dk] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 13px; border-bottom: 1px solid #f1f3f7; font-size: 12px; color: #64748b;
}
.PDCostRow:last-child[b-kire8zx6dk] { border-bottom: none; }
.PDCostRow b[b-kire8zx6dk] {
    font-size: 12.5px; font-weight: 800; color: #1e293b;
    font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', sans-serif;
}

.PDBtnRow[b-kire8zx6dk] { display: flex; gap: 8px; }
.PDGhostBtn[b-kire8zx6dk] {
    flex: 1; padding: 9px; border-radius: 9px; border: 1.5px solid #d7dbe2; background: #fff;
    font-size: 12px; font-weight: 700; color: #475569; cursor: pointer;
}
.PDGhostBtn:hover[b-kire8zx6dk] { border-color: #8FCFCA; color: #095E5A; }
.PDDangerBtn[b-kire8zx6dk] {
    flex: 1; padding: 9px; border-radius: 9px; border: 1.5px solid #fecaca; background: #fef2f2;
    font-size: 12px; font-weight: 700; color: #b91c1c; cursor: pointer;
}
.PDDangerBtn:hover[b-kire8zx6dk] { background: #fee2e2; }

/* ─────────── Tabs ─────────── */
.PDTabs[b-kire8zx6dk] {
    display: flex; gap: 2px; padding: 0 16px; overflow-x: auto;
    background: #fafbfc; border-top: 1px solid #f1f3f7;
}
.PDTab[b-kire8zx6dk] {
    padding: 12px 15px; font-size: 12.5px; font-weight: 600; color: #64748b;
    cursor: pointer; white-space: nowrap;
    border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: transparent;
}
.PDTab:hover[b-kire8zx6dk] { color: #1e293b; }
.PDTab.On[b-kire8zx6dk] { color: #1e293b; font-weight: 800; border-bottom-color: #0B7A75; background: #fff; }
.PDTabN[b-kire8zx6dk] { font-size: 10.5px; color: #94a3b8; margin-left: 5px; font-family: 'IBM Plex Split', sans-serif; }

/* ─────────── Grid utils ─────────── */
.PDGrid2[b-kire8zx6dk] { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; }
.PDFieldGrid[b-kire8zx6dk] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 760px) {
    .PDFieldGrid[b-kire8zx6dk] { grid-template-columns: 1fr; }
    .PDStockRow[b-kire8zx6dk] { grid-template-columns: 1fr; }
    .PDHeroStock[b-kire8zx6dk] { max-width: none; }
}
.PDField label[b-kire8zx6dk] { display: block; font-size: 10.5px; color: #94a3b8; margin-bottom: 3px; }
.PDFieldVal[b-kire8zx6dk] {
    border: 1px solid #e7ebf1; border-radius: 8px; padding: 7px 10px;
    font-size: 12px; background: #fbfcfd; min-height: 32px; color: #1e293b;
    white-space: pre-line;
}
.PDFieldVal.Accent[b-kire8zx6dk] { border-left: 3px solid #0B7A75; }
.PDFieldVal.Dashed[b-kire8zx6dk] { border-style: dashed; }

.PDCheckLine[b-kire8zx6dk] { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #475569; }
.PDTick[b-kire8zx6dk] {
    width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0;
    background: #22c55e; color: #fff; font-size: 9px;
    display: flex; align-items: center; justify-content: center;
}
.PDTick.Off[b-kire8zx6dk] { background: #cbd5e1; }
.PDTick.Blue[b-kire8zx6dk] { background: #0B7A75; }

.PDNoteBlock[b-kire8zx6dk] { border: 1px solid #e7ebf1; border-radius: 9px; overflow: hidden; }
.PDNoteHead[b-kire8zx6dk] { padding: 6px 11px; font-size: 11px; font-weight: 800; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.PDNoteEditBtn[b-kire8zx6dk] { font-size: 10.5px; font-weight: 700; color: #fff; opacity: .85; cursor: pointer; text-decoration: underline; flex-shrink: 0; }
.PDNoteEditBtn:hover[b-kire8zx6dk] { opacity: 1; }
.PDNoteBody[b-kire8zx6dk] { padding: 9px 11px; font-size: 12px; line-height: 1.65; color: #334155; white-space: pre-line; min-height: 34px; }

/* inline edit */
.PDEditRow[b-kire8zx6dk] { display: flex; gap: 6px; align-items: stretch; }
.PDEditInput[b-kire8zx6dk] {
    flex: 1; min-width: 0; box-sizing: border-box; min-height: 34px;
    border: 1.5px solid #0B7A75; border-left: 3px solid #0B7A75; border-radius: 8px;
    padding: 7px 11px; font-size: 12.5px; outline: none; color: #1e293b;
}
.PDSaveBtn[b-kire8zx6dk] {
    padding: 0 14px; border-radius: 8px; border: none; cursor: pointer;
    background: #0B7A75; color: #fff; font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.PDSaveBtn:hover[b-kire8zx6dk] { background: #095E5A; }
.PDCancelBtn[b-kire8zx6dk] {
    padding: 0 12px; border-radius: 8px; border: 1.5px solid #d7dbe2; background: #fff;
    font-size: 12px; font-weight: 700; color: #64748b; cursor: pointer; flex-shrink: 0;
}
.PDLinkBtn[b-kire8zx6dk] { font-size: 10.5px; color: #095E5A; cursor: pointer; font-weight: 700; }
.PDLinkBtn:hover[b-kire8zx6dk] { text-decoration: underline; }

/* ─────────── Tables ─────────── */
.PDTableWrap[b-kire8zx6dk] { overflow-x: auto; }
.PDTable[b-kire8zx6dk] { width: 100%; border-collapse: collapse; }
.PDTable th[b-kire8zx6dk] {
    font-size: 10.5px; font-weight: 800; color: #64748b; padding: 9px 13px;
    background: #f7f8fa; border-bottom: 1px solid #eaecf0; white-space: nowrap; text-align: left;
}
.PDTable th.R[b-kire8zx6dk], .PDTable td.R[b-kire8zx6dk] { text-align: right; }
.PDTable td[b-kire8zx6dk] {
    padding: 10px 13px; border-bottom: 1px solid #f1f3f7;
    font-size: 12px; color: #334155;
}
.PDTable tbody tr:hover[b-kire8zx6dk] { background: #fafbfc; }
.PDTable td.Num[b-kire8zx6dk], .PDTable th.Num[b-kire8zx6dk] { font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', sans-serif; }
.PDTable tfoot td[b-kire8zx6dk] { background: #fafbfc; font-weight: 800; color: #1e293b; border-bottom: none; }
.PDTLink[b-kire8zx6dk] { color: #095E5A; cursor: pointer; font-family: 'IBM Plex Split', sans-serif; }
.PDTLink:hover[b-kire8zx6dk] { text-decoration: underline; }
.PDLotTag[b-kire8zx6dk] {
    background: #EEF7F6; border: 1px solid #CFE6E4; color: #095E5A;
    padding: 2px 7px; border-radius: 6px; font-size: 11.5px;
    font-family: 'IBM Plex Split', sans-serif;
}
.PDLeft[b-kire8zx6dk] { font-weight: 800; color: #047857; font-family: 'IBM Plex Split', sans-serif; }

/* ─────────── Units & price (20 levels) ─────────── */
.PDUnitGroupLabel[b-kire8zx6dk] {
    font-size: 12px; font-weight: 800; color: #52606d; text-transform: uppercase; letter-spacing: .04em;
}
.PDUnitBlock[b-kire8zx6dk] { border: 1px solid #e7ebf1; border-radius: 11px; overflow: hidden; }
.PDUnitHead[b-kire8zx6dk] {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 14px; background: #fafbfc; border-bottom: 1px solid #f1f3f7;
}
.PDUnitTag[b-kire8zx6dk] {
    font-size: 12.5px; font-weight: 800; background: #0B7A75; color: #fff;
    padding: 3px 10px; border-radius: 7px;
}
.PDUnitPack[b-kire8zx6dk] { font-size: 12px; color: #334155; }
.PDUnitBar[b-kire8zx6dk] { font-size: 11.5px; color: #64748b; font-family: 'IBM Plex Split', sans-serif; }
.PDUnitSpacer[b-kire8zx6dk] { flex: 1; }
.PDUnitUpd[b-kire8zx6dk] { font-size: 10.5px; color: #94a3b8; }

.PDPriceTable[b-kire8zx6dk] { min-width: 1740px; border: 1px solid #e7ebf1; border-collapse: collapse; }
.PDPriceTable th[b-kire8zx6dk], .PDPriceTable td[b-kire8zx6dk] { border: 1px solid #eef0f4; }
.PDPriceTable th.Sticky[b-kire8zx6dk], .PDPriceTable td.Sticky[b-kire8zx6dk] {
    position: sticky; left: 0; z-index: 2; width: 120px;
    border-right: 1.5px solid #e3e6ea;
}
.PDPriceTable th.Sticky[b-kire8zx6dk] { background: #f7f8fa; }
.PDPriceTable td.Sticky[b-kire8zx6dk] { background: #fff; }
.PDPriceTable th.Lv[b-kire8zx6dk] { min-width: 82px; text-align: right; }
.PDPriceCell[b-kire8zx6dk] { text-align: right; cursor: text; font-family: 'IBM Plex Split', sans-serif; font-weight: 700; }
.PDPriceCell:hover[b-kire8zx6dk] { background: #EEF7F6; }
.PDPriceCell.ReadOnly[b-kire8zx6dk] { cursor: default; }
.PDPriceCell.ReadOnly:hover[b-kire8zx6dk] { background: none; }
.PDPriceCell.RT[b-kire8zx6dk] { color: #095E5A; }
.PDPriceCell.WS[b-kire8zx6dk] { color: #047857; }
.PDPriceCell.Empty[b-kire8zx6dk] { color: #cbd5e1; font-weight: 400; }
.PDPriceCell.Editing[b-kire8zx6dk] { background: #EEF7F6; padding: 2px 6px; }
.PDPriceInput[b-kire8zx6dk] {
    width: 78px; box-sizing: border-box; text-align: right;
    border: 1.5px solid #0B7A75; border-radius: 5px; padding: 3px 6px;
    font-size: 12.5px; outline: none; color: #1e293b;
    font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', sans-serif;
}

/* ─────────── Filter bar ─────────── */
.PDFilterBar[b-kire8zx6dk] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.PDSeg[b-kire8zx6dk] { display: flex; border: 1px solid #d7dbe2; border-radius: 8px; overflow: hidden; }
.PDSegBtn[b-kire8zx6dk] {
    padding: 6px 13px; font-size: 11.5px; font-weight: 700; color: #64748b;
    background: #fff; cursor: pointer; border: none;
}
.PDSegBtn.On[b-kire8zx6dk] { background: #0B7A75; color: #fff; }
.PDDate[b-kire8zx6dk] {
    box-sizing: border-box; min-height: 32px; border: 1.5px solid #e3e6ea; border-radius: 7px;
    padding: 5px 9px; font-size: 11.5px; outline: none; color: #1e293b;
    font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', sans-serif;
}
.PDDate:focus[b-kire8zx6dk] { border-color: #0B7A75; }
.PDViewBtn[b-kire8zx6dk] {
    padding: 7px 14px; border-radius: 7px; border: none; cursor: pointer;
    background: #0B7A75; color: #fff; font-size: 11.5px; font-weight: 700;
}
.PDViewBtn:hover[b-kire8zx6dk] { background: #095E5A; }
.PDSumStrip[b-kire8zx6dk] {
    display: flex; gap: 22px; flex-wrap: wrap; padding: 12px 15px;
    background: #fafbfc; border-top: 1px solid #f1f3f7; font-size: 11.5px; color: #64748b;
}
.PDSumStrip b[b-kire8zx6dk] { color: #1e293b; font-family: 'IBM Plex Split', sans-serif; }
.PDSumStrip b.In[b-kire8zx6dk] { color: #047857; }
.PDSumStrip b.Out[b-kire8zx6dk] { color: #b91c1c; }

/* group header ของตารางเคลื่อนไหว */
.PDMvIn[b-kire8zx6dk]  { background: #ecfdf5; color: #047857; text-align: center; }
.PDMvOut[b-kire8zx6dk] { background: #fef2f2; color: #b91c1c; text-align: center; }
.PDMvBal[b-kire8zx6dk] { background: #EEF7F6; color: #095E5A; text-align: center; }
.PDTable td.MvIn[b-kire8zx6dk]  { background: #fbfefc; }
.PDTable td.MvOut[b-kire8zx6dk] { background: #fffbfb; }
.PDTable td.MvBal[b-kire8zx6dk] { background: #fbfcff; font-weight: 700; }

/* ─────────── Categories / status side ─────────── */
.PDSideList[b-kire8zx6dk] { max-height: 250px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.PDCatRow[b-kire8zx6dk] {
    display: flex; align-items: center; gap: 9px; font-size: 12.5px;
    padding: 7px 8px; border-radius: 7px; cursor: pointer; color: #334155;
}
.PDCatRow:hover[b-kire8zx6dk] { background: #f6f7f9; }
.PDCatRow input[b-kire8zx6dk] { width: 14px; height: 14px; accent-color: #0B7A75; }
.PDStatusRow[b-kire8zx6dk] { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #94a3b8; }
.PDStatusRow b[b-kire8zx6dk] { color: #1e293b; text-align: right; font-weight: 800; }
.PDStatusRow b.Num[b-kire8zx6dk] { font-family: 'IBM Plex Split', sans-serif; }
.PDStatusRow b.Warn[b-kire8zx6dk] { color: #c2620f; font-family: 'IBM Plex Split', sans-serif; }
.PDStatusRow b.Ok[b-kire8zx6dk] { color: #047857; }

/* ─────────── Web tab editor ─────────── */
.PDEditorTools[b-kire8zx6dk] {
    display: flex; gap: 3px; flex-wrap: wrap; padding: 9px 14px;
    background: #fafbfc; border-bottom: 1px solid #f1f3f7;
}
.PDToolBtn[b-kire8zx6dk] {
    min-width: 27px; height: 27px; padding: 0 7px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: #475569; cursor: pointer; border: none; background: transparent;
}
.PDToolBtn:hover[b-kire8zx6dk] { background: #e9ebef; color: #1e293b; }
.PDWebBody[b-kire8zx6dk] { padding: 18px 20px; font-size: 13px; line-height: 1.85; color: #334155; white-space: pre-line; }

/* [2026-10] รายละเอียดสินค้า (หน้าร้าน) — พรีวิว HTML จริง + ปุ่มเปิดตัวออกแบบ */
.PDDesignBtn[b-kire8zx6dk] {
    height: 30px; padding: 0 14px; border-radius: 8px; border: 0; cursor: pointer;
    background: #0B7A75; color: #fff; font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.PDDesignBtn:hover:not(:disabled)[b-kire8zx6dk] { background: #095E5A; }
.PDDesignBtn:disabled[b-kire8zx6dk] { opacity: .5; cursor: default; }
.PDWebRendered[b-kire8zx6dk] { padding: 18px 20px; max-height: 560px; overflow-y: auto; }
.PDWebEmpty[b-kire8zx6dk] {
    margin: 16px; padding: 34px 18px; border: 2px dashed #d7dbe2; border-radius: 12px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 6px; color: #64748b;
}
.PDWebEmptyIc[b-kire8zx6dk] { font-size: 30px; }
.PDWebEmptyT[b-kire8zx6dk] { font-size: 14px; font-weight: 700; color: #1e293b; }
.PDWebEmptyD[b-kire8zx6dk] { font-size: 12px; max-width: 420px; line-height: 1.6; margin-bottom: 8px; }
.PDWebMeta[b-kire8zx6dk] { padding: 8px 20px 12px; font-size: 11.5px; color: #94a3b8; border-top: 1px solid #f0f2f5; }
.PDWebMeta:empty[b-kire8zx6dk] { display: none; }
.PDShortDesc[b-kire8zx6dk] {
    border: 1px dashed #d7dbe2; border-radius: 10px; min-height: 110px;
    padding: 12px; font-size: 12px; color: #94a3b8; background: #fbfcfd;
    box-sizing: border-box; width: 100%; resize: vertical; outline: none;
    font-family: 'Mine_ThaiFont', 'IBM Plex Sans Thai', sans-serif;
}
.PDShortDesc:focus[b-kire8zx6dk] { border-color: #0B7A75; border-style: solid; color: #1e293b; }
.PDCharCount[b-kire8zx6dk] { font-size: 10.5px; color: #94a3b8; margin-top: 7px; font-family: 'IBM Plex Split', sans-serif; }
.PDShortOver[b-kire8zx6dk] { color: #d97706; font-family: 'Mine_ThaiFont', 'IBM Plex Sans Thai', sans-serif; }
.PDShortUses[b-kire8zx6dk] { margin: 8px 0 0; padding-left: 16px; font-size: 11px; color: #94a3b8; line-height: 1.6; }
.PDGallery[b-kire8zx6dk] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.PDGalleryCell[b-kire8zx6dk] {
    aspect-ratio: 1; border-radius: 8px; border: 1px solid #e7ebf1; overflow: hidden;
    background: repeating-linear-gradient(135deg, #f8f9fb 0 6px, #f0f2f6 6px 12px);
    display: flex; align-items: center; justify-content: center;
    font-size: 9.5px; color: #9aa0a8; cursor: pointer;
}
.PDGalleryCell:hover[b-kire8zx6dk] { border-color: #0B7A75; }
.PDGalleryCell img[b-kire8zx6dk] { width: 100%; height: 100%; object-fit: cover; }
.PDGalleryCell.Empty[b-kire8zx6dk] { cursor: default; }
.PDGalleryRemove[b-kire8zx6dk] {
    position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(15,23,42,.65); color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; cursor: pointer; line-height: 1;
}
.PDGalleryRemove:hover[b-kire8zx6dk] { background: #c0392b; }

/* ─────────── รูปภาพ/แกลเลอรี่: ปุ่มการกระทำ (ให้เห็นชัดกว่า PDSegBtn) ─────────── */
.PDImgActionBtn[b-kire8zx6dk] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; border: 1.5px solid #0B7A75;
    background: #EEF7F6; color: #095E5A; font-size: 12.5px; font-weight: 800; cursor: pointer;
    transition: .15s;
}
.PDImgActionBtn:hover[b-kire8zx6dk] { background: #0B7A75; color: #fff; }
.PDImgActionBtn.Danger[b-kire8zx6dk] { border-color: #e74c3c; background: #fdecea; color: #c0392b; }
.PDImgActionBtn.Danger:hover[b-kire8zx6dk] { background: #e74c3c; color: #fff; }
.PDImgActionBtn.Add[b-kire8zx6dk] { width: 100%; justify-content: center; border-style: dashed; }
.PDImgActionIcon[b-kire8zx6dk] { font-size: 13px; line-height: 1; }

/* ─────────── Reservation drawer ─────────── */
.PDDrawerWrap[b-kire8zx6dk] { position: fixed; inset: 0; z-index: 1200; display: flex; justify-content: flex-end; }
.PDDrawerBack[b-kire8zx6dk] { position: absolute; inset: 0; background: rgba(15,23,42,.42); animation: PDFade-b-kire8zx6dk .2s ease; }
.PDDrawer[b-kire8zx6dk] {
    position: relative; width: 640px; max-width: 94vw; height: 100%;
    background: #f7f8fa; box-shadow: -14px 0 40px rgba(15,23,42,.24);
    display: flex; flex-direction: column; animation: PDSlide-b-kire8zx6dk .26s cubic-bezier(.22,.7,.3,1);
}
@media (max-width: 760px) { .PDDrawer[b-kire8zx6dk] { width: 100%; max-width: 100%; } }
@keyframes PDFade-b-kire8zx6dk { from { opacity: 0; } to { opacity: 1; } }
@keyframes PDSlide-b-kire8zx6dk { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes PDRise-b-kire8zx6dk { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes PDFadeOut-b-kire8zx6dk { from { opacity: 1; } to { opacity: 0; } }
@keyframes PDSlideOut-b-kire8zx6dk { from { transform: translateX(0); opacity: 1; } to { transform: translateX(24px); opacity: 0; } }

.PDDrawerBack.Closing[b-kire8zx6dk] { animation: PDFadeOut-b-kire8zx6dk .2s ease forwards; }
.PDDrawer.Closing[b-kire8zx6dk] { animation: PDSlideOut-b-kire8zx6dk .2s cubic-bezier(.22,.7,.3,1) forwards; }

.PDDrawerHead[b-kire8zx6dk] {
    padding: 16px 20px; background: #fff; border-bottom: 1px solid #edeff3;
    display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0;
}
.PDDrawerHeadL[b-kire8zx6dk] { flex: 1; min-width: 0; }
.PDDrawerKicker[b-kire8zx6dk] { font-size: 10.5px; color: #94a3b8; }
.PDDrawerTitle[b-kire8zx6dk] { font-size: 16px; font-weight: 800; color: #1e293b; margin-top: 2px; }
.PDDrawerSub[b-kire8zx6dk] { font-size: 11.5px; color: #64748b; margin-top: 3px; }
.PDDrawerSub b[b-kire8zx6dk] { color: #c2620f; }
.PDDrawerX[b-kire8zx6dk] {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px;
    border: 1px solid #e3e6ea; background: #fff; color: #64748b;
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px;
}
.PDDrawerX:hover[b-kire8zx6dk] { background: #f1f3f6; color: #1e293b; }
.PDDrawerBody[b-kire8zx6dk] { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.PDDrawerNote[b-kire8zx6dk] { font-size: 11px; color: #94a3b8; padding: 2px 4px; }

.PDBillCard[b-kire8zx6dk] {
    background: #fff; border: 1px solid #e5e9ef; border-radius: 12px; overflow: hidden;
    cursor: pointer; transition: box-shadow .14s;
}
.PDBillCard:hover[b-kire8zx6dk] { box-shadow: 0 6px 18px rgba(23,45,80,.1); }
.PDBillTop[b-kire8zx6dk] { padding: 13px 15px; display: flex; align-items: center; gap: 12px; }
.PDBillTopL[b-kire8zx6dk] { flex: 1; min-width: 0; }
.PDBillCode[b-kire8zx6dk] { font-size: 13.5px; font-weight: 800; color: #095E5A; font-family: 'IBM Plex Split', sans-serif; }
.PDBillStatus[b-kire8zx6dk] { font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: 20px; }
.PDBillStatus.Wait[b-kire8zx6dk] { background: #fff7ed; color: #c2620f; border: 1px solid #fbd6a8; }
.PDBillStatus.Done[b-kire8zx6dk] { background: #ecfdf5; color: #047857; border: 1px solid #bbf7d0; }
.PDBillCust[b-kire8zx6dk] { font-size: 12px; color: #64748b; margin-top: 4px; }
.PDBillQty[b-kire8zx6dk] { text-align: right; }
.PDBillQty b[b-kire8zx6dk] { font-size: 17px; font-weight: 800; color: #c2620f; font-family: 'IBM Plex Split', sans-serif; }
.PDBillQty span[b-kire8zx6dk] { display: block; font-size: 10px; color: #94a3b8; }
.PDBillCaret[b-kire8zx6dk] { font-size: 13px; color: #9aa0a8; }

.PDBillDetail[b-kire8zx6dk] {
    border-top: 1px solid #f1f3f7; background: #fbfcfd;
    padding: 14px 15px; display: flex; flex-direction: column; gap: 12px;
    animation: PDRise-b-kire8zx6dk .2s ease;
}
.PDBillMetaGrid[b-kire8zx6dk] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 760px) { .PDBillMetaGrid[b-kire8zx6dk] { grid-template-columns: 1fr; } }
.PDBillMetaBox[b-kire8zx6dk] { border: 1px solid #eef0f3; border-radius: 8px; padding: 7px 10px; background: #fff; }
.PDBillMetaBox label[b-kire8zx6dk] { display: block; font-size: 10px; color: #94a3b8; }
.PDBillMetaBox b[b-kire8zx6dk] { font-size: 12px; font-weight: 800; color: #1e293b; }
.PDBillLines[b-kire8zx6dk] { border: 1px solid #eef0f3; border-radius: 9px; overflow: hidden; background: #fff; }
.PDBillLines table[b-kire8zx6dk] { width: 100%; border-collapse: collapse; }
.PDBillLines th[b-kire8zx6dk] { font-size: 10px; font-weight: 800; color: #64748b; padding: 7px 10px; background: #f7f8fa; text-align: left; }
.PDBillLines td[b-kire8zx6dk] { padding: 8px 10px; border-top: 1px solid #f1f3f7; font-size: 11.5px; color: #334155; }
.PDBillActions[b-kire8zx6dk] { display: flex; gap: 8px; flex-wrap: wrap; }
.PDBillActions button[b-kire8zx6dk] {
    padding: 8px 13px; border-radius: 8px; border: 1.5px solid #d7dbe2; background: #fff;
    font-size: 11.5px; font-weight: 700; color: #475569; cursor: pointer;
}
.PDBillActions button.Primary[b-kire8zx6dk] { background: #0B7A75; border-color: #0B7A75; color: #fff; }
.PDBillActions button.Primary:hover[b-kire8zx6dk] { background: #095E5A; border-color: #095E5A; }
.PDBillActions button.Danger[b-kire8zx6dk] { color: #b91c1c; }
.PDBillActions button.Danger:hover[b-kire8zx6dk] { background: #fef2f2; }

/* ─────────── Modal (แก้ไขหน่วย / แกลเลอรี่) ─────────── */
.PDModalWrap[b-kire8zx6dk] {
    position: fixed; inset: 0; z-index: 1300;
    display: flex; align-items: center; justify-content: center; padding: 18px;
}
.PDModalBack[b-kire8zx6dk] { position: absolute; inset: 0; background: rgba(15,23,42,.44); animation: PDFade-b-kire8zx6dk .2s ease; }
.PDModal[b-kire8zx6dk] {
    position: relative; width: 440px; max-width: 100%; max-height: 88vh;
    background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(15,23,42,.28);
    display: flex; flex-direction: column; overflow: hidden; animation: PDRise-b-kire8zx6dk .22s ease;
}
.PDModal.Wide[b-kire8zx6dk] { width: 720px; }
.PDModal.UnitWide[b-kire8zx6dk] { width: 860px; }
.PDPriceGrid[b-kire8zx6dk] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
@media (max-width: 760px) { .PDPriceGrid[b-kire8zx6dk] { grid-template-columns: repeat(2, 1fr); } }
.PDBlockLabel[b-kire8zx6dk] {
    font-size: 11px; font-weight: 800; color: #334155;
    margin: 6px 0 2px; padding-top: 8px; border-top: 1px dashed #e7ebf1;
}
.PDModalHead[b-kire8zx6dk] {
    padding: 15px 18px; border-bottom: 1px solid #edeff3;
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.PDModalKicker[b-kire8zx6dk] { font-size: 10.5px; color: #94a3b8; }
.PDModalTitle[b-kire8zx6dk] { font-size: 15px; font-weight: 800; color: #1e293b; margin-top: 1px; }
.PDModalBody[b-kire8zx6dk] { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.PDModalFoot[b-kire8zx6dk] {
    padding: 13px 18px; border-top: 1px solid #edeff3; background: #fafbfc;
    display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0;
}
.PDModalInput[b-kire8zx6dk] {
    box-sizing: border-box; width: 100%; min-height: 36px;
    border: 1.5px solid #e3e6ea; border-radius: 8px; padding: 8px 11px;
    font-size: 12.5px; outline: none; background: #fbfcfd; color: #1e293b;
}
.PDModalInput:focus[b-kire8zx6dk] { border-color: #0B7A75; background: #fff; }
.PDModalInput.Num[b-kire8zx6dk] { text-align: right; font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', sans-serif; }

/* ─────────── เพิ่มสินค้าใหม่ (gate ตั้งชื่อก่อนสร้าง) ─────────── */
.PDNewGate[b-kire8zx6dk] { width: 75%; max-width: none; margin: 40px auto; }
.PDNewGate .PDCardHead[b-kire8zx6dk] { font-size: 15px; padding: 16px 22px; }
.PDNewGate .PDCardBody[b-kire8zx6dk] { padding: 24px 22px 26px; }
.PDNewGate .PDField label[b-kire8zx6dk] { font-size: 13px; margin-bottom: 8px; }
.PDNewGateInput[b-kire8zx6dk] {
    min-height: 52px; font-size: 17px; padding: 12px 16px; border-radius: 10px;
    border-width: 2px;
}
.PDNewGateBtn[b-kire8zx6dk] { min-height: 44px; padding: 0 26px; font-size: 14px; border-radius: 9px; }
.PDModalHint[b-kire8zx6dk] { font-size: 10.5px; color: #94a3b8; margin-top: 5px; }
.PDModalHintError[b-kire8zx6dk] { color: #dc2626; font-weight: 700; }
.PDInputError[b-kire8zx6dk] { border-color: #dc2626 !important; background: #fef2f2 !important; }
.PDBtnError[b-kire8zx6dk] { border-color: #dc2626 !important; background: #fef2f2 !important; color: #dc2626 !important; }
.PDInfoBar[b-kire8zx6dk] {
    font-size: 11.5px; color: #475569; background: #EEF7F6;
    border: 1px solid #CFE6E4; border-radius: 9px; padding: 9px 12px;
}
.PDMgrGrid[b-kire8zx6dk] { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.PDMgrMain[b-kire8zx6dk] { width: 100%; aspect-ratio: 16/9; }

/* ─────────── Toast ─────────── */
.PDToast[b-kire8zx6dk] {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(0) scale(1); z-index: 1400;
    background: #12141a; color: #fff; font-size: 12.5px; padding: 11px 18px; border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15,23,42,.3);
    display: flex; align-items: center; gap: 9px;
    animation: PDToastIn-b-kire8zx6dk .32s cubic-bezier(.2,.8,.25,1);
}
.PDToast.Leaving[b-kire8zx6dk] { animation: PDToastOut-b-kire8zx6dk .28s cubic-bezier(.4,0,1,1) forwards; }
.PDToastTick[b-kire8zx6dk] {
    width: 15px; height: 15px; border-radius: 50%; background: #22c55e; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0;
}
@keyframes PDToastIn-b-kire8zx6dk {
    from { transform: translateX(-50%) translateY(14px) scale(.94); opacity: 0; }
    to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
@keyframes PDToastOut-b-kire8zx6dk {
    from { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
    to { transform: translateX(-50%) translateY(10px) scale(.96); opacity: 0; }
}
/* /Components/Pages/BackEnd/Products/SpecialGroup.razor.rz.scp.css */
/* เฉพาะส่วนเสริมของหน้ากลุ่มสินค้าพิเศษ — โครงหน้า/สีหลักมาจาก wwwroot/css/minelist.css (pl-*) */

.sg-chips[b-k2ala37z7j] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sg-chip[b-k2ala37z7j] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.sg-none[b-k2ala37z7j] {
    color: #9AA5B4;
    font-size: 13px;
}

.sg-kytext[b-k2ala37z7j] {
    font-size: 12.5px;
    font-weight: 600;
    color: #4338CA;
}

/* แถวเปิด/ปิดกลุ่มในแผงรายละเอียด */
.sg-grow[b-k2ala37z7j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    margin-bottom: 8px;
    border: 1px solid #E6EBF2;
    border-radius: 12px;
    background: #fff;
}

.sg-grow.on[b-k2ala37z7j] {
    border-color: #B9E0DC;
    background: #F2FAF9;
}

.sg-grow-text[b-k2ala37z7j] {
    flex: 1;
    min-width: 0;
}

.sg-grow-title[b-k2ala37z7j] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #233043;
}

.sg-grow-hint[b-k2ala37z7j] {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.5;
    color: #7A8696;
}

.sg-savehint[b-k2ala37z7j] {
    margin-top: 4px;
    font-size: 12px;
    color: #9AA5B4;
    text-align: center;
}

/* แถวเลือก คงเดิม/เพิ่ม/นำออก ใน modal */
.sg-arow[b-k2ala37z7j] {
    padding: 10px 0;
    border-bottom: 1px dashed #E6EBF2;
}

.sg-arow:last-of-type[b-k2ala37z7j] {
    border-bottom: 0;
}

.sg-arow-title[b-k2ala37z7j] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #233043;
}
/* /Components/Pages/BackEnd/Promotion/PromotionEditor.razor.rz.scp.css */
/* [2026-10] หน้าแก้ไขโปรโมชั่น — เสริมธีม st-* (minesettings.css) */
.pe-check[b-um6ahx9c2v] { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.pe-check input[b-um6ahx9c2v] { width: 16px; height: 16px; accent-color: #0B7A75; }
.pe-cats[b-um6ahx9c2v] { display: flex; flex-wrap: wrap; gap: 8px 4px; padding: 8px 0 12px; max-height: 220px; overflow: auto; }
.pe-empty[b-um6ahx9c2v] { font-size: 13px; color: #94a3b8; padding: 6px 0 10px; }
.pe-sub[b-um6ahx9c2v] { font-size: 13px; font-weight: 600; color: #374151; margin: 10px 0 6px; }
.pe-codeform[b-um6ahx9c2v] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.pe-codeform > .st-input:first-child[b-um6ahx9c2v] { flex: 1 1 180px; min-width: 0; }
.pe-mini[b-um6ahx9c2v] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.pe-mini .st-input[b-um6ahx9c2v] { width: 80px; }
.pe-msg[b-um6ahx9c2v] { font-size: 13px; color: #0B7A75; margin: 8px 0; }
.pe-codehead[b-um6ahx9c2v] { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: 13px; color: #64748b; }
.pe-codelist[b-um6ahx9c2v] { max-height: 420px; overflow: auto; }
@media (max-width: 640px) {
    .pe-codeform > *[b-um6ahx9c2v] { flex: 1 1 100%; }
}
/* /Components/Pages/BackEnd/Sales/SalesManage.razor.rz.scp.css */
/* ===== SalesManage — ใช้ธีม MineListShell (wwwroot/css/minelist.css) ; ไฟล์นี้เฉพาะส่วนเสริมของหน้า ===== */

/* wrapper โปร่งใส — ให้ .pl-root เป็น flex child ของ .ShowZone ตรงๆ เหมือนหน้า list อื่น (มีไว้เป็น scope ของ ::deep) */
.SMRoot[b-l7hyhejl2m] {
    display: contents;
}

    /* ป้ายสถานะยาวสุด ("แปลงเป็นบิลขายแล้ว") ให้อยู่บรรทัดเดียว */
    .SMRoot[b-l7hyhejl2m]  .pl-c-status {
        flex: 0 0 136px;
        width: 136px;
    }

/* takeover (เปิดบิลเต็ม OrderBill / CustomerOrders) */
.SMTakeover[b-l7hyhejl2m] {
    position: relative;
    /* [2026-10] ยืดเท่าพื้นที่ที่เหลือจริง (.ShowZone เป็น width:fit-content) — เดิม width:100% มือถือ 390 เปิดบิลสั่งซื้อแล้วหน้ากว้าง 862px */
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    box-sizing: border-box;
}

/* ชิปชนิดบิลหน้ารหัสบิล */
.SMType[b-l7hyhejl2m] {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    vertical-align: 1px;
}

    .SMType.Sale[b-l7hyhejl2m] {
        background: #E8F0FA;
        color: #2563A8;
    }

    .SMType.Po[b-l7hyhejl2m] {
        background: #F1EBFB;
        color: #6B46C1;
    }

/* ข้อความขั้นตอนถัดไป บนสุดของแท็บข้อมูลบิล */
.SMAdvice[b-l7hyhejl2m] {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #F4FAF9;
    border: 1px solid #CFE6E2;
    color: #0B5F5B;
    font-size: 13px;
    line-height: 1.45;
}

/* ลิงก์ไปบิลอ้างอิง (สร้างจาก / สั่งซ้ำ / แปลงเป็นบิลขาย) */
.SMRefLink[b-l7hyhejl2m] {
    display: inline-block;
    margin-right: 8px;
    color: #0B7A75;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

    .SMRefLink:hover[b-l7hyhejl2m] {
        color: #095E5A;
    }

/* เมนู ⋯ : รายการที่ไม่มีสิทธิ์ */
.SMDisabled[b-l7hyhejl2m] {
    opacity: .4;
    cursor: not-allowed;
}

.SMMt[b-l7hyhejl2m] {
    margin-top: 12px;
}

/* ===== ดูหลักฐานการชำระเงิน ===== */
.ShowingPaymentImage[b-l7hyhejl2m] {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.SPI-Backdrop[b-l7hyhejl2m] {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .72);
}

.SPI-Close[b-l7hyhejl2m] {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

    .SPI-Close:hover[b-l7hyhejl2m] {
        background: rgba(255, 255, 255, .28);
    }

.ShowingPaymentImage .DivImg[b-l7hyhejl2m] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ShowingPaymentImage .DivImg img[b-l7hyhejl2m] {
        max-height: 78vh;
        max-width: 80vw;
        border-radius: 10px;
        box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6);
        background: #fff;
    }

.SPI-Thumbs[b-l7hyhejl2m] {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 8px;
}

.WatchingPaymentImageItem[b-l7hyhejl2m] {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, .1);
    border: 2px solid transparent;
    opacity: .7;
    transition: .15s;
}

    .WatchingPaymentImageItem img[b-l7hyhejl2m] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .WatchingPaymentImageItem:hover[b-l7hyhejl2m],
    .WatchingPaymentImageItem.Selected[b-l7hyhejl2m] {
        opacity: 1;
        border-color: #fff;
    }
/* /Components/Pages/BackEnd/Settings/Componant/UnitNameManage.razor.rz.scp.css */
.UNM-Overlay[b-5h3a0i9u3v] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 32, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
    animation: UNM-FadeIn-b-5h3a0i9u3v .15s ease-out;
}

@keyframes UNM-FadeIn-b-5h3a0i9u3v {
    from { opacity: 0; }
    to { opacity: 1; }
}

.UNM-Modal[b-5h3a0i9u3v] {
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.28);
    overflow: hidden;
    font-family: 'IBM Plex Sans Thai', 'Sarabun', sans-serif;
    animation: UNM-PopIn-b-5h3a0i9u3v .18s cubic-bezier(.2,.9,.3,1.1);
}

@keyframes UNM-PopIn-b-5h3a0i9u3v {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.UNM-Head[b-5h3a0i9u3v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #0B7A75, #095E5A);
    color: #fff;
}

.UNM-HeadIcon[b-5h3a0i9u3v] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

.UNM-HeadText[b-5h3a0i9u3v] {
    flex: 1;
    min-width: 0;
}

.UNM-Title[b-5h3a0i9u3v] {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.UNM-Sub[b-5h3a0i9u3v] {
    font-size: 12.5px;
    opacity: .85;
    margin-top: 2px;
}

.UNM-CloseBtn[b-5h3a0i9u3v] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}

    .UNM-CloseBtn:hover[b-5h3a0i9u3v] {
        background: rgba(255,255,255,0.28);
    }

.UNM-Body[b-5h3a0i9u3v] {
    padding: 22px 20px 8px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.UNM-Group[b-5h3a0i9u3v] {
    background: #f7f9fa;
    border: 1px solid #e6eaee;
    border-radius: 10px;
    padding: 14px 14px 16px 14px;
}

.UNM-GroupTitle[b-5h3a0i9u3v] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #0B7A75;
    margin-bottom: 12px;
}

.UNM-Flag[b-5h3a0i9u3v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
}

.UNM-FlagTh[b-5h3a0i9u3v] {
    background: #0B7A75;
}

.UNM-FlagEn[b-5h3a0i9u3v] {
    background: #4F46E5;
}

.UNM-Row[b-5h3a0i9u3v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.UNM-Field[b-5h3a0i9u3v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.UNM-Label[b-5h3a0i9u3v] {
    font-size: 12.5px;
    color: #52606d;
    font-weight: 500;
}

.UNM-Req[b-5h3a0i9u3v] {
    color: #d64545;
}

.UNM-Input[b-5h3a0i9u3v] {
    height: 40px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

    .UNM-Input:focus[b-5h3a0i9u3v] {
        outline: none;
        border-color: #0B7A75;
        box-shadow: 0 0 0 3px rgba(11,122,117,0.12);
    }

    .UNM-Input[b-5h3a0i9u3v]::placeholder {
        color: #b0b8c1;
    }

.UNM-Error[b-5h3a0i9u3v] {
    background: #fdecea;
    color: #c0392b;
    border: 1px solid #f5c2bd;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin: 0 2px;
}

.UNM-Foot[b-5h3a0i9u3v] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px 20px 20px;
}

.UNM-Btn[b-5h3a0i9u3v] {
    height: 40px;
    padding: 0 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background .15s, opacity .15s;
}

.UNM-BtnGhost[b-5h3a0i9u3v] {
    background: #eef1f3;
    color: #3b4653;
}

    .UNM-BtnGhost:hover[b-5h3a0i9u3v] {
        background: #e2e6e9;
    }

.UNM-BtnPrimary[b-5h3a0i9u3v] {
    background: #0B7A75;
    color: #fff;
}

    .UNM-BtnPrimary:hover[b-5h3a0i9u3v] {
        background: #096763;
    }

@media (max-width: 480px) {
    .UNM-Row[b-5h3a0i9u3v] {
        grid-template-columns: 1fr;
    }

    .UNM-Modal[b-5h3a0i9u3v] {
        border-radius: 12px;
    }
}
/* /Components/Pages/BackEnd/Settings/CoverDeliveryBox.razor.rz.scp.css */
/* CoverDeliveryBox — เฉพาะส่วนที่ไม่มีใน minesettings.css (ธีมกลาง st-*) */

.cdb-grid[b-1ne6om4o93] {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

/* ภาพย่อสัดส่วนกระดาษของแบบฟอร์ม */
.cdb-paper[b-1ne6om4o93] {
    flex: 0 0 auto;
    width: 44px;
    max-height: 64px;
    border: 1.5px solid #cfd6df;
    border-radius: 4px;
    background: repeating-linear-gradient(0deg, #fff 0 7px, #f1f4f7 7px 8px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

    .cdb-paper span[b-1ne6om4o93] {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 8.5px;
        color: #6b7684;
        background: rgba(255, 255, 255, .9);
        width: 100%;
        text-align: center;
        padding: 1px 0;
    }

@media (max-width: 1000px) {
    .cdb-grid[b-1ne6om4o93] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/BackEnd/Settings/Settings_CustomerSystem.razor.rz.scp.css */
/* Settings_CustomerSystem — เฉพาะส่วนที่ไม่มีใน minesettings.css (ธีมกลาง st-*) */

.cs-grid[b-fgtf7gu572] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}

.cs-center[b-fgtf7gu572] {
    display: flex;
    justify-content: center;
}

.cs-code[b-fgtf7gu572] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    background: #eef1f5;
    color: #0B7A75;
    padding: 1px 5px;
    border-radius: 5px;
}

.cs-editor[b-fgtf7gu572] {
    padding: 12px 18px;
    min-height: 320px;
    min-width: 0;
    overflow: hidden;
}

@media (max-width: 1000px) {
    .cs-grid[b-fgtf7gu572] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/BackEnd/Settings/Settings_General.razor.rz.scp.css */
/* Settings_General — เฉพาะส่วนที่ไม่มีใน minesettings.css (ธีมกลาง st-*) */

/* บัญชีรับเงิน */
.sg-payitem[b-e8fba59oxg] {
    align-items: flex-start;
}

.sg-payimg[b-e8fba59oxg] {
    position: relative;
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    border-radius: 12px;
    border: 1px solid #e4e8ef;
    background: #f6f7f9;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
}

    .sg-payimg img[b-e8fba59oxg] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .sg-payimg span[b-e8fba59oxg] {
        position: absolute;
        inset: auto 0 0 0;
        padding: 2px 0;
        background: rgba(28, 37, 48, .7);
        color: #fff;
        font-size: 10.5px;
        text-align: center;
        opacity: 0;
        transition: opacity .15s;
    }

    .sg-payimg:hover span[b-e8fba59oxg] {
        opacity: 1;
    }

.sg-fallback[b-e8fba59oxg] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sg-fallimg[b-e8fba59oxg] {
    width: 88px;
    height: 88px;
}

    .sg-fallimg img[b-e8fba59oxg] {
        object-fit: cover;
    }

.sg-payfields[b-e8fba59oxg] {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.sg-payfield[b-e8fba59oxg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    margin: 0;
}

    .sg-payfield > span[b-e8fba59oxg] {
        font-size: 11.5px;
        color: #6b7684;
        font-weight: 500;
    }

.sg-payactions[b-e8fba59oxg] {
    flex: 0 0 auto;
    align-self: center;
}

@media (max-width: 1200px) {
    .sg-payfields[b-e8fba59oxg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .sg-payfields[b-e8fba59oxg] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/BackEnd/Settings/Settings_PmcSync.razor.rz.scp.css */
/* Settings_PmcSync — เฉพาะส่วนที่ไม่มีใน minesettings.css (ธีมกลาง st-*) ; เดิมมี <style> inline ในหน้า — ย้ายออกหมดแล้ว */

.pmc-hero-main[b-8vq5o9ok3l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid #e4e8ef;
}

.pmc-hero-state[b-8vq5o9ok3l] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.pmc-hero-title[b-8vq5o9ok3l] {
    font-size: 16px;
    font-weight: 700;
}

.pmc-dot[b-8vq5o9ok3l] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 5px;
    flex: 0 0 auto;
    background: #cbd5e1;
}

    .pmc-dot.ok[b-8vq5o9ok3l] {
        background: #16a34a;
        box-shadow: 0 0 0 4px rgba(22, 163, 74, .15);
    }

    .pmc-dot.warn[b-8vq5o9ok3l] {
        background: #d97706;
        box-shadow: 0 0 0 4px rgba(217, 119, 6, .15);
    }

.pmc-hero-stats[b-8vq5o9ok3l] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 18px;
}

.pmc-hero-v[b-8vq5o9ok3l] {
    font-size: 15px;
    font-weight: 600;
    margin-top: 6px;
}

.pmc-2col[b-8vq5o9ok3l] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 14px;
}

    .pmc-2col .st-row[b-8vq5o9ok3l] {
        border-top: 1px solid #f1f3f6;
    }

.pmc-ids[b-8vq5o9ok3l] {
    min-height: 64px;
}

.pmc-idsrow[b-8vq5o9ok3l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .pmc-hero-stats[b-8vq5o9ok3l], .pmc-2col[b-8vq5o9ok3l] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/BackEnd/Settings/Settings_Points.razor.rz.scp.css */
/* [2026-10] หน้าตั้งค่าคะแนนสะสม — เสริมธีม st-* */
.sp-check[b-h237uca6ax] { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; font-size: 13.5px; cursor: pointer; }
.sp-check input[b-h237uca6ax] { width: 16px; height: 16px; accent-color: #0B7A75; }
/* /Components/Pages/BackEnd/Settings/Settings_UnitName.razor.rz.scp.css */
/* Settings_UnitName — ห่อแถบตั้งค่า (st-*) ไว้เหนือ MineListShell (pl-*) ; .ShowZone เป็น flex แถว → ต้องมี wrapper แนวตั้ง */
.un-page[b-n8lgm2198u] {
    /* [2026-10] ยืดเท่าพื้นที่ที่เหลือจริง (.ShowZone เป็น width:fit-content) — เดิม flex-basis auto มือถือ 390 หน้ากว้าง 994px */
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.un-top[b-n8lgm2198u] {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
    background: #fff;
}

.un-note[b-n8lgm2198u] {
    margin: 10px 20px;
}
/* /Components/Pages/BackEnd/Stock/Componant/Section_StockRec_PaymentZone.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Section_StockRec_PaymentZone.razor.css
   Design: CwSoftware Modern — สอดคล้องกับ StockRec_Bill.razor.css (#293649, #3b82f6)
   Blazor CSS isolation ไม่ไหลข้าม component จึงต้องประกาศ .BillCard/.CardHeader/.BtnAction
   ซ้ำที่นี่ (เหมือนที่ VenderPickerPopup.razor.css ทำ) ให้หน้าตาตรงกับการ์ดอื่นในบิล
   ═══════════════════════════════════════════════════════════════ */

.BillCard[b-wa23o5gzto] {
    background: #fff;
    border: 1px solid #e5e9ef;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.BillCard .CardHeader[b-wa23o5gzto] {
    padding: 12px 18px 10px;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.BillCard .CardHeader .CardTitle[b-wa23o5gzto] {
    font-size: 13px;
    font-weight: 700;
    color: #293649;
    letter-spacing: .01em;
}

.BillCard .CardHeader .CardSubTitle[b-wa23o5gzto] {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ─── Payment History List ─── */
.PZList[b-wa23o5gzto] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.PZRow[b-wa23o5gzto] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #eef1f6;
    border-radius: 8px;
    background: #fafbfc;
}

.PZIcon[b-wa23o5gzto] {
    font-size: 18px;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.PZInfo[b-wa23o5gzto] { flex: 1; min-width: 0; }

.PZType[b-wa23o5gzto] {
    font-size: 13px;
    font-weight: 600;
    color: #293649;
}

.PZDate[b-wa23o5gzto] {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 1px;
}

.PZComment[b-wa23o5gzto] {
    font-size: 11.5px;
    color: #6b7280;
    font-style: italic;
    margin-top: 2px;
}

.PZBankInfo[b-wa23o5gzto] {
    font-size: 11.5px;
    color: #1e3a8a;
    background: #eff6ff;
    border-radius: 4px;
    padding: 3px 6px;
    margin-top: 3px;
    display: inline-block;
}

.PZAmount[b-wa23o5gzto] {
    font-size: 14px;
    font-weight: 700;
    color: #16a34a;
    flex-shrink: 0;
    white-space: nowrap;
}

.PZEmpty[b-wa23o5gzto] {
    font-size: 12.5px;
    color: #9ca3af;
    text-align: center;
    padding: 14px 0;
}

/* ─── เงินทอน — ชำระเกินยอดบิล ─── */
.PZChangeRow[b-wa23o5gzto] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 8px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #b45309;
}

/* ─── แก้ไข / ลบ ต่อรายการ ─── */
.PZActions[b-wa23o5gzto] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.PZActionBtn[b-wa23o5gzto] {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease;
}

.PZActionBtn:hover[b-wa23o5gzto] { background: #eef1f6; }
.PZActionBtnDanger:hover[b-wa23o5gzto] { background: #fee2e2; }

/* ─── Action Button (reuse หน้าตาเดียวกับ .BtnAction ของ StockRec_Bill) ─── */
.BtnAction[b-wa23o5gzto] {
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-align: center;
    transition: opacity .18s, transform .12s;
    font-family: inherit;
}

.BtnAction:active[b-wa23o5gzto] { transform: translateY(0); }

/* [2026-10] teal ทึบ (ไม่ gradient) — ชุดเดียวกับปุ่มบันทึกใน PopupPayment */
.BtnAction.Primary[b-wa23o5gzto] {
    background: #0B7A75;
    color: #fff;
    transition: background .15s;
}

.BtnAction.Primary:hover[b-wa23o5gzto] { background: #095E5A; }
/* /Components/Pages/BackEnd/Stock/Componant/VenderPickerPopup.razor.rz.scp.css */
/* VenderPickerPopup — modal 2 คอลัมน์ (รายการ + รายละเอียด) + ช่องค้นหา
   ธีมเดียวกับ picker เลือกบิลต้นทางของหน้าส่งคืน */

.VPOverlay[b-wqph3t2zpz] {
    position: fixed; inset: 0; z-index: 1200; background: rgba(15,23,42,.45);
    display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px;
}

.VPBox[b-wqph3t2zpz] {
    width: 100%; max-width: 880px; max-height: calc(100vh - 96px);
    display: flex; flex-direction: column;
    background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(15,23,42,.30); overflow: hidden;
    font-family: inherit;
}

/* ── Header ── */
.VPHeader[b-wqph3t2zpz] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #eef1f4;
}
.VPHeaderTitle[b-wqph3t2zpz] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #1e293b; }
.VPHeaderIcon[b-wqph3t2zpz] { font-size: 16px; }
.VPCloseBtn[b-wqph3t2zpz] {
    width: 28px; height: 28px; border-radius: 8px; background: #f1f5f9; color: #475569;
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px;
}
.VPCloseBtn:hover[b-wqph3t2zpz] { background: #e2e8f0; }

/* ── Body 2 คอลัมน์ ── */
.VPMain[b-wqph3t2zpz] { display: flex; min-height: 0; flex: 1; }
.VPListPane[b-wqph3t2zpz] { display: flex; flex-direction: column; min-width: 0; flex: 1 1 60%; border-right: 1px solid #eef1f4; }
.VPDetailPane[b-wqph3t2zpz] { flex: 1 1 40%; padding: 16px 18px; overflow-y: auto; background: #f8fafc; }

/* ── Search ── */
.VPSearch[b-wqph3t2zpz] { padding: 12px 16px; border-bottom: 1px solid #eef1f4; }
.VPSearchInner[b-wqph3t2zpz] { display: flex; align-items: center; gap: 8px; border: 1.5px solid #e3e6ea; border-radius: 9px; padding: 8px 10px; }
.VPSearchInner:focus-within[b-wqph3t2zpz] { border-color: #0f766e; }
.VPSearchIcon[b-wqph3t2zpz] { font-size: 13px; color: #94a3b8; }
.VPSearchInput[b-wqph3t2zpz] { flex: 1; border: none; outline: none; font-size: 13px; font-family: inherit; background: transparent; }
.VPSearchClear[b-wqph3t2zpz] { cursor: pointer; color: #94a3b8; font-size: 12px; }
.VPSearchHint[b-wqph3t2zpz] { margin-top: 6px; font-size: 11px; color: #94a3b8; }

/* ── List ── */
.VPBody[b-wqph3t2zpz] { flex: 1; overflow-y: auto; padding: 6px; }
.VPRow[b-wqph3t2zpz] {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer;
}
.VPRow:hover[b-wqph3t2zpz] { background: #f1f5f9; }
.VPRowSelected[b-wqph3t2zpz], .VPRowSelected:hover[b-wqph3t2zpz] { background: #ecfdf5; box-shadow: inset 0 0 0 1.5px #0f766e; }
.VPAvatar[b-wqph3t2zpz] {
    width: 34px; height: 34px; border-radius: 9px; background: #e2e8f0; color: #475569;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none;
}
.VPAvatarActive[b-wqph3t2zpz] { background: #0f766e; color: #fff; }
.VPInfo[b-wqph3t2zpz] { min-width: 0; flex: 1; }
.VPName[b-wqph3t2zpz] { font-size: 13px; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.VPMeta[b-wqph3t2zpz] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; font-size: 11px; color: #64748b; }
.VPBadge[b-wqph3t2zpz] { background: #eef2ff; color: #4338ca; border-radius: 999px; padding: 1px 7px; font-weight: 700; }
.VPMetaItem[b-wqph3t2zpz] { white-space: nowrap; }
.VPCheckmark[b-wqph3t2zpz] { color: #0f766e; font-weight: 800; font-size: 15px; flex: none; }

/* ── Empty ── */
.VPEmpty[b-wqph3t2zpz], .VPDetailEmpty[b-wqph3t2zpz] { text-align: center; padding: 40px 16px; color: #94a3b8; }
.VPEmptyIcon[b-wqph3t2zpz] { font-size: 30px; }
.VPEmptyText[b-wqph3t2zpz] { margin-top: 8px; font-size: 13px; font-weight: 700; color: #64748b; }
.VPEmptyHint[b-wqph3t2zpz] { margin-top: 2px; font-size: 11.5px; }

/* ── Pagination ── */
.VPPagination[b-wqph3t2zpz] {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px; border-top: 1px solid #eef1f4;
}
.VPPageBtn[b-wqph3t2zpz] {
    width: 28px; height: 28px; border-radius: 7px; background: #f1f5f9; color: #475569;
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px;
}
.VPPageBtn:hover[b-wqph3t2zpz] { background: #e2e8f0; }
.VPPageBtn.Disabled[b-wqph3t2zpz] { opacity: .4; pointer-events: none; }
.VPPageInfo[b-wqph3t2zpz] { font-size: 12px; font-weight: 700; color: #475569; padding: 0 6px; }

/* ── Detail pane ── */
.VPDetailHead[b-wqph3t2zpz] { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.VPDetailAvatar[b-wqph3t2zpz] {
    width: 44px; height: 44px; border-radius: 11px; background: #0f766e; color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
}
.VPDetailName[b-wqph3t2zpz] { font-size: 15px; font-weight: 800; color: #1e293b; }
.VPDetailCode[b-wqph3t2zpz] { font-size: 12px; color: #64748b; font-weight: 600; }
.VPDetailRow[b-wqph3t2zpz] {
    display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #e8edf3; font-size: 12.5px;
}
.VPDetailRow > span:first-child[b-wqph3t2zpz] { color: #94a3b8; flex: none; }
.VPDetailRow > span:last-child[b-wqph3t2zpz] { color: #1e293b; font-weight: 600; text-align: right; }

/* ── Footer ── */
.VPFooter[b-wqph3t2zpz] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 18px; border-top: 1px solid #eef1f4; background: #fff;
}
.VPFootInfo[b-wqph3t2zpz] { font-size: 12px; color: #64748b; }
.VPFootBtns[b-wqph3t2zpz] { display: flex; gap: 8px; }
.VPBtnCancel[b-wqph3t2zpz] {
    padding: 8px 16px; border-radius: 9px; border: 1.5px solid #d1d5db; background: #fff; color: #475569;
    font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.VPBtnCancel:hover[b-wqph3t2zpz] { background: #f3f4f6; }
.VPBtnConfirm[b-wqph3t2zpz] {
    padding: 8px 18px; border-radius: 9px; border: none; background: linear-gradient(135deg, #0f766e, #14b8a6); color: #fff;
    font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.VPBtnConfirm:disabled[b-wqph3t2zpz] { opacity: .45; cursor: not-allowed; }

@media (max-width: 720px) {
    .VPMain[b-wqph3t2zpz] { flex-direction: column; }
    .VPListPane[b-wqph3t2zpz] { border-right: none; border-bottom: 1px solid #eef1f4; }
}
/* /Components/Pages/BackEnd/Stock/StockRec_Bill.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   StockRec_Bill.razor.css
   Design pattern: CwSoftware Modern — Hero Header · Stepper · INFO Panel
   อิงจาก Sales Order Bill detail page (OWS pattern)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Page Wrapper ─── */
.StockRecBill[b-4gmjeo4fxn] {
    /* [2026-10] ชุดหน้าบิลกลาง: ฟอนต์/พื้นหลัง/2 คอลัมน์ มาจาก .MB-Page / .MB-Body (wwwroot/css/bill-ui.css)
       ที่นี่กำหนดแค่ความกว้างหน้า (หน้าเต็มจอหลังบ้าน ไม่ได้อยู่ใน .MaxWidthSize แบบ CPO/OWS) */
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 16px 20px 0;
    overflow-x: clip;          /* ห้ามล้นแนวนอน — clip ไม่สร้าง scroll container (sticky ยังทำงาน) */
    background: transparent;
    min-height: 0;
}

/* ข้อความแทนปุ่มเมื่อบิลปิด/ยกเลิกแล้ว (ใน BillActionBar) */
.SRB-ClosedNote[b-4gmjeo4fxn] {
    font-size: 13px;
    color: #5c666f;
    padding: 0 6px;
}

/* การ์ดภาษีใน rail — กล่องย่อยไม่ต้องมีกรอบซ้อนหนา */
.TaxBox[b-4gmjeo4fxn] {
    border-radius: 10px;
}

/* ─── Breadcrumb + ปุ่มย้อนกลับ (แนวเดียวกับ OrderBill) ─── */
.Breadcrumb[b-4gmjeo4fxn] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #555;
    flex-wrap: wrap;
    padding: 12px 0 14px;
}

.Breadcrumb a[b-4gmjeo4fxn] {
    text-decoration: none;
}

.BackBtn[b-4gmjeo4fxn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid #d8deea;
    border-radius: 8px;
    background: #fff;
    color: #33415c;
    font-size: 13.5px;
    font-weight: 700;
    transition: background .14s, border-color .14s, transform .05s;
}

    .BackBtn:hover[b-4gmjeo4fxn] {
        background: #f2f5fa;
        border-color: #b9c4d8;
    }

    .BackBtn:active[b-4gmjeo4fxn] { transform: translateY(1px); }

.BackBtn-Arrow[b-4gmjeo4fxn] { font-size: 16px; line-height: 1; }

.BreadcrumbLink[b-4gmjeo4fxn] { color: #0B7A75; cursor: pointer; }
.BreadcrumbLink:hover[b-4gmjeo4fxn] { text-decoration: underline; }
.BreadcrumbSep[b-4gmjeo4fxn] { color: #aaa; font-size: 18px; }
.BreadcrumbCurrent[b-4gmjeo4fxn] { color: #111; font-weight: 600; }

/* ════════════════════════════════════════════════════════════════
   HERO HEADER — dark navy banner (เหมือน Sales Order page)
   ════════════════════════════════════════════════════════════════ */
.BillHero[b-4gmjeo4fxn] {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 12px;
    padding: 22px 28px 20px;
    margin: 0 0 16px;
    position: relative;
    overflow: hidden;
}

/* Hero + Stepper อยู่ในคอลัมน์หลักแล้ว — ใช้ gap ของ .BillColMain แทน margin */
.BillColMain > .BillHero[b-4gmjeo4fxn],
.BillColMain > .BillStepper[b-4gmjeo4fxn] {
    margin: 0;
}

/* subtle gradient overlay */
.BillHero[b-4gmjeo4fxn]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11,122,117,.12) 0%, transparent 60%);
    pointer-events: none;
}

.BillHero .HeroTopRow[b-4gmjeo4fxn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.BillHero .HeroTypeLabel[b-4gmjeo4fxn] {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 500;
}

.BillHero .HeroAmountLabel[b-4gmjeo4fxn] {
    font-size: 12px;
    color: rgba(255,255,255,.45);
    text-align: right;
    letter-spacing: .04em;
}

.BillHero .HeroMainRow[b-4gmjeo4fxn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 8px;
    flex-wrap: wrap; /* wrap เมื่อ bill code + amount ยาวเกิน */
}

.BillHero .HeroBillCode[b-4gmjeo4fxn] {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -.01em;
    font-family: inherit;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-all; /* bill code อาจยาวมาก เช่น SR-2026-000001 */
    flex: 1;
}

.BillHero .HeroAmount[b-4gmjeo4fxn] {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    font-family: inherit;
    letter-spacing: -.01em;
    flex-shrink: 0; /* amount ไม่หด — ถ้าแคบเกิน wrap ไปบรรทัดใหม่ */
    white-space: nowrap;
}

.BillHero .HeroBottomRow[b-4gmjeo4fxn] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.BillHero .HeroStatusBadge[b-4gmjeo4fxn] {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

.BillHero .HeroDate[b-4gmjeo4fxn] {
    font-size: 12px;
    color: rgba(255,255,255,.5);
}

/* ════════════════════════════════════════════════════════════════
   PROGRESS STEPPER — horizontal step indicator
   ════════════════════════════════════════════════════════════════ */
.BillStepper[b-4gmjeo4fxn] {
    background: #fff;
    border-radius: 12px;
    padding: 18px 24px 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.BillStepper .StepperLabel[b-4gmjeo4fxn] {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.BillStepper .StepList[b-4gmjeo4fxn] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    /* กฎเหล็ก: ห้าม overflow-x — ใช้ flex-wrap แทน */
}

.BillStepper .StepItem[b-4gmjeo4fxn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Connector line between steps */
.BillStepper .StepItem:not(:last-child)[b-4gmjeo4fxn]::after {
    content: '';
    position: absolute;
    top: 16px;
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
    height: 2px;
    background: #e5e9ef;
    z-index: 0;
}

.BillStepper .StepItem.Completed:not(:last-child)[b-4gmjeo4fxn]::after {
    background: #10b981;
}

.BillStepper .StepItem.Active:not(:last-child)[b-4gmjeo4fxn]::after {
    background: linear-gradient(90deg, #0B7A75 0%, #e5e9ef 100%);
}

/* Step circle */
.BillStepper .StepCircle[b-4gmjeo4fxn] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    border: 2px solid #e5e9ef;
    background: #fff;
    color: #bbb;
    z-index: 1;
    position: relative;
    transition: all .25s;
}

.BillStepper .StepItem.Completed .StepCircle[b-4gmjeo4fxn] {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
    font-size: 15px; /* checkmark */
}

.BillStepper .StepItem.Active .StepCircle[b-4gmjeo4fxn] {
    background: #0B7A75;
    border-color: #0B7A75;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(11,122,117,.18);
}

.BillStepper .StepItem.Danger .StepCircle[b-4gmjeo4fxn] {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

/* Step text */
.BillStepper .StepMeta[b-4gmjeo4fxn] {
    margin-top: 8px;
    text-align: center;
}

.BillStepper .StepName[b-4gmjeo4fxn] {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    line-height: 1.3;
}

.BillStepper .StepItem.Pending .StepName[b-4gmjeo4fxn] {
    color: #bbb;
    font-weight: 400;
}

.BillStepper .StepDate[b-4gmjeo4fxn] {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 2px;
    font-family: inherit;
}

/* ════════════════════════════════════════════════════════════════
   MAIN BODY — Two-column layout
   ════════════════════════════════════════════════════════════════ */
.BillBody[b-4gmjeo4fxn] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.BillColMain[b-4gmjeo4fxn] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.BillColSide[b-4gmjeo4fxn] {
    width: 320px;                    /* คงที่ เท่ากับ .RightColumn ของหน้าบิลขาย */
    flex-shrink: 0;                  /* ไม่ให้หดเพื่อรักษาสัดส่วน */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ════════════════════════════════════════════════════════════════
   BILL CARD — generic card with bilingual section header
   ════════════════════════════════════════════════════════════════ */
.BillCard[b-4gmjeo4fxn] {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.BillCard .CardHeader[b-4gmjeo4fxn] {
    padding: 12px 18px 10px;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.BillCard .CardHeader .CardTitle[b-4gmjeo4fxn] {
    font-size: 13px;
    font-weight: 700;
    color: #293649;
    letter-spacing: .01em;
}

.BillCard .CardHeader .CardSubTitle[b-4gmjeo4fxn] {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.BillCard .CardBody[b-4gmjeo4fxn] {
    padding: 16px 18px;
}

/* ─── Two mini cards side by side (Vender + info) ─── */
.BillMiniCards[b-4gmjeo4fxn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ════════════════════════════════════════════════════════════════
   TAX CARD — ตกแต่งเฉพาะการ์ด "ภาษีมูลค่าเพิ่ม" (ไม่กระทบ .BillCard การ์ดอื่น)
   ════════════════════════════════════════════════════════════════ */
.TaxCard[b-4gmjeo4fxn] {
    position: relative;
    animation: TaxCardIn-b-4gmjeo4fxn .28s ease both;
}
@keyframes TaxCardIn-b-4gmjeo4fxn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.TaxCard .CardHeader[b-4gmjeo4fxn] {
    background: linear-gradient(135deg, #293649, #095E5A, #0B7A75);
    border-bottom: none;
    padding: 13px 18px 12px;
}
.TaxCard .CardHeader .CardTitle[b-4gmjeo4fxn] {
    color: #fff; display: flex; align-items: center; gap: 7px;
}
.TaxCard .CardHeader .CardSubTitle[b-4gmjeo4fxn] {
    color: #fff; background: rgba(255,255,255,.18);
    padding: 3px 9px; border-radius: 20px; letter-spacing: .1em;
}

/* กล่องย่อยแบ่งตามหัวข้อ (คล้าย field group ในหน้ารายการสินค้า) */
.TaxBox[b-4gmjeo4fxn] {
    border-radius: 10px; padding: 12px 14px; margin-top: 10px;
    transition: box-shadow .18s ease;
    animation: TaxCardIn-b-4gmjeo4fxn .25s ease both;
}
.TaxBox:hover[b-4gmjeo4fxn] { box-shadow: 0 3px 10px rgba(15,23,42,.06); }
.TaxBox.Main[b-4gmjeo4fxn]    { background: #f8fafc; border: 1px solid #eef1f6; margin-top: 0; }
.TaxBox.Percent[b-4gmjeo4fxn] { background: #E7F5F4; border: 1px solid #B9E0DC; }
.TaxBox.DiscBefore[b-4gmjeo4fxn],
.TaxBox.DiscAfter[b-4gmjeo4fxn] { background: #fffbeb; border: 1px solid #fde68a; }
.TaxBox.CostCalc[b-4gmjeo4fxn] { background: #faf5ff; border: 1px solid #e9d5ff; }

.TaxBoxTitle[b-4gmjeo4fxn] {
    font-size: 10.5px; font-weight: 800; color: #64748b;
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px;
}

/* radio แบบ pill สำหรับ "ไม่รวมภาษี / รวมภาษีอยู่แล้ว" */
.TaxRadioRow[b-4gmjeo4fxn] { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.TaxRadioRow .CheckLabel[b-4gmjeo4fxn] {
    padding: 7px 12px; border-radius: 20px; border: 1.5px solid #e2e8f0;
    background: #fff; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    /* กำหนด font-size/color ตายตัวที่นี่ (ไม่ปล่อยให้ .CheckLabel ฐานตัดสิน) กัน .FormGroup label (12px)
       แย่ง specificity ตอนแถวนี้ถูกวางซ้อนอยู่ใน .FormGroup (เช่นตัวเลือก "ราคาสินค้า") จนขนาดเพี้ยนไปจากแถวที่ไม่ได้อยู่ใน .FormGroup */
    font-size: 13px; color: #374151; font-weight: 400;
}
.TaxRadioRow .CheckLabel:has(input:checked)[b-4gmjeo4fxn] {
    border-color: #0B7A75; background: #E7F5F4;
    box-shadow: 0 0 0 3px rgba(11,122,117,.1);
}

/* radio ผูกกับ label "%"/"฿" เหนือช่องกรอกส่วนลด — ให้ label ทำหน้าที่เป็นตัวเลือกในตัว */
.TaxDiscValueRow .FormGroup > .CheckLabel[b-4gmjeo4fxn] {
    margin-bottom: 1px; font-size: 12px; color: #6b7280; gap: 6px;
}
.TaxDiscValueRow .FormGroup > .CheckLabel input[type="radio"][b-4gmjeo4fxn] { width: 14px; height: 14px; }

.TaxAmountInput[b-4gmjeo4fxn] { margin-top: 8px; animation: TaxCardIn-b-4gmjeo4fxn .2s ease both; }

/* แถว %/฿ ของส่วนลดท้ายบิล — แบ่งครึ่งแนวนอนเสมอ (ไม่ wrap ไปเป็นแนวตั้งเหมือน .FormRow ทั่วไป) */
.TaxDiscValueRow[b-4gmjeo4fxn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.TaxDiscValueRow .FormGroup[b-4gmjeo4fxn] { min-width: 0; }

/* ════════════════════════════════════════════════════════════════
   FORM — fields inside cards
   ════════════════════════════════════════════════════════════════ */
.FormRow[b-4gmjeo4fxn] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.FormGroup[b-4gmjeo4fxn] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 180px;
}

.FormGroup label[b-4gmjeo4fxn] {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
    letter-spacing: .02em;
}

.FormControl[b-4gmjeo4fxn] {
    box-sizing: border-box;
    border: 1.5px solid #e3e6ea;
    border-radius: 9px;
    padding: 7px 12px;
    font-size: 13.5px;
    outline: none;
    width: 100%;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.03);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .12s ease;
    font-family: inherit;
    background: #fafbfc;
    color: #1f2937;
}

.FormControl:hover:not(:disabled):not(:focus)[b-4gmjeo4fxn] {
    border-color: #b6c6e0;
    background: #fff;
}

.FormControl:focus[b-4gmjeo4fxn] {
    border-color: #0B7A75;
    box-shadow: 0 0 0 4px rgba(11,122,117,.14), 0 2px 6px rgba(11,122,117,.1);
    background: #fff;
    transform: translateY(-1px);
}

.FormControl[b-4gmjeo4fxn]::placeholder { color: #b6c0cc; }

.FormControl:disabled[b-4gmjeo4fxn] {
    background: #f5f6f7;
    color: #9ca3af;
    cursor: not-allowed;
    border-color: #e9ecef;
    box-shadow: none;
}

/* label เปลี่ยนสีตามเมื่อ input ข้างในถูก focus */
.FormGroup label[b-4gmjeo4fxn] { transition: color .15s ease; }
.FormGroup:has(> .FormControl:focus) > label[b-4gmjeo4fxn] { color: #0B7A75; }

textarea.FormControl[b-4gmjeo4fxn] {
    resize: vertical;
    min-height: 60px;
}

/* ════════════════════════════════════════════════════════════════
   FIELD SECTIONS — grouped rows inside a card
   ════════════════════════════════════════════════════════════════ */
.FieldSection[b-4gmjeo4fxn] {
    padding: 14px 0 12px;
    border-bottom: 1px solid #f0f2f5;
}

.FieldSection.NoBorder[b-4gmjeo4fxn] {
    border-bottom: none;
    padding-bottom: 0;
}

.FieldSectionLabel[b-4gmjeo4fxn] {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* ─── Input with inline button (PO field) ─── */
.InputWithBtn[b-4gmjeo4fxn] {
    display: flex;
    gap: 6px;
}

.InputWithBtn .FormControl[b-4gmjeo4fxn] {
    flex: 1;
    min-width: 0;
}

/* ─── Input with inline unit label (วัน / บาท) ─── */
.InputWithUnit[b-4gmjeo4fxn] {
    display: flex;
    align-items: center;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    overflow: hidden;
    background: #fafbfc;
    transition: border-color .15s, box-shadow .15s;
}

.InputWithUnit:focus-within[b-4gmjeo4fxn] {
    border-color: #0B7A75;
    box-shadow: 0 0 0 3px rgba(11,122,117,.12);
    background: #fff;
}

.InputWithUnit .FormControl[b-4gmjeo4fxn] {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    flex: 1;
    min-width: 0;
    padding-right: 6px;
}

.InputWithUnit .FormControl:focus[b-4gmjeo4fxn] {
    border: none;
    box-shadow: none;
    background: transparent;
}

.InputWithUnit .FormControl:disabled[b-4gmjeo4fxn] {
    background: transparent;
}

.InputWithUnit .InputUnit[b-4gmjeo4fxn] {
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    padding: 0 10px 0 4px;
    white-space: nowrap;
    flex-shrink: 0;
    border-left: 1px solid #e9ecef;
    background: #f5f6f7;
    height: 100%;
    display: flex;
    align-items: center;
}

/* ─── Read-only computed field (CreditEndDate) ─── */
.FormControlReadonly[b-4gmjeo4fxn] {
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    background: #f8fafc;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 36px;
    font-family: inherit;
    font-weight: 600;
}

.FormControlReadonly.Muted[b-4gmjeo4fxn] {
    color: #b1b5bb;
    font-weight: 400;
    font-size: 12.5px;
    font-family: inherit;
    font-style: italic;
}

.FormControlReadonly.CreditEndDate[b-4gmjeo4fxn] {
    border-color: #B9E0DC;
    background: #E7F5F4;
    color: #1e40af;
}

/* ─── Credit status tags ─── */
.CreditTag[b-4gmjeo4fxn] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: .02em;
}

.CreditTag.OK[b-4gmjeo4fxn]      { background: #dcfce7; color: #15803d; }
.CreditTag.Soon[b-4gmjeo4fxn]    { background: #fef3c7; color: #92400e; }
.CreditTag.Today[b-4gmjeo4fxn]   { background: #fed7aa; color: #c2410c; }
.CreditTag.Overdue[b-4gmjeo4fxn] { background: #fee2e2; color: #b91c1c; }

/* ════════════════════════════════════════════════════════════════
   VENDER PICKER TRIGGER BUTTON
   ปุ่มเปิด VenderPickerPopup แทน <select> dropdown
   ════════════════════════════════════════════════════════════════ */

.VenderPickerTrigger[b-4gmjeo4fxn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1.5px solid #e3e6ea;
    border-radius: 8px;
    padding: 7px 12px;
    background: #fafbfc;
    cursor: pointer;
    min-height: 38px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.12s;
    user-select: none;
}

.VenderPickerTrigger:hover[b-4gmjeo4fxn] {
    border-color: #4e73df;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(78, 115, 223, 0.08);
}

.VenderPickerTrigger.HasValue[b-4gmjeo4fxn] {
    border-color: #c7d2fe;
    background: #f5f7ff;
}

.VenderPickerTrigger.HasValue:hover[b-4gmjeo4fxn] {
    border-color: #4e73df;
    background: #fff;
}

/* variant อ่านอย่างเดียว — ใช้กับการ์ดผู้จำหน่ายในโหมด read-only (ไม่มี X/ลูกศร ไม่ให้คลิกเปิด picker) */
.VenderPickerTrigger.ReadOnly[b-4gmjeo4fxn] {
    cursor: default;
}
.VenderPickerTrigger.ReadOnly:hover[b-4gmjeo4fxn] {
    border-color: #c7d2fe;
    background: #f5f7ff;
    box-shadow: none;
}

/* ─── Left Side ─── */
.VenderPickerTriggerLeft[b-4gmjeo4fxn] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

/* ─── Avatar ดาวน์เล็กใน trigger ─── */
.VPTriggerAvatar[b-4gmjeo4fxn] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #4e73df;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* มุมมองอ่านอย่างเดียว — avatar สี่เหลี่ยมมน 42px เหมือน .CompanyAvatar ของหน้าบิลขาย */
.VenderPickerTrigger.ReadOnly .VPTriggerAvatar[b-4gmjeo4fxn] {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #0B7A75;
    font-size: 16px;
}

.VPTriggerInfo[b-4gmjeo4fxn] {
    min-width: 0;
}

.VPTriggerName[b-4gmjeo4fxn] {
    font-size: 13.5px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.VPTriggerCode[b-4gmjeo4fxn] {
    font-size: 11px;
    color: #6b7280;
    margin-top: 1px;
}

.VPTriggerPlaceholder[b-4gmjeo4fxn] {
    font-size: 13.5px;
    color: #aab0be;
}

/* ─── Right Side ─── */
.VPTriggerRight[b-4gmjeo4fxn] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.VPTriggerClear[b-4gmjeo4fxn] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.VPTriggerClear:hover[b-4gmjeo4fxn] {
    background: #fee2e2;
    color: #b91c1c;
}

.VPTriggerArrow[b-4gmjeo4fxn] {
    font-size: 16px;
    color: #aab0be;
    line-height: 1;
    transition: color 0.12s;
}

.VenderPickerTrigger:hover .VPTriggerArrow[b-4gmjeo4fxn] {
    color: #4e73df;
}

/* ─── Save row ─── */
.CardSaveRow[b-4gmjeo4fxn] {
    display: flex;
    justify-content: flex-end;
    padding-top: 14px;
    margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════════
   INFO ROWS — label + value pairs (right sidebar)
   ════════════════════════════════════════════════════════════════ */
.InfoRow[b-4gmjeo4fxn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 7px 0;
    border-bottom: 1px solid #f3f4f6;
    gap: 4px 8px;
}

.InfoRow:last-child[b-4gmjeo4fxn] {
    border-bottom: none;
}

.InfoRow .InfoLabel[b-4gmjeo4fxn] {
    font-size: 12px;
    color: #9ca3af;
    flex-shrink: 0;
    max-width: 50%; /* ไม่กิน label เกินครึ่ง */
}

.InfoRow .InfoValue[b-4gmjeo4fxn] {
    font-size: 13px;
    color: #293649;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0; /* ป้องกัน flex child ดัน container */
    flex: 1;
}

/* ════════════════════════════════════════════════════════════════
   SUMMARY ROWS — in right sidebar
   ════════════════════════════════════════════════════════════════ */
.SummaryRow[b-4gmjeo4fxn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 5px 0;
    color: #374151;
    gap: 4px;
}

/* label ใน SummaryRow ห้าม overflow */
.SummaryRow > span:first-child[b-4gmjeo4fxn],
.SummaryRow > div:first-child[b-4gmjeo4fxn] {
    min-width: 0;
    overflow-wrap: break-word;
}

/* amount ใน SummaryRow — shrink ไม่ได้, แต่ wrap ข้อความได้ */
.SummaryRow .Amount[b-4gmjeo4fxn],
.SummaryRow > span:last-child[b-4gmjeo4fxn],
.SummaryRow > div:last-child[b-4gmjeo4fxn] {
    flex-shrink: 0;
    font-family: inherit;
    white-space: nowrap;
}

.SummaryRow.Total[b-4gmjeo4fxn] {
    font-size: 16px;
    font-weight: 800;
    color: #293649;
    padding-top: 8px;
    border-top: 1px solid #e5e9ef;
    margin-top: 4px;
    font-family: inherit;
}

.SummaryRow.Total .Amount[b-4gmjeo4fxn] {
    color: #ef4444;
}

.SummaryDivider[b-4gmjeo4fxn] {
    border: none;
    border-top: 1px solid #e5e9ef;
    margin: 6px 0;
}

/* ════════════════════════════════════════════════════════════════
   TAX SETTINGS — checkbox area
   ════════════════════════════════════════════════════════════════ */
.CheckRow[b-4gmjeo4fxn] {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.CheckLabel[b-4gmjeo4fxn] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
    transition: color .15s ease;
}
.CheckLabel:has(input:checked)[b-4gmjeo4fxn] { color: #1e293b; font-weight: 600; }
.CheckLabel:has(input:disabled)[b-4gmjeo4fxn] { cursor: not-allowed; opacity: .6; }

/* ─── Checkbox: สี่เหลี่ยมมน + เครื่องหมายถูก animate + glow ring ─── */
.CheckLabel input[type="checkbox"][b-4gmjeo4fxn] {
    appearance: none; -webkit-appearance: none; margin: 0;
    width: 19px; height: 19px; border-radius: 6px; flex-shrink: 0;
    border: 2px solid #cbd5e1; background: #fff; cursor: pointer;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
    position: relative;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.CheckLabel input[type="checkbox"]:hover:not(:disabled):not(:checked)[b-4gmjeo4fxn] {
    border-color: #7CC7C1; box-shadow: 0 0 0 4px rgba(11,122,117,.1);
}
.CheckLabel input[type="checkbox"]:active:not(:disabled)[b-4gmjeo4fxn] { transform: scale(.9); }
.CheckLabel input[type="checkbox"]:checked[b-4gmjeo4fxn] {
    background: linear-gradient(135deg, #0B7A75, #0B7A75);
    border-color: #0B7A75;
    box-shadow: 0 2px 6px rgba(11,122,117,.35);
}
.CheckLabel input[type="checkbox"]:checked:hover:not(:disabled)[b-4gmjeo4fxn] {
    box-shadow: 0 2px 8px rgba(11,122,117,.45), 0 0 0 4px rgba(11,122,117,.12);
}
.CheckLabel input[type="checkbox"]:checked[b-4gmjeo4fxn]::after {
    content: "";
    position: absolute; left: 5.5px; top: 2px;
    width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2.2px 2.2px 0;
    transform: rotate(45deg); transform-origin: center;
    animation: CheckPop-b-4gmjeo4fxn .2s ease-out both;
}
.CheckLabel input[type="checkbox"]:disabled[b-4gmjeo4fxn] { cursor: not-allowed; opacity: .55; box-shadow: none; }

@keyframes CheckPop-b-4gmjeo4fxn {
    from { opacity: 0; transform: rotate(45deg) scale(.3); }
    to   { opacity: 1; transform: rotate(45deg) scale(1); }
}

/* ─── ธีมสีเช็คบ็อกซ์ตามกล่องที่สังกัด (ให้เข้าชุดกับ .TaxBox แต่ละสี) ─── */
.TaxBox.DiscBefore .CheckLabel input[type="checkbox"]:not(:checked):hover[b-4gmjeo4fxn] {
    border-color: #f6c445; box-shadow: 0 0 0 4px rgba(245,158,11,.12);
}
.TaxBox.DiscBefore .CheckLabel input[type="checkbox"]:checked[b-4gmjeo4fxn] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #d97706; box-shadow: 0 2px 6px rgba(217,119,6,.35);
}
.TaxBox.CostCalc .CheckLabel input[type="checkbox"]:not(:checked):hover[b-4gmjeo4fxn] {
    border-color: #c4b5fd; box-shadow: 0 0 0 4px rgba(139,92,246,.12);
}
.TaxBox.CostCalc .CheckLabel input[type="checkbox"]:checked[b-4gmjeo4fxn] {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-color: #7c3aed; box-shadow: 0 2px 6px rgba(124,58,237,.35);
}

/* ─── Radio: จุดกลม + pop animation ─── */
.CheckLabel input[type="radio"][b-4gmjeo4fxn] {
    appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
    width: 16px; height: 16px; border-radius: 50%;
    border: 1.5px solid #cbd5e1; background: #fff; position: relative;
    cursor: pointer; transition: border-color .15s ease;
}
.CheckLabel input[type="radio"]:hover:not(:disabled)[b-4gmjeo4fxn] { border-color: #7CC7C1; }
.CheckLabel input[type="radio"]:checked[b-4gmjeo4fxn] { border-color: #0B7A75; }
.CheckLabel input[type="radio"]:checked[b-4gmjeo4fxn]::after {
    content: "";
    position: absolute; inset: 3px; border-radius: 50%;
    background: #0B7A75;
    animation: RadioPop-b-4gmjeo4fxn .2s cubic-bezier(.34,1.56,.64,1) both;
}
.CheckLabel input[type="radio"]:disabled[b-4gmjeo4fxn] { cursor: not-allowed; opacity: .65; }

@keyframes RadioPop-b-4gmjeo4fxn {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

/* ════════════════════════════════════════════════════════════════
   ACTIONS — status change buttons (bottom of sidebar)
   ════════════════════════════════════════════════════════════════ */
.BillActionCard[b-4gmjeo4fxn] {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.BillActionCard .CardHeader[b-4gmjeo4fxn] {
    padding: 12px 18px 10px;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.BillActionCard .CardHeader .CardTitle[b-4gmjeo4fxn] {
    font-size: 13px;
    font-weight: 700;
    color: #293649;
}

.BillActionCard .CardHeader .CardSubTitle[b-4gmjeo4fxn] {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.BillActionCard .CardBody[b-4gmjeo4fxn] {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.BtnAction[b-4gmjeo4fxn] {
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-align: center;
    transition: opacity .18s, transform .12s;
    font-family: inherit;
}

.BtnAction:hover[b-4gmjeo4fxn] { opacity: .87; transform: translateY(-1px); }
.BtnAction:active[b-4gmjeo4fxn] { transform: translateY(0); }

.BtnAction.Primary[b-4gmjeo4fxn] {
    background: linear-gradient(135deg, #293649, #095E5A, #0B7A75);
    color: #fff;
}

.BtnAction.Success[b-4gmjeo4fxn] {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #fff;
}

.BtnAction.Danger[b-4gmjeo4fxn] {
    background: #dc3545;
    color: #fff;
}

.BtnAction.Outline[b-4gmjeo4fxn] {
    background: #fff;
    border: 1.5px solid #d1d5db;
    color: #374151;
}

/* variant แนวนอน — ใช้ตอนวางการ์ด ACTIONS ไว้ใต้ Progress Stepper (เต็มความกว้างหน้า แทนที่จะอยู่ในไซด์บาร์แคบ)
   ปุ่มยาวเรียงต่อกันเต็มแถวเสมอ (flex:1 หารความกว้างเท่าๆ กัน ไม่ wrap) */
.BillActionCardRow[b-4gmjeo4fxn] { margin-top: 14px; margin-bottom: 18px; }
.BillActionCard .CardBody.BillActionCardBodyRow[b-4gmjeo4fxn] {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}
.BillActionCardBodyRow .BtnAction[b-4gmjeo4fxn] { width: auto; flex: 1 1 0; }

/* Save button inside form */
.BtnSave[b-4gmjeo4fxn] {
    padding: 9px 22px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity .18s;
    font-family: inherit;
}

.BtnSave:hover[b-4gmjeo4fxn] { opacity: .86; }

.BtnImportPO[b-4gmjeo4fxn] {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
    white-space: nowrap;
    transition: background .15s;
    font-family: inherit;
}

.BtnImportPO:hover[b-4gmjeo4fxn] { background: #f3f4f6; }

/* ════════════════════════════════════════════════════════════════
   ALERT
   ════════════════════════════════════════════════════════════════ */
.Alert[b-4gmjeo4fxn] {
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.Alert.Success[b-4gmjeo4fxn] { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.Alert.Error[b-4gmjeo4fxn]   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* ════════════════════════════════════════════════════════════════
   CONFIRM DIALOG (ShowingAskYesNo — ตรงกับ SalesManage)
   ════════════════════════════════════════════════════════════════ */
.ShowingAskYesNo[b-4gmjeo4fxn] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
}

.ShowingAskYesNo .DivMain[b-4gmjeo4fxn] {
    background: white;
    border-radius: 10px;
    padding: 28px 32px;
    user-select: none;
    min-width: 260px;
    max-width: min(440px, calc(100vw - 32px));
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
}

.ShowingAskYesNo .DivMain .Title[b-4gmjeo4fxn] {
    font-size: 15px;
    color: #293649;
    line-height: 1.6;
    font-weight: 500;
}

.ShowingAskYesNo .DivMain .ButtonZone[b-4gmjeo4fxn] {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.ShowingAskYesNo .DivMain .ButtonZone .Confirm[b-4gmjeo4fxn] {
    border-radius: 6px;
    width: 100px;
    height: 38px;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: opacity .2s;
    color: #fff;
}

.ShowingAskYesNo .DivMain .ButtonZone .Confirm:hover[b-4gmjeo4fxn] { opacity: 0.85; }

.ShowingAskYesNo .DivMain .ButtonZone .Cancel[b-4gmjeo4fxn] {
    margin-left: 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    width: 100px;
    height: 38px;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 14px;
    background: #fff;
    color: #374151;
    transition: background .15s;
}

.ShowingAskYesNo .DivMain .ButtonZone .Cancel:hover[b-4gmjeo4fxn] { background: #f3f4f6; }

/* ════════════════════════════════════════════════════════════════
   HEADER READONLY GRID — แสดงข้อมูลหัวบิลแบบ read-only (ก่อนกดแก้ไข)
   ════════════════════════════════════════════════════════════════ */
.HeaderReadonlyGrid[b-4gmjeo4fxn] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.HeaderReadonlyGrid .HRORow[b-4gmjeo4fxn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* wrap เมื่อพื้นที่แคบ */
    padding: 7px 0;
    border-bottom: 1px solid #f3f4f6;
    gap: 4px 8px;
}

.HeaderReadonlyGrid .HRORow:last-child[b-4gmjeo4fxn] {
    border-bottom: none;
    padding-bottom: 0;
}

.HeaderReadonlyGrid .HROLabel[b-4gmjeo4fxn] {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
    flex-shrink: 0;
    min-width: 100px; /* ลดจาก 110px เพื่อเผื่อพื้นที่ value */
    max-width: 40%;   /* ไม่กิน label มากเกินครึ่ง */
    padding-top: 1px;
}

.HeaderReadonlyGrid .HROValue[b-4gmjeo4fxn] {
    font-size: 13px;
    color: #293649;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
    overflow-wrap: anywhere; /* wrap ทุกอักขระถ้าจำเป็น */
    min-width: 0;             /* ป้องกัน flex overflow */
    flex: 1;
    /* CreditTag และ inline element wrap ได้ */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.HeaderReadonlyGrid .HROValue.Muted[b-4gmjeo4fxn] {
    color: #b1b5bb;
    font-weight: 400;
    font-style: italic;
}

.HeaderReadonlyGrid .HROValue.Accent[b-4gmjeo4fxn] {
    color: #1e40af;
    font-family: inherit;
}

.HeaderReadonlyGrid .HROValue.Amount[b-4gmjeo4fxn] {
    color: #ef4444;
    font-family: inherit;
    font-weight: 700;
}

.HeaderReadonlyGrid .HROValue.Code[b-4gmjeo4fxn] {
    font-family: inherit;
    font-size: 12.5px;
}

/* Section separator inside readonly grid */
.HeaderReadonlyGrid .HROSectionTitle[b-4gmjeo4fxn] {
    font-size: 10.5px;
    font-weight: 700;
    color: #c4c8d0;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 10px 0 4px;
    border-bottom: 1px solid #f0f2f5;
}

/* ─── HROVenderBlock — ข้อมูลผู้ขายแบบ block ใน Read-only ─── */
.HeaderReadonlyGrid .HROVenderBlock[b-4gmjeo4fxn] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.HeaderReadonlyGrid .HROBadge[b-4gmjeo4fxn] {
    display: inline-block;
    font-size: 11px;
    padding: 1px 8px;
    background: #e8edf5;
    color: #4e73df;
    border-radius: 20px;
    font-weight: 600;
    width: fit-content;
}

.HeaderReadonlyGrid .HROSubText[b-4gmjeo4fxn] {
    font-size: 12px;
    color: #6b7280;
}

.HeaderReadonlyGrid .HROAddress[b-4gmjeo4fxn] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
    white-space: pre-line;
    padding-top: 2px;
    border-top: 1px dashed #e9ecef;
    margin-top: 3px;
}

/* ─── VenderAddressPreview — ที่อยู่ใต้ Trigger Button ใน Edit mode ─── */
.VenderAddressPreview[b-4gmjeo4fxn] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px dashed #dde1e7;
    border-radius: 6px;
    font-size: 12.5px;
    color: #555;
    line-height: 1.55;
}

.VenderAddressPreview .VAPIcon[b-4gmjeo4fxn] {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 13px;
}

.VenderAddressPreview .VAPText[b-4gmjeo4fxn] {
    white-space: pre-line;
    color: #4b5563;
}

/* ═══════════════════════════════════════════════════════════════
   BILL LOCKED NOTICE — แสดงเมื่อบิลยังไม่มีหมายเลข (BillId == 0)
   ═══════════════════════════════════════════════════════════════ */
.BillLockedNotice[b-4gmjeo4fxn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 36px 24px;
    margin: 0 0 16px;
    background: #fafbfc;
    border: 2px dashed #dde1e7;
    border-radius: 10px;
    text-align: center;
    color: #9ca3af;
}

.BillLockedNotice .BLNIcon[b-4gmjeo4fxn] {
    font-size: 32px;
    opacity: 0.6;
}

.BillLockedNotice .BLNTitle[b-4gmjeo4fxn] {
    font-size: 14px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: .02em;
}

.BillLockedNotice .BLNText[b-4gmjeo4fxn] {
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.7;
}

.BillLockedNotice .BLNText strong[b-4gmjeo4fxn] {
    color: #4e73df;
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════
   HEADER EDIT MODE BUTTONS — Edit / Save / Cancel
   ════════════════════════════════════════════════════════════════ */

/* ปุ่มแก้ไข (แสดงตอนอ่านอย่างเดียว) */
.BtnHeaderEdit[b-4gmjeo4fxn] {
    padding: 5px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #374151;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .15s, border-color .15s, color .15s;
    font-family: inherit;
    white-space: nowrap;
}

.BtnHeaderEdit:hover[b-4gmjeo4fxn] {
    background: #f0f7ff;
    border-color: #0B7A75;
    color: #095E5A;
}

/* ปุ่มบันทึก (แสดงตอนอยู่ในโหมดแก้ไข) */
.BtnHeaderSave[b-4gmjeo4fxn] {
    padding: 5px 16px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, #293649, #095E5A, #0B7A75);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity .18s, transform .12s;
    font-family: inherit;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(11,122,117,.25);
}

.BtnHeaderSave:hover[b-4gmjeo4fxn]  { opacity: .88; transform: translateY(-1px); }
.BtnHeaderSave:active[b-4gmjeo4fxn] { transform: translateY(0); opacity: 1; }

/* ปุ่มยกเลิก (แสดงตอนอยู่ในโหมดแก้ไข) */
.BtnHeaderCancel[b-4gmjeo4fxn] {
    padding: 5px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .15s, border-color .15s, color .15s;
    font-family: inherit;
    white-space: nowrap;
}

.BtnHeaderCancel:hover[b-4gmjeo4fxn] {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* CardHeader flex layout when buttons are present */
.BillCard .CardHeader.WithActions[b-4gmjeo4fxn] {
    justify-content: space-between;
}

.BillCard .CardHeader .CardHeaderLeft[b-4gmjeo4fxn] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.BillCard .CardHeader .CardHeaderActions[b-4gmjeo4fxn] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   960px  → Tablet : sidebar แคบลง
   768px  → Mobile : layout stack เป็น single column
   480px  → Small  : hero / stepper compact
   ════════════════════════════════════════════════════════════════ */

/* ── 1080px : stack layout (คำนึง left-nav sidebar ~160px) ── */
/* ที่ viewport ~1080px content area จริงเหลือ ~920px — side 420px + main → ตึง แล้ว */
@media (max-width: 1080px) {

    /* Stack เป็น single column */
    .BillBody[b-4gmjeo4fxn] {
        flex-direction: column;
        align-items: stretch; /* override flex-start → ให้ทุก child ขยายเต็มความกว้าง */
    }

    /* ทั้ง main และ side ขยายเต็มความกว้าง */
    .BillColMain[b-4gmjeo4fxn],
    .BillColSide[b-4gmjeo4fxn] {
        width: 100%;
        flex-shrink: 1;
    }

    /* Hero — ลด font-size เล็กน้อย */
    .BillHero .HeroBillCode[b-4gmjeo4fxn],
    .BillHero .HeroAmount[b-4gmjeo4fxn] {
        font-size: 22px;
    }
}

/* ── 768px : mobile ── */
@media (max-width: 768px) {

    /* ── Page Wrapper ── */
    .StockRecBill[b-4gmjeo4fxn] {
        padding: 0 12px 24px;
    }

    /* ── Hero Header ── */
    .BillHero[b-4gmjeo4fxn] {
        padding: 16px 16px 14px;
        border-radius: 8px;
        margin-bottom: 12px;
    }

    .BillHero .HeroMainRow[b-4gmjeo4fxn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-bottom: 8px;
    }

    .BillHero .HeroBillCode[b-4gmjeo4fxn] {
        font-size: 20px;
    }

    .BillHero .HeroAmount[b-4gmjeo4fxn] {
        font-size: 18px;
    }

    .BillHero .HeroTopRow[b-4gmjeo4fxn] {
        flex-direction: column;
        gap: 2px;
        margin-bottom: 8px;
    }

    /* ── Stepper — compact text บน mobile ── */
    .BillStepper[b-4gmjeo4fxn] {
        padding: 14px 12px 12px;
        margin-bottom: 12px;
    }

    .BillStepper .StepCircle[b-4gmjeo4fxn] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .BillStepper .StepName[b-4gmjeo4fxn] {
        font-size: 11px;
    }

    .BillStepper .StepDate[b-4gmjeo4fxn] {
        font-size: 9px; /* ย่อลงแต่ยังแสดงอยู่ */
    }

    .BillStepper .StepItem:not(:last-child)[b-4gmjeo4fxn]::after {
        top: 14px;
        left: calc(50% + 14px);
        right: calc(-50% + 14px);
    }

    /* ── Mini Cards: single column ── */
    .BillMiniCards[b-4gmjeo4fxn] {
        grid-template-columns: 1fr;
    }

    /* ── BillCard: เพิ่ม border-radius ลงเล็กน้อย ── */
    .BillCard[b-4gmjeo4fxn],
    .BillActionCard[b-4gmjeo4fxn] {
        border-radius: 8px;
    }

    /* ── Card Header: ให้ wrap เมื่อ title + button ยาวเกิน ── */
    .BillCard .CardHeader[b-4gmjeo4fxn] {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    /* ── Form fields: full-width บน mobile ── */
    .FormGroup[b-4gmjeo4fxn] {
        min-width: 100%;
    }

    /* ── FormControlReadonly CreditEndDate: ── */
    .FormControlReadonly.CreditEndDate[b-4gmjeo4fxn] {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ── Confirm Dialog ── */
    .ShowingAskYesNo .DivMain[b-4gmjeo4fxn] {
        margin: 16px;
        padding: 22px 20px;
        min-width: unset;
        width: calc(100% - 32px);
    }
}

/* ── 480px : small mobile ── */
@media (max-width: 480px) {

    /* ── Hero ── */
    .BillHero[b-4gmjeo4fxn] {
        padding: 14px 12px 12px;
    }

    .BillHero .HeroBillCode[b-4gmjeo4fxn] {
        font-size: 17px;
    }

    .BillHero .HeroAmount[b-4gmjeo4fxn] {
        font-size: 16px;
    }

    .BillHero .HeroBottomRow[b-4gmjeo4fxn] {
        gap: 6px;
    }

    /* ── Stepper: 2×2 grid — ห้าม horizontal scroll ── */
    /* คำนวณ: content area ~470px, 2 steps × 50% = ~235px each → 余裕 */
    .BillStepper .StepList[b-4gmjeo4fxn] {
        flex-wrap: wrap;
        gap: 12px 0;
        justify-content: flex-start;
    }

    .BillStepper .StepItem[b-4gmjeo4fxn] {
        flex: 0 0 50%;     /* 2 items per row */
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    /* connector: ไม่ทำงานใน grid 2×2 — ซ่อนด้วย opacity (decorative เท่านั้น) */
    .BillStepper .StepItem:not(:last-child)[b-4gmjeo4fxn]::after {
        opacity: 0;
        height: 0;
    }

    .BillStepper .StepMeta[b-4gmjeo4fxn] {
        text-align: left;
        margin-top: 0;
    }

    /* ── Header readonly rows: stack label/value ── */
    .HeaderReadonlyGrid .HRORow[b-4gmjeo4fxn] {
        flex-direction: column;
        gap: 2px;
        padding: 8px 0;
    }

    .HeaderReadonlyGrid .HROValue[b-4gmjeo4fxn] {
        text-align: left;
    }

    .HeaderReadonlyGrid .HROLabel[b-4gmjeo4fxn] {
        min-width: unset;
    }

    /* ── Info rows: stack label/value ── */
    .InfoRow[b-4gmjeo4fxn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 8px 0;
    }

    .InfoRow .InfoValue[b-4gmjeo4fxn] {
        text-align: left;
    }

    /* ── Summary rows: ให้ wrap ── */
    .SummaryRow[b-4gmjeo4fxn] {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* ── Breadcrumb ── */
    .Breadcrumb[b-4gmjeo4fxn] {
        padding: 10px 12px 6px;
        font-size: 12px;
    }

    /* ── Alert ── */
    .Alert[b-4gmjeo4fxn] {
        font-size: 12.5px;
        padding: 10px 12px;
    }

    /* ── Action Buttons ── */
    .BtnAction[b-4gmjeo4fxn] {
        font-size: 13px;
        padding: 9px 12px;
    }
}

/* ── 300px : Ultra Compact (ขนาดต่ำสุด) ── */
@media (max-width: 300px) {

    /* ── Page Wrapper ── */
    .StockRecBill[b-4gmjeo4fxn] {
        padding: 0 2px;
    }

    /* ── Breadcrumb ── */
    .Breadcrumb[b-4gmjeo4fxn] {
        padding: 8px 8px 4px;
        font-size: 11px;
    }

    /* ── Hero: compact สุด ── */
    .BillHero[b-4gmjeo4fxn] {
        padding: 10px 8px 9px;
        border-radius: 6px;
        margin-bottom: 8px;
    }

    .BillHero .HeroTypeLabel[b-4gmjeo4fxn],
    .BillHero .HeroAmountLabel[b-4gmjeo4fxn] {
        font-size: 10px;
    }

    .BillHero .HeroBillCode[b-4gmjeo4fxn] {
        font-size: 14px;
    }

    .BillHero .HeroAmount[b-4gmjeo4fxn] {
        font-size: 14px;
    }

    .BillHero .HeroStatusBadge[b-4gmjeo4fxn] {
        font-size: 10px;
        padding: 3px 8px;
    }

    .BillHero .HeroDate[b-4gmjeo4fxn] {
        font-size: 10px;
    }

    /* ── Stepper: ย่อ text + circle แต่แสดงทุกอย่าง ── */
    .BillStepper[b-4gmjeo4fxn] {
        padding: 10px 8px 8px;
        margin-bottom: 8px;
    }

    .BillStepper .StepperLabel[b-4gmjeo4fxn] {
        font-size: 10px;
        margin-bottom: 10px;
    }

    /* ── Stepper: ต่อเนื่องจาก 480px (2×2 grid) — ย่อขนาดให้พอดี 300px ── */
    /* คำนวณ: content area ~292px, 2 steps × 50% = ~146px each
       StepCircle 20px + gap 6px + StepName (~9px × 4 chars = ~40px) → รวม ~66px → OK */
    .BillStepper .StepItem[b-4gmjeo4fxn] {
        flex: 0 0 50%;     /* ยังคง 2 per row เหมือน 480px */
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    /* connector: ซ่อน (decorative) — ไม่ทำงานใน 2×2 grid */
    .BillStepper .StepItem:not(:last-child)[b-4gmjeo4fxn]::after {
        opacity: 0;
        height: 0;
    }

    .BillStepper .StepMeta[b-4gmjeo4fxn] {
        text-align: left;
        margin-top: 0;
    }

    .BillStepper .StepName[b-4gmjeo4fxn] {
        font-size: 9.5px;
    }

    .BillStepper .StepDate[b-4gmjeo4fxn] {
        font-size: 8.5px;
    }

    .BillStepper .StepCircle[b-4gmjeo4fxn] {
        width: 22px;
        height: 22px;
        font-size: 10px;
        flex-shrink: 0;
    }

    /* ── Card ── */
    .BillCard[b-4gmjeo4fxn],
    .BillActionCard[b-4gmjeo4fxn] {
        border-radius: 6px;
    }

    .BillCard .CardHeader[b-4gmjeo4fxn] {
        padding: 9px 10px 8px;
        row-gap: 5px;
    }

    .BillCard .CardHeader .CardTitle[b-4gmjeo4fxn] {
        font-size: 12px;
    }

    .BillCard .CardHeader .CardSubTitle[b-4gmjeo4fxn] {
        font-size: 10px;
    }

    .BillCard .CardBody[b-4gmjeo4fxn] {
        padding: 10px 10px;
    }

    /* ── Form ── */
    .FormGroup[b-4gmjeo4fxn] {
        min-width: 100%;
    }

    .FormGroup label[b-4gmjeo4fxn] {
        font-size: 11px;
    }

    .FormControl[b-4gmjeo4fxn] {
        padding: 6px 8px;
        font-size: 12px;
        border-radius: 6px;
    }

    .FieldSectionLabel[b-4gmjeo4fxn] {
        font-size: 10px;
    }

    /* ── Header Edit Buttons ── */
    .BtnHeaderEdit[b-4gmjeo4fxn],
    .BtnHeaderSave[b-4gmjeo4fxn],
    .BtnHeaderCancel[b-4gmjeo4fxn] {
        padding: 4px 10px;
        font-size: 11px;
    }

    /* ── Header Readonly rows: stack ── */
    .HeaderReadonlyGrid .HRORow[b-4gmjeo4fxn] {
        flex-direction: column;
        gap: 1px;
        padding: 6px 0;
    }

    .HeaderReadonlyGrid .HROLabel[b-4gmjeo4fxn] {
        font-size: 10.5px;
        min-width: unset;
    }

    .HeaderReadonlyGrid .HROValue[b-4gmjeo4fxn] {
        font-size: 12px;
        text-align: left;
    }

    /* ── Info rows ── */
    .InfoRow[b-4gmjeo4fxn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        padding: 6px 0;
    }

    .InfoRow .InfoLabel[b-4gmjeo4fxn] {
        font-size: 10.5px;
    }

    .InfoRow .InfoValue[b-4gmjeo4fxn] {
        font-size: 12px;
        text-align: left;
    }

    /* ── Summary ── */
    .SummaryRow[b-4gmjeo4fxn] {
        font-size: 12px;
    }

    .SummaryRow.Total[b-4gmjeo4fxn] {
        font-size: 14px;
    }

    /* ── Credit Tag ── */
    .CreditTag[b-4gmjeo4fxn] {
        font-size: 10px;
        padding: 1px 7px;
    }

    /* ── Alert ── */
    .Alert[b-4gmjeo4fxn] {
        font-size: 12px;
        padding: 8px 10px;
        border-radius: 6px;
    }

    /* ── Action Buttons: touch target ≥ 34px ── */
    .BtnAction[b-4gmjeo4fxn] {
        font-size: 12px;
        padding: 7px 10px;
        min-height: 34px;
    }

    /* ── Confirm Dialog: เต็มจอ ── */
    .ShowingAskYesNo .DivMain[b-4gmjeo4fxn] {
        margin: 6px;
        padding: 18px 14px;
        width: calc(100vw - 12px);
        min-width: unset;
    }

    .ShowingAskYesNo .DivMain .Title[b-4gmjeo4fxn] {
        font-size: 13px;
    }

    .ShowingAskYesNo .DivMain .ButtonZone .Confirm[b-4gmjeo4fxn],
    .ShowingAskYesNo .DivMain .ButtonZone .Cancel[b-4gmjeo4fxn] {
        width: 80px;
        height: 34px;
        font-size: 13px;
    }
}
/* /Components/Pages/BackEnd/SupplierReturn/SupplierReturn_Bill.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   StockRec_Bill.razor.css
   Design pattern: CwSoftware Modern — Hero Header · Stepper · INFO Panel
   อิงจาก Sales Order Bill detail page (OWS pattern)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Page Wrapper ─── */
.StockRecBill[b-fps8iflepr] {
    /* [2026-10] ชุดหน้าบิลกลาง: ฟอนต์/พื้นหลัง/2 คอลัมน์ มาจาก .MB-Page / .MB-Body (wwwroot/css/bill-ui.css)
       ที่นี่กำหนดแค่ความกว้างหน้า (หน้าเต็มจอหลังบ้าน ไม่ได้อยู่ใน .MaxWidthSize แบบ CPO/OWS) */
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 16px 20px 0;
    overflow-x: clip;          /* ห้ามล้นแนวนอน — clip ไม่สร้าง scroll container (sticky ยังทำงาน) */
    background: transparent;
    min-height: 0;
}

/* ข้อความแทนปุ่มเมื่อบิลปิด/ยกเลิกแล้ว (ใน BillActionBar) */
.SRB-ClosedNote[b-fps8iflepr] {
    font-size: 13px;
    color: #5c666f;
    padding: 0 6px;
}

/* การ์ดภาษีใน rail — กล่องย่อยไม่ต้องมีกรอบซ้อนหนา */
.TaxBox[b-fps8iflepr] {
    border-radius: 10px;
}

/* ─── Breadcrumb + ปุ่มย้อนกลับ (แนวเดียวกับ OrderBill) ─── */
.Breadcrumb[b-fps8iflepr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #555;
    flex-wrap: wrap;
    padding: 12px 0 14px;
}

.Breadcrumb a[b-fps8iflepr] {
    text-decoration: none;
}

.BackBtn[b-fps8iflepr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid #d8deea;
    border-radius: 8px;
    background: #fff;
    color: #33415c;
    font-size: 13.5px;
    font-weight: 700;
    transition: background .14s, border-color .14s, transform .05s;
}

    .BackBtn:hover[b-fps8iflepr] {
        background: #f2f5fa;
        border-color: #b9c4d8;
    }

    .BackBtn:active[b-fps8iflepr] { transform: translateY(1px); }

.BackBtn-Arrow[b-fps8iflepr] { font-size: 16px; line-height: 1; }

.BreadcrumbLink[b-fps8iflepr] { color: #0B7A75; cursor: pointer; }
.BreadcrumbLink:hover[b-fps8iflepr] { text-decoration: underline; }
.BreadcrumbSep[b-fps8iflepr] { color: #aaa; font-size: 18px; }
.BreadcrumbCurrent[b-fps8iflepr] { color: #111; font-weight: 600; }

/* ════════════════════════════════════════════════════════════════
   HERO HEADER — dark navy banner (เหมือน Sales Order page)
   ════════════════════════════════════════════════════════════════ */
.BillHero[b-fps8iflepr] {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 12px;
    padding: 22px 28px 20px;
    margin: 0 0 16px;
    position: relative;
    overflow: hidden;
}

/* Hero + Stepper อยู่ในคอลัมน์หลักแล้ว — ใช้ gap ของ .BillColMain แทน margin */
.BillColMain > .BillHero[b-fps8iflepr],
.BillColMain > .BillStepper[b-fps8iflepr] {
    margin: 0;
}

/* subtle gradient overlay */
.BillHero[b-fps8iflepr]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11,122,117,.12) 0%, transparent 60%);
    pointer-events: none;
}

.BillHero .HeroTopRow[b-fps8iflepr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.BillHero .HeroTypeLabel[b-fps8iflepr] {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 500;
}

.BillHero .HeroAmountLabel[b-fps8iflepr] {
    font-size: 12px;
    color: rgba(255,255,255,.45);
    text-align: right;
    letter-spacing: .04em;
}

.BillHero .HeroMainRow[b-fps8iflepr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 8px;
    flex-wrap: wrap; /* wrap เมื่อ bill code + amount ยาวเกิน */
}

.BillHero .HeroBillCode[b-fps8iflepr] {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -.01em;
    font-family: inherit;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-all; /* bill code อาจยาวมาก เช่น SR-2026-000001 */
    flex: 1;
}

.BillHero .HeroAmount[b-fps8iflepr] {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    font-family: inherit;
    letter-spacing: -.01em;
    flex-shrink: 0; /* amount ไม่หด — ถ้าแคบเกิน wrap ไปบรรทัดใหม่ */
    white-space: nowrap;
}

.BillHero .HeroBottomRow[b-fps8iflepr] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.BillHero .HeroStatusBadge[b-fps8iflepr] {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

.BillHero .HeroDate[b-fps8iflepr] {
    font-size: 12px;
    color: rgba(255,255,255,.5);
}

/* ════════════════════════════════════════════════════════════════
   PROGRESS STEPPER — horizontal step indicator
   ════════════════════════════════════════════════════════════════ */
.BillStepper[b-fps8iflepr] {
    background: #fff;
    border-radius: 12px;
    padding: 18px 24px 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.BillStepper .StepperLabel[b-fps8iflepr] {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.BillStepper .StepList[b-fps8iflepr] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    /* กฎเหล็ก: ห้าม overflow-x — ใช้ flex-wrap แทน */
}

.BillStepper .StepItem[b-fps8iflepr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Connector line between steps */
.BillStepper .StepItem:not(:last-child)[b-fps8iflepr]::after {
    content: '';
    position: absolute;
    top: 16px;
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
    height: 2px;
    background: #e5e9ef;
    z-index: 0;
}

.BillStepper .StepItem.Completed:not(:last-child)[b-fps8iflepr]::after {
    background: #10b981;
}

.BillStepper .StepItem.Active:not(:last-child)[b-fps8iflepr]::after {
    background: linear-gradient(90deg, #0B7A75 0%, #e5e9ef 100%);
}

/* Step circle */
.BillStepper .StepCircle[b-fps8iflepr] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    border: 2px solid #e5e9ef;
    background: #fff;
    color: #bbb;
    z-index: 1;
    position: relative;
    transition: all .25s;
}

.BillStepper .StepItem.Completed .StepCircle[b-fps8iflepr] {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
    font-size: 15px; /* checkmark */
}

.BillStepper .StepItem.Active .StepCircle[b-fps8iflepr] {
    background: #0B7A75;
    border-color: #0B7A75;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(11,122,117,.18);
}

.BillStepper .StepItem.Danger .StepCircle[b-fps8iflepr] {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

/* Step text */
.BillStepper .StepMeta[b-fps8iflepr] {
    margin-top: 8px;
    text-align: center;
}

.BillStepper .StepName[b-fps8iflepr] {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    line-height: 1.3;
}

.BillStepper .StepItem.Pending .StepName[b-fps8iflepr] {
    color: #bbb;
    font-weight: 400;
}

.BillStepper .StepDate[b-fps8iflepr] {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 2px;
    font-family: inherit;
}

/* ════════════════════════════════════════════════════════════════
   MAIN BODY — Two-column layout
   ════════════════════════════════════════════════════════════════ */
.BillBody[b-fps8iflepr] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.BillColMain[b-fps8iflepr] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.BillColSide[b-fps8iflepr] {
    width: 320px;                    /* คงที่ เท่ากับ .RightColumn ของหน้าบิลขาย */
    flex-shrink: 0;                  /* ไม่ให้หดเพื่อรักษาสัดส่วน */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ════════════════════════════════════════════════════════════════
   BILL CARD — generic card with bilingual section header
   ════════════════════════════════════════════════════════════════ */
.BillCard[b-fps8iflepr] {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.BillCard .CardHeader[b-fps8iflepr] {
    padding: 12px 18px 10px;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.BillCard .CardHeader .CardTitle[b-fps8iflepr] {
    font-size: 13px;
    font-weight: 700;
    color: #293649;
    letter-spacing: .01em;
}

.BillCard .CardHeader .CardSubTitle[b-fps8iflepr] {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.BillCard .CardBody[b-fps8iflepr] {
    padding: 16px 18px;
}

/* ─── Two mini cards side by side (Vender + info) ─── */
.BillMiniCards[b-fps8iflepr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ════════════════════════════════════════════════════════════════
   TAX CARD — ตกแต่งเฉพาะการ์ด "ภาษีมูลค่าเพิ่ม" (ไม่กระทบ .BillCard การ์ดอื่น)
   ════════════════════════════════════════════════════════════════ */
.TaxCard[b-fps8iflepr] {
    position: relative;
    animation: TaxCardIn-b-fps8iflepr .28s ease both;
}
@keyframes TaxCardIn-b-fps8iflepr {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.TaxCard .CardHeader[b-fps8iflepr] {
    background: linear-gradient(135deg, #293649, #095E5A, #0B7A75);
    border-bottom: none;
    padding: 13px 18px 12px;
}
.TaxCard .CardHeader .CardTitle[b-fps8iflepr] {
    color: #fff; display: flex; align-items: center; gap: 7px;
}
.TaxCard .CardHeader .CardSubTitle[b-fps8iflepr] {
    color: #fff; background: rgba(255,255,255,.18);
    padding: 3px 9px; border-radius: 20px; letter-spacing: .1em;
}

/* กล่องย่อยแบ่งตามหัวข้อ (คล้าย field group ในหน้ารายการสินค้า) */
.TaxBox[b-fps8iflepr] {
    border-radius: 10px; padding: 12px 14px; margin-top: 10px;
    transition: box-shadow .18s ease;
    animation: TaxCardIn-b-fps8iflepr .25s ease both;
}
.TaxBox:hover[b-fps8iflepr] { box-shadow: 0 3px 10px rgba(15,23,42,.06); }
.TaxBox.Main[b-fps8iflepr]    { background: #f8fafc; border: 1px solid #eef1f6; margin-top: 0; }
.TaxBox.Percent[b-fps8iflepr] { background: #E7F5F4; border: 1px solid #B9E0DC; }
.TaxBox.DiscBefore[b-fps8iflepr],
.TaxBox.DiscAfter[b-fps8iflepr] { background: #fffbeb; border: 1px solid #fde68a; }
.TaxBox.CostCalc[b-fps8iflepr] { background: #faf5ff; border: 1px solid #e9d5ff; }

.TaxBoxTitle[b-fps8iflepr] {
    font-size: 10.5px; font-weight: 800; color: #64748b;
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px;
}

/* radio แบบ pill สำหรับ "ไม่รวมภาษี / รวมภาษีอยู่แล้ว" */
.TaxRadioRow[b-fps8iflepr] { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.TaxRadioRow .CheckLabel[b-fps8iflepr] {
    padding: 7px 12px; border-radius: 20px; border: 1.5px solid #e2e8f0;
    background: #fff; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    /* กำหนด font-size/color ตายตัวที่นี่ (ไม่ปล่อยให้ .CheckLabel ฐานตัดสิน) กัน .FormGroup label (12px)
       แย่ง specificity ตอนแถวนี้ถูกวางซ้อนอยู่ใน .FormGroup (เช่นตัวเลือก "ราคาสินค้า") จนขนาดเพี้ยนไปจากแถวที่ไม่ได้อยู่ใน .FormGroup */
    font-size: 13px; color: #374151; font-weight: 400;
}
.TaxRadioRow .CheckLabel:has(input:checked)[b-fps8iflepr] {
    border-color: #0B7A75; background: #E7F5F4;
    box-shadow: 0 0 0 3px rgba(11,122,117,.1);
}

/* radio ผูกกับ label "%"/"฿" เหนือช่องกรอกส่วนลด — ให้ label ทำหน้าที่เป็นตัวเลือกในตัว */
.TaxDiscValueRow .FormGroup > .CheckLabel[b-fps8iflepr] {
    margin-bottom: 1px; font-size: 12px; color: #6b7280; gap: 6px;
}
.TaxDiscValueRow .FormGroup > .CheckLabel input[type="radio"][b-fps8iflepr] { width: 14px; height: 14px; }

.TaxAmountInput[b-fps8iflepr] { margin-top: 8px; animation: TaxCardIn-b-fps8iflepr .2s ease both; }

/* แถว %/฿ ของส่วนลดท้ายบิล — แบ่งครึ่งแนวนอนเสมอ (ไม่ wrap ไปเป็นแนวตั้งเหมือน .FormRow ทั่วไป) */
.TaxDiscValueRow[b-fps8iflepr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.TaxDiscValueRow .FormGroup[b-fps8iflepr] { min-width: 0; }

/* ════════════════════════════════════════════════════════════════
   FORM — fields inside cards
   ════════════════════════════════════════════════════════════════ */
.FormRow[b-fps8iflepr] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.FormGroup[b-fps8iflepr] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 180px;
}

.FormGroup label[b-fps8iflepr] {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
    letter-spacing: .02em;
}

.FormControl[b-fps8iflepr] {
    box-sizing: border-box;
    border: 1.5px solid #e3e6ea;
    border-radius: 9px;
    padding: 7px 12px;
    font-size: 13.5px;
    outline: none;
    width: 100%;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.03);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .12s ease;
    font-family: inherit;
    background: #fafbfc;
    color: #1f2937;
}

.FormControl:hover:not(:disabled):not(:focus)[b-fps8iflepr] {
    border-color: #b6c6e0;
    background: #fff;
}

.FormControl:focus[b-fps8iflepr] {
    border-color: #0B7A75;
    box-shadow: 0 0 0 4px rgba(11,122,117,.14), 0 2px 6px rgba(11,122,117,.1);
    background: #fff;
    transform: translateY(-1px);
}

.FormControl[b-fps8iflepr]::placeholder { color: #b6c0cc; }

.FormControl:disabled[b-fps8iflepr] {
    background: #f5f6f7;
    color: #9ca3af;
    cursor: not-allowed;
    border-color: #e9ecef;
    box-shadow: none;
}

/* label เปลี่ยนสีตามเมื่อ input ข้างในถูก focus */
.FormGroup label[b-fps8iflepr] { transition: color .15s ease; }
.FormGroup:has(> .FormControl:focus) > label[b-fps8iflepr] { color: #0B7A75; }

textarea.FormControl[b-fps8iflepr] {
    resize: vertical;
    min-height: 60px;
}

/* ════════════════════════════════════════════════════════════════
   FIELD SECTIONS — grouped rows inside a card
   ════════════════════════════════════════════════════════════════ */
.FieldSection[b-fps8iflepr] {
    padding: 14px 0 12px;
    border-bottom: 1px solid #f0f2f5;
}

.FieldSection.NoBorder[b-fps8iflepr] {
    border-bottom: none;
    padding-bottom: 0;
}

.FieldSectionLabel[b-fps8iflepr] {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* ─── Input with inline button (PO field) ─── */
.InputWithBtn[b-fps8iflepr] {
    display: flex;
    gap: 6px;
}

.InputWithBtn .FormControl[b-fps8iflepr] {
    flex: 1;
    min-width: 0;
}

/* ─── Input with inline unit label (วัน / บาท) ─── */
.InputWithUnit[b-fps8iflepr] {
    display: flex;
    align-items: center;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    overflow: hidden;
    background: #fafbfc;
    transition: border-color .15s, box-shadow .15s;
}

.InputWithUnit:focus-within[b-fps8iflepr] {
    border-color: #0B7A75;
    box-shadow: 0 0 0 3px rgba(11,122,117,.12);
    background: #fff;
}

.InputWithUnit .FormControl[b-fps8iflepr] {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    flex: 1;
    min-width: 0;
    padding-right: 6px;
}

.InputWithUnit .FormControl:focus[b-fps8iflepr] {
    border: none;
    box-shadow: none;
    background: transparent;
}

.InputWithUnit .FormControl:disabled[b-fps8iflepr] {
    background: transparent;
}

.InputWithUnit .InputUnit[b-fps8iflepr] {
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    padding: 0 10px 0 4px;
    white-space: nowrap;
    flex-shrink: 0;
    border-left: 1px solid #e9ecef;
    background: #f5f6f7;
    height: 100%;
    display: flex;
    align-items: center;
}

/* ─── Read-only computed field (CreditEndDate) ─── */
.FormControlReadonly[b-fps8iflepr] {
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    background: #f8fafc;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 36px;
    font-family: inherit;
    font-weight: 600;
}

.FormControlReadonly.Muted[b-fps8iflepr] {
    color: #b1b5bb;
    font-weight: 400;
    font-size: 12.5px;
    font-family: inherit;
    font-style: italic;
}

.FormControlReadonly.CreditEndDate[b-fps8iflepr] {
    border-color: #B9E0DC;
    background: #E7F5F4;
    color: #1e40af;
}

/* ─── Credit status tags ─── */
.CreditTag[b-fps8iflepr] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: .02em;
}

.CreditTag.OK[b-fps8iflepr]      { background: #dcfce7; color: #15803d; }
.CreditTag.Soon[b-fps8iflepr]    { background: #fef3c7; color: #92400e; }
.CreditTag.Today[b-fps8iflepr]   { background: #fed7aa; color: #c2410c; }
.CreditTag.Overdue[b-fps8iflepr] { background: #fee2e2; color: #b91c1c; }

/* ════════════════════════════════════════════════════════════════
   VENDER PICKER TRIGGER BUTTON
   ปุ่มเปิด VenderPickerPopup แทน <select> dropdown
   ════════════════════════════════════════════════════════════════ */

.VenderPickerTrigger[b-fps8iflepr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1.5px solid #e3e6ea;
    border-radius: 8px;
    padding: 7px 12px;
    background: #fafbfc;
    cursor: pointer;
    min-height: 38px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.12s;
    user-select: none;
}

.VenderPickerTrigger:hover[b-fps8iflepr] {
    border-color: #4e73df;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(78, 115, 223, 0.08);
}

.VenderPickerTrigger.HasValue[b-fps8iflepr] {
    border-color: #c7d2fe;
    background: #f5f7ff;
}

.VenderPickerTrigger.HasValue:hover[b-fps8iflepr] {
    border-color: #4e73df;
    background: #fff;
}

/* variant อ่านอย่างเดียว — ใช้กับการ์ดผู้จำหน่ายในโหมด read-only (ไม่มี X/ลูกศร ไม่ให้คลิกเปิด picker) */
.VenderPickerTrigger.ReadOnly[b-fps8iflepr] {
    cursor: default;
}
.VenderPickerTrigger.ReadOnly:hover[b-fps8iflepr] {
    border-color: #c7d2fe;
    background: #f5f7ff;
    box-shadow: none;
}

/* ─── Left Side ─── */
.VenderPickerTriggerLeft[b-fps8iflepr] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

/* ─── Avatar ดาวน์เล็กใน trigger ─── */
.VPTriggerAvatar[b-fps8iflepr] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #4e73df;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* มุมมองอ่านอย่างเดียว — avatar สี่เหลี่ยมมน 42px เหมือน .CompanyAvatar ของหน้าบิลขาย */
.VenderPickerTrigger.ReadOnly .VPTriggerAvatar[b-fps8iflepr] {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #0B7A75;
    font-size: 16px;
}

.VPTriggerInfo[b-fps8iflepr] {
    min-width: 0;
}

.VPTriggerName[b-fps8iflepr] {
    font-size: 13.5px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.VPTriggerCode[b-fps8iflepr] {
    font-size: 11px;
    color: #6b7280;
    margin-top: 1px;
}

.VPTriggerPlaceholder[b-fps8iflepr] {
    font-size: 13.5px;
    color: #aab0be;
}

/* ─── Right Side ─── */
.VPTriggerRight[b-fps8iflepr] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.VPTriggerClear[b-fps8iflepr] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.VPTriggerClear:hover[b-fps8iflepr] {
    background: #fee2e2;
    color: #b91c1c;
}

.VPTriggerArrow[b-fps8iflepr] {
    font-size: 16px;
    color: #aab0be;
    line-height: 1;
    transition: color 0.12s;
}

.VenderPickerTrigger:hover .VPTriggerArrow[b-fps8iflepr] {
    color: #4e73df;
}

/* ─── Save row ─── */
.CardSaveRow[b-fps8iflepr] {
    display: flex;
    justify-content: flex-end;
    padding-top: 14px;
    margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════════
   INFO ROWS — label + value pairs (right sidebar)
   ════════════════════════════════════════════════════════════════ */
.InfoRow[b-fps8iflepr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 7px 0;
    border-bottom: 1px solid #f3f4f6;
    gap: 4px 8px;
}

.InfoRow:last-child[b-fps8iflepr] {
    border-bottom: none;
}

.InfoRow .InfoLabel[b-fps8iflepr] {
    font-size: 12px;
    color: #9ca3af;
    flex-shrink: 0;
    max-width: 50%; /* ไม่กิน label เกินครึ่ง */
}

.InfoRow .InfoValue[b-fps8iflepr] {
    font-size: 13px;
    color: #293649;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0; /* ป้องกัน flex child ดัน container */
    flex: 1;
}

/* ════════════════════════════════════════════════════════════════
   SUMMARY ROWS — in right sidebar
   ════════════════════════════════════════════════════════════════ */
.SummaryRow[b-fps8iflepr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 5px 0;
    color: #374151;
    gap: 4px;
}

/* label ใน SummaryRow ห้าม overflow */
.SummaryRow > span:first-child[b-fps8iflepr],
.SummaryRow > div:first-child[b-fps8iflepr] {
    min-width: 0;
    overflow-wrap: break-word;
}

/* amount ใน SummaryRow — shrink ไม่ได้, แต่ wrap ข้อความได้ */
.SummaryRow .Amount[b-fps8iflepr],
.SummaryRow > span:last-child[b-fps8iflepr],
.SummaryRow > div:last-child[b-fps8iflepr] {
    flex-shrink: 0;
    font-family: inherit;
    white-space: nowrap;
}

.SummaryRow.Total[b-fps8iflepr] {
    font-size: 16px;
    font-weight: 800;
    color: #293649;
    padding-top: 8px;
    border-top: 1px solid #e5e9ef;
    margin-top: 4px;
    font-family: inherit;
}

.SummaryRow.Total .Amount[b-fps8iflepr] {
    color: #ef4444;
}

.SummaryDivider[b-fps8iflepr] {
    border: none;
    border-top: 1px solid #e5e9ef;
    margin: 6px 0;
}

/* ════════════════════════════════════════════════════════════════
   TAX SETTINGS — checkbox area
   ════════════════════════════════════════════════════════════════ */
.CheckRow[b-fps8iflepr] {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.CheckLabel[b-fps8iflepr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
    transition: color .15s ease;
}
.CheckLabel:has(input:checked)[b-fps8iflepr] { color: #1e293b; font-weight: 600; }
.CheckLabel:has(input:disabled)[b-fps8iflepr] { cursor: not-allowed; opacity: .6; }

/* ─── Checkbox: สี่เหลี่ยมมน + เครื่องหมายถูก animate + glow ring ─── */
.CheckLabel input[type="checkbox"][b-fps8iflepr] {
    appearance: none; -webkit-appearance: none; margin: 0;
    width: 19px; height: 19px; border-radius: 6px; flex-shrink: 0;
    border: 2px solid #cbd5e1; background: #fff; cursor: pointer;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
    position: relative;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.CheckLabel input[type="checkbox"]:hover:not(:disabled):not(:checked)[b-fps8iflepr] {
    border-color: #7CC7C1; box-shadow: 0 0 0 4px rgba(11,122,117,.1);
}
.CheckLabel input[type="checkbox"]:active:not(:disabled)[b-fps8iflepr] { transform: scale(.9); }
.CheckLabel input[type="checkbox"]:checked[b-fps8iflepr] {
    background: linear-gradient(135deg, #0B7A75, #0B7A75);
    border-color: #0B7A75;
    box-shadow: 0 2px 6px rgba(11,122,117,.35);
}
.CheckLabel input[type="checkbox"]:checked:hover:not(:disabled)[b-fps8iflepr] {
    box-shadow: 0 2px 8px rgba(11,122,117,.45), 0 0 0 4px rgba(11,122,117,.12);
}
.CheckLabel input[type="checkbox"]:checked[b-fps8iflepr]::after {
    content: "";
    position: absolute; left: 5.5px; top: 2px;
    width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2.2px 2.2px 0;
    transform: rotate(45deg); transform-origin: center;
    animation: CheckPop-b-fps8iflepr .2s ease-out both;
}
.CheckLabel input[type="checkbox"]:disabled[b-fps8iflepr] { cursor: not-allowed; opacity: .55; box-shadow: none; }

@keyframes CheckPop-b-fps8iflepr {
    from { opacity: 0; transform: rotate(45deg) scale(.3); }
    to   { opacity: 1; transform: rotate(45deg) scale(1); }
}

/* ─── ธีมสีเช็คบ็อกซ์ตามกล่องที่สังกัด (ให้เข้าชุดกับ .TaxBox แต่ละสี) ─── */
.TaxBox.DiscBefore .CheckLabel input[type="checkbox"]:not(:checked):hover[b-fps8iflepr] {
    border-color: #f6c445; box-shadow: 0 0 0 4px rgba(245,158,11,.12);
}
.TaxBox.DiscBefore .CheckLabel input[type="checkbox"]:checked[b-fps8iflepr] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #d97706; box-shadow: 0 2px 6px rgba(217,119,6,.35);
}
.TaxBox.CostCalc .CheckLabel input[type="checkbox"]:not(:checked):hover[b-fps8iflepr] {
    border-color: #c4b5fd; box-shadow: 0 0 0 4px rgba(139,92,246,.12);
}
.TaxBox.CostCalc .CheckLabel input[type="checkbox"]:checked[b-fps8iflepr] {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-color: #7c3aed; box-shadow: 0 2px 6px rgba(124,58,237,.35);
}

/* ─── Radio: จุดกลม + pop animation ─── */
.CheckLabel input[type="radio"][b-fps8iflepr] {
    appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
    width: 16px; height: 16px; border-radius: 50%;
    border: 1.5px solid #cbd5e1; background: #fff; position: relative;
    cursor: pointer; transition: border-color .15s ease;
}
.CheckLabel input[type="radio"]:hover:not(:disabled)[b-fps8iflepr] { border-color: #7CC7C1; }
.CheckLabel input[type="radio"]:checked[b-fps8iflepr] { border-color: #0B7A75; }
.CheckLabel input[type="radio"]:checked[b-fps8iflepr]::after {
    content: "";
    position: absolute; inset: 3px; border-radius: 50%;
    background: #0B7A75;
    animation: RadioPop-b-fps8iflepr .2s cubic-bezier(.34,1.56,.64,1) both;
}
.CheckLabel input[type="radio"]:disabled[b-fps8iflepr] { cursor: not-allowed; opacity: .65; }

@keyframes RadioPop-b-fps8iflepr {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

/* ════════════════════════════════════════════════════════════════
   ACTIONS — status change buttons (bottom of sidebar)
   ════════════════════════════════════════════════════════════════ */
.BillActionCard[b-fps8iflepr] {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.BillActionCard .CardHeader[b-fps8iflepr] {
    padding: 12px 18px 10px;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.BillActionCard .CardHeader .CardTitle[b-fps8iflepr] {
    font-size: 13px;
    font-weight: 700;
    color: #293649;
}

.BillActionCard .CardHeader .CardSubTitle[b-fps8iflepr] {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.BillActionCard .CardBody[b-fps8iflepr] {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.BtnAction[b-fps8iflepr] {
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-align: center;
    transition: opacity .18s, transform .12s;
    font-family: inherit;
}

.BtnAction:hover[b-fps8iflepr] { opacity: .87; transform: translateY(-1px); }
.BtnAction:active[b-fps8iflepr] { transform: translateY(0); }

.BtnAction.Primary[b-fps8iflepr] {
    background: linear-gradient(135deg, #293649, #095E5A, #0B7A75);
    color: #fff;
}

.BtnAction.Success[b-fps8iflepr] {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #fff;
}

.BtnAction.Danger[b-fps8iflepr] {
    background: #dc3545;
    color: #fff;
}

.BtnAction.Outline[b-fps8iflepr] {
    background: #fff;
    border: 1.5px solid #d1d5db;
    color: #374151;
}

/* variant แนวนอน — ใช้ตอนวางการ์ด ACTIONS ไว้ใต้ Progress Stepper (เต็มความกว้างหน้า แทนที่จะอยู่ในไซด์บาร์แคบ)
   ปุ่มยาวเรียงต่อกันเต็มแถวเสมอ (flex:1 หารความกว้างเท่าๆ กัน ไม่ wrap) */
.BillActionCardRow[b-fps8iflepr] { margin-top: 14px; margin-bottom: 18px; }
.BillActionCard .CardBody.BillActionCardBodyRow[b-fps8iflepr] {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}
.BillActionCardBodyRow .BtnAction[b-fps8iflepr] { width: auto; flex: 1 1 0; }

/* Save button inside form */
.BtnSave[b-fps8iflepr] {
    padding: 9px 22px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity .18s;
    font-family: inherit;
}

.BtnSave:hover[b-fps8iflepr] { opacity: .86; }

.BtnImportPO[b-fps8iflepr] {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
    white-space: nowrap;
    transition: background .15s;
    font-family: inherit;
}

.BtnImportPO:hover[b-fps8iflepr] { background: #f3f4f6; }

/* ════════════════════════════════════════════════════════════════
   ALERT
   ════════════════════════════════════════════════════════════════ */
.Alert[b-fps8iflepr] {
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.Alert.Success[b-fps8iflepr] { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.Alert.Error[b-fps8iflepr]   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* ════════════════════════════════════════════════════════════════
   CONFIRM DIALOG (ShowingAskYesNo — ตรงกับ SalesManage)
   ════════════════════════════════════════════════════════════════ */
.ShowingAskYesNo[b-fps8iflepr] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
}

.ShowingAskYesNo .DivMain[b-fps8iflepr] {
    background: white;
    border-radius: 10px;
    padding: 28px 32px;
    user-select: none;
    min-width: 260px;
    max-width: min(440px, calc(100vw - 32px));
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
}

.ShowingAskYesNo .DivMain .Title[b-fps8iflepr] {
    font-size: 15px;
    color: #293649;
    line-height: 1.6;
    font-weight: 500;
}

.ShowingAskYesNo .DivMain .ButtonZone[b-fps8iflepr] {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.ShowingAskYesNo .DivMain .ButtonZone .Confirm[b-fps8iflepr] {
    border-radius: 6px;
    width: 100px;
    height: 38px;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: opacity .2s;
    color: #fff;
}

.ShowingAskYesNo .DivMain .ButtonZone .Confirm:hover[b-fps8iflepr] { opacity: 0.85; }

.ShowingAskYesNo .DivMain .ButtonZone .Cancel[b-fps8iflepr] {
    margin-left: 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    width: 100px;
    height: 38px;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 14px;
    background: #fff;
    color: #374151;
    transition: background .15s;
}

.ShowingAskYesNo .DivMain .ButtonZone .Cancel:hover[b-fps8iflepr] { background: #f3f4f6; }

/* ════════════════════════════════════════════════════════════════
   HEADER READONLY GRID — แสดงข้อมูลหัวบิลแบบ read-only (ก่อนกดแก้ไข)
   ════════════════════════════════════════════════════════════════ */
.HeaderReadonlyGrid[b-fps8iflepr] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.HeaderReadonlyGrid .HRORow[b-fps8iflepr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* wrap เมื่อพื้นที่แคบ */
    padding: 7px 0;
    border-bottom: 1px solid #f3f4f6;
    gap: 4px 8px;
}

.HeaderReadonlyGrid .HRORow:last-child[b-fps8iflepr] {
    border-bottom: none;
    padding-bottom: 0;
}

.HeaderReadonlyGrid .HROLabel[b-fps8iflepr] {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
    flex-shrink: 0;
    min-width: 100px; /* ลดจาก 110px เพื่อเผื่อพื้นที่ value */
    max-width: 40%;   /* ไม่กิน label มากเกินครึ่ง */
    padding-top: 1px;
}

.HeaderReadonlyGrid .HROValue[b-fps8iflepr] {
    font-size: 13px;
    color: #293649;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
    overflow-wrap: anywhere; /* wrap ทุกอักขระถ้าจำเป็น */
    min-width: 0;             /* ป้องกัน flex overflow */
    flex: 1;
    /* CreditTag และ inline element wrap ได้ */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.HeaderReadonlyGrid .HROValue.Muted[b-fps8iflepr] {
    color: #b1b5bb;
    font-weight: 400;
    font-style: italic;
}

.HeaderReadonlyGrid .HROValue.Accent[b-fps8iflepr] {
    color: #1e40af;
    font-family: inherit;
}

.HeaderReadonlyGrid .HROValue.Amount[b-fps8iflepr] {
    color: #ef4444;
    font-family: inherit;
    font-weight: 700;
}

.HeaderReadonlyGrid .HROValue.Code[b-fps8iflepr] {
    font-family: inherit;
    font-size: 12.5px;
}

/* Section separator inside readonly grid */
.HeaderReadonlyGrid .HROSectionTitle[b-fps8iflepr] {
    font-size: 10.5px;
    font-weight: 700;
    color: #c4c8d0;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 10px 0 4px;
    border-bottom: 1px solid #f0f2f5;
}

/* ─── HROVenderBlock — ข้อมูลผู้ขายแบบ block ใน Read-only ─── */
.HeaderReadonlyGrid .HROVenderBlock[b-fps8iflepr] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.HeaderReadonlyGrid .HROBadge[b-fps8iflepr] {
    display: inline-block;
    font-size: 11px;
    padding: 1px 8px;
    background: #e8edf5;
    color: #4e73df;
    border-radius: 20px;
    font-weight: 600;
    width: fit-content;
}

.HeaderReadonlyGrid .HROSubText[b-fps8iflepr] {
    font-size: 12px;
    color: #6b7280;
}

.HeaderReadonlyGrid .HROAddress[b-fps8iflepr] {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
    white-space: pre-line;
    padding-top: 2px;
    border-top: 1px dashed #e9ecef;
    margin-top: 3px;
}

/* ─── VenderAddressPreview — ที่อยู่ใต้ Trigger Button ใน Edit mode ─── */
.VenderAddressPreview[b-fps8iflepr] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px dashed #dde1e7;
    border-radius: 6px;
    font-size: 12.5px;
    color: #555;
    line-height: 1.55;
}

.VenderAddressPreview .VAPIcon[b-fps8iflepr] {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 13px;
}

.VenderAddressPreview .VAPText[b-fps8iflepr] {
    white-space: pre-line;
    color: #4b5563;
}

/* ═══════════════════════════════════════════════════════════════
   BILL LOCKED NOTICE — แสดงเมื่อบิลยังไม่มีหมายเลข (BillId == 0)
   ═══════════════════════════════════════════════════════════════ */
.BillLockedNotice[b-fps8iflepr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 36px 24px;
    margin: 0 0 16px;
    background: #fafbfc;
    border: 2px dashed #dde1e7;
    border-radius: 10px;
    text-align: center;
    color: #9ca3af;
}

.BillLockedNotice .BLNIcon[b-fps8iflepr] {
    font-size: 32px;
    opacity: 0.6;
}

.BillLockedNotice .BLNTitle[b-fps8iflepr] {
    font-size: 14px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: .02em;
}

.BillLockedNotice .BLNText[b-fps8iflepr] {
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.7;
}

.BillLockedNotice .BLNText strong[b-fps8iflepr] {
    color: #4e73df;
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════
   HEADER EDIT MODE BUTTONS — Edit / Save / Cancel
   ════════════════════════════════════════════════════════════════ */

/* ปุ่มแก้ไข (แสดงตอนอ่านอย่างเดียว) */
.BtnHeaderEdit[b-fps8iflepr] {
    padding: 5px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #374151;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .15s, border-color .15s, color .15s;
    font-family: inherit;
    white-space: nowrap;
}

.BtnHeaderEdit:hover[b-fps8iflepr] {
    background: #f0f7ff;
    border-color: #0B7A75;
    color: #095E5A;
}

/* ปุ่มบันทึก (แสดงตอนอยู่ในโหมดแก้ไข) */
.BtnHeaderSave[b-fps8iflepr] {
    padding: 5px 16px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, #293649, #095E5A, #0B7A75);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity .18s, transform .12s;
    font-family: inherit;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(11,122,117,.25);
}

.BtnHeaderSave:hover[b-fps8iflepr]  { opacity: .88; transform: translateY(-1px); }
.BtnHeaderSave:active[b-fps8iflepr] { transform: translateY(0); opacity: 1; }

/* ปุ่มยกเลิก (แสดงตอนอยู่ในโหมดแก้ไข) */
.BtnHeaderCancel[b-fps8iflepr] {
    padding: 5px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .15s, border-color .15s, color .15s;
    font-family: inherit;
    white-space: nowrap;
}

.BtnHeaderCancel:hover[b-fps8iflepr] {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* CardHeader flex layout when buttons are present */
.BillCard .CardHeader.WithActions[b-fps8iflepr] {
    justify-content: space-between;
}

.BillCard .CardHeader .CardHeaderLeft[b-fps8iflepr] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.BillCard .CardHeader .CardHeaderActions[b-fps8iflepr] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   960px  → Tablet : sidebar แคบลง
   768px  → Mobile : layout stack เป็น single column
   480px  → Small  : hero / stepper compact
   ════════════════════════════════════════════════════════════════ */

/* ── 1080px : stack layout (คำนึง left-nav sidebar ~160px) ── */
/* ที่ viewport ~1080px content area จริงเหลือ ~920px — side 420px + main → ตึง แล้ว */
@media (max-width: 1080px) {

    /* Stack เป็น single column */
    .BillBody[b-fps8iflepr] {
        flex-direction: column;
        align-items: stretch; /* override flex-start → ให้ทุก child ขยายเต็มความกว้าง */
    }

    /* ทั้ง main และ side ขยายเต็มความกว้าง */
    .BillColMain[b-fps8iflepr],
    .BillColSide[b-fps8iflepr] {
        width: 100%;
        flex-shrink: 1;
    }

    /* Hero — ลด font-size เล็กน้อย */
    .BillHero .HeroBillCode[b-fps8iflepr],
    .BillHero .HeroAmount[b-fps8iflepr] {
        font-size: 22px;
    }
}

/* ── 768px : mobile ── */
@media (max-width: 768px) {

    /* ── Page Wrapper ── */
    .StockRecBill[b-fps8iflepr] {
        padding: 0 12px 24px;
    }

    /* ── Hero Header ── */
    .BillHero[b-fps8iflepr] {
        padding: 16px 16px 14px;
        border-radius: 8px;
        margin-bottom: 12px;
    }

    .BillHero .HeroMainRow[b-fps8iflepr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-bottom: 8px;
    }

    .BillHero .HeroBillCode[b-fps8iflepr] {
        font-size: 20px;
    }

    .BillHero .HeroAmount[b-fps8iflepr] {
        font-size: 18px;
    }

    .BillHero .HeroTopRow[b-fps8iflepr] {
        flex-direction: column;
        gap: 2px;
        margin-bottom: 8px;
    }

    /* ── Stepper — compact text บน mobile ── */
    .BillStepper[b-fps8iflepr] {
        padding: 14px 12px 12px;
        margin-bottom: 12px;
    }

    .BillStepper .StepCircle[b-fps8iflepr] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .BillStepper .StepName[b-fps8iflepr] {
        font-size: 11px;
    }

    .BillStepper .StepDate[b-fps8iflepr] {
        font-size: 9px; /* ย่อลงแต่ยังแสดงอยู่ */
    }

    .BillStepper .StepItem:not(:last-child)[b-fps8iflepr]::after {
        top: 14px;
        left: calc(50% + 14px);
        right: calc(-50% + 14px);
    }

    /* ── Mini Cards: single column ── */
    .BillMiniCards[b-fps8iflepr] {
        grid-template-columns: 1fr;
    }

    /* ── BillCard: เพิ่ม border-radius ลงเล็กน้อย ── */
    .BillCard[b-fps8iflepr],
    .BillActionCard[b-fps8iflepr] {
        border-radius: 8px;
    }

    /* ── Card Header: ให้ wrap เมื่อ title + button ยาวเกิน ── */
    .BillCard .CardHeader[b-fps8iflepr] {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    /* ── Form fields: full-width บน mobile ── */
    .FormGroup[b-fps8iflepr] {
        min-width: 100%;
    }

    /* ── FormControlReadonly CreditEndDate: ── */
    .FormControlReadonly.CreditEndDate[b-fps8iflepr] {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ── Confirm Dialog ── */
    .ShowingAskYesNo .DivMain[b-fps8iflepr] {
        margin: 16px;
        padding: 22px 20px;
        min-width: unset;
        width: calc(100% - 32px);
    }
}

/* ── 480px : small mobile ── */
@media (max-width: 480px) {

    /* ── Hero ── */
    .BillHero[b-fps8iflepr] {
        padding: 14px 12px 12px;
    }

    .BillHero .HeroBillCode[b-fps8iflepr] {
        font-size: 17px;
    }

    .BillHero .HeroAmount[b-fps8iflepr] {
        font-size: 16px;
    }

    .BillHero .HeroBottomRow[b-fps8iflepr] {
        gap: 6px;
    }

    /* ── Stepper: 2×2 grid — ห้าม horizontal scroll ── */
    /* คำนวณ: content area ~470px, 2 steps × 50% = ~235px each → 余裕 */
    .BillStepper .StepList[b-fps8iflepr] {
        flex-wrap: wrap;
        gap: 12px 0;
        justify-content: flex-start;
    }

    .BillStepper .StepItem[b-fps8iflepr] {
        flex: 0 0 50%;     /* 2 items per row */
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    /* connector: ไม่ทำงานใน grid 2×2 — ซ่อนด้วย opacity (decorative เท่านั้น) */
    .BillStepper .StepItem:not(:last-child)[b-fps8iflepr]::after {
        opacity: 0;
        height: 0;
    }

    .BillStepper .StepMeta[b-fps8iflepr] {
        text-align: left;
        margin-top: 0;
    }

    /* ── Header readonly rows: stack label/value ── */
    .HeaderReadonlyGrid .HRORow[b-fps8iflepr] {
        flex-direction: column;
        gap: 2px;
        padding: 8px 0;
    }

    .HeaderReadonlyGrid .HROValue[b-fps8iflepr] {
        text-align: left;
    }

    .HeaderReadonlyGrid .HROLabel[b-fps8iflepr] {
        min-width: unset;
    }

    /* ── Info rows: stack label/value ── */
    .InfoRow[b-fps8iflepr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 8px 0;
    }

    .InfoRow .InfoValue[b-fps8iflepr] {
        text-align: left;
    }

    /* ── Summary rows: ให้ wrap ── */
    .SummaryRow[b-fps8iflepr] {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* ── Breadcrumb ── */
    .Breadcrumb[b-fps8iflepr] {
        padding: 10px 12px 6px;
        font-size: 12px;
    }

    /* ── Alert ── */
    .Alert[b-fps8iflepr] {
        font-size: 12.5px;
        padding: 10px 12px;
    }

    /* ── Action Buttons ── */
    .BtnAction[b-fps8iflepr] {
        font-size: 13px;
        padding: 9px 12px;
    }
}

/* ── 300px : Ultra Compact (ขนาดต่ำสุด) ── */
@media (max-width: 300px) {

    /* ── Page Wrapper ── */
    .StockRecBill[b-fps8iflepr] {
        padding: 0 2px;
    }

    /* ── Breadcrumb ── */
    .Breadcrumb[b-fps8iflepr] {
        padding: 8px 8px 4px;
        font-size: 11px;
    }

    /* ── Hero: compact สุด ── */
    .BillHero[b-fps8iflepr] {
        padding: 10px 8px 9px;
        border-radius: 6px;
        margin-bottom: 8px;
    }

    .BillHero .HeroTypeLabel[b-fps8iflepr],
    .BillHero .HeroAmountLabel[b-fps8iflepr] {
        font-size: 10px;
    }

    .BillHero .HeroBillCode[b-fps8iflepr] {
        font-size: 14px;
    }

    .BillHero .HeroAmount[b-fps8iflepr] {
        font-size: 14px;
    }

    .BillHero .HeroStatusBadge[b-fps8iflepr] {
        font-size: 10px;
        padding: 3px 8px;
    }

    .BillHero .HeroDate[b-fps8iflepr] {
        font-size: 10px;
    }

    /* ── Stepper: ย่อ text + circle แต่แสดงทุกอย่าง ── */
    .BillStepper[b-fps8iflepr] {
        padding: 10px 8px 8px;
        margin-bottom: 8px;
    }

    .BillStepper .StepperLabel[b-fps8iflepr] {
        font-size: 10px;
        margin-bottom: 10px;
    }

    /* ── Stepper: ต่อเนื่องจาก 480px (2×2 grid) — ย่อขนาดให้พอดี 300px ── */
    /* คำนวณ: content area ~292px, 2 steps × 50% = ~146px each
       StepCircle 20px + gap 6px + StepName (~9px × 4 chars = ~40px) → รวม ~66px → OK */
    .BillStepper .StepItem[b-fps8iflepr] {
        flex: 0 0 50%;     /* ยังคง 2 per row เหมือน 480px */
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    /* connector: ซ่อน (decorative) — ไม่ทำงานใน 2×2 grid */
    .BillStepper .StepItem:not(:last-child)[b-fps8iflepr]::after {
        opacity: 0;
        height: 0;
    }

    .BillStepper .StepMeta[b-fps8iflepr] {
        text-align: left;
        margin-top: 0;
    }

    .BillStepper .StepName[b-fps8iflepr] {
        font-size: 9.5px;
    }

    .BillStepper .StepDate[b-fps8iflepr] {
        font-size: 8.5px;
    }

    .BillStepper .StepCircle[b-fps8iflepr] {
        width: 22px;
        height: 22px;
        font-size: 10px;
        flex-shrink: 0;
    }

    /* ── Card ── */
    .BillCard[b-fps8iflepr],
    .BillActionCard[b-fps8iflepr] {
        border-radius: 6px;
    }

    .BillCard .CardHeader[b-fps8iflepr] {
        padding: 9px 10px 8px;
        row-gap: 5px;
    }

    .BillCard .CardHeader .CardTitle[b-fps8iflepr] {
        font-size: 12px;
    }

    .BillCard .CardHeader .CardSubTitle[b-fps8iflepr] {
        font-size: 10px;
    }

    .BillCard .CardBody[b-fps8iflepr] {
        padding: 10px 10px;
    }

    /* ── Form ── */
    .FormGroup[b-fps8iflepr] {
        min-width: 100%;
    }

    .FormGroup label[b-fps8iflepr] {
        font-size: 11px;
    }

    .FormControl[b-fps8iflepr] {
        padding: 6px 8px;
        font-size: 12px;
        border-radius: 6px;
    }

    .FieldSectionLabel[b-fps8iflepr] {
        font-size: 10px;
    }

    /* ── Header Edit Buttons ── */
    .BtnHeaderEdit[b-fps8iflepr],
    .BtnHeaderSave[b-fps8iflepr],
    .BtnHeaderCancel[b-fps8iflepr] {
        padding: 4px 10px;
        font-size: 11px;
    }

    /* ── Header Readonly rows: stack ── */
    .HeaderReadonlyGrid .HRORow[b-fps8iflepr] {
        flex-direction: column;
        gap: 1px;
        padding: 6px 0;
    }

    .HeaderReadonlyGrid .HROLabel[b-fps8iflepr] {
        font-size: 10.5px;
        min-width: unset;
    }

    .HeaderReadonlyGrid .HROValue[b-fps8iflepr] {
        font-size: 12px;
        text-align: left;
    }

    /* ── Info rows ── */
    .InfoRow[b-fps8iflepr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        padding: 6px 0;
    }

    .InfoRow .InfoLabel[b-fps8iflepr] {
        font-size: 10.5px;
    }

    .InfoRow .InfoValue[b-fps8iflepr] {
        font-size: 12px;
        text-align: left;
    }

    /* ── Summary ── */
    .SummaryRow[b-fps8iflepr] {
        font-size: 12px;
    }

    .SummaryRow.Total[b-fps8iflepr] {
        font-size: 14px;
    }

    /* ── Credit Tag ── */
    .CreditTag[b-fps8iflepr] {
        font-size: 10px;
        padding: 1px 7px;
    }

    /* ── Alert ── */
    .Alert[b-fps8iflepr] {
        font-size: 12px;
        padding: 8px 10px;
        border-radius: 6px;
    }

    /* ── Action Buttons: touch target ≥ 34px ── */
    .BtnAction[b-fps8iflepr] {
        font-size: 12px;
        padding: 7px 10px;
        min-height: 34px;
    }

    /* ── Confirm Dialog: เต็มจอ ── */
    .ShowingAskYesNo .DivMain[b-fps8iflepr] {
        margin: 6px;
        padding: 18px 14px;
        width: calc(100vw - 12px);
        min-width: unset;
    }

    .ShowingAskYesNo .DivMain .Title[b-fps8iflepr] {
        font-size: 13px;
    }

    .ShowingAskYesNo .DivMain .ButtonZone .Confirm[b-fps8iflepr],
    .ShowingAskYesNo .DivMain .ButtonZone .Cancel[b-fps8iflepr] {
        width: 80px;
        height: 34px;
        font-size: 13px;
    }
}

/* ─── ส่งคืนสินค้าให้บริษัท — ตารางรายการที่ส่งคืน (เลือกจากรายการที่รับมา) ─── */
.RetTable[b-fps8iflepr] { width: 100%; border-collapse: collapse; font-size: 13px; }
.RetTable th[b-fps8iflepr] { text-align: left; padding: 8px; font-size: 10.5px; font-weight: 800; color: #64748b; text-transform: uppercase; border-bottom: 2px solid #e5e9ef; }
.RetTable th.R[b-fps8iflepr], .RetTable td.R[b-fps8iflepr] { text-align: right; }
.RetTable td[b-fps8iflepr] { padding: 10px 8px; border-bottom: 1px solid #f0f2f5; vertical-align: middle; }
.RetTable td small[b-fps8iflepr] { color: #94a3b8; font-size: 10.5px; }
.RetTable tr.On[b-fps8iflepr] { background: #E7F5F4; }
.RetTable tr.Done[b-fps8iflepr] { opacity: .55; }
.RetNum[b-fps8iflepr] { width: 104px; box-sizing: border-box; border: 1.5px solid #e3e6ea; border-radius: 7px; padding: 6px 9px; font-size: 12.5px; text-align: right; }
.RetNum:disabled[b-fps8iflepr] { background: #f8fafc; color: #94a3b8; }
.RetRowErr[b-fps8iflepr] { color: #dc2626; font-size: 11.5px; font-weight: 700; padding: 2px 8px 8px; }
.RetDoneTag[b-fps8iflepr] { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 10.5px; font-weight: 800; }
.RetBillCapWarn[b-fps8iflepr] { margin-top: 10px; padding: 9px 12px; border-radius: 9px; background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; font-size: 12px; font-weight: 700; }
.RetOriginRow[b-fps8iflepr] { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 800; color: #1e293b; }
.RetOriginMuted[b-fps8iflepr] { font-weight: 500; color: #94a3b8; font-size: 12px; }
.RetOriginSelect[b-fps8iflepr] { width: 100%; box-sizing: border-box; border: 1.5px solid #e3e6ea; border-radius: 8px; padding: 9px 12px; font-size: 13px; }

/* ─── combobox เลือกบิลรับต้นทาง (คลิก = ล่าสุด / พิมพ์ = ค้นหา) ─── */
.RetOriginCombo[b-fps8iflepr] { position: relative; }
.RetOriginCombo .RetOriginSelect[b-fps8iflepr] { cursor: text; }
.RetOriginBackdrop[b-fps8iflepr] { position: fixed; inset: 0; z-index: 40; background: transparent; }
.RetOriginMenu[b-fps8iflepr] {
    position: absolute; z-index: 41; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff; border: 1.5px solid #e3e6ea; border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15,23,42,.16); max-height: 320px; overflow-y: auto; padding: 4px;
}
.RetOriginEmpty[b-fps8iflepr] { padding: 14px; text-align: center; color: #94a3b8; font-size: 12.5px; }
.RetOriginItem[b-fps8iflepr] { padding: 8px 10px; border-radius: 7px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.RetOriginItem:hover[b-fps8iflepr] { background: #E7F5F4; }
.RetOriginItem.Full[b-fps8iflepr] { opacity: .6; }
.RetOriginItemCode[b-fps8iflepr] { font-weight: 800; font-size: 13px; color: #1e293b; }
.RetOriginItemSub[b-fps8iflepr] { font-size: 11.5px; color: #64748b; display: flex; align-items: center; gap: 6px; }

/* การ์ดเลือกบิลต้นทาง — ต้องให้ dropdown ทะลุออกนอกการ์ดได้ (ทับ overflow:hidden ของ .BillCard) */
.RetOriginCard[b-fps8iflepr] { overflow: visible; }
.RetOriginCard .CardBody[b-fps8iflepr] { overflow: visible; }

.RetOriginItemCode[b-fps8iflepr] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.RetOriginItemAmt[b-fps8iflepr] { font-weight: 800; font-size: 12.5px; color: #0f766e; }

.RetOriginItemFin[b-fps8iflepr] { font-size: 11px; color: #15803d; font-weight: 700; }

/* ─── ปุ่ม trigger เลือกบิลต้นทาง ─── */
.RetOriginTrigger[b-fps8iflepr] {
    width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 10px 14px; border: 1.5px solid #e3e6ea; border-radius: 9px;
    background: #fff; cursor: pointer; font-family: inherit; font-size: 13px; color: #64748b;
    transition: border-color .15s, box-shadow .15s;
}
.RetOriginTrigger:hover[b-fps8iflepr] { border-color: #cbd5e1; }
.RetOriginTrigger.HasValue[b-fps8iflepr] { color: #1e293b; font-weight: 700; border-color: #0f766e; }
.RetOriginTriggerText[b-fps8iflepr] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.RetOriginTriggerArrow[b-fps8iflepr] { color: #94a3b8; font-size: 15px; flex: none; }

/* ─── modal picker (รายการ + ช่องค้นหา) ─── */
.RetPickerOverlay[b-fps8iflepr] {
    position: fixed; inset: 0; z-index: 1200; background: rgba(15,23,42,.45);
    display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px;
}
.RetPickerModal[b-fps8iflepr] {
    width: 100%; max-width: 640px; max-height: calc(100vh - 120px); display: flex; flex-direction: column;
    background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(15,23,42,.30); overflow: hidden;
}
.RetPickerHead[b-fps8iflepr] {
    display: flex; align-items: center; justify-content: space-between; padding: 14px 18px;
    border-bottom: 1px solid #eef1f4;
}
.RetPickerTitle[b-fps8iflepr] { font-size: 14px; font-weight: 800; color: #1e293b; }
.RetPickerClose[b-fps8iflepr] {
    border: none; background: #f1f5f9; width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
    color: #475569; font-size: 13px;
}
.RetPickerClose:hover[b-fps8iflepr] { background: #e2e8f0; }
.RetPickerSearch[b-fps8iflepr] { padding: 12px 18px; border-bottom: 1px solid #eef1f4; }
.RetPickerSearch input[b-fps8iflepr] {
    width: 100%; box-sizing: border-box; border: 1.5px solid #e3e6ea; border-radius: 9px;
    padding: 9px 12px; font-size: 13px; font-family: inherit;
}
.RetPickerSearch input:focus[b-fps8iflepr] { outline: none; border-color: #0f766e; }
.RetPickerList[b-fps8iflepr] { overflow-y: auto; padding: 6px; }
/* /Components/Pages/BackEnd/SupplierReturn/SupplierReturn_Man.razor.rz.scp.css */
.SRMWrap[b-jqatoxxl5m] { max-width: 1080px; margin: 0 auto; padding: 16px; }
.SRMHead[b-jqatoxxl5m] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.SRMTitle[b-jqatoxxl5m] { font-size: 17px; font-weight: 800; color: #1e293b; }
.SRMCount[b-jqatoxxl5m] { font-size: 12.5px; color: #64748b; margin-left: 10px; }
.SRMNew[b-jqatoxxl5m] { padding: 9px 18px; border-radius: 9px; border: none; cursor: pointer; background: linear-gradient(135deg, #293649, #1e3a8a, #3b82f6); color: #fff; font-weight: 700; font-size: 13px; }
.SRMEmpty[b-jqatoxxl5m] { text-align: center; padding: 48px; color: #94a3b8; }
.SRMList[b-jqatoxxl5m] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.SRMCard[b-jqatoxxl5m] { background: #fff; border-radius: 12px; border: 1px solid #e5e9ef; padding: 14px 16px; box-shadow: 0 1px 4px rgba(0,0,0,.06); cursor: pointer; }
.SRMCard:hover[b-jqatoxxl5m] { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(23,45,80,.14); }
.SRMCardTop[b-jqatoxxl5m] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.SRMCode[b-jqatoxxl5m] { font-size: 14px; font-weight: 800; color: #1e293b; }
.SRMStatus[b-jqatoxxl5m] { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 20px; }
.SRMCardMid[b-jqatoxxl5m] { display: flex; justify-content: space-between; font-size: 12.5px; color: #475569; margin-bottom: 8px; }
.SRMDate[b-jqatoxxl5m] { color: #94a3b8; }
.SRMCardBot[b-jqatoxxl5m] { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #e5e9ef; padding-top: 8px; font-size: 12.5px; color: #64748b; }
.SRMCardBot b[b-jqatoxxl5m] { font-size: 16px; color: #1d4ed8; }
/* /Components/Pages/BackEnd/Theme/Componant/ThemeBlockCard.razor.rz.scp.css */
/* ThemeBlockCard — ธีมหลักใช้ st-* จาก wwwroot/css/minesettings.css */
.tbc-actions[b-5f8l9pz91y] { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.tbc-preview[b-5f8l9pz91y] {
    margin: 14px 20px; padding: 16px 18px; border: 1px dashed #d5dce5; border-radius: 10px;
    background: #fff; max-height: 520px; overflow: auto;
}
.tbc-empty[b-5f8l9pz91y] {
    margin: 14px 20px; padding: 32px 18px; border: 2px dashed #d7dbe2; border-radius: 12px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 6px; color: #64748b;
}
.tbc-empty-ic[b-5f8l9pz91y] { font-size: 28px; }
.tbc-empty-t[b-5f8l9pz91y] { font-weight: 700; color: #293649; }
.tbc-empty-d[b-5f8l9pz91y] { font-size: 12.5px; max-width: 460px; margin-bottom: 8px; line-height: 1.6; }
.tbc-meta[b-5f8l9pz91y] { padding: 8px 20px 12px; font-size: 11.5px; color: #94a3b8; border-top: 1px solid #f0f2f5; }
.tbc-meta:empty[b-5f8l9pz91y] { display: none; }

@media (max-width: 640px) {
    .tbc-preview[b-5f8l9pz91y], .tbc-empty[b-5f8l9pz91y] { margin: 12px; }
    .tbc-meta[b-5f8l9pz91y] { padding: 8px 12px 12px; }
}
/* /Components/Pages/BackEnd/Theme/Componant/WebsiteComponant/ImageSlider.razor.rz.scp.css */
.slider-container[b-a6ypsz760g] {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: auto;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.slider-image[b-a6ypsz760g] {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}

.fade-in[b-a6ypsz760g] {
    opacity: 1;
}

.fade-out[b-a6ypsz760g] {
    opacity: 0;
}

.dot-container[b-a6ypsz760g] {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.dot[b-a6ypsz760g] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .dot.active[b-a6ypsz760g] {
        background-color: white;
    }
/* /Components/Pages/BackEnd/Theme/Componant/WebsiteComponant/TextSlider.razor.rz.scp.css */
.text-slider-container[b-nzmileh4aq] {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-slider[b-nzmileh4aq] {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    transition: transform 0.5s ease, opacity 0.5s ease;

}

.slide-in[b-nzmileh4aq] {
    transform: translateY(0);
    opacity: 1;
}

.slide-out[b-nzmileh4aq] {
    transform: translateY(-100%);
    opacity: 0;
}
/* /Components/Pages/BackEnd/Theme/Componant/WebsiteDesignRender.razor.rz.scp.css */
.NotHoverInTree[b-57e4yq656b] {
    border: solid 1px black;
}

.HoverInTree[b-57e4yq656b] {
    border: solid 1px red;
    /*animation: HoverInTreeAnime 1s infinite;*/
}

@keyframes HoverInTreeAnime-b-57e4yq656b {
    0% {
        border: solid 1px black;
    }

    50% {
        border: solid 1px black;
    }

    100% {
        border: solid 1px black;
    }
}

/* width */
[b-57e4yq656b]::-webkit-scrollbar {
    height: 2px;
    display: none;
}

/* Track */
[b-57e4yq656b]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
[b-57e4yq656b]::-webkit-scrollbar-thumb {
    background: #888;
}

    /* Handle on hover */
    [b-57e4yq656b]::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
/* /Components/Pages/BackEnd/Theme/Componant/WebsiteDesignRenderTree.razor.rz.scp.css */
.BaseCSSBox[b-329phemqbb] {
    border-radius: 7px;
    padding: 5px 0px;
    width: 80%;
    text-align: center;
    cursor: pointer;
    position: relative;
}

    .BaseCSSBox .TextInput[b-329phemqbb] {
        width: 100%;
        padding-left: 10px;
        border-radius: 5px;
        box-shadow: none;
        outline: none;
        border: none;
    }

.SelectedComponantCSS[b-329phemqbb] {
    position: absolute;
    transform: translate(-50%,-50%);
    top: 60%;
    left: 15%;
    color: green;
}

.AnimationLeft[b-329phemqbb] {
    animation: AnimationInLeft-b-329phemqbb forwards 0.5s;
}

.AnimationRight[b-329phemqbb] {
    animation: AnimationInRight forwards 0.5s;
}

.AnimationLeftMiddle[b-329phemqbb] {
    animation: AnimationLeftMiddle-b-329phemqbb forwards 0.5s;
}

@keyframes AnimationInLeft-b-329phemqbb {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes AnimationLeftMiddle-b-329phemqbb {
    from {
        opacity: 0;
        transform: translate(-20px,-50%);
    }

    to {
        opacity: 1;
        transform: translate(-50%,-50%);
    }
}
/* /Components/Pages/BackEnd/Theme/Componant/WebsiteOptionComponant/WebsiteDesignColorOption.razor.rz.scp.css */
.OptionSelectTypeEnum[b-1k764hmckg] {
    width: 80%;
    text-align: center;
}

.AddComponantButton[b-1k764hmckg] {
    border-radius: 7px;
    padding: 5px 0px;
    width: 80%;
    text-align: center;
    cursor: pointer;
}
/* /Components/Pages/BackEnd/Theme/Componant/WebsiteOptionComponant/WebsiteDesignEnumOption.razor.rz.scp.css */
.OptionSelectTypeEnum[b-rdpci26xka] {
    width: 80%;
    text-align: center;
}
/* /Components/Pages/BackEnd/Theme/Componant/WebsiteOptionComponant/WebsiteDesignListStringOption.razor.rz.scp.css */
body[b-2uftsi2y8y] {
}
/* /Components/Pages/BackEnd/Theme/Componant/WebsiteOptionComponant/WebsiteDesignNumberOption.razor.rz.scp.css */
.OptionSelectTypeEnum[b-892jsiib5x] {
    width: 80%;
    text-align: center;
}
/* /Components/Pages/BackEnd/Theme/Componant/WebsiteOptionMainComponant/WebsiteDesignLinkType.razor.rz.scp.css */
.OptionSelectTypeEnum[b-82gryrv78k] {
    width: 80%;
    text-align: center;
}
/* /Components/Pages/BackEnd/Theme/FooterDesign.razor.rz.scp.css */
/* [2026-10] Footer ใช้ <ThemeBlockCard> + <MineBlockDesigner> — ธีมหลักใช้ st-* จาก wwwroot/css/minesettings.css (ไม่มี style เฉพาะหน้า) */
/* /Components/Pages/BackEnd/Theme/LoginPageSetting.razor.rz.scp.css */
/* หน้า Login — ธีมหลักใช้ st-* จาก wwwroot/css/minesettings.css ; ไฟล์นี้มีเฉพาะส่วนตัวอย่างภาพพื้นหลัง */
.lp-grid[b-ao7dkkplqh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 24px;
    align-items: start;
}

.lp-file[b-ao7dkkplqh] {
    font-family: 'IBM Plex Mono', Consolas, monospace;
    font-size: 11.5px;
    word-break: break-all;
}

.lp-previewcol[b-ao7dkkplqh] {
    padding: 13px 0 16px;
    min-width: 0;
}

.lp-previewlabel[b-ao7dkkplqh] {
    font-size: 12.5px;
    color: #6b7684;
    margin-bottom: 8px;
}

.lp-stage[b-ao7dkkplqh] {
    display: flex;
    justify-content: center;
    background: #eef1f5;
    border-radius: 12px;
    padding: 14px;
}

.lp-preview[b-ao7dkkplqh] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 380px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #1c2530;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
    transition: width .2s ease, aspect-ratio .2s ease;
}

    .lp-preview.tablet[b-ao7dkkplqh] {
        width: 62%;
        aspect-ratio: 4 / 3;
    }

    .lp-preview.mobile[b-ao7dkkplqh] {
        width: 190px;
        aspect-ratio: 9 / 16;
    }

.lp-overlay[b-ao7dkkplqh] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .16);
}

.lp-mock[b-ao7dkkplqh] {
    width: min(46%, 220px);
    min-width: 120px;
    padding: 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .86);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lp-mock-title[b-ao7dkkplqh] {
    height: 10px;
    width: 55%;
    border-radius: 6px;
    background: #9aa5b3;
}

.lp-mock-line[b-ao7dkkplqh] {
    height: 16px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #d5dce5;
}

.lp-mock-btn[b-ao7dkkplqh] {
    height: 16px;
    border-radius: 5px;
    background: #0B7A75;
}

.lp-emptybox[b-ao7dkkplqh] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #fff;
}

@media (max-width: 1000px) {
    .lp-grid[b-ao7dkkplqh] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}
/* /Components/Pages/BackEnd/Theme/ThemeSetting.razor.rz.scp.css */
.MainPage[b-qyqlq8w220] {
    padding: 15px;
}

.SaveThemeButton[b-qyqlq8w220] {
    margin-top: 10px;
    background: rgb(33, 109, 0);
    width: fit-content;
    color: white;
    padding: 5px 20px;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}
/* /Components/Pages/BackEnd/Theme/WebPagesSetting.razor.rz.scp.css */
/* หน้าเว็บ — ธีมหลักใช้ st-* จาก wwwroot/css/minesettings.css ; ไฟล์นี้มีเฉพาะแถบหน้าที่กำลังแก้ไข + modal จัดการหน้าเพจ */
.wp-current[b-d79hbumr0m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f4f8fb;
    border: 1px solid #e1e9f1;
}

.wp-current-main[b-d79hbumr0m] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.wp-current-k[b-d79hbumr0m] {
    font-size: 12px;
    color: #6b7684;
}

.wp-current-name[b-d79hbumr0m] {
    font-size: 14px;
    font-weight: 600;
}

.wp-current-actions[b-d79hbumr0m] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.wp-url[b-d79hbumr0m] {
    font-family: 'IBM Plex Mono', Consolas, monospace;
    font-size: 12px;
    color: #0B7A75;
    word-break: break-all;
}

/* ---------- modal ---------- */
.wp-modal[b-d79hbumr0m] {
    width: min(620px, 100%);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
}

    .wp-modal .st-modal-body[b-d79hbumr0m] {
        overflow-y: auto;
    }

.wp-field[b-d79hbumr0m] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

    .wp-field label[b-d79hbumr0m] {
        font-size: 12.5px;
        font-weight: 600;
        color: #1c2530;
    }

.wp-hint[b-d79hbumr0m] {
    font-size: 12px;
    color: #6b7684;
}

.wp-list[b-d79hbumr0m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wp-order[b-d79hbumr0m] {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

    .wp-order .st-btn[b-d79hbumr0m] {
        padding: 0 8px;
        font-size: 10px;
    }
/* /Components/Pages/BackEnd/Theme/WebsiteDesign.razor.rz.scp.css */
.MainGrid[b-0eemc7jpc5] {
    display: grid;
    height: 100%;
    grid-template-areas:
        "MainTree MainShow MainOption";
    grid-template-columns: 300px 1fr 300px;
    transition: 0.2s;
}

    .MainGrid .MainTree[b-0eemc7jpc5] {
        grid-area: MainTree;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-x: hidden;
    }

    .MainGrid .MainShow[b-0eemc7jpc5] {
        grid-area: MainShow;
        display: flex;
        justify-content: center;
    }

    .MainGrid .MainOption[b-0eemc7jpc5] {
        grid-area: MainOption;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-x: scroll;
    }

.BaseCSSBox[b-0eemc7jpc5] {
    border-radius: 7px;
    padding: 5px 0px;
    width: 80%;
    text-align: center;
    cursor: pointer;
    position: relative;
}

    .BaseCSSBox .TextInput[b-0eemc7jpc5]{
        width: 100%;
        padding-left: 10px;
        border-radius: 5px;
        box-shadow: none;
        outline: none;
        border: none;
    }

    .AddComponantButton[b-0eemc7jpc5] {
        border-radius: 7px;
        padding: 5px 0px;
        width: 80%;
        text-align: center;
        cursor: pointer;
    }

.OptionSelectTypeEnum[b-0eemc7jpc5] {
    width: 80%;
    text-align: center;
}

.SelectedComponantCSS[b-0eemc7jpc5] {
    position: absolute;
    transform: translate(-50%,-50%);
    top: 60%;
    left: 15%;
    color: green;
}

.AnimationLeft[b-0eemc7jpc5] {
    width: 100%;
    animation: AnimationInRight-b-0eemc7jpc5 forwards 0.5s;
}

.AnimationRight[b-0eemc7jpc5] {
    width: 100%;
    animation: AnimationInRight-b-0eemc7jpc5 forwards 0.5s;
}

.SelectWebsiteZone[b-0eemc7jpc5] {
    flex: 1;
    overflow: auto;
}

@keyframes AnimationInRight-b-0eemc7jpc5 {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* /Components/Pages/BackEnd/Theme/WebsiteDetail.razor.rz.scp.css */
/* ข้อมูลเว็บไซต์ — ธีมหลักใช้ st-* จาก wwwroot/css/minesettings.css ; ไฟล์นี้มีเฉพาะส่วนตัวอย่าง/ช่องเลือกสี/รูปภาพ */
.wd-split[b-2npzwcjcdq] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.wd-previewcol[b-2npzwcjcdq] {
    padding: 13px 0 16px;
    min-width: 0;
}

.wd-previewlabel[b-2npzwcjcdq] {
    font-size: 12.5px;
    color: #6b7684;
    margin-bottom: 8px;
}

.wd-inline[b-2npzwcjcdq] {
    display: flex;
    gap: 8px;
}

    .wd-inline .st-input[b-2npzwcjcdq] {
        flex: 1 1 auto;
        min-width: 0;
    }

.wd-rowhead[b-2npzwcjcdq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* ---------- ตัวอย่างผลการค้นหา ---------- */
.wd-serp[b-2npzwcjcdq] {
    border: 1px solid #e4e8ef;
    border-radius: 12px;
    background: #fff;
    padding: 14px 16px;
    font-family: Arial, 'Sarabun', sans-serif;
}

.wd-serp-site[b-2npzwcjcdq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #4d5156;
    word-break: break-all;
}

    .wd-serp-site img[b-2npzwcjcdq], .wd-serp-noicon[b-2npzwcjcdq] {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        flex: 0 0 auto;
        background: #eef1f5;
    }

.wd-serp-title[b-2npzwcjcdq] {
    margin-top: 6px;
    font-size: 19px;
    line-height: 1.3;
    color: #1a0dab;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wd-serp-desc[b-2npzwcjcdq] {
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #4d5156;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- ตัวอย่างการ์ดแชร์ลิงก์ ---------- */
.wd-og[b-2npzwcjcdq] {
    border: 1px solid #e4e8ef;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f3f6;
    max-width: 420px;
}

.wd-og-img[b-2npzwcjcdq] {
    aspect-ratio: 1.91 / 1;
    background-color: #dfe4ea;
    background-size: cover;
    background-position: center;
}

.wd-og-noimg[b-2npzwcjcdq] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    color: #8a94a3;
}

.wd-og-text[b-2npzwcjcdq] {
    padding: 10px 12px 12px;
}

.wd-og-domain[b-2npzwcjcdq] {
    font-size: 11.5px;
    color: #6b7684;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wd-og-title[b-2npzwcjcdq] {
    font-size: 15px;
    font-weight: 600;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wd-og-desc[b-2npzwcjcdq] {
    font-size: 12.5px;
    color: #6b7684;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Logo / ไอคอน ---------- */
.wd-iconbox[b-2npzwcjcdq] {
    width: 44px;
    height: 44px;
    border: 1px solid #e4e8ef;
    border-radius: 10px;
    background: #fafbfc;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .wd-iconbox img[b-2npzwcjcdq] {
        width: 32px;
        height: 32px;
    }

.wd-logobox[b-2npzwcjcdq] {
    min-height: 90px;
    padding: 16px;
    border: 1px dashed #d5dce5;
    border-radius: 10px;
    /* ลายตารางให้เห็นโลโก้พื้นโปร่งใส */
    background-color: #fff;
    background-image: linear-gradient(45deg, #f1f3f6 25%, transparent 25%), linear-gradient(-45deg, #f1f3f6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f1f3f6 75%), linear-gradient(-45deg, transparent 75%, #f1f3f6 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    color: #8a94a3;
}

    .wd-logobox img[b-2npzwcjcdq] {
        max-width: 100%;
    }

/* ---------- สี ---------- */
.wd-color[b-2npzwcjcdq] {
    width: 44px;
    height: 36px;
    padding: 2px;
    border: 1px solid #e4e8ef;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

.wd-hex[b-2npzwcjcdq] {
    width: 104px;
    text-transform: uppercase;
}

.wd-swatch[b-2npzwcjcdq] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px;
    border: 1px solid #e4e8ef;
    border-radius: 10px;
}

.wd-swatch-btn[b-2npzwcjcdq] {
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
}

.wd-swatch-ribbon[b-2npzwcjcdq] {
    width: 90px;
    height: 10px;
    border-radius: 6px;
}

.wd-swatch-user[b-2npzwcjcdq] {
    font-size: 13.5px;
    font-weight: 600;
}

/* ---------- ภาพพื้นหลัง ---------- */
.wd-bgthumb[b-2npzwcjcdq] {
    width: 76px;
    height: 44px;
    border: 1px solid #e4e8ef;
    border-radius: 8px;
    background-color: #eef1f5;
    background-size: cover;
    background-position: center;
}

.wd-previewscroll[b-2npzwcjcdq] {
    overflow-x: auto;
    border: 1px solid #e4e8ef;
    border-radius: 10px;
    background: #fff;
}

/* ตัวอย่างหน้าร้าน — คืนค่าตัวอักษรของ body ไม่ให้รับฟอนต์/สีจากธีม st-* ของหลังบ้าน */
.wd-previewframe[b-2npzwcjcdq] {
    font-family: var(--bs-body-font-family, sans-serif);
    font-size: var(--bs-body-font-size, 1rem);
    line-height: var(--bs-body-line-height, 1.5);
    color: var(--bs-body-color, #212529);
}

@media (max-width: 1000px) {
    .wd-split[b-2npzwcjcdq] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

@media (max-width: 640px) {
    .wd-inline[b-2npzwcjcdq], .wd-rowhead[b-2npzwcjcdq] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/BackEnd/Users/AddUser.razor.rz.scp.css */
.MainAddProduct[b-b2fmhreuwd] {
    padding: 15px;
    background: #f0f0f1;
    min-height: 100%;
}

.HeadMenuName[b-b2fmhreuwd] {
    font-size: 24px;
    margin-bottom: 10px;
}

.DetailMenuName[b-b2fmhreuwd] {
    font-size: 14px;
    margin-bottom: 30px;
}

.DivInputZonePerRow[b-b2fmhreuwd] {
    display: flex;
    align-items: center;
    height: 35px;
    margin-top: 30px;
    transition: 0.2s;
}

    .DivInputZonePerRow .DivLabel[b-b2fmhreuwd] {
        width: 250px;
        min-width: 250px;
        max-width: 250px;
    }

    .DivInputZonePerRow .DivInput[b-b2fmhreuwd] {
        width: 500px;
        height: 100%;
    }

        .DivInputZonePerRow .DivInput input[b-b2fmhreuwd] {
            width: 100%;
            height: 100%;
            padding-left: 7px;
        }

        .DivInputZonePerRow .DivInput select[b-b2fmhreuwd] {
            width: 150px;
            height: 100%;
            padding-left: 7px;
        }

.DivSummitButton[b-b2fmhreuwd] {
    margin-top: 30px;
    background: #135e96;
    color: white;
    width: fit-content;
    font-size: 13px;
    padding: 5px 15px 5px 15px;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}

@media (max-width: 768px) {
    .DivInputZonePerRow[b-b2fmhreuwd] {
        display: block;
    }

        .DivInputZonePerRow .DivLabel[b-b2fmhreuwd] {
            width: 250px;
            min-width: 250px;
            max-width: 250px;
        }

        .DivInputZonePerRow .DivInput[b-b2fmhreuwd] {
            width: 100%;
            height: 100%;
        }

            .DivInputZonePerRow .DivInput input[b-b2fmhreuwd] {
                width: 100%;
                height: 100%;
                padding-left: 7px;
            }

    .DivSummitButton[b-b2fmhreuwd]{
        margin-top: 40px;
    }
}
/* /Components/Pages/BackEnd/Users/EditUser.razor.rz.scp.css */
.ButtonBack[b-cmhx5ytdci] {
    margin: 20px;
    background: #1d2327;
    width: fit-content;
    padding: 5px 20px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}
/* /Components/Pages/BackEnd/Users/UserPermissions.razor.rz.scp.css */
/* ===== UserPermissions — prefix up-* (teal theme เดียวกับหน้า pl-* / cd-*) ===== */
.up-wrap[b-a014fymrmx] {
    --up-teal: #0B7A75;
    --up-teal-2: #0f9a93;
    --up-teal-soft: #e7f5f4;
    --up-ink: #1c2530;
    --up-mute: #6b7684;
    --up-line: #e4e8ef;
    --up-bg: #f4f6f9;
    --up-warn: #b45309;
    --up-warn-soft: #fff6e8;
    font-family: 'IBM Plex Sans Thai', 'Sarabun', sans-serif;
    color: var(--up-ink);
    background: var(--up-bg);
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 100%;
    padding: 18px 20px 40px;
    box-sizing: border-box;
}

/* ---------- top bar ---------- */
.up-topbar[b-a014fymrmx] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.up-crumb[b-a014fymrmx] {
    display: flex;
    gap: 6px;
    font-size: 12px;
    color: var(--up-mute);
}

.up-title[b-a014fymrmx] {
    margin: 2px 0 0;
    font-size: 24px;
    font-weight: 700;
}

.up-subtitle[b-a014fymrmx] {
    font-size: 13px;
    color: var(--up-mute);
    margin-top: 2px;
}

.up-viewswitch[b-a014fymrmx] {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--up-line);
    border-radius: 10px;
    padding: 3px;
}

    .up-viewswitch button[b-a014fymrmx] {
        border: 0;
        background: transparent;
        padding: 7px 14px;
        border-radius: 8px;
        font: inherit;
        font-size: 13px;
        color: var(--up-mute);
        cursor: pointer;
    }

        .up-viewswitch button.active[b-a014fymrmx] {
            background: var(--up-teal);
            color: #fff;
            font-weight: 600;
        }

/* ---------- toolbar ---------- */
.up-toolbar[b-a014fymrmx] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.up-search[b-a014fymrmx] {
    position: relative;
    flex: 1 1 320px;
    max-width: 520px;
}

    .up-search input[b-a014fymrmx] {
        width: 100%;
        box-sizing: border-box;
        height: 38px;
        padding: 0 34px 0 34px;
        border: 1px solid var(--up-line);
        border-radius: 10px;
        background: #fff;
        font: inherit;
        font-size: 13.5px;
        outline: none;
    }

        .up-search input:focus[b-a014fymrmx] {
            border-color: var(--up-teal);
            box-shadow: 0 0 0 3px rgba(11, 122, 117, .12);
        }

.up-search-icon[b-a014fymrmx] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--up-mute);
    font-size: 16px;
}

.up-search-clear[b-a014fymrmx] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--up-mute);
    cursor: pointer;
}

.up-chips[b-a014fymrmx] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.up-chip[b-a014fymrmx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--up-line);
    background: #fff;
    font: inherit;
    font-size: 12.5px;
    color: var(--up-mute);
    cursor: pointer;
}

    .up-chip.active[b-a014fymrmx] {
        border-color: var(--up-teal);
        background: var(--up-teal-soft);
        color: var(--up-teal);
        font-weight: 600;
    }

.up-chip-badge[b-a014fymrmx] {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--up-warn);
    color: #fff;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- layout ---------- */
.up-layout[b-a014fymrmx] {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* ---------- rail ---------- */
.up-rail[b-a014fymrmx] {
    position: sticky;
    top: 60px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding-right: 2px;
}

.up-rail-head[b-a014fymrmx] {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--up-mute);
    padding: 2px 4px;
}

.up-gcard[b-a014fymrmx] {
    text-align: left;
    border: 1px solid var(--up-line);
    background: #fff;
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

    .up-gcard:hover[b-a014fymrmx] {
        border-color: #c9d3de;
    }

    .up-gcard.active[b-a014fymrmx] {
        border-color: var(--up-teal);
        box-shadow: 0 0 0 3px rgba(11, 122, 117, .12);
    }

.up-gcard-top[b-a014fymrmx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.up-gcard-avatar[b-a014fymrmx] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--up-teal-soft);
    color: var(--up-teal);
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

    .up-gcard-avatar.admin[b-a014fymrmx] {
        background: #1c2530;
        color: #fff;
    }

.up-gcard-name[b-a014fymrmx] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.up-gcard-lock[b-a014fymrmx] {
    font-size: 12px;
}

.up-gcard-warn[b-a014fymrmx] {
    font-size: 11px;
    font-weight: 600;
    color: var(--up-warn);
    background: var(--up-warn-soft);
    border-radius: 6px;
    padding: 1px 6px;
}

.up-gcard-meta[b-a014fymrmx] {
    font-size: 12px;
    color: var(--up-mute);
    margin: 6px 0 6px 36px;
}

.up-bar[b-a014fymrmx] {
    height: 4px;
    border-radius: 4px;
    background: #eef1f5;
    margin-left: 36px;
    overflow: hidden;
}

    .up-bar span[b-a014fymrmx] {
        display: block;
        height: 100%;
        background: var(--up-teal);
        border-radius: 4px;
    }

.up-rail-note[b-a014fymrmx] {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--up-warn-soft);
    border: 1px solid #f6d9a8;
    font-size: 12.5px;
    color: #7a4800;
}

/* ---------- main ---------- */
.up-main[b-a014fymrmx] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.up-ghead[b-a014fymrmx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--up-line);
    border-radius: 14px;
    padding: 16px 18px;
}

.up-gname[b-a014fymrmx] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.up-gdesc[b-a014fymrmx] {
    font-size: 13px;
    color: var(--up-mute);
    margin-top: 4px;
}

.up-ghead-actions[b-a014fymrmx] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.up-copyfrom[b-a014fymrmx] {
    display: flex;
    gap: 6px;
}

.up-rename[b-a014fymrmx] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.up-error[b-a014fymrmx] {
    color: #c2410c;
    font-size: 12.5px;
    margin-top: 6px;
}

.up-input[b-a014fymrmx], .up-select[b-a014fymrmx] {
    height: 34px;
    border: 1px solid var(--up-line);
    border-radius: 8px;
    padding: 0 10px;
    font: inherit;
    font-size: 13.5px;
    background: #fff;
    outline: none;
}

    .up-input:focus[b-a014fymrmx], .up-select:focus[b-a014fymrmx] {
        border-color: var(--up-teal);
        box-shadow: 0 0 0 3px rgba(11, 122, 117, .12);
    }

.up-input[b-a014fymrmx] {
    min-width: 220px;
    font-size: 15px;
}

.up-btn[b-a014fymrmx] {
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--up-line);
    background: #fff;
    font: inherit;
    font-size: 13px;
    color: var(--up-ink);
    cursor: pointer;
    white-space: nowrap;
}

    .up-btn:hover:not(:disabled)[b-a014fymrmx] {
        border-color: #c9d3de;
    }

    .up-btn:disabled[b-a014fymrmx] {
        opacity: .5;
        cursor: not-allowed;
    }

.up-btn-sm[b-a014fymrmx] {
    height: 32px;
    padding: 0 12px;
}

.up-btn-primary[b-a014fymrmx] {
    background: var(--up-teal);
    border-color: var(--up-teal);
    color: #fff;
}

.up-btn-danger[b-a014fymrmx] {
    color: #b42318;
}

.up-iconbtn[b-a014fymrmx] {
    border: 0;
    background: transparent;
    color: var(--up-mute);
    font-size: 15px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}

    .up-iconbtn:hover[b-a014fymrmx] {
        background: #eef1f5;
        color: var(--up-teal);
    }

.up-linkbtn[b-a014fymrmx] {
    border: 0;
    background: transparent;
    color: var(--up-teal);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}

    .up-linkbtn:hover[b-a014fymrmx] {
        text-decoration: underline;
    }

/* members */
.up-members[b-a014fymrmx] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--up-line);
    border-radius: 12px;
    padding: 10px 14px;
}

.up-members-label[b-a014fymrmx] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--up-mute);
}

.up-members-empty[b-a014fymrmx] {
    font-size: 12.5px;
    color: var(--up-mute);
}

.up-memberchips[b-a014fymrmx] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.up-member[b-a014fymrmx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--up-line);
    background: #f8fafc;
    font: inherit;
    font-size: 12.5px;
    color: var(--up-ink);
    cursor: pointer;
}

    .up-member:hover[b-a014fymrmx] {
        border-color: var(--up-teal);
        color: var(--up-teal);
    }

.up-member-dot[b-a014fymrmx] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
}

.up-member.inactive[b-a014fymrmx] {
    color: var(--up-mute);
}

    .up-member.inactive .up-member-dot[b-a014fymrmx] {
        background: #cbd5e1;
    }

/* sections */
.up-sec[b-a014fymrmx] {
    background: #fff;
    border: 1px solid var(--up-line);
    border-radius: 14px;
    overflow: hidden;
}

.up-sec-head[b-a014fymrmx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    background: #fbfcfd;
    border-bottom: 1px solid var(--up-line);
}

.up-sec-caret[b-a014fymrmx] {
    display: inline-block;
    color: var(--up-mute);
    transition: transform .15s;
    font-size: 16px;
    width: 12px;
}

    .up-sec-caret.open[b-a014fymrmx] {
        transform: rotate(90deg);
    }

.up-sec-title[b-a014fymrmx] {
    font-weight: 600;
    font-size: 14.5px;
}

.up-sec-count[b-a014fymrmx] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef1f5;
    color: var(--up-mute);
}

    .up-sec-count.full[b-a014fymrmx] {
        background: var(--up-teal-soft);
        color: var(--up-teal);
    }

.up-flex[b-a014fymrmx] {
    flex: 1 1 auto;
}

.up-row[b-a014fymrmx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    border-top: 1px solid #f1f3f6;
}

    .up-row:first-child[b-a014fymrmx] {
        border-top: 0;
    }

    .up-row:hover[b-a014fymrmx] {
        background: #fafbfc;
    }

    .up-row.child.d1[b-a014fymrmx] {
        padding-left: 36px;
    }

    .up-row.child.d2[b-a014fymrmx] {
        padding-left: 56px;
    }

    .up-row.child .up-row-label[b-a014fymrmx]::before {
        content: "↳ ";
        color: #b8c1cc;
    }

    .up-row.warn[b-a014fymrmx] {
        background: var(--up-warn-soft);
    }

.up-row-text[b-a014fymrmx] {
    min-width: 0;
}

.up-row-label[b-a014fymrmx] {
    font-size: 14px;
}

.up-row-code[b-a014fymrmx] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: #9aa4b1;
    margin-top: 1px;
    word-break: break-all;
}

.up-row-warn[b-a014fymrmx] {
    font-size: 12px;
    color: var(--up-warn);
    margin-top: 4px;
}

.up-empty[b-a014fymrmx] {
    background: #fff;
    border: 1px dashed var(--up-line);
    border-radius: 14px;
    padding: 40px 16px;
    text-align: center;
    color: var(--up-mute);
}

/* ---------- matrix ---------- */
.up-matrixwrap[b-a014fymrmx] {
    background: #fff;
    border: 1px solid var(--up-line);
    border-radius: 14px;
    overflow: auto;
    max-height: calc(100vh - 190px);
}

.up-matrix[b-a014fymrmx] {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 13px;
}

    .up-matrix th[b-a014fymrmx] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fbfcfd;
        border-bottom: 1px solid var(--up-line);
        padding: 10px 8px;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
    }

.up-mx-name[b-a014fymrmx] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    text-align: left !important;
    min-width: 280px;
    padding: 8px 14px !important;
    border-right: 1px solid var(--up-line);
}

.up-matrix th.up-mx-name[b-a014fymrmx] {
    z-index: 3;
    background: #fbfcfd;
}

.up-mx-col[b-a014fymrmx] {
    min-width: 84px;
}

    .up-mx-col.admin[b-a014fymrmx] {
        color: #fff;
        background: #1c2530 !important;
    }

.up-mx-gname[b-a014fymrmx] {
    font-size: 12.5px;
}

.up-mx-gsub[b-a014fymrmx] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    color: var(--up-mute);
    font-weight: 400;
}

.up-matrix td[b-a014fymrmx] {
    border-bottom: 1px solid #f1f3f6;
}

.up-matrix tr:hover td[b-a014fymrmx] {
    background: #fafbfc;
}

.up-mx-sec td[b-a014fymrmx] {
    background: var(--up-teal-soft) !important;
    color: var(--up-teal);
    font-weight: 700;
    padding: 8px 14px;
    position: sticky;
    left: 0;
}

.up-mx-label.child.d1[b-a014fymrmx] {
    padding-left: 18px;
}

.up-mx-label.child.d2[b-a014fymrmx] {
    padding-left: 34px;
}

.up-mx-label.child[b-a014fymrmx]::before {
    content: "↳ ";
    color: #b8c1cc;
}

.up-mx-cell[b-a014fymrmx] {
    text-align: center;
    padding: 6px;
}

    .up-mx-cell.admin[b-a014fymrmx] {
        background: #f6f7f9;
    }

.up-check[b-a014fymrmx] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

    .up-check.on[b-a014fymrmx] {
        background: var(--up-teal);
        border-color: var(--up-teal);
    }

    .up-check.warn[b-a014fymrmx] {
        background: #f59e0b;
        border-color: #f59e0b;
    }

    .up-check.locked[b-a014fymrmx] {
        background: #64748b;
        border-color: #64748b;
        cursor: default;
    }

/* ---------- toast ---------- */
.up-toast[b-a014fymrmx] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 50;
    display: flex;
    gap: 8px;
    align-items: center;
    background: #1c2530;
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-family: 'IBM Plex Sans Thai', sans-serif;
    font-size: 13.5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

    .up-toast span:first-child[b-a014fymrmx] {
        color: #5eead4;
        font-weight: 700;
    }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
    .up-layout[b-a014fymrmx] {
        grid-template-columns: minmax(0, 1fr);
    }

    .up-rail[b-a014fymrmx] {
        position: static;
        max-height: none;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .up-rail-head[b-a014fymrmx], .up-rail-note[b-a014fymrmx] {
        display: none;
    }

    .up-gcard[b-a014fymrmx] {
        flex: 0 0 200px;
    }
}

@media (max-width: 600px) {
    .up-wrap[b-a014fymrmx] {
        padding: 14px 12px 32px;
    }

    .up-ghead-actions[b-a014fymrmx], .up-copyfrom[b-a014fymrmx] {
        width: 100%;
    }

        .up-copyfrom .up-select[b-a014fymrmx] {
            flex: 1 1 auto;
            min-width: 0;
        }

    .up-row.child.d1[b-a014fymrmx] {
        padding-left: 24px;
    }

    .up-row.child.d2[b-a014fymrmx] {
        padding-left: 36px;
    }

    .up-mx-name[b-a014fymrmx] {
        min-width: 180px;
    }

    .up-toast[b-a014fymrmx] {
        left: 12px;
        right: 12px;
    }
}
/* /Components/Pages/BackEnd/Venders/VenderDetail.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   VenderDetail.razor.css — รายละเอียดบริษัท (theme เดียวกับ ProductDetail.razor)
   ══════════════════════════════════════════════════════════════════════════════ */

.PD input[b-zzdvtb691h], .PD button[b-zzdvtb691h], .PD textarea[b-zzdvtb691h], .PD select[b-zzdvtb691h] {
    font-family: 'Mine_ThaiFont', 'IBM Plex Sans Thai', sans-serif;
}

.PDLoad[b-zzdvtb691h] { text-align: center; padding: 80px; color: #94a3b8; font-size: 15px; }

.PD[b-zzdvtb691h] {
    display: flex; flex-direction: column;
    max-width: 1100px; margin: 12px auto;
    background: #eceef2;
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 8px 30px rgba(15,23,42,.08);
    font-family: 'Mine_ThaiFont', 'IBM Plex Sans Thai', sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .005em;
}

/* ─────────── Header ─────────── */
.PDHeader[b-zzdvtb691h] {
    display: flex; align-items: center; gap: 12px;
    background: #12141a; color: #fff; padding: 10px 16px; flex-shrink: 0;
}
.PDBack[b-zzdvtb691h] {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
    border: 1px solid #2b2f3a; background: #1b1e26; color: #cdd3dd;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer;
}
.PDBack:hover[b-zzdvtb691h] { background: #262a34; color: #fff; }
.PDHeaderL[b-zzdvtb691h] { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.PDLogo[b-zzdvtb691h] {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    background: linear-gradient(135deg, #064542, #0B7A75); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px;
}
.PDHCrumb[b-zzdvtb691h] { font-size: 10.5px; color: #9aa3b2; }
.PDHTitle[b-zzdvtb691h] {
    font-size: 15px; font-weight: 800;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.PDHeaderR[b-zzdvtb691h] { display: flex; align-items: center; gap: 8px; }
.PDHBtn[b-zzdvtb691h] {
    padding: 7px 13px; border-radius: 8px; border: 1px solid #2b2f3a;
    background: #1b1e26; color: #cdd3dd; font-size: 12px; font-weight: 700; cursor: pointer;
}
.PDHBtn:hover[b-zzdvtb691h] { background: #262a34; color: #fff; }
.PDHBtn.Primary[b-zzdvtb691h] { background: #0B7A75; border-color: #0B7A75; color: #fff; }
.PDHBtn.Primary:hover[b-zzdvtb691h] { background: #095E5A; border-color: #095E5A; }

.PDAlert[b-zzdvtb691h] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 14px; font-size: 12.5px; font-weight: 600; flex-shrink: 0;
}
.PDAlert.Err[b-zzdvtb691h] { background: #fef2f2; color: #dc2626; }
.PDAlertX[b-zzdvtb691h] { cursor: pointer; font-size: 17px; }

/* ─────────── Body ─────────── */
.PDBody[b-zzdvtb691h] { display: flex; flex-direction: column; gap: 14px; padding: 14px; }

.PDCard[b-zzdvtb691h] {
    background: #fff; border-radius: 14px; border: 1px solid #edeff3;
    box-shadow: 0 1px 3px rgba(15,23,42,.05); overflow: hidden;
}
.PDCardHead[b-zzdvtb691h] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 15px; border-bottom: 1px solid #f1f3f7;
    font-size: 12.5px; font-weight: 800; color: #1e293b;
}
.PDCardBody[b-zzdvtb691h] { padding: 13px 15px; display: flex; flex-direction: column; gap: 11px; }

/* ─────────── Hero ─────────── */
.PDHero[b-zzdvtb691h] { display: flex; flex-wrap: wrap; gap: 18px; padding: 16px 18px; }
.PDHeroInfo[b-zzdvtb691h] { flex: 1 1 300px; min-width: 300px; display: flex; flex-direction: column; gap: 11px; }
.PDTagRow[b-zzdvtb691h] { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.PDCode[b-zzdvtb691h] {
    font-size: 11px; font-weight: 700; color: #475569;
    background: #f6f7f9; border: 1px solid #e7ebf1; padding: 4px 9px; border-radius: 6px;
    font-family: 'IBM Plex Split', 'IBM Plex Sans Thai', sans-serif;
}

/* ─────────── Tabs ─────────── */
.PDTabs[b-zzdvtb691h] {
    display: flex; gap: 2px; padding: 0 16px; overflow-x: auto;
    background: #fafbfc; border-top: 1px solid #f1f3f7;
}
.PDTab[b-zzdvtb691h] {
    padding: 12px 15px; font-size: 12.5px; font-weight: 600; color: #64748b;
    cursor: pointer; white-space: nowrap;
    border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: transparent;
}
.PDTab:hover[b-zzdvtb691h] { color: #1e293b; }
.PDTab.On[b-zzdvtb691h] { color: #1e293b; font-weight: 800; border-bottom-color: #0B7A75; background: #fff; }

/* ─────────── Fields ─────────── */
.PDFieldGrid[b-zzdvtb691h] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 760px) {
    .PDFieldGrid[b-zzdvtb691h] { grid-template-columns: 1fr; }
}
.PDField label[b-zzdvtb691h] { display: block; font-size: 10.5px; color: #94a3b8; margin-bottom: 3px; }
.PDModalInput[b-zzdvtb691h] {
    box-sizing: border-box; width: 100%; min-height: 36px;
    border: 1.5px solid #e3e6ea; border-radius: 8px; padding: 8px 11px;
    font-size: 12.5px; outline: none; background: #fbfcfd; color: #1e293b;
}
.PDModalInput:focus[b-zzdvtb691h] { border-color: #0B7A75; background: #fff; }

.PDShortDesc[b-zzdvtb691h] {
    border: 1px dashed #d7dbe2; border-radius: 10px; min-height: 110px;
    padding: 12px; font-size: 12px; color: #1e293b; background: #fbfcfd;
    box-sizing: border-box; width: 100%; resize: vertical; outline: none;
    font-family: 'Mine_ThaiFont', 'IBM Plex Sans Thai', sans-serif;
}
.PDShortDesc:focus[b-zzdvtb691h] { border-color: #0B7A75; border-style: solid; }

.PDStatusRow[b-zzdvtb691h] { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #94a3b8; }
.PDStatusRow b[b-zzdvtb691h] { color: #1e293b; text-align: right; font-weight: 800; }
.PDStatusRow b.Num[b-zzdvtb691h] { font-family: 'IBM Plex Split', sans-serif; }
.PDStatusRow b.Ok[b-zzdvtb691h] { color: #047857; }

/* ─────────── Toast ─────────── */
.PDToast[b-zzdvtb691h] {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 1400;
    background: #12141a; color: #fff; font-size: 12.5px; padding: 11px 18px; border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15,23,42,.3);
    display: flex; align-items: center; gap: 9px;
}
.PDToastTick[b-zzdvtb691h] {
    width: 15px; height: 15px; border-radius: 50%; background: #22c55e; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0;
}
/* /Components/Pages/FaceBookLoginPage/FaceBookLoginPage.razor.rz.scp.css */
/* /Components/Pages/FrontEnd/Alert_Popup/Popup_AlertAcceptOnly.razor.rz.scp.css */

.AlertModalMain[b-n109v3a137] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    transition: opacity 0.25s;
    z-index: -9;
}

.AlertModal[b-n109v3a137] {
    position: relative;
    width: 380px;
    max-width: 100%;
    background: white;
    border-radius: 20px;
    padding: 36px 28px 24px;
    font-size: 15px;
    line-height: 1.6;
    color: #293649;
    font-family: "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    box-shadow: 0 20px 45px -10px rgba(15,23,42,.35), 0 4px 12px rgba(15,23,42,.08);
    transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
    transform: scale(.92) translateY(12px);
}

.AlertModal[b-n109v3a137]::before {
    content: "!";
    width: 48px;
    height: 48px;
    min-height: 48px;
    border-radius: 50%;
    background: #FEF3C7;
    color: #D97706;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* รองรับข้อความหลายบรรทัด (\n) เช่น popup รวม validate ของ DataCustomer — ข้อความบรรทัดเดียวแสดงเหมือนเดิม */
.AlertModalText[b-n109v3a137] {
    white-space: pre-line;
}

.KnowAcceptButton[b-n109v3a137] {
    width: 100%;
    padding: 12px 0;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
    transition: filter .15s, transform .1s;
}

    .KnowAcceptButton:hover[b-n109v3a137] {
        filter: brightness(0.92);
    }

    .KnowAcceptButton:active[b-n109v3a137] {
        transform: scale(.98);
    }
/* /Components/Pages/FrontEnd/Alert_Popup/Popup_Purchase.razor.rz.scp.css */
.MainDivSuccess[b-t5p686khgh] {
    position: fixed;
    top: 0;
    right 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: 0.25s;
    cursor: pointer;
    background: rgba(0,0,0,.3);
}

.PopupZone[b-t5p686khgh] {
    width: 340px;
    height: 180px;
    background: rgba(0,0,0,.7);
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
}

.SuccessIcon[b-t5p686khgh] {
    width: 60px;
    height: 60px;
    background: #00bfa5;
    border-radius: 50%;
}

.MessageText[b-t5p686khgh] {
    margin-top: 20px;
    color: white;
}

    .SuccessIcon[b-t5p686khgh]::after {
        font-family: GoogleFont;
        content: "\e876";
        font-size: 55px;
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 200, 'opsz' 20;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
    }

@font-face {
    font-family: 'GoogleFont';
    font-style: normal;
    font-weight: 100 700;
    src: url('../fonts/google-font.woff2') format('woff2');
}
/* /Components/Pages/FrontEnd/Alert_Popup/Popup_Success.razor.rz.scp.css */
.MainDivSuccess[b-pwewyqtcu3] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000000;
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: 0.25s;
    user-select: none;
}

.InitCSS[b-pwewyqtcu3] {
    animation: OnBackdropFadeIn-b-pwewyqtcu3 0.2s forwards;
}

    .InitCSS .PopupZone[b-pwewyqtcu3] {
        animation: OninitShow-b-pwewyqtcu3 0.35s cubic-bezier(.34,1.56,.64,1) forwards;
    }

.UnInitCSS[b-pwewyqtcu3] {
    animation: OnBackdropFadeOut-b-pwewyqtcu3 0.3s forwards;
}

    .UnInitCSS .PopupZone[b-pwewyqtcu3] {
        animation: OnUninitShow-b-pwewyqtcu3 0.3s ease forwards;
    }

@keyframes OnBackdropFadeIn-b-pwewyqtcu3 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes OnBackdropFadeOut-b-pwewyqtcu3 {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes OninitShow-b-pwewyqtcu3 {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(.92);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes OnUninitShow-b-pwewyqtcu3 {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(16px) scale(.94);
    }
}

.PopupZone[b-pwewyqtcu3] {
    width: 320px;
    max-width: calc(100vw - 48px);
    background: #fff;
    padding: 36px 28px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    box-shadow: 0 20px 45px -10px rgba(15,23,42,.35), 0 4px 12px rgba(15,23,42,.08);
    font-family: "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, sans-serif;
    cursor: default;
}

.SuccessIcon[b-pwewyqtcu3] {
    width: 56px;
    height: 56px;
    background: #ECFDF5;
    border-radius: 50%;
    margin-bottom: 18px;
    flex-shrink: 0;
}

.MessageText[b-pwewyqtcu3] {
    color: #293649;
    text-align: center;
    word-wrap: break-word;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}

    .SuccessIcon[b-pwewyqtcu3]::after {
        font-family: GoogleFont;
        content: "\e876";
        font-size: 30px;
        font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 200, 'opsz' 20;
        color: #10B981;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
    }

.FailIcon[b-pwewyqtcu3] {
    width: 56px;
    height: 56px;
    background: #FEF2F2;
    border-radius: 50%;
    margin-bottom: 18px;
    flex-shrink: 0;
}

    .FailIcon[b-pwewyqtcu3]::after {
        font-family: GoogleFont;
        content: "\e5cd";
        font-size: 30px;
        font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 200, 'opsz' 20;
        color: #EF4444;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
    }

@font-face {
    font-family: 'GoogleFont';
    font-style: normal;
    font-weight: 100 700;
    src: url('../fonts/google-font.woff2') format('woff2');
}
/* /Components/Pages/FrontEnd/Blogs/Blogs.razor.rz.scp.css */
/* =====================================================
   BLOGS (หน้าร้าน) [2026-10] · โทนเดียวกับ ProductList.razor.css
   palette: navy #293649 · blue #3b82f6 · pale #eff6ff · line #e5e9ef · gray #6b7280
   ปุ่มแบบ soft-fill (พื้นฟ้าอ่อน + ตัวอักษรฟ้า) ไม่ใช้ gradient/เงาเข้ม
   ===================================================== */

.mm-bl-shell[b-gwa8xe46i7] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
    font-family: 'IBM Plex Sans Thai', 'Manrope', -apple-system, sans-serif;
    color: #293649;
    box-sizing: border-box;
    width: 100%;
}

/* ---- breadcrumb ---- */
.mm-bl-bc[b-gwa8xe46i7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.mm-bl-bc-link[b-gwa8xe46i7] {
    cursor: pointer;
    font-weight: 500;
    transition: color .18s;
}

    .mm-bl-bc-link:hover[b-gwa8xe46i7] {
        color: #3b82f6;
    }

.mm-bl-bc-sep[b-gwa8xe46i7] {
    color: #b1b5bb;
}

.mm-bl-bc-current[b-gwa8xe46i7] {
    color: #293649;
    font-weight: 600;
    max-width: 60ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- head + search ---- */
.mm-bl-head[b-gwa8xe46i7] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.mm-bl-title[b-gwa8xe46i7] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.mm-bl-count[b-gwa8xe46i7] {
    font-size: 13px;
    color: #6b7280;
    margin-top: 2px;
}

.mm-bl-search[b-gwa8xe46i7] {
    position: relative;
    flex: 0 1 340px;
    min-width: 220px;
}

.mm-bl-search-ico[b-gwa8xe46i7] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa4b5;
}

.mm-bl-search-input[b-gwa8xe46i7] {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    padding: 0 36px 0 34px;
    border: 1px solid #e5e9ef;
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    color: #293649;
    outline: none;
    background: #fff;
}

    .mm-bl-search-input:focus[b-gwa8xe46i7] {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px #eff6ff;
    }

.mm-bl-search-x[b-gwa8xe46i7] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #9aa4b5;
    cursor: pointer;
}

/* ---- shared ---- */
.mm-bl-meta[b-gwa8xe46i7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #6b7280;
}

.mm-bl-dot[b-gwa8xe46i7] {
    color: #c3c8d0;
}

.mm-bl-btn[b-gwa8xe46i7] {
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #3b82f6;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .18s;
}

    .mm-bl-btn:hover[b-gwa8xe46i7] {
        background: #dbeafe;
    }

.mm-bl-pill[b-gwa8xe46i7] {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    color: #3b82f6;
    background: #eff6ff;
    border-radius: 999px;
    padding: 4px 12px;
}

.mm-bl-readmore[b-gwa8xe46i7] {
    margin-top: auto;
    font-size: 13.5px;
    font-weight: 600;
    color: #3b82f6;
}

.mm-bl-state[b-gwa8xe46i7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 70px 16px;
    color: #6b7280;
}

.mm-bl-state-ico[b-gwa8xe46i7] {
    font-size: 34px;
}

.mm-bl-state-title[b-gwa8xe46i7] {
    font-size: 18px;
    font-weight: 700;
    color: #293649;
}

.mm-bl-state-sub[b-gwa8xe46i7] {
    font-size: 14px;
    margin-bottom: 8px;
}

/* ---- featured ---- */
.mm-bl-featured[b-gwa8xe46i7] {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    border: 1px solid #e5e9ef;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    margin-bottom: 24px;
    transition: border-color .18s, transform .18s;
}

    .mm-bl-featured:hover[b-gwa8xe46i7] {
        border-color: #bfdbfe;
        transform: translateY(-2px);
    }

.mm-bl-featured-img[b-gwa8xe46i7] {
    aspect-ratio: 16 / 9;
    background: #f2f4f8;
}

    .mm-bl-featured-img img[b-gwa8xe46i7] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.mm-bl-featured-body[b-gwa8xe46i7] {
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mm-bl-featured-title[b-gwa8xe46i7] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
}

.mm-bl-featured-text[b-gwa8xe46i7] {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: #4b5563;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- grid cards ---- */
.mm-bl-grid[b-gwa8xe46i7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.mm-bl-card[b-gwa8xe46i7] {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e9ef;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s, transform .18s;
}

    .mm-bl-card:hover[b-gwa8xe46i7] {
        border-color: #bfdbfe;
        transform: translateY(-2px);
    }

.mm-bl-card-img[b-gwa8xe46i7] {
    aspect-ratio: 16 / 9;
    background: #f2f4f8;
}

    .mm-bl-card-img img[b-gwa8xe46i7] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.mm-bl-card-body[b-gwa8xe46i7] {
    flex: 1;
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mm-bl-card-title[b-gwa8xe46i7] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mm-bl-card-text[b-gwa8xe46i7] {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- article ---- */
.mm-bl-article[b-gwa8xe46i7] {
    max-width: 860px;
    margin: 0 auto;
}

.mm-bl-article-head[b-gwa8xe46i7] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.mm-bl-article-title[b-gwa8xe46i7] {
    margin: 0;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    word-break: break-word;
}

.mm-bl-lead[b-gwa8xe46i7] {
    margin: 4px 0 0;
    font-size: 17px;
    line-height: 1.7;
    color: #4b5563;
}

.mm-bl-article-cover[b-gwa8xe46i7] {
    border-radius: 18px;
    overflow: hidden;
    background: #f2f4f8;
    margin-bottom: 26px;
}

    .mm-bl-article-cover img[b-gwa8xe46i7] {
        width: 100%;
        max-height: 520px;
        object-fit: cover;
        display: block;
    }

.mm-bl-content[b-gwa8xe46i7] {
    font-size: 16px;
    line-height: 1.8;
    word-break: break-word;
}

    .mm-bl-content[b-gwa8xe46i7]  img {
        max-width: 100%;
        height: auto;
    }

.mm-bl-article-foot[b-gwa8xe46i7] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
    border-top: 1px solid #e5e9ef;
    margin-top: 32px;
    padding-top: 20px;
}

.mm-bl-related[b-gwa8xe46i7] {
    margin-top: 44px;
}

.mm-bl-h2[b-gwa8xe46i7] {
    margin: 0 0 16px;
    font-size: 21px;
    font-weight: 700;
}

/* ---- responsive ---- */
@media (max-width: 1024px) {
    .mm-bl-grid[b-gwa8xe46i7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .mm-bl-shell[b-gwa8xe46i7] {
        padding: 16px;
    }

    .mm-bl-featured[b-gwa8xe46i7] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mm-bl-featured-body[b-gwa8xe46i7] {
        padding: 18px;
    }

    .mm-bl-featured-title[b-gwa8xe46i7] {
        font-size: 20px;
    }

    .mm-bl-article-title[b-gwa8xe46i7] {
        font-size: 26px;
    }

    .mm-bl-search[b-gwa8xe46i7] {
        flex: 1 1 100%;
    }
}

@media (max-width: 560px) {
    .mm-bl-grid[b-gwa8xe46i7] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/FrontEnd/ConfirmEmail/ConfirmEmail.razor.rz.scp.css */
.DivNotFoundLink[b-a5nfss18bs] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0px;
    font-size: 14px;
    background: white;
}

    .DivNotFoundLink[b-a5nfss18bs]::before {
        width: 20px;
        height: 20px;
        font-family: GoogleFont;
        content: "\f18c";
        color: #1098de;
        font-size: 28px;
        font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: 25px;
    }

.DivNotFoundLinkFalse[b-a5nfss18bs] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0px;
    font-size: 14px;
    background: white;
}

    .DivNotFoundLinkFalse[b-a5nfss18bs]::before {
        width: 20px;
        height: 20px;
        font-family: GoogleFont;
        content: "\e158";
        color: #ff0000;
        font-size: 28px;
        font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: 25px;
    }


/* /Components/Pages/FrontEnd/Customer/CheckOut.razor.rz.scp.css */
.co-root[b-sp53f2443u] {
    font-family: "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, sans-serif;
    color: #0F172A;
    background: #F5F7FA;
    min-height: 100vh;
    padding-bottom: 40px;
    box-sizing: border-box;
}

.co-root *[b-sp53f2443u] {
    box-sizing: border-box;
}

/* ===== topbar ===== */
.co-topbar[b-sp53f2443u] {
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    padding: 22px 0;
    margin-top: 30px;
    margin-bottom: 18px;
}

.co-topbar-inner[b-sp53f2443u] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
    color: #1e3a8a;
}

.co-crumb[b-sp53f2443u] {
    font-size: 12.5px;
    color: #3b82f6;
    margin-bottom: 4px;
}

.co-title[b-sp53f2443u] {
    font-size: 22px;
    font-weight: 700;
    color: #1e3a8a;
}

/* ===== layout ===== */
.co-body[b-sp53f2443u] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    align-items: start;
}

.co-main[b-sp53f2443u] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.co-side[b-sp53f2443u] {
    position: sticky;
    top: 16px;
    min-width: 0;
}

/* ===== card ===== */
.co-card[b-sp53f2443u] {
    background: white;
    border: 1px solid #E4E9F0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    padding: 18px 20px;
}

.co-card-head[b-sp53f2443u] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.co-card-icon[b-sp53f2443u] {
    font-size: 16px;
}

.co-card-title[b-sp53f2443u] {
    font-size: 15px;
    font-weight: 600;
    color: #0F172A;
}

.co-card-count[b-sp53f2443u] {
    margin-left: auto;
    font-size: 12.5px;
    color: #8A94A6;
}

/* ===== address ===== */
.co-address-row[b-sp53f2443u] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
}

.co-address-info[b-sp53f2443u] {
    flex: 1;
    min-width: 0;
}

.co-address-name[b-sp53f2443u] {
    font-weight: 600;
    color: #0F172A;
    word-break: break-word;
}

.co-address-full[b-sp53f2443u] {
    margin-top: 4px;
    color: #8A94A6;
    font-size: 13.5px;
    word-break: break-word;
}

.co-tag-default[b-sp53f2443u] {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    color: #2563eb;
    background: #dbeafe;
    border: 1px solid #93c5fd;
    width: fit-content;
}

/* ===== buttons ===== */
.co-btn[b-sp53f2443u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: .15s;
}

.co-btn-outline[b-sp53f2443u] {
    background: white;
    border: 1px solid #E4E9F0;
    color: #0F172A;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
}

.co-btn-outline:hover[b-sp53f2443u] {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #2563eb;
}

.co-btn-primary[b-sp53f2443u] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #3b82f6;
}

.co-btn-primary:hover[b-sp53f2443u] {
    background: #dbeafe;
    color: #2563eb;
    border-color: #93c5fd;
}

.co-change-btn[b-sp53f2443u] {
    flex-shrink: 0;
}

/* ===== product table ===== */
.co-table[b-sp53f2443u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.co-table thead th[b-sp53f2443u] {
    text-align: left;
    font-weight: 500;
    color: #8A94A6;
    font-size: 12.5px;
    padding: 8px 6px;
    border-bottom: 1px solid #EDF1F6;
}

.co-table tbody td[b-sp53f2443u] {
    padding: 12px 6px;
    border-bottom: 1px solid #EDF1F6;
    vertical-align: middle;
}

.co-table tbody tr:last-child td[b-sp53f2443u] {
    border-bottom: none;
}

.co-col-unit[b-sp53f2443u],
.co-col-price[b-sp53f2443u],
.co-col-qty[b-sp53f2443u] {
    text-align: center;
    min-width: 90px;
}

.co-col-price[b-sp53f2443u] {
    color: #3B82F6;
}

.co-col-sum[b-sp53f2443u] {
    text-align: right;
    min-width: 100px;
    color: #3B82F6;
    font-weight: 600;
}

.co-prod-cell[b-sp53f2443u] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.co-prod-thumb[b-sp53f2443u] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid #EDF1F6;
    background: #EDF1F6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.co-prod-thumb img[b-sp53f2443u] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.co-prod-name[b-sp53f2443u] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== VAT ===== */
.co-vat-row[b-sp53f2443u] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
}

.co-vat-label[b-sp53f2443u] {
    font-weight: 500;
}

.co-link[b-sp53f2443u] {
    text-decoration: underline;
    cursor: pointer;
    user-select: none;
    color: #3B82F6;
    font-size: 13.5px;
}

.co-link-disabled[b-sp53f2443u] {
    cursor: auto;
    color: #8A94A6;
}

.co-link-danger[b-sp53f2443u] {
    color: #E4572E;
}

.co-vat-detail[b-sp53f2443u] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #EDF1F6;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    font-size: 13.5px;
}

.co-vat-detail-title[b-sp53f2443u] {
    font-size: 14.5px;
    color: #E4572E;
    font-weight: 600;
    margin-bottom: 4px;
}

/* ===== summary ===== */
.co-summary .co-card-head[b-sp53f2443u] {
    margin-bottom: 10px;
}

.co-sum-row[b-sp53f2443u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 32px;
    font-size: 13.5px;
    color: #8A94A6;
}

.co-sum-row span:last-child[b-sp53f2443u] {
    color: #3B82F6;
    font-weight: 500;
}

.co-sum-total[b-sp53f2443u] {
    border-top: 1px solid #EDF1F6;
    margin-top: 6px;
    padding-top: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #0F172A;
}

.co-sum-total span:last-child[b-sp53f2443u] {
    color: #3B82F6;
}

.co-policy-text[b-sp53f2443u] {
    margin-top: 14px;
    font-size: 11.5px;
    color: #8A94A6;
    line-height: 1.5;
}

.co-submit-btn[b-sp53f2443u] {
    margin-top: 12px;
    width: 100%;
    height: 46px;
    font-size: 15.5px;
    border-radius: 12px;
}

/* ===== address manage modal ===== */
.co-modal-overlay[b-sp53f2443u] {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
    padding: 16px;
    font-family: "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, sans-serif;
}

.co-modal[b-sp53f2443u] {
    position: relative;
    width: 520px;
    max-width: 100%;
    height: 620px;
    max-height: 88vh;
    background: white;
    border-radius: 16px;
    box-shadow: 0 30px 70px -20px rgba(15,23,42,.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.co-modal-head[b-sp53f2443u] {
    padding: 18px 24px;
    border-bottom: 1px solid #E4E9F0;
    font-size: 16px;
    font-weight: 600;
    color: #0F172A;
}

.co-modal-body[b-sp53f2443u] {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 20px 90px;
}

.co-addr-pick[b-sp53f2443u] {
    display: flex;
    gap: 10px;
    padding: 14px 4px;
    border-bottom: 1px solid #EDF1F6;
    cursor: pointer;
    border-radius: 10px;
}

.co-addr-pick:hover[b-sp53f2443u] {
    background: #F5F7FA;
}

.co-addr-pick.active[b-sp53f2443u] {
    background: #EFF6FF;
}

.co-addr-pick-radio[b-sp53f2443u] {
    flex-shrink: 0;
    padding-top: 2px;
}

.co-addr-pick-radio-outer[b-sp53f2443u] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #3B82F6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.co-addr-pick-radio-inner[b-sp53f2443u] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3B82F6;
}

.co-addr-pick-info[b-sp53f2443u] {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
}

.co-addr-pick-top[b-sp53f2443u] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.co-addr-pick-name[b-sp53f2443u] {
    font-size: 15px;
    font-weight: 600;
    color: #0F172A;
}

.co-addr-pick-sep[b-sp53f2443u] {
    width: 1px;
    height: 14px;
    background: #E4E9F0;
}

.co-addr-pick-phone[b-sp53f2443u] {
    color: #8A94A6;
}

.co-addr-pick-line[b-sp53f2443u] {
    color: #8A94A6;
    word-break: break-word;
    margin-top: 2px;
}

.co-addr-pick-actions[b-sp53f2443u] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.co-link-edit[b-sp53f2443u] {
    font-size: 13px;
    color: #3B82F6;
    cursor: pointer;
}

.co-link-delete[b-sp53f2443u] {
    font-size: 13px;
    color: #E4572E;
    cursor: pointer;
}

.co-add-address-btn[b-sp53f2443u] {
    margin-top: 12px;
    width: fit-content;
    color: #3B82F6;
    border-color: #3B82F6;
}

.co-modal-foot[b-sp53f2443u] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 68px;
    border-top: 1px solid #E4E9F0;
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    background: white;
}

/* =========================================================
   RESPONSIVE — Tablet ≤1024px: single column
   ========================================================= */
@media (max-width: 1024px) {
    .co-body[b-sp53f2443u] {
        grid-template-columns: 1fr;
    }

    .co-side[b-sp53f2443u] {
        position: static;
    }
}

/* =========================================================
   RESPONSIVE — Mobile ≤720px
   ========================================================= */
@media (max-width: 720px) {
    .co-topbar[b-sp53f2443u] {
        padding: 16px 0;
    }

    .co-title[b-sp53f2443u] {
        font-size: 18px;
    }

    .co-body[b-sp53f2443u] {
        padding: 0 10px;
        gap: 10px;
    }

    .co-card[b-sp53f2443u] {
        padding: 14px;
        border-radius: 12px;
    }

    .co-address-row[b-sp53f2443u] {
        flex-direction: column;
        align-items: stretch;
    }

    .co-change-btn[b-sp53f2443u] {
        width: fit-content;
    }

    /* product table -> stacked cards */
    .co-table thead[b-sp53f2443u] {
        display: none;
    }

    .co-table[b-sp53f2443u],
    .co-table tbody[b-sp53f2443u] {
        display: block;
        width: 100%;
    }

    .co-table tbody tr[b-sp53f2443u] {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #EDF1F6;
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 10px;
    }

    .co-table tbody tr:last-child[b-sp53f2443u] {
        margin-bottom: 0;
    }

    .co-table tbody td[b-sp53f2443u] {
        border-bottom: none;
        padding: 4px 0;
    }

    .co-col-product[b-sp53f2443u] {
        flex: 0 0 100%;
        margin-bottom: 6px;
    }

    .co-col-unit[b-sp53f2443u],
    .co-col-price[b-sp53f2443u],
    .co-col-qty[b-sp53f2443u],
    .co-col-sum[b-sp53f2443u] {
        flex: 0 0 100%;
        display: flex;
        justify-content: space-between;
        text-align: left;
        min-width: 0;
    }

    .co-table td[data-label][b-sp53f2443u]::before {
        content: attr(data-label);
        color: #8A94A6;
        font-weight: 400;
    }

    /* address modal fullscreen sheet */
    .co-modal-overlay[b-sp53f2443u] {
        padding: 0;
        align-items: flex-end;
    }

    .co-modal[b-sp53f2443u] {
        width: 100%;
        height: 92vh;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
    }

    .co-addr-pick[b-sp53f2443u] {
        flex-direction: column;
    }

    .co-addr-pick-actions[b-sp53f2443u] {
        flex-direction: row;
        align-self: flex-start;
        margin-top: 6px;
    }

    .co-vat-row[b-sp53f2443u],
    .co-vat-detail[b-sp53f2443u] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/FrontEnd/Customer/CustomerHome.razor.rz.scp.css */
.MainUserPage[b-09f5vjut6k] {
    position: relative;
    display: flex;
    overflow: hidden;
}

.Zone1[b-09f5vjut6k] {
    width: 190px;
    min-width: 190px;
    margin-right: 25px;
}

    .Zone1 .HeadProfile[b-09f5vjut6k]{
        display: flex;
        padding: 15px 0px;
        font-size: 14px;
    }

        .Zone1 .HeadProfile .ProfileImgDiv[b-09f5vjut6k] {
            position: relative;
            width: 48px;
            height: 48px;
            min-height: 48px;
            min-width: 48px;
            border-radius: 50%;
            overflow: hidden;
            border: 0px solid #000000;
        }

            .Zone1 .HeadProfile .ProfileImgDiv .ProfileImg[b-09f5vjut6k] {
                min-width: 100%;
                min-height: 100%;
                max-height: 100%;
            }

.Zone2[b-09f5vjut6k] {
    padding: 0px 0px 30px 30px;
    width: 100%;
    background: white;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.13);
}

        .Zone2 .Title[b-09f5vjut6k] {
            padding: 18px 0px;
            border-bottom: .0625rem solid #efefef;
        }

        .Zone2 .Title .T1[b-09f5vjut6k] {
            font-size: 18px;
        }

        .Zone2 .Title .T2[b-09f5vjut6k] {
            font-size: 14px;
        }

.UploadProfileZone[b-09f5vjut6k] {
    display: flex;
    justify-content: center;
    border-left: .0625rem solid #efefef;
    width: 280px;
}

.UploadProfileSubZone[b-09f5vjut6k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 160px;
    min-width: 160px;
    color: #999;
    font-size: 14px;
}

.UploadProfileButton[b-09f5vjut6k] {
    color: #555;
    border: 1px solid rgba(0,0,0,.09);
    width: fit-content;
    padding: 7px 20px;
    margin-bottom: 15px;
    cursor: pointer;
}

.MainMenu[b-09f5vjut6k]{
    margin-top: 0px;
}

.MainMenuPer[b-09f5vjut6k] {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-top: 15px;
}

    .MainMenuPer img[b-09f5vjut6k] {
        width: 20px;
        height: 20px;
    }

    .MainMenuPer div[b-09f5vjut6k] {
        margin-left: 10px;
        font-size: 14px;
    }

.MainMenu .SubMain[b-09f5vjut6k] {
    font-size: 14px;
    padding-left: 31px;
    color: rgba(0,0,0,.65);
}

    .MainMenu .SubMain .SubPer[b-09f5vjut6k] {
        font-size: 14px;
        margin-top: 10px;
        cursor: pointer;
        transition: 0.2s;
    }

    .MainMenu .SubMain .SubPer:hover[b-09f5vjut6k] {
        color: #00bfa5;
    }

.UserNotAllowStatus[b-09f5vjut6k] {
    background: #ece9e1;
    width: fit-content;
    padding: 5px 15px;
    border-radius: 5px;
    margin-bottom: 5px;
    color: red;
}
/* /Components/Pages/FrontEnd/Customer/Menu_User/FrontEndChangePassword.razor.rz.scp.css */
.TitleInput[b-gmazojgnba] {
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 12px;
    background: white;
    padding: 0 5px;
}

.WidthBase[b-gmazojgnba] {
    width: 300px;
}
/* /Components/Pages/FrontEnd/Customer/Menu_User/Profile.razor.rz.scp.css */
.UserInfoPerBox[b-120jdgglaj] {
    display: flex;
    margin-bottom: 30px;
}

    .UserInfoPerBox .A1[b-120jdgglaj] {
        width: 140px;
        min-width: 140px;
        font-size: 14px;
        color: rgba(0,0,0,.65);
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: end;
        margin-right: 20px;
    }

    .UserInfoPerBox .A2[b-120jdgglaj] {
        width: 65%;
    }

        .UserInfoPerBox .A2 input[b-120jdgglaj] {
            padding-left: 10px;
            height: 40px;
            width: 100%;
        }

        .UserInfoPerBox .A2 .TextSubInput[b-120jdgglaj] {
            padding-top: 4px;
            color: rgba(0,0,0,.4);
            font-size: 14px;
        }

.SaveButton[b-120jdgglaj] {
    width: fit-content;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.SexPer[b-120jdgglaj] {
    display: flex;
    align-items: center;
    margin-right: 15px;
    cursor: pointer;
}

.RadioSexButton[b-120jdgglaj] {
    width: 18px;
    height: 18px;
    font-size: 14px;
    border: 2px solid rgba(0,0,0,.26);
    border-radius: 50%;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .RadioSexButton .SelectedDot[b-120jdgglaj] {
        opacity: 0;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        transition: 0.2s;
    }

.RadioSexText[b-120jdgglaj] {
    font-size: 14px;
}

[b-120jdgglaj] .HiddenInputFile {
    display: none;
}

.UploadProfileZone[b-120jdgglaj] {
    display: flex;
    justify-content: center;
    border-left: .0625rem solid #efefef;
    width: 280px;
}

.UploadProfileSubZone[b-120jdgglaj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 160px;
    min-width: 160px;
    color: #999;
    font-size: 14px;
}

    .UploadProfileSubZone .ImageProfileDiv[b-120jdgglaj] {
        position: relative;
        width: 100px;
        height: 100px;
        cursor: pointer;
        border-radius: 50%;
        margin: 10px 0px;
        overflow: hidden;
        border: 0px solid #000000;
    }

        .UploadProfileSubZone .ImageProfileDiv .ImageProfile[b-120jdgglaj] {
            position: absolute;
            transform: translate(-50%,-50%);
            top: 50%;
            left: 50%;
            overflow-clip-margin: content-box;
            overflow: clip;
            cursor: pointer;
            user-select: none;
            list-style: none;
            text-align: center;
        }

        .UploadProfileSubZone .ImageProfileDiv .vw[b-120jdgglaj] {
            max-height: 100%;
        }

        .UploadProfileSubZone .ImageProfileDiv .vh[b-120jdgglaj] {
            max-width: 100%;
        }

.UploadProfileButton[b-120jdgglaj] {
    color: #555;
    border: 1px solid rgba(0,0,0,.09);
    width: fit-content;
    padding: 7px 20px;
    margin-bottom: 15px;
    cursor: pointer;
}

.DateSelectorBoxSize[b-120jdgglaj] {
    width: 126.7px;
    height: 40px;
    padding-left: 10px;
}
/* /Components/Pages/FrontEnd/Customer/Menu_User/User_Address.razor.rz.scp.css */
.ModalMainManageAddress[b-m2nqn9qgiv] {
    position: relative;
    width: 500px;
    height: 600px;
    min-height: 600px;
    max-height: 600px;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,.54);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
}

    .ModalMainManageAddress .TitleMain[b-m2nqn9qgiv] {
        position: relative;
        padding: 16px 24px;
        border-bottom: 1px solid rgba(0,0,0,.09);
        font-size: 16px;
    }

.IsNotModal[b-m2nqn9qgiv] {
    position: relative;
    width: auto;
    height: auto;
    min-height: auto;
    max-height: auto;
    box-shadow: none;
}

.ChangeAddressModal[b-m2nqn9qgiv] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
}

@font-face {
    font-family: 'GoogleFont';
    font-style: normal;
    font-weight: 100 700;
    src: url('../fonts/google-font.woff2') format('woff2');
}

.HeaderTopDiv[b-m2nqn9qgiv] {
    background-image: repeating-linear-gradient(45deg,#6fa6d6,#6fa6d6 33px,transparent 0,transparent 41px,#f18d9b 0,#f18d9b 74px,transparent 0,transparent 82px);
    height: 3px;
    width: 100%;
}

.AddressDiv[b-m2nqn9qgiv] {
    padding: 24px;
    background: white;
}

    .AddressDiv .Text[b-m2nqn9qgiv] {
        margin-left: 10px;
    }

.AddressTitle[b-m2nqn9qgiv] {
    display: flex;
    align-items: center;
    color: #ee4d2d;
    fill: currentColor;
    margin-bottom: 20px;
}

.AddressSelectedZone[b-m2nqn9qgiv] {
    display: flex;
    color: black;
    font-size: 16px;
}

.DefaultTag[b-m2nqn9qgiv] {
    color: #ee4d2d;
    padding: 2px 5px;
    border-radius: 1px;
    font-size: 10px;
    border: 0.5px solid #ee4d2d;
    display: flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
}

.ChangeAddressButton[b-m2nqn9qgiv] {
    color: #4080ee;
    font-size: 14px;
    height: fit-content;
    cursor: pointer;
}

.TitleZone1[b-m2nqn9qgiv] {
    float: left;
}

.TitleZone2[b-m2nqn9qgiv] {
    margin-left: 20px;
    min-width: 50px;
    display: flex;
    justify-content: center;
}

.TitleZone3[b-m2nqn9qgiv] {
    margin-left: 30px;
    min-width: 40px;
    display: flex;
    justify-content: center;
}

.AddnewAddressButton[b-m2nqn9qgiv] {
    display: flex;
    align-items: center;
    width: fit-content;
    font-size: 14px;
    border: 1px solid #ee4d2d;
    color: #ee4d2d;
    padding: 2px 15px;
    cursor: pointer;
}

    .AddnewAddressButton[b-m2nqn9qgiv]::before {
        font-family: GoogleFont;
        content: "\e145";
        font-size: 20px;
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 200, 'opsz' 20;
        color: rgb(120, 120, 120);
        margin-right: 5px;
    }

.ListAddressZone[b-m2nqn9qgiv] {
    position: relative;
    width: 100%;
    padding: 0px 24px;
    padding-bottom: 88px;
    flex: 1;
    overflow: scroll;
}

.AddressPerMain[b-m2nqn9qgiv] {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 16px 0px;
    border-bottom: 1px solid rgba(0,0,0,.09);
}

    .AddressPerMain .CheckSelected[b-m2nqn9qgiv] {
        position: relative;
        min-width: 30px;
        width: 30px;
        padding-right: 4px;
    }

        .AddressPerMain .CheckSelected .BorderMain[b-m2nqn9qgiv] {
            margin-top: 5px;
            border-radius: 50%;
            border: 2px solid;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .AddressPerMain .CheckSelected .BorderMain .InnerCircle[b-m2nqn9qgiv] {
                border-radius: 50%;
                width: 8px;
                height: 8px;
            }

    .AddressPerMain .DataMainZone[b-m2nqn9qgiv] {
        position: relative;
        width: 422px;
        padding-right: 30px;
        font-size: 14px;
    }

        .AddressPerMain .DataMainZone .FirstRow[b-m2nqn9qgiv] {
            display: flex;
            align-items: center;
            position: relative;
        }

            .AddressPerMain .DataMainZone .FirstRow .Name[b-m2nqn9qgiv] {
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 16px;
                white-space: nowrap;
            }

            .AddressPerMain .DataMainZone .FirstRow .FakeSlash[b-m2nqn9qgiv] {
                display: block;
                border-left: .5px solid rgba(0,0,0,.26);
                height: 29px;
                margin: 0 8px;
            }

            .AddressPerMain .DataMainZone .FirstRow .PhoneNumber[b-m2nqn9qgiv] {
                color: rgba(0,0,0,.54);
                min-width: 105px;
                flex: 1;
            }

.EditButton[b-m2nqn9qgiv] {
    font-size: 14px;
    color: #08f;
    padding: 4px;
    cursor: pointer;
    text-align: end;
}

.DeleteButton[b-m2nqn9qgiv] {
    font-size: 14px;
    color: red;
    padding: 4px;
    cursor: pointer;
    text-align: end;
}

        .AddressPerMain .DataMainZone .SecondRow[b-m2nqn9qgiv] {
            margin-bottom: 4px;
            text-overflow: ellipsis;
            overflow-x: hidden;
        }

        .AddressPerMain .DataMainZone .ThirdRow[b-m2nqn9qgiv] {
        }

        .AddressPerMain .DataMainZone .FourthRow[b-m2nqn9qgiv] {
            margin-top: 4px;
        }

            .AddressPerMain .DataMainZone .FourthRow .ShowDefault[b-m2nqn9qgiv] {
                width: fit-content;
                height: fit-content;
                color: #ee4d2d;
                border-color: #ee4d2d;
                padding: 2px 4px;
                border: 0.5px solid;
                border-radius: 1px;
                font-size: 14px;
            }

.ManageAddressButtonZone[b-m2nqn9qgiv] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65px;
    border-top: 1px solid rgba(0,0,0,.09);
    padding: 0 24px;
    display: flex;
    justify-content: end;
    align-items: center;
    background: white;
}

    .ManageAddressButtonZone .ManageSizeButton[b-m2nqn9qgiv] {
        width: 140px;
        height: 40px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .ManageAddressButtonZone .ManageCancelButton[b-m2nqn9qgiv] {
        border: 1px solid #ee4d2d;
        color: #ee4d2d;
        margin-right: 8px;
    }

    .ManageAddressButtonZone .ManageAcceptButton[b-m2nqn9qgiv] {
        background: #ee4d2d;
        color: white;
    }

.ProductListZone[b-m2nqn9qgiv] {
    margin-top: 12px;
    background: white;
    padding: 24px 30px 0px;
    font-size: 14px;
}

    .ProductListZone .TableProductList[b-m2nqn9qgiv] {
    }

        .ProductListZone .TableProductList thead .RowSize[b-m2nqn9qgiv] {
            height: 40px;
        }

        .ProductListZone .TableProductList tbody .RowSize[b-m2nqn9qgiv] {
            height: 70px;
        }

    .ProductListZone .NameTitle[b-m2nqn9qgiv] {
        font-size: 18px;
    }

    .ProductListZone .HeadColor[b-m2nqn9qgiv] {
        color: #bbb !important;
    }

    .ProductListZone .NameDiv[b-m2nqn9qgiv] {
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        max-width: 590px;
        width: 100%;
    }

        .ProductListZone .NameDiv .Name[b-m2nqn9qgiv] {
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: 70px;
            white-space: nowrap;
            min-width: 0;
            max-width: 100%;
        }

    .ProductListZone .ProductImg[b-m2nqn9qgiv] {
        position: relative;
        height: 40px;
        width: 40px;
        min-height: 40px;
        min-width: 40px;
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        float: left;
    }

        .ProductListZone .ProductImg .Img[b-m2nqn9qgiv] {
            max-height: 100%;
            max-width: 100%;
        }

    .ProductListZone .UnitName[b-m2nqn9qgiv] {
        text-align: center;
        min-width: 100px;
    }

    .ProductListZone .PricePer[b-m2nqn9qgiv] {
        text-align: center;
        min-width: 100px;
        color: #ee4d2d;
    }

    .ProductListZone .Qty[b-m2nqn9qgiv] {
        text-align: center;
        min-width: 100px;
    }

    .ProductListZone .SumPrice[b-m2nqn9qgiv] {
        text-align: right;
        min-width: 100px;
        color: #ee4d2d;
    }

.DetailPaymentZone[b-m2nqn9qgiv] {
    margin-top: 20px;
    background: white;
    font-size: 14px;
}

    .DetailPaymentZone .TitleZone[b-m2nqn9qgiv] {
        padding: 0px 30px;
        display: flex;
        align-items: center;
        height: 90px;
        border-bottom: 1px solid rgba(0,0,0,.09);
    }

    .DetailPaymentZone .PriceTransferZone[b-m2nqn9qgiv] {
        display: flex;
        justify-content: end;
        align-items: center;
        height: 40px;
    }

        .DetailPaymentZone .PriceTransferZone .Div1[b-m2nqn9qgiv] {
            width: 135px;
        }

        .DetailPaymentZone .PriceTransferZone .Div2[b-m2nqn9qgiv] {
            min-width: 135px;
            text-align: right;
            padding-right: 30px;
            color: #ee4d2d;
        }

    .DetailPaymentZone .SummitButtonZone[b-m2nqn9qgiv] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 30px;
        height: 90px;
    }

        .DetailPaymentZone .SummitButtonZone .Div1[b-m2nqn9qgiv] {
            color: rgba(0,0,0,.54);
        }

        .DetailPaymentZone .SummitButtonZone .Div2[b-m2nqn9qgiv] {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 210px;
            height: 40px;
            border: 1px solid rgba(0,0,0,.09);
            box-shadow: 0 1px 1px 0 rgba(0,0,0,.03);
            border-radius: 2px;
            cursor: pointer;
        }

.DiscountPaymentZone[b-m2nqn9qgiv] {
    margin-top: 20px;
    background: white;
    font-size: 14px;
}

    .DiscountPaymentZone .CodeZone[b-m2nqn9qgiv] {
        padding: 0px 30px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .DiscountPaymentZone .CodeZone .Div1[b-m2nqn9qgiv] {
            font-size: 18px;
        }

        .DiscountPaymentZone .CodeZone .Div2[b-m2nqn9qgiv] {
            color: #05a;
            cursor: pointer;
        }

    .DiscountPaymentZone .CoinZone[b-m2nqn9qgiv] {
        padding: 0px 30px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .DiscountPaymentZone .CoinZone .Div1[b-m2nqn9qgiv] {
            font-size: 18px;
            display: flex;
            align-items: end;
        }

            .DiscountPaymentZone .CoinZone .Div1 .Text[b-m2nqn9qgiv] {
                margin-right: 10px;
            }

            .DiscountPaymentZone .CoinZone .Div1 .SubText[b-m2nqn9qgiv] {
                font-size: 14px;
                color: #929292;
                height: fit-content;
            }

        .DiscountPaymentZone .CoinZone .Div2[b-m2nqn9qgiv] {
            color: #929292;
        }

.IsCheckOutingMain[b-m2nqn9qgiv] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.4);
    display: grid;
    place-items: center;
}

    .IsCheckOutingMain .IsCheckOutingDiv[b-m2nqn9qgiv] {
        background: white;
        padding: 0 60px;
        height: 100px;
        display: grid;
        place-items: center;
        font-size: 24px;
        border-radius: 5px;
    }

.PaymentAccountMain[b-m2nqn9qgiv] {
    padding: 15px 0px 15px 75px;
    border-bottom: 1px solid rgba(0,0,0,.09);
}

.PaymentAccountMainPer[b-m2nqn9qgiv] {
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    cursor: pointer;
}

    .PaymentAccountMainPer .InputRadio[b-m2nqn9qgiv] {
    }

    .PaymentAccountMainPer .Name[b-m2nqn9qgiv] {
        padding-left: 5px;
    }

.PaymentAccount.Selected[b-m2nqn9qgiv] {
    background: white;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.PaymentTypeBoxPer[b-m2nqn9qgiv] {
    padding: 8px 6px;
    border: solid 1px #e8e8e8;
    margin-left: 10px;
    cursor: pointer;
    user-select: none;
    transition: 0.25s;
}

    .PaymentTypeBoxPer.Disabled[b-m2nqn9qgiv] {
        filter: brightness(0.8);
        color: white;
        cursor: not-allowed;
    }

    .PaymentTypeBoxPer.CanHover:hover[b-m2nqn9qgiv] {
        color: white;
        background: #0d2327;
        cursor: pointer;
    }

    .PaymentTypeBoxPer.Selected[b-m2nqn9qgiv] {
        color: white;
        background: #0d2327;
    }
/* /Components/Pages/FrontEnd/Customer_Cart/Customer_Cart.razor.rz.scp.css */
/* ===== Cart — themed to match the FrontEnd product list page (ProductList.razor: soft blue accent, navy text) ===== */

.cc-root[b-1b2bqg7t3g] {
    --cc-teal: #3b82f6;
    --cc-teal-dark: #2563eb;
    --cc-teal-soft: #eff6ff;
    --cc-ink: #293649;
    --cc-line: #E5E9EF;
    --cc-line-soft: #F2F4F8;
    --cc-muted: #6b7280;
    --cc-danger: #ef4444;
    font-family: "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, sans-serif;
    color: var(--cc-ink);
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    margin-top: 30px;
}

/* ===== Page head ===== */
.cc-pagehead[b-1b2bqg7t3g] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 4px 14px;
}

.cc-pagetitle[b-1b2bqg7t3g] {
    font-size: 20px;
    font-weight: 700;
    color: var(--cc-ink);
}

.cc-pagecount[b-1b2bqg7t3g] {
    font-size: 13px;
    color: var(--cc-muted);
}

/* ===== Empty state ===== */
.cc-empty[b-1b2bqg7t3g] {
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: 16px;
    padding: 64px 24px;
    text-align: center;
}

.cc-empty-ico[b-1b2bqg7t3g] {
    font-size: 32px;
}

.cc-empty-title[b-1b2bqg7t3g] {
    font-size: 16px;
    font-weight: 700;
    margin-top: 12px;
    color: var(--cc-ink);
}

.cc-empty-sub[b-1b2bqg7t3g] {
    font-size: 13px;
    color: var(--cc-muted);
    margin: 6px 0 18px;
}

/* ===== Buttons (self-contained — do not depend on .pl-root scoped vars) ===== */
.cc-btn[b-1b2bqg7t3g] {
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: .15s;
    text-decoration: none;
    border: 0;
}

.cc-btn-primary[b-1b2bqg7t3g] {
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
}

    .cc-btn-primary:hover[b-1b2bqg7t3g] {
        background: #dbeafe;
        color: #2563eb;
        border-color: #93c5fd;
    }

.cc-btn-ghost[b-1b2bqg7t3g] {
    border: 1px solid #B9C2D0;
    background: #fff;
    color: var(--cc-ink);
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
}

    .cc-btn-ghost:hover[b-1b2bqg7t3g] {
        border-color: var(--cc-teal);
        background: var(--cc-teal-soft);
        color: var(--cc-teal-dark);
    }

.cc-btn-danger[b-1b2bqg7t3g] {
    height: 34px;
    padding: 0 14px;
    border: 1px solid #FCA5A5;
    background: #fff;
    color: var(--cc-danger);
}

    .cc-btn-danger:hover[b-1b2bqg7t3g] {
        background: #FEF2F2;
        border-color: var(--cc-danger);
    }

/* ===== Badge ===== */
.cc-badge[b-1b2bqg7t3g] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
}

/* ===== List container ===== */
.cc-list[b-1b2bqg7t3g] {
    --cc-colcheck: 52px;
    --cc-colprice: 130px;
    --cc-colqty: 176px;
    --cc-colsum: 130px;
    --cc-colaction: 76px;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
    margin-bottom: 16px;
}

/* Grid is the single source of truth for column alignment —
   header and every row share the exact same track sizes so nothing drifts. */
.cc-listhead[b-1b2bqg7t3g], .cc-row[b-1b2bqg7t3g] {
    display: grid;
    grid-template-columns: var(--cc-colcheck) minmax(0,1fr) var(--cc-colprice) var(--cc-colqty) var(--cc-colsum) var(--cc-colaction);
    align-items: center;
    column-gap: 6px;
}

.cc-listhead[b-1b2bqg7t3g] {
    height: 46px;
    background: var(--cc-line-soft);
    border-bottom: 1px solid var(--cc-line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cc-muted);
}

.cc-col[b-1b2bqg7t3g] {
    text-align: center;
}

.cc-col-product[b-1b2bqg7t3g] { text-align: left; }
.cc-col-price[b-1b2bqg7t3g], .cc-col-sum[b-1b2bqg7t3g] { text-align: center; }
.cc-col-action[b-1b2bqg7t3g] { display: flex; align-items: center; justify-content: center; }

/* ===== Row ===== */
.cc-row[b-1b2bqg7t3g] {
    padding: 16px;
    position: relative;
    border-bottom: 1px solid var(--cc-line-soft);
    transition: background .15s;
}

    .cc-row:last-child[b-1b2bqg7t3g] {
        border-bottom: none;
    }

    .cc-row:hover[b-1b2bqg7t3g] {
        background: #FAFBFD;
    }

    .cc-row.cc-cantbuy[b-1b2bqg7t3g] {
        background: #FEF7F7;
    }

        .cc-row.cc-cantbuy:hover[b-1b2bqg7t3g] {
            background: #FCE8E8;
        }

/* ===== Checkbox ===== */
.cc-check[b-1b2bqg7t3g] {
    justify-self: center;
    position: relative;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 1.5px solid #C7CEDA;
    border-radius: 6px;
    cursor: pointer;
    transition: .15s;
}

    .cc-check:hover[b-1b2bqg7t3g] {
        border-color: var(--cc-teal);
    }

    .cc-check.checked[b-1b2bqg7t3g] {
        background: var(--cc-teal);
        border-color: var(--cc-teal);
    }

        .cc-check.checked[b-1b2bqg7t3g]::after {
            content: "✓";
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 13px;
            font-weight: 700;
        }

    .cc-check.disabled[b-1b2bqg7t3g] {
        cursor: not-allowed;
        background: var(--cc-line-soft);
        border-color: var(--cc-line);
    }

.cc-blockbuy[b-1b2bqg7t3g] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.35;
    pointer-events: none;
}

/* ===== Product cell ===== */
.cc-productzone[b-1b2bqg7t3g] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cc-imgzone[b-1b2bqg7t3g] {
    position: relative;
    height: 56px;
    width: 56px;
    min-width: 56px;
    border: 1px solid var(--cc-line);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.cc-productimage[b-1b2bqg7t3g] {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.cc-nameunitzone[b-1b2bqg7t3g] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.cc-productname[b-1b2bqg7t3g] {
    cursor: pointer;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .cc-productname:hover[b-1b2bqg7t3g] {
        color: var(--cc-teal);
    }

.cc-cantbuybadge[b-1b2bqg7t3g] {
    width: fit-content;
    background: #FEE2E2 !important;
    color: var(--cc-danger) !important;
}

.cc-nocreditbadge[b-1b2bqg7t3g] {
    width: fit-content;
    background: #FFF7ED;
    color: #9A3412;
}

.cc-selectunitzone[b-1b2bqg7t3g] {
    max-width: 220px;
}

.cc-optionzone[b-1b2bqg7t3g] {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--cc-line);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: var(--cc-ink);
    background: #fff;
}

    .cc-optionzone:focus[b-1b2bqg7t3g] {
        outline: none;
        border-color: var(--cc-teal);
    }

/* ===== Price / Sum ===== */
.cc-pricevalue[b-1b2bqg7t3g], .cc-sumvalue[b-1b2bqg7t3g] {
    color: var(--cc-teal);
    font-weight: 600;
}

.cc-mobilelabel[b-1b2bqg7t3g] {
    display: none;
}

/* ===== Qty ===== */
.cc-qtyzone[b-1b2bqg7t3g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.cc-qtyleft[b-1b2bqg7t3g] {
    font-size: 11.5px;
    color: var(--cc-muted);
    text-align: center;
}

.cc-qtystepper[b-1b2bqg7t3g] {
    display: flex;
    align-items: center;
    border: 1px solid var(--cc-line);
    border-radius: 8px;
    overflow: hidden;
}

.cc-qtybtn[b-1b2bqg7t3g] {
    height: 30px;
    width: 30px;
    min-width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: var(--cc-ink);
    background: var(--cc-line-soft);
    cursor: pointer;
    user-select: none;
    transition: .15s;
}

    .cc-qtybtn:hover[b-1b2bqg7t3g] {
        background: var(--cc-teal-soft);
        color: var(--cc-teal);
    }

    .cc-qtybtn.disabled[b-1b2bqg7t3g] {
        cursor: not-allowed;
        opacity: .5;
    }

        .cc-qtybtn.disabled:hover[b-1b2bqg7t3g] {
            background: var(--cc-line-soft);
            color: var(--cc-ink);
        }

.cc-wantqty[b-1b2bqg7t3g] {
    width: 56px;
    text-align: center;
    height: 30px;
    border: none;
    border-left: 1px solid var(--cc-line);
    border-right: 1px solid var(--cc-line);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--cc-teal);
}

    .cc-wantqty:focus[b-1b2bqg7t3g] {
        outline: none;
    }

    .cc-wantqty.cc-qtywarn[b-1b2bqg7t3g] {
        color: var(--cc-danger);
    }

    .cc-wantqty:disabled[b-1b2bqg7t3g] {
        background: var(--cc-line-soft);
        color: var(--cc-muted);
    }

/* ===== Action ===== */
.cc-deletebtn[b-1b2bqg7t3g] {
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--cc-line);
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--cc-danger);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: .15s;
}

    .cc-deletebtn:hover[b-1b2bqg7t3g] {
        border-color: var(--cc-danger);
        background: #FEF2F2;
        color: var(--cc-danger);
    }

/* ===== Sticky summary bar ===== */
.cc-summarybar[b-1b2bqg7t3g] {
    position: sticky;
    bottom: 0;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: 16px;
    box-shadow: 0 -4px 16px rgba(15,23,42,.07);
    overflow: hidden;
    z-index: 2;
    margin-bottom: 16px;
}

.cc-summaryextra[b-1b2bqg7t3g] {
    border-bottom: 1px dashed var(--cc-line);
}

.cc-extraline[b-1b2bqg7t3g] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 18px;
    font-size: 13px;
}

    .cc-extraline + .cc-extraline[b-1b2bqg7t3g] {
        border-top: 1px dashed var(--cc-line-soft);
    }

.cc-extraicon[b-1b2bqg7t3g] {
    opacity: .7;
}

.cc-dim[b-1b2bqg7t3g] {
    color: var(--cc-muted);
}

.cc-pushright[b-1b2bqg7t3g] {
    margin-left: auto;
}

.cc-clickable[b-1b2bqg7t3g] {
    cursor: pointer;
}

    .cc-clickable:hover[b-1b2bqg7t3g] {
        color: var(--cc-teal-dark);
    }

.cc-summarymain[b-1b2bqg7t3g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
}

.cc-summaryselect[b-1b2bqg7t3g] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cc-selectalltext[b-1b2bqg7t3g] {
    cursor: pointer;
    white-space: nowrap;
    font-weight: 500;
}

.cc-summarytotal[b-1b2bqg7t3g] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.cc-sumlabel[b-1b2bqg7t3g] {
    color: var(--cc-muted);
    white-space: nowrap;
}

.cc-sumprice[b-1b2bqg7t3g] {
    font-size: 24px;
    font-weight: 700;
    color: var(--cc-teal);
    white-space: nowrap;
}

.cc-summarybtns[b-1b2bqg7t3g] {
    display: flex;
    gap: 10px;
}

.cc-summarybtn[b-1b2bqg7t3g] {
    min-width: 120px;
}

.cc-summarybar-mini .cc-summarymain[b-1b2bqg7t3g] {
    padding: 12px 18px;
}

/* ===== BackEnd: แถบเพิ่มสินค้าลงตะกร้าของลูกค้า ===== */
.cc-addbar[b-1b2bqg7t3g] {
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.cc-addrow[b-1b2bqg7t3g] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cc-addsearch[b-1b2bqg7t3g] {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}

.cc-addinput[b-1b2bqg7t3g] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--cc-line);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    color: var(--cc-ink);
    outline: none;
}

    .cc-addinput:focus[b-1b2bqg7t3g] {
        border-color: var(--cc-teal);
    }

.cc-adddrop[b-1b2bqg7t3g] {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: 10px;
    box-shadow: 0 12px 28px -12px rgba(15,23,42,.25);
    max-height: 320px;
    overflow-y: auto;
}

.cc-adddrop-item[b-1b2bqg7t3g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    font-size: 13.5px;
}

    .cc-adddrop-item:hover[b-1b2bqg7t3g] {
        background: var(--cc-teal-soft);
    }

.cc-adddrop-name[b-1b2bqg7t3g] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-adddrop-code[b-1b2bqg7t3g] {
    flex: none;
    font-size: 12px;
    color: var(--cc-muted);
}

.cc-addunit[b-1b2bqg7t3g] {
    max-width: 220px;
}

.cc-addqty[b-1b2bqg7t3g] {
    width: 84px;
}

.cc-addmsg[b-1b2bqg7t3g] {
    margin-top: 8px;
    font-size: 13px;
    color: var(--cc-danger);
}

    .cc-addmsg.ok[b-1b2bqg7t3g] {
        color: #15803d;
    }

/* ============================================================
   TABLET (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .cc-listhead[b-1b2bqg7t3g] {
        padding-left: 12px;
    }

    .cc-list[b-1b2bqg7t3g] {
        --cc-colcheck: 44px;
        --cc-colprice: 108px;
        --cc-colqty: 150px;
        --cc-colsum: 108px;
        --cc-colaction: 64px;
    }

    .cc-row[b-1b2bqg7t3g] {
        padding: 14px;
    }
}

/* ============================================================
   MOBILE (≤ 760px) — stacked card layout
   ============================================================ */
@media (max-width: 760px) {
    .cc-pagehead[b-1b2bqg7t3g] {
        padding: 4px 4px 12px;
    }

    .cc-pagetitle[b-1b2bqg7t3g] {
        font-size: 17px;
    }

    .cc-listhead[b-1b2bqg7t3g] {
        display: none;
    }

    .cc-list[b-1b2bqg7t3g] {
        border-radius: 12px;
    }

    .cc-row[b-1b2bqg7t3g] {
        display: block;
        padding: 14px 14px 14px 42px;
    }

    .cc-check[b-1b2bqg7t3g] {
        position: absolute;
        left: 12px;
        top: 16px;
    }

    .cc-col-product[b-1b2bqg7t3g], .cc-col-price[b-1b2bqg7t3g], .cc-col-qty[b-1b2bqg7t3g], .cc-col-sum[b-1b2bqg7t3g], .cc-col-action[b-1b2bqg7t3g] {
        width: 100%;
        min-width: 0;
        text-align: left;
        margin-bottom: 8px;
    }

    .cc-col-sum[b-1b2bqg7t3g] {
        margin-bottom: 0;
    }

    .cc-productzone[b-1b2bqg7t3g] {
        align-items: flex-start;
    }

    .cc-selectunitzone[b-1b2bqg7t3g] {
        max-width: 100%;
    }

    .cc-col-price[b-1b2bqg7t3g], .cc-col-sum[b-1b2bqg7t3g] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 15px;
        padding: 6px 0;
        border-top: 1px dashed var(--cc-line);
    }

    .cc-mobilelabel[b-1b2bqg7t3g] {
        display: inline-block;
        color: var(--cc-muted);
        font-weight: 400;
        font-size: 12.5px;
    }

    .cc-qtyzone[b-1b2bqg7t3g] {
        align-items: flex-start;
        width: 100%;
    }

    .cc-qtyleft[b-1b2bqg7t3g] {
        text-align: left;
    }

    .cc-col-action[b-1b2bqg7t3g] {
        position: absolute;
        right: 10px;
        top: 12px;
        width: auto;
        min-width: 0;
    }

    .cc-deletebtn[b-1b2bqg7t3g] {
        height: 30px;
        padding: 0 10px;
    }

    /* summary bar */
    .cc-summarybar[b-1b2bqg7t3g] {
        border-radius: 0;
        margin-left: -16px;
        margin-right: -16px;
        width: calc(100% + 32px);
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    .cc-extraline[b-1b2bqg7t3g] {
        padding: 0 14px;
    }

    .cc-summarymain[b-1b2bqg7t3g] {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 14px;
    }

    .cc-summaryselect[b-1b2bqg7t3g] {
        justify-content: space-between;
    }

    .cc-summarytotal[b-1b2bqg7t3g] {
        justify-content: space-between;
    }

    .cc-summarybtns[b-1b2bqg7t3g] {
        width: 100%;
    }

    .cc-summarybtn[b-1b2bqg7t3g] {
        flex: 1;
        min-width: 0;
    }
}

/* ============================================================
   SMALL MOBILE (≤ 380px)
   ============================================================ */
@media (max-width: 380px) {
    .cc-imgzone[b-1b2bqg7t3g] {
        height: 48px;
        width: 48px;
        min-width: 48px;
    }

    .cc-sumprice[b-1b2bqg7t3g] {
        font-size: 18px;
    }

    .cc-summarybtn[b-1b2bqg7t3g] {
        font-size: 13px;
        padding: 0 10px;
    }
}
/* /Components/Pages/FrontEnd/HeaderZone.razor.rz.scp.css */
@font-face {
    font-family: 'GoogleFont';
    font-style: normal;
    font-weight: 100 700;
    src: url('../fonts/google-font.woff2') format('woff2');
}

/* ============ GLOBAL GUARD ============ */
*[b-ua03fbuw9m], *[b-ua03fbuw9m]::before, *[b-ua03fbuw9m]::after {
    box-sizing: border-box;
}

/* ============ TOPBAR ============ */
.mm-topbar[b-ua03fbuw9m] {
    background: #293649;
    color: white;
    font-size: 13px;
    padding: 8px 0;
    width: 100%;
}

.mm-topbar-inner[b-ua03fbuw9m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    gap: 16px;
}

.mm-topbar-left[b-ua03fbuw9m] {
    display: flex;
    gap: 18px;
    align-items: center;
    color: currentColor;
    opacity: .85;
}

.mm-topbar-left span[b-ua03fbuw9m] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.mm-topbar-left svg[b-ua03fbuw9m] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: .85;
}

.mm-topbar-right[b-ua03fbuw9m] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.mm-admin-pill[b-ua03fbuw9m] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #cfd6e2;
    transition: background .2s;
    user-select: none;
}

.mm-admin-pill:hover[b-ua03fbuw9m] {
    background: rgba(255,255,255,.16);
    color: white;
}

.mm-dot[b-ua03fbuw9m] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
    flex-shrink: 0;
}

.mm-toplink[b-ua03fbuw9m] {
    color: currentColor;
    opacity: .85;
    font-size: 13px;
    cursor: pointer;
    transition: opacity .2s;
    text-decoration: none;
}

.mm-toplink:hover[b-ua03fbuw9m] {
    opacity: 1;
}

.mm-sep[b-ua03fbuw9m] {
    color: currentColor;
    opacity: .3;
    font-size: 13px;
}

/* ============ USER DROPDOWN ============ */
.mm-user[b-ua03fbuw9m] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.mm-user-avatar[b-ua03fbuw9m] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255,255,255,.3);
    flex-shrink: 0;
}

.mm-user-avatar img[b-ua03fbuw9m] {
    max-height: 100%;
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
}

.mm-user-name[b-ua03fbuw9m] {
    font-size: 13px;
    color: currentColor;
    opacity: .85;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-user-menu[b-ua03fbuw9m] {
    position: absolute;
    top: 100%;
    right: 0;
    padding-top: 8px;
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
    transform-origin: top right;
    transition: opacity .2s, transform .2s;
    z-index: -9;
    min-width: 160px;
    pointer-events: none;
}

.mm-user:hover .mm-user-menu[b-ua03fbuw9m] {
    opacity: 1;
    transform: scale(1) translateY(0);
    z-index: 100;
    pointer-events: auto;
}

.mm-user-menu-main[b-ua03fbuw9m] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 24px -4px rgba(41,54,73,.18);
    overflow: hidden;
    border: 1px solid #e5e9ef;
}

.mm-user-menu-item[b-ua03fbuw9m] {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    color: #293649;
    transition: .15s;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    white-space: nowrap;
}

.mm-user-menu-item:last-child[b-ua03fbuw9m] {
    border-bottom: none;
}

.mm-user-menu-item:hover[b-ua03fbuw9m] {
    background: #eff6ff;
    color: #3b82f6;
}

/* ============ HEADER ============ */
.mm-header[b-ua03fbuw9m] {
    background: rgba(255,255,255,.95);
    border-bottom: 1px solid #e5e9ef;
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: 100%;
}

.mm-header-inner[b-ua03fbuw9m] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 24px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
}

/* Logo */
.mm-logo[b-ua03fbuw9m] {
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    gap: 10px;
}

.mm-logo-img[b-ua03fbuw9m] {
    height: 48px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
    display: block;
}

.mm-cw-logo-icon[b-ua03fbuw9m] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6 0%, #3b8bf7 50%, #293649 100%);
    box-shadow: 0 4px 12px -2px rgba(59,130,246,.4);
    display: grid;
    place-items: center;
    color: white;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.05em;
    flex-shrink: 0;
    font-family: 'Manrope', 'Segoe UI', sans-serif;
}

.mm-cw-logo-text[b-ua03fbuw9m] {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #293649;
    white-space: nowrap;
    font-family: 'Manrope', 'Segoe UI', sans-serif;
}

.mm-cw-logo-text-blue[b-ua03fbuw9m] {
    color: #3b82f6;
}

/* Mobile search bar (ใต้ header) — ซ่อนบนเดสก์ท็อป, เปิดที่ ≤720px */
.mm-search-mobile[b-ua03fbuw9m] {
    display: none;
}

/* Search */
.mm-search[b-ua03fbuw9m] {
    position: relative;
    max-width: 560px;
    width: 100%;
    justify-self: center;
    display: flex;
    align-items: center;
}

.mm-search-icon[b-ua03fbuw9m] {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: #6b7280;
    pointer-events: none;
    z-index: 2;
    flex-shrink: 0;
}

.mm-search-input-wrap[b-ua03fbuw9m] {
    flex: 1;
    position: relative;
}

.mm-search-input-wrap input[b-ua03fbuw9m] {
    width: 100%;
    padding: 12px 70px 12px 44px;
    border: 1.5px solid #e5e9ef;
    border-radius: 12px;
    background: white;
    font-size: 14px;
    font-family: 'IBM Plex Sans Thai', inherit;
    color: #293649;
    transition: border-color .2s, box-shadow .2s;
    height: auto;
    appearance: none;
    -webkit-appearance: none;
}

.mm-search-input-wrap input[b-ua03fbuw9m]::placeholder {
    color: #b1b5bb;
}

.mm-search-input-wrap input:focus[b-ua03fbuw9m] {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59,130,246,.1) !important;
}

.mm-search-shortcut[b-ua03fbuw9m] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 6px;
    background: #f7f9fc;
    color: #6b7280;
    border: 1px solid #e5e9ef;
    pointer-events: none;
    z-index: 2;
    white-space: nowrap;
}

/* Search dropdown */
.mm-search-drop[b-ua03fbuw9m] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px -4px rgba(41,54,73,.15);
    overflow: hidden;
    z-index: 100;
    border: 1px solid #e5e9ef;
}

/* Header actions */
.mm-header-actions[b-ua03fbuw9m] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* Wishlist button */
.mm-wish-btn[b-ua03fbuw9m] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: white;
    border: 1.5px solid #e5e9ef;
    display: grid;
    place-items: center;
    transition: all .2s;
    color: #293649;
    cursor: pointer;
    flex-shrink: 0;
}

.mm-wish-btn:hover[b-ua03fbuw9m] {
    border-color: #ef4444;
    color: #ef4444;
    background: #fff5f5;
}

.mm-wish-btn svg[b-ua03fbuw9m] {
    width: 18px;
    height: 18px;
}

/* Cart button */
.mm-cart-btn[b-ua03fbuw9m] {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: white;
    border: 1.5px solid #e5e9ef;
    display: grid;
    place-items: center;
    transition: all .2s;
    color: #293649;
}

.mm-cart-btn:hover:not(.disabled)[b-ua03fbuw9m] {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

.mm-cart-icon[b-ua03fbuw9m] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
}

.mm-cart-icon svg[b-ua03fbuw9m] {
    width: 18px;
    height: 18px;
}

.mm-cart-badge[b-ua03fbuw9m] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #ef4444;
    color: white;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
    border: 2px solid white;
    pointer-events: none;
}

/* ============ NAV ============ */
.mm-nav[b-ua03fbuw9m] {
    background: white;
    border-bottom: 1px solid #e8e8e8;
    width: 100%;
    position: relative;
    z-index: 40;
}

.mm-nav-inner[b-ua03fbuw9m] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Category dropdown */
.mm-nav-cat[b-ua03fbuw9m] {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    margin: 10px 0;
    padding: 0 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    gap: 10px;
    flex-shrink: 0;
    transition: filter .2s, box-shadow .2s;
}

.mm-nav-cat:hover[b-ua03fbuw9m] {
    filter: brightness(1.08);
    box-shadow: 0 4px 12px -4px rgba(41,54,73,.25);
}

.mm-nav-cat svg[b-ua03fbuw9m] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.mm-nav-cat-text[b-ua03fbuw9m] {
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}

/* Scrolling links container — scroll here, not on mm-nav-inner,
   so the category dropdown above is never clipped */
.mm-nav-links-scroll[b-ua03fbuw9m] {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
}

.mm-nav-links-scroll[b-ua03fbuw9m]::-webkit-scrollbar {
    display: none;
}

.mm-nav-cat-drop[b-ua03fbuw9m] {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px -4px rgba(41,54,73,.18);
    z-index: 200;
    border: 1px solid #e8e8e8;
    padding: 6px;
}

.mm-nav-cat:hover .mm-nav-cat-drop[b-ua03fbuw9m] {
    display: block;
}

.mm-nav-cat-item[b-ua03fbuw9m] {
    position: relative;
    padding: 10px 14px;
    margin: 2px 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, background .15s, padding-left .15s;
}

.mm-nav-cat-item:hover[b-ua03fbuw9m] {
    color: #3b82f6;
    background: #eff6ff;
    padding-left: 20px;
}

.mm-nav-cat-item[b-ua03fbuw9m]::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #3b82f6;
    transform: translateY(-50%) scale(0);
    transition: transform .15s;
}

.mm-nav-cat-item:hover[b-ua03fbuw9m]::before {
    transform: translateY(-50%) scale(1);
}

/* Nav page links */
.mm-nav-link[b-ua03fbuw9m] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.mm-nav-link a[b-ua03fbuw9m] {
    display: flex;
    align-items: center;
    height: 40px;
    margin: 10px 0;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    transition: color .2s, background .2s;
    white-space: nowrap;
}

.mm-nav-link a:hover[b-ua03fbuw9m] {
    color: #3b82f6;
    background: #f7f9fc;
}

.mm-nav-link a.active[b-ua03fbuw9m] {
    color: #3b82f6;
    background: #eff6ff;
    font-weight: 600;
}

.mm-hot-badge[b-ua03fbuw9m] {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #fee2e2;
    color: #ef4444;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    vertical-align: middle;
}

/* ============ SEARCH RESULTS (shared) ============ */
.PerFound[b-ua03fbuw9m] {
    display: flex;
    padding: 10px 15px;
    cursor: pointer;
    background: white;
    transition: background .1s;
    border-bottom: 1px dashed #e5e9ef;
}

.PerFound.Selected[b-ua03fbuw9m],
.PerFound:hover[b-ua03fbuw9m] {
    background: #f7f9fc;
}

.PerFound .ProductImg[b-ua03fbuw9m] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    margin-right: 10px;
    display: grid;
    place-items: center;
}

.PerFound .ProductImg img[b-ua03fbuw9m] {
    max-width: 100%;
    max-height: 100%;
}

.PerFound .ProductName[b-ua03fbuw9m] {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.PerFound .ProductName .Text[b-ua03fbuw9m] {
    text-overflow: ellipsis;
    overflow: hidden;
    height: fit-content;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 14px;
    color: #293649;
}

.PerFound .ProductPrice[b-ua03fbuw9m] {
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #ef4444;
    font-size: 13px;
    font-weight: 600;
}

.SearchFirstList[b-ua03fbuw9m]::after {
    font-family: GoogleFont;
    content: "\e8b6";
    font-size: 18px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 200, 'opsz' 20;
    color: #6b7280;
}

/* ============ CART PREVIEW (shared) ============ */
.mm-cart-btn:hover:not(.disabled) .PreviewCartMain[b-ua03fbuw9m] {
    transform: scale(1);
}

.PreviewCartMain[b-ua03fbuw9m] {
    padding-top: 10px;
    transform: scale(0);
    position: absolute;
    top: 100%;
    right: 0px;
    width: 380px;
    border-radius: 5px;
    transition: 0.3s;
    transform-origin: calc(100% - 22px) 0px;
    z-index: 60;
}

.PreviewCart[b-ua03fbuw9m] {
    background: white;
    box-shadow: 0 8px 24px -4px rgba(41,54,73,.15);
    height: 100%;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e9ef;
}

.PreviewCart .Title[b-ua03fbuw9m] {
    padding-left: 14px;
    height: 40px;
    display: flex;
    align-items: center;
    color: rgba(0,0,0,.35);
    font-size: 13px;
    border-bottom: 1px solid #f3f4f6;
}

.PreviewCart .Per[b-ua03fbuw9m] {
    height: 62px;
    padding: 10px;
    display: flex;
    transition: .2s;
    background: white;
    cursor: pointer;
}

.PreviewCart .Per.Single[b-ua03fbuw9m] {
    background: #ffffff;
}

.PreviewCart .Per.Double[b-ua03fbuw9m] {
    background: #f9fafb;
}

.PreviewCart .Per.CantSale[b-ua03fbuw9m] {
    filter: brightness(0.95);
    opacity: 0.75;
    cursor: not-allowed;
}

.PreviewCart .Per:hover[b-ua03fbuw9m] {
    background: #f3f4f6;
}

.PreviewCart .Per .ProductImgDiv[b-ua03fbuw9m] {
    height: 42px;
    width: 42px;
    min-width: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.PreviewCart .Per .ProductImgDiv .ProductImg[b-ua03fbuw9m] {
    max-height: 100%;
    max-width: 100%;
}

.PreviewCart .Per .DetailZone[b-ua03fbuw9m] {
    display: flex;
    font-size: 13px;
    color: #293649;
    flex: 1;
}

.PreviewCart .Per .DetailZone .Name[b-ua03fbuw9m] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0px 10px;
    flex: 1;
}

.PreviewCart .Per .DetailZone .Price[b-ua03fbuw9m] {
    min-width: 65px;
    width: 100px;
    text-align: right;
    color: #ef4444;
    font-size: 12px;
}

.PreviewCartDetail[b-ua03fbuw9m] {
    height: 60px;
    padding: 10px 14px;
    color: #293649;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f3f4f6;
}

.GotoCartButton[b-ua03fbuw9m] {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.inputdisabled[b-ua03fbuw9m] {
    background-color: white;
    color: #606060;
    opacity: 1;
    -webkit-text-fill-color: #606060;
}

/* ============ LEGACY NEW THEME (kept for MainLayout compatibility) ============ */
.RowMaxWidth[b-ua03fbuw9m] {
    position: relative;
    max-width: 1110px;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: end;
}

.ImageVW[b-ua03fbuw9m] {
    max-width: 100%;
}

.ImageVH[b-ua03fbuw9m] {
    max-height: 100%;
}

/* ============ OLD THEME ============ */
.MemberAndLanguageBar[b-ua03fbuw9m] {
    height: 30px;
    display: flex;
    margin-bottom: 15px;
    position: sticky;
}

    .MemberAndLanguageBar .ZoneLeft[b-ua03fbuw9m] {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .MemberAndLanguageBar .ZoneRight[b-ua03fbuw9m] {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: end;
    }

.LoginRegisterZone[b-ua03fbuw9m] {
    font-size: 14px;
    display: flex;
}

    .LoginRegisterZone .SlashDiv[b-ua03fbuw9m] {
        border-left: solid 1px rgb(146, 146, 146);
        margin: 0px 15px;
    }

    .LoginRegisterZone .DivText[b-ua03fbuw9m] {
        cursor: pointer;
    }

.LoginedZone[b-ua03fbuw9m] {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .LoginedZone .ImageZone[b-ua03fbuw9m] {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        overflow: hidden;
    }

.ImageZone .MiniImageProfile[b-ua03fbuw9m] {
    max-height: 100%;
    min-height: 100%;
    min-width: 100%;
}

    .LoginedZone .UserName[b-ua03fbuw9m] {
        margin-left: 15px;
        font-size: 14px;
    }

.LoginedZone:hover .CustomerMenu[b-ua03fbuw9m] {
    z-index: 9;
    opacity: 1;
    transform: scale(1);
}

.CustomerMenu[b-ua03fbuw9m] {
    padding-top: 10px;
    opacity: 0;
    transform: scale(0);
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;
    z-index: -9;
    border-radius: 5px;
    transition: 0.3s;
    transform-origin: 107.75px top;
}

.CustomerMenuMain[b-ua03fbuw9m] {
    background: white;
    box-shadow: rgb(152, 152, 152) 0px 0px 5px;
}

    .CustomerMenuMain .Per[b-ua03fbuw9m] {
        display: flex;
        align-items: center;
        height: 40px;
        width: 100%;
        padding-left: 15px;
        font-size: 14px;
        transition: 0.25s;
        cursor: pointer;
    }

        .CustomerMenuMain .Per:hover[b-ua03fbuw9m] {
            color: #00bfa5;
        }

.SearchBar[b-ua03fbuw9m] {
    margin-left: 15px;
    flex: 1;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 2px;
    background: white;
}

    .SearchBar .InputSearchBar[b-ua03fbuw9m] {
        height: 100%;
        flex: 1;
        position: relative;
    }

        .SearchBar .InputSearchBar input[b-ua03fbuw9m] {
            height: 100%;
        }

            .SearchBar .InputSearchBar input:focus[b-ua03fbuw9m] {
                border: solid 1px black !important;
                box-shadow: none;
                outline: none;
            }

    .SearchBar .SearchButton[b-ua03fbuw9m] {
        width: 60px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-left: 2px;
    }

        .SearchBar .SearchButton[b-ua03fbuw9m]::after {
            font-family: GoogleFont;
            content: "\e8b6";
            font-size: 18px;
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 200, 'opsz' 20;
        }

.Ribbin[b-ua03fbuw9m] {
    width: 100%;
    display: block;
    margin-top: 10px;
    position: relative;
}

.BasketProducts[b-ua03fbuw9m] {
    position: relative;
    display: flex;
    align-items: center;
    color: white;
    background: #1d2327;
    padding: 5px 20px;
    border-radius: 5px;
    user-select: none;
    width: 140px;
    height: 37px;
}

    .BasketProducts .FakeButton[b-ua03fbuw9m] {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        .BasketProducts .FakeButton[b-ua03fbuw9m]::after {
            font-family: GoogleFont;
            content: "\e8cc";
            font-size: 18px;
            margin-left: -2px;
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 200, 'opsz' 20;
            padding-left: 5px;
        }

.DropDownCatagory[b-ua03fbuw9m] {
    position: relative;
    background: #1d2327;
    color: white;
    padding: 10px;
    display: flex;
    align-items: center;
    width: 200px;
    max-height: 40px;
    overflow: hidden;
    font-size: 14px;
}

    .DropDownCatagory .Text[b-ua03fbuw9m] {
        display: flex;
        align-items: center;
        user-select: none;
        cursor: pointer;
    }

        .DropDownCatagory .Text[b-ua03fbuw9m]::before {
            font-family: GoogleFont;
            content: "\e5d2";
            font-size: 18px;
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 200, 'opsz' 20;
            padding-right: 15px;
        }

        .DropDownCatagory .Text[b-ua03fbuw9m]::after {
            font-family: GoogleFont;
            content: "\e5c5";
            font-size: 18px;
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 200, 'opsz' 20;
            padding-left: 55px;
        }

    .DropDownCatagory .ShowOnHover[b-ua03fbuw9m] {
        opacity: 0;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        transition: 0.25s;
        z-index: 10;
        box-shadow: rgb(152, 152, 152) 0px 0px 10px;
    }

        .DropDownCatagory .ShowOnHover .Per[b-ua03fbuw9m] {
            display: flex;
            align-items: center;
            padding-left: 10px;
            color: rgb(108, 108, 108);
            background: white;
            border: solid 1px rgb(226, 225, 225);
            border-top: none;
            height: 47px;
            transition: 0.25s;
            user-select: none;
            cursor: pointer;
        }

            .DropDownCatagory .ShowOnHover .Per:hover[b-ua03fbuw9m] {
                color: rgb(0, 0, 0);
            }

    .DropDownCatagory:hover .ShowOnHover[b-ua03fbuw9m] {
        opacity: 1;
    }

    .DropDownCatagory:hover[b-ua03fbuw9m] {
        overflow: initial;
    }

.Menu[b-ua03fbuw9m] {
    display: flex;
    padding-left: 10px;
    transition: 0.25s;
    user-select: none;
}

    .Menu .Per[b-ua03fbuw9m] {
        color: rgb(108, 108, 108);
        padding: 0px 15px;
        border-left: solid 1px rgb(219, 219, 219);
        transition: 0.25s;
        cursor: pointer;
        font-size: 14px;
    }

        .Menu .Per:hover[b-ua03fbuw9m] {
            color: rgb(34, 34, 34);
        }

        .Menu .Per a[b-ua03fbuw9m] {
            color: rgb(108, 108, 108);
            text-decoration: none;
        }

.ImgLogo[b-ua03fbuw9m] {
    cursor: pointer;
    width: 200px;
}

.NumberCountInCartDiv[b-ua03fbuw9m] {
    position: absolute;
    top: -5px;
    right: 0px;
    width: 30px;
    height: 20px;
    background: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

.BasketProducts:hover:not(.disabled) .PreviewCartMain[b-ua03fbuw9m] {
    transform: scale(1);
}

.SeachBarPreviewMain[b-ua03fbuw9m] {
    transform: scale(1);
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;
    background: white;
    border-radius: 5px;
    transition: 0.3s;
    z-index: 3;
    box-shadow: rgb(152, 152, 152) 0px 0px 5px;
}

.SeachBarPreview[b-ua03fbuw9m] {
    height: 100%;
    width: 100%;
}

/* ============ HAMBURGER BUTTON ============ */
.mm-hamburger[b-ua03fbuw9m] {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: white;
    border: 1.5px solid #e5e9ef;
    place-items: center;
    cursor: pointer;
    color: #293649;
    transition: all .2s;
    flex-shrink: 0;
}

.mm-hamburger:hover[b-ua03fbuw9m] {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

.mm-hamburger svg[b-ua03fbuw9m] {
    width: 18px;
    height: 18px;
}

/* ============ MOBILE DRAWER ============ */
.mm-mobile-overlay[b-ua03fbuw9m] {
    position: fixed;
    inset: 0;
    background: rgba(41, 54, 73, 0.45);
    z-index: 200;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.mm-mobile-drawer[b-ua03fbuw9m] {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100dvh;
    background: white;
    z-index: 201;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 24px -4px rgba(41,54,73,.18);
}

.mm-mobile-drawer--open[b-ua03fbuw9m] {
    transform: translateX(0);
}

.mm-mobile-drawer-head[b-ua03fbuw9m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #e5e9ef;
    font-weight: 700;
    font-size: 16px;
    color: #293649;
    flex-shrink: 0;
}

.mm-mobile-close[b-ua03fbuw9m] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    cursor: pointer;
    color: #6b7280;
    transition: all .15s;
}

.mm-mobile-close:hover[b-ua03fbuw9m] {
    background: #f3f4f6;
    color: #293649;
}

.mm-mobile-close svg[b-ua03fbuw9m] {
    width: 18px;
    height: 18px;
}

.mm-mobile-drawer-body[b-ua03fbuw9m] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}

.mm-mobile-section-label[b-ua03fbuw9m] {
    padding: 8px 20px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #b1b5bb;
}

.mm-mobile-item[b-ua03fbuw9m] {
    display: flex;
    align-items: center;
    padding: 13px 20px;
    font-size: 15px;
    color: #293649;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
    border-left: 3px solid transparent;
}

.mm-mobile-item:hover[b-ua03fbuw9m] {
    background: #f7f9fc;
}

.mm-mobile-item--active[b-ua03fbuw9m] {
    color: #3b82f6;
    border-left-color: #3b82f6;
    background: #eff6ff;
    font-weight: 600;
}

.mm-mobile-divider[b-ua03fbuw9m] {
    height: 1px;
    background: #e5e9ef;
    margin: 10px 20px;
}

/* ============ RESPONSIVE ============ */

/* 880px — tablet: shrink header actions */
@media (max-width: 880px) {
    .mm-header-inner[b-ua03fbuw9m] {
        gap: 16px;
    }
    .mm-search[b-ua03fbuw9m] {
        max-width: 360px;
    }
}

/* 720px — mobile */
@media (max-width: 720px) {
    /* Topbar: hide left info */
    .mm-topbar-left[b-ua03fbuw9m] {
        display: none;
    }
    .mm-topbar-inner[b-ua03fbuw9m] {
        justify-content: flex-end;
        padding: 0 18px;
    }

    /* Header — โลโก้ซ้าย, 3 ปุ่มชิดขวาสุด */
    .mm-header-inner[b-ua03fbuw9m] {
        grid-template-columns: 1fr auto;
        padding: 12px 14px;
        gap: 10px;
    }
    .mm-header-inner > .mm-search[b-ua03fbuw9m] {
        display: none;
    }
    .mm-header-actions[b-ua03fbuw9m] {
        justify-self: end;
        margin-left: auto;
    }

    /* header + search bar มือถือ ติดบนพร้อมกันตอน scroll */
    .mm-headwrap[b-ua03fbuw9m] {
        position: sticky;
        top: 0;
        z-index: 50;
    }
    .mm-headwrap .mm-header[b-ua03fbuw9m] {
        position: static;
    }

    /* แสดง search bar มือถือใต้ header */
    .mm-search-mobile[b-ua03fbuw9m] {
        display: block;
        padding: 10px 18px;
        background: #fff;
        border-bottom: 1px solid #e5e9ef;
    }
    .mm-search-mobile .mm-search[b-ua03fbuw9m] {
        display: flex;
        max-width: none;
    }
    .mm-search-mobile .mm-search-input-wrap input[b-ua03fbuw9m] {
        padding-right: 16px;
    }
    .mm-cw-logo-text[b-ua03fbuw9m] {
        font-size: 18px;
    }
    .mm-header-actions[b-ua03fbuw9m] {
        gap: 6px;
    }

    /* Show hamburger, hide desktop nav */
    .mm-hamburger[b-ua03fbuw9m] {
        display: grid;
    }
    .mm-nav[b-ua03fbuw9m] {
        display: none;
    }

    /* มือถือไม่มี hover จริง — กด :hover ค้างทำให้ preview ตะกร้าโผล่ทับ search bar ด้านล่างแบบเพี้ยน
       บนมือถือแตะไอคอนตะกร้าจะ navigate ไปหน้า /Cart ตรงอยู่แล้ว (ดู HeaderZone.razor mm-cart-icon @onclick) จึงไม่จำเป็นต้องมี preview นี้ */
    .PreviewCartMain[b-ua03fbuw9m] {
        display: none !important;
    }
}

/* 480px — small mobile */
@media (max-width: 480px) {
    .mm-header-inner[b-ua03fbuw9m] {
        padding: 10px 14px;
        gap: 8px;
    }
    .mm-topbar-inner[b-ua03fbuw9m] {
        padding: 0 14px;
    }
    .mm-cw-logo-icon[b-ua03fbuw9m] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .mm-cw-logo-text[b-ua03fbuw9m] {
        font-size: 16px;
    }
    .mm-wish-btn[b-ua03fbuw9m],
    .mm-cart-btn[b-ua03fbuw9m] {
        width: 38px;
        height: 38px;
        border-radius: 9px;
    }
}
/* /Components/Pages/FrontEnd/LoginRegistor/Componant/AlertConfirmEmail.razor.rz.scp.css */
body[b-irkymmhigl] {
}
/* /Components/Pages/FrontEnd/LoginRegistor/LoginRegistorDialog.razor.rz.scp.css */
@font-face {
    font-family: 'GoogleFont';
    font-style: normal;
    font-weight: 100 700;
    src: url('../fonts/google-font.woff2') format('woff2');
}

.SuccessIcon[b-x0xwsrsvl3] {
    width: 60px;
    height: 60px;
    background: #00bfa5;
    border-radius: 50%;
    margin-bottom: 20px;
}

.SuccessIcon[b-x0xwsrsvl3]::after {
    font-family: GoogleFont;
    content: "\e876";
    font-size: 55px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 200, 'opsz' 20;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.CloseLoginButton[b-x0xwsrsvl3] {
    position: absolute;
    right: 0;
    padding: 5px 10px;
    width: fit-content;
    cursor: pointer;
}

    .CloseLoginButton[b-x0xwsrsvl3]::after {
        font-family: GoogleFont;
        content: "\e5cd";
        font-size: 18px;
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 200, 'opsz' 20;
    }

.MainLoginRegistor[b-x0xwsrsvl3] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.3);
    padding: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.25s;
    overflow: auto;
}

.MainLoginActive[b-x0xwsrsvl3] {
    opacity: 1.0;
    z-index: 99;
}

.MainLoginInActive[b-x0xwsrsvl3] {
    opacity: 0.0;
    z-index: -9;
}

.MainDivLoginActive[b-x0xwsrsvl3] {
    transform: translateY(0px);
}

.MainDivLoginInActive[b-x0xwsrsvl3] {
    transform: translateY(-30px);
}

.MiddleDiv[b-x0xwsrsvl3] {
    position: relative;
    width: 400px;
    height: 480px;
    background: white;
    margin: 0 auto;
    border-radius: 5px;
    transition: 0.25s;
    overflow: hidden;
}

.DivZone1[b-x0xwsrsvl3] {
    padding: 30px;
    height: 100px;
    font-size: 20px;
}

.DivZone2[b-x0xwsrsvl3] {
    padding: 0px 30px;
}

    .DivZone2 .InputBar[b-x0xwsrsvl3] {
        width: 100%;
        height: 40px;
        font-size: 15px;
        padding-left: 10px;
    }

    .DivZone2 .InputMessage[b-x0xwsrsvl3] {
        height: 15px;
        width: 100%;
        color: #ff424f;
        font-size: 12px;
    }

    .LoginButton[b-x0xwsrsvl3] {
        margin-top: 10px;
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.2s;
    }

    .LoginButton:hover[b-x0xwsrsvl3] {
        filter: brightness(1.2);
    }

    .DivZone2 .ForgetZone[b-x0xwsrsvl3] {
        display: flex;
        justify-content: space-between;
        margin: 10px 0px;
    }

        .DivZone2 .ForgetZone .Text[b-x0xwsrsvl3] {
            font-size: 12px;
            color: #05a;
            cursor: pointer;
        }

.DivZone3[b-x0xwsrsvl3] {
    padding: 0px 30px;
}

    .DivZone3 .OrZone[b-x0xwsrsvl3] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .DivZone3 .OrZone .FakeUnderline[b-x0xwsrsvl3] {
            background: rgba(0,0,0,.3);
            height: 1px;
            width: 143px;
        }

        .DivZone3 .OrZone .Or[b-x0xwsrsvl3] {
            color: rgba(0,0,0,.3);
            font-size: 14px;
            padding: 0 15px;
        }

    .DivZone3 .LinkZone[b-x0xwsrsvl3] {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }

        .DivZone3 .LinkZone .Per[b-x0xwsrsvl3] {
            width: 165px;
            height: 40px;
            border: 1px solid rgba(0,0,0,.3);
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

    .DivZone3 .RegisterZone[b-x0xwsrsvl3] {
        font-size: 15px;
        margin-top: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .DivZone3 .RegisterZone .RegisterText[b-x0xwsrsvl3] {
            color: rgba(0,0,0,.3);
        }

        .DivZone3 .RegisterZone .RegisterButton[b-x0xwsrsvl3] {
            margin-left: 15px;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
        }

.ConditionRegisterMain[b-x0xwsrsvl3] {
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
}

@media screen and (max-height: 530px) {
    .MainLoginRegistor[b-x0xwsrsvl3] {
        align-items: flex-start;
    }
}

/* แจ้งสมาชิกหน้าร้าน (POS) — โทนฟ้าอ่อนแบบ pill ของหน้าร้าน [2026-10] */
.PosMemberNotice[b-x0xwsrsvl3] {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #293649;
    font-size: 12.5px;
    line-height: 1.6;
    text-align: left;
}

.PosMemberNoticeTitle[b-x0xwsrsvl3] {
    color: #3b82f6;
    font-weight: 600;
    margin-bottom: 2px;
}
/* /Components/Pages/FrontEnd/Product/ProductList.razor.rz.scp.css */
@font-face {
    font-family: 'GoogleFont';
    font-style: normal;
    font-weight: 100 700;
    src: url('../fonts/google-font.woff2') format('woff2');
}

/* =====================================================
   PRODUCT LIST  ·  modern theme (matches Index/example)
   palette: navy #293649 · blue #3b82f6 · pale #eff6ff
   bg #f7f9fc · line #e5e9ef · gray #6b7280
   ===================================================== */

.mm-pl-shell[b-2pl2v7nhlh] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
    font-family: 'IBM Plex Sans Thai', 'Manrope', -apple-system, sans-serif;
    color: #293649;
}

/* ============ HEADER BAR ============ */
.mm-pl-header[b-2pl2v7nhlh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 14px;
}

.mm-pl-breadcrumb[b-2pl2v7nhlh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
}

.mm-pl-bc-link[b-2pl2v7nhlh] {
    color: #6b7280;
    cursor: pointer;
    transition: color .18s;
    font-weight: 500;
}

    .mm-pl-bc-link:hover[b-2pl2v7nhlh] {
        color: #3b82f6;
    }

.mm-pl-bc-sep[b-2pl2v7nhlh] {
    width: 12px;
    height: 12px;
    color: #b1b5bb;
    flex-shrink: 0;
}

.mm-pl-bc-current[b-2pl2v7nhlh] {
    color: #293649;
    font-weight: 600;
}

.mm-pl-toolbar[b-2pl2v7nhlh] {
    position: relative;
    background: white;
    border: 1px solid #e5e9ef;
    border-radius: 14px;
    padding: 10px 14px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 1px 2px rgba(41,54,73,.04);
}

/* view switch (segmented) */
.mm-pl-view-switch[b-2pl2v7nhlh] {
    display: flex;
    background: #f7f9fc;
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
}

.mm-pl-view-btn[b-2pl2v7nhlh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}

    .mm-pl-view-btn svg[b-2pl2v7nhlh] {
        width: 16px;
        height: 16px;
    }

    .mm-pl-view-btn:hover[b-2pl2v7nhlh] {
        color: #293649;
    }

    .mm-pl-view-btn.active[b-2pl2v7nhlh] {
        background: white;
        color: #3b82f6;
        box-shadow: 0 1px 2px rgba(41,54,73,.06), 0 2px 6px rgba(41,54,73,.05);
    }

/* count — อยู่กึ่งกลาง toolbar (ระหว่าง view-switch กับ sort-wrap) */
.mm-pl-count[b-2pl2v7nhlh] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
    pointer-events: none;
}

    .mm-pl-count .mm-pl-count-num[b-2pl2v7nhlh] {
        font-family: 'Manrope', sans-serif;
        font-weight: 700;
        font-size: 18px;
        letter-spacing: -.01em;
    }

    .mm-pl-count .mm-pl-count-label[b-2pl2v7nhlh] {
        font-size: 13px;
        color: #6b7280;
    }

/* sort */
.mm-pl-sort-wrap[b-2pl2v7nhlh] {
    position: relative;
    display: flex;
    align-items: center;
}

.mm-pl-sort-ico[b-2pl2v7nhlh] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #6b7280;
    pointer-events: none;
}

.mm-pl-sort[b-2pl2v7nhlh] {
    appearance: none;
    -webkit-appearance: none;
    background: white;
    border: 1.5px solid #e5e9ef;
    border-radius: 10px;
    padding: 9px 36px 9px 36px;
    font-size: 13px;
    font-weight: 500;
    color: #293649;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s;
    min-width: 200px;
}

    .mm-pl-sort:hover[b-2pl2v7nhlh] {
        border-color: #3b82f6;
    }

    .mm-pl-sort:focus[b-2pl2v7nhlh] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59,130,246,.12);
    }

.mm-pl-chev[b-2pl2v7nhlh] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: #6b7280;
    pointer-events: none;
}

/* ============ MAIN LAYOUT ============ */
.mm-pl-main[b-2pl2v7nhlh] {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
    align-items: start;
}

/* ============ SIDEBAR ============ */
.mm-pl-sidebar[b-2pl2v7nhlh] {
    position: sticky;
    top: 20px;
}

.mm-pl-side-card[b-2pl2v7nhlh] {
    background: white;
    border: 1px solid #e5e9ef;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(41,54,73,.04);
}

.mm-pl-side-head[b-2pl2v7nhlh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #293649;
    padding: 4px 6px 12px 6px;
    border-bottom: 1px solid #f0f2f5;
    margin-bottom: 8px;
    letter-spacing: -.01em;
}

    .mm-pl-side-head svg[b-2pl2v7nhlh] {
        width: 16px;
        height: 16px;
        color: #3b82f6;
    }

.mm-pl-side-head-title[b-2pl2v7nhlh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ปุ่มหมวดหมู่ใน toolbar + แถบ chip มือถือ = ใช้เฉพาะจอ ≤820px */
.mm-pl-cat-more[b-2pl2v7nhlh] {
    display: none;
}

.mm-pl-cat-mobile[b-2pl2v7nhlh] {
    display: none;
}

/* wrapper ยุบ/แสดง — เดสก์ท็อปทำตัวโปร่งใส (ไม่มีผลกับ layout) */
.mm-pl-stickybar-body[b-2pl2v7nhlh],
.mm-pl-stickybar-inner[b-2pl2v7nhlh] {
    display: contents;
}

/* ปุ่มยุบ/แสดงแถบตัวเลือก — เฉพาะจอมือถือ */
.mm-pl-stickybar-toggle[b-2pl2v7nhlh] {
    display: none;
}

.mm-pl-cat-list[b-2pl2v7nhlh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 70vh;
    overflow-y: auto;
}

    .mm-pl-cat-list[b-2pl2v7nhlh]::-webkit-scrollbar {
        width: 6px;
    }

    .mm-pl-cat-list[b-2pl2v7nhlh]::-webkit-scrollbar-thumb {
        background: #e5e9ef;
        border-radius: 3px;
    }

.mm-pl-cat-item[b-2pl2v7nhlh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 9px;
    cursor: pointer;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    user-select: none;
    transition: all .18s;
}

    .mm-pl-cat-item:hover[b-2pl2v7nhlh] {
        background: #f7f9fc;
        color: #293649;
    }

        .mm-pl-cat-item:hover .mm-pl-cat-dot[b-2pl2v7nhlh] {
            background: #b1b5bb;
        }

    .mm-pl-cat-item.active[b-2pl2v7nhlh] {
        background: #eff6ff;
        color: #3b82f6;
        font-weight: 600;
    }

        .mm-pl-cat-item.active .mm-pl-cat-dot[b-2pl2v7nhlh] {
            background: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59,130,246,.15);
        }

.mm-pl-cat-dot[b-2pl2v7nhlh] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d8dde5;
    flex-shrink: 0;
    transition: all .18s;
}

.mm-pl-cat-text[b-2pl2v7nhlh] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============ CONTENT ============ */
.mm-pl-content[b-2pl2v7nhlh] {
    min-width: 0;
}

/* ============ GRID VIEW ============ */
.mm-pl-grid[b-2pl2v7nhlh] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    user-select: none;
}

/* empty state */
.mm-pl-empty[b-2pl2v7nhlh] {
    grid-column: 1 / -1;
    background: white;
    border: 1px dashed #e5e9ef;
    border-radius: 14px;
    padding: 60px 24px;
    text-align: center;
    color: #6b7280;
}

    .mm-pl-empty svg[b-2pl2v7nhlh] {
        width: 42px;
        height: 42px;
        color: #b1b5bb;
        margin: 0 auto 14px;
    }

.mm-pl-empty-title[b-2pl2v7nhlh] {
    font-size: 16px;
    font-weight: 700;
    color: #293649;
    margin-bottom: 4px;
}

.mm-pl-empty-sub[b-2pl2v7nhlh] {
    font-size: 13px;
    color: #6b7280;
}

/* ============ PRODUCT CARD ============ */
.mm-pl-card[b-2pl2v7nhlh] {
    background: white;
    border: 1.5px solid #e5e9ef;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: all .25s;
    position: relative;
}

    .mm-pl-card:hover[b-2pl2v7nhlh] {
        border-color: #3b82f6;
        transform: translateY(-4px);
        box-shadow: 0 12px 28px -8px rgba(59,130,246,.20), 0 4px 12px -2px rgba(41,54,73,.08);
    }

.mm-pl-card-img[b-2pl2v7nhlh] {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mm-pl-card-img img[b-2pl2v7nhlh] {
        max-width: 88%;
        max-height: 88%;
        object-fit: contain;
        transition: transform .3s;
    }

.mm-pl-card:hover .mm-pl-card-img img[b-2pl2v7nhlh] {
    transform: scale(1.06);
}

/* tag */
.mm-pl-tag[b-2pl2v7nhlh] {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    pointer-events: none;
    z-index: 1;
}

.mm-pl-tag-best[b-2pl2v7nhlh] {
    background: #293649;
    color: white;
}

.mm-pl-tag-out[b-2pl2v7nhlh] {
    background: #ef4444;
    color: white;
}

/* card info */
.mm-pl-card-info[b-2pl2v7nhlh] {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.mm-pl-card-name[b-2pl2v7nhlh] {
    font-size: 14px;
    font-weight: 600;
    color: #293649;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    min-height: 2.8em;
    flex: 1;
}

/* คำอธิบายสินค้าอย่างสั้น บนการ์ด — 2 บรรทัด ตัดด้วย … */
.mm-pl-card-short[b-2pl2v7nhlh] {
    font-size: 12.5px;
    line-height: 1.5;
    color: #6b7a8f;
    margin-top: -6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.mm-pl-card-foot[b-2pl2v7nhlh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #f0f2f5;
    margin-top: auto;
}

.mm-pl-card-price[b-2pl2v7nhlh] {
    font-family: 'Manrope', 'IBM Plex Sans Thai', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #293649;
    letter-spacing: -.01em;
}

.mm-pl-card-cta[b-2pl2v7nhlh] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #293649;
    color: white;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all .2s;
}

    .mm-pl-card-cta svg[b-2pl2v7nhlh] {
        width: 16px;
        height: 16px;
    }

.mm-pl-card:hover .mm-pl-card-cta[b-2pl2v7nhlh] {
    background: #3b82f6;
    transform: scale(1.06);
}

/* stock-out card state */
.mm-pl-card.is-out[b-2pl2v7nhlh] {
    cursor: pointer;
}

    .mm-pl-card.is-out .mm-pl-card-img img[b-2pl2v7nhlh] {
        filter: grayscale(.6) opacity(.7);
    }

    .mm-pl-card.is-out .mm-pl-card-price[b-2pl2v7nhlh] {
        color: #94a3b8;
    }

    .mm-pl-card.is-out .mm-pl-card-cta[b-2pl2v7nhlh] {
        background: #b1b5bb;
    }

    .mm-pl-card.is-out:hover[b-2pl2v7nhlh] {
        border-color: #ef4444;
        box-shadow: 0 12px 28px -8px rgba(239,68,68,.18), 0 4px 12px -2px rgba(41,54,73,.08);
    }

        .mm-pl-card.is-out:hover .mm-pl-card-cta[b-2pl2v7nhlh] {
            background: #ef4444;
        }

/* ============ ROW VIEW ============ */
.mm-pl-row-wrap[b-2pl2v7nhlh] {
    background: white;
    border: 1px solid #e5e9ef;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(41,54,73,.04);
}

.mm-pl-table-scroll[b-2pl2v7nhlh] {
    overflow-x: auto;
}

.mm-pl-table[b-2pl2v7nhlh] {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}

    .mm-pl-table thead th[b-2pl2v7nhlh] {
        background: #f7f9fc;
        color: #6b7280;
        font-weight: 600;
        font-size: 11px;
        letter-spacing: .08em;
        text-transform: uppercase;
        text-align: left;
        padding: 14px 12px;
        border-bottom: 1px solid #e5e9ef;
        white-space: nowrap;
    }

.mm-pl-th-code[b-2pl2v7nhlh] {
    width: 110px;
}

.mm-pl-th-img[b-2pl2v7nhlh] {
    width: 76px;
}

.mm-pl-th-name[b-2pl2v7nhlh] {
    width: auto;
}

.mm-pl-th-price[b-2pl2v7nhlh] {
    width: 110px;
    text-align: right !important;
}

.mm-pl-th-unit[b-2pl2v7nhlh] {
    width: 130px;
    text-align: center !important;
}

.mm-pl-th-qty[b-2pl2v7nhlh] {
    width: 160px;
    text-align: center !important;
}

.mm-pl-th-add[b-2pl2v7nhlh] {
    width: 56px;
}

.mm-pl-tr[b-2pl2v7nhlh] {
    transition: background .18s;
}

    .mm-pl-tr:hover[b-2pl2v7nhlh] {
        background: #fafbfd;
    }

    .mm-pl-tr td[b-2pl2v7nhlh] {
        padding: 12px;
        border-bottom: 1px solid #f0f2f5;
        vertical-align: middle;
    }

    .mm-pl-tr:last-child td[b-2pl2v7nhlh] {
        border-bottom: none;
    }

.mm-pl-code-pill[b-2pl2v7nhlh] {
    display: inline-block;
    background: #eff6ff;
    color: #3b82f6;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', 'Manrope', monospace;
    letter-spacing: .02em;
}

.mm-pl-thumb[b-2pl2v7nhlh] {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
    border: 1px solid #e5e9ef;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: zoom-in;
    transition: all .18s;
}

    .mm-pl-thumb:hover[b-2pl2v7nhlh] {
        border-color: #3b82f6;
        transform: scale(1.04);
    }

    .mm-pl-thumb img[b-2pl2v7nhlh] {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
    }

.mm-pl-row-name[b-2pl2v7nhlh] {
    font-size: 13px;
    font-weight: 500;
    color: #293649;
    line-height: 1.45;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.mm-pl-td-price[b-2pl2v7nhlh] {
    text-align: right;
}

.mm-pl-row-price[b-2pl2v7nhlh] {
    font-family: 'Manrope', 'IBM Plex Sans Thai', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #293649;
    letter-spacing: -.01em;
}

.mm-pl-td-unit[b-2pl2v7nhlh] {
    text-align: center;
}

.mm-pl-row-unit[b-2pl2v7nhlh] {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}

.mm-pl-row-unit-x[b-2pl2v7nhlh] {
    color: #b1b5bb;
    font-weight: 400;
}

.mm-pl-td-qty[b-2pl2v7nhlh] {
    text-align: center;
}

.mm-pl-qty-cell[b-2pl2v7nhlh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f7f9fc;
    border: 1px solid #e5e9ef;
    border-radius: 8px;
    padding: 4px 10px;
    transition: all .18s;
}

    .mm-pl-qty-cell:focus-within[b-2pl2v7nhlh] {
        border-color: #3b82f6;
        background: white;
        box-shadow: 0 0 0 3px rgba(59,130,246,.12);
    }

.mm-pl-qty-input[b-2pl2v7nhlh] {
    width: 44px;
    height: 24px;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    color: #293649;
    font-family: inherit;
}

    .mm-pl-qty-input:focus[b-2pl2v7nhlh] {
        outline: none;
        border: none !important;
        box-shadow: none !important;
    }

.mm-pl-qty-slash[b-2pl2v7nhlh] {
    color: #b1b5bb;
    font-weight: 500;
}

.mm-pl-qty-stock[b-2pl2v7nhlh] {
    font-weight: 600;
    color: #6b7280;
    font-size: 12px;
    min-width: 22px;
    text-align: left;
}

.mm-pl-td-add[b-2pl2v7nhlh] {
    text-align: center;
}

.mm-pl-row-add[b-2pl2v7nhlh] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #293649;
    color: white;
    border: none;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: all .2s;
}

    .mm-pl-row-add svg[b-2pl2v7nhlh] {
        width: 16px;
        height: 16px;
    }

    .mm-pl-row-add:hover[b-2pl2v7nhlh] {
        background: #3b82f6;
        transform: translateY(-1px) scale(1.05);
        box-shadow: 0 6px 16px -4px rgba(59,130,246,.4);
    }

/* ============ STICKY CART BAR (row-mode footer) ============ */
.mm-pl-cart-bar[b-2pl2v7nhlh] {
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 1px solid #e5e9ef;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    box-shadow: 0 -8px 24px -8px rgba(41,54,73,.08);
    z-index: 5;
}

.mm-pl-cart-info[b-2pl2v7nhlh] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mm-pl-cart-stat[b-2pl2v7nhlh] {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.mm-pl-cart-stat-num[b-2pl2v7nhlh] {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #293649;
    letter-spacing: -.01em;
}

.mm-pl-cart-stat-lbl[b-2pl2v7nhlh] {
    font-size: 13px;
    color: #6b7280;
}

.mm-pl-cart-divider[b-2pl2v7nhlh] {
    width: 1px;
    height: 22px;
    background: #e5e9ef;
}

.mm-pl-cart-actions[b-2pl2v7nhlh] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.mm-pl-cart-total[b-2pl2v7nhlh] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.mm-pl-cart-total-lbl[b-2pl2v7nhlh] {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.mm-pl-cart-total-val[b-2pl2v7nhlh] {
    font-family: 'Manrope', 'IBM Plex Sans Thai', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #ef4444;
    letter-spacing: -.01em;
}

.mm-pl-cart-btn[b-2pl2v7nhlh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 11px;
    background: linear-gradient(135deg, #293649 0%, #1e3a8a 60%, #3b82f6 100%);
    color: white;
    border: none;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
    box-shadow: 0 6px 16px -4px rgba(59,130,246,.35);
}

    .mm-pl-cart-btn svg[b-2pl2v7nhlh] {
        width: 16px;
        height: 16px;
    }

    .mm-pl-cart-btn:hover[b-2pl2v7nhlh] {
        transform: translateY(-1px);
        box-shadow: 0 10px 24px -4px rgba(59,130,246,.5);
    }

    .mm-pl-cart-btn:active[b-2pl2v7nhlh] {
        transform: translateY(0);
    }

/* ============ LIGHTBOX ============ */
.mm-pl-lightbox[b-2pl2v7nhlh] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15,23,42,.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor: zoom-out;
    animation: mm-pl-fade-b-2pl2v7nhlh .18s ease;
}

    .mm-pl-lightbox img[b-2pl2v7nhlh] {
        max-height: 90vh;
        max-width: 90vw;
        border-radius: 12px;
        box-shadow: 0 24px 60px -12px rgba(0,0,0,.6);
    }

@keyframes mm-pl-fade-b-2pl2v7nhlh {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
    .mm-pl-grid[b-2pl2v7nhlh] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 960px) {
    .mm-pl-main[b-2pl2v7nhlh] {
        grid-template-columns: 200px 1fr;
        gap: 16px;
    }

    .mm-pl-grid[b-2pl2v7nhlh] {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

@media (max-width: 820px) {
    .mm-pl-main[b-2pl2v7nhlh] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ซ่อน sidebar หมวดหมู่เดิม — บนมือถือใช้ dropdown ใน toolbar แทน */
    .mm-pl-sidebar[b-2pl2v7nhlh] {
        display: none;
    }

    .mm-pl-cat-mobile[b-2pl2v7nhlh] {
        display: inline-block;
        position: relative;
    }

    /* ปุ่มหมวดหมู่ใน toolbar (เปิด dropdown รายการทั้งหมด) */
    .mm-pl-cat-more[b-2pl2v7nhlh] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        border: 1.5px solid #e5e9ef;
        background: #fff;
        color: #3b82f6;
        font-size: 13px;
        font-weight: 600;
        font-family: inherit;
        padding: 8px 12px;
        border-radius: 10px;
        cursor: pointer;
        white-space: nowrap;
        min-width: 0;
    }

    .mm-pl-cat-more-ico[b-2pl2v7nhlh] {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
    }

    .mm-pl-cat-more-label[b-2pl2v7nhlh] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 40vw;
    }

    .mm-pl-cat-more .mm-pl-cat-more-chev[b-2pl2v7nhlh] {
        width: 13px;
        height: 13px;
        transition: transform .2s;
    }

        .mm-pl-cat-more .mm-pl-cat-more-chev.open[b-2pl2v7nhlh] {
            transform: rotate(180deg);
        }

    .mm-pl-cat-dd-backdrop[b-2pl2v7nhlh] {
        position: fixed;
        inset: 0;
        z-index: 40;
    }

    .mm-pl-cat-dropdown[b-2pl2v7nhlh] {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        left: auto;
        min-width: 220px;
        max-width: 80vw;
        z-index: 41;
        background: #fff;
        border: 1px solid #e5e9ef;
        border-radius: 12px;
        box-shadow: 0 12px 32px -8px rgba(41,54,73,.22);
        max-height: 60vh;
        overflow-y: auto;
        padding: 6px;
    }

    .mm-pl-cat-dd-item[b-2pl2v7nhlh] {
        padding: 11px 12px;
        border-radius: 8px;
        font-size: 14px;
        color: #293649;
        cursor: pointer;
    }

        .mm-pl-cat-dd-item:hover[b-2pl2v7nhlh] {
            background: #f7f9fc;
        }

        .mm-pl-cat-dd-item.active[b-2pl2v7nhlh] {
            background: #eff6ff;
            color: #3b82f6;
            font-weight: 600;
        }

    /* หมวดหมู่: แถบ chip เลื่อนแนวนอนแถวเดียว — รองรับหลักร้อยหมวดโดยไม่ดันหน้ายาว */
    .mm-pl-cat-list[b-2pl2v7nhlh] {
        min-width: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        max-height: none;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 44px 8px 2px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        scrollbar-color: #cbd2dc transparent;
    }

        .mm-pl-cat-list[b-2pl2v7nhlh]::-webkit-scrollbar {
            height: 5px;
        }

        .mm-pl-cat-list[b-2pl2v7nhlh]::-webkit-scrollbar-thumb {
            background: #cbd2dc;
            border-radius: 3px;
        }

    .mm-pl-cat-item[b-2pl2v7nhlh] {
        flex: 0 0 auto;
        padding: 8px 14px;
        background: #f2f4f8;
        border: 1px solid #e5e9ef;
        border-radius: 999px;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .mm-pl-cat-dot[b-2pl2v7nhlh] {
        display: none;
    }

    .mm-pl-cat-text[b-2pl2v7nhlh] {
        overflow: visible;
        white-space: nowrap;
    }

    .mm-pl-grid[b-2pl2v7nhlh] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .mm-pl-shell[b-2pl2v7nhlh] {
        padding: 16px;
    }

    /* กล่องติดบน (มือถือ) : search bar → รูปแบบ/จัดเรียง/หมวดหมู่ → breadcrumb
       ทั้งก้อนติดบนเป็นหน่วยเดียว จึงไม่ต้องเดาความสูงของ toolbar */
    .mm-pl-stickybar[b-2pl2v7nhlh] {
        position: sticky;
        top: var(--mm-headwrap-h, 116px);
        z-index: 30;
        display: flex;
        flex-direction: column;
        margin: 0 -16px 14px;
        background: #fff;
        border-bottom: 1px solid #e5e9ef;
        box-shadow: 0 6px 14px -8px rgba(41,54,73,.15);
    }

    /* toolbar อยู่บน, breadcrumb อยู่ล่าง (ต่อท้ายหมวดหมู่) */
    .mm-pl-stickybar .mm-pl-toolbar[b-2pl2v7nhlh] {
        order: 1;
        position: static;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 0;
        padding: 10px 16px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .mm-pl-stickybar .mm-pl-header[b-2pl2v7nhlh] {
        order: 2;
        margin: 0;
        padding: 9px 16px;
        border-top: 1px solid #f0f2f5;
        background: #fbfcfe;
    }

    /* ส่วนที่ยุบได้ (toolbar + breadcrumb) — animate ด้วย grid-template-rows */
    .mm-pl-stickybar-body[b-2pl2v7nhlh] {
        display: grid;
        grid-template-rows: 1fr;
        transition: grid-template-rows .3s ease;
    }

    .mm-pl-stickybar-inner[b-2pl2v7nhlh] {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    /* เปิดอยู่ → ปล่อยให้ dropdown หมวดหมู่ล้นออกได้ (สลับหลัง animate จบ) */
    .mm-pl-stickybar:not(.is-collapsed) .mm-pl-stickybar-inner[b-2pl2v7nhlh] {
        overflow: visible;
        transition: overflow 0s .3s;
    }

    .mm-pl-stickybar.is-collapsed .mm-pl-stickybar-body[b-2pl2v7nhlh] {
        grid-template-rows: 0fr;
    }

    /* ปุ่มยุบ/แสดง อยู่ล่างสุดของแถบ เห็นเสมอ */
    .mm-pl-stickybar-toggle[b-2pl2v7nhlh] {
        order: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 13px 10px;
        border: 0;
        border-top: 1px solid #e5e9ef;
        background: #f7f9fc;
        color: #3b82f6;
        font-size: 14px;
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

        .mm-pl-stickybar-toggle:active[b-2pl2v7nhlh] {
            background: #eef2f7;
        }

    .mm-pl-stickybar-toggle-chev[b-2pl2v7nhlh] {
        width: 17px;
        height: 17px;
        transition: transform .3s ease;
    }

        .mm-pl-stickybar-toggle-chev.collapsed[b-2pl2v7nhlh] {
            transform: rotate(180deg);
        }

    .mm-pl-stickybar.is-collapsed .mm-pl-stickybar-toggle[b-2pl2v7nhlh] {
        border-top: 0;
    }

        .mm-pl-toolbar > .mm-pl-view-switch[b-2pl2v7nhlh],
        .mm-pl-toolbar > .mm-pl-sort-wrap[b-2pl2v7nhlh],
        .mm-pl-toolbar > .mm-pl-cat-mobile[b-2pl2v7nhlh] {
            width: 100%;
        }

    .mm-pl-view-btn[b-2pl2v7nhlh] {
        flex: 1;
        justify-content: center;
    }

    .mm-pl-view-btn span[b-2pl2v7nhlh] {
        display: none;
    }

    .mm-pl-count[b-2pl2v7nhlh] {
        position: static;
        transform: none;
        justify-content: center;
        pointer-events: auto;
    }

    .mm-pl-sort[b-2pl2v7nhlh] {
        width: 100%;
        min-width: 0;
    }

    .mm-pl-cat-more--toolbar[b-2pl2v7nhlh] {
        width: 100%;
        justify-content: center;
    }

        .mm-pl-cat-more--toolbar .mm-pl-cat-more-label[b-2pl2v7nhlh] {
            max-width: none;
        }

    .mm-pl-cat-mobile .mm-pl-cat-dropdown[b-2pl2v7nhlh] {
        left: 0;
        right: 0;
        min-width: 0;
        max-width: none;
    }

    .mm-pl-cart-actions[b-2pl2v7nhlh] {
        width: 100%;
        justify-content: space-between;
    }
}

/* ===== มุมมองแบบแถว → การ์ดซ้อน : ทุกจอตั้งแต่ 1200px ลงไป ===== */
@media (max-width: 1200px) {
    .mm-pl-table-scroll[b-2pl2v7nhlh] {
        overflow-x: visible;
    }

    .mm-pl-table[b-2pl2v7nhlh] {
        min-width: 0;
        display: block;
        table-layout: auto;
    }

        .mm-pl-table thead[b-2pl2v7nhlh] {
            display: none;
        }

        .mm-pl-table tbody[b-2pl2v7nhlh] {
            display: block;
        }

    .mm-pl-tr[b-2pl2v7nhlh] {
        display: grid;
        grid-template-columns: 60px 1fr auto;
        grid-template-areas:
            "img  code  code"
            "img  name  name"
            "img  price unit"
            "qty  qty   add";
        column-gap: 10px;
        row-gap: 6px;
        align-items: center;
        padding: 12px;
        border: 1px solid #e5e9ef;
        border-radius: 12px;
        margin-bottom: 10px;
    }

        .mm-pl-tr td[b-2pl2v7nhlh] {
            padding: 0 !important;
            border: none !important;
        }

        .mm-pl-tr:last-child td[b-2pl2v7nhlh] {
            border: none;
        }

    .mm-pl-td-code[b-2pl2v7nhlh] {
        grid-area: code;
    }

    .mm-pl-td-img[b-2pl2v7nhlh] {
        grid-area: img;
        align-self: start;
    }

    .mm-pl-td-name[b-2pl2v7nhlh] {
        grid-area: name;
    }

    .mm-pl-td-price[b-2pl2v7nhlh] {
        grid-area: price;
        text-align: left;
    }

    .mm-pl-td-unit[b-2pl2v7nhlh] {
        grid-area: unit;
        text-align: right;
    }

    .mm-pl-td-qty[b-2pl2v7nhlh] {
        grid-area: qty;
        text-align: left;
        padding-top: 8px !important;
        border-top: 1px solid #f0f2f5 !important;
    }

    .mm-pl-td-add[b-2pl2v7nhlh] {
        grid-area: add;
        text-align: right;
        padding-top: 8px !important;
        border-top: 1px solid #f0f2f5 !important;
    }

    .mm-pl-row-name[b-2pl2v7nhlh] {
        -webkit-line-clamp: 3;
    }
}

@media (max-width: 480px) {
    .mm-pl-grid[b-2pl2v7nhlh] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .mm-pl-card-info[b-2pl2v7nhlh] {
        padding: 10px;
        gap: 8px;
    }

    .mm-pl-card-name[b-2pl2v7nhlh] {
        font-size: 13px;
    }

    .mm-pl-card-price[b-2pl2v7nhlh] {
        font-size: 15px;
    }

    .mm-pl-card-cta[b-2pl2v7nhlh] {
        width: 32px;
        height: 32px;
    }
}
/* /Components/Pages/FrontEnd/Product/Products.razor.rz.scp.css */
/* =====================================================
   PRODUCT DETAIL  ·  modern theme (matches example.html)
   palette: navy #293649 · blue #3b82f6 · pale #eff6ff
   bg #f7f9fc · line #e5e9ef · gray #6b7280 · red #ef4444
   ===================================================== */

.mm-pd-shell[b-vdor4g7byc] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
    font-family: 'IBM Plex Sans Thai', 'Manrope', -apple-system, sans-serif;
    color: #293649;
}

/* ============ NOT FOUND STATE ============ */
.mm-pd-not-found[b-vdor4g7byc] {
    max-width: 520px;
    margin: 60px auto;
    background: white;
    border: 1px solid #e5e9ef;
    border-radius: 18px;
    padding: 48px 32px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(41,54,73,.04);
    font-family: 'IBM Plex Sans Thai', 'Manrope', sans-serif;
}

    .mm-pd-not-found svg[b-vdor4g7byc] {
        width: 56px;
        height: 56px;
        color: #3b82f6;
        margin-bottom: 20px;
    }

.mm-pd-nf-title[b-vdor4g7byc] {
    font-size: 18px;
    font-weight: 700;
    color: #293649;
    margin-bottom: 6px;
    line-height: 1.4;
}

.mm-pd-nf-sub[b-vdor4g7byc] {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
}

.mm-pd-nf-back[b-vdor4g7byc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 11px;
    background: #293649;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
}

    .mm-pd-nf-back svg[b-vdor4g7byc] {
        width: 16px;
        height: 16px;
        margin: 0;
        color: white;
    }

    .mm-pd-nf-back:hover[b-vdor4g7byc] {
        background: #3b82f6;
        transform: translateY(-1px);
        box-shadow: 0 8px 20px -6px rgba(59,130,246,.4);
    }

/* ============ BREADCRUMB ============ */
.mm-pd-breadcrumb[b-vdor4g7byc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 18px;
}

.mm-pd-bc-link[b-vdor4g7byc] {
    color: #6b7280;
    cursor: pointer;
    transition: color .18s;
    font-weight: 500;
    text-decoration: none;
}

    .mm-pd-bc-link:hover[b-vdor4g7byc] {
        color: #3b82f6;
    }

.mm-pd-bc-sep[b-vdor4g7byc] {
    width: 12px;
    height: 12px;
    color: #b1b5bb;
    flex-shrink: 0;
}

.mm-pd-bc-current[b-vdor4g7byc] {
    color: #293649;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

/* ============ MAIN CARD ============ */
.mm-pd-card[b-vdor4g7byc] {
    background: white;
    border: 1px solid #e5e9ef;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(41,54,73,.04);
}

.mm-pd-head[b-vdor4g7byc] {
    display: grid;
    grid-template-columns: 480px 1fr;
    align-items: stretch;
}

/* ============ IMAGE ZONE ============ */
.mm-pd-image-zone[b-vdor4g7byc] {
    padding: 24px;
    border-right: 1px solid #f0f2f5;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mm-pd-preview[b-vdor4g7byc] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
    transition: all .25s;
}

    .mm-pd-preview img[b-vdor4g7byc] {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
        transition: transform .35s;
    }

    .mm-pd-preview:hover[b-vdor4g7byc] {
        box-shadow: 0 12px 28px -8px rgba(59,130,246,.18);
    }

        .mm-pd-preview:hover img[b-vdor4g7byc] {
            transform: scale(1.05);
        }

.mm-pd-preview-zoom[b-vdor4g7byc] {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.6);
    display: grid;
    place-items: center;
    color: #293649;
    transition: all .2s;
    pointer-events: none;
}

.mm-pd-preview:hover .mm-pd-preview-zoom[b-vdor4g7byc] {
    background: #3b82f6;
    color: white;
    transform: scale(1.06);
    border-color: #3b82f6;
}

.mm-pd-preview-zoom svg[b-vdor4g7byc] {
    width: 18px;
    height: 18px;
}

/* gallery thumbnails */
.mm-pd-gallery[b-vdor4g7byc] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mm-pd-gal-track[b-vdor4g7byc] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.mm-pd-gal-thumb[b-vdor4g7byc] {
    aspect-ratio: 1 / 1;
    background: #f7f9fc;
    border: 2px solid #e5e9ef;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .18s;
    position: relative;
}

    .mm-pd-gal-thumb img[b-vdor4g7byc] {
        max-width: 86%;
        max-height: 86%;
        object-fit: contain;
    }

    .mm-pd-gal-thumb:hover[b-vdor4g7byc] {
        border-color: #93c5fd;
        transform: translateY(-2px);
    }

    .mm-pd-gal-thumb.active[b-vdor4g7byc] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,.15);
        background: #eff6ff;
    }

.mm-pd-gal-nav[b-vdor4g7byc] {
    width: 32px;
    height: 60px;
    border-radius: 10px;
    background: white;
    border: 1.5px solid #e5e9ef;
    color: #6b7280;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all .18s;
}

    .mm-pd-gal-nav:hover[b-vdor4g7byc] {
        background: #3b82f6;
        border-color: #3b82f6;
        color: white;
        transform: scale(1.04);
        box-shadow: 0 6px 14px -4px rgba(59,130,246,.4);
    }

    .mm-pd-gal-nav svg[b-vdor4g7byc] {
        width: 14px;
        height: 14px;
    }

/* ============ DETAIL ZONE ============ */
.mm-pd-detail-zone[b-vdor4g7byc] {
    padding: 28px 32px 24px 32px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mm-pd-name[b-vdor4g7byc] {
    font-family: 'Manrope', 'IBM Plex Sans Thai', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: #293649;
    letter-spacing: -.015em;
    margin-bottom: 10px;
    word-break: break-word;
}

/* คำอธิบายสินค้าอย่างสั้น — ใต้ชื่อสินค้า */
.mm-pd-short[b-vdor4g7byc] {
    font-size: 14px;
    line-height: 1.65;
    color: #5b6b80;
    margin: -4px 0 12px;
    white-space: pre-line;
    word-break: break-word;
    user-select: text;
}

.mm-pd-meta-row[b-vdor4g7byc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
    color: #6b7280;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f2f5;
    margin-bottom: 14px;
}

.mm-pd-sold[b-vdor4g7byc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .mm-pd-sold svg[b-vdor4g7byc] {
        width: 14px;
        height: 14px;
        color: #10b981;
    }

/* category pills */
.mm-pd-cat-row[b-vdor4g7byc] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.mm-pd-cat-pill[b-vdor4g7byc] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    color: #3b82f6;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: all .18s;
}

    .mm-pd-cat-pill:hover[b-vdor4g7byc] {
        background: #3b82f6;
        color: white;
        border-color: #3b82f6;
        transform: translateY(-1px);
    }

/* price block */
.mm-pd-price-card[b-vdor4g7byc] {
    background: linear-gradient(135deg, #f7f9fc 0%, #eff6ff 100%);
    border: 1px solid #e5e9ef;
    border-radius: 14px;
    padding: 16px 22px;
    margin-bottom: 22px;
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.mm-pd-nocredit[b-vdor4g7byc] {
    align-self: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 12px;
    font-weight: 600;
}

.mm-pd-price-label[b-vdor4g7byc] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.mm-pd-price-value[b-vdor4g7byc] {
    font-family: 'Manrope', 'IBM Plex Sans Thai', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #ef4444;
    letter-spacing: -.02em;
    line-height: 1.1;
}

/* row (label + value) */
.mm-pd-row[b-vdor4g7byc] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.mm-pd-row-label[b-vdor4g7byc] {
    width: 100px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    padding-top: 10px;
}

.mm-pd-row-value[b-vdor4g7byc] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

/* unit pills */
.mm-pd-unit-list[b-vdor4g7byc] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mm-pd-unit-pill[b-vdor4g7byc] {
    background: white;
    border: 1.5px solid #e5e9ef;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #293649;
    cursor: pointer;
    user-select: none;
    transition: all .18s;
    position: relative;
}

    .mm-pd-unit-pill:hover[b-vdor4g7byc] {
        border-color: #93c5fd;
        background: #f8fbff;
        color: #3b82f6;
    }

    .mm-pd-unit-pill.active[b-vdor4g7byc] {
        border-color: #3b82f6;
        background: #eff6ff;
        color: #3b82f6;
        font-weight: 600;
        box-shadow: 0 0 0 3px rgba(59,130,246,.12);
    }

/* quantity stepper */
.mm-pd-stepper[b-vdor4g7byc] {
    display: inline-flex;
    align-items: center;
    background: white;
    border: 1.5px solid #e5e9ef;
    border-radius: 11px;
    overflow: hidden;
    transition: all .18s;
}

    .mm-pd-stepper:focus-within[b-vdor4g7byc] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,.12);
    }

.mm-pd-step-btn[b-vdor4g7byc] {
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    color: #293649;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all .18s;
    font-family: inherit;
}

    .mm-pd-step-btn:hover[b-vdor4g7byc] {
        background: #eff6ff;
        color: #3b82f6;
    }

    .mm-pd-step-btn svg[b-vdor4g7byc] {
        width: 14px;
        height: 14px;
    }

.mm-pd-step-input[b-vdor4g7byc] {
    width: 76px;
    height: 38px;
    border: none;
    border-left: 1px solid #f0f2f5;
    border-right: 1px solid #f0f2f5;
    background: transparent;
    text-align: center;
    font-family: 'Manrope', 'IBM Plex Sans Thai', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #293649;
    outline: none;
}

    .mm-pd-step-input:focus[b-vdor4g7byc] {
        outline: none;
    }

/* stock info */
.mm-pd-stock-info[b-vdor4g7byc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    background: #f7f9fc;
    border: 1px dashed #e5e9ef;
    border-radius: 10px;
    padding: 7px 14px;
}

    .mm-pd-stock-info svg[b-vdor4g7byc] {
        width: 15px;
        height: 15px;
        color: #3b82f6;
        flex-shrink: 0;
    }

    .mm-pd-stock-info strong[b-vdor4g7byc] {
        color: #293649;
        font-weight: 700;
    }

/* action buttons */
.mm-pd-actions[b-vdor4g7byc] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    padding-top: 8px;
}

.mm-pd-btn[b-vdor4g7byc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 200px;
    padding: 13px 26px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all .2s;
    border: none;
    flex: 1 1 auto;
}

    .mm-pd-btn svg[b-vdor4g7byc] {
        width: 18px;
        height: 18px;
    }

.mm-pd-btn-secondary[b-vdor4g7byc] {
    background: white;
    color: #3b82f6;
    border: 1.5px solid #3b82f6;
}

    .mm-pd-btn-secondary:hover[b-vdor4g7byc] {
        background: #eff6ff;
        transform: translateY(-1px);
        box-shadow: 0 8px 20px -6px rgba(59,130,246,.25);
    }

.mm-pd-btn-primary[b-vdor4g7byc] {
    background: linear-gradient(135deg, #293649 0%, #1e3a8a 60%, #3b82f6 100%);
    color: white;
    box-shadow: 0 6px 16px -4px rgba(59,130,246,.35);
}

    .mm-pd-btn-primary:hover[b-vdor4g7byc] {
        transform: translateY(-1px);
        box-shadow: 0 10px 24px -4px rgba(59,130,246,.55);
    }

    .mm-pd-btn-primary:active[b-vdor4g7byc] {
        transform: translateY(0);
    }

/* ============ DESCRIPTION CARD ============ */
.mm-pd-second[b-vdor4g7byc] {
    margin-top: 18px;
}

.mm-pd-detail-card[b-vdor4g7byc] {
    background: white;
    border: 1px solid #e5e9ef;
    border-radius: 18px;
    padding: 28px 32px;
    box-shadow: 0 1px 2px rgba(41,54,73,.04);
}

.mm-pd-section-head[b-vdor4g7byc] {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f2f5;
}

.mm-pd-label-tag[b-vdor4g7byc] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #3b82f6;
    margin-bottom: 6px;
}

.mm-pd-section-title[b-vdor4g7byc] {
    font-family: 'Manrope', 'IBM Plex Sans Thai', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #293649;
    letter-spacing: -.015em;
}

.mm-pd-description[b-vdor4g7byc] {
    font-size: 14px;
    line-height: 1.7;
    color: #293649;
    word-break: break-word;
}

    .mm-pd-description img[b-vdor4g7byc] {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        margin: 8px 0;
    }

    .mm-pd-description p[b-vdor4g7byc] {
        margin-bottom: 12px;
    }

    .mm-pd-description h1[b-vdor4g7byc],
    .mm-pd-description h2[b-vdor4g7byc],
    .mm-pd-description h3[b-vdor4g7byc],
    .mm-pd-description h4[b-vdor4g7byc] {
        font-family: 'Manrope', 'IBM Plex Sans Thai', sans-serif;
        color: #293649;
        margin: 18px 0 10px;
        letter-spacing: -.01em;
    }

    .mm-pd-description ul[b-vdor4g7byc],
    .mm-pd-description ol[b-vdor4g7byc] {
        padding-left: 22px;
        margin-bottom: 12px;
    }

    .mm-pd-description a[b-vdor4g7byc] {
        color: #3b82f6;
        text-decoration: underline;
    }

/* ============ RESPONSIVE ============ */

/* tablet landscape */
@media (max-width: 1100px) {
    .mm-pd-head[b-vdor4g7byc] {
        grid-template-columns: 420px 1fr;
    }

    .mm-pd-name[b-vdor4g7byc] {
        font-size: 20px;
    }

    .mm-pd-price-value[b-vdor4g7byc] {
        font-size: 28px;
    }
}

/* tablet portrait — stack columns */
@media (max-width: 880px) {
    .mm-pd-shell[b-vdor4g7byc] {
        padding: 18px;
    }

    .mm-pd-head[b-vdor4g7byc] {
        grid-template-columns: 1fr;
    }

    .mm-pd-image-zone[b-vdor4g7byc] {
        border-right: none;
        border-bottom: 1px solid #f0f2f5;
        padding: 20px;
    }

    .mm-pd-preview[b-vdor4g7byc] {
        max-width: 480px;
        margin: 0 auto;
    }

    .mm-pd-detail-zone[b-vdor4g7byc] {
        padding: 22px 24px 24px 24px;
    }

    .mm-pd-detail-card[b-vdor4g7byc] {
        padding: 22px 24px;
    }
}

/* mobile */
@media (max-width: 600px) {
    .mm-pd-shell[b-vdor4g7byc] {
        padding: 14px;
    }

    .mm-pd-card[b-vdor4g7byc] {
        border-radius: 14px;
    }

    .mm-pd-image-zone[b-vdor4g7byc] {
        padding: 14px;
    }

    .mm-pd-detail-zone[b-vdor4g7byc] {
        padding: 18px 16px 18px 16px;
    }

    .mm-pd-name[b-vdor4g7byc] {
        font-size: 17px;
    }

    .mm-pd-price-card[b-vdor4g7byc] {
        padding: 14px 16px;
        margin-bottom: 18px;
    }

    .mm-pd-price-value[b-vdor4g7byc] {
        font-size: 26px;
    }

    /* stack label above value on small */
    .mm-pd-row[b-vdor4g7byc] {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
    }

    .mm-pd-row-label[b-vdor4g7byc] {
        width: auto;
        padding-top: 0;
    }

    .mm-pd-row-value[b-vdor4g7byc] {
        gap: 10px;
    }

    .mm-pd-unit-pill[b-vdor4g7byc] {
        padding: 7px 12px;
        font-size: 12.5px;
    }

    .mm-pd-stock-info[b-vdor4g7byc] {
        font-size: 12px;
        padding: 6px 12px;
    }

    .mm-pd-step-input[b-vdor4g7byc] {
        width: 60px;
        font-size: 14px;
    }

    .mm-pd-actions[b-vdor4g7byc] {
        flex-direction: column;
        gap: 10px;
    }

    .mm-pd-btn[b-vdor4g7byc] {
        min-width: 0;
        width: 100%;
        padding: 12px 20px;
    }

    .mm-pd-bc-current[b-vdor4g7byc] {
        max-width: 100%;
    }

    .mm-pd-detail-card[b-vdor4g7byc] {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .mm-pd-section-title[b-vdor4g7byc] {
        font-size: 17px;
    }

    .mm-pd-gal-thumb[b-vdor4g7byc] {
        border-radius: 8px;
    }

    .mm-pd-gal-nav[b-vdor4g7byc] {
        width: 28px;
        height: 50px;
    }
}

/* small mobile */
@media (max-width: 380px) {
    .mm-pd-gal-track[b-vdor4g7byc] {
        gap: 6px;
    }

    .mm-pd-meta-row[b-vdor4g7byc] {
        gap: 10px;
        font-size: 12px;
    }
}

/* [2026-10] โปรโมชั่นสินค้า — โทนฟ้าอ่อน/navy หน้าร้าน */
.mm-pd-promo[b-vdor4g7byc] { border: 1px solid #dbeafe; background: #f5f9ff; border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.mm-pd-promo-name[b-vdor4g7byc] { font-weight: 700; color: #1e3a5f; font-size: 15px; }
.mm-pd-promo-cond[b-vdor4g7byc] { color: #1d4ed8; font-size: 14px; margin-top: 4px; }
.mm-pd-promo-date[b-vdor4g7byc] { color: #6b7280; font-size: 12.5px; margin-top: 4px; }
.mm-pd-promo-desc[b-vdor4g7byc] { color: #374151; font-size: 13.5px; margin-top: 6px; white-space: pre-line; }
/* /Components/Pages/FrontEnd/Purchase/Componant/CoreBillComponant/AddressCoreBill.razor.rz.scp.css */
.AddressDiv[b-u6cd4oy0r5] {
    padding: 24px;
    background: white;
}

    .AddressDiv .Text[b-u6cd4oy0r5] {
        margin-left: 10px;
    }

.AddressTitle[b-u6cd4oy0r5] {
    display: flex;
    align-items: center;
    color: #ee4d2d;
    fill: currentColor;
    margin-bottom: 20px;
}

.AddressSelectedZone[b-u6cd4oy0r5] {
    display: flex;
    color: black;
    font-size: 16px;
}
/* /Components/Pages/FrontEnd/Purchase/Componant/CoreBillComponant/DecorateTopBox.razor.rz.scp.css */
.HeaderTopDiv[b-h7yn91hky4] {
    background-image: repeating-linear-gradient(45deg,#6fa6d6,#6fa6d6 33px,transparent 0,transparent 41px,#f18d9b 0,#f18d9b 74px,transparent 0,transparent 82px);
    height: 3px;
    width: 100%;
}
/* /Components/Pages/FrontEnd/Purchase/Componant/CoreBillComponant/FooterCoreBill.razor.rz.scp.css */
.ShowingPaymentImage[b-2277hsig1w] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
}

    .ShowingPaymentImage .DivImg[b-2277hsig1w] {
        display: flex;
        align-items: center;
        min-height: 80vh;
    }

        .ShowingPaymentImage .DivImg img[b-2277hsig1w] {
            max-height: 80vh;
            max-width: 80vw;
        }

.WatchingPaymentImageItem[b-2277hsig1w] {
    z-index: 2;
    cursor: pointer;
    height: 4vw;
    width: 4vw;
    background: rgba(0,0,0,0.5);
    border: solid 1px black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}

    .WatchingPaymentImageItem:hover[b-2277hsig1w] {
        border: solid 1px white;
    }

    .WatchingPaymentImageItem.Selected[b-2277hsig1w] {
        border: solid 1px white;
    }

.PriceTransferZone[b-2277hsig1w] {
    display: flex;
    justify-content: end;
    align-items: center;
    height: 40px;
    background: white;
}

    .PriceTransferZone .Div1[b-2277hsig1w] {
        flex: 1;
        border-right: 1px solid rgba(0,0,0,.09);
        border-bottom: 1px solid rgba(0,0,0,.09);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: end;
        padding-right: 20px;
    }

    .PriceTransferZone .Div2[b-2277hsig1w] {
        min-width: 135px;
        text-align: right;
        padding-right: 30px;
        color: #ee4d2d;
        border-bottom: 1px solid rgba(0,0,0,.09);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: end;
    }

.SummitButtonZone[b-2277hsig1w] {
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 0px 30px;
    height: 60px;
    background: white;
}

    .SummitButtonZone .Div1[b-2277hsig1w] {
        color: rgba(0,0,0,.54);
    }

    .SummitButtonZone .Div2[b-2277hsig1w] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 210px;
        height: 40px;
        border: 1px solid rgba(0,0,0,.09);
        box-shadow: 0 1px 1px 0 rgba(0,0,0,.03);
        border-radius: 2px;
        cursor: pointer;
    }
/* /Components/Pages/FrontEnd/Purchase/Componant/CoreBillComponant/HeaderCoreBill.razor.rz.scp.css */
.BillCode[b-b2uqjk008a] {
    font-size: 24px;
    text-align: center;
    color: #ee4d2d;
    display: flex;
    background: #f7f7f7;
    width: 100%;
}
/* /Components/Pages/FrontEnd/Purchase/Componant/CoreBillComponant/ProductCoreList.razor.rz.scp.css */
.ProductListZone[b-mrykr1zbp0] {
    background: white;
    /*padding: 24px 30px 0px;*/
    font-size: 14px;
}

.BaseHeader[b-mrykr1zbp0] {
    color: #bbb !important;
}

    .ProductListZone .TableProductList[b-mrykr1zbp0] {
    }

        .ProductListZone .TableProductList thead .RowSize[b-mrykr1zbp0] {
            height: 40px;
        }

        .ProductListZone .TableProductList tbody .RowSize[b-mrykr1zbp0] {
            height: 70px;
        }

    .ProductListZone .NameTitle[b-mrykr1zbp0] {
        font-size: 18px;
    }

    .ProductListZone .HeadColor[b-mrykr1zbp0] {
        color: #bbb !important;
    }

.ProductListZone .ImgDiv[b-mrykr1zbp0] {
    min-width: 42px;
}

    .ProductListZone .NameDiv[b-mrykr1zbp0] {
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        max-width: 590px;
        width: 100%;
    }

        .ProductListZone .NameDiv .Name[b-mrykr1zbp0] {
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: 70px;
            white-space: nowrap;
            min-width: 0;
            max-width: 100%;
        }

    .ProductListZone .ProductImg[b-mrykr1zbp0] {
        position: relative;
        height: 40px;
        width: 40px;
        min-height: 40px;
        min-width: 40px;
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        float: left;
    }

        .ProductListZone .ProductImg .Img[b-mrykr1zbp0] {
            max-height: 100%;
            max-width: 100%;
        }

    .ProductListZone .UnitName[b-mrykr1zbp0] {
        text-align: center;
        min-width: 100px;
    }

    .ProductListZone .PricePer[b-mrykr1zbp0] {
        text-align: center;
        min-width: 100px;
        color: #ee4d2d;
    }

    .ProductListZone .Qty[b-mrykr1zbp0] {
        text-align: center;
        min-width: 100px;
    }

    .ProductListZone .SumPrice[b-mrykr1zbp0] {
        text-align: right;
        min-width: 100px;
        color: #ee4d2d;
    }

.OperationButtonBase[b-mrykr1zbp0] {
    width: 50px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.2s;
}

.EditButton[b-mrykr1zbp0] {
    margin-right: 5px;
    border: solid 1px #233134;
}

.DeleteButton[b-mrykr1zbp0] {
    border: solid 1px #fc7d7d;
    color: #ff0000;
}


/* [2026-09 แก้] เปลี่ยนจาก CSS Grid (div ทำ grid-area เอง ต้องคำนวณ
   grid-template-columns ให้ตรงกันทุกแถวด้วยมือ) เป็น <table> จริง — เบราว์เซอร์
   จัดความกว้างคอลัมน์ให้เท่ากันทุกแถวอัตโนมัติ (thead/tbody คอลัมน์เดียวกัน
   เสมอ) ไม่มีทางคอลัมน์เพี้ยน/ไม่ตรงกันแบบ grid เดิมอีก */
.ProductTable[b-mrykr1zbp0] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .ProductTable .ColNo[b-mrykr1zbp0] {
        width: 44px;
    }

    .ProductTable .ColImg[b-mrykr1zbp0] {
        width: 42px;
    }

    .ProductTable .ColName[b-mrykr1zbp0] {
        width: auto;
    }

    .ProductTable .ColUnit[b-mrykr1zbp0],
    .ProductTable .ColPricePer[b-mrykr1zbp0],
    .ProductTable .ColQty[b-mrykr1zbp0],
    .ProductTable .ColSum[b-mrykr1zbp0] {
        width: 100px;
    }

    .ProductTable .ColOperator[b-mrykr1zbp0] {
        width: 137px;
    }

    .ProductTable th[b-mrykr1zbp0],
    .ProductTable td[b-mrykr1zbp0] {
        padding: 0 6px;
        vertical-align: middle;
        box-sizing: border-box;
    }

    .ProductTable thead tr.HeadRow[b-mrykr1zbp0] {
        height: 40px;
    }

        .ProductTable thead tr.HeadRow th[b-mrykr1zbp0] {
            font-weight: normal;
            text-align: left;
        }

    .ProductTable tbody tr.DataRow[b-mrykr1zbp0] {
        height: 70px;
    }

    .ProductTable .NoZone[b-mrykr1zbp0] {
        text-align: center;
        font-weight: 600;
        color: #9ca3af;
    }

    .ProductTable .ImgZone[b-mrykr1zbp0] {
        padding-left: 0;
    }

    /* [2026-09] กล่องรูปสินค้าเป็นสี่เหลี่ยมจัตุรัสตายตัว ไม่ขึ้นกับความสูงแถว —
       ก่อนหน้านี้ <img> อยู่ตรงใน <td> ยืดสูงตามแถว (เซลล์อื่นสูงกว่าเสมอ เช่น
       ปุ่มแก้ไข/ลบ) ทำให้ไม่เป็นจัตุรัส ; div.ImgThumb นี้เป็นกล่องขนาดคงที่
       (ไม่ใช่ table cell จึงไม่ถูกยืดตามแถว) วางกึ่งกลาง td ด้วย margin:auto —
       ครอบทั้งรูปจริง (object-fit:cover) และ fallback ลายทแยง (ตั้งผ่าน onerror
       เป็น background ของ div นี้เอง ไม่ใช่ของ td) ให้เป็นจัตุรัสเสมอทั้ง 2 กรณี */
    .ProductTable .ImgThumb[b-mrykr1zbp0] {
        width: 36px;
        height: 36px;
        margin: 0 auto;
        border-radius: 7px;
        overflow: hidden;
        background: repeating-linear-gradient(135deg, #f3f5f7 0px, #f3f5f7 5px, #e9edf0 5px, #e9edf0 10px);
    }

        .ProductTable .ImgThumb img[b-mrykr1zbp0] {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .ProductTable th.UnitZone[b-mrykr1zbp0],
    .ProductTable th.QtyZone[b-mrykr1zbp0] {
        text-align: center;
    }

    .ProductTable td.UnitZone[b-mrykr1zbp0],
    .ProductTable td.QtyZone[b-mrykr1zbp0] {
        text-align: center;
    }

    .ProductTable th.PricePerZone[b-mrykr1zbp0],
    .ProductTable th.SumZone[b-mrykr1zbp0] {
        text-align: end;
    }

    .ProductTable td.PricePerZone[b-mrykr1zbp0],
    .ProductTable td.SumZone[b-mrykr1zbp0] {
        text-align: end;
    }

    .ProductTable .OparetorZone[b-mrykr1zbp0] {
        text-align: end;
    }

.SingleRow[b-mrykr1zbp0] {
    background: #f7f7f7ff;
}

.DoubleRow[b-mrykr1zbp0] {
    background: #ffffff;
}

/* [2026-09] กล่อง LOT ใต้แถวสินค้า — การ์ดโทนฟ้าอ่อน (แทน header ดำจาก ThemeSetting.CSSTheme เดิม) */
/* แถวสินค้าที่มี LOT + แถว LOT = กลุ่มเดียวกัน: พื้นฟ้าอ่อนต่อเนื่อง, ไม่มีเส้นคั่นระหว่างกัน,
   แถบฟ้าซ้ายยาวต่อกันทั้ง 2 แถว, เส้นเชื่อม (└) จากแถวสินค้าลงมาที่กล่อง LOT
   (selector เจาะจงกว่า ::deep .SingleRow/.DoubleRow/.ProductTable tr ของ CustomerOrders.razor.css) */
.ProductTable tr.DataRow.HasLot[b-mrykr1zbp0],
.ProductTable tr.LotRow[b-mrykr1zbp0] {
    background: #F2FAF9;
}

.ProductTable tr.DataRow.HasLot[b-mrykr1zbp0] {
    border-bottom: none;
}

    .ProductTable tr.DataRow.HasLot > td:first-child[b-mrykr1zbp0],
    .ProductTable tr.LotRow > td:first-child[b-mrykr1zbp0] {
        box-shadow: inset 3px 0 0 #0B7A75;
    }

.ProductTable tr.LotRow > td[b-mrykr1zbp0] {
    padding: 0 12px 12px 46px;
}

.LotBox[b-mrykr1zbp0] {
    position: relative;
    background: #fff;
    border: 1px solid #B9E0DC;
    border-radius: 8px;
    font-size: 12px;
    color: #334155;
    transition: border-color .15s, background .15s;
}

    /* เส้นเชื่อม └ จากใต้เลขลำดับ ลงมาชี้หัวกล่อง LOT */
    .LotBox[b-mrykr1zbp0]::before {
        content: "";
        position: absolute;
        left: -24px;
        top: -14px;
        width: 20px;
        height: 30px;
        border-left: 2px solid #7CC7C1;
        border-bottom: 2px solid #7CC7C1;
        border-bottom-left-radius: 8px;
    }

    .LotBox.Clickable[b-mrykr1zbp0] {
        cursor: pointer;
    }

        .LotBox.Clickable:hover[b-mrykr1zbp0] {
            border-color: #7CC7C1;
            background: #F2FAF9;
        }

.LotBoxTitle[b-mrykr1zbp0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid #DDEFED;
}

    .LotBox.Collapsed .LotBoxTitle[b-mrykr1zbp0] {
        border-bottom-color: transparent;
    }

/* caret + ชื่อ + จำนวน — คลิกตรงไหนของกล่องก็ยุบ/กาง (แก้ไขใช้ปุ่ม "แก้ไข" ของแถวสินค้า) */
.LotToggle[b-mrykr1zbp0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.LotCaret[b-mrykr1zbp0] {
    display: inline-block;
    width: 12px;
    font-size: 11px;
    color: #0B7A75;
    transform: rotate(90deg);
    transition: transform .2s;
}

.LotBox.Collapsed .LotCaret[b-mrykr1zbp0] {
    transform: rotate(0deg);
}

.LotBody[b-mrykr1zbp0] {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .22s ease;
}

.LotBox.Collapsed .LotBody[b-mrykr1zbp0] {
    grid-template-rows: 0fr;
}

.LotBodyInner[b-mrykr1zbp0] {
    min-height: 0;
    overflow: hidden;
}

.LotAlert[b-mrykr1zbp0] {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
}

    .LotAlert.Expired[b-mrykr1zbp0] {
        background: #fdecec;
        color: #d64545;
    }

    .LotAlert.Near[b-mrykr1zbp0] {
        background: #fff8ec;
        color: #b45309;
    }

.LotBoxLabel[b-mrykr1zbp0] {
    font-weight: 600;
    color: #095E5A;
}

.LotBoxCount[b-mrykr1zbp0] {
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #E7F5F4;
    color: #0B7A75;
}

.LotBoxHint[b-mrykr1zbp0] {
    margin-left: auto;
    font-size: 11px;
    color: #98a2ad;
}

.LotGrid[b-mrykr1zbp0] {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.6fr .9fr;
    align-items: center;
    column-gap: 8px;
    padding: 5px 12px;
}

    .LotGrid > div[b-mrykr1zbp0] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .LotGrid .R[b-mrykr1zbp0] {
        text-align: right;
    }

.LotHead[b-mrykr1zbp0] {
    background: #F2FAF9;
    font-size: 11px;
    color: #79838d;
    letter-spacing: .02em;
}

.LotItem + .LotItem[b-mrykr1zbp0] {
    border-top: 1px dashed #e6eaf1;
}

.LotCode[b-mrykr1zbp0] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 5px;
    background: #E7F5F4;
    color: #095E5A;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11.5px;
}

.LotMuted[b-mrykr1zbp0] {
    color: #79838d;
}

.LotExp.Near[b-mrykr1zbp0] {
    padding: 1px 7px;
    border-radius: 5px;
    background: #fff8ec;
    color: #b45309;
}

.LotExp.Expired[b-mrykr1zbp0] {
    padding: 1px 7px;
    border-radius: 5px;
    background: #fdecec;
    color: #d64545;
}

.LotDaysLeft[b-mrykr1zbp0] {
    margin-left: 6px;
    font-size: 11px;
    color: #98a2ad;
}

    .LotDaysLeft.Near[b-mrykr1zbp0] {
        color: #b45309;
        font-weight: 600;
    }

    .LotDaysLeft.Expired[b-mrykr1zbp0] {
        color: #d64545;
        font-weight: 600;
    }

.LotUnit[b-mrykr1zbp0] {
    margin-left: 3px;
    font-size: 11px;
    color: #98a2ad;
}

/* /Components/Pages/FrontEnd/Purchase/Componant/CoreBillComponant/ProductProvideComponent.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════
   [2026-10] รีโนเวท Modal "ตรวจเช็คสินค้า" (ProductProvideComponent)
   พื้นขาว/เทาอ่อน — teal #0B7A75 เป็นแค่จุดเน้น (ผู้ใช้ขอลดสีพื้นหลัง)
   สถานะ : IsWaiting (เทา) · IsPartial (เหลือง) · IsOver (แดง) · IsDone (เขียว)
   ════════════════════════════════════════════════════════════ */

.GoogleFont[b-640ty0370w] {
    font-family: GoogleFont;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 200, 'opsz' 20;
    font-weight: normal;
    line-height: 1;
}

/* ── Overlay ── */
.MainScreen[b-640ty0370w] {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}

.OpacityBackground[b-640ty0370w] {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .6);
}

.MainBox[b-640ty0370w] {
    position: relative;
    width: 100%;
    max-width: 1040px;
    max-height: calc(100vh - 40px);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .35);
    display: flex;
    flex-direction: column;
    color: #1e293b;
}

    .MainBox button[b-640ty0370w],
    .MainBox input[b-640ty0370w] {
        font-family: inherit;
    }

/* ═══ HEADER — พื้นขาว ใช้ teal เป็นแค่จุดเน้น (ลดสีพื้นหลัง) ═══ */
.PVHead[b-640ty0370w] {
    background: #fff;
    color: #0f172a;
    padding: 16px 20px 14px;
    border-top: 4px solid #0B7A75;
    border-bottom: 1px solid #eef2f6;
    flex-shrink: 0;
}

.PVHeadTop[b-640ty0370w] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.PVHeadIcon[b-640ty0370w] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #F2FAF9;
    border: 1px solid #DDEFED;
    color: #0B7A75;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.PVHeadInfo[b-640ty0370w] {
    flex: 1;
    min-width: 0;
}

.PVHeadSub[b-640ty0370w] {
    font-size: 12px;
    color: #64748b;
}

.PVHeadCode[b-640ty0370w] {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 1.25;
    word-break: break-all;
    color: #0f172a;
}

.PVHeadMeta[b-640ty0370w] {
    font-size: 12.5px;
    color: #64748b;
    margin-top: 2px;
}

.PVHeadRight[b-640ty0370w] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.PVClose[b-640ty0370w] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 19px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}

    .PVClose:hover[b-640ty0370w] {
        background: #e2e8f0;
        color: #0f172a;
    }

/* ── ผลการตรวจเช็ค (pill ในหัว) ── */
.PVResultPill[b-640ty0370w] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
}

    .PVResultPill.IsWaiting[b-640ty0370w] { color: #475569; }
    .PVResultPill.IsPartial[b-640ty0370w] { color: #b45309; }
    .PVResultPill.IsOver[b-640ty0370w] { color: #dc2626; }
    .PVResultPill.IsDone[b-640ty0370w] { color: #047857; }

/* ── จุดสีสถานะ (ใช้ร่วม pill/chip) ── */
.PVDot[b-640ty0370w] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
}

.IsPartial > .PVDot[b-640ty0370w] { background: #f59e0b; }
.IsOver > .PVDot[b-640ty0370w] { background: #ef4444; }
.IsDone > .PVDot[b-640ty0370w] { background: #10b981; }

/* ── แถบความคืบหน้ารวม ── */
.PVProgress[b-640ty0370w] {
    margin-top: 14px;
}

.PVProgressTop[b-640ty0370w] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12.5px;
    color: #64748b;
    margin-bottom: 6px;
}

    .PVProgressTop b[b-640ty0370w] {
        color: #0f172a;
        font-size: 14px;
    }

.PVProgressPct[b-640ty0370w] {
    font-weight: 700;
    color: #0f172a;
}

.PVProgressBar[b-640ty0370w] {
    height: 6px;
    border-radius: 999px;
    background: #eef2f6;
    overflow: hidden;
}

    .PVProgressBar > div[b-640ty0370w] {
        height: 100%;
        border-radius: 999px;
        background: #0B7A75;
        transition: width .3s ease;
    }

        .PVProgressBar > div.IsDone[b-640ty0370w] { background: #10b981; }
        .PVProgressBar > div.IsOver[b-640ty0370w] { background: #ef4444; }
        .PVProgressBar > div.IsPartial[b-640ty0370w] { background: #0B7A75; }

/* ═══ TOOLBAR ═══ */
.PVToolbar[b-640ty0370w] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    padding: 14px 20px 10px;
    border-bottom: 1px solid #eef2f6;
    flex-shrink: 0;
}

.PVScan[b-640ty0370w] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 8px 0 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 11px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s, background .15s;
    min-width: 0;
}

    .PVScan:focus-within[b-640ty0370w] {
        border-color: #0B7A75;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(11,122,117,.14);
    }

.PVScanIcon[b-640ty0370w] {
    font-size: 22px;
    color: #0B7A75;
}

.PVScanInput[b-640ty0370w] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-size: 15px;
    color: #0f172a;
}

    .PVScanInput:focus[b-640ty0370w] {
        border: none;
        outline: none;
        box-shadow: none;
    }

    .PVScanInput[b-640ty0370w]::placeholder {
        color: #94a3b8;
    }

.PVScanKey[b-640ty0370w] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 2px 7px;
}

.PVTools[b-640ty0370w] {
    display: flex;
    gap: 8px;
}

.PVBtn[b-640ty0370w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 14px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}

    .PVBtn .GoogleFont[b-640ty0370w] {
        font-size: 18px;
    }

.PVBtnPrimary[b-640ty0370w] {
    background: #0B7A75;
    color: #fff;
    border: 1px solid #0B7A75;
}

    .PVBtnPrimary:hover[b-640ty0370w] {
        background: #095E5A;
        border-color: #095E5A;
    }

.PVBtnDanger[b-640ty0370w] {
    background: #fff;
    color: #dc2626;
    border: 1px solid #fecaca;
}

    .PVBtnDanger:hover[b-640ty0370w] {
        background: #dc2626;
        border-color: #dc2626;
        color: #fff;
    }

.PVScanHint[b-640ty0370w] {
    grid-column: 1 / -1;
    font-size: 11.5px;
    color: #94a3b8;
}

    .PVScanHint code[b-640ty0370w] {
        font-family: inherit;
        font-size: 11px;
        color: #334155;
        background: #f1f5f9;
        border-radius: 4px;
        padding: 0 5px;
    }

/* ═══ FILTER CHIPS ═══ */
.PVChips[b-640ty0370w] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 20px;
    flex-shrink: 0;
}

.PVChip[b-640ty0370w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 12.5px;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

    .PVChip b[b-640ty0370w] {
        font-weight: 700;
        color: #0f172a;
    }

    .PVChip:hover[b-640ty0370w] {
        border-color: #9fd3ce;
    }

    .PVChip.Active[b-640ty0370w] {
        background: #0B7A75;
        border-color: #0B7A75;
        color: #fff;
    }

        .PVChip.Active b[b-640ty0370w] {
            color: #fff;
        }

/* ═══ TABLE ═══ */
.PVBody[b-640ty0370w] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 20px 14px;
    overflow: hidden;
}

.PVTable[b-640ty0370w] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #e6edf2;
    border-radius: 12px;
    overflow: hidden;
}

.PVScroll[b-640ty0370w] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.PVRow[b-640ty0370w] {
    display: grid;
    grid-template-columns: 52px 92px minmax(0, 1fr) 120px 110px 120px 130px;
    align-items: center;
}

.PVHeadRow[b-640ty0370w] {
    background: #f8fafc;
    border-bottom: 1px solid #eef2f6;
    font-size: 11.5px;
    font-weight: 600;
    color: #5c666f;
    flex-shrink: 0;
}

    .PVHeadRow .PVCell[b-640ty0370w] {
        padding-top: 10px;
        padding-bottom: 10px;
    }

.PVCell[b-640ty0370w] {
    padding: 0 10px;
    min-width: 0;
}

.PVItem[b-640ty0370w] {
    min-height: 56px;
    border-bottom: 1px solid #f1f5f9;
    border-left: 3px solid transparent;
    font-size: 13px;
    color: #334155;
    transition: background .2s;
}

    .PVItem:last-child[b-640ty0370w] { border-bottom: none; }
    .PVItem:hover[b-640ty0370w] { background: #fafcfc; }
    .PVItem.IsDone[b-640ty0370w] { border-left-color: #10b981; }
    .PVItem.IsPartial[b-640ty0370w] { border-left-color: #f59e0b; }
    .PVItem.IsOver[b-640ty0370w] { border-left-color: #ef4444; }

    /* แถวที่สแกนล่าสุด */
    .PVItem.IsLast[b-640ty0370w] {
        background: #f8fafc;
        animation: PVFlash-b-640ty0370w 1.2s ease;
    }

@keyframes PVFlash-b-640ty0370w {
    0% { background: #e2f3f1; }
    100% { background: #f8fafc; }
}

.PVNo[b-640ty0370w],
.PVUnit[b-640ty0370w],
.PVQty[b-640ty0370w],
.PVLot[b-640ty0370w] {
    text-align: center;
}

.PVNo[b-640ty0370w] {
    color: #94a3b8;
    font-weight: 600;
}

.PVCode[b-640ty0370w] {
    font-variant-numeric: tabular-nums;
    color: #475569;
}

.PVName[b-640ty0370w] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: #0f172a;
}

.PVUnit[b-640ty0370w] {
    color: #64748b;
}

/* ── จำนวนที่ตรวจแล้ว ── */
.PVQty[b-640ty0370w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.PVQtyNum[b-640ty0370w] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .PVQtyNum b[b-640ty0370w] {
        font-size: 15px;
        color: #0f172a;
    }

    .PVQtyNum span[b-640ty0370w] {
        color: #94a3b8;
        margin-left: 2px;
    }

.PVQtyBar[b-640ty0370w],
.PVQtyPart[b-640ty0370w] {
    width: 64px;
    height: 5px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

    .PVQtyBar > div[b-640ty0370w],
    .PVQtyPart > div[b-640ty0370w] {
        height: 100%;
        background: #10b981;
        border-radius: 999px;
        transition: width .3s ease;
    }

.IsPartial .PVQtyBar > div[b-640ty0370w] { background: #f59e0b; }
.IsOver .PVQtyBar > div[b-640ty0370w] { background: #ef4444; }
.PVQtyPart > div[b-640ty0370w] { background: #38bdf8; }

/* ── สถานะต่อแถว (คลิก = ยกเลิกการตรวจเช็ครายการ) ── */
.PVPill[b-640ty0370w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .12s;
}

    .PVPill:hover[b-640ty0370w] { filter: brightness(.95); }
    .PVPill.IsPartial[b-640ty0370w] { color: #b45309; }
    .PVPill.IsOver[b-640ty0370w] { color: #dc2626; }
    .PVPill.IsDone[b-640ty0370w] { color: #047857; }

/* ── ปุ่มเลือก Lot ── */
.LotPickBtn[b-640ty0370w] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: #0B7A75;
    border: 1px solid #cfe6e3;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background .12s, border-color .12s;
}

    .LotPickBtn .GoogleFont[b-640ty0370w] { font-size: 16px; }
    .LotPickBtn:hover[b-640ty0370w] { background: #F2FAF9; border-color: #9fd3ce; }

    .LotPickBtn.HasLot[b-640ty0370w] {
        background: #fff;
        color: #15803d;
        border-color: #bbf7d0;
    }

        .LotPickBtn.HasLot:hover[b-640ty0370w] { background: #f0fdf4; border-color: #86efac; }

    .LotPickBtn .Badge[b-640ty0370w] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        font-size: 11px;
        font-weight: 700;
        background: #fff;
        color: #15803d;
        border: 1px solid currentColor;
    }

/* ── ว่าง ── */
.PVEmpty[b-640ty0370w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 16px;
    color: #94a3b8;
    font-size: 13px;
}

    .PVEmpty .GoogleFont[b-640ty0370w] { font-size: 34px; color: #cbd5e1; }

/* ═══ FOOTER ═══ */
.PVFoot[b-640ty0370w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    background: #f8fafc;
    border-top: 1px solid #eef2f6;
    flex-shrink: 0;
}

.PVFootInfo[b-640ty0370w] {
    font-size: 12.5px;
    color: #64748b;
    min-width: 0;
}

.PVFootOk[b-640ty0370w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #047857;
    font-weight: 600;
}

    .PVFootOk .GoogleFont[b-640ty0370w] { font-size: 18px; }

.PVFootBtns[b-640ty0370w] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.PVBtnGhost[b-640ty0370w] {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .PVBtnGhost:hover[b-640ty0370w] { background: #f1f5f9; }

.FinishedBtn[b-640ty0370w] {
    padding: 10px 30px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: background .15s;
}

.FinishedBtnActive[b-640ty0370w] {
    background: #0B7A75;
    color: #fff;
}

    .FinishedBtnActive:hover[b-640ty0370w] { background: #095E5A; }

.FinishedBtnDisabled[b-640ty0370w] {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
}

/* ── Scrollbar ── */
.PVScroll[b-640ty0370w]::-webkit-scrollbar { width: 6px; }
.PVScroll[b-640ty0370w]::-webkit-scrollbar-track { background: transparent; }
.PVScroll[b-640ty0370w]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.PVScroll[b-640ty0370w]::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .PVRow[b-640ty0370w] { grid-template-columns: 44px 80px minmax(0, 1fr) 96px 92px 108px 120px; }
    .PVToolbar[b-640ty0370w] { grid-template-columns: 1fr; }
    .PVTools > .PVBtn[b-640ty0370w] { flex: 1; justify-content: center; }
}

/* ≤ 768px : เต็มจอ + แถว → การ์ด */
@media (max-width: 768px) {
    .MainScreen[b-640ty0370w] { padding: 0; }

    .MainBox[b-640ty0370w] {
        max-width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }

    .PVHead[b-640ty0370w] { padding: 12px 14px 12px; }
    .PVHeadIcon[b-640ty0370w] { display: none; }
    .PVHeadCode[b-640ty0370w] { font-size: 17px; }
    .PVHeadMeta[b-640ty0370w] { font-size: 11.5px; }
    .PVHeadTop[b-640ty0370w] { flex-wrap: wrap; gap: 8px; }
    .PVHeadRight[b-640ty0370w] { margin-left: auto; }
    .PVResultPill[b-640ty0370w] { font-size: 11.5px; padding: 5px 10px; }
    .PVProgress[b-640ty0370w] { margin-top: 10px; }

    .PVToolbar[b-640ty0370w] { padding: 10px 14px 8px; }
    .PVScanKey[b-640ty0370w] { display: none; }
    .PVBtn[b-640ty0370w] { height: 40px; font-size: 12.5px; padding: 0 10px; }

    .PVChips[b-640ty0370w] {
        padding: 8px 14px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .PVChip[b-640ty0370w] { flex-shrink: 0; }

    .PVBody[b-640ty0370w] { padding: 0 10px 10px; }
    .PVTable[b-640ty0370w] { border: none; border-radius: 0; overflow: visible; }
    .PVHeadRow[b-640ty0370w] { display: none; }

    .PVItem[b-640ty0370w] {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "no name name"
            "no code unit"
            "qty qty state"
            "lot lot lot";
        gap: 6px 10px;
        padding: 12px;
        margin-bottom: 8px;
        border: 1px solid #e6edf2;
        border-left-width: 4px;
        border-radius: 12px;
        background: #fff;
    }

        .PVItem:last-child[b-640ty0370w] { border-bottom: 1px solid #e6edf2; }

    .PVItem .PVCell[b-640ty0370w] { padding: 0; text-align: left; }
    .PVItem .PVNo[b-640ty0370w] {
        grid-area: no;
        align-self: start;
        width: 26px;
        height: 26px;
        border-radius: 8px;
        background: #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }
    .PVItem .PVName[b-640ty0370w] { grid-area: name; white-space: normal; line-height: 1.35; }
    .PVItem .PVCode[b-640ty0370w] { grid-area: code; font-size: 12px; }
    .PVItem .PVUnit[b-640ty0370w] { grid-area: unit; font-size: 12px; text-align: right; }
    .PVItem .PVQty[b-640ty0370w] { grid-area: qty; flex-direction: row; justify-content: flex-start; gap: 10px; }
    .PVItem .PVQty[b-640ty0370w]::before { content: "ตรวจแล้ว"; font-size: 11.5px; color: #94a3b8; }
    .PVItem .PVState[b-640ty0370w] { grid-area: state; text-align: right; }
    .PVItem .PVLot[b-640ty0370w] { grid-area: lot; }
    .PVItem .LotPickBtn[b-640ty0370w] { width: 100%; justify-content: center; }

    .PVFoot[b-640ty0370w] {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 14px;
        gap: 8px;
    }

    .PVFootInfo[b-640ty0370w] { text-align: center; font-size: 11.5px; }
    .PVFootBtns > button[b-640ty0370w] { flex: 1; padding: 12px; }
    .FinishedBtn[b-640ty0370w] { flex: 2 !important; }
}

@media (max-width: 400px) {
    .PVTools[b-640ty0370w] { flex-direction: column; }
    .PVScanHint[b-640ty0370w] { display: none; }
}
/* /Components/Pages/FrontEnd/Purchase/Componant/CoreBillComponant/SearchBarcodeCore.razor.rz.scp.css */
.BarcodeMain[b-6c4aozdkg4] {
    background: white;
    padding: 15px 24px;
}

    .BarcodeMain > div:nth-child(1)[b-6c4aozdkg4] {
        font-size: 14px;
    }

    .BarcodeMain > div:nth-child(2)[b-6c4aozdkg4] {
        display: flex;
        align-items: center;
    }

        .BarcodeMain > div:nth-child(2) > div:first-child[b-6c4aozdkg4] {
            padding-right: 15px;
        }

        .BarcodeMain .SBCInputWrap > input[b-6c4aozdkg4] {
            width: 100%;
            padding-left: 15px;
            border-radius: 10px;
            border: 1px solid black;
        }

        .BarcodeMain .SBCInputWrap > input:focus[b-6c4aozdkg4] {
            box-shadow: none!important;
        }

/* กล่องครอบช่องค้นหา + รายการแนะนำ (.pl-suggest จาก minelist.css วาง absolute ใต้ช่อง) */
.SBCInputWrap[b-6c4aozdkg4] {
    position: relative;
    flex: 0 1 300px;
    min-width: 0;
}

/* รหัสสินค้า (OP-/P-) ในแถวแนะนำ */
.SBCCode[b-6c4aozdkg4] {
    flex: 0 0 auto;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: #6B7688;
}
/* /Components/Pages/FrontEnd/Purchase/Componant/CoreBillComponant/SearchProductDetail.razor.rz.scp.css */
.GoogleFont[b-o2atcz5fhu] {
    font-family: GoogleFont;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 200, 'opsz' 20;
}

/* ── Modal shell ── */
.MainScreen[b-o2atcz5fhu] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.OpacityBackground[b-o2atcz5fhu] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.MainBox[b-o2atcz5fhu] {
    position: relative;
    width: 1100px;
    max-width: 95vw;
    height: 90vh;
    max-height: 90vh;
    background: white;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header card (gradient navy) ── */
.MainCardHeader[b-o2atcz5fhu] {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    padding: 22px 28px;
    border-radius: 12px 12px 0 0;
}

.HeaderTopRow[b-o2atcz5fhu] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.HeaderBackButton[b-o2atcz5fhu] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
    transition: background .15s;
    user-select: none;
    flex-shrink: 0;
}

    .HeaderBackButton:hover[b-o2atcz5fhu] {
        background: rgba(255, 255, 255, 0.12);
    }

.HeaderTitleZone[b-o2atcz5fhu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.HeaderSubtitle[b-o2atcz5fhu] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.HeaderProductCode[b-o2atcz5fhu] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: white;
    line-height: 1.2;
}

.HeaderProductName[b-o2atcz5fhu] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

.HeaderPillRow[b-o2atcz5fhu] {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.HeaderPill[b-o2atcz5fhu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.92);
}

    .HeaderPill .PillLabel[b-o2atcz5fhu] {
        color: rgba(255, 255, 255, 0.6);
        font-weight: 500;
    }

/* ── Content grid below header ── */
.ContentGrid[b-o2atcz5fhu] {
    display: grid;
    grid-template-columns: 360px 1fr;
    grid-template-rows: 1fr;
    gap: 14px;
    padding: 14px 18px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 900px) {
    /* จอแคบ: เลิกบีบทุกส่วนลงกล่อง 90vh (ทำให้รูปโดนตัด + gallery/Lot หาย + เลื่อนไม่ได้)
       เปลี่ยนเป็นให้ modal สูงตามเนื้อหา แล้วเลื่อนทั้งกล่องผ่าน .MainScreen */
    .MainScreen[b-o2atcz5fhu] {
        align-items: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 0;
    }

    .OpacityBackground[b-o2atcz5fhu] {
        position: fixed;
    }

    .MainBox[b-o2atcz5fhu] {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .ContentGrid[b-o2atcz5fhu] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        overflow: visible;
    }

    .LeftColumn[b-o2atcz5fhu],
    .RightColumn[b-o2atcz5fhu] {
        height: auto;
        overflow: visible;
    }

    /* การ์ดในจอแคบให้สูงตามเนื้อหา ไม่ยืด/หดอัตโนมัติ */
    .RightColumn > .InvoiceCard:last-child[b-o2atcz5fhu],
    .LotTableWrap[b-o2atcz5fhu] {
        flex: none;
    }

    .LotListScroll[b-o2atcz5fhu] {
        max-height: 260px;
    }

    /* ปุ่มบันทึก/ยกเลิก ติดขอบล่างจอตอนเลื่อน */
    .ButtonRow[b-o2atcz5fhu] {
        position: sticky;
        bottom: 0;
        z-index: 5;
    }
}

.LeftColumn[b-o2atcz5fhu],
.RightColumn[b-o2atcz5fhu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* Lot card (last card in right column) grows to fill remaining vertical space */
.RightColumn > .InvoiceCard:last-child[b-o2atcz5fhu] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ── InvoiceCard pattern ── */
.InvoiceCard[b-o2atcz5fhu] {
    background: white;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid #f3f4f6;
}

.SectionHeader[b-o2atcz5fhu] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

/* ── Product image gallery ── */
.MainImage[b-o2atcz5fhu] {
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 10px;
    padding: 12px;
    height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .MainImage img[b-o2atcz5fhu] {
        max-width: 100%;
        max-height: 100%;
    }

.MiniImage[b-o2atcz5fhu] {
    margin-top: 8px;
    display: flex;
    cursor: pointer;
}

    .MiniImage .Per[b-o2atcz5fhu] {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #e5e7eb;
        background: #fafbfc;
        border-radius: 8px;
        flex: 1;
        height: 40px;
        padding: 4px;
        cursor: pointer;
        transition: border-color .15s;
    }

        .MiniImage .Per:hover[b-o2atcz5fhu] {
            border-color: #3b82f6;
        }

        .MiniImage .Per img[b-o2atcz5fhu] {
            max-width: 100%;
            max-height: 100%;
        }

/* ── Product detail labels ── */
.SubLabel[b-o2atcz5fhu] {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-bottom: 4px;
    margin-top: 10px;
}

    .SubLabel:first-child[b-o2atcz5fhu] {
        margin-top: 0;
    }

.TitleDetail[b-o2atcz5fhu] {
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
    min-height: 18px;
}

.WarningBadge[b-o2atcz5fhu] {
    display: inline-block;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.WarningDetail[b-o2atcz5fhu] {
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
    min-height: 24px;
    margin-top: 4px;
}

.PromotionPer[b-o2atcz5fhu] {
    font-size: 13px;
    font-weight: 600;
    color: #3b82f6;
    margin-top: 4px;
}

    .PromotionPer span[b-o2atcz5fhu] {
        padding-right: 8px;
    }

/* ── Sale form rows ── */
.SaleFormRow[b-o2atcz5fhu] {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
    flex-wrap: wrap;
}

    .SaleFormRow:last-child[b-o2atcz5fhu] {
        margin-bottom: 0;
    }

.SaleFormCell[b-o2atcz5fhu] {
    flex: 1;
    min-width: 120px;
    position: relative;
}

.TitleBase[b-o2atcz5fhu] {
    font-weight: 600;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.SaleFormCell input[b-o2atcz5fhu] {
    width: 100%;
    outline: none;
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    text-align: center;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
    color: #111;
}

    .SaleFormCell input:focus[b-o2atcz5fhu] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

.FakeNotDisableInput[b-o2atcz5fhu] {
    background: white;
    color: #111;
    cursor: text;
    border: 1px solid #e5e7eb;
    opacity: 1;
}

/* unit picker */
.UnitPickerWrap[b-o2atcz5fhu] {
    display: flex;
    align-items: center;
    position: relative;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
}

    .UnitPickerWrap input[b-o2atcz5fhu] {
        flex: 1;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        cursor: pointer;
        text-align: center;
        padding: 8px 10px;
    }

.UnitPickerOverlay[b-o2atcz5fhu] {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}

.UnitPickerArrow[b-o2atcz5fhu] {
    color: #9ca3af;
    padding: 0 10px;
    user-select: none;
    flex-shrink: 0;
}

/* radio */
.FakeRadioButton[b-o2atcz5fhu] {
    width: 14px;
    height: 14px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    margin-right: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

    .FakeRadioButton .Active[b-o2atcz5fhu] {
        width: 7px;
        height: 7px;
        border-radius: 50%;
    }

.RadioLabelRow[b-o2atcz5fhu] {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    width: fit-content;
    margin-bottom: 5px;
}

    .RadioLabelRow .TitleBase[b-o2atcz5fhu] {
        margin-bottom: 0;
    }

/* edit-price checkbox column */
.EditPriceCell[b-o2atcz5fhu] {
    display: flex;
    align-items: center;
    padding-bottom: 8px;
    align-self: end;
}

    .EditPriceCell input[type="checkbox"][b-o2atcz5fhu] {
        width: 14px;
        height: 14px;
        margin-right: 6px;
        accent-color: #3b82f6;
    }

    .EditPriceCell span[b-o2atcz5fhu] {
        font-size: 12px;
        color: #9ca3af;
        white-space: nowrap;
    }

/* net price summary */
.NetPriceRow[b-o2atcz5fhu] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    gap: 14px;
}

.NetPriceLabel[b-o2atcz5fhu] {
    font-size: 13px;
    color: #374151;
    font-weight: 600;
}

.NetPriceValue[b-o2atcz5fhu] {
    text-align: right !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ef4444 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 220px !important;
    padding: 0 !important;
    outline: none;
}

/* ── Product price dropdown ── */
.ProductPriceListBox[b-o2atcz5fhu] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    transform: scale(0.96);
    opacity: 0;
    z-index: 20;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 4px;
    pointer-events: none;
    transition: transform .15s, opacity .15s;
}

    .ProductPriceListBox.Active[b-o2atcz5fhu] {
        transform: scale(1);
        opacity: 1;
        pointer-events: auto;
    }

.DropdownHeaderRow[b-o2atcz5fhu] {
    display: grid;
    grid-template-columns: 90px 1fr 110px 110px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 6px 8px;
    border-bottom: 1px solid #f0f0f0;
    letter-spacing: 0.3px;
}

    .DropdownHeaderRow > div:nth-child(1)[b-o2atcz5fhu] {
        padding-left: 8px;
    }

    .DropdownHeaderRow > div:nth-child(3)[b-o2atcz5fhu] {
        text-align: center;
    }

    .DropdownHeaderRow > div:nth-child(4)[b-o2atcz5fhu] {
        text-align: end;
        padding-right: 16px;
    }

.DropdownListScroll[b-o2atcz5fhu] {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 6px;
    margin-top: 2px;
}

.ProductPriceListBox .GridProductPrice[b-o2atcz5fhu] {
    display: grid;
    grid-template-areas: "Name Lot BaseQty Price";
    grid-template-columns: 90px 1fr 110px 110px;
    font-size: 11px;
    padding: 8px;
    border: none;
    border-bottom: 1px solid #f9fafb;
    border-radius: 0;
    color: #374151;
    align-items: center;
}

    .ProductPriceListBox .GridProductPrice:last-child[b-o2atcz5fhu] {
        border-bottom: none;
    }

    .ProductPriceListBox .GridProductPrice.NotSelected[b-o2atcz5fhu] {
        color: #9ca3af;
        background: transparent;
    }

    .ProductPriceListBox .GridProductPrice.CanSelect[b-o2atcz5fhu] {
        cursor: pointer;
    }

        .ProductPriceListBox .GridProductPrice.CanSelect:hover[b-o2atcz5fhu] {
            background: #f9fafb;
        }

    .ProductPriceListBox .GridProductPrice .Name[b-o2atcz5fhu] {
        grid-area: Name;
        padding-left: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ProductPriceListBox .GridProductPrice .Lot[b-o2atcz5fhu] {
        grid-area: Lot;
        color: #9ca3af;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ProductPriceListBox .GridProductPrice .BaseQty[b-o2atcz5fhu] {
        grid-area: BaseQty;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #6b7280;
    }

    .ProductPriceListBox .GridProductPrice .Price[b-o2atcz5fhu] {
        grid-area: Price;
        padding-right: 16px;
        text-align: end;
        font-weight: 600;
        color: #111;
    }

/* ── Lot selection ── */
.LotToggleLabel[b-o2atcz5fhu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    margin-bottom: 10px;
    flex-shrink: 0;
}

    .LotToggleLabel input[type="checkbox"][b-o2atcz5fhu] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #3b82f6;
    }

.LotTableWrap[b-o2atcz5fhu] {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.LotTableHeader[b-o2atcz5fhu] {
    display: flex;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    background: #f9fafb;
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.LotListScroll[b-o2atcz5fhu] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: white;
}

.LotPerMain[b-o2atcz5fhu] {
    color: #374151;
    font-size: 13px;
    padding: 10px 12px;
    border-bottom: 1px solid #f9fafb;
    transition: background .15s;
}

    .LotPerMain:last-child[b-o2atcz5fhu] {
        border-bottom: none;
    }

    .LotPerMain.False[b-o2atcz5fhu] {
        background: #fef2f2;
        border-left: 3px solid #ef4444;
        padding-left: 9px;
    }

    .LotPerMain > div[b-o2atcz5fhu] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .LotPerMain input[b-o2atcz5fhu] {
        width: 100%;
        height: 32px;
        text-align: end;
        padding: 0 10px;
        outline: none;
        border: 1px solid #e5e7eb;
        background: white;
        border-radius: 6px;
        font-size: 13px;
        box-sizing: border-box;
        transition: border-color .15s, box-shadow .15s;
    }

        .LotPerMain input:focus[b-o2atcz5fhu] {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

/* lot row content layout (was BaseLotSizeColumn) */
.BaseLotSizeColumn[b-o2atcz5fhu] {
    font-size: 13px;
    width: 100%;
}

    .BaseLotSizeColumn > div:nth-child(1)[b-o2atcz5fhu] {
        flex: 1;
        min-width: 0;
        padding-right: 10px;
    }

    .BaseLotSizeColumn > div:nth-child(2)[b-o2atcz5fhu] {
        width: 110px;
        text-align: end;
        flex-shrink: 0;
    }

    .BaseLotSizeColumn > div:nth-child(3)[b-o2atcz5fhu] {
        width: 90px;
        text-align: end;
        flex-shrink: 0;
        color: #6b7280;
    }

/* lot code badge */
.LotCode[b-o2atcz5fhu] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #3b82f6;
    background: #eff6ff;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 4px;
}

.LotMeta[b-o2atcz5fhu] {
    font-size: 11px;
    color: #6b7280;
    margin-top: 3px;
}

.LotExpiry[b-o2atcz5fhu] {
    color: #ef4444;
}

/* lot summary */
.LotSumMain[b-o2atcz5fhu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid #f0f0f0;
    background: #fafbfc;
    font-size: 13px;
    flex-shrink: 0;
}

    .LotSumMain > div:nth-child(1)[b-o2atcz5fhu] {
        color: #6b7280;
        font-weight: 500;
    }

    .LotSumMain > div:nth-child(2)[b-o2atcz5fhu] {
        color: #ef4444;
        font-weight: 700;
        font-size: 14px;
    }

/* ── Buttons (modal footer, always visible) ── */
.ButtonRow[b-o2atcz5fhu] {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 14px 18px;
    background: white;
    border-top: 1px solid #f0f0f0;
    border-radius: 0 0 12px 12px;
    flex-shrink: 0;
}

.PrimaryBtn[b-o2atcz5fhu] {
    padding: 12px 36px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    user-select: none;
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: filter .15s, box-shadow .15s;
    min-width: 140px;
}

    .PrimaryBtn:hover[b-o2atcz5fhu] {
        filter: brightness(1.05);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    }

.DangerBtn[b-o2atcz5fhu] {
    padding: 12px 36px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    user-select: none;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    transition: background .15s;
    min-width: 140px;
}

    .DangerBtn:hover[b-o2atcz5fhu] {
        background: #fee2e2;
    }

/* ── Misc preserved ── */
.InputBase[b-o2atcz5fhu] {
    outline: none;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-align: center;
    padding: 6px 10px;
    background: white;
}

.AssetProfitGPMTitle[b-o2atcz5fhu] {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
}
/* /Components/Pages/FrontEnd/Purchase/Componant/CoreBillComponant/SearchProductListBox.razor.rz.scp.css */
.MainScreen[b-1rg4ykxxeo] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* [2026-10] เดิม 1 → หัวบิล sticky (BillHeroHeader 5) และแถบล่าง (BillActionBar 8) ทับ popup + พื้นหลังมืด
       9 = เหนือ 2 แถบนั้น แต่ต่ำกว่า popup รายละเอียดสินค้า (SearchProductDetail 10) ที่เปิดต่อจากรายการนี้ */
    z-index: 9;
}

.OpacityBackground[b-1rg4ykxxeo] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0, 0.5);
}

.FilterZoneMain[b-1rg4ykxxeo] {
    display: flex;
    margin: 10px 0px;
}

    .FilterZoneMain .SearchZone[b-1rg4ykxxeo] {
        display: flex;
        align-items: center;
        background: #233134;
        color: white;
        padding: 10px;
        margin-right: 15px;
        border-radius: 5px;
    }

    .FilterZoneMain .FilterZone[b-1rg4ykxxeo] {
        padding: 10px;
        background: #23313416;
        flex: 1;
        border-radius: 5px;
    }

.TableFakeBodySize[b-1rg4ykxxeo] {
    max-height: 500px;
    overflow-y: scroll;
}

.TableFakeSizeControl[b-1rg4ykxxeo] {
    display: flex;
}

    .TableFakeSizeControl div[b-1rg4ykxxeo] {
        text-align: center;
        border: solid 1px #233134;
        background: #233134;
    }

        .TableFakeSizeControl div:nth-child(1)[b-1rg4ykxxeo] {
            width: 120px;
            border-radius: 5px 0px 0px 0px;
        }

        .TableFakeSizeControl div:nth-child(2)[b-1rg4ykxxeo] {
            flex: 1;
            border-left: none;
        }

        .TableFakeSizeControl div:nth-child(3)[b-1rg4ykxxeo] {
            width: 120px;
            border-left: none;
        }

        .TableFakeSizeControl div:nth-child(4)[b-1rg4ykxxeo] {
            width: 120px;
            border-left: none;
            border-radius: 0px 5px 0px 0px;
        }

.ProductPer[b-1rg4ykxxeo] {
    color: black;
    padding: 5px 0px;
    transition: 0.2s;
    cursor: pointer;
}

    .ProductPer div[b-1rg4ykxxeo] {
        display: flex;
        align-items: center;
    }

    .ProductPer.Active[b-1rg4ykxxeo] {
        background: #2331347c !important;
        color: white !important;
    }

.CloseButton[b-1rg4ykxxeo] {
    position: relative;
    height: 30px;
    width: 30px;
    cursor: pointer;
} 

    .CloseButton[b-1rg4ykxxeo]::after {
        position: absolute;
        font-family: GoogleFont;
        content: "\e5cd";
        font-size: 20px;
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 200, 'opsz' 20;
        color: gray;
        left: 68%;
        height: 100%;
        width: 100%;
        transform: translate(-50%,1px);
    }

.MainBox[b-1rg4ykxxeo] {
    position: absolute;
    height: 600px;
    background: rgb(255, 255, 255);
    display: grid;
    grid-template-columns: 125px 1000px;
    grid-template-areas: "MainZone1 MainZone2";
}

    .MainBox .Title[b-1rg4ykxxeo] {
        font-size: 20px;
    }

.MainZone1[b-1rg4ykxxeo] {
    grid-area: MainZone1;
}

.MainZone2[b-1rg4ykxxeo] {
    grid-area: MainZone2;
}

.MenuBlock[b-1rg4ykxxeo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: fit-content;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
}

    .MenuBlock a[b-1rg4ykxxeo] {
        font-size: 12px;
        margin-top: -15px;
    }

.InputSearch[b-1rg4ykxxeo] {
    border: none;
    outline: none;
    box-shadow: none;
    background: none;
    padding: 0px 15px;
    font-size: 16px;
    height: 50px;
    width: 400px;
}

    .InputSearch:focus[b-1rg4ykxxeo] {
        border: none;
        outline: none;
        box-shadow: none;
    }

.ProductGridFullMain[b-1rg4ykxxeo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 25px 25px;
    height: 400px;
    overflow-y: scroll;
    padding-right: 30px;
    width: 96.8%;
}

.CSSGridFullMain[b-1rg4ykxxeo] {
    display: grid;
    grid-template-columns: 100px 150px 150px;
    grid-template-rows: 30px 50px 45px 30px;
    grid-template-areas:
        "PImage Name Name"
        "PImage Detail Detail"
        "PImage Detail Detail"
        "PImage Price Amount";
    transition: 0.5s;
    padding: 10px;
    border: solid 2px #d0d0d000;
    border-radius: 10px;
    cursor: pointer;
    height: fit-content;
}

    .CSSGridFullMain .PImage[b-1rg4ykxxeo] {
        display: flex;
        justify-content: center;
        align-items: center;
        grid-area: PImage;
        margin-right: 15px;
    }

        .CSSGridFullMain .PImage img[b-1rg4ykxxeo] {
            max-height: 100%;
            max-width: 100%;
        }

    .CSSGridFullMain .ProductIdGrid[b-1rg4ykxxeo] {
        display: none;
    }

    .CSSGridFullMain .ProductIdFullGrid[b-1rg4ykxxeo] {
        grid-area: ProductId;
        font-size: 10px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        height: fit-content;
        padding: 0px 20px;
        border: solid 1px #c8c8c8;
        border-radius: 100px;
        opacity: 0.5;
        transform: translateY(3px);
    }

    .CSSGridFullMain .Name[b-1rg4ykxxeo] {
        grid-area: Name;
        font-size: 20px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        height: fit-content;
    }

    .CSSGridFullMain .Detail[b-1rg4ykxxeo] {
        grid-area: Detail;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: normal;
        position: relative;
        font-size: 12px;
    }

        .CSSGridFullMain .Detail .TextOverFlow[b-1rg4ykxxeo] {
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }




    .CSSGridFullMain .Price[b-1rg4ykxxeo] {
        grid-area: Price;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .CSSGridFullMain .Amount[b-1rg4ykxxeo] {
        grid-area: Amount;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .CSSGridFullMain:hover[b-1rg4ykxxeo] {
        border: solid 2px #d0d0d0ff;
    }

/*//////////////////////////////////////////////////////////////////////////////////////*/

.ProductGridMain[b-1rg4ykxxeo] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px 10px;
    height: 400px;
    overflow-y: scroll;
    padding-right: 30px;
    width: 81.1%;
}

.CSSGridMain[b-1rg4ykxxeo] {
    display: grid;
    grid-template-columns: 150px;
    grid-template-rows: 60px auto auto auto;
    grid-template-areas:
        "PImage"
        "Name"
        "ProductIdGrid"
        "Price"
        "Amount";
    transition: 0.5s;
    padding: 15px;
    border: solid 2px #d0d0d03e;
    border-radius: 10px;
    cursor: pointer!important;
    height: fit-content;
}

    .CSSGridMain .PImage[b-1rg4ykxxeo] {
        display: flex;
        justify-content: center;
        align-items: center;
        grid-area: PImage;
    }

        .CSSGridMain .PImage img[b-1rg4ykxxeo] {
            max-height: 100%;
            max-width: 100%;
        }

    .CSSGridMain .Name[b-1rg4ykxxeo] {
        grid-area: Name;
        font-size: 16px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        height: fit-content;
        text-align: center;
    }

    .CSSGridMain .ProductIdGrid[b-1rg4ykxxeo] {
        grid-area: ProductIdGrid;
        font-size: 12px;
        text-align: center;
        opacity: 0.5;
    }

    .CSSGridMain .ProductIdFullGrid[b-1rg4ykxxeo] {
        grid-area: ProductIdFullGrid;
        font-size: 10px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        height: fit-content;
        padding: 0px 20px;
        border: solid 1px #c8c8c8;
        border-radius: 100px;
        opacity: 0.5;
        transform: translateY(3px);
        display: none;
    }

    .CSSGridMain .Detail[b-1rg4ykxxeo] {
        grid-area: Detail;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: normal;
        position: relative;
        font-size: 12px;
        display: none;
    }

        .CSSGridMain .Detail .TextOverFlow[b-1rg4ykxxeo] {
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .CSSGridMain .Price[b-1rg4ykxxeo] {
        grid-area: Price;
        display: flex;
        align-items: center;
        margin-top: -5px;
    }

    .CSSGridMain .Amount[b-1rg4ykxxeo] {
        grid-area: Amount;
        display: flex;
        align-items: center;
        margin-top: -5px;
    }

    .CSSGridMain:hover[b-1rg4ykxxeo] {
        border: solid 2px #d0d0d0ff;
    }

/*//////////////////////////////////////////////////////////////////////////////////////*/

.GridRowSizeBase[b-1rg4ykxxeo] {
    grid-template-columns: 120px 50px 450px 150px auto;
    height: fit-content;
}

.GridHeaderRow[b-1rg4ykxxeo] {
    display: grid;
    width: 100%;
    grid-template-areas: "HR1 HR2 HR3 HR4 HR5";
    border-top: dashed 2px;
    border-bottom: dashed 2px;
    padding: 5px 0px;
}
    .GridHeaderRow .HR1[b-1rg4ykxxeo] {
        grid-area: HR1;
        padding-left: 30px;
    }
    .GridHeaderRow .HR2[b-1rg4ykxxeo] {
        grid-area: HR2;
    }
    .GridHeaderRow .HR3[b-1rg4ykxxeo] {
        grid-area: HR3;
    }
    .GridHeaderRow .HR4[b-1rg4ykxxeo] {
        grid-area: HR4;
        text-align: end;
    }
    .GridHeaderRow .HR5[b-1rg4ykxxeo] {
        grid-area: HR5;
        text-align: end;
        padding-right: 30px;
    }


    .ProductRowMain[b-1rg4ykxxeo] {
        display: grid;
        grid-template-columns: 1fr;
        height: 388px;
        overflow-y: scroll;
        width: 100%;
    }

.CSSRowMain[b-1rg4ykxxeo] {
    display: grid;
    grid-template-rows: 30px;
    grid-template-areas:
        "ProductIdGrid PImage Name Amount Price";
    transition: 0.5s;
    padding: 5px 0px;
    cursor: pointer;
}

    .CSSRowMain .PImage[b-1rg4ykxxeo] {
        display: flex;
        justify-content: center;
        align-items: center;
        grid-area: PImage;
        margin-right: 25px;
    }

        .CSSRowMain .PImage img[b-1rg4ykxxeo] {
            max-height: 100%;
            max-width: 100%;
        }

    .CSSRowMain .Name[b-1rg4ykxxeo] {
        grid-area: Name;
        font-size: 16px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .CSSRowMain .ProductIdGrid[b-1rg4ykxxeo] {
        grid-area: ProductIdGrid;
        font-size: 12px;
        text-align: left;
        cursor: pointer;
        display: flex;
        align-items: center;
        padding-left: 30px;
    }

    .CSSRowMain .ProductIdFullGrid[b-1rg4ykxxeo] {
        grid-area: ProductIdFullGrid;
        font-size: 10px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        height: fit-content;
        padding: 0px 20px;
        border: solid 1px #c8c8c8;
        border-radius: 100px;
        opacity: 0.5;
        transform: translateY(3px);
        display: none;
    }

    .CSSRowMain .Detail[b-1rg4ykxxeo] {
        grid-area: Detail;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: normal;
        position: relative;
        font-size: 12px;
        display: none;
    }

        .CSSRowMain .Detail .TextOverFlow[b-1rg4ykxxeo] {
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .CSSRowMain .Price[b-1rg4ykxxeo] {
        grid-area: Price;
        display: flex;
        align-items: center;
        margin-top: 0px;
        cursor: pointer;
        padding-right: 15px;
        justify-content: end;
    }

    .CSSRowMain .Amount[b-1rg4ykxxeo] {
        grid-area: Amount;
        display: flex;
        justify-content: end;
        align-items: center;
        margin-top: 0px;
        cursor: pointer;
    }

    .CSSRowMain:hover[b-1rg4ykxxeo] {
        
    }
/* [2026-10] มือถือ/จอแคบ: กล่องเดิมกว้างตายตัว 125+1000px วางกลางจอ → บนจอ 390px ล้นทั้ง 2 ข้าง ปุ่ม ✕ ปิดอยู่นอกจอ กดไม่ได้
   (ตรวจพบโดย E2E audit "popup-offscreen") → เต็มจอเว้นขอบ, ซ่อนเมนูซ้าย (ยังกดไม่ได้อยู่แล้ว), ช่องค้นหายืดเต็มแถว, กริดสินค้ายุบคอลัมน์ */
@media (max-width: 1160px) {
    .MainBox[b-1rg4ykxxeo] {
        inset: 8px;
        height: auto;
        max-height: calc(100% - 16px);
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "MainZone2";
        overflow-y: auto;
        border-radius: 12px;
    }

    .MainZone1[b-1rg4ykxxeo] {
        display: none;
    }

    .MainZone2[b-1rg4ykxxeo] {
        min-width: 0;
    }

    /* แถวช่องค้นหา + ตัวเลือก รหัส/ชื่อ → ตัดบรรทัดได้ ; ช่องค้นหายืดเต็ม */
    .MainZone2 > div:nth-child(2) > div:nth-child(2)[b-1rg4ykxxeo] {
        flex-wrap: wrap;
        row-gap: 8px;
    }

        .MainZone2 > div:nth-child(2) > div:nth-child(2) > div:first-child[b-1rg4ykxxeo] {
            flex: 1 1 100%;
            min-width: 0;
        }

    .InputSearch[b-1rg4ykxxeo] {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .ProductGridFullMain[b-1rg4ykxxeo],
    .ProductGridMain[b-1rg4ykxxeo] {
        width: auto;
        padding: 0 12px;
        height: auto;
        max-height: 60vh;
    }

    .ProductGridMain[b-1rg4ykxxeo] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .ProductGridFullMain[b-1rg4ykxxeo] {
        grid-template-columns: minmax(0, 1fr);
    }

    .CSSGridFullMain[b-1rg4ykxxeo] {
        grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr);
    }

    .ProductRowMain[b-1rg4ykxxeo] {
        height: auto;
        max-height: 60vh;
    }
}

@media (max-width: 600px) {
    /* หัวข้อ "สินค้า" inline 44px → เล็กลง */
    .MainZone2 > div:nth-child(2) > div:first-child > div:first-child[b-1rg4ykxxeo] {
        font-size: 28px !important;
    }

    .GridRowSizeBase[b-1rg4ykxxeo] {
        grid-template-columns: 64px 32px minmax(0, 1fr) 56px 72px;
    }

    .GridHeaderRow .HR1[b-1rg4ykxxeo],
    .CSSRowMain .ProductIdGrid[b-1rg4ykxxeo] {
        padding-left: 8px;
    }

    .GridHeaderRow .HR5[b-1rg4ykxxeo] {
        padding-right: 8px;
    }

    .CSSRowMain .PImage[b-1rg4ykxxeo] {
        margin-right: 6px;
    }
}
/* /Components/Pages/FrontEnd/Purchase/Componant/CoreBillComponant/StatusCoreBill.razor.rz.scp.css */
.StatusBill[b-8pc49p5rt2] {
    display: flex;
    justify-content: space-between;
    padding: 15px 50px;
    background: white;
}
/* /Components/Pages/FrontEnd/Purchase/Componant/OnlinePromoBox.razor.rz.scp.css */
/* [2026-10] กล่องโปรโมชั่นหน้าร้าน — โทนฟ้าอ่อน/navy ของหน้าร้าน (ไม่ใช่ teal หลังบ้าน) ; ปุ่มสีทึบเรียบ */
.opb[b-ufrfiugjrx] { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #293649; }
.opb-line[b-ufrfiugjrx], .opb-promo[b-ufrfiugjrx] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opb-icon[b-ufrfiugjrx] { width: 20px; text-align: center; }
.opb-label[b-ufrfiugjrx] { color: #6b7280; }
.opb-code[b-ufrfiugjrx] { font-weight: 700; letter-spacing: .5px; color: #1d4ed8; background: #eff6ff; border: 1px dashed #93c5fd; border-radius: 6px; padding: 2px 10px; }
.opb-link[b-ufrfiugjrx] { margin-left: auto; color: #2563eb; cursor: pointer; user-select: none; }
.opb-link.danger[b-ufrfiugjrx] { color: #ef4444; }
.opb-input[b-ufrfiugjrx] { flex: 1 1 160px; min-width: 0; border: 1px solid #d5dbe3; border-radius: 8px; padding: 6px 10px; font-size: 14px; }
.opb-input:focus[b-ufrfiugjrx] { outline: none; border-color: #3b82f6; }
.opb-btn[b-ufrfiugjrx] { background: #3b82f6; color: #fff; border: none; border-radius: 8px; padding: 6px 14px; font-weight: 600; cursor: pointer; }
.opb-btn:disabled[b-ufrfiugjrx] { opacity: .55; cursor: default; }
.opb-error[b-ufrfiugjrx] { color: #ef4444; font-size: 13px; padding-left: 28px; }
.opb-promo-name[b-ufrfiugjrx] { flex: 1 1 auto; min-width: 0; }
.opb-promo-amt[b-ufrfiugjrx] { margin-left: auto; color: #be123c; font-weight: 700; white-space: nowrap; }
.opb-note[b-ufrfiugjrx] { color: #b45309; font-size: 13px; padding-left: 28px; }
/* /Components/Pages/FrontEnd/Purchase/Componant/PaymentSelectChoice.razor.rz.scp.css */
/* ── Outer wrapper ── */
.PSC_Wrap[b-6deu2oitaw] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ── Sections ── */
.PSC_Section[b-6deu2oitaw] {
    padding: 20px 22px;
    border-bottom: 1px solid #f3f4f6;
}

    .PSC_Section:last-child[b-6deu2oitaw] {
        border-bottom: none;
    }

.PSC_SectionTitle[b-6deu2oitaw] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 14px;
}

/* ── Payment type tabs ── */
.PSC_Tabs[b-6deu2oitaw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.PSC_Tab[b-6deu2oitaw] {
    height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid #d9dee3;
    font-size: 13px;
    font-weight: 500;
    user-select: none;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
    box-sizing: border-box;
}

.PSC_TabActive[b-6deu2oitaw] {
    cursor: pointer;
    color: #39424c;
}

    .PSC_TabActive:hover[b-6deu2oitaw] {
        border-color: #2563eb;
        color: #2563eb;
    }

.PSC_TabSelected[b-6deu2oitaw] {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
    font-weight: 600;
}

.PSC_TabDisabled[b-6deu2oitaw] {
    height: 36px;
    display: inline-flex;
    align-items: center;
    color: #c2c9d0;
    border-color: #e6eaee;
    cursor: not-allowed;
    background: #fff;
    font-weight: 400;
}

/* ── Account grid (3 columns) ── */
.PSC_AccountGrid[b-6deu2oitaw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 600px) {
    .PSC_AccountGrid[b-6deu2oitaw] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 380px) {
    .PSC_AccountGrid[b-6deu2oitaw] {
        grid-template-columns: 1fr;
    }
}

/* ── Account card ── */
.PSC_AccountCard[b-6deu2oitaw] {
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 12px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    user-select: none;
}

    .PSC_AccountCard:hover[b-6deu2oitaw] {
        border-color: #93bbfb;
        box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
    }

.PSC_AccountCardSelected[b-6deu2oitaw] {
    border-color: #2563eb !important;
    background: rgba(37,99,235,.06);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important;
}

/* ── Badge (bank abbreviation) ── */
.PSC_Badge[b-6deu2oitaw] {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
    flex-shrink: 0;
    overflow: hidden;
}

/* ── Account text ── */
.PSC_AccountName[b-6deu2oitaw] {
    font-weight: 600;
    font-size: 13px;
    color: #111;
    margin-bottom: 2px;
}

.PSC_AccountOwner[b-6deu2oitaw] {
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 3px;
}

.PSC_AccountNumber[b-6deu2oitaw] {
    font-size: 12px;
    color: #2563eb;
    font-weight: 500;
}

/* ── Credit info ── */
.PSC_CreditInfo[b-6deu2oitaw] {
    background: #f0fdf4;
    border-radius: 8px;
    padding: 14px 16px;
    border: 1px solid #bbf7d0;
}

.PSC_CreditBlocked[b-6deu2oitaw] {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 12.5px;
    line-height: 1.5;
}

.PSC_CreditRow[b-6deu2oitaw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #374151;
    padding: 4px 0;
}

    .PSC_CreditRow strong[b-6deu2oitaw] {
        color: #111;
        font-weight: 600;
    }

/* ── Keep old classes for FooterCoreBill & SummitButtonZone compatibility ── */
.DetailPaymentZone[b-6deu2oitaw] {
    background: white;
    font-size: 14px;
}

.PaymentAccountImg[b-6deu2oitaw] {
    max-width: 50px;
    max-height: 50px;
}

.PriceTransferZone[b-6deu2oitaw] {
    display: flex;
    justify-content: end;
    align-items: center;
    height: 40px;
}

    .PriceTransferZone .Div1[b-6deu2oitaw] {
        flex: 1;
        border-right: 1px solid rgba(0,0,0,.09);
        border-bottom: 1px solid rgba(0,0,0,.09);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: end;
        padding-right: 20px;
        font-size: 14px;
    }

    .PriceTransferZone .Div2[b-6deu2oitaw] {
        min-width: 135px;
        text-align: right;
        padding-right: 30px;
        color: #ee4d2d;
        border-bottom: 1px solid rgba(0,0,0,.09);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: end;
        font-size: 14px;
    }

/* ── Check (ใช้เฉพาะ Compact) ── */
.PSC_Check[b-6deu2oitaw] {
    display: none;
}

/* ════════════════════════════════════════════════════════════
   [2026-10] Compact — popup เลือกวิธีชำระเงินหลังบ้าน (CPO)
   ไม่มีกรอบ/เงาของตัวเอง (อยู่ใน popup) · แท็บ teal · บัญชีเป็นแถวรายการ (โลโก้ | ชื่อ/เจ้าของ/เลขบัญชี | วงเลือก)
   ════════════════════════════════════════════════════════════ */
.PSC_Compact[b-6deu2oitaw] {
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

    .PSC_Compact .PSC_Section[b-6deu2oitaw] {
        padding: 0 0 16px;
        border-bottom: none;
    }

        .PSC_Compact .PSC_Section + .PSC_Section[b-6deu2oitaw] {
            padding-top: 4px;
        }

    .PSC_Compact .PSC_SectionTitle[b-6deu2oitaw] {
        font-size: 12.5px;
        font-weight: 600;
        color: #64748b !important;
        margin-bottom: 8px;
    }

    .PSC_Compact .PSC_Section:first-child .PSC_SectionTitle[b-6deu2oitaw] {
        display: none;
    }

    .PSC_Compact .PSC_Tab[b-6deu2oitaw] {
        height: 34px;
        padding: 0 16px;
        border-color: #e2e8f0;
    }

    .PSC_Compact .PSC_TabActive:hover[b-6deu2oitaw] {
        border-color: #9fd3ce;
        color: #0B7A75;
    }

    .PSC_Compact .PSC_TabSelected[b-6deu2oitaw] {
        background: #0B7A75 !important;
        border-color: #0B7A75 !important;
    }

    .PSC_Compact .PSC_AccountGrid[b-6deu2oitaw] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .PSC_Compact .PSC_AccountCard[b-6deu2oitaw] {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        grid-template-areas:
            "badge name check"
            "badge owner check"
            "badge number check";
        column-gap: 12px;
        align-items: center;
        padding: 10px 14px;
        border-radius: 12px;
        border-color: #e2e8f0;
    }

        .PSC_Compact .PSC_AccountCard:hover[b-6deu2oitaw] {
            border-color: #9fd3ce;
            box-shadow: none;
        }

    .PSC_Compact .PSC_AccountCardSelected[b-6deu2oitaw] {
        border-color: #0B7A75 !important;
        background: #fbfefe;
        box-shadow: none !important;
    }

    .PSC_Compact .PSC_Badge[b-6deu2oitaw] {
        grid-area: badge;
        width: 40px;
        height: 40px;
        margin-bottom: 0;
        font-size: 10px;
    }

    .PSC_Compact .PSC_AccountName[b-6deu2oitaw] {
        grid-area: name;
        margin-bottom: 0;
        font-size: 13.5px;
        color: #0f172a;
    }

    .PSC_Compact .PSC_AccountOwner[b-6deu2oitaw] {
        grid-area: owner;
        margin-bottom: 0;
        font-size: 11.5px;
        color: #64748b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .PSC_Compact .PSC_AccountNumber[b-6deu2oitaw] {
        grid-area: number;
        font-size: 12px;
        color: #334155;
        font-variant-numeric: tabular-nums;
    }

    .PSC_Compact .PSC_Check[b-6deu2oitaw] {
        display: block;
        grid-area: check;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid #cbd5e1;
    }

    .PSC_Compact .PSC_AccountCardSelected .PSC_Check[b-6deu2oitaw] {
        border-color: #0B7A75;
        background: #0B7A75;
        box-shadow: inset 0 0 0 3px #fff;
    }

    .PSC_Compact .PSC_CreditInfo[b-6deu2oitaw] {
        background: #f8fafc;
        border-color: #e2e8f0;
    }
/* /Components/Pages/FrontEnd/Purchase/CustomerOrders.razor.rz.scp.css */
@font-face {
    font-family: 'GoogleFont';
    font-style: normal;
    font-weight: 100 700;
    src: url('../fonts/google-font.woff2') format('woff2');
}

/* ══════════════════════════════════════════════════════════════════════════
   CustomerOrders.razor — restyle เพื่อให้แนวเดียวกับ SaleBillEditor (POS)
   [2026-09 รอบแก้ไข] เปลี่ยนจาก "recolor DOM เดิม" เป็น "restructure layout
   จริง" ตามแนว bill-detail page ที่ใช้ทั่วระบบ (StockRec_Bill/SupplierReturn_Bill:
   .BillHero + .BillStepper + .BillBody > .BillColMain/.BillColSide + .BillCard)
   ระบบ/logic เดิมทั้งหมดไม่ถูกแตะ — เปลี่ยนแค่ layout/สี/ตัวอักษร/wrapper div
   ใช้ ::deep เจาะเข้าไปแต่งหน้าตา component ที่ใช้ร่วม (HeaderCoreBill,
   DecorateTopBox, AddressCoreBill, ProductCoreList, FooterCoreBill ฯลฯ)
   โดย scope ทุกอย่างไว้ใต้ .CO2-Root (element ของหน้านี้เท่านั้น) —
   หน้าอื่นที่ใช้ component เดียวกัน (เช่น OrderBill.razor ที่ยังใช้
   FooterCoreBill/PaymentSelectChoice/PickingA4 ร่วมกัน) จะไม่โดนกระทบ
   เพราะ OrderBill ไม่มี wrapper .CO2-Root ของหน้านี้ครอบอยู่ — ::deep ทุกอัน
   ในไฟล์นี้ compile เป็น .CO2-Root[b-xxxx] .ClassName เสมอ ต้องมี .CO2-Root
   เป็น ancestor จริงเท่านั้นถึงจะ match
   ══════════════════════════════════════════════════════════════════════════ */

/* [2026-09 แก้] การ์ดสรุปยอดเปลี่ยนเป็น position:fixed (ดูหัวข้อ .CO2-Card-Summary
   ด้านล่าง) — เพิ่ม padding-bottom กันเนื้อหาส่วนอื่นโดนบังใต้แถบที่ลอยติดจอถาวร */
/* [2026-09] `flex:1 1 auto;width:auto` ให้ .CO2-Root ยืดเต็มพื้นที่ที่เหลือใน
   .ShowZone (flex container) ตามจริง — ไม่ใช่ตัวตัดสินความกว้างของแถบปุ่ม
   ด้านล่างอีกต่อไป (จุดนั้นแก้ด้วย JS วัดจาก DOM ตรงๆ แล้ว ดู .CO2-FixedBarWrap
   ด้านล่าง) แต่ยังเก็บไว้เพื่อให้ layout โดยรวมของหน้าถูกต้องเช่นกัน */
.CO2-Root[b-ptyppc4tzb] {
    font-family: 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
    background: #f4f6fb;
    min-height: 100vh;
    padding: 16px 16px 32px;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
}

/* Hero + Stepper ย้ายไปเป็น shared component แล้ว: M_Components/Billing/BillHeroHeader.razor(.css)
   + BillStatusStepper.razor(.css) — ใช้ร่วมกับบิลขาย OrderBill */

/* [2026-09 layout pass — ทับมติเดิมด้านบน] ผู้ใช้ขอ layout ให้ตรงมอคอัพอ้างอิง
   (รายละเอียดบิลสั่งซื้อออนไลน์.dc.html): PC เป็น 2 คอลัมน์ content+rail
   (rail = ที่อยู่จัดส่ง + สรุปยอด, กว้าง 336px, sticky) ; tablet/mobile คอลัมน์เดียว
   [2026-09 bugfix รอบ 6 — "ยังขยายไม่เต็ม"] breakpoint เดิม 1180px มาจาก mode()
   ของไฟล์มอคอัพตรงๆ ซึ่งสมมติว่าหน้าเต็มจอไม่มี container จำกัด — แต่หน้าจริง
   ถูกครอบด้วย `.MaxWidthSize{max-width:1080px}` ใน SalesManage.razor (convention
   เดียวกับทุกหน้าบิลในระบบ, ยืนยันจาก StockRec_Bill.razor.css/
   SupplierReturn_Bill.razor.css ที่ตั้งใจ max-width:1080px เหมือนกันทุกไฟล์)
   ทำให้ 1180px ไม่มีทาง trigger ได้เลย (container กว้างสุด 1080) — จึงดูเหมือน
   "ไม่ขยายเต็ม" เพราะ 2-คอลัมน์ hero/content ไม่เคยทำงานจริง คอลัมน์เดียวตลอด
   ทำให้เหลือพื้นที่ว่างข้างขวา (เทียบกับที่มอคอัพตั้งใจให้ใช้เต็ม 1280px) —
   ไม่ใช่บั๊ก .ShowZone/calc(100vw) เพราะ .CO2-Root ใช้ flex:1 1 auto;width:auto
   ถูกต้องอยู่แล้ว (เต็มพื้นที่ที่ .MaxWidthSize ให้มาจริง) — เลื่อน breakpoint
   ลงมาเป็น 860px แทน ให้ 2-คอลัมน์ trigger ได้จริงภายใน container 1080px */
/* [2026-10] layout 2 คอลัมน์ย้ายไปเป็นของกลาง .MB-Body/.MB-ColMain/.MB-ColSide (wwwroot/css/bill-ui.css)
   ที่นี่เหลือแค่ rail ขวาค้างจอ (sticky) เฉพาะหน้านี้ — ค่า top เดิม */
@media (min-width: 860px) {
    .MB-ColSide[b-ptyppc4tzb] {
        position: sticky;
        /* 48px (HeaderZone) + ~180px (hero) + 14px (margin-bottom ของ hero) */
        top: 242px;
    }

    /* หน้าร้าน: hero sticky ที่ top:0 (ไม่มีแถบเมนูบนค้างจอ) → หัก 48px */
    .CO2-Front .MB-ColSide[b-ptyppc4tzb] {
        top: 194px;
    }
}

/* หน้าร้าน: แถบดำเนินการเป็น sticky ชิดขอบล่างของ .CO2-Root → ไม่ต้องเว้น padding ล่าง + ไม่บังคับสูงเต็มจอ */
.CO2-Root.CO2-Front[b-ptyppc4tzb] {
    min-height: 0;
    /* พื้นหลังใช้ของหน้าร้านเอง (ไม่เป็นแถบสีต่างจากพื้นหน้า) + ชิดขอบ .RowMaxWidth */
    background: transparent;
    padding: 18px 0 20px;
}

/* หน้าร้าน: มีแท็บเดียว (สถานะรอการตอบรับ) ไม่ต้องแสดงการ์ดแท็บ */
.CO2-Front .CO2-Card-Tabs.CO2-SingleTab[b-ptyppc4tzb] {
    display: none;
}

/* หน้าร้าน + แก้ไขรายการไม่ได้: ซ่อนคอลัมน์ "จัดการ" (ว่างเปล่า) → ตารางพอดีการ์ด เห็นคอลัมน์ "รวม" โดยไม่ต้องเลื่อนแนวนอน */
.CO2-Front .CO2-ItemsReadOnly[b-ptyppc4tzb]  .ProductTable .ColOperator,
.CO2-Front .CO2-ItemsReadOnly[b-ptyppc4tzb]  .ProductTable th.OparetorZone,
.CO2-Front .CO2-ItemsReadOnly[b-ptyppc4tzb]  .ProductTable td.OparetorZone {
    display: none;
}

.CO2-Front .CO2-ItemsReadOnly[b-ptyppc4tzb]  .ProductListZone .ProductTable {
    min-width: 600px;
}

/* ─────────── Card — [2026-10] หน้าตาการ์ด/หัวการ์ดเป็นของกลาง .MB-Card* (wwwroot/css/bill-ui.css)
   ที่นี่เหลือเฉพาะปรับเฉพาะการ์ดของหน้านี้ ─────────── */
.CO2-Card-Items[b-ptyppc4tzb] {
    overflow: hidden; /* มุมตารางสินค้าโค้งตามการ์ด */
}

/* การ์ดแท็บ: .SwitchPoMain ข้างในมีกรอบของตัวเองแล้ว — ไม่ใส่กรอบซ้อน */
.CO2-Card-Tabs.MB-Card[b-ptyppc4tzb] {
    border-color: transparent;
    overflow: hidden;
}

.CO2-Card-Tabs[b-ptyppc4tzb] {
    padding: 0;
}

.CO2-Card-Tabs .SwitchPoMain[b-ptyppc4tzb] {
    border-bottom: none;
}

.CO2-Card-Barcode[b-ptyppc4tzb] {
    padding: 10px 16px 14px;
}

/* [2026-09 แก้] ตกแต่งช่องค้นหาสินค้า/บาร์โค้ดของ SearchBarcodeCore (component
   ร่วม ไม่แก้ DOM/ logic ภายใน) ให้เข้าธีมการ์ดใหม่ — เดิมเป็น label+input
   เปล่าไม่มีสไตล์เลย */
.CO2-Card-Barcode[b-ptyppc4tzb]  .BarcodeMain {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.CO2-Card-Barcode[b-ptyppc4tzb]  .BarcodeMain > div:first-child {
    font-size: 12.5px;
    font-weight: 800;
    color: #12141a;
}

.CO2-Card-Barcode[b-ptyppc4tzb]  .BarcodeMain > div:nth-child(2) {
    display: flex;
    align-items: center;
    gap: 10px;
}

.CO2-Card-Barcode[b-ptyppc4tzb]  .BarcodeMain > div:nth-child(2) > div:first-child {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    flex-shrink: 0;
}

.CO2-Card-Barcode[b-ptyppc4tzb]  .BarcodeMain .SBCInputWrap {
    flex: 1;
}

.CO2-Card-Barcode[b-ptyppc4tzb]  .BarcodeMain input {
    width: 100%;
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #dde2e7;
    border-radius: 10px;
    font-size: 13px;
    font-family: 'IBM Plex Sans Thai', sans-serif;
    color: #1e293b;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.CO2-Card-Barcode[b-ptyppc4tzb]  .BarcodeMain input:focus {
    border-color: #0B7A75;
    box-shadow: 0 0 0 3px rgba(11, 122, 117, .14);
}

/* [2026-09 layout pass] ที่อยู่จัดส่งย้ายกลับเข้า .BillColSide (rail ขวา) —
   อยู่ใน flex/grid gap ของ .BillColSide แล้ว ไม่ต้องเว้นระยะเอง */

/* Address/Items/Payment card ใช้ AddressCoreBill/ProductCoreList เดิมข้างใน —
   ปิดกรอบ/เงาซ้อนของ component ลูกทิ้ง เพราะ .CO2-Card ให้กรอบด้านนอกแล้ว */
.CO2-Card-Address[b-ptyppc4tzb]  .AddressDiv {
    margin-top: 0;
    border: none;
    box-shadow: none;
    padding: 0;
}

.CO2-Card-Items[b-ptyppc4tzb]  .ProductListZone {
    margin-top: 0;
    border: none;
    box-shadow: none;
}

.CO2-Card-Summary[b-ptyppc4tzb]  .PriceTransferZone,
.CO2-Card-Summary[b-ptyppc4tzb]  .SummitButtonZone {
    margin-top: 0;
}

/* [2026-09 แก้] ลดความสูงแถวสรุปยอด — ของเดิม (FooterCoreBill, component ร่วม
   กับ OrderBill ไม่แก้ตรง) แต่ละแถวสูงคงที่ 40px + เส้นขอบหนา รวม 3 แถว
   ~120px ; บีบให้แถวสูงตามเนื้อหาจริง (auto) แทน ลดระยะขอบ/เส้นแบ่งด้วย */
.CO2-Card-Summary[b-ptyppc4tzb]  .PriceTransferZone {
    height: auto;
    padding: 4px 0;
}

    .CO2-Card-Summary[b-ptyppc4tzb]  .PriceTransferZone .Div1,
    .CO2-Card-Summary[b-ptyppc4tzb]  .PriceTransferZone .Div2 {
        height: auto;
        border-bottom: none;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .CO2-Card-Summary[b-ptyppc4tzb]  .PriceTransferZone .Div1 {
        border-right: none;
        padding-right: 12px;
    }

    .CO2-Card-Summary[b-ptyppc4tzb]  .PriceTransferZone .Div2 {
        padding-right: 0;
        min-width: 0;
    }

/* [2026-09 bugfix — ยกเลิกแนว position:fixed เดิมทั้งหมด] แนว "ลอยติดขอบจอล่าง
   ตลอดเวลา" (position:fixed + JS sync ความกว้าง/ตำแหน่งจาก #CO2ItemsCardRef ทุกครั้ง
   ที่ resize) เปราะบางตามที่ comment เดิมบันทึกไว้เอง (พังมาแล้วหลายรอบ) และ
   หลัง layout pass ที่ย้าย "ที่อยู่จัดส่ง" เข้า .BillColSide คู่กับการ์ดนี้ ทำให้
   กล่องลอย (fixed) ไปวางทับ/บังการ์ดอื่น (เห็นชัดตอนเนื้อหาการ์ดสรุปสูงขึ้นจาก
   ปุ่มสถานะหลายปุ่ม + fixed ไม่ยึดกับ flow ของ .BillColSide ที่มันอยู่จริง) —
   เปลี่ยนกลับมาเป็นการ์ดปกติที่ไหลอยู่ใน .BillColSide (ตาม .BillColSide ที่เป็น
   sticky rail อยู่แล้วที่ PC ≥1180px) ตรงกับมอคอัพอ้างอิงที่การ์ดสรุปเป็นการ์ด
   ปกติใน rail ขวา ไม่ใช่แถบลอยเต็มจอ (แถบลอยแบบมอคอัพมีแค่บนมือถือ/mobileBarStyle
   ซึ่งหน้านี้ไม่ได้ทำแยกไว้ต่างหาก — ดู CLAUDE.md changelog) — ใช้ !important
   คุม "ปิด" inline style ที่ JS (`MineSyncBarToRef`) ยังคงตั้งให้ผ่าน @code เดิม
   (ไม่ได้แก้ @code/JS call — ปล่อยให้มันรันต่อไปได้ แต่ CSS !important ทำให้
   ไม่มีผลต่อ layout จริงอีกต่อไป) */
.CO2-FixedBarWrap[b-ptyppc4tzb] {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    width: auto !important;
    z-index: auto !important;
}

.CO2-Card-Summary[b-ptyppc4tzb] {
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .06);
}

.CO2-Root .LoadingDiv[b-ptyppc4tzb],
.CO2-Root .StatusLoadingDiv[b-ptyppc4tzb] {
    font-family: 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
}

.CO2-Root .LoadingDiv[b-ptyppc4tzb] {
    text-align: center;
    padding: 80px;
    color: #94a3b8;
    font-size: 15px;
}

/* ─────────── Header (HeaderCoreBill — .BillCode + StatusCoreBill) ─────────── */
/* [2026-09 bugfix] .BillCode ของ component เดิม (HeaderCoreBill.razor.css) เป็น
   text-align:center + display:flex แถวเดียว 3 คอลัมน์เท่ากัน (ช่องว่าง/หัวข้อ+เลขบิล/เมตา)
   ที่ออกแบบมาสำหรับพื้นที่เต็มความกว้างเดิม — ตอนนี้ถูกบีบแคบลงอยู่ใน .CO2-HeroMain
   (ครึ่งซ้ายของ hero 2 คอลัมน์) ทำให้ข้อความกลางจอ + เลขบิลตัวใหญ่ล้นขึ้นบรรทัดใหม่
   แก้โดยบังคับ column ซ้าย + ซ่อนคอลัมน์ spacer ที่ไม่มีเนื้อหา (ไม่แก้ DOM component) */
.CO2-Root[b-ptyppc4tzb]  .BillCode {
    background: transparent !important;
    color: #14213d !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    padding: 14px 2px 4px !important;
}

/* [2026-09 แก้] div ครอบ .BillCode ใน HeaderCoreBill มี class "bg-white" ติด
   พื้นหลังขาวมาด้วย (ใช้ scope เฉพาะใต้ .CO2-Root กันกระทบหน้าอื่น) */
.CO2-Root[b-ptyppc4tzb]  .bg-white {
    background: transparent !important;
}

/* คอลัมน์ที่ 1 ของ .BillCode เป็น div ว่างเปล่า (แค่ spacer flex:1 เดิม) — ซ่อนทิ้ง */
.CO2-Root[b-ptyppc4tzb]  .BillCode > div:first-child {
    display: none !important;
}

/* คอลัมน์ที่ 2 (หัวข้อ + เลขบิลตัวใหญ่) — เดิม flex:1 อยู่กลาง 1 ใน 3 คอลัมน์ ตอนนี้ให้กว้างเต็ม */
.CO2-Root[b-ptyppc4tzb]  .BillCode > div:nth-child(2) {
    flex: none !important;
    width: 100% !important;
    text-align: left !important;
}

    .CO2-Root[b-ptyppc4tzb]  .BillCode > div:nth-child(2) > div:first-child {
        color: #9aa4b8;
        font-size: 11px;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .CO2-Root[b-ptyppc4tzb]  .BillCode > div:nth-child(2) > div:nth-child(2) {
        color: #14213d;
        font-weight: 600;
        font-family: 'IBM Plex Mono', monospace;
        letter-spacing: .01em;
        font-size: clamp(18px, 2.3vw, 28px) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

/* คอลัมน์ที่ 3 (เมตา "ผู้ใช้งาน/วันที่") — เดิม flex:1 + display:flex มี spacer ซ้าย/ขวา
   ว่างเปล่าอยู่ในตัว ให้ยุบเหลือแค่เนื้อหาจริง เรียงเป็นบรรทัดเล็กใต้เลขบิล ชิดซ้าย */
.CO2-Root[b-ptyppc4tzb]  .BillCode > div:nth-child(3) {
    flex: none !important;
    width: 100% !important;
    display: block !important;
    margin-top: 8px !important;
    font-size: 12.5px !important;
    color: #7c879b !important;
}

    .CO2-Root[b-ptyppc4tzb]  .BillCode > div:nth-child(3) > div:first-child,
    .CO2-Root[b-ptyppc4tzb]  .BillCode > div:nth-child(3) > div:last-child {
        display: none !important;
    }

    .CO2-Root[b-ptyppc4tzb]  .BillCode > div:nth-child(3) > div:nth-child(2) .mf {
        display: inline-flex !important;
        margin-right: 14px;
    }

    .CO2-Root[b-ptyppc4tzb]  .BillCode > div:nth-child(3) > div:nth-child(2) .mf > div:first-child {
        width: auto !important;
        font-weight: 600;
        margin-right: 4px;
    }

/* [2026-09 อัปเดต] ซ่อนแถวเช็คบ็อกซ์สถานะแบนของ StatusCoreBill (ภายใน HeaderCoreBill)
   ทิ้งไปเลย — แทนที่ด้วย .CO2-Stepper ที่แสดงสถานะเป็นขั้นตอนแทน (ดูด้านล่าง) */
.CO2-Root[b-ptyppc4tzb]  .StatusBill {
    display: none;
}

/* DecorateTopBox — เส้นคาดหัวลาย กลายเป็นเส้น accent teal บาง ๆ */
.CO2-Root[b-ptyppc4tzb]  .HeaderTopDiv {
    background-image: none !important;
    background: linear-gradient(90deg, #0B7A75, #095E5A);
    height: 3px;
}

/* ─────────── AddressCoreBill ─────────── */
.CO2-Root[b-ptyppc4tzb]  .AddressDiv {
    margin-top: 12px;
    border-radius: 14px;
    border: 1px solid #e4e8ec;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
    padding: 16px 20px;
}

.CO2-Root[b-ptyppc4tzb]  .AddressTitle {
    color: #095E5A;
    fill: #095E5A;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 8px;
}

/* [2026-09 bugfix] .AddressSelectedZone เดิม (AddressCoreBill.razor.css) เป็น
   display:flex แถวเดียว — ชื่อร้าน/เบอร์โทร/ที่อยู่เลยเรียงข้างกันแนวนอนแทนที่
   จะซ้อนกันเป็นบรรทัดแบบมอคอัพ (ชื่อ/เบอร์โทร ทับกันในบรรทัดเดียวเพราะ \n ใน
   string ถูก HTML ยุบทิ้งไปด้วย) แก้เป็น flex-direction:column และแยก
   ชื่อ/เบอร์โทร/ที่อยู่ ออกเป็นคนละ div คนละสไตล์ (ดู AddressCoreBill.razor) */
.CO2-Root[b-ptyppc4tzb]  .AddressSelectedZone {
    display: flex;
    flex-direction: column;
    color: #1e293b;
}

.CO2-Root[b-ptyppc4tzb]  .TitleZone1 {
    display: flex;
    flex-direction: column;
}

.CO2-Root[b-ptyppc4tzb]  .AddressNameLine {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    color: #1e293b;
}

.CO2-Root[b-ptyppc4tzb]  .AddressPhoneLine {
    font-size: 12.5px;
    color: #66707a;
    font-family: 'IBM Plex Mono', monospace;
    margin-top: 2px;
}

.CO2-Root[b-ptyppc4tzb]  .AddressFullLine {
    font-size: 13px;
    color: #4b555f;
    line-height: 1.55;
    margin-top: 8px;
}

.CO2-Root[b-ptyppc4tzb]  .DefaultTag {
    color: #0B7A75;
    border-color: #0B7A75;
}

.CO2-Root[b-ptyppc4tzb]  .ChangeAddressButton {
    color: #0B7A75;
}

/* ─────────── แท็บ ใบสั่งซื้อจากลูกค้า / ใบสั่งขายจากทางร้าน (own markup) ─────────── */
.CO2-Root .SwitchPoMain[b-ptyppc4tzb] {
    margin-top: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e4e8ec;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}

/* [2026-09 แก้] แท็บสลับ "ใบสั่งซื้อจากลูกค้า/ใบสั่งขายจากทางร้าน" ต้องเป็น
   ซ้าย-ขวาแนวนอนแบบเดิม (ไม่ใช่เรียงบรรทัดซ้อนกัน) และเห็นชัดว่าอันไหนถูก
   เลือกอยู่ — บังคับ flex ที่ตัวคอนเทนเนอร์ + ไฮไลต์ตัวอักษร/พื้นหลัง/เส้น
   ใต้ของแท็บที่ Active ให้ต่างจากแท็บที่ไม่ได้เลือกชัดเจน */
.CO2-Root .SwitchPoMain[b-ptyppc4tzb] {
    display: flex;
}

    .CO2-Root .SwitchPoMain > div[b-ptyppc4tzb] {
        flex: 1;
        background: #fff;
        font-size: 13.5px;
        font-weight: 400;
        color: #79838d;
        text-align: center;
        cursor: pointer;
        user-select: none;
        transition: color .15s, background .15s;
    }

        .CO2-Root .SwitchPoMain > div > div:nth-child(1)[b-ptyppc4tzb] {
            padding: 12px 0;
        }

        .CO2-Root .SwitchPoMain > div > div:nth-child(2)[b-ptyppc4tzb] {
            height: 3px;
            background: transparent;
        }

        .CO2-Root .SwitchPoMain > div > div:nth-child(2).Selected[b-ptyppc4tzb] {
            background: #0B7A75;
        }

        .CO2-Root .SwitchPoMain > div:has(> div:nth-child(2).Selected)[b-ptyppc4tzb] {
            color: #095E5A;
            font-weight: 600;
            background: rgba(11, 122, 117, .05);
        }

        .CO2-Root .SwitchPoMain > div:hover[b-ptyppc4tzb] {
            color: #0B7A75;
        }

/* ─────────── ProductCoreList — ตารางรายการสินค้า ─────────── */
.CO2-Root[b-ptyppc4tzb]  .ProductListZone {
    margin-top: 12px;
    border-radius: 14px;
    border: 1px solid #e4e8ec;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
    overflow: hidden;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable tr {
    border-bottom: 1px solid #f1f3f7;
}

.CO2-Root[b-ptyppc4tzb]  .SingleRow {
    background: #fff;
}

.CO2-Root[b-ptyppc4tzb]  .DoubleRow {
    background: #f9fafb;
}

.CO2-Root[b-ptyppc4tzb]  .ProductImg {
    border-radius: 8px;
    overflow: hidden;
    background: #f6f7f9;
}

/* [2026-09 pixel-close pass] .ProductListZone เดิม (shared component) ตั้ง
   font-size:14px คลุมทุกอย่างในตาราง ไม่ตรงกับมอคอัพที่แต่ละคอลัมน์ขนาด
   ต่างกัน (th 11px / # 12px / ชื่อ 13.5px / หน่วย 12.5px / ราคา-จำนวน-รวม 13px) —
   ไล่ override ทีละคอลัมน์ให้ตรง ; ราคา/รวม มอคอัพใช้สีตัวหนังสือปกติ ไม่ใช่สีฟ้า
   เหมือนที่เคยใส่ไว้ (ของเดิมเข้าใจผิดว่าต้อง highlight สีฟ้า) */
.CO2-Root[b-ptyppc4tzb]  .ProductTable thead th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    color: #5c666f;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable .NoZone {
    font-size: 12px;
    font-family: 'IBM Plex Mono', 'IBM Plex Sans Thai', monospace;
    color: #66707a;
    font-weight: 400;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable .NameDiv,
.CO2-Root[b-ptyppc4tzb]  .ProductTable td.NameZone {
    font-size: 13.5px;
    color: #1f2328;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable .UnitName,
.CO2-Root[b-ptyppc4tzb]  .ProductTable td.UnitZone {
    font-size: 12.5px;
    color: #66707a;
}

.CO2-Root[b-ptyppc4tzb]  .PricePer,
.CO2-Root[b-ptyppc4tzb]  .ProductTable td.QtyZone,
.CO2-Root[b-ptyppc4tzb]  .SumPrice {
    color: #1f2328;
    font-weight: 400;
    font-size: 13px;
    font-family: 'IBM Plex Mono', 'IBM Plex Sans Thai', monospace;
}

.CO2-Root[b-ptyppc4tzb]  .SumPrice {
    font-weight: 600;
}

/* [2026-09 แก้] OperationButtonBase เดิม (ProductCoreList.razor.css) fix
   width:50px/border-radius:5px มาแต่แรก — มอคอัพเป็นปุ่ม pill ความกว้างตาม
   เนื้อหา (padding 0 12px, height 28px) ไม่ใช่กล่องสี่เหลี่ยมกว้างคงที่ */
.CO2-Root[b-ptyppc4tzb]  .OperationButtonBase {
    width: auto;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* [2026-09] แก้ไข = ปุ่มรอง outline teal ; ลบ คงสีแดง */
.CO2-Root[b-ptyppc4tzb]  .EditButton {
    border-color: #0B7A75;
    background: #fff;
    color: #0B7A75;
}

    .CO2-Root[b-ptyppc4tzb]  .EditButton:hover {
        background: #E7F5F4;
    }

/* มอคอัพ: ลบ = ปุ่มพื้นแดงทึบตัวอักษรขาว (ไม่ใช่แค่ตัวอักษรแดง) */
.CO2-Root[b-ptyppc4tzb]  .DeleteButton {
    border-color: #e0463c;
    background: #e0463c;
    color: #fff;
}

/* [2026-09 แก้] ProductCoreList เปลี่ยนจาก CSS Grid เป็น <table> จริงแล้ว —
   ยังคงให้เลื่อนแนวนอนได้เมื่อการ์ดถูกบีบแคบ (จอเล็ก) กันคอลัมน์บีบจนอ่านไม่ออก */
.CO2-Card-Items .MB-CardBody[b-ptyppc4tzb] {
    padding-top: 6px;
}

/* [2026-09 pixel-close pass 7] แถบแจ้งสถานะแก้ไขได้ ตามมอคอัพอ้างอิง (editNoteStyle) —
   แสดงเฉพาะตอนแก้ไขได้จริง (เงื่อนไขเดียวกับ IsCanEdit ที่ส่งเข้า ProductCoreList) */
.CO2-EditNote[b-ptyppc4tzb] {
    margin: 0 18px 12px;
    font-size: 12px;
    color: #095E5A;
    background: #E7F5F4;
    border: 1px solid #B9E0DC;
    border-radius: 9px;
    padding: 9px 11px;
    line-height: 1.5;
}

/* [2026-09 bugfix] ก่อนหน้านี้มี div ห่อ "max-height:300px;overflow:auto" ที่ตั้งใจ
   จำกัดความสูงรายการสินค้า (ตามมอคอัพที่จำกัดแสดง 6 แถวแล้วกด "ดูทั้งหมด") แต่ดัน
   เป็น div ว่างเปล่าไม่ได้ครอบ ProductCoreList จริง — ทำให้บิลที่มีสินค้าเยอะ (เช่น
   95 รายการ) ดันความสูงหน้าทั้งหน้ายาวเป็นพัน px แทนที่จะ scroll ในการ์ด แก้โดย
   ห่อ ProductCoreList ด้วย .CO2-ItemsScroll จริง — max-height สูงพอเห็น ~8 แถว
   แล้ว scroll แนวตั้งในการ์ด ส่วนแนวนอนยังเลื่อนได้เหมือนเดิมเมื่อจอแคบ */
.CO2-ItemsScroll[b-ptyppc4tzb] {
    max-height: 520px;
    overflow-y: auto;
    overflow-x: auto;
}

/* [2026-09 bugfix รอบ 5 — คัดลอกความกว้างคอลัมน์จากมอคอัพอ้างอิงตรงๆ]
   มอคอัพ (รายละเอียดบิลสั่งซื้อออนไลน์.dc.html) กำหนดความกว้างแต่ละคอลัมน์ไว้ตรงๆ
   ใน <th>/<td> style attribute: #=46px / สินค้า=flexible(ไม่กำหนด) / หน่วย=130px /
   ราคา=100px / จำนวน=80px / รวม=110px / จัดการ(thActionStyle)=152px — คัดลอกค่า
   เหล่านี้มาใช้ตรงๆ (แทนค่าที่กะประมาณเองรอบก่อน) ผ่าน colgroup ที่มีอยู่แล้วของ
   ProductCoreList (shared component เดิม ไม่แก้ไฟล์นั้น ไม่มีคอลัมน์รูปในมอคอัพ —
   รูปสินค้าอยู่ในเซลล์เดียวกับชื่อ — แต่ ProductCoreList แยกเป็นคอลัมน์ ColImg
   ต่างหาก ซึ่งเรายังต้องคงไว้เพราะไม่แก้ DOM ของ component เอง จึงบีบ ColImg
   ให้เล็กที่สุดเท่าที่ยังเห็นรูปได้ (28px) แทนการตัดออกทั้งคอลัมน์)
   รวมคอลัมน์ fixed (ไม่รวมชื่อ) = 46+28+130+100+80+110+152 = 646px ; เหลือให้
   คอลัมน์ชื่อสินค้าอย่างน้อย ~140px (กัน bug ตัวอักษรตัดทีละตัวจากรอบก่อน) →
   min-width ตาราง ≈ 790px ซึ่งกว้างกว่า container จริงของหน้านี้ (~660-700px ตาม
   ที่ผู้ใช้วัดจากภาพหน้าจอ) เป็นปกติ — ต้องเลื่อนแนวนอนดูคอลัมน์ท้ายตาราง (เหมือน
   มอคอัพเองก็ห่อ <table> ด้วย overflow-x:auto และมี min-width:680px ไว้เผื่อกรณี
   เดียวกัน) กำหนด width ซ้ำทั้งที่ <col> และ th/td (ไม่ใช่แค่ colgroup) เผื่อ
   browser บางตัวไม่ยึด colgroup แน่นอนกับ table-layout:fixed */
.CO2-Root[b-ptyppc4tzb]  .ProductListZone .ProductTable {
    min-width: 790px;
    table-layout: fixed;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable .ColNo,
.CO2-Root[b-ptyppc4tzb]  .ProductTable th.NoZone,
.CO2-Root[b-ptyppc4tzb]  .ProductTable td.NoZone {
    width: 46px;
}

/* [2026-09 แก้] th.NoZone hardcode ข้อความ "ลำดับ" (ProductCoreList, shared
   component) — mockup ใช้แค่ "#" เป็นหัวคอลัมน์ลำดับ — เทคนิคเดียวกับ
   th.NameZone/PricePerZone/SumZone/OparetorZone ด้านบน (ซ่อนด้วย font-size:0
   แล้วแทนที่ด้วย ::before สโคปเฉพาะใต้ .CO2-Root) */
.CO2-Root[b-ptyppc4tzb]  .ProductTable th.NoZone {
    font-size: 0;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable th.NoZone::before {
    content: "#";
    font-size: 11px;
    font-weight: 600;
    color: #5c666f;
}

/* [2026-09 แก้] กล่องรูปจัตุรัสจริงย้ายไปทำที่ต้นตอแล้ว (`ProductCoreList.razor`
   เพิ่ม div.ImgThumb ครอบ <img> + `ProductCoreList.razor.css` กำหนดขนาด 36x36
   คงที่ไม่ขึ้นกับความสูงแถว — ตรวจยืนยันแล้วว่า ProductCoreList ใช้เฉพาะหน้านี้
   จุดเดียวในโปรเจกต์ แก้ที่ component ตรงได้ปลอดภัย) เหลือแค่ปรับความกว้างคอลัมน์
   ให้เข้ากับ mockup ที่นี่ */
.CO2-Root[b-ptyppc4tzb]  .ProductTable .ColImg,
.CO2-Root[b-ptyppc4tzb]  .ProductTable th.ImgZone,
.CO2-Root[b-ptyppc4tzb]  .ProductTable td.ImgZone {
    width: 36px;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable .ColUnit,
.CO2-Root[b-ptyppc4tzb]  .ProductTable th.UnitZone,
.CO2-Root[b-ptyppc4tzb]  .ProductTable td.UnitZone {
    width: 130px;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable .ColPricePer,
.CO2-Root[b-ptyppc4tzb]  .ProductTable th.PricePerZone,
.CO2-Root[b-ptyppc4tzb]  .ProductTable td.PricePerZone {
    width: 100px;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable .ColQty,
.CO2-Root[b-ptyppc4tzb]  .ProductTable th.QtyZone,
.CO2-Root[b-ptyppc4tzb]  .ProductTable td.QtyZone {
    width: 80px;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable .ColSum,
.CO2-Root[b-ptyppc4tzb]  .ProductTable th.SumZone,
.CO2-Root[b-ptyppc4tzb]  .ProductTable td.SumZone {
    width: 110px;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable .ColOperator,
.CO2-Root[b-ptyppc4tzb]  .ProductTable th.OparetorZone,
.CO2-Root[b-ptyppc4tzb]  .ProductTable td.OparetorZone {
    width: 152px;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable .ColName {
    width: auto;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable td.NameZone {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
}

/* [2026-09 bugfix] หัวคอลัมน์ "สินค้า" (th.NameZone) ของ ProductCoreList (shared
   component เดิม ไม่แก้ไฟล์นั้น) hardcode ข้อความผิดมาแต่แรกเป็น
   "จำนวนรายการ N รายการ" (ข้อความช่องนับจำนวนรายการ ไม่ใช่หัวคอลัมน์สินค้า) —
   แก้แบบ CSS-only เฉพาะใต้ .CO2-Root: ซ่อนข้อความเดิม (font-size:0) แล้วแทนที่
   ด้วย "สินค้า" ผ่าน ::before (ไม่ได้แก้ markup ของ component ที่หน้าอื่นใช้ร่วม) */
.CO2-Root[b-ptyppc4tzb]  .ProductTable th.NameZone {
    font-size: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable th.NameZone::before {
    content: "สินค้า";
    font-size: 11px;
    font-weight: normal;
}

/* [2026-09 pixel-close pass 7] หัวคอลัมน์ "ราคาต่อหน่วย"/"ราคารวม"/"จัดการ" ของ
   ProductCoreList (shared component, hardcode ข้อความยาวกว่ามอคอัพที่ใช้แค่
   "ราคา"/"รวม" และมีหัวคอลัมน์ "จัดการ" ให้คอลัมน์ปุ่มด้วย) — ใช้เทคนิคเดียวกับ
   th.NameZone ด้านบน (ซ่อนข้อความเดิมด้วย font-size:0 แล้วแทนที่ด้วย ::before)
   สโคปเฉพาะใต้ .CO2-Root ไม่กระทบหน้าอื่นที่ใช้ component เดียวกัน */
.CO2-Root[b-ptyppc4tzb]  .ProductTable th.PricePerZone {
    font-size: 0;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable th.PricePerZone::before {
    content: "ราคา";
    font-size: 11px;
    font-weight: 600;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable th.SumZone {
    font-size: 0;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable th.SumZone::before {
    content: "รวม";
    font-size: 11px;
    font-weight: 600;
}

.CO2-Root[b-ptyppc4tzb]  .ProductTable th.OparetorZone::before {
    content: "จัดการ";
    font-size: 11px;
    font-weight: 600;
    color: #5c666f;
}

/* ─────────── การเลือกวิธีชำระเงิน (own markup) — [2026-09] ตกแต่งการ์ดนี้
   [2026-09 แก้ — ย้ายเข้า rail] การ์ดนี้ย้ายจากคอลัมน์หลัก (กว้าง) เข้า .BillColSide
   (336px ตาม mockup จริง) — แถว/ช่องกรอกเดิมออกแบบมาสำหรับคอลัมน์กว้าง (label ซ้าย
   + select/input ชิดขวา, PaymentSelectCSS บังคับ min-width:220px) ล้นคอลัมน์แคบ
   จึงสลับเป็นซ้อนแนวตั้ง (label บน, ช่องกรอกเต็มความกว้างล่าง) แทน ─────────── */
.CO2-Card-Payment[b-ptyppc4tzb] {
    padding: 0;
}

.CO2-Card-Payment .MB-CardBody[b-ptyppc4tzb] {
    padding: 4px 18px 16px;
}

.CO2-PaymentRow[b-ptyppc4tzb] {
    padding: 12px 0;
    border-bottom: 1px solid #e6eaf1;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
}

    .CO2-PaymentRow:last-child[b-ptyppc4tzb] {
        border-bottom: none;
    }

.CO2-PaymentRowLabel[b-ptyppc4tzb] {
    font-size: 13px;
    font-weight: 500;
    color: #5c666f;
    margin-right: 0;
}

.CO2-Card-Payment .SelectTimeForPayment[b-ptyppc4tzb] {
    width: 100%;
}

.CO2-Card-Payment .SelectTimeForPayment > div[b-ptyppc4tzb] {
    padding-left: 0 !important;
    width: 100%;
}

.CO2-Root .SelectTimeForPayment.mf.mcv[b-ptyppc4tzb] {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* [2026-09] ชั่วโมง/นาที/วินาที อยู่บรรทัดเดียวกัน (rail กว้าง ~300px) — ห้าม wrap,
   แบ่ง 3 ช่องเท่ากัน, ลดช่องกรอก + ระยะห่างข้อความหน่วย (inline style padding 10px เดิม → 4px) */
.CO2-PaymentTimeGroup[b-ptyppc4tzb] {
    flex-wrap: nowrap;
    gap: 8px;
    padding-left: 0 !important;
    width: 100%;
}

    .CO2-PaymentTimeGroup > div[b-ptyppc4tzb] {
        display: flex;
        align-items: center;
        flex: 1 1 0;
        min-width: 0;
    }

    .CO2-Root .CO2-PaymentTimeGroup input[b-ptyppc4tzb] {
        width: 44px;
        min-width: 0;
        flex-shrink: 0;
    }

    .CO2-Root .CO2-PaymentTimeGroup input + span[b-ptyppc4tzb] {
        padding: 0 0 0 4px !important;
        white-space: nowrap;
    }

.CO2-Root .SelectTimeForPayment input[b-ptyppc4tzb] {
    width: 56px;
    height: 34px;
    text-align: center;
    border: 1.5px solid #e3e6ea;
    border-radius: 8px;
    padding: 4px 6px;
    font-size: 13px;
    font-family: 'IBM Plex Sans Thai', sans-serif;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

    .CO2-Root .SelectTimeForPayment input:focus[b-ptyppc4tzb] {
        border-color: #0B7A75;
        box-shadow: 0 0 0 3px rgba(11, 122, 117, .14);
    }

    .CO2-Root .SelectTimeForPayment input + span[b-ptyppc4tzb] {
        font-size: 12.5px;
        color: #64748b;
        font-weight: 600;
    }

.CO2-Root .PaymentSelectCSS[b-ptyppc4tzb] {
    border: 1.5px solid #0B7A75;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 400;
    color: #1f2328;
    min-height: 38px;
    min-width: 220px;
    padding: 0 12px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.CO2-Card-Payment .PaymentSelectCSS[b-ptyppc4tzb] {
    width: 100%;
    min-width: 0;
}

    .CO2-Root .PaymentSelectCSS:focus[b-ptyppc4tzb] {
        border-color: #0B7A75;
        box-shadow: 0 0 0 3px rgba(11, 122, 117, .14);
        outline: none;
    }

    .CO2-Root .PaymentSelectCSS.AlertCSS[b-ptyppc4tzb] {
        border-color: #dc2626;
    }

/* ::deep PaymentSelectChoice — จุดใช้ร่วมกับ OrderBill (คุมเฉพาะใต้ .CO2-Root) */
.CO2-Root[b-ptyppc4tzb]  .DiscountPaymentZone,
.CO2-Root[b-ptyppc4tzb]  .DetailPaymentZone {
    border-radius: 14px;
    border: 1px solid #e4e8ec;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
    overflow: hidden;
}

/* [2026-09 แก้ — ย้ายเข้า rail] .PSC_AccountGrid (รายชื่อบัญชีธนาคาร ใน
   PaymentSelectChoice, component ร่วมกับ OrderBill) เดิมบังคับ 3 คอลัมน์
   แล้วลดคอลัมน์ตาม @media (max-width) ของ "viewport" ไม่ใช่ความกว้าง
   container จริง — ในคอลัมน์แคบของ rail (336px) แม้จอ desktop กว้างก็ยัง
   เจอ 3 คอลัมน์บีบจนบัตรเล็กเกินไป จึงบังคับ 1 คอลัมน์เสมอเมื่ออยู่ในการ์ดนี้
   (ไม่แก้ .razor.css ของ component เอง กันกระทบ OrderBill ที่ยังอยู่คอลัมน์กว้าง) */
.CO2-Card-Payment[b-ptyppc4tzb]  .PSC_AccountGrid {
    grid-template-columns: 1fr !important;
}

/* ─────────── FooterCoreBill — สรุปยอด/ปุ่มดูหลักฐาน (ใช้ร่วมกับ OrderBill) ─────────── */
.CO2-Root[b-ptyppc4tzb]  .PriceTransferZone .Div1 {
    font-size: 13px;
    font-weight: 400;
    color: #5c666f;
}

.CO2-Root[b-ptyppc4tzb]  .PriceTransferZone .Div2 {
    color: #1f2328;
    font-size: 13px;
    font-weight: 400;
    font-family: 'IBM Plex Sans Thai', sans-serif;
}

/* แถวสุดท้าย "ยอดชำระเงินทั้งหมด" = grand total ของมอคอัพ (13.5px/600 label,
   22px/600 สีฟ้า value) ต่างจาก 2 แถวบน (รวมสั่งซื้อ/รวมจัดส่ง = 13px ปกติ) */
.CO2-Card-Summary[b-ptyppc4tzb]  .PriceTransferZone:last-of-type .Div1 {
    font-size: 13.5px;
    font-weight: 600;
    color: #1f2328;
}

.CO2-Card-Summary[b-ptyppc4tzb]  .PriceTransferZone:last-of-type .Div2 {
    font-size: 22px;
    font-weight: 600;
    color: #095E5A;
}

.CO2-Root[b-ptyppc4tzb]  .SummitButtonZone .Div2 {
    background: #12141a;
    color: #fff;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
}

/* ─────────── ปุ่มเปลี่ยนสถานะบิล (own markup) ─────────── */
.CO2-Root .ButtomChangeStatusBase[b-ptyppc4tzb] {
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 600;
    border-width: 1px;
    cursor: pointer;
    transition: transform .1s, box-shadow .12s;
}

    .CO2-Root .ButtomChangeStatusBase:hover[b-ptyppc4tzb] {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(15, 23, 42, .12);
    }

/* [2026-09 แก้] ปุ่มเปลี่ยนสถานะเดิมออกแบบมาสำหรับแถบล่างเต็มความกว้าง —
   ตอนนี้การ์ดสรุปกว้างเต็มพื้นที่ (fixed) แล้ว ให้ปุ่มชิดขวาเป็นกลุ่มแทน
   การ stretch เต็มแถว, wrap ขึ้นบรรทัดใหม่ได้ถ้าจอแคบ */
.CO2-Card-Summary .mf[b-ptyppc4tzb] {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end !important;
    padding: 6px 0 0 !important;
}

/* [2026-09 แก้] ลด padding การ์ดสรุปยอดโดยรวม ให้สูงน้อยลงตามที่ขอ */
.CO2-Card-Summary .MB-CardBody[b-ptyppc4tzb] {
    padding: 10px 16px 12px;
}

.CO2-Card-Summary .ButtomChangeStatusBase[b-ptyppc4tzb] {
    flex: 0 0 auto;
    min-width: 100px;
    text-align: center;
    margin: 0 !important;
    padding: 7px 10px;
    white-space: nowrap;
}

/* ─────────── Popup เปลี่ยนที่อยู่ (own component markup, ไม่แชร์ที่อื่น) ─────────── */
.ChangeAddressModal[b-ptyppc4tzb] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
}

.ModalMainManageAddress[b-ptyppc4tzb] {
    position: relative;
    width: 500px;
    height: 600px;
    min-height: 600px;
    max-height: 600px;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,.54);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    font-family: 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
}

    .ModalMainManageAddress .TitleMain[b-ptyppc4tzb] {
        position: relative;
        padding: 16px 24px;
        border-bottom: 1px solid rgba(0,0,0,.09);
        font-size: 16px;
        font-weight: 700;
    }

.AddnewAddressButton[b-ptyppc4tzb] {
    display: flex;
    align-items: center;
    width: fit-content;
    font-size: 14px;
    border: 1px solid #0B7A75;
    color: #0B7A75;
    padding: 4px 15px;
    border-radius: 20px;
    cursor: pointer;
}

    .AddnewAddressButton[b-ptyppc4tzb]::before {
        font-family: GoogleFont;
        content: "\e145";
        font-size: 20px;
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 200, 'opsz' 20;
        color: rgb(120, 120, 120);
        margin-right: 5px;
    }

.ListAddressZone[b-ptyppc4tzb] {
    position: relative;
    width: 100%;
    padding: 0px 24px;
    padding-bottom: 88px;
    flex: 1;
    overflow: scroll;
}

.AddressPerMain[b-ptyppc4tzb] {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 16px 0px;
    border-bottom: 1px solid rgba(0,0,0,.09);
}

    .AddressPerMain .CheckSelected[b-ptyppc4tzb] {
        position: relative;
        min-width: 30px;
        width: 30px;
        padding-right: 4px;
    }

        .AddressPerMain .CheckSelected .BorderMain[b-ptyppc4tzb] {
            margin-top: 5px;
            border-radius: 50%;
            border: 2px solid;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .AddressPerMain .CheckSelected .BorderMain .InnerCircle[b-ptyppc4tzb] {
                border-radius: 50%;
                width: 8px;
                height: 8px;
            }

    .AddressPerMain .DataMainZone[b-ptyppc4tzb] {
        position: relative;
        width: 422px;
        padding-right: 30px;
        font-size: 14px;
    }

        .AddressPerMain .DataMainZone .FirstRow[b-ptyppc4tzb] {
            display: flex;
            align-items: center;
            position: relative;
        }

            .AddressPerMain .DataMainZone .FirstRow .Name[b-ptyppc4tzb] {
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 16px;
                white-space: nowrap;
            }

            .AddressPerMain .DataMainZone .FirstRow .FakeSlash[b-ptyppc4tzb] {
                display: block;
                border-left: .5px solid rgba(0,0,0,.26);
                height: 29px;
                margin: 0 8px;
            }

            .AddressPerMain .DataMainZone .FirstRow .PhoneNumber[b-ptyppc4tzb] {
                color: rgba(0,0,0,.54);
                min-width: 105px;
                flex: 1;
            }

            .AddressPerMain .DataMainZone .FirstRow .EditButton[b-ptyppc4tzb] {
                margin-right: -30px;
                color: #08f;
                padding: 4px;
                cursor: pointer;
            }

        .AddressPerMain .DataMainZone .SecondRow[b-ptyppc4tzb] {
            margin-bottom: 4px;
            text-overflow: ellipsis;
            overflow-x: hidden;
        }

        .AddressPerMain .DataMainZone .FourthRow[b-ptyppc4tzb] {
            margin-top: 4px;
        }

            .AddressPerMain .DataMainZone .FourthRow .ShowDefault[b-ptyppc4tzb] {
                width: fit-content;
                height: fit-content;
                color: #0B7A75;
                border-color: #0B7A75;
                padding: 2px 4px;
                border: 0.5px solid;
                border-radius: 4px;
                font-size: 14px;
            }

.ManageAddressButtonZone[b-ptyppc4tzb] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65px;
    border-top: 1px solid rgba(0,0,0,.09);
    padding: 0 24px;
    display: flex;
    justify-content: end;
    align-items: center;
    background: white;
}

    .ManageAddressButtonZone .ManageSizeButton[b-ptyppc4tzb] {
        width: 140px;
        height: 40px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 9px;
        font-weight: 700;
    }

    .ManageAddressButtonZone .ManageCancelButton[b-ptyppc4tzb] {
        border: 1px solid #d7dbe2;
        color: #64748b;
        margin-right: 8px;
    }

    .ManageAddressButtonZone .ManageAcceptButton[b-ptyppc4tzb] {
        background: #12141a;
        color: white;
    }

/* ─────────── บิลชำระเงิน / popup รูปหลักฐาน (own markup ไม่แชร์) ─────────── */
.IsCheckOutingMain[b-ptyppc4tzb] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.4);
    display: grid;
    place-items: center;
}

    .IsCheckOutingMain .IsCheckOutingDiv[b-ptyppc4tzb] {
        background: white;
        padding: 0 60px;
        height: 100px;
        display: grid;
        place-items: center;
        font-size: 22px;
        border-radius: 12px;
        font-family: 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
    }

.ShowingPaymentImage[b-ptyppc4tzb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
}

    .ShowingPaymentImage .DivImg[b-ptyppc4tzb] {
        display: flex;
        align-items: center;
        min-height: 80vh;
    }

        .ShowingPaymentImage .DivImg img[b-ptyppc4tzb] {
            max-height: 80vh;
            max-width: 80vw;
        }

.WatchingPaymentImageItem[b-ptyppc4tzb] {
    z-index: 2;
    cursor: pointer;
    height: 4vw;
    width: 4vw;
    background: rgba(0,0,0,0.5);
    border: solid 1px black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}

    .WatchingPaymentImageItem:hover[b-ptyppc4tzb] {
        border: solid 1px white;
    }

    .WatchingPaymentImageItem.Selected[b-ptyppc4tzb] {
        border: solid 1px white;
    }

.PaymentButtonCantPress[b-ptyppc4tzb] {
    opacity: 0.2;
    cursor: not-allowed;
}

.AlertCSS[b-ptyppc4tzb] {
    animation: AlertAnimationKeyframe-b-ptyppc4tzb 1s forwards infinite;
}

@keyframes AlertAnimationKeyframe-b-ptyppc4tzb {
    0% {
        box-shadow: #ff0000 0px 0px 10px;
    }

    50% {
        box-shadow: #ff000000 0px 0px 10px;
    }

    100% {
        box-shadow: #ff0000 0px 0px 10px;
    }
}

/* [2026-09] ปุ่มทั้งหน้า = teal gradient เดียวกับปุ่ม "รีเซ็ตการกรอง" (BillFilterBar) — แทน inline ThemeSetting เดิม */
.TealBtn[b-ptyppc4tzb] {
    background: linear-gradient(135deg, #0B7A75, #3FB0A9) !important;
    color: #fff !important;
    border: none;
    border-radius: 9px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 10px 22px -12px rgba(11,122,117,0.7);
    transition: filter .15s, transform .05s;
}

    .TealBtn:hover[b-ptyppc4tzb] {
        filter: brightness(1.06);
    }

    .TealBtn:active[b-ptyppc4tzb] {
        transform: translateY(1px);
    }

/* [2026-09] ปุ่มรอง = outline teal (พื้นขาว ขอบ+ตัวอักษร teal) */
.TealBtnOutline[b-ptyppc4tzb] {
    background: #fff !important;
    color: #0B7A75 !important;
    border: 1px solid #B9E0DC !important;
    border-radius: 9px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    box-shadow: none !important;
    transition: background .15s;
}

    .TealBtnOutline:hover[b-ptyppc4tzb] {
        background: #E7F5F4 !important;
    }

/* ─────────── [2026-10] popup เลือกวิธีชำระเงิน (ปุ่ม "ชำระเงิน" F7 / การ์ดชำระเงิน) — รีโนเวท ───────────
   render ไว้ตลอดในสถานะเลือกวิธีชำระเงิน — ซ่อนด้วย display:none เพื่อคงค่าที่เลือก (PaymentSelectChoice @ref)
   พื้นขาว + เส้นบน teal (ชุดเดียวกับ BillConfirmDialog) ; สีเน้นเฉพาะตัวที่เลือก */
.CO2-PayPop[b-ptyppc4tzb] {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    place-items: center;
    padding: 16px;
    background: rgba(15, 23, 42, .45);
}

    .CO2-PayPop.Open[b-ptyppc4tzb] { display: grid; }

.CO2-PayPopCard[b-ptyppc4tzb] {
    width: min(600px, 100%);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    border-top: 4px solid #0B7A75;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .35);
    overflow: hidden;
    font-family: 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
}

    .CO2-PayPopCard button[b-ptyppc4tzb],
    .CO2-PayPopCard input[b-ptyppc4tzb] {
        font-family: inherit;
    }

.CO2-PayPopHead[b-ptyppc4tzb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #eef2f6;
    flex-shrink: 0;
}

.CO2-PayPopSub[b-ptyppc4tzb] {
    font-size: 12.5px;
    color: #64748b;
}

.CO2-PayPopAmount[b-ptyppc4tzb] {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

    .CO2-PayPopAmount span[b-ptyppc4tzb] {
        font-size: 13px;
        font-weight: 500;
        color: #64748b;
        margin-right: 4px;
    }

.CO2-PayPopClose[b-ptyppc4tzb] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

    .CO2-PayPopClose:hover[b-ptyppc4tzb] { background: #e2e8f0; color: #0f172a; }

.CO2-PayPopBody[b-ptyppc4tzb] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 22px 20px;
}

/* หัวข้อขั้น 1 / 2 */
.CO2-PayStepLabel[b-ptyppc4tzb] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin: 4px 0 10px;
}

    .CO2-PayStepLabel span[b-ptyppc4tzb] {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #f1f5f9;
        color: #475569;
        font-size: 11px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .CO2-PayModes + .CO2-PayStepLabel[b-ptyppc4tzb],
    .CO2-PayModes ~ .CO2-PayStepLabel[b-ptyppc4tzb] {
        margin-top: 20px;
    }

/* ช่องทาง: การ์ดเลือก 2 ใบ (แทน select) */
.CO2-PayModes[b-ptyppc4tzb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    border-radius: 14px;
}

    .CO2-PayModes.Alert[b-ptyppc4tzb] {
        box-shadow: 0 0 0 2px #fca5a5;
    }

.CO2-PayMode[b-ptyppc4tzb] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

    .CO2-PayMode:hover[b-ptyppc4tzb] { border-color: #9fd3ce; }

    .CO2-PayMode.Selected[b-ptyppc4tzb] {
        border-color: #0B7A75;
        background: #fbfefe;
    }

.CO2-PayModeIcon[b-ptyppc4tzb] {
    font-size: 20px;
    line-height: 1.2;
}

.CO2-PayModeText[b-ptyppc4tzb] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .CO2-PayModeText b[b-ptyppc4tzb] {
        font-size: 13.5px;
        color: #0f172a;
    }

    .CO2-PayModeText small[b-ptyppc4tzb] {
        font-size: 11.5px;
        color: #64748b;
        line-height: 1.4;
    }

.CO2-PayModeRadio[b-ptyppc4tzb] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    flex-shrink: 0;
    margin-top: 2px;
}

.CO2-PayMode.Selected .CO2-PayModeRadio[b-ptyppc4tzb] {
    border-color: #0B7A75;
    box-shadow: inset 0 0 0 3px #fff;
    background: #0B7A75;
}

/* ระยะเวลาชำระ */
.CO2-PayTime[b-ptyppc4tzb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

    .CO2-PayTime label[b-ptyppc4tzb] {
        display: flex;
        align-items: center;
        border: 1.5px solid #e2e8f0;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
        margin: 0;
        transition: border-color .12s, box-shadow .12s;
    }

        .CO2-PayTime label:focus-within[b-ptyppc4tzb] {
            border-color: #0B7A75;
            box-shadow: 0 0 0 3px rgba(11,122,117,.12);
        }

    .CO2-PayTime input[b-ptyppc4tzb] {
        flex: 1;
        min-width: 0;
        width: 100%;
        height: 42px;
        border: none;
        outline: none;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        color: #0f172a;
        background: transparent;
        font-variant-numeric: tabular-nums;
    }

    .CO2-PayTime span[b-ptyppc4tzb] {
        padding: 0 12px;
        font-size: 12.5px;
        color: #64748b;
        background: #f8fafc;
        align-self: stretch;
        display: flex;
        align-items: center;
        border-left: 1px solid #eef2f6;
    }

.CO2-PayPresets[b-ptyppc4tzb] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.CO2-PayPreset[b-ptyppc4tzb] {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 12.5px;
    cursor: pointer;
}

    .CO2-PayPreset:hover[b-ptyppc4tzb] { border-color: #9fd3ce; }

    .CO2-PayPreset.Active[b-ptyppc4tzb] {
        border-color: #0B7A75;
        color: #0B7A75;
        font-weight: 600;
    }

.CO2-PayHint[b-ptyppc4tzb] {
    margin-top: 16px;
    padding: 14px;
    border-radius: 10px;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 13px;
    text-align: center;
}

.CO2-PayPopFoot[b-ptyppc4tzb] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 22px;
    background: #f8fafc;
    border-top: 1px solid #eef2f6;
    flex-shrink: 0;
}

.CO2-PayPopBtn[b-ptyppc4tzb] {
    padding: 9px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .CO2-PayPopBtn.Ghost[b-ptyppc4tzb] {
        background: #fff;
        color: #475569;
        border: 1px solid #e2e8f0;
    }

        .CO2-PayPopBtn.Ghost:hover[b-ptyppc4tzb] { background: #f1f5f9; }

    .CO2-PayPopBtn.Primary[b-ptyppc4tzb] {
        background: #0B7A75;
        color: #fff;
        border: 1px solid #0B7A75;
    }

        .CO2-PayPopBtn.Primary:hover[b-ptyppc4tzb] { background: #095E5A; }

@media (max-width: 560px) {
    .CO2-PayPop[b-ptyppc4tzb] { padding: 0; place-items: end stretch; }
    .CO2-PayPopCard[b-ptyppc4tzb] { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
    .CO2-PayModes[b-ptyppc4tzb] { grid-template-columns: 1fr; }
    .CO2-PayTime span[b-ptyppc4tzb] { padding: 0 8px; }
    .CO2-PayPopFoot > button[b-ptyppc4tzb] { flex: 1; }
}

/* [2026-10] การ์ด "ชำระเงิน" ใน rail ขวา (สรุปวิธีชำระ + ปุ่มเปิด popup) */
.CO2-PayCard .MB-CardBody[b-ptyppc4tzb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 18px 16px;
}

.CO2-PayCardRow[b-ptyppc4tzb] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
    color: #64748b;
}

    .CO2-PayCardRow b[b-ptyppc4tzb] {
        color: #0f172a;
        font-weight: 600;
        text-align: right;
    }

.CO2-PayCardState[b-ptyppc4tzb] {
    font-size: 12.5px;
    padding: 7px 10px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

    .CO2-PayCardState.Ok[b-ptyppc4tzb] { color: #047857; }
    .CO2-PayCardState.Bad[b-ptyppc4tzb] { color: #b45309; }

.CO2-PayCardBtn[b-ptyppc4tzb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #0B7A75;
    background: #0B7A75;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

    .CO2-PayCardBtn:hover[b-ptyppc4tzb] { background: #095E5A; }

/* [2026-10] ชำระหลายรอบ (ปิด Sync) — แถบสรุป ยอดบิล / ชำระแล้ว / คงเหลือ + การ์ดรายการชำระ (Section_Sale_PaymentZone) */
.CO2-PaySum[b-ptyppc4tzb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

    .CO2-PaySum > div[b-ptyppc4tzb] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px 12px;
        border-radius: 10px;
        background: #f8fafc;
        border: 1px solid #eef2f6;
    }

    .CO2-PaySum span[b-ptyppc4tzb] {
        font-size: 11.5px;
        color: #64748b;
    }

    .CO2-PaySum b[b-ptyppc4tzb] {
        font-size: 15px;
        color: #0f172a;
        font-variant-numeric: tabular-nums;
    }

    .CO2-PaySum > div.Ok b[b-ptyppc4tzb] { color: #047857; }
    .CO2-PaySum > div.Due b[b-ptyppc4tzb] { color: #b45309; }

.CO2-PayZone[b-ptyppc4tzb]  .BillCard {
    box-shadow: none;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    margin: 0;
}

.CO2-PaySyncNote[b-ptyppc4tzb] {
    font-size: 11.5px;
    font-weight: 500;
    color: #94a3b8;
    margin-left: 6px;
}

@media (max-width: 560px) {
    .CO2-PaySum b[b-ptyppc4tzb] { font-size: 13.5px; }
}

/* [2026-10] การ์ดชำระเงิน (rail ขวา) — รายการที่ชำระแล้ว */
.CO2-PayCardList[b-ptyppc4tzb] {
    display: flex;
    flex-direction: column;
    border: 1px solid #eef2f6;
    border-radius: 10px;
    overflow: hidden;
}

.CO2-PayCardItem[b-ptyppc4tzb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
}

    .CO2-PayCardItem:last-child[b-ptyppc4tzb] { border-bottom: none; }

.CO2-PayCardItemInfo[b-ptyppc4tzb] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .CO2-PayCardItemInfo b[b-ptyppc4tzb] {
        font-size: 13px;
        font-weight: 600;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .CO2-PayCardItemInfo small[b-ptyppc4tzb] {
        font-size: 11.5px;
        color: #94a3b8;
    }

.CO2-PayCardItemAmount[b-ptyppc4tzb] {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/FrontEnd/Purchase/OrderBill.razor.rz.scp.css */
/* ── Two-column grid — [2026-09 bugfix รอบ 6 — "ยังขยายไม่เต็ม"] breakpoint
   เดิม 1180px อิง mode() ของไฟล์มอคอัพตรงๆ (สมมติหน้าเต็มจอไม่มี container
   จำกัด) แต่หน้านี้ถูกครอบด้วย `.MaxWidthSize{max-width:1080px}` ใน
   SalesManage.razor (convention เดียวกับทุกหน้าบิลในระบบ — ดู
   StockRec_Bill.razor.css/SupplierReturn_Bill.razor.css ที่ตั้งใจ
   max-width:1080px เหมือนกัน ไม่ใช่บั๊ก) ทำให้ 1180px ไม่มีทาง trigger ได้เลย —
   เลื่อนลงมาเป็น 860px แทน ให้ 2-คอลัมน์ทำงานได้จริงภายใน container 1080px
   (.RightColumn ยังกว้างแค่ 320px คงที่ จึงเหลือ main ≥ 520px ที่ threshold นี้) ── */
/* หน้าร้าน: เว้นระยะจากแถบเมนูบน/ footer เท่ากับบิลสั่งซื้อ (.CO2-Front) */
.OB-Root.OB-Front[b-4j8cmc7q9n] {
    padding: 18px 0 20px;
}

/* [2026-10] layout 2 คอลัมน์ + การ์ด/หัวการ์ด เป็นของกลาง (.MB-Body/.MB-Card* ใน wwwroot/css/bill-ui.css)
   ใช้ชุดเดียวกับ CPO / บิลรับสินค้า / บิลส่งคืนบริษัท — ที่นี่เหลือแค่ส่วนเฉพาะของหน้านี้ */
@media (min-width: 860px) {
    .MB-ColSide[b-4j8cmc7q9n] {
        position: sticky;
        top: 16px;
    }
}

/* การ์ดของหน้านี้วางเนื้อหาตรงในการ์ด (ไม่มี .MB-CardBody) → padding ที่ตัวการ์ด, หัวการ์ดชิดขอบในเท่ากัน */
.OB-Card[b-4j8cmc7q9n] {
    padding: 0 22px 20px;
}

    .OB-Card > .MB-CardHead[b-4j8cmc7q9n] {
        padding-left: 0;
        padding-right: 0;
    }

/* ── FROM / SHIP TO ── */
.FromShipGrid[b-4j8cmc7q9n] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 600px) {
    .FromShipGrid[b-4j8cmc7q9n] {
        grid-template-columns: 1fr;
    }
}

.FromContent[b-4j8cmc7q9n] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.CompanyAvatar[b-4j8cmc7q9n] {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #0B7A75;
    color: white;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.CompanyName[b-4j8cmc7q9n] {
    font-weight: 600;
    font-size: 14px;
    color: #111;
}

.CompanyAddress[b-4j8cmc7q9n] {
    font-size: 12px;
    color: #6b7280;
    margin-top: 3px;
    line-height: 1.5;
}

.ShipToName[b-4j8cmc7q9n] {
    font-weight: 600;
    font-size: 14px;
    color: #111;
    margin-bottom: 6px;
}

.ShipToDetail[b-4j8cmc7q9n] {
    font-size: 12px;
    color: #6b7280;
    margin-top: 3px;
    line-height: 1.5;
}

/* ── Items table ── */
.ItemsTableHeader[b-4j8cmc7q9n] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #e6eaf1;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
}

.ItemsColCenter[b-4j8cmc7q9n] {
    text-align: center;
    white-space: nowrap;
}

.ItemsColRight[b-4j8cmc7q9n] {
    text-align: right;
    white-space: nowrap;
}

.ItemRow[b-4j8cmc7q9n] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #fafbfc;
    align-items: start;
}

.ItemInfo[b-4j8cmc7q9n] {
    min-width: 0;
}

.ItemName[b-4j8cmc7q9n] {
    font-weight: 600;
    font-size: 14px;
    color: #111;
    margin-bottom: 3px;
}

.ItemSku[b-4j8cmc7q9n] {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 4px;
}

.LotRow[b-4j8cmc7q9n] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    flex-wrap: wrap;
}

.LotCode[b-4j8cmc7q9n] {
    font-size: 11px;
    font-weight: 600;
    color: #0B7A75;
    background: #E7F5F4;
    padding: 1px 6px;
    border-radius: 4px;
}

.LotMeta[b-4j8cmc7q9n] {
    font-size: 11px;
    color: #6b7280;
}

.LotExpiry[b-4j8cmc7q9n] {
    color: #d64545;
}

.ItemPrice[b-4j8cmc7q9n] {
    font-size: 13px;
    color: #374151;
    text-align: center;
    white-space: nowrap;
    padding-top: 2px;
}

.ItemTotal[b-4j8cmc7q9n] {
    font-size: 13px;
    font-weight: 600;
    color: #0B7A75;
    text-align: right;
    white-space: nowrap;
    padding-top: 2px;
}

.ItemsSummaryRow[b-4j8cmc7q9n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0 2px;
    margin-top: 4px;
}

.ItemsSummaryLabel[b-4j8cmc7q9n] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.ItemsSummaryAmount[b-4j8cmc7q9n] {
    font-size: 20px;
    font-weight: 700;
    color: #0B7A75;
}

/* ── INFO card ── */
.InfoRow[b-4j8cmc7q9n] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #fafbfc;
    gap: 10px;
}

    .InfoRow:last-child[b-4j8cmc7q9n] {
        border-bottom: none;
    }

.InfoLabel[b-4j8cmc7q9n] {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
    padding-top: 1px;
}

.InfoValue[b-4j8cmc7q9n] {
    font-size: 13px;
    color: #111;
    font-weight: 500;
    text-align: right;
}

.InfoValueHighlight[b-4j8cmc7q9n] {
    color: #0B7A75;
}

/* ── TIMELINE card ── */
.Timeline[b-4j8cmc7q9n] {
    display: flex;
    flex-direction: column;
}

.TimelineItem[b-4j8cmc7q9n] {
    display: flex;
    gap: 12px;
    padding-bottom: 4px;
}

.TimelineDotWrap[b-4j8cmc7q9n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 16px;
}

.TimelineDotFilled[b-4j8cmc7q9n] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0B7A75;
    flex-shrink: 0;
}

.TimelineDotEmpty[b-4j8cmc7q9n] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: white;
    flex-shrink: 0;
}

.TimelineDotCancel[b-4j8cmc7q9n] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #d64545;
    flex-shrink: 0;
}

.TimelineLine[b-4j8cmc7q9n] {
    width: 2px;
    flex: 1;
    min-height: 20px;
    background: #e5e7eb;
    margin: 4px 0;
}

.TimelineDone .TimelineLine[b-4j8cmc7q9n] {
    background: #0B7A75;
}

.TimelineContent[b-4j8cmc7q9n] {
    padding-bottom: 14px;
    flex: 1;
}

.TimelineTitle[b-4j8cmc7q9n] {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    line-height: 1.3;
}

.TimelinePending .TimelineTitle[b-4j8cmc7q9n] {
    color: #9ca3af;
}

.TimelineDate[b-4j8cmc7q9n] {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

.TimelineCancel .TimelineTitle[b-4j8cmc7q9n] {
    color: #d64545;
}

/* ── VERIFY card ── */
.VerifyImageWrap[b-4j8cmc7q9n] {
    width: 100%;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafbfc;
}

.VerifyImage[b-4j8cmc7q9n] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.VerifyLoading[b-4j8cmc7q9n] {
    color: #9ca3af;
    font-size: 13px;
}

.VerifyBtn[b-4j8cmc7q9n] {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.VerifyEmpty[b-4j8cmc7q9n] {
    font-size: 13px;
    color: #9ca3af;
    text-align: center;
    padding: 20px 0;
}

/* ── Loading ── */
.LoadingDiv[b-4j8cmc7q9n] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.LoadingCard[b-4j8cmc7q9n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 40px 56px;
    background: #fff;
    border: 1px solid #e6e9f0;
    border-radius: 18px;
    box-shadow: 0 24px 50px -24px rgba(23,45,80,0.35);
}

.LoadingSpinner[b-4j8cmc7q9n] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 4px solid #e4e9f2;
    border-top-color: #0B7A75;
    animation: OrderBillSpin-b-4j8cmc7q9n .8s linear infinite;
}

@keyframes OrderBillSpin-b-4j8cmc7q9n {
    to { transform: rotate(360deg); }
}

.LoadingIcon[b-4j8cmc7q9n] {
    font-size: 40px;
    line-height: 1;
    opacity: 0.85;
}

.LoadingText[b-4j8cmc7q9n] {
    font-size: 15px;
    font-weight: 700;
    color: #33415c;
}

.LoadingSub[b-4j8cmc7q9n] {
    font-size: 13px;
    color: #98a2b3;
}

.StatusLoadingDiv[b-4j8cmc7q9n] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.3);
    display: grid;
    place-items: center;
    z-index: 9999;
}

    .StatusLoadingDiv .Img[b-4j8cmc7q9n] {
        width: 60px;
        height: 60px;
    }

/* ── Confirm payment button ── */
.ConfirmPaymentBtn[b-4j8cmc7q9n] {
    width: 100%;
    padding: 16px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    user-select: none;
    margin-top: 10px;
    transition: filter .15s, box-shadow .15s;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

    .ConfirmPaymentBtn:hover[b-4j8cmc7q9n] {
        filter: brightness(1.05);
        box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    }

/* ── การ์ดสรุปยอดชำระ (ครอบ FooterCoreBill) — แถวเรียบ ป้ายซ้าย/ตัวเลขขวา, แถวสุดท้าย = ยอดรวมตัวหนา teal ── */
.PaySummaryCard[b-4j8cmc7q9n]  .PriceTransferZone {
    height: auto;
    padding: 9px 0;
    border: none !important;
    background: transparent;
    justify-content: space-between;
}

    .PaySummaryCard[b-4j8cmc7q9n]  .PriceTransferZone .Div1 {
        flex: 1;
        justify-content: flex-start;
        padding: 0;
        border: none;
        font-size: 13.5px;
        color: #5c666f;
    }

    .PaySummaryCard[b-4j8cmc7q9n]  .PriceTransferZone .Div2 {
        min-width: 0;
        padding: 0;
        border: none;
        font-family: 'IBM Plex Mono', 'IBM Plex Sans Thai', monospace;
        font-size: 14px;
        color: #1f2328;
    }

    /* nth-of-type(4): div ลำดับ 1 = .MB-CardHead (หัวการ์ด), 2-4 = แถวยอด → 4 = "ยอดชำระเงินทั้งหมด" */
    .PaySummaryCard[b-4j8cmc7q9n]  .PriceTransferZone:nth-of-type(4) {
        margin-top: 6px;
        padding-top: 14px;
        border-top: 1px dashed #dfe4ea !important;
    }

        .PaySummaryCard[b-4j8cmc7q9n]  .PriceTransferZone:nth-of-type(4) .Div1 {
            font-size: 14.5px;
            font-weight: 600;
            color: #14213d;
        }

        .PaySummaryCard[b-4j8cmc7q9n]  .PriceTransferZone:nth-of-type(4) .Div2 {
            font-size: 20px;
            font-weight: 600;
            color: #095E5A;
        }

.PaySummaryCard .ConfirmPaymentBtn[b-4j8cmc7q9n] {
    margin-top: 16px;
    padding: 13px;
    font-size: 15px;
}

/* ── Payment section (reuse existing classes) ── */
.DetailPaymentZone[b-4j8cmc7q9n] {
    margin-top: 0;
    background: white;
    font-size: 14px;
}

.PaymentToggleSection[b-4j8cmc7q9n] {
    width: 100%;
    margin-bottom: 10px;
}

.PaymentToggleButton[b-4j8cmc7q9n] {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,.10);
    transition: filter .12s ease, box-shadow .12s ease;
}

    .PaymentToggleButton:hover[b-4j8cmc7q9n] {
        filter: brightness(1.03);
        box-shadow: 0 6px 14px rgba(0,0,0,.14);
    }

.SummitButtonZone[b-4j8cmc7q9n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    height: 90px;
    flex: 1;
    background: white;
}

    .SummitButtonZone .Div1[b-4j8cmc7q9n] {
        color: rgba(0,0,0,.54);
        font-size: 13px;
        flex: 1;
        padding-right: 20px;
    }

    .SummitButtonZone .Div2[b-4j8cmc7q9n] {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 210px;
        height: 40px;
        border-radius: 2px;
        cursor: pointer;
        font-size: 14px;
    }

.PriceTransferZone[b-4j8cmc7q9n] {
    display: flex;
    justify-content: end;
    align-items: center;
    height: 40px;
    background: white;
}

    .PriceTransferZone .Div1[b-4j8cmc7q9n] {
        flex: 1;
        border-right: 1px solid rgba(0,0,0,.09);
        border-bottom: 1px solid rgba(0,0,0,.09);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: end;
        padding-right: 20px;
        font-size: 14px;
    }

/* ── Confirm dialog ── */
.ShowingAskYesNo[b-4j8cmc7q9n] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
}

    .ShowingAskYesNo .DivMain[b-4j8cmc7q9n] {
        background: white;
        border-radius: 8px;
        padding: 24px;
        min-width: 280px;
        user-select: none;
    }

    .ShowingAskYesNo .DivMain .Title[b-4j8cmc7q9n] {
        font-size: 15px;
        font-weight: 600;
        color: #111;
        text-align: center;
    }

    .ShowingAskYesNo .DivMain .ButtonZone[b-4j8cmc7q9n] {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 18px;
    }

    .ShowingAskYesNo .DivMain .ButtonZone .Confirm[b-4j8cmc7q9n] {
        border-radius: 6px;
        width: 100px;
        height: 36px;
        display: grid;
        place-items: center;
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
    }

    .ShowingAskYesNo .DivMain .ButtonZone .Cancel[b-4j8cmc7q9n] {
        border: 1px solid #d1d5db;
        border-radius: 6px;
        width: 100px;
        height: 36px;
        display: grid;
        place-items: center;
        cursor: pointer;
        font-size: 13px;
        color: #374151;
    }

    .PriceTransferZone .Div2[b-4j8cmc7q9n] {
        min-width: 135px;
        text-align: right;
        padding-right: 30px;
        color: #ee4d2d;
        border-bottom: 1px solid rgba(0,0,0,.09);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: end;
        font-size: 14px;
    }

.ShowingPaymentImage[b-4j8cmc7q9n] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
}

    .ShowingPaymentImage .DivImg[b-4j8cmc7q9n] {
        display: flex;
        align-items: center;
        min-height: 80vh;
    }

        .ShowingPaymentImage .DivImg img[b-4j8cmc7q9n] {
            max-height: 80vh;
            max-width: 80vw;
        }

.WatchingPaymentImageItem[b-4j8cmc7q9n] {
    z-index: 2;
    cursor: pointer;
    height: 4vw;
    width: 4vw;
    background: rgba(0,0,0,0.5);
    border: solid 1px black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}

    .WatchingPaymentImageItem:hover[b-4j8cmc7q9n],
    .WatchingPaymentImageItem.Selected[b-4j8cmc7q9n] {
        border: solid 1px white;
    }

/* [2026-09] ปุ่มทั้งหน้า = teal gradient เดียวกับปุ่ม "รีเซ็ตการกรอง" (BillFilterBar) — แทน inline ThemeSetting เดิม */
.TealBtn[b-4j8cmc7q9n] {
    background: linear-gradient(135deg, #0B7A75, #3FB0A9) !important;
    color: #fff !important;
    border: none;
    border-radius: 9px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 10px 22px -12px rgba(11,122,117,0.7);
    transition: filter .15s, transform .05s;
}

    .TealBtn:hover[b-4j8cmc7q9n] {
        filter: brightness(1.06);
    }

    .TealBtn:active[b-4j8cmc7q9n] {
        transform: translateY(1px);
    }

/* [2026-09] ปุ่มรอง = outline teal (พื้นขาว ขอบ+ตัวอักษร teal) */
.TealBtnOutline[b-4j8cmc7q9n] {
    background: #fff !important;
    color: #0B7A75 !important;
    border: 1px solid #B9E0DC !important;
    border-radius: 9px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    box-shadow: none !important;
    transition: background .15s;
}

    .TealBtnOutline:hover[b-4j8cmc7q9n] {
        background: #E7F5F4 !important;
    }

/* [2026-10] การ์ดใช้คะแนนสะสม (Mine.Point) + บรรทัดส่วนลดคะแนนในสรุปยอด */
.OB-PointLine[b-4j8cmc7q9n] { padding-top: 8px; }
.OB-PointLineAmount[b-4j8cmc7q9n] { font-size: 15px; font-weight: 700; color: #be123c; }
.OB-PointCard[b-4j8cmc7q9n] { margin-bottom: 14px; }
.OB-PointInfo[b-4j8cmc7q9n] { font-size: 14px; color: #374151; padding: 4px 0 10px; }
.OB-PointInfo b[b-4j8cmc7q9n] { color: #0B7A75; font-size: 16px; }
.OB-PointUsed[b-4j8cmc7q9n] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
                background: #E7F5F4; border: 1px solid #B9E0DC; border-radius: 9px; padding: 10px 12px; margin-bottom: 10px;
                font-size: 14px; font-weight: 600; color: #095E5A; }
.OB-PointRow[b-4j8cmc7q9n] { display: flex; gap: 8px; align-items: stretch; }
.OB-PointInput[b-4j8cmc7q9n] { flex: 1 1 auto; min-width: 0; border: 1px solid #d5dbe3; border-radius: 9px; padding: 9px 12px; font-size: 14px; }
.OB-PointInput:focus[b-4j8cmc7q9n] { outline: none; border-color: #0B7A75; }
.OB-PointBtn[b-4j8cmc7q9n] { padding: 9px 14px; font-size: 14px; white-space: nowrap; }
.OB-PointBtn:disabled[b-4j8cmc7q9n] { opacity: .6; cursor: default; }
.OB-PointHint[b-4j8cmc7q9n], .OB-PointNote[b-4j8cmc7q9n] { font-size: 13px; color: #6b7280; margin-top: 8px; }
.OB-PointErr[b-4j8cmc7q9n] { font-size: 13px; color: #be123c; margin-top: 8px; }
@media (max-width: 600px) {
    .OB-PointRow[b-4j8cmc7q9n] { flex-wrap: wrap; }
    .OB-PointInput[b-4j8cmc7q9n] { flex-basis: 100%; }
    .OB-PointBtn[b-4j8cmc7q9n] { flex: 1 1 0; }
}

/* [2026-10] โปรโมชั่น — ป้ายของแถม / ส่วนลดโปรต่อบรรทัด / โปรที่ได้ */
.OB-GiftTag[b-4j8cmc7q9n] { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: #fff1f3; color: #be123c; font-size: 11px; font-weight: 700; vertical-align: middle; }
.OB-PromoLine[b-4j8cmc7q9n] { font-size: 12px; color: #0B7A75; font-weight: 600; margin-top: 2px; }
.OB-PromoApplied[b-4j8cmc7q9n] { font-size: 13px; color: #374151; padding-top: 6px; }
.OB-RewardTag[b-4j8cmc7q9n] { background: #fff7e8; color: #a16207; }
.OB-RewardRemove[b-4j8cmc7q9n] { display: inline-block; margin-top: 4px; font-size: 12px; color: #be123c; cursor: pointer; text-decoration: underline; }
.OB-RewardHead[b-4j8cmc7q9n] { font-size: 14px; font-weight: 700; color: #374151; margin: 14px 0 6px; }
.OB-RewardRow[b-4j8cmc7q9n] { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f1f3f6; }
.OB-RewardMain[b-4j8cmc7q9n] { flex: 1 1 auto; min-width: 0; }
.OB-RewardName[b-4j8cmc7q9n] { font-size: 14px; font-weight: 600; }
/* /Components/Pages/FrontEnd/Purchase/PaymentBill.razor.rz.scp.css */
/* [2026-10] รีโนเวทหน้าชำระเงิน — prefix PB-* ; โทน teal ชุดเดียวกับบิลสั่งซื้อ/บิลขาย (CustomerOrders / OrderBill)
   เปลี่ยนโทนสีทั้งหน้าได้ที่ตัวแปรใน .PB-Root */
.PB-Root[b-b1i4q3eoue] {
    --pb-accent: #0B7A75;
    --pb-accent-dark: #095E5A;
    --pb-soft: #E7F5F4;
    --pb-soft-border: #B9E0DC;
    --pb-ink: #14213d;
    --pb-muted: #66707a;
    --pb-line: #e6eaf1;
    font-family: 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
    color: var(--pb-ink);
    padding: 18px 0 20px;
}

.PB-Grid[b-b1i4q3eoue] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}

@media (min-width: 900px) {
    .PB-Grid[b-b1i4q3eoue] {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .PB-Side[b-b1i4q3eoue] {
        position: sticky;
        top: 16px;
    }
}

.PB-Card[b-b1i4q3eoue] {
    background: #fff;
    border: 1px solid var(--pb-line);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .05);
    min-width: 0;
}

/* ── หัวการ์ด: เลขบิล + สถานะ + เวลาคงเหลือ ── */
.PB-Head[b-b1i4q3eoue] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--pb-line);
}

.PB-HeadMain[b-b1i4q3eoue] {
    min-width: 0;
}

.PB-Kicker[b-b1i4q3eoue] {
    font-size: 11px;
    letter-spacing: .1em;
    color: #9aa4b8;
}

.PB-BillCode[b-b1i4q3eoue] {
    font-family: 'IBM Plex Mono', 'IBM Plex Sans Thai', monospace;
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.PB-HeadSide[b-b1i4q3eoue] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.PB-Status[b-b1i4q3eoue] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
}

.PB-StatusDot[b-b1i4q3eoue] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.PB-Status.Wait[b-b1i4q3eoue] {
    background: #fff8ec;
    border-color: #f6e3c0;
    color: #8a6a2f;
}

.PB-Status.Check[b-b1i4q3eoue] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.PB-Status.Done[b-b1i4q3eoue] {
    background: var(--pb-soft);
    border-color: var(--pb-soft-border);
    color: var(--pb-accent-dark);
}

.PB-Status.Cancel[b-b1i4q3eoue] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.PB-Timer[b-b1i4q3eoue] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 8px;
    border: 1px solid var(--pb-line);
    font-size: 12px;
    color: var(--pb-muted);
}

    .PB-Timer b[b-b1i4q3eoue] {
        font-family: 'IBM Plex Mono', monospace;
        font-weight: 600;
        color: var(--pb-ink);
    }

    .PB-Timer.Expired[b-b1i4q3eoue] {
        background: #fef2f2;
        border-color: #fecaca;
        color: #dc2626;
        font-weight: 600;
    }

/* ── ขั้นตอน ── */
.PB-Steps[b-b1i4q3eoue] {
    display: flex;
    gap: 8px;
    padding: 14px 22px 0;
}

.PB-Step[b-b1i4q3eoue] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f6f8fb;
    font-size: 12.5px;
    color: #98a2ad;
    min-width: 0;
}

.PB-StepNo[b-b1i4q3eoue] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 600;
    background: #fff;
    border: 1px solid #d8dee6;
}

.PB-StepName[b-b1i4q3eoue] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.PB-Step.Active[b-b1i4q3eoue] {
    background: var(--pb-soft);
    color: var(--pb-accent-dark);
    font-weight: 600;
}

    .PB-Step.Active .PB-StepNo[b-b1i4q3eoue] {
        background: var(--pb-accent);
        border-color: var(--pb-accent);
        color: #fff;
    }

.PB-Step.Done[b-b1i4q3eoue] {
    color: var(--pb-accent);
}

    .PB-Step.Done .PB-StepNo[b-b1i4q3eoue] {
        background: var(--pb-soft);
        border-color: var(--pb-soft-border);
        color: var(--pb-accent);
    }

/* ── เนื้อหา: ซ้าย QR/หลักฐาน/อัพโหลด, ขวา ข้อมูลบัญชี ── */
.PB-Body[b-b1i4q3eoue] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 20px 22px;
}

@media (min-width: 640px) {
    .PB-Body[b-b1i4q3eoue] {
        grid-template-columns: 280px minmax(0, 1fr);
        align-items: start;
    }
}

.PB-Visual[b-b1i4q3eoue] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.PB-VisualTitle[b-b1i4q3eoue] {
    font-size: 13.5px;
    font-weight: 600;
    align-self: flex-start;
}

.PB-PromptLogo[b-b1i4q3eoue] {
    height: 38px;
    max-width: 100%;
    object-fit: contain;
}

.PB-QrBox[b-b1i4q3eoue],
.PB-Proof[b-b1i4q3eoue],
.PB-Drop[b-b1i4q3eoue],
.PB-CreditBox[b-b1i4q3eoue] {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    box-sizing: border-box;
}

.PB-QrBox[b-b1i4q3eoue] {
    border: 1px solid var(--pb-line);
    background: #fff;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.PB-QrImg[b-b1i4q3eoue] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.PB-Proof[b-b1i4q3eoue] {
    border: 1px solid var(--pb-line);
}

.PB-Drop[b-b1i4q3eoue] {
    border: 2px dashed var(--pb-soft-border);
    background: #F2FAF9;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

    .PB-Drop:hover[b-b1i4q3eoue] {
        background: var(--pb-soft);
        border-color: var(--pb-accent);
    }

    .PB-Drop.HasImage[b-b1i4q3eoue] {
        border-style: solid;
        background: #fff;
    }

.PB-DropEmpty[b-b1i4q3eoue] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    text-align: center;
    font-size: 13.5px;
    color: var(--pb-accent-dark);
}

.PB-DropIcon[b-b1i4q3eoue] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--pb-soft-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--pb-accent);
}

.PB-DropHint[b-b1i4q3eoue] {
    font-size: 11.5px;
    color: #98a2ad;
    text-align: center;
}

.PB-DropTools[b-b1i4q3eoue] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    font-size: 12.5px;
    color: var(--pb-muted);
}

.PB-Link[b-b1i4q3eoue] {
    color: var(--pb-accent);
    font-weight: 600;
    cursor: pointer;
}

    .PB-Link:hover[b-b1i4q3eoue] {
        text-decoration: underline;
    }

    .PB-Link.Danger[b-b1i4q3eoue] {
        color: #dc2626;
    }

.PB-CreditBox[b-b1i4q3eoue] {
    border: 1px solid var(--pb-soft-border);
    background: var(--pb-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--pb-accent-dark);
}

.PB-CreditIcon[b-b1i4q3eoue] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--pb-soft-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

/* ตารางรูป 1–4 รูป (grid-template-areas มาจาก SpecialStyle ใน markup) */
.GridPreviewImage[b-b1i4q3eoue] {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.GridPreviewImageItem[b-b1i4q3eoue] {
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

    .GridPreviewImageItem.Zoomable[b-b1i4q3eoue] {
        cursor: zoom-in;
    }

    .GridPreviewImageItem .Img[b-b1i4q3eoue] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* ── ข้อมูลบัญชี ── */
.PB-Info[b-b1i4q3eoue] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.PB-AmountTile[b-b1i4q3eoue] {
    background: var(--pb-soft);
    border: 1px solid var(--pb-soft-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 6px;
}

.PB-AmountLabel[b-b1i4q3eoue] {
    font-size: 12px;
    color: #4a5f86;
}

.PB-AmountRow[b-b1i4q3eoue] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.PB-AmountValue[b-b1i4q3eoue] {
    font-family: 'IBM Plex Mono', 'IBM Plex Sans Thai', monospace;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pb-accent-dark);
    overflow-wrap: anywhere;
}

.PB-Row[b-b1i4q3eoue] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #f1f3f7;
}

.PB-RowLabel[b-b1i4q3eoue] {
    flex-shrink: 0;
    width: 132px;
    font-size: 12.5px;
    color: var(--pb-muted);
}

.PB-RowValue[b-b1i4q3eoue] {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

    .PB-RowValue.Mono[b-b1i4q3eoue] {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .02em;
    }

.PB-Copy[b-b1i4q3eoue] {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 7px;
    border: 1px solid var(--pb-soft-border);
    background: #fff;
    color: var(--pb-accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background .15s;
}

    .PB-Copy:hover[b-b1i4q3eoue] {
        background: var(--pb-soft);
    }

.PB-Note[b-b1i4q3eoue] {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f6f8fb;
    font-size: 12.5px;
    line-height: 1.5;
    color: #4b555f;
}

    .PB-Note.Error[b-b1i4q3eoue] {
        background: #fef2f2;
        color: #dc2626;
    }

/* ── ปุ่ม ── */
.PB-Actions[b-b1i4q3eoue] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--pb-line);
}

    .PB-Actions.PB-Hidden[b-b1i4q3eoue] {
        display: none;
    }

.PB-Btn[b-b1i4q3eoue] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    height: 42px;
    padding: 0 20px;
    border-radius: 9px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    border: 1px solid transparent;
    transition: filter .15s, background .15s, transform .05s;
}

.PB-Btn-Primary[b-b1i4q3eoue] {
    background: linear-gradient(135deg, #0B7A75, #3FB0A9);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 10px 22px -12px rgba(11, 122, 117, .7);
}

    .PB-Btn-Primary:hover[b-b1i4q3eoue] {
        filter: brightness(1.06);
    }

    .PB-Btn-Primary:active[b-b1i4q3eoue] {
        transform: translateY(1px);
    }

.PB-Btn-Outline[b-b1i4q3eoue] {
    background: #fff;
    border-color: var(--pb-soft-border);
    color: var(--pb-accent);
}

    .PB-Btn-Outline:hover[b-b1i4q3eoue] {
        background: var(--pb-soft);
    }

/* ── การ์ดสรุปรายการ ── */
.PB-SideHead[b-b1i4q3eoue] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 20px 12px;
}

.PB-SideTitle[b-b1i4q3eoue] {
    font-size: 14.5px;
    font-weight: 600;
}

.PB-SideCount[b-b1i4q3eoue] {
    font-size: 12.5px;
    color: var(--pb-muted);
}

.PB-Items[b-b1i4q3eoue] {
    max-height: 340px;
    overflow-y: auto;
    padding: 4px 20px;
}

.PB-Item[b-b1i4q3eoue] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f3f7;
}

    .PB-Item:last-child[b-b1i4q3eoue] {
        border-bottom: none;
    }

.PB-ItemImg[b-b1i4q3eoue] {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 1px solid var(--pb-line);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .PB-ItemImg img[b-b1i4q3eoue] {
        max-width: 100%;
        max-height: 100%;
        border-radius: 9px;
        object-fit: contain;
    }

.PB-ItemQty[b-b1i4q3eoue] {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--pb-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.PB-ItemInfo[b-b1i4q3eoue] {
    flex: 1;
    min-width: 0;
}

.PB-ItemName[b-b1i4q3eoue] {
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.PB-ItemUnit[b-b1i4q3eoue] {
    font-size: 12px;
    color: var(--pb-muted);
}

.PB-ItemPrice[b-b1i4q3eoue] {
    flex-shrink: 0;
    text-align: right;
    font-family: 'IBM Plex Mono', 'IBM Plex Sans Thai', monospace;
    font-size: 13px;
}

.PB-PriceOld[b-b1i4q3eoue] {
    text-decoration: line-through;
    color: #98a2ad;
}

.PB-PriceNew[b-b1i4q3eoue] {
    color: #f14d48;
    font-weight: 600;
}

.PB-Totals[b-b1i4q3eoue] {
    padding: 12px 20px 18px;
    border-top: 1px solid var(--pb-line);
}

.PB-TotalRow[b-b1i4q3eoue] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    font-size: 13.5px;
    color: #5c666f;
}

    .PB-TotalRow span:last-child[b-b1i4q3eoue] {
        font-family: 'IBM Plex Mono', 'IBM Plex Sans Thai', monospace;
        color: #1f2328;
    }

    .PB-TotalRow.Net[b-b1i4q3eoue] {
        margin-top: 6px;
        padding-top: 12px;
        border-top: 1px dashed #dfe4ea;
        font-size: 14.5px;
        font-weight: 600;
        color: var(--pb-ink);
    }

        .PB-TotalRow.Net span:last-child[b-b1i4q3eoue] {
            font-size: 20px;
            font-weight: 600;
            color: var(--pb-accent-dark);
        }

/* ── ดูรูปหลักฐานขนาดเต็ม ── */
.PB-Zoom[b-b1i4q3eoue] {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, .78);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    cursor: zoom-out;
}

    .PB-Zoom img[b-b1i4q3eoue] {
        max-width: 92vw;
        max-height: 84vh;
        border-radius: 8px;
    }

.PB-ZoomClose[b-b1i4q3eoue] {
    color: #fff;
    font-size: 14px;
}

/* ── มือถือ ── */
@media (max-width: 639px) {
    .PB-Head[b-b1i4q3eoue],
    .PB-Body[b-b1i4q3eoue],
    .PB-Actions[b-b1i4q3eoue] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .PB-Steps[b-b1i4q3eoue] {
        flex-direction: column;
        padding: 14px 16px 0;
    }

    .PB-RowLabel[b-b1i4q3eoue] {
        width: 108px;
    }

    .PB-Btn[b-b1i4q3eoue] {
        flex: 1 1 auto;
    }
}

/* ── สถานะโหลด (คงเดิม) ── */
.LoadingDiv[b-b1i4q3eoue] {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}

.StatusLoadingDiv[b-b1i4q3eoue] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: grid;
    place-items: center;
}

    .StatusLoadingDiv .Img[b-b1i4q3eoue] {
        width: 50px;
        height: 50px;
    }
/* /Components/Pages/FrontEnd/Purchase/PurchaseStatus.razor.rz.scp.css */
.MainHeaderDiv[b-gngys9l0eb] {
    position: sticky;
    top: 0px;
    z-index: 2;
    margin-top: 12px;
}

.HeaderTitleDiv[b-gngys9l0eb] {
    position: relative;
    height: 53px;
    background: white;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 14px;
    display: flex;
}

    .HeaderTitleDiv .Per[b-gngys9l0eb] {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 175px;
        font-size: 16px;
        cursor: pointer;
    }

        .HeaderTitleDiv .Per:hover[b-gngys9l0eb] {
            color: #ee4d2d;
        }

        .HeaderTitleDiv .Per .Active[b-gngys9l0eb] {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 3px;
        }

.BillPerMain[b-gngys9l0eb] {
    background: white;
    margin: 12px 0;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.05);
}

    .BillPerMain .BillHeader[b-gngys9l0eb] {
        display: flex;
        justify-content: space-between;
        padding: 24px 24px 12px;
    }

    .BillPerMain .BillBody[b-gngys9l0eb] {
        padding: 0px 24px 0px 24px;
    }

        .BillPerMain .BillBody .PerRow[b-gngys9l0eb] {
            display: flex;
            width: 100%;
            padding-top: 12px;
            padding-bottom: 12px;
            border-top: 1px solid rgba(0,0,0,.09);
            cursor: pointer;
        }

            .BillPerMain .BillBody .PerRow .ImgDiv[b-gngys9l0eb] {
                width: 82px;
                height: 82px;
                min-width: 82px;
                height: 82px;
                margin-right: 15px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .BillPerMain .BillBody .PerRow .ImgDiv img[b-gngys9l0eb] {
                    max-height: 100%;
                    max-width: 100%;
                }

            .BillPerMain .BillBody .PerRow .NameZone[b-gngys9l0eb] {
                white-space: nowrap;
                font-size: 16px;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 750px;
            }

            .BillPerMain .BillBody .PerRow .UnitZone[b-gngys9l0eb] {
                color: rgba(0,0,0,.54);
                font-size: 14px;
            }

            .BillPerMain .BillBody .PerRow .QtyZone[b-gngys9l0eb] {
                font-size: 14px;
            }

            .BillPerMain .BillBody .PerRow .PriceZone[b-gngys9l0eb] {
                color: #ee4d2d;
            }

    .BillPerMain .BillFooter[b-gngys9l0eb] {
        padding: 0px 24px 12px;
        border-top: 1px solid rgba(0,0,0,.09);
    }

        .BillPerMain .BillFooter .BillSumZone[b-gngys9l0eb] {
            color: #ee4d2d;
            font-size: 24px;
            padding: 24px 0px;
            display: flex;
            align-items: center;
            justify-content: end;
        }

            .BillPerMain .BillFooter .BillSumZone label[b-gngys9l0eb] {
                color: black;
                font-size: 14px;
                margin-right: 10px;
                padding-top: 5px;
            }

        .BillPerMain .BillFooter .BillButtonZone[b-gngys9l0eb] {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 12px;
        }

            .BillPerMain .BillFooter .BillButtonZone .AdviceZone[b-gngys9l0eb] {
                font-size: 12px;
                color: rgba(0,0,0,.54);
            }

            .BillPerMain .BillFooter .BillButtonZone .ButtonZone[b-gngys9l0eb] {
                display: flex;
            }

                .BillPerMain .BillFooter .BillButtonZone .ButtonZone .ButtonSize[b-gngys9l0eb] {
                    padding: 8px 20px;
                    border: 1px solid rgba(0,0,0,.09);
                    font-size: 14px;
                    cursor: pointer;
                }

.ShowingAskYesNo[b-gngys9l0eb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
}

    .ShowingAskYesNo .DivMain[b-gngys9l0eb] {
        background: white;
        border-radius: 5px;
        padding: 24px 24px;
        user-select: none;
    }

        .ShowingAskYesNo .DivMain .Title[b-gngys9l0eb] {
        }

        .ShowingAskYesNo .DivMain .ButtonZone[b-gngys9l0eb] {
            display: flex;
            justify-content: center;
            margin-top: 15px;
        }

            .ShowingAskYesNo .DivMain .ButtonZone .Confirm[b-gngys9l0eb] {
                border-radius: 3px;
                width: 100px;
                height: 30px;
                display: grid;
                place-items: center;
                cursor: pointer;
            }

            .ShowingAskYesNo .DivMain .ButtonZone .Cancel[b-gngys9l0eb] {
                margin-left: 15px;
                border: 1px solid rgb(196, 196, 196);
                border-radius: 3px;
                width: 100px;
                height: 30px;
                display: grid;
                place-items: center;
                cursor: pointer;
            }
/* /Components/Pages/FrontEnd/ResetPassword/ResetPassword.razor.rz.scp.css */
.Main[b-8be2kacjch] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
}

.InputBar[b-8be2kacjch] {
    width: 300px;
    height: 40px;
    font-size: 15px;
    padding-left: 10px;
}

.Message[b-8be2kacjch] {
    height: 15px;
    width: 100%;
    color: #ff424f;
    font-size: 12px;
}

.Button[b-8be2kacjch] {
    margin-top: 10px;
    margin-bottom: 50px;
    width: 300px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.2s;
}

    .Button:hover[b-8be2kacjch] {
        filter: brightness(1.2);
    }

.DivNotFoundLink[b-8be2kacjch] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0px;
    font-size: 14px;
    background: white;
}

    .DivNotFoundLink[b-8be2kacjch]::before {
        width: 20px;
        height: 20px;
        font-family: GoogleFont;
        content: "\e897";
        color: #ffc300;
        font-size: 28px;
        font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: 25px;
    }

.DivNotFoundLinkFalse[b-8be2kacjch] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0px;
    font-size: 14px;
    background: white;
}

    .DivNotFoundLinkFalse[b-8be2kacjch]::before {
        width: 20px;
        height: 20px;
        font-family: GoogleFont;
        content: "\e158";
        color: #ff0000;
        font-size: 28px;
        font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 200, 'opsz' 20;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: 25px;
    }


/* /Components/Pages/GoogleLoginPage/GoogleLoginPage.razor.rz.scp.css */
/* /Components/Pages/Index.razor.rz.scp.css */
.MainBody[b-kfmcwf94vr] {
    position: relative;
    height: fit-content;
    /* [2026-10] เดิม overflow-x:hidden — ตัดเนื้อหาตัวออกแบบแบบ "เต็มจอ" ทิ้ง ; ย้ายไปตัดที่ .page (MainLayout, overflow-x:clip) แทน
       (สไลด์แบนเนอร์ / การ์ดโปร / mm-features มี overflow:hidden ของตัวเองอยู่แล้ว) */
    overflow-x: visible;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

/* ============ HERO ============ */
.mm-hero-wrap[b-kfmcwf94vr] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============ TRUST BAR ============ */
.mm-trustbar[b-kfmcwf94vr] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    background: white;
    border-top: 1px solid #e5e9ef;
    border-bottom: 1px solid #e5e9ef;
    margin-top: 20px;
}

.mm-trust-card[b-kfmcwf94vr] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 32px;
    flex: 1 1 200px;
    max-width: 280px;
    border-right: 1px solid #f0f2f5;
    box-sizing: border-box;
    min-width: 0;
}

.mm-trust-card:last-child[b-kfmcwf94vr] {
    border-right: none;
}

.mm-trust-icon[b-kfmcwf94vr] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.mm-trust-icon svg[b-kfmcwf94vr] {
    width: 20px;
    height: 20px;
}

.mm-ti-1[b-kfmcwf94vr] { background: #eff6ff; color: #3b82f6; }
.mm-ti-2[b-kfmcwf94vr] { background: #f0fdf4; color: #22c55e; }
.mm-ti-3[b-kfmcwf94vr] { background: #fff7ed; color: #f97316; }
.mm-ti-4[b-kfmcwf94vr] { background: #fdf4ff; color: #a855f7; }

.mm-trust-title[b-kfmcwf94vr] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.mm-trust-sub[b-kfmcwf94vr] {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

/* ============ SECTION ============ */
.mm-section[b-kfmcwf94vr] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 24px;
}

.mm-section-head[b-kfmcwf94vr] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 24px;
    flex-wrap: wrap;
}

.mm-label-tag[b-kfmcwf94vr] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #3b82f6;
    margin-bottom: 8px;
}

.mm-section-title[b-kfmcwf94vr] {
    font-family: 'Manrope', 'IBM Plex Sans Thai', sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #293649;
    line-height: 1.2;
}

.mm-section-sub[b-kfmcwf94vr] {
    font-size: 14px;
    color: #6b7280;
    margin-top: 6px;
}

.mm-view-all[b-kfmcwf94vr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #3b82f6;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 8px;
    transition: all .2s;
    flex-shrink: 0;
}

.mm-view-all svg[b-kfmcwf94vr] {
    width: 14px;
    height: 14px;
    transition: transform .2s;
}

.mm-view-all:hover[b-kfmcwf94vr] {
    background: #eff6ff;
}

.mm-view-all:hover svg[b-kfmcwf94vr] {
    transform: translateX(3px);
}

/* ============ CATEGORY GRID ============ */
.mm-cat-grid[b-kfmcwf94vr] {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 14px;
}

.mm-cat-card[b-kfmcwf94vr] {
    background: white;
    border: 1px solid #e5e9ef;
    border-radius: 10px;
    padding: 20px 12px;
    text-align: center;
    text-decoration: none;
    transition: all .25s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.mm-cat-card[b-kfmcwf94vr]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, #eff6ff 100%);
    opacity: 0;
    transition: opacity .25s;
}

.mm-cat-card:hover[b-kfmcwf94vr] {
    border-color: #3b82f6;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px -2px rgba(41,54,73,.08), 0 8px 24px -8px rgba(41,54,73,.10);
}

.mm-cat-card:hover[b-kfmcwf94vr]::before {
    opacity: 1;
}

.mm-cat-icon[b-kfmcwf94vr] {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: #eff6ff;
    display: grid;
    place-items: center;
    color: #3b82f6;
    position: relative;
    z-index: 1;
    transition: all .25s;
    flex-shrink: 0;
}

.mm-cat-card:hover .mm-cat-icon[b-kfmcwf94vr] {
    background: #3b82f6;
    color: white;
    transform: scale(1.05);
}

.mm-cat-icon svg[b-kfmcwf94vr] {
    width: 26px;
    height: 26px;
}

.mm-cat-name[b-kfmcwf94vr] {
    font-size: 12px;
    font-weight: 600;
    color: #293649;
    text-align: center;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

/* ============ PROMO BANNERS ============ */
.mm-promo-row[b-kfmcwf94vr] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
}

.mm-promo-card[b-kfmcwf94vr] {
    border-radius: 14px;
    padding: 36px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
}

.mm-promo-1[b-kfmcwf94vr] {
    background: linear-gradient(135deg, #293649 0%, #1e3a8a 100%);
    color: white;
}

.mm-promo-1[b-kfmcwf94vr]::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,.3) 0%, transparent 70%);
    pointer-events: none;
}

.mm-promo-2[b-kfmcwf94vr] {
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
    color: #7c2d12;
}

.mm-promo-tag[b-kfmcwf94vr] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .8;
    margin-bottom: 10px;
}

.mm-promo-h[b-kfmcwf94vr] {
    font-family: 'Manrope', 'IBM Plex Sans Thai', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-width: 80%;
    position: relative;
    z-index: 1;
}

.mm-promo-big[b-kfmcwf94vr] {
    font-size: 38px;
    display: block;
    margin-top: 4px;
}

.mm-promo-link[b-kfmcwf94vr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 600;
    position: relative;
    z-index: 1;
    text-decoration: none;
    color: inherit;
    transition: gap .2s;
}

.mm-promo-link:hover[b-kfmcwf94vr] {
    gap: 10px;
}

.mm-promo-link svg[b-kfmcwf94vr] {
    width: 14px;
    height: 14px;
    transition: transform .2s;
}

.mm-promo-link:hover svg[b-kfmcwf94vr] {
    transform: translateX(3px);
}

/* ============ PRODUCT GRID ============ */
.mm-prod-grid[b-kfmcwf94vr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding-bottom: 40px;
}

.mm-prod-card[b-kfmcwf94vr] {
    background: white;
    border: 1.5px solid #e5e9ef;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: all .25s;
}

.mm-prod-card:hover[b-kfmcwf94vr] {
    border-color: #3b82f6;
    transform: translateY(-3px);
    box-shadow: 0 10px 28px -6px rgba(59,130,246,.18);
}

.mm-prod-img[b-kfmcwf94vr] {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mm-prod-img img[b-kfmcwf94vr] {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform .3s;
}

.mm-prod-card:hover .mm-prod-img img[b-kfmcwf94vr] {
    transform: scale(1.04);
}

.mm-prod-tag[b-kfmcwf94vr] {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    pointer-events: none;
    z-index: 1;
}

.mm-tag-best[b-kfmcwf94vr] { background: #293649; color: white; }
.mm-tag-new[b-kfmcwf94vr]  { background: #10b981; color: white; }
.mm-tag-sale[b-kfmcwf94vr] { background: #ef4444; color: white; }

.mm-prod-fav[b-kfmcwf94vr] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.6);
    color: #94a3b8;
    transition: all .2s;
    z-index: 1;
}

.mm-prod-card:hover .mm-prod-fav[b-kfmcwf94vr] {
    background: #fff5f5;
    border-color: #fca5a5;
    color: #ef4444;
}

.mm-prod-fav svg[b-kfmcwf94vr] {
    width: 16px;
    height: 16px;
}

.mm-prod-info[b-kfmcwf94vr] {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
}

.mm-prod-cat[b-kfmcwf94vr] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #3b82f6;
}

.mm-prod-name[b-kfmcwf94vr] {
    font-size: 14px;
    font-weight: 600;
    color: #293649;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
    flex: 1;
}

.mm-prod-meta[b-kfmcwf94vr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #6b7280;
}

.mm-star[b-kfmcwf94vr] {
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
    font-size: 11px;
}

.mm-star svg[b-kfmcwf94vr] {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.mm-meta-sep[b-kfmcwf94vr] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #b1b5bb;
    flex-shrink: 0;
}

.mm-prod-foot[b-kfmcwf94vr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid #f0f2f5;
    margin-top: 2px;
}

.mm-prod-price[b-kfmcwf94vr] {
    font-family: 'Manrope', 'IBM Plex Sans Thai', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #293649;
}

.mm-out-stock[b-kfmcwf94vr] {
    font-family: inherit;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
}

.mm-prod-add[b-kfmcwf94vr] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #293649;
    color: white;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background .2s;
}

.mm-prod-card:hover .mm-prod-add[b-kfmcwf94vr] {
    background: #3b82f6;
}

.mm-prod-add svg[b-kfmcwf94vr] {
    width: 16px;
    height: 16px;
    color: white;
}

/* ============ FEATURES SECTION ============ */
.mm-features[b-kfmcwf94vr] {
    max-width: 1280px;
    margin: 60px auto;
    padding: 0 24px;
}

.mm-features-inner[b-kfmcwf94vr] {
    background: white;
    border-radius: 20px;
    padding: 48px;
    border: 1px solid #e5e9ef;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.mm-features-inner[b-kfmcwf94vr]::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, #eff6ff 0%, transparent 70%);
    pointer-events: none;
}

.mm-features-content[b-kfmcwf94vr] {
    position: relative;
    z-index: 1;
}

.mm-features-h2[b-kfmcwf94vr] {
    font-family: 'Manrope', 'IBM Plex Sans Thai', sans-serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: #293649;
    margin-bottom: 16px;
    margin-top: 14px;
}

.mm-features-p[b-kfmcwf94vr] {
    font-size: 15px;
    color: #6b7280;
    margin-bottom: 28px;
    max-width: 480px;
    line-height: 1.65;
}

.mm-feat-list[b-kfmcwf94vr] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mm-feat-item[b-kfmcwf94vr] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.mm-feat-check[b-kfmcwf94vr] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #10b981;
    color: white;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.mm-feat-check svg[b-kfmcwf94vr] {
    width: 14px;
    height: 14px;
}

.mm-feat-text strong[b-kfmcwf94vr] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #293649;
    margin-bottom: 2px;
}

.mm-feat-text span[b-kfmcwf94vr] {
    font-size: 13px;
    color: #6b7280;
}

/* Dashboard mock */
.mm-features-visual[b-kfmcwf94vr] {
    position: relative;
    z-index: 1;
}

.mm-dashboard-mock[b-kfmcwf94vr] {
    background: linear-gradient(135deg, #293649 0%, #1e3a8a 100%);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 12px 32px -8px rgba(41,54,73,.14), 0 24px 60px -16px rgba(59,130,246,.18);
    color: white;
}

.mm-dash-head[b-kfmcwf94vr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.mm-dash-label[b-kfmcwf94vr] {
    font-size: 13px;
    opacity: .7;
}

.mm-dash-h[b-kfmcwf94vr] {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 22px;
    margin-top: 2px;
}

.mm-dash-pill[b-kfmcwf94vr] {
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(16,185,129,.15);
    color: #86efac;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(16,185,129,.25);
    white-space: nowrap;
}

.mm-dash-grid[b-kfmcwf94vr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

.mm-dash-stat[b-kfmcwf94vr] {
    background: rgba(255,255,255,.06);
    border-radius: 10px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.08);
}

.mm-ds-l[b-kfmcwf94vr] {
    font-size: 11px;
    opacity: .65;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.mm-ds-v[b-kfmcwf94vr] {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 24px;
    margin-top: 4px;
}

.mm-ds-t[b-kfmcwf94vr] {
    font-size: 11px;
    color: #86efac;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.mm-ds-warn[b-kfmcwf94vr] {
    color: #fbbf24;
}

.mm-dash-chart[b-kfmcwf94vr] {
    height: 90px;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    padding: 12px;
    background: rgba(255,255,255,.04);
    border-radius: 10px;
}

.mm-bar[b-kfmcwf94vr] {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
}

/* ============ TESTIMONIALS ============ */
.mm-testi[b-kfmcwf94vr] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 24px;
}

.mm-testi-grid[b-kfmcwf94vr] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 28px;
}

.mm-testi-card[b-kfmcwf94vr] {
    background: white;
    border: 1px solid #e5e9ef;
    border-radius: 14px;
    padding: 28px;
    position: relative;
    transition: all .2s;
}

.mm-testi-card:hover[b-kfmcwf94vr] {
    box-shadow: 0 4px 12px -2px rgba(41,54,73,.08), 0 8px 24px -8px rgba(41,54,73,.10);
    border-color: #3b82f6;
}

.mm-testi-quote[b-kfmcwf94vr] {
    position: absolute;
    top: 20px;
    right: 24px;
    font-family: Georgia, serif;
    font-size: 64px;
    line-height: .7;
    color: #eff6ff;
    font-weight: 700;
    pointer-events: none;
}

.mm-testi-stars[b-kfmcwf94vr] {
    display: flex;
    gap: 2px;
    color: #f59e0b;
    margin-bottom: 14px;
}

.mm-testi-stars svg[b-kfmcwf94vr] {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.mm-testi-text[b-kfmcwf94vr] {
    font-size: 14px;
    line-height: 1.65;
    color: #293649;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.mm-testi-author[b-kfmcwf94vr] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.mm-testi-avatar[b-kfmcwf94vr] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #293649);
    color: white;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.mm-testi-name[b-kfmcwf94vr] {
    font-size: 14px;
    font-weight: 600;
    color: #293649;
}

.mm-testi-role[b-kfmcwf94vr] {
    font-size: 12px;
    color: #6b7280;
}

/* ============ CTA ============ */
.mm-cta-section[b-kfmcwf94vr] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.mm-cta-box[b-kfmcwf94vr] {
    background: linear-gradient(135deg, #293649 0%, #1e3a8a 60%, #3b82f6 100%);
    border-radius: 24px;
    padding: 64px 48px;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 32px -8px rgba(41,54,73,.14), 0 24px 60px -16px rgba(59,130,246,.18);
}

.mm-cta-box[b-kfmcwf94vr]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(59,139,247,.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(16,185,129,.2) 0%, transparent 50%);
    pointer-events: none;
}

.mm-cta-content[b-kfmcwf94vr] {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
}

.mm-cta-tag[b-kfmcwf94vr] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #93c5fd;
    margin-bottom: 14px;
}

.mm-cta-box h2[b-kfmcwf94vr] {
    font-family: 'Manrope', 'IBM Plex Sans Thai', sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin-bottom: 16px;
    color: white;
}

.mm-cta-box p[b-kfmcwf94vr] {
    font-size: 16px;
    color: rgba(255,255,255,.78);
    margin-bottom: 28px;
}

.mm-cta-actions[b-kfmcwf94vr] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.mm-btn[b-kfmcwf94vr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 11px;
    font-weight: 600;
    font-size: 15px;
    transition: all .2s;
    text-decoration: none;
}

.mm-btn svg[b-kfmcwf94vr] {
    width: 16px;
    height: 16px;
}

.mm-btn-primary[b-kfmcwf94vr] {
    background: white;
    color: #293649;
}

.mm-btn-primary:hover[b-kfmcwf94vr] {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -8px rgba(0,0,0,.3);
}

.mm-btn-ghost[b-kfmcwf94vr] {
    background: rgba(255,255,255,.08);
    color: white;
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
}

.mm-btn-ghost:hover[b-kfmcwf94vr] {
    background: rgba(255,255,255,.14);
}

/* ============ RESPONSIVE ============ */

/* 1100px — tablet landscape */
@media (max-width: 1100px) {
    .mm-cat-grid[b-kfmcwf94vr] {
        grid-template-columns: repeat(6, 1fr);
    }
    .mm-prod-grid[b-kfmcwf94vr] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 880px — tablet */
@media (max-width: 880px) {
    /* trustbar: switch to grid — avoids padding overflow bug with flex-basis % */
    .mm-trustbar[b-kfmcwf94vr] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .mm-trust-card[b-kfmcwf94vr] {
        max-width: none;
        border-right: none;
        border-bottom: 1px solid #f0f2f5;
        padding: 16px 18px;
    }
    .mm-trust-card:nth-child(2n)[b-kfmcwf94vr] {
        border-left: 1px solid #f0f2f5;
    }
    .mm-trust-card:last-child[b-kfmcwf94vr],
    .mm-trust-card:nth-last-child(2):nth-child(2n+1)[b-kfmcwf94vr] {
        border-bottom: none;
    }
    .mm-promo-row[b-kfmcwf94vr] {
        grid-template-columns: 1fr;
    }
    .mm-features-inner[b-kfmcwf94vr] {
        grid-template-columns: 1fr;
        padding: 32px;
    }
    .mm-features-h2[b-kfmcwf94vr] {
        font-size: 28px;
    }
    .mm-testi-grid[b-kfmcwf94vr] {
        grid-template-columns: 1fr;
    }
    .mm-cta-box[b-kfmcwf94vr] {
        padding: 48px 32px;
    }
}

/* 720px — mobile */
@media (max-width: 720px) {
    .mm-hero-wrap[b-kfmcwf94vr] {
        padding: 0 18px;
    }
    .mm-section[b-kfmcwf94vr] {
        padding: 32px 18px;
    }
    .mm-section-title[b-kfmcwf94vr] {
        font-size: 22px;
    }
    .mm-promo-row[b-kfmcwf94vr] {
        padding: 0 18px;
    }
    .mm-promo-card[b-kfmcwf94vr] {
        padding: 28px 24px;
    }
    .mm-promo-h[b-kfmcwf94vr] {
        font-size: 20px;
    }
    .mm-promo-big[b-kfmcwf94vr] {
        font-size: 30px;
    }
    .mm-cat-grid[b-kfmcwf94vr] {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    .mm-cat-card[b-kfmcwf94vr] {
        padding: 14px 8px;
    }
    .mm-prod-grid[b-kfmcwf94vr] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .mm-features[b-kfmcwf94vr] {
        margin: 32px auto;
        padding: 0 18px;
    }
    .mm-features-inner[b-kfmcwf94vr] {
        padding: 24px;
    }
    .mm-testi[b-kfmcwf94vr] {
        padding: 32px 18px;
    }
    .mm-cta-section[b-kfmcwf94vr] {
        padding: 16px 18px 48px;
    }
    .mm-cta-box[b-kfmcwf94vr] {
        padding: 40px 24px;
    }
}

/* 480px — small mobile */
@media (max-width: 480px) {
    .mm-trustbar[b-kfmcwf94vr] {
        grid-template-columns: 1fr;
    }
    .mm-trust-card[b-kfmcwf94vr] {
        border-left: none !important;
        border-bottom: 1px solid #f0f2f5;
    }
    .mm-trust-card:last-child[b-kfmcwf94vr] {
        border-bottom: none;
    }
    /* legacy flex override no longer needed — kept as fallback */
    .mm-trust-card[b-kfmcwf94vr] {
        flex: 1 1 100%;
    }
    .mm-cat-grid[b-kfmcwf94vr] {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .mm-cat-card[b-kfmcwf94vr] {
        padding: 14px 8px;
    }
    .mm-prod-grid[b-kfmcwf94vr] {
        grid-template-columns: repeat(2, 1fr);
    }
    .mm-section[b-kfmcwf94vr] {
        padding: 24px 18px;
    }
    .mm-features-h2[b-kfmcwf94vr] {
        font-size: 24px;
    }
    .mm-cta-box[b-kfmcwf94vr] {
        padding: 40px 20px;
    }
}
/* /Components/Pages/Infomation/Componant/ProductImageList.razor.rz.scp.css */
/* =====================================================
   IMAGE LIGHTBOX  ·  modern theme (matches example.html)
   palette: navy #293649 · blue #3b82f6 · pale #eff6ff
   ===================================================== */

.mm-lb-root[b-uf6857nnnz] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'IBM Plex Sans Thai', 'Manrope', -apple-system, sans-serif;
    color: #293649;
    animation: mm-lb-fade-b-uf6857nnnz .2s ease;
}

@keyframes mm-lb-fade-b-uf6857nnnz {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes mm-lb-pop-b-uf6857nnnz {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mm-lb-backdrop[b-uf6857nnnz] {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: zoom-out;
}

/* ============ MAIN CARD ============ */
.mm-lb-card[b-uf6857nnnz] {
    position: relative;
    width: 100%;
    max-width: 1180px;
    height: 100%;
    max-height: 880px;
    background: white;
    border-radius: 18px;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,.55), 0 12px 32px -8px rgba(41,54,73,.4);
    display: grid;
    grid-template-columns: 1fr 360px;
    overflow: hidden;
    animation: mm-lb-pop-b-uf6857nnnz .22s cubic-bezier(.2,.9,.3,1);
}

/* ============ CLOSE BUTTON ============ */
.mm-lb-close[b-uf6857nnnz] {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid #e5e9ef;
    color: #293649;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all .18s;
}

    .mm-lb-close:hover[b-uf6857nnnz] {
        background: #ef4444;
        border-color: #ef4444;
        color: white;
        transform: scale(1.05) rotate(90deg);
        box-shadow: 0 6px 16px -4px rgba(239,68,68,.5);
    }

    .mm-lb-close svg[b-uf6857nnnz] {
        width: 16px;
        height: 16px;
    }

/* ============ STAGE (main image) ============ */
.mm-lb-stage[b-uf6857nnnz] {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

    .mm-lb-stage[b-uf6857nnnz]::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 15% 15%, rgba(59,130,246,.08) 0%, transparent 50%),
            radial-gradient(circle at 85% 85%, rgba(41,54,73,.06) 0%, transparent 50%);
        pointer-events: none;
    }

.mm-lb-image-wrap[b-uf6857nnnz] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.mm-lb-image[b-uf6857nnnz] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(15,23,42,.18));
    animation: mm-lb-img-in-b-uf6857nnnz .25s ease;
}

@keyframes mm-lb-img-in-b-uf6857nnnz {
    from {
        opacity: 0;
        transform: scale(.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============ ARROWS ============ */
.mm-lb-arrow[b-uf6857nnnz] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid #e5e9ef;
    color: #293649;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all .2s;
    z-index: 5;
    box-shadow: 0 6px 16px -4px rgba(15,23,42,.18);
}

    .mm-lb-arrow:hover[b-uf6857nnnz] {
        background: #3b82f6;
        border-color: #3b82f6;
        color: white;
        box-shadow: 0 10px 22px -4px rgba(59,130,246,.45);
        transform: translateY(-50%) scale(1.06);
    }

    .mm-lb-arrow svg[b-uf6857nnnz] {
        width: 18px;
        height: 18px;
    }

.mm-lb-arrow-prev[b-uf6857nnnz] {
    left: 16px;
}

.mm-lb-arrow-next[b-uf6857nnnz] {
    right: 16px;
}

/* ============ COUNTER ============ */
.mm-lb-counter[b-uf6857nnnz] {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(41,54,73,.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: white;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 5;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.mm-lb-counter-cur[b-uf6857nnnz] {
    color: #93c5fd;
    font-weight: 700;
}

.mm-lb-counter-sep[b-uf6857nnnz] {
    opacity: .55;
}

.mm-lb-counter-total[b-uf6857nnnz] {
    opacity: .85;
}

/* ============ SIDE PANEL ============ */
.mm-lb-side[b-uf6857nnnz] {
    background: white;
    border-left: 1px solid #f0f2f5;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.mm-lb-side-head[b-uf6857nnnz] {
    padding: 22px 22px 16px 22px;
    border-bottom: 1px solid #f0f2f5;
}

.mm-lb-tag[b-uf6857nnnz] {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #3b82f6;
    margin-bottom: 8px;
}

.mm-lb-name[b-uf6857nnnz] {
    font-family: 'Manrope', 'IBM Plex Sans Thai', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #293649;
    line-height: 1.4;
    letter-spacing: -.015em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    margin-bottom: 10px;
}

.mm-lb-meta[b-uf6857nnnz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6b7280;
    background: #f7f9fc;
    border: 1px solid #e5e9ef;
    border-radius: 999px;
    padding: 4px 12px;
}

    .mm-lb-meta svg[b-uf6857nnnz] {
        width: 13px;
        height: 13px;
        color: #3b82f6;
    }

/* ============ THUMBNAILS ============ */
.mm-lb-thumb-scroll[b-uf6857nnnz] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    min-height: 0;
}

    .mm-lb-thumb-scroll[b-uf6857nnnz]::-webkit-scrollbar {
        width: 6px;
    }

    .mm-lb-thumb-scroll[b-uf6857nnnz]::-webkit-scrollbar-track {
        background: transparent;
    }

    .mm-lb-thumb-scroll[b-uf6857nnnz]::-webkit-scrollbar-thumb {
        background: #e5e9ef;
        border-radius: 3px;
    }

        .mm-lb-thumb-scroll[b-uf6857nnnz]::-webkit-scrollbar-thumb:hover {
            background: #b1b5bb;
        }

.mm-lb-thumb-grid[b-uf6857nnnz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.mm-lb-thumb[b-uf6857nnnz] {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background: #f7f9fc;
    border: 2px solid #e5e9ef;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: all .18s;
}

    .mm-lb-thumb img[b-uf6857nnnz] {
        max-width: 86%;
        max-height: 86%;
        object-fit: contain;
        transition: transform .25s;
    }

    .mm-lb-thumb:hover[b-uf6857nnnz] {
        border-color: #93c5fd;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px -4px rgba(59,130,246,.18);
    }

        .mm-lb-thumb:hover img[b-uf6857nnnz] {
            transform: scale(1.04);
        }

    .mm-lb-thumb.active[b-uf6857nnnz] {
        border-color: #3b82f6;
        background: #eff6ff;
        box-shadow: 0 0 0 3px rgba(59,130,246,.18);
    }

.mm-lb-thumb-tick[b-uf6857nnnz] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #3b82f6;
    color: white;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 6px rgba(59,130,246,.45);
}

    .mm-lb-thumb-tick svg[b-uf6857nnnz] {
        width: 12px;
        height: 12px;
    }

/* ============ HINT BAR ============ */
.mm-lb-hint[b-uf6857nnnz] {
    padding: 12px 22px;
    border-top: 1px solid #f0f2f5;
    background: #fafbfd;
    font-size: 11px;
    color: #6b7280;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

    .mm-lb-hint kbd[b-uf6857nnnz] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 20px;
        padding: 0 6px;
        font-family: 'JetBrains Mono', 'Manrope', monospace;
        font-size: 10px;
        font-weight: 600;
        background: white;
        border: 1px solid #e5e9ef;
        border-bottom-width: 2px;
        border-radius: 5px;
        color: #293649;
    }

.mm-lb-hint-sep[b-uf6857nnnz] {
    color: #d8dde5;
    margin: 0 4px;
}

/* ============ RESPONSIVE ============ */

/* tablet */
@media (max-width: 1024px) {
    .mm-lb-card[b-uf6857nnnz] {
        grid-template-columns: 1fr 300px;
        max-width: 980px;
    }

    .mm-lb-stage[b-uf6857nnnz] {
        padding: 22px;
    }
}

/* tablet portrait — stack: image on top, panel below */
@media (max-width: 820px) {
    .mm-lb-root[b-uf6857nnnz] {
        padding: 14px;
    }

    .mm-lb-card[b-uf6857nnnz] {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        max-height: 96vh;
    }

    .mm-lb-side[b-uf6857nnnz] {
        border-left: none;
        border-top: 1px solid #f0f2f5;
        max-height: 38vh;
    }

    .mm-lb-side-head[b-uf6857nnnz] {
        padding: 14px 18px 12px 18px;
    }

    .mm-lb-name[b-uf6857nnnz] {
        font-size: 15px;
        -webkit-line-clamp: 1;
    }

    /* thumbnails as horizontal strip on small screens */
    .mm-lb-thumb-scroll[b-uf6857nnnz] {
        padding: 12px 18px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .mm-lb-thumb-grid[b-uf6857nnnz] {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78px;
        gap: 8px;
    }

    .mm-lb-thumb[b-uf6857nnnz] {
        width: 78px;
        height: 78px;
        aspect-ratio: 1 / 1;
    }

    .mm-lb-arrow[b-uf6857nnnz] {
        width: 42px;
        height: 42px;
    }

        .mm-lb-arrow svg[b-uf6857nnnz] {
            width: 16px;
            height: 16px;
        }

    .mm-lb-hint[b-uf6857nnnz] {
        display: none;
    }
}

/* mobile */
@media (max-width: 560px) {
    .mm-lb-root[b-uf6857nnnz] {
        padding: 8px;
    }

    .mm-lb-card[b-uf6857nnnz] {
        border-radius: 14px;
        max-height: 100vh;
        height: 100%;
    }

    .mm-lb-stage[b-uf6857nnnz] {
        padding: 14px;
    }

    .mm-lb-close[b-uf6857nnnz] {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
    }

    .mm-lb-arrow[b-uf6857nnnz] {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .mm-lb-arrow-prev[b-uf6857nnnz] {
        left: 8px;
    }

    .mm-lb-arrow-next[b-uf6857nnnz] {
        right: 8px;
    }

    .mm-lb-counter[b-uf6857nnnz] {
        bottom: 10px;
        font-size: 12px;
        padding: 5px 12px;
    }

    .mm-lb-side[b-uf6857nnnz] {
        max-height: 34vh;
    }

    .mm-lb-side-head[b-uf6857nnnz] {
        padding: 12px 14px 10px 14px;
    }

    .mm-lb-name[b-uf6857nnnz] {
        font-size: 14px;
    }

    .mm-lb-tag[b-uf6857nnnz] {
        font-size: 9px;
        margin-bottom: 4px;
    }

    .mm-lb-meta[b-uf6857nnnz] {
        font-size: 11px;
        padding: 3px 10px;
    }

    .mm-lb-thumb-scroll[b-uf6857nnnz] {
        padding: 10px 14px;
    }

    .mm-lb-thumb-grid[b-uf6857nnnz] {
        grid-auto-columns: 64px;
        gap: 6px;
    }

    .mm-lb-thumb[b-uf6857nnnz] {
        width: 64px;
        height: 64px;
        border-width: 1.5px;
    }

    .mm-lb-thumb-tick[b-uf6857nnnz] {
        width: 18px;
        height: 18px;
        top: 4px;
        right: 4px;
    }

        .mm-lb-thumb-tick svg[b-uf6857nnnz] {
            width: 10px;
            height: 10px;
        }
}
/* /Components/PrintForm/PickingA4/PickingA4.razor.rz.scp.css */

/* ═══ [2026-09] popup ตัวเลือกการพิมพ์ใบหยิบสินค้า (PPO-*) — ธีม teal เดียวกับหน้าบิล ═══ */
.PPO-Overlay[b-xecn907w8c] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(2px);
    animation: PPO-Fade-b-xecn907w8c .15s ease;
}

.PPO-Card[b-xecn907w8c] {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e6eaf1;
    box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .35);
    overflow: hidden;
    font-family: 'IBM Plex Sans Thai', 'Mine_ThaiFont', sans-serif;
    animation: PPO-Pop-b-xecn907w8c .18s ease;
}

.PPO-Head[b-xecn907w8c] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #eef1f5;
}

.PPO-HeadIcon[b-xecn907w8c] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    background: #E7F5F4;
    border: 1px solid #B9E0DC;
}

.PPO-HeadText[b-xecn907w8c] {
    flex: 1;
    min-width: 0;
}

.PPO-Title[b-xecn907w8c] {
    font-size: 16px;
    font-weight: 700;
    color: #1f2328;
    line-height: 1.35;
}

.PPO-Sub[b-xecn907w8c] {
    margin-top: 2px;
    font-size: 12.5px;
    color: #79838d;
}

.PPO-Close[b-xecn907w8c] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #98a2ad;
    font-size: 14px;
    cursor: pointer;
}

    .PPO-Close:hover[b-xecn907w8c] {
        background: #f3f5f7;
        color: #1f2328;
    }

.PPO-Options[b-xecn907w8c] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
}

.PPO-Option[b-xecn907w8c] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1.5px solid #e6eaf1;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background .15s;
}

    .PPO-Option:hover[b-xecn907w8c] {
        border-color: #B9E0DC;
    }

    .PPO-Option:has(input:checked)[b-xecn907w8c] {
        border-color: #0B7A75;
        background: #F2FAF9;
    }

    .PPO-Option input[b-xecn907w8c] {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: #0B7A75;
        cursor: pointer;
    }

.PPO-OptIcon[b-xecn907w8c] {
    flex-shrink: 0;
    font-size: 18px;
}

.PPO-OptText[b-xecn907w8c] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.PPO-OptName[b-xecn907w8c] {
    font-size: 14px;
    font-weight: 600;
    color: #1f2328;
}

.PPO-OptDesc[b-xecn907w8c] {
    font-size: 12px;
    color: #79838d;
}

.PPO-Foot[b-xecn907w8c] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px 16px;
    background: #fafbfc;
    border-top: 1px solid #eef1f5;
}

.PPO-Btn[b-xecn907w8c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 18px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: filter .15s, background .15s, transform .05s;
}

.PPO-Btn-Cancel[b-xecn907w8c] {
    background: #fff;
    border: 1px solid #B9E0DC;
    color: #0B7A75;
}

    .PPO-Btn-Cancel:hover[b-xecn907w8c] {
        background: #E7F5F4;
    }

.PPO-Btn-Print[b-xecn907w8c] {
    background: linear-gradient(135deg, #0B7A75, #3FB0A9);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 10px 22px -12px rgba(11,122,117,0.7);
}

    .PPO-Btn-Print:hover[b-xecn907w8c] {
        filter: brightness(1.06);
    }

    .PPO-Btn-Print:active[b-xecn907w8c] {
        transform: translateY(1px);
    }

@keyframes PPO-Fade-b-xecn907w8c {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes PPO-Pop-b-xecn907w8c {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: none; }
}
/* /Components/PrintForm/PickingA4/PickingA4TEST - Copy.razor.rz.scp.css */
/* /Components/PrintForm/PickingA4/PickingA4TEST.razor.rz.scp.css */
/* /Components/ProductList/PriceRange.razor.rz.scp.css */
.DragZone[b-4h5jp3ts9z] {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 9;
}

.MainProductList[b-4h5jp3ts9z] {
    display: flex;
}

.FilterZone[b-4h5jp3ts9z] {
    padding: 0px 5px 20px 5px;
    width: 200px;
    min-width: 200px;
}

.PriceRangeZone[b-4h5jp3ts9z] {
    margin-top: 20px;
}

.TwoRangeInputDiv[b-4h5jp3ts9z] {
    position: relative;
    height: 5px;
    width: 100%;
}

.RangeInputBar[b-4h5jp3ts9z] {
    height: 100%;
    width: 100%;
    background-color: #666;
    border-radius: 5px;
}

.StartRangeInputBar[b-4h5jp3ts9z] {
    position: absolute;
    left: 0px;
    height: 100%;
    width: 0px;
    background-color: #c7c7c7 !important;
    border-radius: 5px;
    z-index: 4;
}

.EndRangeInputBar[b-4h5jp3ts9z] {
    position: absolute;
    right: 0px;
    height: 100%;
    width: 10px;
    background-color: #c7c7c7 !important;
    border-radius: 5px;
    z-index: 4;
}


.CirclePointInput[b-4h5jp3ts9z] {
    position: absolute;
    top: -4px;
    height: 12px;
    width: 12px;
    background-color: #666;
    z-index: 5;
    border-radius: 999px;
    outline: none;
    margin-left: -6.0px;
    cursor: pointer;
}

.PriceRangeFilterMain[b-4h5jp3ts9z] {
    display: flex;
    margin-top: 20px;
}

    .PriceRangeFilterMain .ButtonFilter[b-4h5jp3ts9z] {
        width: 75px;
        height: 30px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 15px;
        font-size: 14px;
        user-select: none;
        cursor: pointer;
    }

    .PriceRangeFilterMain .PriceShowZoneText[b-4h5jp3ts9z] {
        flex: 1;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: end;
        border-radius: 15px;
        color: #666;
        font-size: 14px;
    }