body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin:0; padding:0; background:#f3f4f6; color:#111827;
}

/* Preview */

         @page {
            size: A4 portrait;
            margin: 0;
        } 

        * {
            box-sizing: border-box;
        } 

        .page-wrapper {
            display: flex;
            justify-content: center;
            padding: 10px 0;
        }


         /* A4 @ 150dpi ~ 1240x1754 */
        .page {
            position: relative;
            width: 750px;
            height: 1070px;
            background: #fff;
            overflow: hidden;
            /* background-image set by JS: CCI21112568.jpg */
            background-repeat: no-repeat;
            background-position: top center;
            background-size: contain;
            /* บีบ/ขยายให้พอดี A4 */
        }

        .cancelled-watermark {
            position: absolute;
            top: 58%;
            left: 50%;
            transform: translate(-52%, -120%) rotate(-45deg);

            font-family: "Arial MT Black", Arial, sans-serif;
            font-size: 60mm;
            /*font-size: 35mm; */
            /* ใหญ่ระดับเดียวกับภาพตัวอย่าง */
            font-weight: 900;

            color: rgba(69, 66, 70, 0.582);
            letter-spacing: 4mm;

            border-bottom-style:  solid;
            border-top-style:  solid;         

            white-space: nowrap;
            pointer-events: none;
            z-index: 100;
        }

         /* ------------------- Layout เดิมของคุณ -------------------- */
       .header-block {
            position: absolute;
            top: 148px;
            left: 55px;
            right: 120px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            line-height: 1.3;
        }

        .header-left .line {
            white-space: nowrap;
        }

       .line-supname {
            /*position: absolute;*/
            left: 0px;
            top: 0px;
            /* display: flex;*/
        }

        .line-Addr {
            /*position: absolute;*/
            left: 0px;
            top: 25px;
            /* display: flex;*/
        }

        .line-tel {
            position: absolute;
            left: 0px;
            top: 58px;
            /* display: flex;*/
        }


          .line-contact {
            position: absolute;
            left: 35px;
            top: 79px;
            /* display: flex;*/
        }

        .pv_header-right {
            text-align: center;
            position: absolute;
            top: 18px;
            left: 470px;
            font-size: 16px;
            width: 200px;

        }

        .credit-line {
            position: absolute;
            top: 297px;
            left: 505px;
            right: 35px;
            display: flex;
            justify-content: space-between;
            font-size: 16px;
        }

/* จัดข้อความในหัวตารางให้อยู่กึ่งกลาง */
#items-table thead th {
    text-align: center;
}

        .items-header-row {
            position: absolute;
            top: 330px;
            left: 120px;
            right: 120px;
            display: flex;
        }

        .col-no {
            text-align: center;
            width: 48px;
        }

        .col-code {
            width: 70px;
            /*padding: 0px 0px 0px 5px;*/
           text-align: center;
        }

        .col-desc {
            /* flex: 1;*/
            width: 283px;
            padding: 0px 0px 0px 5px;
        }

        .col-qty {
            width: 65px;
            text-align: right;
        }

        .col-price {
            width: 114px;
            text-align: right;
            padding: 0px 10px 0px 0px;
        }

        .col-amt {
            width: 115px;
            text-align: right;
            padding: 0px 12px 0px 0px;
        }

        .items-body {
            position: absolute;
            top: 365px;
            left: 24px;
            right: 0px;
            font-size: 10px;
        }

        .item-row,
        .remark-row {
            display: flex;
            white-space: nowrap;
        }

        /* totals */
        .totals-block {
            position: absolute;
            left: 450px;
            bottom: 234px;
            width: 280px;
            line-height: 1.6;
        }

        /* totals text */
        .totals-text-block {
            justify-items: center;
            position: absolute;
            left: 65px;
            bottom: 255px;
            width: 355px;
        }

        .totals-row {
            display: flex;
            justify-content: space-between;
            white-space: nowrap;
        }

        /* ===== Delivery Location Checkboxes ===== */
       .delivery-check {
            position: absolute;
            width: 14px;
            height: 14px;
            box-sizing: border-box;
            background: #ffffff00;
        }

        /* ตำแหน่งตามฟอร์มจริง */
       .delivery-check.blue {
            top: 923px;
            /* 🔵 ปรับตามตำแหน่งจริง */
           left: 49px;
        }

       .delivery-check.red {
            top: 923px;
            /* 🔴 อยู่บรรทัดเดียวกัน */
           left: 400px;
        }

        /* เมื่อถูกติ๊ก */
       .delivery-check.checked::after {
            content: "✓";
            position: absolute;
            left: 1px;
            top: -13px;
            font-size: 22px;
            font-weight: bold;
        }


    #pv_VATRAT, #pv_DISCRAT {
    display: inline-block; /* ทำให้มันมีที่ว่างให้จัดวาง */
    text-align: right;
    width: 165px; /* จำเป็นต้องกำหนดความกว้างด้วย เพื่อให้เห็นระยะชิดขวาที่ชัดเจน */
}



/* สไตล์ของแว่นขยาย */
/*
.card.preview {
    position: relative;
    overflow: hidden; /* ป้องกันไม่ให้ภาพล้นออกนอกการ์ดเวลาซูม *//*
    cursor: default;
}

#magnifier {
    position: absolute;
    display: none; /* ซ่อนไว้ก่อนเริ่มต้น *//*
    width: 150px;
    height: 150px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    pointer-events: none; /* ป้องกันไม่ให้แว่นขยายบังการขยับเมาส์ *//*
    background-repeat: no-repeat;
    z-index: 1000;
} 


/* กรอบวงกลมแว่นขยาย *//*

#htmlMagnifier {
    position: absolute;
    display: none;
    width: 200px;
    height: 200px;
    border: 3px solid #333;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    overflow: hidden; /* ซ่อนส่วนที่เกินวงกลม */
    pointer-events: none; /* ป้องกันเมาส์ติดขัด *//*
    background: #fff;
    z-index: 9999;
}*/

/* ตัวจำลองหน้าเว็บที่จะเอามาใส่ในแว่นขยาย *//*
#htmlMagnifierContent {
    position: absolute;
    transform: scale(2.5); /* ซูม 250% *//*
    transform-origin: top left;
    pointer-events: none;
}   */



/* Preview */

/*Popup Context Menu*/
/* --- CSS สำหรับ Popup ผลการค้นหา --- */
  .search-popup {
    display: none; /* ซ่อนไว้ก่อน เริ่มแสดงเมื่อค้นหา */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 1000;
    width: 400px;
    height: 300px;
    box-sizing: border-box;
    max-width: 900px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }

  .search-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }

  .search-results-scroll {
    height: 220px;
    overflow: auto;
  }

  .search-results-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
  }
  
  /* ฉากหลังดำโปร่งแสงเมื่อ Popup เปิด */
  .popup-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 999;
  }

  /* --- CSS สำหรับ เมนูคลิกขวา (Context Menu) --- */
  .context-menu {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.15);
    border-radius: 4px;
    padding: 5px 0;
    z-index: 2000;
    min-width: 120px;
  }
  .context-menu-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
  }
  .context-menu-item:hover {
    background-color: #f5f5f5;
  }
  .context-menu-item.danger {
    color: #d9534f;
  }
  .context-menu-item.danger:hover {
    background-color: #fdf2f2;
  }

/* ไฮไลต์สีพื้นหลังเมื่อเอาเมาส์ไปวางบนแถวของตารางใน Popup */
#table tbody tr:hover {
  background-color: #f1f5f9; /* สีฟ้า-เทาอ่อนๆ ให้ดูสบายตา */
  cursor: pointer;          /* เปลี่ยนรูปเมาส์เป็นรูปมือเพื่อให้รู้ว่าสั่งงานต่อได้ */
  transition: background-color 0.15s ease; /* เพิ่มความสมูทตอนสีเปลี่ยน */
}

/* เพิ่มเติม: แต่งขอบและฟอนต์ในตารางให้ดูแบ่งเป็นแถวชัดเจนขึ้น */
#table tbody tr {
  border-bottom: 1px solid #a7c9f5;
}

/* ไฮไลต์สีค้างไว้สำหรับแถวที่กำลังถูกคลิกขวาทำงานอยู่ */
#table tbody tr.context-active {
  background-color: #a7c9f5 !important;
}

        /*Popup Context Menu*/



.login-body{
  display:flex; align-items:center; justify-content:center; min-height:100vh;
}
.login-card{
  background:#fff; padding:24px 28px; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08); width:320px;
}
.login-card h2{ margin-top:0; margin-bottom:16px; }

label{
  display:block;
  margin-top:8px;
  font-size:14px;
  color:#4b5563;
}

/* ปรับให้ input เต็มความกว้างแบบในภาพใหม่ */
input{
  width:100%;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #d1d5db;
  margin-top:4px;
  box-sizing:border-box;
}

button{
  margin-top:0px; width:auto; padding:9px 10px;
  border-radius:999px; border:none; cursor:pointer;
  background:#ffffff; color:#000000; font-weight:600;
}
.muted{ font-size:12px; color:#6b7280; margin-top:8px; }

textarea{
  width:100%;
  border-radius:10px;
  cursor:pointer;
  border:1px solid #d1d5db;
  padding:8px 10px;
  box-sizing:border-box;
}

.navbar{
  background:#111827; color:#e5e7eb; padding:10px 16px;
  display:flex; gap:10px; align-items:center;
}
.navbar a{
  color:#e5e7eb; text-decoration:none; padding:6px 10px; border-radius:999px;
}
.navbar a.active{ background:#2563eb; }
.navbar .right{ margin-left:auto; }

.container{
  max-width:1480px;
  margin:16px auto;
  padding:0 16px;

  display:grid;
  grid-template-columns: 1fr 350px;
  gap:20px;
}
.card{
  background:#fff; 
  padding:16px 18px; 
  border-radius:12px;
  box-shadow:0 5px 20px rgba(0,0,0,.04);
}

.main{
    /* คอลัมหลัก */
}

.preview{
    /* คอลัม preview */
    font-family: 'Leelawadee', sans-serif;
    font-weight: bold;    
    position:sticky;
    width: 560px;
    top:80px;
}

.row{
  display:flex;
  gap:40px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.col{
  flex:1 1 0;
  min-width:180px;
}

/* คอลัมน์ที่ขนาดตามเนื้อหา (ใช้กับปุ่ม Gen เลขที่) */
.col-auto{
  flex:0 0 auto;
}

/* กลุ่มฟอร์มให้เว้นระยะสวย ๆ */
.form-group{
  margin-bottom:10px;
}

/* เลเอาท์หัวกระดาษ */
.header-layout{
  align-items:flex-start;
}

/* ให้ฝั่งซ้ายกับขวาสัดส่วนใกล้เคียงกับภาพ (ซ้ายกว้างกว่านิดหน่อย) */
.header-left{
  flex:1.1;
}
.header-right{
  flex:1;
}

/* แถวเล็กภายใน header-right */
.small-gap{
  gap:8px;
  margin-bottom:6px;
}

/* ตารางรายการ */
.table{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
}
.table th,.table td{
  padding:6px 8px;
  border-bottom:1px solid #e5e7eb;
  font-size:13px;
}
.table th{
  background:#f9fafb;
  text-align:left;
}

.btn{ 
  border-radius:6px;
  font-size:13px;
  cursor:pointer;
  border:1px solid #98dde9;
  background:#c6ecff;
}
.btn.login{background:#195ceb; color:#ffffff; font-weight:600; }
.btn.danger{ background:#fcfcfc; border-color:#dc2626; color:#b91c1c; }
.btn.ghost{ background:transparent; }

input[type="number"]{
  text-align:right;
}

/* dropdown supplier */
.product-search-field {
  position:relative;
  display:flex;
  flex:1 1 100%;
  min-width:0;
  flex-wrap:nowrap;
  align-items:center;
  gap:10px;
}

.product-search-field label {
  flex:0 0 auto;
  margin:0;
}

.product-search-field input {
  width:100%;
  margin-top:0;
}

.product-search-input-wrap {
  position:relative;
  flex:0 1 504px;
  width:800px;
  max-width:calc(100% - 100px);
}

.product-search-input-wrap .dropdown-list {
  top:calc(100% + 4px);
  left:0;
  width:100%;
}

.dropdown-list {
  position:absolute;
  background:#cdd0d5;
  border:1px solid #1b6ebb;
  border-top:none;
  width:28%;
  max-height:240px;
  overflow-y:auto;
  z-index:9999;
  display:none;
}

.dropdown-item {
  padding:8px 12px;
  cursor:pointer;
  border-bottom:1px solid #eef2f6;
}

.dropdown-item:hover {
  background:#f3f6ff;
}

.supplier-empty-message {
  padding:10px 12px;
  color:#000;
}

.supplier-empty-actions {
  display:flex;
  justify-content:flex-start;
  gap:8px;
  padding:0 12px 10px;
}

.supplier-empty-actions .btn.ghost {
  background:#c6ecff;
  color:#000;
}

.supplier-empty-actions .btn:not(.ghost) {
  background:#166534;
  border-color:#166534;
  color:#fff;
}

.product-empty-message {
  padding:10px 12px;
  color:#000;
}

.product-empty-actions {
  display:flex;
  justify-content:flex-start;
  gap:8px;
  padding:0 12px 10px;
}

.product-empty-actions .btn.ghost {
  background:#c6ecff;
  color:#000;
}

.product-empty-actions .btn:not(.ghost) {
  background:#166534;
  border-color:#166534;
  color:#fff;
}

/* สถานที่ในการจัดส่ง */
.delivery-locat-card{
  margin-top:12px;
  padding:10px 12px 12px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fafafa;
}
.delivery-locat-label{
  margin-top:0;
  margin-bottom:4px;
}

/* กล่องรูปแบบราคาให้เหมือนในภาพใหม่ */
.price-mode-card{
  margin-top:12px;
  padding:10px 12px 12px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fafafa;
}
.price-mode-label{
  margin-top:0;
  margin-bottom:4px;
}

/* จัด radio แนวนอน */
.radio-inline {
  display:flex;
  align-items:center;
  gap:40px;
  white-space:nowrap;
}
.radio-inline label {
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}


/*products.html*/
/*popup*/
.qu-wrapper {
  position: relative;
}

.popup {
  position: absolute;
  top: calc(100% + 4px); /* ใต้ input */
  left: 0;
  width: 100%;

  background: #bebebc4f;
  border: 1px solid #ccc;
  border-radius:10px;
  max-height: 200px;
  overflow-y: auto;

  z-index: 9999; /* 🔥 สำคัญ */
  display: none;

  /* 🔥 ทำให้ไม่ดัน layout แน่นอน */
  pointer-events: auto;
}

.popup-item {
  padding: 6px 10px;
  cursor: pointer;
}

.popup-item:hover {
  background: #adafb1;
}
/*popup*/
 .po-number-reserved {
  background-color: #fff3a3 !important;
  border-color: #d6a700;
}

.po-gen-status {
  color: #9a5b00;
  font-size: 0.9em;
  font-weight: normal;
}