/* ===== ระบบดีไซน์กลางของหน้า Dashboard ทุกหน้า =====
   กติกาเดียวที่ใช้ร่วมกัน:
     การ์ดพื้นขาวบนพื้นหน้าเทาอ่อน ตัวเลขเป็นพระเอก ที่เหลือเป็นเทา
     ใส่สีเฉพาะจุดที่สีสื่อความหมายจริง ๆ เท่านั้น
        เขียว = สำเร็จ / ปกติ      ส้ม = รอดำเนินการ / ใกล้ถึงกำหนด      แดง = ตกหล่น / เกินกำหนด
     และใส่สีเฉพาะตอนตัวเลขมีค่าจริง เลข 0 ปล่อยเป็นเทา
     เพราะ "Expired 0" ที่เป็นสีแดงคือการเตือนเรื่องที่ไม่มีอยู่จริง

   ไฟล์นี้เป็นของกลาง เก็บเฉพาะ "หน้าตา" ที่ทุกหน้าใช้เหมือนกัน
   ส่วน "การวางผัง" ที่ต่างกันในแต่ละหน้า (เช่น แถบ KPI มีกี่ช่อง จัดกลุ่มยังไง)
   ให้อยู่ในไฟล์ .razor.css ของหน้านั้น ๆ ซึ่งโหลดทีหลังจึงเขียนทับไฟล์นี้ได้

   ทุกกฎเริ่มด้วย .rdash เพื่อไม่ให้รั่วไปโดนหน้าอื่นที่ไม่ได้ใช้ระบบนี้ */

.rdash {
  /* ระยะห่างมี 4 ระดับเท่านั้น จะได้ไม่มั่วเป็นค่าสุ่ม */
  --rd-1: 4px;
  --rd-2: 8px;
  --rd-3: 16px;
  --rd-4: 24px;

  --rd-radius: 10px;
  --rd-bd: #e8ecf1;
  --rd-line: #f1f5f9;
  --rd-tint: #f8fafc;
  --rd-canvas: #f4f6fa;
  --rd-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
  --rd-shadow-up: 0 4px 12px -2px rgba(16, 24, 40, 0.12);

  /* ตัวอักษร 3 ระดับ: หลัก / รอง / จาง */
  --rd-ink: #1e293b;
  --rd-ink-2: #64748b;
  --rd-ink-3: #94a3b8;

  /* สีความหมาย: คู่ละ 3 ค่า = ตัวอักษร (เข้มพอให้อ่านออก) / เส้นกับแถบ (สดกว่า) / พื้นป้าย */
  --rd-good: #15803d;
  --rd-good-line: #22c55e;
  --rd-good-bg: #eaf7ef;
  --rd-wait: #b45309;
  --rd-wait-line: #f59e0b;
  --rd-wait-bg: #fdf3e3;
  --rd-bad: #b91c1c;
  --rd-bad-line: #ef4444;
  --rd-bad-bg: #fdeded;
}

/* พื้นหลังหน้าเป็นเทาอ่อน การ์ดขาวจะได้ลอยขึ้นมา
   ถ้าปล่อยขาวบนขาว จะต่างกันแค่เส้นขอบ 1px สีจาง ทั้งหน้าเลยแบนและดูโล้น
   วิธีทำ: ดันขอบออกไปชนขอบพื้นที่เนื้อหาก่อน แล้วเติม padding กลับเข้ามาให้เท่าเดิม
     ค่าที่ดันออก   = padding ของ article ใน MainLayout (1.5rem รอบ / 2rem-1.5rem เมื่อ >=992px)
     ค่าที่เติมกลับ = ค่านั้น + gutter ของ .container-fluid อีก 0.75rem
   (padding-bottom ปล่อยให้ pb-5 ใน markup คุมไว้ จึงตั้งเป็น 0 ตรงนี้) */
.rdash {
  background: var(--rd-canvas);
  /* ต้องล้าง width:100% ของ .container-fluid ทิ้งก่อน ไม่งั้น margin ติดลบจะไม่ขยายกล่อง
     แค่เลื่อนกล่องไปทางซ้าย แล้วเหลือช่องว่างขาวค้างทางขวา 56px (วัดมาแล้ว) */
  width: auto;
  margin: -1.1rem -1.5rem 0;
  padding: 1.1rem 2.25rem 0;
}

@media (min-width: 992px) {
  .rdash {
    margin-left: -2rem;
    padding-left: 2.75rem;
    min-height: calc(100vh - 3.5rem);
  }
}

/* --- หัวหน้า --- */
.rdash .rd-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--rd-ink);
  margin: 0 0 2px;
}

.rdash .rd-sub {
  font-size: 13px;
  color: var(--rd-ink-3);
  margin: 0;
}

/* --- การ์ดมาตรฐาน ใช้ซ้ำทุกบล็อก มุมโค้งและเงาเท่ากันหมด --- */
.rdash .rd-card {
  background: #fff;
  border: 1px solid var(--rd-bd);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow);
}

.rdash .rd-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--rd-2);
  flex-wrap: wrap;
  padding: 14px var(--rd-3);
  background: #fff;
  border-bottom: 1px solid var(--rd-bd);
  border-radius: var(--rd-radius) var(--rd-radius) 0 0;
}

.rdash .rd-card-title {
  display: flex;
  align-items: center;
  gap: var(--rd-2);
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--rd-ink);
}

/* ไอคอนหัวการ์ดเป็นเทา ไม่ให้ไปแย่งความหมายของสี */
.rdash .rd-card-title i {
  font-size: 15px;
  color: var(--rd-ink-3);
}

.rdash .rd-card-body {
  padding: var(--rd-3);
}

/* ป้ายนับจำนวนมุมขวาบนของการ์ด เป็นข้อมูลเฉย ๆ ไม่ใช่สถานะ จึงเป็นเทา */
.rdash .rd-count {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--rd-line);
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-ink-2);
  white-space: nowrap;
}

/* --- แถบตัวกรอง --- */
.rdash .rd-filter {
  padding: var(--rd-3);
}

.rdash .rd-filter .form-label {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-ink-3);
}

/* --- การ์ด KPI ---
   ที่นี่เก็บเฉพาะหน้าตา ส่วนการวางช่องในตารางอยู่ในไฟล์ของแต่ละหน้า
   เพราะจำนวนการ์ดกับการจัดกลุ่มไม่เหมือนกัน */
.rdash .rd-kpi-head {
  margin: 0 0 var(--rd-1) 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rd-ink-3);
}

.rdash .rd-kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px var(--rd-2);
  background: #fff;
  border: 1px solid var(--rd-bd);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow);
  transition: box-shadow 0.15s ease;
}

.rdash .rd-kpi-card:hover {
  box-shadow: var(--rd-shadow-up);
}

.rdash .rd-kpi-num {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
}

/* จองที่ไว้ 2 บรรทัดทุกใบ การ์ดจะได้สูงเท่ากันแม้ป้ายยาวไม่เท่ากัน */
.rdash .rd-kpi-lab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6em;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--rd-ink-2);
}

/* โทน info ใช้กับการ์ดที่เป็น "ข้อเท็จจริง" ไม่ใช่สถานะ เช่น จำนวนพนักงาน ชั่วโมงอบรม
   ใส่แค่เส้นซ้ายสีฟ้าเป็นเครื่องหมายบอกหมวด แต่ไม่เปลี่ยนสีตัวเลข
   เพราะสีเขียว/ส้ม/แดง สงวนไว้ให้ "สถานะที่ต้องทำอะไรสักอย่าง" เท่านั้น
   ถ้าเอาฟ้าไปย้อมตัวเลขด้วย จะกลายเป็นแข่งความสนใจกับใบที่ต้องเตือนจริง */
.rdash .rd-kpi-card.is-info { border-left: 3px solid #3b82f6; }

.rdash .rd-kpi-card.is-good { border-left: 3px solid var(--rd-good-line); }
.rdash .rd-kpi-card.is-good .rd-kpi-num { color: var(--rd-good); }
.rdash .rd-kpi-card.is-wait { border-left: 3px solid var(--rd-wait-line); }
.rdash .rd-kpi-card.is-wait .rd-kpi-num { color: var(--rd-wait); }
.rdash .rd-kpi-card.is-bad { border-left: 3px solid var(--rd-bad-line); }
.rdash .rd-kpi-card.is-bad .rd-kpi-num { color: var(--rd-bad); }

/* --- โดนัทสัดส่วน ---
   วาดสัดส่วนจริงด้วย conic-gradient ที่ประกอบค่ามาจากฝั่ง C#
   ห้ามใช้วงกลมทึบที่มีแต่ตัวเลขลอยอยู่ตรงกลาง เพราะนั่นไม่ได้บอกสัดส่วนอะไรเลย */
.rdash .rd-donut-wrap {
  display: flex;
  justify-content: center;
  padding: var(--rd-4) 0;
}

.rdash .rd-donut {
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  border-radius: 50%;
}

.rdash .rd-donut-hole {
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: #fff;
  text-align: center;
}

.rdash .rd-donut-pct {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--rd-ink);
}

.rdash .rd-donut-cap {
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--rd-ink-3);
}

/* --- รายการมีจุดนำ ใช้เป็นคำอธิบายใต้โดนัท --- */
.rdash .rd-legend {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rdash .rd-legend li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--rd-2);
  padding: 9px 0;
  border-top: 1px solid var(--rd-line);
  font-size: 12.5px;
  color: var(--rd-ink-2);
}

.rdash .rd-legend li:first-child {
  border-top: 0;
}

.rdash .rd-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--rd-2);
  border-radius: 50%;
  background: var(--rd-ink-3);
}

.rdash .rd-dot.is-good { background: var(--rd-good-line); }
.rdash .rd-dot.is-wait { background: var(--rd-wait-line); }
.rdash .rd-dot.is-bad { background: var(--rd-bad-line); }

.rdash .rd-legend .rd-val {
  font-weight: 600;
  color: var(--rd-ink);
  white-space: nowrap;
}

.rdash .rd-legend li.is-good .rd-val { color: var(--rd-good); }
.rdash .rd-legend li.is-wait .rd-val { color: var(--rd-wait); }
.rdash .rd-legend li.is-bad .rd-val { color: var(--rd-bad); }

/* --- แถวความคืบหน้าแบบมีป้ายกำกับ ---
   ใช้ได้ทั้งกรวยการสรรหาและความคืบหน้าคอร์สอบรม โครงเดียวกัน
   (.rd-funnel* เป็นชื่อเดิมของหน้า Recruitment เก็บไว้ให้ใช้ร่วมกฎเดียวกัน) */
.rdash .rd-prog,
.rdash .rd-funnel {
  display: flex;
  flex-direction: column;
  gap: var(--rd-3);
}

.rdash .rd-prog-row,
.rdash .rd-funnel-row {
  display: flex;
  justify-content: space-between;
  gap: var(--rd-2);
  margin-bottom: 6px;
  font-size: 12.5px;
}

.rdash .rd-prog-name,
.rdash .rd-funnel-name {
  color: var(--rd-ink-2);
}

.rdash .rd-prog-val,
.rdash .rd-funnel-val {
  font-weight: 600;
  color: var(--rd-ink);
  white-space: nowrap;
}

.rdash .rd-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--rd-line);
  overflow: hidden;
}

/* สีแถบที่เติมแล้ว ใช้ฟ้าเข้าชุดกับแถบกรวยหน้า Recruitment เพราะเป็นเรื่องความคืบหน้าเหมือนกัน
   ไม่ใช้เทาอ่อนอย่างที่เคยตั้งไว้ (#cbd5e1) เพราะวัดกับสีราง #f1f5f9 แล้วได้ค่าความต่างแค่ 1.35:1
   ต่ำกว่าเกณฑ์ 3:1 ของ WCAG สำหรับกราฟิกที่ไม่ใช่ตัวอักษร แถบที่เต็ม 100% เลยดูเหมือนแถบว่าง
   ค่าปัจจุบันวัดได้ 3.35:1 (หน้า Recruitment ไม่โดนผลนี้ เพราะทุกขั้นมีสีของตัวเองทับอยู่แล้ว) */
.rdash .rd-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #3b82f6;
}

/* --- ตารางที่เขียนเองในหน้า --- */
.rdash .rd-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 13px;
}

.rdash .rd-table th {
  padding: 10px var(--rd-3);
  background: var(--rd-tint);
  border-bottom: 1px solid var(--rd-bd);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-ink-3);
  white-space: nowrap;
}

.rdash .rd-table td {
  padding: 12px var(--rd-3);
  border-top: 1px solid var(--rd-line);
  color: var(--rd-ink-2);
  vertical-align: middle;
}

.rdash .rd-table tbody tr:hover td {
  background: var(--rd-tint);
}

/* ตารางหลายคอลัมน์ในการ์ดแคบ ระยะขอบ 16px ทุกช่องจะดันจนตารางล้นออกนอกการ์ด
   (วัดแล้วล้น 41px) จึงบีบช่องกลางเหลือ 10px แต่คงขอบซ้ายสุด/ขวาสุดไว้เท่าเดิม */
.rdash .rd-compact th,
.rdash .rd-compact td {
  padding-left: 10px;
  padding-right: 10px;
}

.rdash .rd-compact th:first-child,
.rdash .rd-compact td:first-child {
  padding-left: var(--rd-3);
}

.rdash .rd-compact th:last-child,
.rdash .rd-compact td:last-child {
  padding-right: var(--rd-3);
}

.rdash .rd-step {
  color: var(--rd-ink);
}

.rdash .rd-step-sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--rd-ink-3);
}

/* ตัวเลข "กี่วัน" เป็นกลาง ไม่ระบายสี เพราะยังไม่มีเป้าให้ตัดสินว่าดีหรือแย่ */
.rdash .rd-days {
  font-size: 18px;
  font-weight: 600;
  color: var(--rd-ink);
  white-space: nowrap;
}

.rdash .rd-days .rd-unit {
  margin-left: var(--rd-1);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--rd-ink-3);
}

.rdash .rd-days.is-wait { color: var(--rd-wait); }
.rdash .rd-days.is-bad { color: var(--rd-bad); }

/* แถวสรุปท้ายตาราง เน้นด้วยเส้นหนากับตัวหนา ไม่ใช้พื้นสี */
.rdash .rd-table tr.rd-total td {
  border-top: 2px solid var(--rd-bd);
}

.rdash .rd-table tr.rd-total .rd-step {
  font-weight: 600;
}

.rdash .rd-num-good {
  font-weight: 600;
  color: var(--rd-good);
}

/* --- ป้ายสถานะ 4 โทนตามกติกา --- */
.rdash .rd-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--rd-line);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--rd-ink-2);
  white-space: nowrap;
}

.rdash .rd-tag.is-good { background: var(--rd-good-bg); color: var(--rd-good); }
.rdash .rd-tag.is-wait { background: var(--rd-wait-bg); color: var(--rd-wait); }
.rdash .rd-tag.is-bad { background: var(--rd-bad-bg); color: var(--rd-bad); }

/* --- แถบสรุปหลายฝั่งในหัวการ์ด --- */
.rdash .rd-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--rd-bd);
}

.rdash .rd-split > div {
  padding: 14px;
  text-align: center;
}

.rdash .rd-split > div + div {
  border-left: 1px solid var(--rd-bd);
}

.rdash .rd-split-lab {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-ink-3);
}

.rdash .rd-split-val {
  margin-top: var(--rd-1);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--rd-ink);
}

.rdash .rd-split-val small {
  font-size: 12px;
  font-weight: 500;
  color: var(--rd-ink-3);
}

/* --- ตารางที่มาจาก ServerSideTable ---
   คอมโพเนนต์นั้นห่อ .card ของตัวเองมาด้วย ทำให้เกิดการ์ดซ้อนการ์ด (ขอบ 2 ชั้น เงา 2 ชั้น)
   ตรงนี้ถอดเปลือกชั้นในออก แล้วจัดหน้าตาตารางให้ตรงกับตารางอื่นในหน้า */
.rdash .rd-sstable > .card {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent;
}

.rdash .rd-sstable table {
  font-size: 13px;
}

.rdash .rd-sstable thead th {
  padding: 10px;
  background: var(--rd-tint);
  border-bottom: 1px solid var(--rd-bd);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-ink-3);
  white-space: nowrap;
}

.rdash .rd-sstable tbody td {
  padding: 12px 10px;
  border-top: 1px solid var(--rd-line);
  color: var(--rd-ink-2);
}

.rdash .rd-sstable th:first-child,
.rdash .rd-sstable td:first-child {
  padding-left: var(--rd-3);
}

.rdash .rd-sstable th:last-child,
.rdash .rd-sstable td:last-child {
  padding-right: var(--rd-3);
}

.rdash .rd-sstable .card-footer {
  border-top: 1px solid var(--rd-bd);
  font-size: 12.5px;
  color: var(--rd-ink-2);
}

/* --- กราฟแท่งแนวตั้งสำหรับข้อมูลรายเดือน ---
   วาดด้วย CSS ล้วน ไม่ดึงไลบรารีกราฟเข้ามาเพิ่ม เพราะต้องการแค่แท่งกับตัวเลข
   ความสูงส่งมาทาง --h ให้ CSS คำนวณเอง */
.rdash .rd-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 132px;
  padding-top: var(--rd-2);
}

.rdash .rd-chart-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.rdash .rd-chart-bar {
  width: 100%;
  min-height: 2px;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: #3b82f6;
  transition: height 0.2s ease;
}

.rdash .rd-chart-col.is-wait .rd-chart-bar { background: var(--rd-wait-line); }
.rdash .rd-chart-col.is-bad .rd-chart-bar { background: var(--rd-bad-line); }

/* เดือนที่ไม่มีข้อมูลยังต้องมีแท่งจาง ๆ ให้เห็นว่าเป็นศูนย์ ไม่ใช่หายไปจากกราฟ */
.rdash .rd-chart-col.is-zero .rd-chart-bar { background: var(--rd-line); }

.rdash .rd-chart-lab {
  font-size: 9.5px;
  color: var(--rd-ink-3);
  white-space: nowrap;
}

.rdash .rd-chart-val {
  font-size: 10px;
  font-weight: 600;
  color: var(--rd-ink-2);
}

/* --- รายการจัดอันดับ มีแถบยาวตามสัดส่วนอยู่ข้างหลังชื่อ --- */
.rdash .rd-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rdash .rd-rank li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
}

.rdash .rd-rank-name {
  font-size: 12.5px;
  color: var(--rd-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rdash .rd-rank-val {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rd-ink);
  white-space: nowrap;
}

.rdash .rd-rank-bar {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background: var(--rd-line);
  overflow: hidden;
}

.rdash .rd-rank-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #3b82f6;
}

.rdash .rd-rank li.is-bad .rd-rank-bar > span { background: var(--rd-bad-line); }
.rdash .rd-rank li.is-bad .rd-rank-val { color: var(--rd-bad); }
.rdash .rd-rank li.is-wait .rd-rank-bar > span { background: var(--rd-wait-line); }
.rdash .rd-rank li.is-wait .rd-rank-val { color: var(--rd-wait); }

.rdash .rd-rank-sub {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--rd-ink-3);
}

/* --- แถวเร่งด่วน 3 ระดับ --- */
.rdash .rd-urgency {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rdash .rd-urgency-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--rd-2);
  font-size: 12.5px;
  color: var(--rd-ink-2);
}

.rdash .rd-urgency-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--rd-ink);
  min-width: 2.2em;
  text-align: right;
}

.rdash .rd-urgency-row.is-bad .rd-urgency-num { color: var(--rd-bad); }
.rdash .rd-urgency-row.is-wait .rd-urgency-num { color: var(--rd-wait); }


/* ข้อความตอนไม่มีข้อมูล ใช้ทั้งในหน้าและในคอมโพเนนต์ย่อย */
.rdash .rd-empty {
  padding: var(--rd-4);
  text-align: center;
  font-size: 13px;
  color: var(--rd-ink-3);
}

/* --- ช่องแรกของตารางที่เป็นลิงก์ไปหน้ารายละเอียด --- */
.rdash .rd-job-code {
  color: var(--rd-ink);
  font-weight: 500;
}

.rdash .rd-job-code i {
  font-size: 0.7rem;
  color: var(--rd-ink-3);
}

.rdash .rd-job-pos {
  font-size: 11.5px;
  color: var(--rd-ink-3);
}

.rdash a:hover .rd-job-code {
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .rdash .rd-title {
    font-size: 19px;
  }

  .rdash .rd-split {
    grid-template-columns: 1fr;
  }

  .rdash .rd-split > div + div {
    border-left: 0;
    border-top: 1px solid var(--rd-bd);
  }
}