:root {
                 --bg: #0b3a5a;
                 --bg-dark: #072a42;
                 --accent: #f8fafc;
                 --row: #f6f8fb;
                 --border: #dbe3ef;
                 --pill: #e7b85a;
             }
             
             * {
                 box-sizing: border-box
             }
             /* กล่องตาราง + สกอร์ลบาร์ */
             
             .card-cod {
                 /* max-width: 880px;
     margin-inline: auto;
     background: white;
     border: 1px solid var(--border);
     border-radius: 18px;
     box-shadow: 0 10px 30px rgba(3, 20, 49, .08);
     overflow: hidden; */
             }
             
             .card-header h2 {
                 margin: 26px 0 0;
                 font-size: 1.15rem;
                 font-weight: 700;
                 letter-spacing: .2px;
             }
             
             .table-wrap {
                 /* ความสูงกำหนดได้ตามต้องการ */
                 max-height: 800px;
                 /* << ทำให้มี scrollbar */
                 overflow: auto;
                 border-top: 1px solid var(--border);
             }
             
             table {
                 width: 100%;
                 border-collapse: separate;
                 border-spacing: 0;
                 /* min-width: 700px; */
                 /* กันบีบคอลัมน์เมื่อจอเล็ก */
             }
             
             thead th {
                 position: sticky;
                 top: 0;
                 background: var(--bg-dark);
                 color: #e6eef7;
                 text-align: center;
                 padding: 12px 14px;
                 font-weight: 700;
                 font-size: .95rem;
                 z-index: 2;
             }
             
             thead th:nth-child(2),
             thead th:nth-child(3) {
                 text-align: right;
                 width: 140px;
             }
             
             tbody tr {
                 background: #fff;
                 font-size: 12px;
             }
             
             tbody tr:nth-child(even) {
                 background: var(--row)
             }
             
             td {
                 padding: 10px 14px;
                 border-bottom: 1px solid var(--border);
                 vertical-align: top;
                 line-height: 1.3;
             }
             
             td.num,
             td.pct {
                 text-align: right;
                 white-space: nowrap;
             }
             /* แถวหัวกลุ่ม A., B. (แถบสีน้ำเงินเข้ม) */
             
             .group {
                 background: #0f4b75 !important;
                 color: #fff;
                 font-weight: 800;
             }
             
             .group td {
                 border-bottom: none
             }
             
             .group .num,
             .group .pct {
                 color: #fff
             }
             /* หัวข้อย่อยระดับ A1, A2 (เน้นตัวหนา) */
             
             .sub {
                 background: #e9f2fb !important;
                 font-weight: 800;
             }
             /* ระดับรายละเอียด (ย่อหน้าเข้า) */
             
             .lvl-1 {
                 padding-left: 28px;
             }
             
             .lvl-2 {
                 padding-left: 44px;
             }
             
             .muted {
                 color: #334155;
                 font-weight: 800;
             }
             /* สกอร์ลบาร์สวย ๆ (เฉพาะ Chromium/Edge/Chrome/Safari) */
             
             .table-wrap::-webkit-scrollbar {
                 height: 12px;
                 width: 12px;
             }
             
             .table-wrap::-webkit-scrollbar-track {
                 background: #ecf1f9;
                 border-radius: 10px;
             }
             
             .table-wrap::-webkit-scrollbar-thumb {
                 background: #b8c9e6;
                 border-radius: 10px;
                 border: 3px solid #ecf1f9;
             }
             
             .table-wrap::-webkit-scrollbar-thumb:hover {
                 background: #96b0db;
             }
             .total td {
                background: #0f4b75 !important;
                color: #fff;
                font-weight: 800;
                border-top: 2px solid #999;
              }
             /* จอเล็ก: ย่อฟอนต์นิดหน่อย */
             
             @media (max-width: 640px) {
                 thead th,
                 td {
                     padding: 9px 10px;
                     font-size: .92rem
                 }
             }