@font-face {
     font-family: 'Prompt';
     src: url('../assets/fonts/prompt/Prompt-Regular.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
}
@font-face {
     font-family: 'Prompt';
     src: url('../assets/fonts/prompt/Prompt-Medium.woff2') format('woff2');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
}
:root {
     --bs-body-font-family: 'Prompt', sans-serif;
     --bs-body-color: #333;
}
*, *::before, *::after {
     box-sizing: border-box;
}
html, body {
     height: 100%;
     margin:0;
}
body {
     font-family: 'Prompt', sans-serif;
     font-size: 16px;
     color: #333;
 
     padding-top: env(safe-area-inset-top);
     /* padding-bottom: calc(65px + env(safe-area-inset-bottom)); */
 
     overscroll-behavior: none;
     -webkit-overflow-scrolling: touch;
}
h1, h2, h3, h4, h5, h6 {
     font-weight: 500; /* ใช้ Medium ชัดเจน */
     color: #222;
}
.ksolas{
     font-family: Consolas;
}
.form-smoothe {
     border:1px solid #fff;
     border-radius: 10px 10px;    
}
.text-muted {
     color: #6c757d;
}
.text-smoothe {
     color: #00A997;
}
.border-blue {
     border:2px solid blue;
}
.border-red {
     border:1px solid red;
}

button, .btn {
     touch-action: manipulation;
}
 /* RESPONSIVE */
@media (max-width: 1024px) {
     .product-grid {
       grid-template-columns: repeat(3, 1fr);
     }
}

@media (max-width: 768px) {
    .product-grid {
    grid-template-columns: repeat(2, 1fr);
    }
}
.bghome {
    height:100dvh;
    display:flex;     
    justify-content:center;
    align-items:center;      
    background:url('../images/bghome.jpg') no-repeat center center/cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.bgindex {    
     min-height:100dvh;
     display:flex;     
     justify-content:center;
     align-items:center;    
     background-color: #00A997;
     /*
     background:url('../images/bghome.jpg') no-repeat center center/cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     */
}
.logo-login {
      width:380px; 
      position:absolute;
      text-align:center;
      top:10px;    
}
/* กล่องหลัก */
.login-card {
     width: 360px;
     background: rgba(255,255,255,0.95);
     padding: 60px 30px 30px 30px;
     border-radius: 25px;
     box-shadow: 0 15px 35px rgba(0,0,0,0.2);
     position: relative;
     text-align: center;
}
 
/* ไอคอนวงกลม */
.avatar {
     position: absolute;
     top: -35px;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 80px;
     background: #1abc9c;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #fff;
     font-size: 32px;
     box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* Error */
.error {
     color: red;
     font-size: 14px;
     margin-bottom: 15px;
}
/* กล่อง input */
.input-box {
     display: flex;
     align-items: center;
     border: 1px solid #ddd;
     border-radius: 30px;
     padding: 10px 15px;
     margin-bottom: 15px;
     background: #f9f9f9;
     transition: all 0.25s ease;
}
.input-box i {
     color: #999;
     margin-right: 10px;
     transition: 0.3s;
}
.input-box input {
     border: none;
     outline: none;
     background: transparent;
     flex: 1;
     font-size: 16px;
}
/* เอฟเฟกต์ตอนคลิก */
.input-box:focus-within {
     border-color: #1abc9c;
     box-shadow: 0 0 10px rgba(26, 188, 156, 0.3);
     background: #f0fffa;
     
}
.input-box:focus-within i {
     color: #1abc9c;
}

.input-box2 {
     display: flex;
     align-items: center;
     border: 1px solid #ddd;   
     border-radius: 5px;
     padding: 10px 15px;
     margin-bottom: 15px;
     background: #f9f9f9;
     transition: all 0.25s ease;
}
.input-box2 i {
     color: #999;
     margin-right: 10px;
     transition: 0.3s;
}
.input-box2 input {
     border: none;
     outline: none;
     background: transparent;
     flex: 1;
     font-size: 16px;
}
/* เอฟเฟกต์ตอนคลิก */
.input-box2:focus-within {
     border-color: #1abc9c;
     box-shadow: 0 0 10px rgba(26, 188, 156, 0.3);
     background: #f0fffa;
     
}
.input-box2:focus-within i {
     color: #1abc9c;
}
 

/* ตัวเลือก */
.options {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 16px;
     margin-bottom: 20px;
}
.options a {
     text-decoration: none;
     color: #1abc9c;
}
 
/* ปุ่ม */
.btn-k {
     width: 100%;
     padding: 12px;
     border:1px solid #00A997;
     border-radius: 10px;
     background-color:#fff;
     color:  #1abc9c;    
     cursor: pointer;
     transition: 0.3s;
}
.btn-k:hover {
     background: #16a085;
}
/* ปุ่ม */
.btn-login {
     width: 100%;
     padding: 12px;
     border: none;
     border-radius: 30px;
     background: #1abc9c;
     color: #fff;
     font-size: 16px;
     cursor: pointer;
     transition: 0.3s;
}
.btn-login:hover {
     background: #16a085;
}
input, textarea {
     font-size: 16px;
}
.container-app {
     height:100dvh;     
     background-color: #eaffeb;
     overflow: auto;    
}
.bottom-nav button i {
     font-size: 26px;    
}
/* Active */
.bottom-nav button.active {
     color: #edffff;
}
.bottom-nav button.active i {
     transform: scale(1.1);    
}
.password-box {
     position: relative;
}
.password-box input {
     padding-right: 40px; /* เว้นที่ให้ไอคอน */
}
.toggle-password {
     position: absolute;
     right: 12px;
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
     color: #888;
}
.toggle-password:hover {
     color: #333;
}
.klink {
     cursor:pointer;
}
.modal {
     z-index: 2000 !important;
}
.modal-backdrop {
     z-index: 1999 !important;
}
.product-card{
     border:1px solid #ddd;
     border-radius:8px;
     text-align:center;
     padding:1px;
     height:160px; /* ป้องกัน layout กระโดด */
     background:white;
     cursor:pointer;
}
.product-card img{
     width:100%;
     height:90px; /* ล็อคความสูงรูป */
     object-fit:contain;
}
.product-name{
     font-size:12px;
     margin-top:4px;
 
     display:-webkit-box;
     -webkit-line-clamp:2;      /* จำกัด 2 บรรทัด */
     -webkit-box-orient:vertical;
     overflow:hidden;
}
 
#loadMoreTrigger{
     height:50px;
}
 
.fly-img {
     position: fixed;
     width: 80px;
     z-index: 9999;
     pointer-events: none;
     transition: all 0.7s cubic-bezier(.65,-0.25,.25,1.25);
}
#cart {
     transition: transform 0.2s ease;
}
.product-scroll{    
     bottom: 0;
     left: 0;
     right: 0;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
}
.swal2-popup {
     border-radius: 20px !important;
}
.swal2-confirm, .swal2-cancel {
     font-size: 16px !important;
     padding: 12px 20px !important;
}
.swipe-list {
     max-width: 500px;
     margin: auto;
}
.fs-7 {
     font-size:12px;
}
.bi {
     font-size: 20px;
}

/* กล่องหลัก */
.form-group-box {
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    max-width: 500px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

/* แต่ละแถว */
.form-row-inline {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}

.form-row-inline:last-child {
    border-bottom: none;
}

/* label */
.form-row-inline label {
    min-width: 120px;
    font-weight: 500;
    color: #555;
    font-size:14px;
}

/* input */
.form-row-inline input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 16px;    
    width:100%;  
    background: transparent;
}

/* เอฟเฟกต์ตอน focus */
.form-row-inline:focus-within {
    background: #f8f9ff;
}
.divider-gradient {
    height: 1px;
    width: 100%;
    background: linear-gradient(
        to right,
        transparent,
    #00A997,
        transparent
    );
    margin: 10px 0;
}
.divider-gradient2 {
     height: 1px;
    width: 100%;
    background: linear-gradient(
        to left,
        rgba(0,169,151,0.1),
        rgba(0,169,151,1)
    );
    margin: 10px 0;
}
.input-error {
    border: none;
    border-bottom: 2px solid red !important;
}
.bg-smoothe {
    background-color: #00A997;    
}
.btn-smoothe {
    background-color: #00A997;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.border-cuve {
    border-radius: 30px;
}
.kbtn {
     min-width: 100px;
}
.product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;     /* จำกัด 2 บรรทัด */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.range-btn button{
    margin-left:5px;
    padding:6px 12px;
    cursor:pointer;
}
#chart-sale {
    margin-top:20px;
}
/* ตัวกล่อง select */
.select2-container--default .select2-selection--multiple{
    
    padding:0.375rem 0.75rem;
    border:1px solid #ced4da;
    border-radius:.375rem;
    box-sizing:border-box;
    display:flex;
    align-items:center;
}

/* ข้อความด้านใน */
.select2-container--default 
.select2-selection--single 
.select2-selection__rendered{
    line-height:normal !important;
    padding-left:0 !important;
}

/* ลูกศร */
.select2-container--default 
.select2-selection--single 
.select2-selection__arrow{
    
    right:8px;
}

/* ตอน focus */
.select2-container--default.select2-container--focus 
.select2-selection{
    border-color:var(--bs-primary) !important;
    box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb), .25) !important;
}

.slide-product-wrapper {
    position: relative;
    width: 100%;
}

.slide-product-container{
    display: flex;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 10px;
}

.slide-product-container::-webkit-scrollbar{
    display: none;
}

.slide-product-box{
    width: 200px;
    height: 412px;
    border:1px solid #eee;
    border-radius: 10px;
    background: #fff;    
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding:12px;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.slide-product-box:hover{
     transform: scale(1);
}

.g-card{     
     max-width:100%;     
     background:#fff;
     border-radius:5px;
     padding:5px;    
}
.g-canvas {     
     height:60px !important;
}
.text-over-hide {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fade-container {
    transition: opacity .3s ease;
}

.fade-out {
    opacity: 0;
}

.fade-in {
    opacity: 1;
}
.smooth-change {
    transition: all .35s ease;
}

.smooth-loading {
    opacity: 0.4;
    filter: blur(3px);
    transform: translateY(5px);
}
#salesTable thead tr:nth-child(2) th {
    cursor: default !important;
}
.search-box {
      position: relative;
      width: 250px;              /* ขนาดเริ่มต้น */
      transition: width 0.4s ease;
    }
.search-box input {
     width: 100%;
     padding: 10px 10px 10px 40px; /* เว้นที่ด้านซ้ายสำหรับ icon */
     border-radius: 25px;          /* มุมโค้งมน */
     border: 1px solid #ccc;
     font-size: 16px;
     transition: all 0.4s ease;
}
.search-box .icon {
     position: absolute;
     top: 50%;
     left: 12px;
     transform: translateY(-50%);
     color: #888;
     font-size: 18px;
}
.search-box input:focus {
     outline: none;
     border-color: #00A997;
     box-shadow: 0 0 5px #16a085;
}
/* เมื่อ input focus ให้ search-box ขยายเต็มความกว้าง */
.search-box:focus-within {
     width: 30%;
}
.card-img-top{
    height:160px;
    object-fit:cover;
}
.view-btn.active{
    background:#13c2c2;
    color:white;
}

#salesTable {
    font-size: 12px;
    border:1px solid #eee;
}

#salesTable th {
    font-weight: 500;
    border:1px solid #eee;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-size: 12px;
}
.dataTables_info {
    font-size: 13px;
    color: #6c757d;
}
.dataTables_length select {
    height: 28px;
    padding: 2px 8px;
}

/* css search box */
/* ครอบ label */
.dataTables_filter label {
    position: relative;
}

/* input */
.dataTables_filter input {
    width: 250px;
    height: 38px;
    padding-left: 40px !important; 
    padding-right: 15px;
    border-radius: 50px !important;
    border: 1px solid #dcdcdc;
    outline: none;
    transition: all 0.25s ease;
}

/* ตอน focus */
.dataTables_filter input:focus {
    border-color: #1E88E5;
    box-shadow: 0 0 8px rgba(30,136,229,0.2);
}

/* icon */
.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9e9e9e;
    pointer-events: none;
}

/*---------------------*/
/* บังคับ row แรกให้เป็น flex */
.dataTables_wrapper .row:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
}

/* กัน Bootstrap จัดกลาง */
.dataTables_wrapper .row:first-child > div {
    display: flex;
    align-items: center;
}

/* ให้ length อยู่ซ้าย */
.dataTables_length {
    justify-content: flex-end !important;
    font-size: 13px;
    text-align: right !important;
    width: 100%;
    display: flex;
}

/* ให้ search อยู่ขวา */
.dataTables_filter {
    justify-content: flex-end !important;
    text-align: right !important;
}
.k-100 {
     min-width:100px;
}
.is-invalid + .select2 .select2-selection--single {
    border:1px solid red;
}
.color-circle{
     width:30px;
     height:30px;
     padding:0;
     border:none;
     border-radius:50%;
     overflow:hidden;
     cursor:pointer;
 }
 
 .color-circle::-webkit-color-swatch-wrapper{
     padding:0;
 }
 
 .color-circle::-webkit-color-swatch{
     border:none;
     border-radius:50%;
 }

/* ตอนกำลังลาก */
.dragging {
     background-color: #d4f8d4 !important;
     border: 2px dashed #28a745 !important;
 }
 
 /* placeholder ตอนเลื่อน */
 .sortable-ghost {
     background-color: #e9ffe9;
     border: 2px dashed #28a745;
 }
 .dragging {
     background-color: #d4f8d4 !important;
     border: 2px dashed #28a745 !important;
     transform: scale(1.02);
     box-shadow: 0 4px 10px rgba(0,0,0,0.15);
 }
 .drag-handle {
     cursor: grab;
     text-align: center;
     color: #888;
 }
 
 .drag-handle:active {
     cursor: grabbing;
 }
 
 .drag-handle i {
     font-size: 16px;
 }
#productTable tbody tr{
     font-size:13px;
     /* cursor:pointer; */
}
@media print {

     body *{
          visibility:hidden;
     }

     #printArea, #printArea *{
          visibility:visible;
     }

     #printArea{
          position:absolute;
          left:0;
          top:0;
          width:100%;
     }

     table{
          font-size:12px;
     }
     img{
          max-height:200px;
     }
}

.stock_table {
     border-collapse: collapse;     
}

/* เฉพาะ td, th ใน table นี้ */
.stock_table td,
.stock_table th {
     border: 1px solid #ccc;
     /*width: 120px;*/
     height: 28px;     
     padding: 2;
}

/* เฉพาะ input, select ใน table นี้ */
.stock_table input,
.stock_table select {
     width: 100%;
     height: 100%;
     border: none;
     outline: none;
     background: transparent;     
     font-size: 14px;
}

/* focus เฉพาะใน table นี้ */
.stock_table input:focus,
.stock_table select:focus {
     background: #e6f0ff;
}