:root {
  /* dropdown toggle, เพิ่มข้อมูล */
  --btn-primary-base:    #556ee6;
  --btn-primary-hover:   #4C63CF;
  --btn-primary-outline: #556EE6;
  --btn-primary-fg:      #fff;
  /*ปุ่มย้อนกลับ, ปุ่มปิด, ปุ่มจ่ายเงินแล้ว */
  --btn-secondary-base:    #74788D;
  --btn-secondary-hover:   #626677;
  --btn-secondary-outline: #74788D;
  --btn-secondary-fg:      #fff;
  /* ปุ่มบันทึก(save/submit), ผ่านการตรวจสอบ, อนุมัติ, จ่ายเงิน */
  --btn-success-base:    #34C38F;
  --btn-success-hover:   #2CA579;
  --btn-success-outline: #34C38F;
  --btn-success-fg:      #fff;
  /* ปุ่มยกเลิก(ลบข้อมูล), ยืนยันการไม่อนุมัติ,  ใช่ฉันต้องการลบ*/
  --btn-danger-base:    #F46A6A;
  --btn-danger-hover:   #DB5F5F;
  --btn-danger-outline: #F46A6A; /*ยกเลิกการตรวจสอบ, ไม่อนุมัติ, ยกเลิก แบบมี action ที่มีผลตามมา*/
  --btn-danger-fg:      #fff;
  /* ปุ่ม edit */
  --btn-warning-base:    #F1B44C;
  --btn-warning-hover:   #D8A244;
  --btn-warning-outline: #F1B44C;
  --btn-warning-fg:      #fff;
  /* ปุ่มดู view detail */
  --btn-info-base:    #50A5F1;
  --btn-info-hover:   #448CCC;
  --btn-info-outline: #50a5f1;
  --btn-info-fg:      #fff;

  --btn-light-base:    #eff2f7;
  --btn-light-hover:   #E2E6EA;
  --btn-light-outline: #eff2f7;
  --btn-light-fg:      #000;

  --btn-dark-base:    #343a40;
  --btn-dark-hover:   #2C3136;
  --btn-dark-outline: #343a40;
  --btn-dark-fg:      #fff;

  --btn-link-color: #556ee6;

  /* ---- focus glow ring per color ---- */
  --btn-primary-ring: color-mix(in srgb, color-mix(in srgb, var(--btn-primary-base) 85%, #fff) 50%, transparent);
  --btn-secondary-ring: color-mix(in srgb, color-mix(in srgb, var(--btn-secondary-base) 85%, #fff) 50%, transparent);
  --btn-success-ring: color-mix(in srgb, color-mix(in srgb, var(--btn-success-base) 85%, #fff) 50%, transparent);
  --btn-danger-ring: color-mix(in srgb, color-mix(in srgb, var(--btn-danger-base) 85%, #fff) 50%, transparent);
  --btn-warning-ring: color-mix(in srgb, color-mix(in srgb, var(--btn-warning-base) 85%, #fff) 50%, transparent);
  --btn-info-ring: color-mix(in srgb, color-mix(in srgb, var(--btn-info-base) 85%, #fff) 50%, transparent);
  --btn-light-ring: color-mix(in srgb, color-mix(in srgb, var(--btn-light-base) 85%, #fff) 50%, transparent);
  --btn-dark-ring: color-mix(in srgb, color-mix(in srgb, var(--btn-dark-base) 85%, #fff) 50%, transparent);
}

/* ---------- btn-primary ---------- */
.btn-primary{color:var(--btn-primary-fg);background-color:var(--btn-primary-base);border-color:var(--btn-primary-base);}
.btn-primary:hover{color:var(--btn-primary-fg);background-color:var(--btn-primary-hover);border-color:var(--btn-primary-hover);}
.btn-check:focus+.btn-primary,.btn-primary:focus{box-shadow:0 0 0 .15rem var(--btn-primary-ring);}
.btn-check:active+.btn-primary,.btn-check:checked+.btn-primary,.btn-primary.active,.btn-primary:active,.show>.btn-primary.dropdown-toggle{color:var(--btn-primary-fg);background-color:var(--btn-primary-hover);border-color:var(--btn-primary-hover);}
.btn-check:active+.btn-primary:focus,.btn-check:checked+.btn-primary:focus,.btn-primary.active:focus,.btn-primary:active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .15rem var(--btn-primary-ring);}
.btn-primary:disabled,.btn-primary.disabled{color:var(--btn-primary-fg);background-color:var(--btn-primary-base);border-color:var(--btn-primary-base);}

/* ---------- btn-secondary ---------- */
.btn-secondary{color:var(--btn-secondary-fg);background-color:var(--btn-secondary-base);border-color:var(--btn-secondary-base);}
.btn-secondary:hover{color:var(--btn-secondary-fg);background-color:var(--btn-secondary-hover);border-color:var(--btn-secondary-hover);}
.btn-check:focus+.btn-secondary,.btn-secondary:focus{box-shadow:0 0 0 .15rem var(--btn-secondary-ring);}
.btn-check:active+.btn-secondary,.btn-check:checked+.btn-secondary,.btn-secondary.active,.btn-secondary:active,.show>.btn-secondary.dropdown-toggle{color:var(--btn-secondary-fg);background-color:var(--btn-secondary-hover);border-color:var(--btn-secondary-hover);}
.btn-check:active+.btn-secondary:focus,.btn-check:checked+.btn-secondary:focus,.btn-secondary.active:focus,.btn-secondary:active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .15rem var(--btn-secondary-ring);}
.btn-secondary:disabled,.btn-secondary.disabled{color:var(--btn-secondary-fg);background-color:var(--btn-secondary-base);border-color:var(--btn-secondary-base);}

/* ---------- btn-success ---------- */
.btn-success{color:var(--btn-success-fg);background-color:var(--btn-success-base);border-color:var(--btn-success-base);}
.btn-success:hover{color:var(--btn-success-fg);background-color:var(--btn-success-hover);border-color:var(--btn-success-hover);}
.btn-check:focus+.btn-success,.btn-success:focus{box-shadow:0 0 0 .15rem var(--btn-success-ring);}
.btn-check:active+.btn-success,.btn-check:checked+.btn-success,.btn-success.active,.btn-success:active,.show>.btn-success.dropdown-toggle{color:var(--btn-success-fg);background-color:var(--btn-success-hover);border-color:var(--btn-success-hover);}
.btn-check:active+.btn-success:focus,.btn-check:checked+.btn-success:focus,.btn-success.active:focus,.btn-success:active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .15rem var(--btn-success-ring);}
.btn-success:disabled,.btn-success.disabled{color:var(--btn-success-fg);background-color:var(--btn-success-base);border-color:var(--btn-success-base);}

/* ---------- btn-danger ---------- */
.btn-danger{color:var(--btn-danger-fg);background-color:var(--btn-danger-base);border-color:var(--btn-danger-base);}
.btn-danger:hover{color:var(--btn-danger-fg);background-color:var(--btn-danger-hover);border-color:var(--btn-danger-hover);}
.btn-check:focus+.btn-danger,.btn-danger:focus{box-shadow:0 0 0 .15rem var(--btn-danger-ring);}
.btn-check:active+.btn-danger,.btn-check:checked+.btn-danger,.btn-danger.active,.btn-danger:active,.show>.btn-danger.dropdown-toggle{color:var(--btn-danger-fg);background-color:var(--btn-danger-hover);border-color:var(--btn-danger-hover);}
.btn-check:active+.btn-danger:focus,.btn-check:checked+.btn-danger:focus,.btn-danger.active:focus,.btn-danger:active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .15rem var(--btn-danger-ring);}
.btn-danger:disabled,.btn-danger.disabled{color:var(--btn-danger-fg);background-color:var(--btn-danger-base);border-color:var(--btn-danger-base);}

/* ---------- btn-warning ---------- */
.btn-warning{color:var(--btn-warning-fg);background-color:var(--btn-warning-base);border-color:var(--btn-warning-base);}
.btn-warning:hover{color:var(--btn-warning-fg);background-color:var(--btn-warning-hover);border-color:var(--btn-warning-hover);}
.btn-check:focus+.btn-warning,.btn-warning:focus{box-shadow:0 0 0 .15rem var(--btn-warning-ring);}
.btn-check:active+.btn-warning,.btn-check:checked+.btn-warning,.btn-warning.active,.btn-warning:active,.show>.btn-warning.dropdown-toggle{color:var(--btn-warning-fg);background-color:var(--btn-warning-hover);border-color:var(--btn-warning-hover);}
.btn-check:active+.btn-warning:focus,.btn-check:checked+.btn-warning:focus,.btn-warning.active:focus,.btn-warning:active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .15rem var(--btn-warning-ring);}
.btn-warning:disabled,.btn-warning.disabled{color:var(--btn-warning-fg);background-color:var(--btn-warning-base);border-color:var(--btn-warning-base);}

/* ---------- btn-info ---------- */
.btn-info{color:var(--btn-info-fg);background-color:var(--btn-info-base);border-color:var(--btn-info-base);}
.btn-info:hover{color:var(--btn-info-fg);background-color:var(--btn-info-hover);border-color:var(--btn-info-hover);}
.btn-check:focus+.btn-info,.btn-info:focus{box-shadow:0 0 0 .15rem var(--btn-info-ring);}
.btn-check:active+.btn-info,.btn-check:checked+.btn-info,.btn-info.active,.btn-info:active,.show>.btn-info.dropdown-toggle{color:var(--btn-info-fg);background-color:var(--btn-info-hover);border-color:var(--btn-info-hover);}
.btn-check:active+.btn-info:focus,.btn-check:checked+.btn-info:focus,.btn-info.active:focus,.btn-info:active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .15rem var(--btn-info-ring);}
.btn-info:disabled,.btn-info.disabled{color:var(--btn-info-fg);background-color:var(--btn-info-base);border-color:var(--btn-info-base);}

/* ---------- btn-light ---------- */
.btn-light{color:var(--btn-light-fg);background-color:var(--btn-light-base);border-color:var(--btn-light-base);}
.btn-light:hover{color:var(--btn-light-fg);background-color:var(--btn-light-hover);border-color:var(--btn-light-hover);}
.btn-check:focus+.btn-light,.btn-light:focus{box-shadow:0 0 0 .15rem var(--btn-light-ring);}
.btn-check:active+.btn-light,.btn-check:checked+.btn-light,.btn-light.active,.btn-light:active,.show>.btn-light.dropdown-toggle{color:var(--btn-light-fg);background-color:var(--btn-light-hover);border-color:var(--btn-light-hover);}
.btn-check:active+.btn-light:focus,.btn-check:checked+.btn-light:focus,.btn-light.active:focus,.btn-light:active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .15rem var(--btn-light-ring);}
.btn-light:disabled,.btn-light.disabled{color:var(--btn-light-fg);background-color:var(--btn-light-base);border-color:var(--btn-light-base);}

/* ---------- btn-dark ---------- */
.btn-dark{color:var(--btn-dark-fg);background-color:var(--btn-dark-base);border-color:var(--btn-dark-base);}
.btn-dark:hover{color:var(--btn-dark-fg);background-color:var(--btn-dark-hover);border-color:var(--btn-dark-hover);}
.btn-check:focus+.btn-dark,.btn-dark:focus{box-shadow:0 0 0 .15rem var(--btn-dark-ring);}
.btn-check:active+.btn-dark,.btn-check:checked+.btn-dark,.btn-dark.active,.btn-dark:active,.show>.btn-dark.dropdown-toggle{color:var(--btn-dark-fg);background-color:var(--btn-dark-hover);border-color:var(--btn-dark-hover);}
.btn-check:active+.btn-dark:focus,.btn-check:checked+.btn-dark:focus,.btn-dark.active:focus,.btn-dark:active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .15rem var(--btn-dark-ring);}
.btn-dark:disabled,.btn-dark.disabled{color:var(--btn-dark-fg);background-color:var(--btn-dark-base);border-color:var(--btn-dark-base);}

/* ---------- btn-outline-primary ---------- */
.btn-outline-primary{color:var(--btn-primary-outline);border-color:var(--btn-primary-outline);}
.btn-outline-primary:hover{color:var(--btn-primary-fg);background-color:var(--btn-primary-outline);border-color:var(--btn-primary-outline);}
.btn-check:focus+.btn-outline-primary,.btn-outline-primary:focus{box-shadow:0 0 0 .15rem var(--btn-primary-ring);}
.btn-check:active+.btn-outline-primary,.btn-check:checked+.btn-outline-primary,.btn-outline-primary.active,.btn-outline-primary:active,.show>.btn-outline-primary.dropdown-toggle{color:var(--btn-primary-fg);background-color:var(--btn-primary-outline);border-color:var(--btn-primary-outline);}
.btn-outline-primary:disabled,.btn-outline-primary.disabled{color:var(--btn-primary-outline);background-color:transparent;}

/* ---------- btn-outline-secondary ---------- */
.btn-outline-secondary{color:var(--btn-secondary-outline);border-color:var(--btn-secondary-outline);}
.btn-outline-secondary:hover{color:var(--btn-secondary-fg);background-color:var(--btn-secondary-outline);border-color:var(--btn-secondary-outline);}
.btn-check:focus+.btn-outline-secondary,.btn-outline-secondary:focus{box-shadow:0 0 0 .15rem var(--btn-secondary-ring);}
.btn-check:active+.btn-outline-secondary,.btn-check:checked+.btn-outline-secondary,.btn-outline-secondary.active,.btn-outline-secondary:active,.show>.btn-outline-secondary.dropdown-toggle{color:var(--btn-secondary-fg);background-color:var(--btn-secondary-outline);border-color:var(--btn-secondary-outline);}
.btn-outline-secondary:disabled,.btn-outline-secondary.disabled{color:var(--btn-secondary-outline);background-color:transparent;}

/* ---------- btn-outline-success ---------- */
.btn-outline-success{color:var(--btn-success-outline);border-color:var(--btn-success-outline);}
.btn-outline-success:hover{color:var(--btn-success-fg);background-color:var(--btn-success-outline);border-color:var(--btn-success-outline);}
.btn-check:focus+.btn-outline-success,.btn-outline-success:focus{box-shadow:0 0 0 .15rem var(--btn-success-ring);}
.btn-check:active+.btn-outline-success,.btn-check:checked+.btn-outline-success,.btn-outline-success.active,.btn-outline-success:active,.show>.btn-outline-success.dropdown-toggle{color:var(--btn-success-fg);background-color:var(--btn-success-outline);border-color:var(--btn-success-outline);}
.btn-outline-success:disabled,.btn-outline-success.disabled{color:var(--btn-success-outline);background-color:transparent;}

/* ---------- btn-outline-danger ---------- */
.btn-outline-danger{color:var(--btn-danger-outline);border-color:var(--btn-danger-outline);}
.btn-outline-danger:hover{color:var(--btn-danger-fg);background-color:var(--btn-danger-outline);border-color:var(--btn-danger-outline);}
.btn-check:focus+.btn-outline-danger,.btn-outline-danger:focus{box-shadow:0 0 0 .15rem var(--btn-danger-ring);}
.btn-check:active+.btn-outline-danger,.btn-check:checked+.btn-outline-danger,.btn-outline-danger.active,.btn-outline-danger:active,.show>.btn-outline-danger.dropdown-toggle{color:var(--btn-danger-fg);background-color:var(--btn-danger-outline);border-color:var(--btn-danger-outline);}
.btn-outline-danger:disabled,.btn-outline-danger.disabled{color:var(--btn-danger-outline);background-color:transparent;}

/* ---------- btn-outline-warning ---------- */
.btn-outline-warning{color:var(--btn-warning-outline);border-color:var(--btn-warning-outline);}
.btn-outline-warning:hover{color:var(--btn-warning-fg);background-color:var(--btn-warning-outline);border-color:var(--btn-warning-outline);}
.btn-check:focus+.btn-outline-warning,.btn-outline-warning:focus{box-shadow:0 0 0 .15rem var(--btn-warning-ring);}
.btn-check:active+.btn-outline-warning,.btn-check:checked+.btn-outline-warning,.btn-outline-warning.active,.btn-outline-warning:active,.show>.btn-outline-warning.dropdown-toggle{color:var(--btn-warning-fg);background-color:var(--btn-warning-outline);border-color:var(--btn-warning-outline);}
.btn-outline-warning:disabled,.btn-outline-warning.disabled{color:var(--btn-warning-outline);background-color:transparent;}

/* ---------- btn-outline-info ---------- */
.btn-outline-info{color:var(--btn-info-outline);border-color:var(--btn-info-outline);}
.btn-outline-info:hover{color:var(--btn-info-fg);background-color:var(--btn-info-outline);border-color:var(--btn-info-outline);}
.btn-check:focus+.btn-outline-info,.btn-outline-info:focus{box-shadow:0 0 0 .15rem var(--btn-info-ring);}
.btn-check:active+.btn-outline-info,.btn-check:checked+.btn-outline-info,.btn-outline-info.active,.btn-outline-info:active,.show>.btn-outline-info.dropdown-toggle{color:var(--btn-info-fg);background-color:var(--btn-info-outline);border-color:var(--btn-info-outline);}
.btn-outline-info:disabled,.btn-outline-info.disabled{color:var(--btn-info-outline);background-color:transparent;}

/* ---------- btn-outline-light ---------- */
.btn-outline-light{color:var(--btn-light-outline);border-color:var(--btn-light-outline);}
.btn-outline-light:hover{color:var(--btn-light-fg);background-color:var(--btn-light-outline);border-color:var(--btn-light-outline);}
.btn-check:focus+.btn-outline-light,.btn-outline-light:focus{box-shadow:0 0 0 .15rem var(--btn-light-ring);}
.btn-check:active+.btn-outline-light,.btn-check:checked+.btn-outline-light,.btn-outline-light.active,.btn-outline-light:active,.show>.btn-outline-light.dropdown-toggle{color:var(--btn-light-fg);background-color:var(--btn-light-outline);border-color:var(--btn-light-outline);}
.btn-outline-light:disabled,.btn-outline-light.disabled{color:var(--btn-light-outline);background-color:transparent;}

/* ---------- btn-outline-dark ---------- */
.btn-outline-dark{color:var(--btn-dark-outline);border-color:var(--btn-dark-outline);}
.btn-outline-dark:hover{color:var(--btn-dark-fg);background-color:var(--btn-dark-outline);border-color:var(--btn-dark-outline);}
.btn-check:focus+.btn-outline-dark,.btn-outline-dark:focus{box-shadow:0 0 0 .15rem var(--btn-dark-ring);}
.btn-check:active+.btn-outline-dark,.btn-check:checked+.btn-outline-dark,.btn-outline-dark.active,.btn-outline-dark:active,.show>.btn-outline-dark.dropdown-toggle{color:var(--btn-dark-fg);background-color:var(--btn-dark-outline);border-color:var(--btn-dark-outline);}
.btn-outline-dark:disabled,.btn-outline-dark.disabled{color:var(--btn-dark-outline);background-color:transparent;}

/* ---------- btn-link ---------- */
.btn-link{color:var(--btn-link-color);}
.btn-link:hover{color:color-mix(in srgb, var(--btn-link-color), #000 15%);}

/* Badges */
:root {
  --badge-primary-bg:   #DBEAFE; --badge-primary-fg:   #1D4ED8;
  --badge-secondary-bg: #EAEAED; --badge-secondary-fg: #626677;
  --badge-success-bg:   #DCFCE7; --badge-success-fg:   #15803D; /*ผ่านการอนุมัติ, ผ่านการตรวจสอบ, อนุมัติ, อนุมัติแล้ว, ยังไม่ใช้(ReportUserCoupon), ครบ, จ่ายแล้ว, ยืนยันตัวตนแล้ว, ยืนยันโปรไฟล์, ประกาศ, จ่ายเงินแล้ว(ตัวหนังสืออย่างเดียวไม่มีพื้นหลัง)หน้า แก้ไขเวลาเข้าออกงาน */
  --badge-danger-bg:    #FEE2E2; --badge-danger-fg:    #B91C1C; /* รอเปลี่ยนรหัสผ่าน, ไม่ผ่านการอนุมัติ, ไม่ผ่านการตรวจสอบ, ขอด่วน, ไม่อนุมัติ, เวลาเริ่มงานน้อยกว่า 48 ชั่วโมง, ใบขอจ้างพนักานถูกยกเลิก(ตัวหนังสือสีแดงอย่างเดียวไม่มีพื้นหลัง), ยกเลิกทำงาน*/
  --badge-warning-bg:   #FEF3C7; --badge-warning-fg:   #D97706; /* รอการอนุมัติ, รอการตรวจสอบ, อยู่ระหว่างการอนุมัติ, รออนุมัติ, ยังไม่ยืนยันโปรไฟล์, รอเผยแพร่(Announcement), จ่ายไม่เต็ม(หน้reportpaid), กำลังดำเนินงาน, รอตรวจสอบ(แค่ตัวหนังสือส้มไม่ต้องมีพื้นหลัง) หน้า alleditworkinworkout, รอยืนยันทำงาน, รอยืนยันแก้ไขข้อมูลงาน*/
  --badge-info-bg:      #CFFAFE; --badge-info-fg:      #448CCC; /* ขอปกติ , จ่ายแล้วกำลังดำเนินงาน, เปิด (หน้า coupon), สำรอง หน้าคัดเลือกพนักงาน */
  --badge-light-bg:     #EFF2F7; --badge-light-fg:     #495057; /* ข้อมูลยังไม่ครบ, ปกติ, รอคัดเลือก, ยังไม่ OCR, ยกเลิก (หน้ายกเลิกใบขอ), ปิดประกาศ, จบงานรับเงินแล้ว, จบงาน, ปิด (หน้า coupon), จ่ายเต็ม (หน้า reportpaid), ใช้แล้ว (ReportUserCoupon)*/
  --badge-dark-bg:      #E0E1E2; --badge-dark-fg:      #2C3136; /* ไม่ผ่านการคัดเลือก */
}

.badge.bg-primary   { background-color: var(--badge-primary-bg)   !important; color: var(--badge-primary-fg)   !important; }
.badge.bg-secondary { background-color: var(--badge-secondary-bg) !important; color: var(--badge-secondary-fg) !important; }
.badge.bg-success   { background-color: var(--badge-success-bg)   !important; color: var(--badge-success-fg)   !important; }
.badge.bg-danger    { background-color: var(--badge-danger-bg)    !important; color: var(--badge-danger-fg)    !important; }
.badge.bg-warning   { background-color: var(--badge-warning-bg)   !important; color: var(--badge-warning-fg)   !important; }
.badge.bg-info      { background-color: var(--badge-info-bg)      !important; color: var(--badge-info-fg)      !important; }
.badge.bg-light     { background-color: var(--badge-light-bg)     !important; color: var(--badge-light-fg)     !important; }
.badge.bg-dark      { background-color: var(--badge-dark-bg)      !important; color: var(--badge-dark-fg)      !important; }

/* solid danger blacklist (สีแดงทึบ) */
.badge.bg-danger-solid { background-color: var(--btn-danger-base) !important; color: #fff !important; }

/* สถานะ: pending -> warning, approved -> success, rejected -> danger */
.badge-status-pending  { background-color: var(--badge-warning-bg); color: var(--badge-warning-fg); }
.badge-status-approved { background-color: var(--badge-success-bg); color: var(--badge-success-fg); }
.badge-status-rejected { background-color: var(--badge-danger-bg);  color: var(--badge-danger-fg); }

/* สีพื้นหลังเว็บ (web background) */
body { background-color: #EFF2F7; }

/* สีพื้นหลังหัวตาราง (table head row) */
.table thead th { background-color: #E4F1FC; }

/* เมนู Sidebar */

/* SVG แบบ mask */
#side-menu .app-menu-icon {
  display: inline-block;
  width: 1.75rem;
  height: 20px;
  margin-left: 4px;
  vertical-align: middle;
  background-color: #545a6d;
  -webkit-mask-image: var(--menu-icon);
          mask-image: var(--menu-icon);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 20px 20px;
          mask-size: 20px 20px;
}

/* เมนูหลัก */
body:not(.vertical-collpsed) #side-menu > li > a {
  margin: 2px 12px;
  padding: 12px 16px;
  min-height: auto;
  border-radius: 8px;
}

/* เมนูหลัก hover/active */
#side-menu > li > a:hover,
#side-menu > li.mm-active > a,
#side-menu > li > a.active,
#side-menu > li > a.mm-active {
  background-color: #E5E9FB !important;
  color: #556EE6 !important;
}
#side-menu > li > a:hover i,
#side-menu > li.mm-active > a i,
#side-menu > li > a.active i,
#side-menu > li > a.mm-active i {
  color: #556EE6 !important;
}
#side-menu > li > a:hover .app-menu-icon,
#side-menu > li.mm-active > a .app-menu-icon,
#side-menu > li > a.active .app-menu-icon,
#side-menu > li > a.mm-active .app-menu-icon {
  background-color: #556EE6 !important;
}

/* เมนูย่อย */
body:not(.vertical-collpsed) #side-menu .sub-menu {
  position: relative;
  padding: 4px 0;
}
body:not(.vertical-collpsed) #side-menu .sub-menu::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  width: 2px;
  background-color: #E5E9FB;
}
body:not(.vertical-collpsed) #side-menu .sub-menu li {
  position: relative;
}

body:not(.vertical-collpsed) #side-menu .sub-menu li a {
  margin: 2px 12px 2px 40px;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
}

#side-menu .sub-menu li a:hover {
  background-color: #E5E9FB !important;
  color: #556EE6 !important;
}

#side-menu .sub-menu li.mm-active > a,
#side-menu .sub-menu li a.active {
  background-color: #556EE6 !important;
  color: #fff !important;
}

/* เมนูย่อย active */
body:not(.vertical-collpsed) #side-menu .sub-menu li.mm-active::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 30px;
  width: 2px;
  background-color: #556EE6;
  z-index: 1;
}