.c-con {
	display          :    flex;
	flex-direction   :    column;
	box-shadow       :    0px 0px 1px 1px rgb(213, 213, 213);
	border-radius    :    10px;
	background-color :    white;
	width            :    100%;
	max-width        :    1100px;
	overflow         :    hidden;

	.tabmenu {
		display          :    flex;
		flex-direction   :    row;
		flex-wrap        :    wrap;
		align-items      :    center;
		gap              :    7px;
		border-bottom    :    1px solid rgb(174, 174, 174);
		background-color :    dimgray;
		padding          :    7px;
		width            :    100%;

		>button {
			cursor           :    pointer;
			border-radius    :    5px;
			background-color :    white;
			width            :    28px;
			height           :    28px;
		}
	}

	>.body {
		display        :    flex;
		flex-direction :    column;
		gap            :    10px;
		padding        :    15px;
		width          :    100%;

		>.head {
			display        :    flex;
			flex-direction :    column;
			gap            :    10px;
			width          :    100%;

			>.row {
				display        :    flex;
				flex-direction :    row;
				flex-wrap      :    wrap;
				gap            :    5px;
				width          :    100%;

				>.setData {
					display        :    flex;
					flex-direction :    column;
					min-width      :    220px;
					max-width      :    220px;

					>.label {
						display          :    flex;
						justify-content  :    flex-start;
						align-items      :    center;
						background-color :    white;
						color            :    #6E6565;
						font-size        :    12px;
					}

					>.input {
						display         :    flex;
						flex-grow       :    1;
						flex-direction  :    column;
						justify-content :    center;
						align-items     :    center;
						height          :    30px;

						>input,
						>select {
							outline       :    none;
							border        :    0.5px rgb(211 211 211) solid;
							border-radius :    4px;
							padding       :    0 15px;
							width         :    100%;
							height        :    100%;
							font-size     :    14px;

							&:focus {
								border :    1.5px rgb(77, 204, 193) solid;
							}
						}
					}
				}

				@media (max-width: 800px) {
					flex-direction :    column;

					>.setData {
						max-width :    100%;
					}
				}
			}

			>.button {
				display        :    flex;
				flex-direction :    row;
				flex-wrap      :    wrap;
				gap            :    10px;

				>.คํานวณ {
					background-color :    whitesmoke;
					width            :    80px;
					height           :    30px;
					font-size        :    14px;
				}

				>.select {
					outline       :    none;
					border        :    0.5px rgb(211 211 211) solid;
					border-radius :    4px;
					padding       :    0 15px;
					width         :    180px;
					height        :    30px;
					font-size     :    14px;
				}
			}
		}

		>.body {
			width :    100%;

			>.table {
				box-shadow       :    0 2px 5px rgba(0, 0, 0, 0.1);
				background-color :    #fff;
				overflow-x       :    auto;

				>table {
					border-collapse :    collapse;
					width           :    100%;
					min-width       :    1000px;

					>thead {
						>tr {
							>th {
								border           :    1px solid #ccc;
								background-color :    #EDFAFF;
								padding          :    10px 12px;
								font-size        :    12px;
								text-align       :    center;
								white-space      :    nowrap;
							}

							>.c {
								text-align :    center;
							}

							>.r {
								text-align :    right;
							}
						}
					}

					>tbody {
						>tr {
							&:nth-child(even) {
								background-color :    #f9f9f9;
							}

							>td {
								border      :    1px solid #ccc;
								padding     :    10px 12px;
								font-size   :    14px;
								white-space :    nowrap;
							}

							>.c {
								text-align :    center;
							}

							>.r {
								text-align :    right;
							}

							>.b {
								font-weight :    bold;
							}
						}
					}
				}
			}

			>.pagination {
				display         :    flex;
				flex-wrap       :    wrap;
				justify-content :    center;
				align-items     :    center;
				gap             :    10px;
				margin-top      :    20px;

				>button {
					transition       :    all 0.3s ease;
					cursor           :    pointer;
					border           :    1px solid #ccc;
					border-radius    :    4px;
					background-color :    #fff;
					padding          :    6px 12px;
					font-size        :    14px;

					&:hover:not(:disabled) {
						background-color :    #007bff;
						color            :    white;
					}

					&:disabled {
						opacity :    0.5;
						cursor  :    not-allowed;
					}

					&.normal {
						transition    :    0.2s ease;
						cursor        :    pointer;
						border        :    1px solid #ccc;
						border-radius :    4px;
						padding       :    0.25rem 0.75rem;
					}

					&.on {
						background-color :    #f44336;
						color            :    white;
						font-weight      :    bold;
					}

					&.off {
						background-color :    white;
						color            :    #333;
					}

					&.off:hover {
						background-color :    #eee;
					}
				}

				>input {
					border        :    1px solid #ccc;
					border-radius :    4px;
					padding       :    6px;
					width         :    80px;
					font-size     :    14px;
				}
			}
		}
	}
}

* {
    scrollbar-color :    #cbd5e0 #f7fafc;
    scrollbar-width :    thin;               /* Firefox */
}

::-webkit-scrollbar {
    width  :    6px;
    height :    6px;
}

.c-form-main {
    display        :    flex;
    flex-direction :    column;

    >.menu-position {
        opacity        :    0;
        pointer-events :    none;

        >.body {
            position         :    fixed;
            z-index          :    51;
            box-shadow       :    0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
            border           :    1px solid #e5e7eb;
            background-color :    white;
            padding          :    16px;

            >table {
                border-collapse :    collapse;
                table-layout    :    fixed;

                >thead {
                    background-color :    #f3f4f6;
                    font-size        :    12px;
                }

                >tbody {
                    border :    1px solid black;

                    >tr {
                        border :    1px solid black;

                        td {
                            border        :    1px solid #d1d5db;
                            padding       :    0.25rem;
                            overflow      :    hidden;
                            font-size     :    12px;
                            text-overflow :    ellipsis;
                            white-space   :    nowrap;
                        }
                    }
                }

                th {
                    border      :    1px solid #d1d5db;
                    padding     :    0.25rem;
                    font-weight :    bold;
                }

                th, td {
                    min-width :    120px;
                }
            }
        }

        &.on {
            opacity        :    1;
            pointer-events :    all;
        }
    }

    >.tabmenu {
        display       :    flex;
        gap           :    0.5rem;
        margin-bottom :    10px;
        border-bottom :    solid 1px #93c5fd;
        width         :    100%;

        >.back {
            transition-duration :    100ms;
            cursor              :    pointer;
            border-radius       :    0.25rem;
            background-color    :    #6b7280;
            padding             :    0.5rem 1rem;
            color               :    #ffffff;
            font-size           :    12px;

            &:hover {
                background-color :    #4b5563;
            }

            &:active {
                background-color :    #9ca3af;
            }
        }

        >.save {
            transition-duration :    100ms;
            cursor              :    pointer;
            border-radius       :    0.25rem;
            background-color    :    #3b82f6;
            padding             :    0.5rem 1rem;
            color               :    #ffffff;
            font-size           :    12px;

            &:hover {
                background-color :    #2563eb;
            }

            &:active {
                background-color :    #60a5fa;
            }
        }

        >.a-menu {
            opacity             :    0.5;
            transition-duration :    100ms;
            border-radius       :    0.25rem;
            background-color    :    #3b82f6;
            padding             :    0.5rem 1rem;
            color               :    #ffffff;
            font-size           :    12px;
        }
    }

    >.top {
        display        :    flex;
        flex-direction :    row;
        gap            :    10px;
        width          :    100%;

        >.left,
        >.right {
            display        :    flex;
            flex-direction :    column;
            gap            :    5px;
            width          :    max-content;

            >div {
				display        :    flex;
				flex-direction :    row;
				gap            :    5px;

                >.text {
                    font-size   :    12px;
                    line-height :    16px;
                }

                >.input {
                    border        :    1px solid #d1d5db;
                    border-radius :    0.25rem;
                    padding       :    0.25rem;
                    width         :    200px;
                    font-size     :    12px;

                    &:focus {
                        outline    :    none;
                        box-shadow :    0 0 0 1px #93c5fd;
                    }
                }

				>.image{
					align-items   :    center;
					justify-items :    center;
					margin-left   :    auto;
					width         :    22px;
					height        :    100%;
				}

				img, svg {
					max-width  :    100%;
					max-height :    100%;
					object-fit :    scale-down;
				}
            }
        }
    }

    >.tables{
        margin-top :    5px;
        height     :    200px;
        overflow   :    scroll;

        >table {
            border-collapse :    collapse;
            width           :    100%;

            >thead {
                position         :    sticky;
                top              :    0;
                z-index          :    10;
                background-color :    #dbeafe;

                >tr{
                    >td:nth-child(1){
                        width :    60px;
                    }
                }
            }

            >tbody {
                border          :    black solid 1px;
                border-collapse :    collapse;
                height          :    50px;
                table-layout    :    fixed;

                >tr{
                    border :    black solid 1px;

                    &:hover {
                        background-color :    #f3f4f6;
                    }

                    >td{
                        border  :    black solid 1px;
                        padding :    3px;
                        height  :    40px;

                        >.box {
                            background-color :    rgba(0, 123, 255, 0);

                            >.input {
                                outline          :    none;
                                background-color :    rgba(0, 123, 255, 0);
                                padding          :    5px;
                                width            :    100%;
                                height           :    100%;

                                &:focus {
                                    box-shadow :    0 0 0 2px #93c5fd;
                                }
                            }
                        }
                    }

                    >.Price,
                    >.DiscountAmount,
                    >.Amount,
                    >.P {
                        >input {
                            text-align :    end;
                        }
                    }

                    >.ItemCode,
                    >.ItemName,
                    >.WHCode,
                    >.UnitCode,
                    >.Qty,
                    >.Price,
                    >.DiscountAmount,
                    >.Amount {
                        >.box {
                            display        :    flex;
                            flex-direction :    row;
                            align-items    :    center;
                            gap            :    5px;
                            padding        :    5px;
                            width          :    100%;
                            height         :    100%;

                            >.image{
                                display       :    none;
                                align-items   :    center;
                                justify-items :    center;
                                margin-left   :    auto;
                                width         :    22px;
                                height        :    100%;
                            }

                            img, svg {
                                max-width  :    100%;
                                max-height :    100%;
                                object-fit :    scale-down;
                            }
                        }

                        &.on {
                            >.box {
                                >.image {
                                    display :    flex;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    >.bottom {
        display        :    flex;
        flex-direction :    row;
        gap            :    10px;
        width          :    100%;

        >.left,
        >.center,
        >.right {
            display        :    flex;
            flex-direction :    column;
            gap            :    5px;
            width          :    max-content;

            >div {
                >.text {
                    font-size   :    12px;
                    line-height :    16px;
                }

                >.input {
                    border        :    1px solid #d1d5db;
                    border-radius :    0.25rem;
                    padding       :    0.25rem;
                    width         :    200px;
                    font-size     :    12px;

                    &:focus {
                        outline    :    none;
                        box-shadow :    0 0 0 1px #93c5fd;
                    }
                }
            }
        }
    }

    * {
        box-sizing :    border-box;
        object-fit :    scale-down;
    }
}

.phetFind {
    display          :    none;
    position         :    fixed;
    top              :    50%;
    left             :    50%;
    flex-direction   :    column;
    transform        :    translate(-50%, -50%);
    z-index          :    55;
    box-shadow       :    0 10px 30px rgba(0, 0, 0, 0.1);
    border           :    1px solid #cbd5e1;                 /* สีเทาอ่อน */
    border-radius    :    12px;
    background-color :    white;
    padding          :    1.5rem;
    width            :    800px;
    min-height       :    400px;

    >.title {
        display        :    flex;
        flex-direction :    row;
        width          :    100%;

        >.close {
            margin-left :    auto;
        }
    }

    > .sub {
        margin-top    :    1.25rem;
        border        :    1px solid #e5e7eb;
        border-radius :    8px;
        height        :    40vh;
        overflow      :    auto;

        > table {
            border-collapse :    collapse;
            width           :    100%;
            table-layout    :    fixed;
            font-size       :    14px;
            font-family     :    'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            > thead {
                position         :    sticky;
                top              :    0;
                z-index          :    10;
                background-color :    #eff6ff;
                color            :    #1e3a8a;
                text-transform   :    uppercase;

                > tr > th {
                    border-bottom :    2px solid #93c5fd;
                    padding       :    8px;
                    text-align    :    left;
                }
            }

            > tbody {
                > tr {
                    transition :    background-color 0.2s;

                    &:nth-child(even) {
                        background-color :    #f9fafb;
                    }

                    &:hover {
                        background-color :    #e0f2fe;
                    }

                    > td {
                        border-bottom :    1px solid #e5e7eb;
                        padding       :    10px 8px;
                        height        :    40px;
                        word-break    :    break-word;
                    }
                }
            }
        }
    }

    &.on {
        display :    flex;
    }
}

.sales-tax-summary-by-revenue-type {
    display        :    flex;
    flex-direction :    column;
    gap            :    10px;

    >.top,
    >.body,
    >.paginate {
        box-shadow :
            0 1px 3px rgba(0, 0, 0, 0.1),
            0 1px 2px rgba(0, 0, 0, 0.06)
        ;
        border-radius :    5px;
        padding       :    10px;
    }

    >.title {
        display         :    flex;
        justify-content :    space-between;
        align-items     :    center;

        >.box1 {
            color       :    rgb(90, 90, 90);
            font-weight :    600;
            font-size   :    18px;
        }

        >.box2 {
            display        :    flex;
            flex-direction :    row;
            align-items    :    center;

            >.text1 {
                color: #4B5563;
            }

            >.text2 {
                color: #9CA3AF;
                font-size: 12px;
            }
        }
    }

    >.head {
        background-color :    #ffffff;

        > * + * {
            margin-top :    0.25rem;
        }

        >.box {
            margin-top :    1rem;

            > * + * {
                margin-left :    0.5rem;
            }

            >.พิมพ์รายงาน {
                border-radius    :    0.25rem;
                background-color :    #ef4444;
                padding          :    0.5rem 1rem;
                color            :    #ffffff;
                font-size        :    12px;
            }

            >.Print {
                border-radius    :    0.25rem;
                background-color :    #16a34a;
                padding          :    0.5rem 1rem;
                color            :    #ffffff;
                font-size        :    12px;
            }

            >.ImportExcel {
                border-radius    :    0.25rem;
                background-color :    #3b82f6;
                padding          :    0.5rem 1rem;
                color            :    #ffffff;
                font-size        :    12px;
            }
        }

    }

    >.body {
        background-color :    #ffffff;

        >.top {
            display        :    flex;
            flex-direction :    row;
            align-items    :    center;
            gap            :    40px;
            margin-bottom  :    1rem;

            >.รายการต่อหน้า {
                margin-right :    auto;

                >.selects {
                    border        :    1px solid #d1d5db;
                    border-radius :    0.25rem;
                    padding       :    0.25rem;
                    font-size     :    12px;

                    &:focus {
                        outline    :    none;
                        box-shadow :    0 0 0 1px #93c5fd;
                    }
                }
            }

            >.checked {
                display        :    flex;
                flex-direction :    row;
                border-radius  :    5px;
                width          :    max-content;

                >.box {
                    display         :    flex;
                    position        :    relative;
                    flex-direction  :    column;
                    justify-content :    center;
                    align-items     :    center;
                    gap             :    5px;
                    padding         :    5px;
                    width           :    70px;

                    >.inputs {
                        transition :    transform 0.2s ease;
                        width      :    15px;
                    }

                    >.text {
                        cursor      :    default;
                        font-size   :    11px;
                        user-select :    none;
                    }

                    &:not(:first-child) {
                        &::before {
                            position         :    absolute;
                            top              :    50%;
                            left             :    0;
                            transform        :    translateY(-50%);
                            background-color :    #b6b6b6;
                            width            :    1px;
                            height           :    50%;
                            content          :    '';
                        }
                    }

                    &:hover {
                        >.inputs {
                            transform :    scale(1.1);
                        }
                    }
                }
            }

            >.ค้นหา {
                border        :    1px solid #d1d5db;
                border-radius :    0.25rem;
                padding       :    0.25rem;
                font-size     :    12px;

                &:focus {
                    outline    :    none;
                    box-shadow :    0 0 0 1px #93c5fd;
                }
            }
        }

        >.body {
            height   :    235px;
            overflow :    auto;

            >table {
                border-collapse :    collapse;
                width           :    100%;
                table-layout    :    auto;

                >thead {
                    position         :    sticky;
                    top              :    0;
                    z-index          :    10;
                    background-color :    #DBEAFE;

                    >tr {
                        >th {
                            border    :    1px solid #D1D5DB;
                            padding   :    0.5rem;
                            font-size :    12px;

                            &.left {
                                text-align: left;
                            }

                            &.center {
                                text-align: center;
                            }
                        }
                    }
                }

                >tbody {
                    >tr {
                        &:hover {
                            background-color :    #F3F4F6;
                        }

                        >td {
                            border  :    1px solid #D1D5DB;
                            padding :    0.5rem;
                            font-size: 12px;

                            &.left {
                                text-align: left;
                            }

                            &.center {
                                text-align: center;
                            }

                            &.action {
                                >div{
                                    display: flex;
                                    justify-content: center;

                                    > *:not(:last-child) {
                                        margin-right: 0.25rem;
                                    }

                                    >.PDF {
                                        border-radius    :    0.25rem;
                                        background-color :    #EF4444;
                                        padding          :    0.25rem 0.25rem;
                                        color            :    #FFFFFF;
                                        font-size        :    10px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    >.paginate {
        display         :    flex;
        flex-direction  :    row;
        justify-content :    flex-end;
        align-items     :    center;
        gap             :    5px;
        width           :    100%;

        >.body {
            display         :    flex;
            justify-content :    center;
            align-items     :    center;
        }
    }

    >.รายงานภาษี{
        display          :    flex;
        position         :    fixed;
        top              :    0;
        left             :    0;
        justify-content  :    center;
        align-items      :    center;
        z-index          :    4000;
        background-color :    rgba(17, 24, 39, 0.5);
        width            :    100%;
        height           :    100%;

        >.body {
            display          :    flex;
            position         :    relative;
            flex-direction   :    column;
            gap              :    20px;
            margin-right     :    1rem;
            margin-left      :    1rem;
            box-shadow       :    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            border-radius    :    0.5rem;
            background-color :    #ffffff;
            padding          :    30px;
            width            :    max-content;
            overflow         :    hidden;

            >.title {
                margin-bottom :    1rem;
                font-weight   :    700;
                font-size     :    1.25rem;
            }

            >.กรอกข้อมูล {
                display        :    flex;
                flex-direction :    column;
                gap            :    5px;
                width          :    100%;

                >.เลขที่,
                >.วันที่,
                >.รหัส {
                    display        :    flex;
                    flex-direction :    row;
                    gap: 5px;
                    width          :    100%;

                    >.left,
                    >.right {
                        display          :    flex;
                        flex-direction   :    row;
                        justify-content  :    center;
                        align-items      :    center;
                        gap              :    10px;
                        width            :    50%;

                        >.input {
                            display       :    flex;
                            align-items   :    center;
                            gap           :    8px;
                            width         :    100%;

                            >.text {
                                display        :    flex;
                                flex-direction :    row-reverse;
                                width          :    110px;
                                color          :    #333;
                                font-size      :    0.95rem;
                            }

                            >input {
                                flex-grow     :    1;
                                transition    :    border-color 0.2s ease, box-shadow 0.2s ease;
                                border        :    1px solid #999;
                                border-radius :    4px;
                                padding       :    6px 10px;
                                font-size     :    0.95rem;

                                &:hover {
                                    border-color :    #666;
                                }

                                &:focus {
                                    outline      :    none;
                                    box-shadow   :    0 0 0 2px rgba(0, 123, 255, 0.2);
                                    border-color :    #007bff;
                                }
                            }
                        }
                    }
                }
            }

            >.checked1 {
                display        :    flex;
                flex-direction :    row-reverse;
                gap            :    5px;

                >.checkbox {
                    display          :    flex;
                    flex-direction   :    row;
                    justify-content  :    center;
                    align-items      :    center;

                    >input {
                        width: 30px;
                    }

                    >.text {
                        font-size        :    14px;
                        user-select      :    none;
                    }
                }
            }

            >.checked2 {
                display         :    flex;
                flex-direction  :    row;
                justify-content :    flex-end;
                align-items     :    center;
                gap             :    10px;
                width           :    100%;

                >.radio {
                    display          :    flex;
                    flex-direction   :    row;
                    justify-content  :    center;
                    align-items      :    center;

                    >input {
                        width: 30px;
                    }

                    >.text {
                        font-size        :    14px;
                        user-select      :    none;
                    }
                }

                >.checkbox {
                    display          :    flex;
                    flex-direction   :    row;
                    justify-content  :    center;
                    align-items      :    center;

                    >input {
                        width: 30px;
                    }

                    >.text {
                        font-size        :    14px;
                        user-select      :    none;
                    }
                }
            }

            >.buttom {
                display        :    flex;
                flex-direction :    row;
                gap            :    10px;

                >.select {
                    appearance       :    none;
                    transition       :    all 0.3s ease;
                    cursor           :    pointer;
                    margin-right     :    auto;
                    border           :    1px solid #ccc;
                    border-radius    :    6px;

                    background-image    :    url("data:image/svg+xml,%3Csvg fill='gray' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
                    background-position :    right 12px center;
                    background-size     :    16px;
                    background-repeat   :    no-repeat;
                    background-color :    #f9f9f9;
                    padding          :    10px 14px;
                    width            :    220px;
                    color            :    #333;
                    font-size        :    14px;

                    &:hover {
                        border-color     :    #888;
                        background-color :    #f0f0f0;
                    }

                    &:focus {
                        outline          :    none;
                        box-shadow       :    0 0 0 3px rgba(0, 123, 255, 0.2);
                        border-color     :    #555;
                        background-color :    #fff;
                    }

                    &:disabled {
                        cursor           :    not-allowed;
                        background-color :    #eee;
                        color            :    #999;
                    }
                }

                >.button {
                    display        :    flex;
                    flex-direction :    row;
                    gap            :    5px;

                    >.ภาพก่อนพิมพ์ {
                        transition       :    all 0.3s ease;
                        cursor           :    pointer;
                        box-shadow       :    0 2px 5px rgba(0, 0, 0, 0.1);
                        border           :    1px solid #ccc;
                        border-radius    :    6px;
                        background-color :    rgb(148, 69, 237);
                        padding          :    10px 16px;
                        width            :    140px;
                        color            :    #ffffff;
                        font-weight      :    bold;
                        font-size        :    14px;

                        &:hover {
                            transform        :    translateY(-1px);
                            box-shadow       :    0 4px 8px rgba(0, 0, 0, 0.15);
                            border-color     :    #999;
                            background-color :    rgb(120, 56, 193);
                        }

                        &:active {
                            transform  :    translateY(1px);
                            box-shadow :    0 2px 4px rgba(0, 0, 0, 0.1);
                        }

                        &:focus {
                            outline      :    none;
                            border-color :    #666;
                        }
                    }

                    >.PDF {
                        transition       :    all 0.3s ease;
                        cursor           :    pointer;
                        box-shadow       :    0 2px 5px rgba(0, 0, 0, 0.1);
                        border           :    1px solid #ccc;
                        border-radius    :    6px;
                        background-color :    #EF4444;
                        padding          :    10px 16px;
                        width            :    140px;
                        color            :    #FFFFFF;
                        font-weight      :    bold;
                        font-size        :    14px;

                        &:hover {
                            transform        :    translateY(-1px);
                            box-shadow       :    0 4px 8px rgba(0, 0, 0, 0.15);
                            border-color     :    #999;
                            background-color :    #d33e3e;
                        }

                        &:active {
                            transform  :    translateY(1px);
                            box-shadow :    0 2px 4px rgba(0, 0, 0, 0.1);
                        }

                        &:focus {
                            outline      :    none;
                            border-color :    #666;
                        }
                    }

                    >.Excel {
                        transition       :    all 0.3s ease;
                        cursor           :    pointer;
                        box-shadow       :    0 2px 5px rgba(0, 0, 0, 0.1);
                        border           :    1px solid #ccc;
                        border-radius    :    6px;
                        background-color :    #51b136;
                        padding          :    10px 16px;
                        width            :    140px;
                        color            :    #FFFFFF;
                        font-weight      :    bold;
                        font-size        :    14px;

                        &:hover {
                            transform        :    translateY(-1px);
                            box-shadow       :    0 4px 8px rgba(0, 0, 0, 0.15);
                            border-color     :    #999;
                            background-color :    #489e31;
                        }

                        &:active {
                            transform  :    translateY(1px);
                            box-shadow :    0 2px 4px rgba(0, 0, 0, 0.1);
                        }

                        &:focus {
                            outline      :    none;
                            border-color :    #666;
                        }
                    }

                    >.ปิด {
                        transition: all 0.3s ease;
                        cursor: pointer;
                        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                        border: 1px solid #ccc;
                        border-radius: 6px;
                        background-color: whitesmoke;
                        padding: 10px 16px;
                        width: 140px;
                        color: #333;
                        font-weight: bold;
                        font-size: 14px;

                        &:hover {
                            transform: translateY(-1px);
                            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
                            border-color: #999;
                            background-color: #f0f0f0;
                        }

                        &:active {
                            transform: translateY(1px);
                            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                        }

                        &:focus {
                            outline: none;
                            border-color: #666;
                        }
                    }
                }
            }
        }
    }

    >.รายงานขาย {
        display          :    flex;
        position         :    fixed;
        justify-content  :    center;
        align-items      :    center;
        z-index          :    4000;
        inset            :    0;
        background-color :    rgba(17, 24, 39, 0.5);

        >.body {
            display          :    flex;
            position         :    relative;
            flex-direction   :    column;
            gap              :    20px;
            margin-right     :    1rem;
            margin-left      :    1rem;
            box-shadow       :    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            border-radius    :    0.5rem;
            background-color :    #ffffff;
            padding          :    30px;
            width            :    800px;
            overflow         :    hidden;

            >.title {
                margin-bottom :    1rem;
                font-weight   :    700;
                font-size     :    1.25rem;
            }

            >.กรอกข้อมูล {
                display        :    flex;
                flex-direction :    column;
                gap            :    5px;
                width          :    100%;

                >.เลขที่,
                >.วันที่,
                >.รหัส {
                    display        :    flex;
                    flex-direction :    row;
                    gap: 5px;
                    width          :    100%;

                    >.left,
                    >.right {
                        display          :    flex;
                        flex-direction   :    row;
                        justify-content  :    center;
                        align-items      :    center;
                        gap              :    10px;
                        width            :    50%;

                        >.input {
                            display       :    flex;
                            align-items   :    center;
                            gap           :    8px;
                            width         :    100%;

                            >.text {
                                display        :    flex;
                                flex-direction :    row-reverse;
                                width          :    110px;
                                color          :    #333;
                                font-size      :    0.95rem;
                            }

                            >input {
                                flex-grow     :    1;
                                transition    :    border-color 0.2s ease, box-shadow 0.2s ease;
                                border        :    1px solid #999;
                                border-radius :    4px;
                                padding       :    6px 10px;
                                font-size     :    0.95rem;

                                &:hover {
                                    border-color :    #666;
                                }

                                &:focus {
                                    outline      :    none;
                                    box-shadow   :    0 0 0 2px rgba(0, 123, 255, 0.2);
                                    border-color :    #007bff;
                                }
                            }
                        }
                    }
                }
            }

            >.checked {
                display        :    flex;
                flex-direction :    row-reverse;
                gap            :    5px;

                >.checkbox {
                    display          :    flex;
                    flex-direction   :    row;
                    justify-content  :    center;
                    align-items      :    center;

                    >input {
                        width: 30px;
                    }

                    >.text {
                        font-size        :    14px;
                        user-select      :    none;
                    }
                }
            }

            >.buttom {
                display        :    flex;
                flex-direction :    row;
                gap            :    10px;

                >.select {
                    appearance       :    none;
                    transition       :    all 0.3s ease;
                    cursor           :    pointer;
                    margin-right     :    auto;
                    border           :    1px solid #ccc;
                    border-radius    :    6px;

                    background-image    :    url("data:image/svg+xml,%3Csvg fill='gray' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
                    background-position :    right 12px center;
                    background-size     :    16px;
                    background-repeat   :    no-repeat;
                    background-color :    #f9f9f9;
                    padding          :    10px 14px;
                    width            :    220px;
                    color            :    #333;
                    font-size        :    14px;

                    &:hover {
                        border-color     :    #888;
                        background-color :    #f0f0f0;
                    }

                    &:focus {
                        outline          :    none;
                        box-shadow       :    0 0 0 3px rgba(0, 123, 255, 0.2);
                        border-color     :    #555;
                        background-color :    #fff;
                    }

                    &:disabled {
                        cursor           :    not-allowed;
                        background-color :    #eee;
                        color            :    #999;
                    }
                }

                >.button {
                    display        :    flex;
                    flex-direction :    row;
                    gap            :    5px;

                    >.ภาพก่อนพิมพ์ {
                        transition       :    all 0.3s ease;
                        cursor           :    pointer;
                        box-shadow       :    0 2px 5px rgba(0, 0, 0, 0.1);
                        border           :    1px solid #ccc;
                        border-radius    :    6px;
                        background-color :    rgb(148, 69, 237);
                        padding          :    10px 16px;
                        width            :    140px;
                        color            :    #ffffff;
                        font-weight      :    bold;
                        font-size        :    14px;

                        &:hover {
                            transform        :    translateY(-1px);
                            box-shadow       :    0 4px 8px rgba(0, 0, 0, 0.15);
                            border-color     :    #999;
                            background-color :    rgb(120, 56, 193);
                        }

                        &:active {
                            transform  :    translateY(1px);
                            box-shadow :    0 2px 4px rgba(0, 0, 0, 0.1);
                        }

                        &:focus {
                            outline      :    none;
                            border-color :    #666;
                        }
                    }

                    >.PDF {
                        transition       :    all 0.3s ease;
                        cursor           :    pointer;
                        box-shadow       :    0 2px 5px rgba(0, 0, 0, 0.1);
                        border           :    1px solid #ccc;
                        border-radius    :    6px;
                        background-color :    #EF4444;
                        padding          :    10px 16px;
                        width            :    140px;
                        color            :    #FFFFFF;
                        font-weight      :    bold;
                        font-size        :    14px;

                        &:hover {
                            transform        :    translateY(-1px);
                            box-shadow       :    0 4px 8px rgba(0, 0, 0, 0.15);
                            border-color     :    #999;
                            background-color :    #d33e3e;
                        }

                        &:active {
                            transform  :    translateY(1px);
                            box-shadow :    0 2px 4px rgba(0, 0, 0, 0.1);
                        }

                        &:focus {
                            outline      :    none;
                            border-color :    #666;
                        }
                    }

                    >.Excel {
                        transition       :    all 0.3s ease;
                        cursor           :    pointer;
                        box-shadow       :    0 2px 5px rgba(0, 0, 0, 0.1);
                        border           :    1px solid #ccc;
                        border-radius    :    6px;
                        background-color :    #51b136;
                        padding          :    10px 16px;
                        width            :    140px;
                        color            :    #FFFFFF;
                        font-weight      :    bold;
                        font-size        :    14px;

                        &:hover {
                            transform        :    translateY(-1px);
                            box-shadow       :    0 4px 8px rgba(0, 0, 0, 0.15);
                            border-color     :    #999;
                            background-color :    #489e31;
                        }

                        &:active {
                            transform  :    translateY(1px);
                            box-shadow :    0 2px 4px rgba(0, 0, 0, 0.1);
                        }

                        &:focus {
                            outline      :    none;
                            border-color :    #666;
                        }
                    }

                    >.ปิด {
                        transition: all 0.3s ease;
                        cursor: pointer;
                        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                        border: 1px solid #ccc;
                        border-radius: 6px;
                        background-color: whitesmoke;
                        padding: 10px 16px;
                        width: 140px;
                        color: #333;
                        font-weight: bold;
                        font-size: 14px;

                        &:hover {
                            transform: translateY(-1px);
                            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
                            border-color: #999;
                            background-color: #f0f0f0;
                        }

                        &:active {
                            transform: translateY(1px);
                            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                        }

                        &:focus {
                            outline: none;
                            border-color: #666;
                        }
                    }
                }
            }
        }
    }

    img, svg {
        max-width  :    100%;
        max-height :    100%;
        object-fit :    scale-down;
    }
}

.com-date-picker {
    >.body {
        display        :    flex;
        flex-direction :    row;


        >.inputs {
            border :    black solid 1px;
        }

        >.images{
            align-items   :    center;
            justify-items :    center;
            margin-left   :    auto;
            width         :    22px;
            height        :    100%;
        }
    }

    >.modal-date {
        display         :    flex;
        position        :    fixed;
        justify-content :    center;
        align-items     :    center;
        z-index         :    5000;
        inset           :    0;

        >.box {
            position         :    relative;
            flex-direction   :    column;
            z-index          :    5001;
            margin-right     :    1rem;
            margin-left      :    1rem;
            box-shadow       :    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            border-radius    :    0.5rem;
            background-color :    #ffffff;
            padding          :    1.5rem;
            width            :    300px;
            overflow         :    hidden;

            >.title {
                display        :    flex;
                flex-direction :    row;
            }

            >.body {
                display        :    flex;
                flex-direction :    column;

                >.head {
                    display        :    flex;
                    flex-direction :    row;

                    >div{
                        width :    50px;
                    }
                }
            }
        }
    }

    img, svg {
        max-width  :    100%;
        max-height :    100%;
        object-fit :    scale-down;
    }
}




.icon-active:active {
    transform: scale(0.8);
    transition: 200ms ease;
}

.icon-active:active {
    transform: scale(0.8);
    transition: 200ms ease;
}