/* @import url('https://fonts.googleapis.com/css2?family=Itim&display=swap'); */

:root {
    /* --primary: rgba(157, 157, 157, 0.384); */
    --primary: #d4d4d4;
    /* --primary: #366092; */
    --primary-001: #ebebeb;
    --light-primary: #f2f2f2;
    --secondary: #737373;
    --white: white;
    --dark: black;
    --danger: rgb(255, 71, 71);
    --red: red;
    --light-danger: rgb(255, 222, 222);
    --placeholder: #aaa;
    --required: rgb(255, 248, 248);
    --bg-blur: rgba(0, 0, 0, 0.5);
    --empty001: #bbb;
    --empty002: #ccc;
    --blue: #4070f4;
    --light-blue: rgb(217, 217, 252);
    --row-even: rgb(226, 226, 226);

    --blue-hover: rgb(215, 215, 255);
    --info-hover: rgb(202, 238, 251);
    --secondary-hover: #ccc;
    --success-hover: rgb(214, 255, 214);
    --danger-hover: rgb(255, 218, 218);

    --smoot-100: 100ms ease;
    --smoot-200: 200ms ease;
    --smoot-300: 300ms ease;
    --shadow-primary: 0 4px 6px var(--light-primary);
    --border-radius: 4px;

    --content-admin: #f8f9ff;
    --text-in-bg-primary: #000;
    --backdrop-modal: #000;
    --input-required: rgb(255, 236, 236);

    --bg-th: #4070f4;
    --text-in-th: white;

    --bg-th-orange: #ff7000;
    --text-in-th-orange: white;

    --bg-th-purple: purple;
    --text-in-th-purple: white;

    --bg-th-green: green;
    --text-in-th-green: white;

    --tr-hover: rgb(208, 242, 255);
}


@font-face {
    font-family: 'Sarabun';
    src: url('/font/Sarabun-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    font-size: 12px;
    font-family: "Sarabun", sans-serif;
}

.text-in-bg-primary {
    color: var(--text-in-bg-primary) !important;
}

#content {
    width: calc(100vw - 110px);
}

.component {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
html {
    width: 100vw !important;
    overflow: hidden;
}

body {
    max-width: 100vw;
    min-width: 100vw;
    width: 100vw;
    overflow: hidden;
}


@media (min-width: 768px) {
    body {
        height: 100vh;
        overflow: hidden;
    }
}


.slk-tab-menu {
    height: 30px;
    padding: 0 10px;
}


.slk-tab-menu2 {
    height: 30px;
    padding: 0 10px;
}

.slk-sidebar {
    height: calc(100vh - 60px);
    width: 100px;
}


.table-absolute {
    position: absolute; 
    top: 0;
    left: 0;
}


.content--sidebar {
    width: calc(100vw - 106px);
}

.z-tooltips {
    z-index: 100 !important;
}

.h-30 {
    height: 30px;
}


.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loading-spinner {
    width: 10rem;
    height: 10rem;
    border-width: 10px !important;
}

.z-max {
    z-index: 999999;
}

.drag-h {
    height: 30px;
}

.x-modal-center {
    transform: translate(-50%, -50%);
}

.x-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid #888;
    transform: translateY(-50%);
}

.x-modal-in-content {
    position: absolute;
    top: 30%;
    left: 50%;
    border: 1px solid #888;
}

.x-modal-300 {
    max-width: 300px;
    width: 100%;
}

.x-modal-sm {
    max-width: 400px;
    width: 100%;
}

.x-modal-md {
    max-width: 500px;
    width: 100%;
}

.x-modal-lg {
    max-width: 600px;
    width: 100%;
}

.x-modal-xl {
    max-width: 700px;
    width: 100%;
}

.x-modal-xxl {
    max-width: 800px;
    width: 100%;
}

.x-modal-1010px {
    max-width: 1010px;
    width: 100%;
}

.x-modal-close {
    position: absolute;
    right: 10px;
    top: -25px;
}

.x-modal-title {
    position: absolute;
    left: 10px;
    top: -25px;
}

.x-modal-input {
    position: absolute;
    top: 100%;
    width: 300px;
    left: 0;
    z-index: 90;
}

.z-modal-global {
    z-index: 100;
}

.modal-z-120 {
    z-index: 120;
}

.z-modal-1 {
    z-index: 110;
}

.z-modal-2 {
    z-index: 120;
}

.z-modal-3 {
    z-index: 130;
}

.modal-h-v1 {
    height: 40vh !important;
}

.modal-h-v2 {
    height: 50vh !important;
}

.modal-h-v3 {
    height: 60vh !important;
}

.modal-not-overflow {
    overflow: hidden;
}

.modal-h-700px {
    height: 700px !important;
}



.backdrop-1 {
    position: absolute;
    inset: 0;
    background-color: var(--primary);
    z-index: 109;
    opacity: 0.1;
}

.backdrop-z-119 {
    position: absolute;
    inset: 0;
    background-color: var(--primary);
    z-index: 119;
    opacity: 0;
}


.backdrop-2 {
    position: absolute;
    inset: 0;
    background-color: var(--primary);
    z-index: 119;
    opacity: 0;
}

.backdrop-3 {
    position: absolute;
    inset: 0;
    background-color: var(--primary);
    z-index: 129;
    opacity: 0;
}

.backdrop-001 {
    position: absolute;
    inset: 0;
    background-color: var(--primary);
    z-index: 109;
    opacity: 0.1;
}

.backdrop-002 {
    position: absolute;
    inset: 0;
    background-color: var(--primary);
    z-index: 119;
    opacity: 0.1;
}


.not-use {
    filter: contrast(25%) !important;
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.gutter-x-0 {
    --bs-gutter-x: 0 !important;
}

.text-ellipsis {
    text-overflow: ellipsis;
}


/* ? ******************* Start Tooltips ******************* */
.parent-tooltips:hover .child-tooltips {
    bottom: calc(100% + 10px);
    visibility: visible;
    opacity: 1;
    display: block;
}

.child-tooltips {
    position: absolute;
    bottom: 100%;
    right: 0;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;

    transition: var(--smoot-300);
    z-index: 20;
}

.child-tooltips:hover {
    display: none !important;
}

.child-tooltips-bottom {
    position: absolute;
    top: 100%;
    right: 0;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;

    transition: var(--smoot-300);
    z-index: 20;
}

.child-tooltips:hover,
.child-tooltips-bottom:hover {
    display: none !important;
}
/* ? ******************* End Tooltips ******************* */


/* * ******************* Start Background ******************* */
/* * ******************* Start Background ******************* */
/* * ******************* Start Background ******************* */
.bg-l-info {
    background-color: var(--info-hover);
}

.bg-blue {
    background-color: var(--blue);
}

.bg-l-blue {
    background-color: var(--blue-hover);
}

.bg-l-success {
    background-color: var(--success-hover);
}

.bg-primary {
    background-color: var(--primary) !important;
}

.bg-l-primary {
    background-color: var(--light-primary) !important;
}

.bg-l-danger {
    background-color: var(--danger-hover) !important;
}

.bg-l-secondary {
    background-color: var(--secondary-hover) !important;
}
/* * ******************* End Background ******************* */
/* * ******************* End Background ******************* */
/* * ******************* End Background ******************* */


/* ? ******************* Start Background ******************* */
.text-blue {
    color: var(--blue);
}
.text-red {
    color: var(--red);
}
.text-empty {
    color: var(--empty001);
}
/* ? ******************* End Background ******************* */

/* start bootstrap modify */
/* start bootstrap modify */
/* start bootstrap modify */

.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}
.text-white {
    color: var(--white) !important;
}

.wrap-text {
    word-wrap: break-word; /* ตัดคำลงบรรทัดใหม่เมื่อคำยาวเกิน */
    overflow-wrap: break-word; /* รองรับในเบราว์เซอร์ใหม่ */
}


/* end bootstrap modify */
/* end bootstrap modify */
/* end bootstrap modify */



.content {
    padding: 1rem 0;
}

* {
    box-sizing: border-box;
    /* font-family: "Itim", cursive; */
}

a {
    text-decoration: none;
    color: var(--dark);
}

ul {
    padding: 0;
}

li {
    list-style: none;
}

table .v-top * {
    vertical-align: top !important;
}

.x-table-form * {
    vertical-align: top !important;
}

.table-resizable .resize-bar {
    cursor: col-resize;
    -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 5px;
}

.table-resizable th, .table-resizable td {
    position: relative;
}

table {
    width: 100%;
    table-layout: auto;
}

table th {
    white-space: nowrap;
}

table * {
    vertical-align: middle;
}

.table th,
.table td {
    padding: 1px 3px !important;
}

table:not(.table) th, 
table:not(.table) td {
    position: relative;
    padding: 1px;
}

.bg-th {
    background-color: var(--bg-th) !important;
}

.text-in-th {
    color: var(--text-in-th) !important;
}

.th-count-row,
.td-count-row {
    position: sticky;
    left: 0;
    background-color: var(--bg-th) !important;
    color: var(--text-in-th) !important;
    text-align: center;
    width: 22px;
}

.th-count-row {
    top: 0 !important;
}


.resizer {
    position: absolute;
    right: 0;
    top: 0;
    width: 5px;
    cursor: col-resize;
    user-select: none;
    opacity: 0;
}

.outline-none {
    outline: none !important;
}

/* .tbody-global tr:nth-child(even) td {
    background-color: var(--row-even);
} */

.tbody-global tr:hover > td {
    background-color: var(--tr-hover);
}

.thead-global {
    transform: translateY(-1px) !important;
}

.thead-global tr th {
    background-color: var(--bg-th) !important;
    color: var(--text-in-th) !important;
    font-weight: 400;
}

.thead-orange-global tr th {
    background-color: var(--bg-th-orange) !important;
    color: var(--text-in-th-orange) !important;
    font-weight: 400;
}

.thead-purple-global tr th {
    background-color: var(--bg-th-purple) !important;
    color: var(--text-in-th-purple) !important;
    font-weight: 400;
}

.thead-green-global tr th {
    background-color: var(--bg-th-green) !important;
    color: var(--text-in-th-green) !important;
    font-weight: 400;
}

.td-first {
    background-color: var(--bg-th) !important;
    color: var(--text-in-th) !important;
}

.td-selected {
    background-color: var(--bg-th) !important;
    color: var(--text-in-th) !important;
}

.focus-row {
    background-color: var(--bg-th) !important;
    color: var(--text-in-th) !important;
}

.word-wrap {
    word-wrap: break-word;
}

.w-default {
    /* width: 98%; */
    width: 70%;
    margin-inline: auto;
}

.px-default {
    padding-inline: 5rem;
}

.space-nowrap {
    white-space: nowrap;
}

.span-delete {
    visibility: hidden;
}

.pointer {
    cursor: pointer;
}

.context-menu {
    cursor: context-menu;
}

.context-menu-important {
    cursor: context-menu !important;
}


.wait {
    cursor: wait;
}

.move {
    cursor: move;
}

.alias {
    cursor: alias;
}

.context-menu {
    cursor: context-menu;
}

.events-none {
    pointer-events: none !important;
}

.no-drop {
    cursor: no-drop !important;
}

.w-fit {
    width: fit-content;
}

/* * ******************* Start Text Size ******************* */
/* * ******************* Start Text Size ******************* */
/* * ******************* Start Text Size ******************* */
.text-bs-primary {
    color: var(--bs-primary) !important;
}
/* * ******************* End Text Size ******************* */
/* * ******************* End Text Size ******************* */
/* * ******************* End Text Size ******************* */



/* ? ******************* Start Text Size ******************* */
/* ? ******************* Start Text Size ******************* */
/* ? ******************* Start Text Size ******************* */
.ts-8 {
    font-size: 10px !important;
}
.ts-9 {
    font-size: 10px !important;
}
.ts-10 {
    font-size: 10px !important;
}
.ts-11 {
    font-size: 11px !important;
}
.ts-12 {
    font-size: 12px !important;
}
.ts-13 {
    font-size: 13px !important;
}
.ts-14 {
    font-size: 14px !important;
}
.ts-15 {
    font-size: 15px !important;
}
.ts-16 {
    font-size: 16px !important;
}
.ts-17 {
    font-size: 17px !important;
}
.ts-18 {
    font-size: 18px !important;
}
.ts-19 {
    font-size: 19px !important;
}
.ts-20 {
    font-size: 20px !important;
}
.ts-21 {
    font-size: 21px !important;
}
.ts-22 {
    font-size: 22px !important;
}
.ts-23 {
    font-size: 23px !important;
}
.ts-24 {
    font-size: 24px !important;
}
/* ? ******************* End Text Size ******************* */
/* ? ******************* End Text Size ******************* */
/* ? ******************* End Text Size ******************* */


/* ? ******************* Start button ******************* */
/* ? ******************* Start button ******************* */
/* ? ******************* Start button ******************* */
button {
    outline: none;
    line-height: 1.5 !important;
}

.button-primary {
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--primary);
    /* color: var(--white); */
    color: #000 !important;
    transition: var(--smoot-300);
    border: 1px solid var(--primary);
}

.button-primary:hover {
    background-color: var(--light-primary);
    color: var(--primary);
    border: 1px solid var(--light-primary);
}

.button-l-primary {
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--light-primary);
    color: var(--primary);
    transition: var(--smoot-300);
    border: 1px solid var(--light-primary);
}

.button-l-primary:hover {
    background-color: var(--primary);
    color: var(--white);
    border: 1px solid var(--primary);
}

.button-empty {
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--empty002);
    color: var(--dark);
    transition: var(--smoot-300);
    border: 1px solid var(--empty002);
}


/* .button-empty:hover {
    background-color: var(--primary);
    color: var(--white);
} */

.button-danger {
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--danger);
    color: var(--white);
    transition: var(--smoot-300);
}

.button-danger:hover {
    background-color: var(--light-danger);
    color: var(--primary);
}

.btn-primary,
.btn-danger,
.btn-secondary,
.btn-info,
.btn-success {
    transition: var(--smoot-300) !important;
}


.btn-primary:hover {
    background-color: var(--light-blue) !important;
    border: 1px solid var(--light-blue) !important;
    color: var(--blue) !important;
}


.btn-secondary:hover {
    background-color: var(--secondary-hover) !important;
    border: 1px solid var(--secondary-hover) !important;
    color: var(--black) !important;
}

.btn-danger:hover {
    background-color: var(--danger-hover) !important;
    border: 1px solid var(--danger-hover) !important;
    color: var(--danger) !important;
}

.btn-success:hover {
    background-color: var(--success-hover) !important;
    border: 1px solid var(--success-hover) !important;
    color: var(--bs-success) !important;
}

.btn-info:hover {
    background-color: var(--info-hover) !important;
    border: 1px solid var(--info-hover) !important;
    color: var(--blue) !important;
}

/* ? ******************* End button ******************* */
/* ? ******************* End button ******************* */
/* ? ******************* End button ******************* */


/* ? ******************* Start View Image ******************* */
/* ? ******************* Start View Image ******************* */
/* ? ******************* Start View Image ******************* */
.img-not-use { 
    filter: grayscale(100%) ;
    opacity: 0.6;
}

@media (min-width: 562px) {
    .img-view-tag {
        width: 450px;
    }
}

@media (max-width: 562px) {
    .img-view-tag {
        width: 90%;
    }
}
/* ? ******************* End View Image ******************* */
/* ? ******************* End View Image ******************* */
/* ? ******************* End View Image ******************* */


.shadow-primary {
    box-shadow: var(--shadow-primary);
}

.admin-content {
    background-color: var(--light-primary);
    min-height: 100vh;
}

.color-primary {
    color: var(--primary);
}

.color-secondary {
    color: var(--secondary);
}

::placeholder {
    color: var(--placeholder) !important;
}

.bg-required-input {
    background-color: var(--input-required);
}

.input-required {
    background-color: var(--input-required) !important;
}

input[type="date"] {
    outline: none !important;
}

.icon-input-global {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 6px;
}

.input-global {
    height: 20px;
    padding: 0;
}

.input-mini {
    max-width: 50px;
    min-width: 50px;
    width: 50px;
}

.input-sm {
    max-width: 80px;
    min-width: 80px;
    width: 80px;
}

.input-0 {
    max-width: 100px;
    min-width: 100px;
    width: 100px;
}
.input-1 {
    max-width: 110px;
    min-width: 110px;
    width: 100%;
}
.input-2 {
    max-width: 120px;
    min-width: 120px;
    width: 100%;
}
.input-3 {
    max-width: 130px;
    min-width: 130px;
    width: 130px;
}
.input-4 {
    max-width: 140px;
    min-width: 140px;
    width: 100%;
}
.input-5 {
    max-width: 150px;
    min-width: 150px;
    width: 150px;
}
.input-6 {
    max-width: 160px;
    min-width: 160px;
    width: 160px;
}
.input-6 {
    max-width: 170px;
    min-width: 170px;
    width: 170px;
}
.input-8 {
    max-width: 180px;
    min-width: 180px;
    width: 180px;
}
.input-9 {
    max-width: 190px;
    min-width: 190px;
    width: 190px;
}
.input-20 {
    max-width: 200px;
    min-width: 200px;
    width: 200px;
}

.input-22 {
    width: min(220px, 220px);
}

.input-180px {
    max-width: 180px;
    min-width: 180px;
    width: 180px;
}

.label-group {
    position: absolute;
    top: -12px;
    left: 10px;
    background: white;
    padding-inline: 5px;
}

.label-sm {
    max-width: 85px;
    min-width: 85px;
    width: 85px;
}

.label-0 {
    max-width: 100px;
    min-width: 100px;
    width: 100px;
}
.label-1 {
    max-width: 110px;
    min-width: 110px;
    width: 100%;
}
.label-2 {
    max-width: 120px;
    min-width: 120px;
    width: 100%;
}
.label-3 {
    max-width: 130px;
    min-width: 130px;
    width: 130px;
}
.label-4 {
    max-width: 140px;
    min-width: 140px;
    width: 140px;
}
.label-5 {
    max-width: 150px;
    min-width: 150px;
    width: 150px;
}
.label-6 {
    max-width: 160px;
    min-width: 160px;
    width: 160px;
}
.label-7 {
    max-width: 170px;
    min-width: 170px;
    width: 170px;
}
.label-8 {
    max-width: 180px;
    min-width: 180px;
    width: 180px;
}

.label-22 {
    max-width: 220px;
    min-width: 220px;
    width: 220px;
}

.label-120px {
    max-width: 120px;
    min-width: 120px;
    width: 120px;
}

.label-130px {
    max-width: 130px;
    min-width: 130px;
    width: 130px;
}

.label-140px {
    max-width: 140px;
    min-width: 140px;
    width: 140px;
}

.label-160px {
    max-width: 160px;
    min-width: 160px;
    width: 160px;
}

.text-l-secondary {
    color: var(--empty001) !important;
}

.input-item-list {
    background-color: var(--primary);
    min-width: calc(100% - 19px);
    width: auto;
    height: auto;
    max-height: 140px;
    overflow-y: scroll;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 100;
}

.input-item-list tr:hover td {
    background-color: var(--tr-hover);
}

/* สำหรับ WebKit (Chrome, Safari, Edge) */
input[type="number"].spin-none::-webkit-outer-spin-button,
input[type="number"].spin-none::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* สำหรับ Firefox */
input[type="number"].spin-none {
    -moz-appearance: textfield;
}

.vh-90 {
    height: 90vh;
}

.vh-91 {
    height: 91vh;
}

.vh-92 {
    height: 92vh;
}

.vh-93 {
    height: 93vh;
}

.vh-94 {
    height: 94vh;
}

.vh-95 {
    height: 95vh;
}

.vh-96 {
    height: 96vh;
}

.vh-97 {
    height: 97vh;
}

.vh-98 {
    height: 98vh;
}

.vh-99 {
    height: 99vh;
}

.print-show {
    display: none;
}


@media (min-width: 768px) {
    .table-overflow-x::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 992px) {
    .w-default {
        width: 80%;
        margin-inline: auto;
    }

    .content {
        padding: 2rem 0;
    }
}

@media (max-width: 576px) {
    .w-default {
        width: 90%;
        margin-inline: auto;
    }
}

@media print {
    body {
        overflow: auto !important;
        overflow: visible !important;
    }

    .print-show {
        display: block !important;
    }

    .print-hide {
        display: none !important;
    }
    ::-webkit-scrollbar {
        display: none !important;
    }

    .print-ts-14 {
        font-size: 14px !important;
    }

    .print-ts-16 {
        font-size: 16px !important;
    }

    .print-ts-18 {
        font-size: 18px !important;
    }

    .print-ts-20 {
        font-size: 20px !important;
    }

    .print-border-0 {
        border: none !important;
    }

    .page-break {
        page-break-before: always; /* บังคับให้ขึ้นหน้าใหม่ */
    }

    .x-modal {
        display: none !important;
    }

    .vh-print-100 {
        height: 100vh;
    }
}