.table-card {
    position: relative;
    border-radius: 20px;
    padding: 10px;
    overflow: hidden;
}

/* ============================================================================================== */
/* =========================================== table section ==================================== */
/* ============================================================================================== */

.table-section {
    position: relative;
    /* border-radius: var(--radius-3xl); */
    overflow: hidden;
}

.table-section table,
.table-section thead,
.table-section tbody,
.table-section tfoot,
.table-section tr,
.table-section th,
.table-section td {
    position: relative;
}

.table-section table {
    width: 100%;
}


/* --------------------------------------------------------------- */
/* ---------------------------- style ---------------------------- */
/* --------------------------------------------------------------- */

.table-style {}

/* style border */
table.table-style-border {
    border-radius: var(--customize-table-border-radius);
    overflow: hidden;
    border: 1px solid rgba(var(--customize-color-black), 0.1);
    border-spacing: 0;
    border-collapse: separate;
}

table.table-style-border th,
table.table-style-border td {
    border-bottom: 1px solid rgba(var(--customize-color-black), 0.1);
    border-right: 1px solid rgba(var(--customize-color-black), 0.1);
}

table.table-style-border tr:last-child th,
table.table-style-border tr:last-child td {
    border-bottom: none;
}

table.table-style-border th:last-child,
table.table-style-border td:last-child {
    border-right: none;
}

table.table-style-border .bg-highlight {
    background-color: rgba(var(--customize-color-gray-light), 1);
}

/* style bg */
table.table-style-bg-color {
    border-radius: var(--customize-table-border-radius);
    overflow: hidden;
    background-color: rgba(var(--customize-color-gray), 0.5);
}

table.table-style-bg-color tr:not(:last-child) {
    /* border-bottom: 1px solid color-mix(in oklab, var(--color-white) 100%, transparent); */
}

table.table-style-bg-color .bg-highlight {
    background-color: rgba(var(--customize-color-gray-light), 1);
}

/* 
table.table-style-bg-color .hover\:bg-highlight:hover {
    background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
} */

/* ============================================================================================== */
/* ======================================= table sticky section ================================= */
/* ============================================================================================== */

.table-sticky-section {
    position: relative;
    border-radius: 10px;
    overflow-x: auto;
    /* เน้นเฉพาะแนวนอน */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /*  ช่วยให้เลื่อนลื่นบน iOS */
    display: block;
    width: 100%;
}

.table-sticky-section {
    /* height: 400px; */
}

.table-sticky-section .table-sticky-content,
.table-sticky-section .table-sticky-content[data-overlayscrollbars-contents] {
    display: block !important;
    position: relative;
    width: max-content;
    min-width: 100%;
    min-height: max-content;
}

.table-sticky-scrollbar {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* tableSticky ใช้ SimpleBar เป็น scroll container เดียวสำหรับแกน X/Y */
.table-sticky-section[data-simplebar="init"],
.table-sticky-scrollbar[data-simplebar="init"] {
    overflow: hidden !important;
}

/* แสดง scrollbar ของ tableSticky ตลอด แม้ SimpleBar จะใส่ visibility:hidden แบบ inline */
.table-sticky-section[data-simplebar="init"] .simplebar-track,
.table-sticky-scrollbar[data-simplebar="init"] .simplebar-track {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.table-sticky-section[data-simplebar="init"] .simplebar-track.simplebar-vertical,
.table-sticky-scrollbar[data-simplebar="init"] .simplebar-track.simplebar-vertical {
    width: 10px;
}

.table-sticky-section[data-simplebar="init"] .simplebar-track.simplebar-horizontal,
.table-sticky-scrollbar[data-simplebar="init"] .simplebar-track.simplebar-horizontal {
    height: 10px;
}

.table-sticky-section[data-simplebar="init"] .simplebar-track,
.table-sticky-scrollbar[data-simplebar="init"] .simplebar-track {
    /* background-color: rgba(var(--customize-color-black), 0.03); */
    border-radius: 10px;
}

.table-sticky-section[data-simplebar="init"] .simplebar-scrollbar::before,
.table-sticky-scrollbar[data-simplebar="init"] .simplebar-scrollbar::before {
    background-color: rgba(var(--customize-color-black), 0.1);
    opacity: 1 !important;
}

.table-sticky-section[data-simplebar="init"] .simplebar-scrollbar:hover::before,
.table-sticky-scrollbar[data-simplebar="init"] .simplebar-scrollbar:hover::before {
    background-color: rgba(var(--customize-color-black), 0.2);
}

.table-sticky-section td:not(.sticky) {
    cursor: grab;
    /* เปลี่ยนรูปเมาส์เป็นรูปมือ */
}

.table-sticky-section:active td:not(.sticky) {
    cursor: grabbing;
    /* เปลี่ยนเป็นรูปมือกำขณะลาก */
}

/* 1. ส่วนที่ไม่ใช่ sticky ให้แสดงเมาส์เป็นรูปมือ และใส่ข้อความเมื่อชี้ */
#product-code-table td:not(.sticky),
#product-code-table th:not(.sticky) {
    cursor: grab;
}

/* 2. เมื่อกำลังลาก (active) ให้เปลี่ยนเป็นมือกำ */
.table-sticky-section.active {
    cursor: grabbing !important;
    user-select: none;
    /* สำคัญ: ป้องกันการเลือกข้อความขณะลาก */
}

/* 3. ส่วนที่เป็น sticky ให้ใช้เมาส์ปกติ */
#product-code-table .sticky {
    cursor: default;
}

.table-sticky {
    position: relative;
    /* width: 100%;
    height: 100%;     */

    display: table;
    /* มั่นใจว่าเป็นพฤติกรรมตาราง */
    width: max-content;
    /* สำคัญ: ให้กว้างตามเนื้อหาข้างใน ไม่ใช่กว้างตามหน้าจอ */
    min-width: 100%;
    /* ถ้าเนื้อหาน้อย ให้ขยายเต็มหน้าจอปกติ */
    border-collapse: separate;
    /* สำคัญมากสำหรับ Sticky: ต้องใช้ separate ไม่ใช่ collapse */
    border-spacing: 0;
    /* table-layout: fixed; 
    width: 100%; */
}

.table-sticky-section.sticky-disable .table-sticky {
    width: inherit;
}

.table-sticky .t-head,
.table-sticky .t-body,
.table-sticky .t-footer,
.table-sticky .t-tr,
.table-sticky .t-th,
.table-sticky .t-td {
    position: relative;
}

.table-sticky .t-head,
.table-sticky .t-body,
.table-sticky .t-footer,
.table-sticky .t-tr {
    /* width: 100%; */
}

.table-sticky .t-th,
.table-sticky .t-td {
    /* white-space: nowrap; */
    padding: 15px;
    background-color: rgba(var(--customize-color-white), 1);
    z-index: 1;
    word-wrap: break-word;
    word-break: break-all;
}

.table-sticky .t-head {
    /* display: table-header-group; */
}

.table-sticky-section.bg-color-white .table-sticky .t-head {
    background-color: rgba(var(--customize-color-white), 1);
}

.table-sticky .t-body {
    /* display: table-row-group; */
}

.table-sticky .t-tr {
    /* display: table-row; */
    /* display: flex; */
}

.table-sticky .t-th {
    font-weight: 600;
}

.table-sticky .t-th.sticky,
.table-sticky .t-td.sticky {
    position: sticky;
}

.table-sticky .t-tr.small .t-th {
    font-size: 12px;
    line-height: 20px;
}

.table-sticky .t-th.sticky[class*="sticky-pos-left"],
.table-sticky .t-td.sticky[class*="sticky-pos-left"] {
    left: 0;
    background: rgba(var(--customize-color-white), 1);
    /* background-color: #ccc */
}

.table-sticky .t-th.sticky[class*="sticky-pos-right"],
.table-sticky .t-td.sticky[class*="sticky-pos-right"] {
    right: 0;
    background: rgba(var(--customize-color-white), 1);
    /* background-color: #ccc */
}

.table-sticky .t-tr>.t-td:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.table-sticky .t-tr:hover>.t-td:before {
    background-color: rgba(var(--customize-color-primary-light), 0.5);
}

.table-sticky .t-tr:hover>.t-td.hover-bg-hl:before {
    background-color: rgba(var(--customize-color-primary-light), 1);
}

.table-sticky .t-tr.space:hover>.t-td:before {
    background: none !important;
}

.table-sticky .t-tr.space {
    height: 100%;
}

.table-sticky .t-tr.space>.t-td {
    padding: 0 !important;
}

.table-sticky .sticky-pos-left-start {}

.table-sticky .sticky-pos-left-end {
    border-right: 1px solid rgba(var(--customize-color-black), 0.1);
}

.table-sticky .sticky-pos-right-start {
    border-left: 1px solid rgba(var(--customize-color-black), 0.1);
}

.table-sticky .sticky-pos-right-end {}


.table-sticky .col-w-auto {
    width: auto;
    flex: 1 0 0;
    width: 500px;
}

.table-sticky .col-w-50 {
    width: 50px;
}

.table-sticky .col-w-100 {
    width: 100px;
}

.table-sticky .col-w-150 {
    width: 150px;
}

.table-sticky .col-w-200 {
    width: 200px;
}

.table-sticky .col-w-250 {
    width: 250px;
}

.table-sticky .col-w-300 {
    width: 300px;
}

.table-sticky .col-w-350 {
    width: 350px;
}

.table-sticky .col-w-400 {
    width: 400px;
}

.table-sticky .col-w-450 {
    width: 450px;
}

.table-sticky .col-w-500 {
    width: 500px;
}


/* head */
.table-sticky .t-head {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px;
}

.table-sticky .t-head .t-tr {
    /* background-color: rgba(var(--customize-color-black),0.1);
    border-radius: 15px; */
    /* height: 50px; */
    /* line-height: 40px; */
}

.table-sticky .t-head .t-tr .t-th {
    min-height: 20px;
}

.table-sticky .t-head .t-tr .t-th:not(.sticky) {
    background-color: rgba(230, 230, 230, 0.6);
}

.table-sticky .t-head .t-tr .t-th,
.table-sticky .t-head .t-tr .t-th.bg-color {
    background-color: rgba(230, 230, 230, 1);
    /* background-color: rgba(var(--customize-color-black),0.1); */
}

/* body */
.table-sticky .t-body {
    padding: 10px;
}

.table-sticky .t-body .t-tr+.t-tr .t-td {
    border-top: 1px solid rgba(var(--customize-color-black), 0.08);
}

.table-sticky .bg-color-gray-light {
    background-color: rgba(230, 230, 230, 0.1);
}


/* --------------------------------------------------------------- */
/* ------------------------------ head ---------------------------- */
/* --------------------------------------------------------------- */

.table-sticky .t-head {
    z-index: 10;
}

.table-sticky .t-head .t-tr.sticky {
    z-index: 10;
}

.table-sticky .t-head .t-tr.sticky+.t-tr {
    z-index: 0;
}

.table-sticky .t-head .t-tr .t-th.sticky {
    z-index: 10;
}

.table-sticky .t-head .t-th.boder-top-white {
    border-top: 1px solid rgba(var(--customize-color-white), 1);
}

.table-sticky .t-head .t-th.boder-left-white {
    border-left: 1px solid rgba(var(--customize-color-white), 1);
}

/* --------------------------------------------------------------- */
/* ------------------------------ body ---------------------------- */
/* --------------------------------------------------------------- */

.table-sticky .t-body {
    z-index: 5;
}

.table-sticky .t-body .t-td.sticky {
    z-index: 10;
}

.table-sticky .t-head .t-th.border-left-dashed,
.table-sticky .t-body .t-td.border-left-dashed {
    border-left: 1px dashed rgba(var(--customize-color-black), 0.1);
}

.table-sticky-scrollbar.active {
    cursor: grabbing !important;
    user-select: none;
}