@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.olwso25aue.bundle.scp.css';

/* /Components/CvDetailComponent.razor.rz.scp.css */
/* CSS หน้าจอปกติ */
.avatar-xl[b-ezra2nw64u] {
    width: 80px; height: 80px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
}

.print-only[b-ezra2nw64u] { display: none; }

/* CSS ตกแต่งตอน Print (GCME Theme) */
@media print {
    .screen-only[b-ezra2nw64u] { display: none !important; }
    .print-only[b-ezra2nw64u] { display: block !important; }

    /* เส้นขอบและความหนา */
    .gcme-header-box[b-ezra2nw64u], 
    .table-bordered[b-ezra2nw64u], 
    .gcme-table[b-ezra2nw64u], 
    .gcme-table th[b-ezra2nw64u], 
    .gcme-table td[b-ezra2nw64u],
    .section-bar[b-ezra2nw64u],
    .photo-box[b-ezra2nw64u] {
        border-color: #000000 !important;
    }

    /* ตกแต่ง Header และ ตาราง */
    .section-bar[b-ezra2nw64u] {
        background-color: #808080 !important; /* สีเทา */
        color: white !important;
        border: 1px solid #000000 !important;
        border-bottom: none !important;
        padding: 4px 8px;
        font-weight: bold;
    }

    .bg-header-blue th[b-ezra2nw64u] {
        background-color: #9cc2e5 !important; /* สีฟ้า */
        color: black !important;
        text-align: center;
        vertical-align: middle;
    }

    .table-bordered[b-ezra2nw64u] {
        border: 1px solid #000000 !important;
    }
    
    .table-bordered td[b-ezra2nw64u], .table-bordered th[b-ezra2nw64u] {
        border: 1px solid #000000 !important;
        padding: 4px !important;
    }

    .small[b-ezra2nw64u], small[b-ezra2nw64u], table[b-ezra2nw64u] {
        font-size: 10pt !important;
    }
    
    .photo-box[b-ezra2nw64u] {
        width: 100px; height: 120px;
        border: 1px solid #000000;
        background: #f0f0f0;
        display: flex; align-items: center; justify-content: center;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-hnp8cpx1fh] {
  position: relative;
  display: flex;
  flex-direction: column;
}

main[b-hnp8cpx1fh] {
  flex: 1;
}

.sidebar[b-hnp8cpx1fh] {
  background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-hnp8cpx1fh] {
  background-color: #f7f7f7;
  border-bottom: 1px solid #d6d5d5;
  justify-content: flex-end;
  height: 3.5rem;
  display: flex;
  align-items: center;
}

.top-row[b-hnp8cpx1fh]  a,
.top-row[b-hnp8cpx1fh]  .btn-link {
  white-space: nowrap;
  margin-left: 1.5rem;
  text-decoration: none;
}

.top-row[b-hnp8cpx1fh]  a:hover,
.top-row[b-hnp8cpx1fh]  .btn-link:hover {
  text-decoration: underline;
}

.top-row[b-hnp8cpx1fh]  a:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 991.98px) {
  .top-row[b-hnp8cpx1fh] {
    justify-content: space-between;
  }

  .top-row[b-hnp8cpx1fh]  a,
  .top-row[b-hnp8cpx1fh]  .btn-link {
    margin-left: 0;
  }

  /* จอเล็ก sidebar วางเป็นแถวบนสุด ในนั้นมีชื่อระบบ + ปุ่มแฮมเบอร์เกอร์
       ล็อกไว้ให้ติดขอบบนตลอด เลื่อนหน้าลงไปแล้วยังกดเปิดเมนูได้
       (เดิมเลื่อนลง 684px แถบนี้ก็หลุดจอไปแล้ว ต้องเลื่อนกลับขึ้นสุดถึงจะกดเมนูได้) */
  .sidebar[b-hnp8cpx1fh] {
    position: sticky;
    top: 0;
    z-index: 1035;
  }
}

@media (min-width: 992px) {
  .page[b-hnp8cpx1fh] {
    flex-direction: row;
  }

  .sidebar[b-hnp8cpx1fh] {
    width: 275px;
    height: 100vh;
    position: sticky;
    top: 0;
  }

  .top-row[b-hnp8cpx1fh] {
    position: sticky;
    top: 0;
    z-index: 1030;
  }

  .top-row.auth[b-hnp8cpx1fh]  a:first-child {
    flex: 1;
    text-align: right;
    width: 0;
  }

  .top-row[b-hnp8cpx1fh],
  article[b-hnp8cpx1fh] {
    padding-left: 2rem !important;
    padding-right: 1.5rem !important;
  }
}

.dropdown-item[b-hnp8cpx1fh] {
  margin-left: 0rem !important;
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* NavMenu.razor.css */

.navbar-toggler[b-nj04crnsoa] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-nj04crnsoa] {
    height: 3.5rem;
    background-color: rgba(0, 0, 0, 0.4);
}

.navbar-brand[b-nj04crnsoa] {
    font-size: 1.1rem;
}

.bi[b-nj04crnsoa] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    /* height: 1.25rem; */
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

/* ส่วนของ Link หลัก */
.nav-item[b-nj04crnsoa] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.nav-item:first-of-type[b-nj04crnsoa] {
    padding-top: 1rem;
}

.nav-item:last-of-type[b-nj04crnsoa] {
    padding-bottom: 1rem;
}

.nav-link[b-nj04crnsoa], [b-nj04crnsoa] .nav-link {
    color: #d7d7d7 !important;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    transition: all 0.2s ease;
    font-size: 0.9rem; /* Force size */
}

.nav-link:hover[b-nj04crnsoa], [b-nj04crnsoa] .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white !important;
}

/* หัวข้อแม่ (Parent) ที่ถูก Active */
.menu-header[b-nj04crnsoa], [b-nj04crnsoa] .menu-header {
    cursor: pointer;
    justify-content: space-between;
    font-weight: 600;
}

.menu-header.active-group[b-nj04crnsoa],
.menu-header.active[b-nj04crnsoa],
[b-nj04crnsoa] .menu-header.active-group,
[b-nj04crnsoa] .menu-header.active {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.15);
    /* ไฮไลท์หัวข้อแม่ */
    border-left: 4px solid #1b6ec2;
    /* แถบสีด้านซ้าย */
}

/* Animation เล็กน้อยตอนเปิดเมนู */
@keyframes slideDown-b-nj04crnsoa {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* หมายเหตุ 7 ส.ค. 2026: เมนูมือถือของหน้านี้เคยถูกเปลี่ยนเป็นเมนูวงกลมแบบ Seller Hub
   (commit 11ccefc, eb7482c) แล้วถูกสั่งย้อนกลับมาเป็นแผ่นเลื่อนตามด้านล่างนี้ (commit 7e83824)
   ถ้าจะกลับไปทำเมนูวงกลมอีก ตัวเลขที่วัดไว้แล้วบนจอ 375x812 คือ
   วง 72px ใส่ได้สูงสุด 6 ใบ / 7-8 ใบต้องย่อเหลือ 64px / 9-10 ใบไม่มีทางลงจอ
   และ Admin เห็นเมนูแม่ 10 กลุ่ม จึงต้องแบ่งเป็นชุด */

/* Responsive: จอเล็กกว่า 992px (มือถือ + แท็บเล็ต)
   ลูกค้าแจ้งว่ากดแฮมเบอร์เกอร์แล้วเมนูบังจน "บังจอ" — วัดที่ 375x812 ได้ 748px คิดเป็น 92% ของจอ
   เพราะเมนูกางอยู่ในสายเอกสาร ดันความสูง .sidebar ไปเรื่อย ๆ ตามจำนวนรายการ
   เปลี่ยนเป็นแผ่นเลื่อนขึ้นจากขอบล่าง (bottom sheet) สูงไม่เกินครึ่งจอ เนื้อหาด้านบนจึงยังเห็น
   เมนูแม่-เมนูลูกใช้โครงเดิมทั้งหมด กดกลุ่มแล้วกางลูกในที่ ไม่ได้เปลี่ยนวิธีทำงาน */
@media (max-width: 991.98px) {
    /* specificity 0,2,0 ชนะ .d-flex (0,1,0) ที่เป็น !important เหมือนกัน */
    .nav-scrollable.nav-collapsed[b-nj04crnsoa] {
        display: none !important;
    }

    .nav-scrollable[b-nj04crnsoa] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* ครึ่งจอพอดี เหลืออีกครึ่งให้เห็นเนื้อหาที่กำลังดูอยู่ */
        max-height: 55vh;
        overflow-y: auto;
        /* กันไม่ให้ลากในเมนูแล้วหน้าข้างหลังเลื่อนตาม */
        overscroll-behavior: contain;
        background-color: #212529;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, .38);
        /* สูงกว่า .sidebar (1035) และฉากหลัง (1039) */
        z-index: 1040;
        padding-bottom: env(safe-area-inset-bottom, 0);
        animation: navSheetUp-b-nj04crnsoa .22s ease-out;
    }

    /* ขีดเล็ก ๆ บอกว่าลากได้/เป็นแผ่นซ้อน วางค้างไว้บนสุดของแผ่น */
    .nav-scrollable[b-nj04crnsoa]::before {
        content: "";
        align-self: center;
        flex: 0 0 auto;
        width: 40px;
        height: 4px;
        margin: 10px 0 2px;
        border-radius: 2px;
        background-color: rgba(255, 255, 255, .28);
    }

    .nav-sheet-backdrop[b-nj04crnsoa] {
        position: fixed;
        inset: 0;
        z-index: 1039;
        background-color: rgba(0, 0, 0, .35);
        animation: navSheetFade-b-nj04crnsoa .22s ease-out;
    }
}

@keyframes navSheetUp-b-nj04crnsoa {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes navSheetFade-b-nj04crnsoa {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* จอใหญ่ไม่มีแผ่นเมนู ฉากหลังจึงต้องไม่โผล่ */
@media (min-width: 992px) {
    .nav-sheet-backdrop[b-nj04crnsoa] {
        display: none;
    }
}

/* Responsive: ปรับแต่งเมื่อจอใหญ่กว่า 992px */
@media (min-width: 992px) {
    .navbar-toggler[b-nj04crnsoa] {
        display: none;
    }

    .nav-scrollable[b-nj04crnsoa] {
        /* ให้ scroll ได้เฉพาะเมนู ไม่กระทบ header */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* --- ส่วนที่ต้องแก้ --- */
/* แถม: เมื่อเอาเมาส์ไปวาง (Hover) */
.nav-link.submenu-link:hover[b-nj04crnsoa] {
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
}

.submenu-container[b-nj04crnsoa] {
    background-color: rgba(0, 0, 0, 0.2);
    margin-top: 0.25rem;
    overflow: hidden;
}

.submenu-link[b-nj04crnsoa] {
    padding-left: 2.5rem !important;
    font-size: 0.85rem;
    height: 2.5rem;
    color: #b0b0b0;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

/* --- ส่วนที่แก้ไข --- */

/* ใช้ ::deep เพื่อให้มั่นใจว่า CSS ทะลุเข้าไปถึง NavLink */
[b-nj04crnsoa] .nav-link.submenu-link {
    color: #ffffff !important;
    padding-left: 1.5rem !important; /* Reduced base padding to work with bullet */
    height: 2.25rem; /* Slightly more compact */
    font-size: 0.85rem;
}

[b-nj04crnsoa] .nav-link.submenu-link::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: currentColor;
    border-radius: 50%;
    margin-right: 10px;
    opacity: 0.5;
    flex-shrink: 0;
}

[b-nj04crnsoa] .nav-link.submenu-link.active {
    background-color: rgba(59, 130, 246, 0.25) !important;
    /* พื้นหลังสีฟ้าจาง */
    color: #ffffff !important;
    /* ตัวหนังสือสีขาว */
    font-weight: 700 !important;
    /* ตัวหนา */
}

/* เพิ่ม Hover ให้ดูมีมิติ */
[b-nj04crnsoa] .nav-link.submenu-link:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

/* ปรับระยะห่างสำหรับ nested submenu */
.submenu-container .nav-item[b-nj04crnsoa] {
    padding-bottom: 0;
}

/* บังคับความกว้างเมนูเฉพาะจอเดสก์ท็อป — ถ้าไม่คุมด้วย media query
   จอมือถือจะโดน min-width 250px ค้างไว้จนล้นจอ */
@media (min-width: 992px) {
    .nav-scrollable[b-nj04crnsoa] {
        min-width: 250px !important;
    }
}
/* /Pages/Client/ClientCvDetail.razor.rz.scp.css */
/* CSS หน้าจอปกติ */
.avatar-xl[b-2h95hfxnju] {
    width: 80px; height: 80px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
}

.print-only[b-2h95hfxnju] { display: none; }

/* CSS ตกแต่งตอน Print (GCME Theme) */
@media print {
    .screen-only[b-2h95hfxnju] { display: none !important; }
    .print-only[b-2h95hfxnju] { display: block !important; }

    /* เส้นขอบและความหนา */
    .gcme-header-box[b-2h95hfxnju], 
    .table-bordered[b-2h95hfxnju], 
    .gcme-table[b-2h95hfxnju], 
    .gcme-table th[b-2h95hfxnju], 
    .gcme-table td[b-2h95hfxnju],
    .section-bar[b-2h95hfxnju],
    .photo-box[b-2h95hfxnju] {
        border-color: #000000 !important;
    }

    /* ตกแต่ง Header และ ตาราง */
    .section-bar[b-2h95hfxnju] {
        background-color: #808080 !important; /* สีเทา */
        color: white !important;
        border: 1px solid #000000 !important;
        border-bottom: none !important;
        padding: 4px 8px;
        font-weight: bold;
    }

    .bg-header-blue th[b-2h95hfxnju] {
        background-color: #9cc2e5 !important; /* สีฟ้า */
        color: black !important;
        text-align: center;
        vertical-align: middle;
    }

    .table-bordered[b-2h95hfxnju] {
        border: 1px solid #000000 !important;
    }
    
    .table-bordered td[b-2h95hfxnju], .table-bordered th[b-2h95hfxnju] {
        border: 1px solid #000000 !important;
        padding: 4px !important;
    }

    .small[b-2h95hfxnju], small[b-2h95hfxnju], table[b-2h95hfxnju] {
        font-size: 10pt !important;
    }
    
    .photo-box[b-2h95hfxnju] {
        width: 100px; height: 120px;
        border: 1px solid #000000;
        background: #f0f0f0;
        display: flex; align-items: center; justify-content: center;
    }
}
/* /Pages/Cv/CvDetail.razor.rz.scp.css */
/* CSS หน้าจอปกติ */
.avatar-xl[b-fb1jqggsag] {
    width: 80px; height: 80px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
}

.print-only[b-fb1jqggsag] { display: none; }

/* CSS ตกแต่งตอน Print (GCME Theme) */
@media print {
    .screen-only[b-fb1jqggsag] { display: none !important; }
    .print-only[b-fb1jqggsag] { display: block !important; }

    /* เส้นขอบและความหนา */
    .gcme-header-box[b-fb1jqggsag], 
    .table-bordered[b-fb1jqggsag], 
    .gcme-table[b-fb1jqggsag], 
    .gcme-table th[b-fb1jqggsag], 
    .gcme-table td[b-fb1jqggsag],
    .section-bar[b-fb1jqggsag],
    .photo-box[b-fb1jqggsag] {
        border-color: #000000 !important;
    }

    /* ตกแต่ง Header และ ตาราง */
    .section-bar[b-fb1jqggsag] {
        background-color: #808080 !important; /* สีเทา */
        color: white !important;
        border: 1px solid #000000 !important;
        border-bottom: none !important;
        padding: 4px 8px;
        font-weight: bold;
    }

    .bg-header-blue th[b-fb1jqggsag] {
        background-color: #9cc2e5 !important; /* สีฟ้า */
        color: black !important;
        text-align: center;
        vertical-align: middle;
    }

    .table-bordered[b-fb1jqggsag] {
        border: 1px solid #000000 !important;
    }
    
    .table-bordered td[b-fb1jqggsag], .table-bordered th[b-fb1jqggsag] {
        border: 1px solid #000000 !important;
        padding: 4px !important;
    }

    .small[b-fb1jqggsag], small[b-fb1jqggsag], table[b-fb1jqggsag] {
        font-size: 10pt !important;
    }
    
    .photo-box[b-fb1jqggsag] {
        width: 100px; height: 120px;
        border: 1px solid #000000;
        background: #f0f0f0;
        display: flex; align-items: center; justify-content: center;
    }
}
/* /Pages/Dashboard/PeopleDashboard.razor.rz.scp.css */
/* ===== Training & Certificate Dashboard — เฉพาะการวางผังของหน้านี้ =====
   หน้าตาทั้งหมด (สี การ์ด ตาราง ป้าย โดนัท) อยู่ในไฟล์กลาง wwwroot/css/dashboard.css
   หน้านี้ใช้กติกาเดียวกับ Recruitment Dashboard ทุกอย่าง ต่างกันแค่ผังแถบ KPI */

/* --- ผังแถบ KPI: People 2 ใบ / Certificate 3 ใบ / Training 2 ใบ ---
   ใช้ตารางเดียว 7 ช่องเท่ากัน แล้วแทรกคอลัมน์คั่น 14px ระหว่างกลุ่ม
   (ถ้าให้แต่ละกลุ่มหารความกว้างกันเอง การ์ดจะกว้างไม่เท่ากัน เพราะจำนวนช่องไฟไม่เท่ากัน) */
.rd-kpi[b-l494zhpsbn] {
  display: grid;
  grid-template-columns: repeat(2, 1fr) 14px repeat(3, 1fr) 14px repeat(2, 1fr);
  column-gap: 10px;
  row-gap: var(--rd-1);
  margin-bottom: var(--rd-4);
}

.rd-kpi-head[b-l494zhpsbn] {
  grid-row: 1;
  align-self: end;
}

.rd-kpi-head.g1[b-l494zhpsbn] { grid-column: 1 / span 2; }
.rd-kpi-head.g2[b-l494zhpsbn] { grid-column: 4 / span 3; }
.rd-kpi-head.g3[b-l494zhpsbn] { grid-column: 8 / span 2; }

.rd-kpi-card[b-l494zhpsbn] { grid-row: 2; }

.rd-kpi-card.c1[b-l494zhpsbn] { grid-column: 1; }
.rd-kpi-card.c2[b-l494zhpsbn] { grid-column: 2; }
.rd-kpi-card.c3[b-l494zhpsbn] { grid-column: 4; }
.rd-kpi-card.c4[b-l494zhpsbn] { grid-column: 5; }
.rd-kpi-card.c5[b-l494zhpsbn] { grid-column: 6; }
.rd-kpi-card.c6[b-l494zhpsbn] { grid-column: 8; }
.rd-kpi-card.c7[b-l494zhpsbn] { grid-column: 9; }

/* หน่วยเล็ก ๆ ต่อท้ายตัวเลข เช่น % หรือ ชม. ไม่ให้ไปแย่งน้ำหนักจากตัวเลข */
.rd-kpi-unit[b-l494zhpsbn] {
  margin-left: 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rd-ink-3);
}

/* --- การ์ดความคืบหน้าคอร์สอบรม ---
   แถบใช้เทากลาง ๆ เพราะ "อบรมไปกี่ %" ยังไม่มีเป้าที่ตกลงกันว่าเท่าไรถึงเรียกว่าผ่าน
   ส่วนจำนวนคนที่ยังค้างเป็นส้ม เพราะนั่นคืองานที่ยังรอคนทำอยู่จริง ๆ */
.rd-pending[b-l494zhpsbn] {
  color: var(--rd-wait);
}

.rd-done[b-l494zhpsbn] {
  color: var(--rd-good);
}

/* --- รายการใบรับรองที่ใกล้หมดอายุ --- */
.rd-expiring[b-l494zhpsbn] {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rd-expiring li[b-l494zhpsbn] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--rd-3);
  padding: 12px var(--rd-3);
  border-top: 1px solid var(--rd-line);
}

.rd-expiring li:first-child[b-l494zhpsbn] {
  border-top: 0;
}

.rd-expiring .rd-who[b-l494zhpsbn] {
  font-size: 13px;
  color: var(--rd-ink);
}

.rd-expiring .rd-what[b-l494zhpsbn] {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--rd-ink-3);
}

.rd-expiring .rd-when[b-l494zhpsbn] {
  text-align: right;
  white-space: nowrap;
}

.rd-expiring .rd-when-date[b-l494zhpsbn] {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--rd-ink-3);
}

/* --- จอแคบ ---
   ต่ำกว่า 1200px ทิ้งตำแหน่งตายตัว ปล่อยให้การ์ดไหลตามลำดับใน DOM
   (หัวกลุ่มเขียนสลับกับการ์ดของกลุ่มนั้นอยู่แล้ว พอไหลเองจึงยังจับกลุ่มถูก) */
@media (max-width: 1199.98px) {
  .rd-kpi[b-l494zhpsbn] {
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--rd-2);
    row-gap: var(--rd-2);
  }

  .rd-kpi-head[b-l494zhpsbn] {
    grid-row: auto;
    grid-column: 1 / -1 !important;
    margin-top: var(--rd-2);
  }

  .rd-kpi-card[b-l494zhpsbn] {
    grid-row: auto;
    grid-column: auto !important;
  }
}

@media (max-width: 575.98px) {
  .rd-kpi[b-l494zhpsbn] {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* /Pages/Dashboard/RecruitmentDashboard.razor.rz.scp.css */
/* ===== Recruitment Dashboard — เฉพาะการวางผังของหน้านี้ =====
   หน้าตาทั้งหมด (สี การ์ด ตาราง ป้าย โดนัท) อยู่ในไฟล์กลาง wwwroot/css/dashboard.css
   ไฟล์นี้เก็บแค่สองเรื่องที่เป็นของหน้านี้จริง ๆ คือ ผังแถบ KPI 10 ช่อง กับ เฉดสีของกรวย */

/* --- ผังแถบ KPI: Requisition 3 ใบ / Pipeline 4 ใบ / Outcome 3 ใบ ---
   ใช้ "ตารางเดียว" 10 ช่องเท่ากัน แล้วแทรกคอลัมน์คั่น 14px ระหว่างกลุ่ม
   เหตุผล: ถ้าแบ่งเป็น 3 กลุ่มแล้วให้แต่ละกลุ่มหารความกว้างกันเอง การ์ดจะกว้างไม่เท่ากันเสมอ
   เพราะจำนวนช่องไฟในกลุ่มไม่เท่ากัน (2/3/2 ช่อง) ต่อให้ปรับสัดส่วนเป็น 3:4:3 ก็ยังไม่เท่า */
.rd-kpi[b-pjrbe3f2t8] {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 14px repeat(4, 1fr) 14px repeat(3, 1fr);
  column-gap: 10px;
  row-gap: var(--rd-1);
  margin-bottom: var(--rd-4);
}

.rd-kpi-head[b-pjrbe3f2t8] {
  grid-row: 1;
  align-self: end;
}

.rd-kpi-head.g1[b-pjrbe3f2t8] { grid-column: 1 / span 3; }
.rd-kpi-head.g2[b-pjrbe3f2t8] { grid-column: 5 / span 4; }
.rd-kpi-head.g3[b-pjrbe3f2t8] { grid-column: 10 / span 3; }

.rd-kpi-card[b-pjrbe3f2t8] { grid-row: 2; }

.rd-kpi-card.c1[b-pjrbe3f2t8] { grid-column: 1; }
.rd-kpi-card.c2[b-pjrbe3f2t8] { grid-column: 2; }
.rd-kpi-card.c3[b-pjrbe3f2t8] { grid-column: 3; }
.rd-kpi-card.c4[b-pjrbe3f2t8] { grid-column: 5; }
.rd-kpi-card.c5[b-pjrbe3f2t8] { grid-column: 6; }
.rd-kpi-card.c6[b-pjrbe3f2t8] { grid-column: 7; }
.rd-kpi-card.c7[b-pjrbe3f2t8] { grid-column: 8; }
.rd-kpi-card.c8[b-pjrbe3f2t8] { grid-column: 10; }
.rd-kpi-card.c9[b-pjrbe3f2t8] { grid-column: 11; }
.rd-kpi-card.c10[b-pjrbe3f2t8] { grid-column: 12; }

/* --- เฉดสีของกรวย ---
   แถบไล่เฉดฟ้าเข้ม -> อ่อน ตามลำดับขั้น แล้วจบที่เขียวซึ่งคือปลายทางที่สำเร็จ
   เฉดเดียวไล่น้ำหนักแบบนี้บอก "ลำดับขั้น" ไม่ได้บอกสถานะ จึงไม่ขัดกติกาสีของหน้า
   (ของเดิมใช้ 5 สีคนละโทน ทำให้ดูเหมือนคนละเรื่อง ทั้งที่เป็นเรื่องเดียวไหลต่อกัน)

   ค่าสีชุดนี้บีบให้อยู่ในช่วงเข้มกว่าเดิม เพราะชุดแรกวัดกับสีราง #f1f5f9 แล้วไม่ผ่าน
   เกณฑ์ 3:1 ของ WCAG สำหรับกราฟิกที่ไม่ใช่ตัวอักษรถึง 3 ขั้น
     ชุดเดิม  s3 #60a5fa 2.32:1 / s4 #93c5fd 1.65:1 / s5 #22c55e 2.08:1
     ชุดนี้   s1 9.45 / s2 6.12 / s3 4.72 / s4 3.36 / s5 3.01 ผ่านครบ
   ความยาวของแถบคือตัวข้อมูลเอง จึงต้องมองเห็นได้จริง ส่วนจุดนำในคำอธิบายใต้โดนัท
   ยังใช้ --rd-good-line สีเดิมได้ เพราะจุดนั้นมีตัวหนังสือกำกับความหมายอยู่แล้ว */
.rd-funnel-step.s1 .rd-bar > span[b-pjrbe3f2t8] { background: #1e3a8a; }
.rd-funnel-step.s2 .rd-bar > span[b-pjrbe3f2t8] { background: #1d4ed8; }
.rd-funnel-step.s3 .rd-bar > span[b-pjrbe3f2t8] { background: #2563eb; }
.rd-funnel-step.s4 .rd-bar > span[b-pjrbe3f2t8] { background: #3b82f6; }
.rd-funnel-step.s5 .rd-bar > span[b-pjrbe3f2t8] { background: #16a34a; }

/* ส่วนสีของ "ตัวเลข" ยังคุมด้วยกติกาเดิม คือเขียวเฉพาะตอนมีค่าจริง */
.rd-funnel-step.is-good .rd-funnel-val[b-pjrbe3f2t8] { color: var(--rd-good); }

/* --- จอแคบ ---
   ต่ำกว่า 1200px ทิ้งตำแหน่งตายตัว ปล่อยให้การ์ดไหลตามลำดับใน DOM
   (หัวกลุ่มเขียนสลับกับการ์ดของกลุ่มนั้นอยู่แล้ว พอไหลเองจึงยังจับกลุ่มถูก) */
@media (max-width: 1199.98px) {
  .rd-kpi[b-pjrbe3f2t8] {
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--rd-2);
    row-gap: var(--rd-2);
  }

  .rd-kpi-head[b-pjrbe3f2t8] {
    grid-row: auto;
    grid-column: 1 / -1 !important;
    margin-top: var(--rd-2);
  }

  .rd-kpi-card[b-pjrbe3f2t8] {
    grid-row: auto;
    grid-column: auto !important;
  }
}

@media (max-width: 575.98px) {
  .rd-kpi[b-pjrbe3f2t8] {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* /Pages/Employee/MyTraining.razor.rz.scp.css */
.mt-card-on[b-mki9ohgoza] { outline: 2px solid var(--bs-primary); outline-offset: -1px; }
button.card:focus-visible[b-mki9ohgoza] { outline: 3px solid var(--bs-primary); outline-offset: 3px; }
button.card .card-body[b-mki9ohgoza] { min-height: 130px; }