.bg-main {
    background-color: #ffffff;
  }
  .bg-white {
    background-color: #f8f8f8;
  }

  .bg-red {
    background-color: #ca291c;
  }
  .bg-blue {
    background-color: #151F6D;
  }
  .bg-blue-ele {
   background: rgba(4, 87, 167, 1); 
  }

  .bg-blue-puriku {
    background: #FFC1EC !important; 

   }
 

  .bg-red-check-point {
    background-color: #f6f6f6;
  }

.nav-tabs .nav-link {
  color: #6c757d;               /* สีตัวหนังสือของแท็บปกติ */
  background-color: #fff;       /* พื้นหลังปกติ */
  border: 1px solid #dee2e6;
  border-bottom-color: transparent;
}

.nav-tabs .nav-link.active {
  color: #212529;               /* สีตัวหนังสือแท็บถูกเลือก */
  background-color: #e9ecef;    /* พื้นหลังแท็บถูกเลือก */
  border-color: #dee2e6 #dee2e6 #e9ecef;
}

.tabs-wrapper {
  display: flex;
  max-width: 360px;
  margin: 1rem auto 0;
  border: 1px solid #dee2e6;          /* กรอบใหญ่ */
  border-radius: 8px;                 /* โค้งทุกมุม */
  overflow: hidden;
  background: #fff;
}

.tabs-wrapper .tabs {
  display: flex;
  width: 100%;
}

.tabs-wrapper .tab {
  flex: 1;
  padding: 0.75rem 0;                  /* ความสูงแท็บ */
  text-align: center;
  background: transparent;
  color: #888;
  border: none;
  border-right: 1px solid #dee2e6;     /* เส้นแบ่งระหว่างแท็บ */
  margin-bottom: 0;                    /* ป้องกัน margin default */
  cursor: pointer;
}

.tabs-wrapper .tab:last-child {
  border-right: none;                  /* เอาเส้นขวาสุดออก */
}

.tabs-wrapper .tab.active {
  background: #e0e0e0;                 /* พื้นหลังแท็บถูกเลือก */
  color: #333;                         /* ตัวอักษรแท็บถูกเลือก */
  margin-bottom: -1px;                 /* กลบเส้นล่างของ wrapper ใต้แท็บนี้ */
}

/* ปรับมุมเฉพาะแท็บด้านข้างให้โค้งมุมบน แต่ไม่โค้งมุมล่าง */
.tabs-wrapper .tab:first-child {
  border-top-left-radius: 8px;
}
.tabs-wrapper .tab:last-child.active {
  border-top-right-radius: 8px;
}

.success-wrapper {
  /* เอาส่วนเนื้อหาให้เต็มความสูง viewport ลบด้วยความสูง footer */
  min-height: calc(100vh - 70px);
  padding-bottom: 70px;       /* กันเนื้อหาไม่ชน footer */
  box-sizing: border-box;     /* ให้ padding ถูกคิดในความสูง */
}


/* global.css หรือ module ของ component */

.segmented-control {
  display: flex;
  max-width: 360px;                /* ปรับตามความกว้างที่ต้องการ */
  margin: 1rem auto;               /* กึ่งกลางหน้าจอ */
  border: 1px solid #dee2e6;       /* ขอบกรอบนอก */
  border-radius: 8px;              /* โค้งมุมทั้งหมด */
  overflow: hidden;                /* ซ่อนมุมโค้งของปุ่มข้างใน */
}

.segmented-control button {
  flex: 1;                         /* กินความกว้างเท่า ๆ กัน */
  padding: 0.75rem;                /* ความสูงพอดี */
  background: #ffffff;             /* พื้นหลังปุ่มปกติ */
  color: #555;                     /* ตัวหนังสือปกติ */
  border: none;                    /* ลบเส้นขอบเดิม */
  font-size: 0.95rem;
  cursor: pointer;
}

.segmented-control button + button {
  border-left: 1px solid #dee2e6; /* เส้นแบ่งระหว่างปุ่ม */
}

.segmented-control button.active {
  background: #0095DA;             /* พื้นหลังปุ่มที่ถูกเลือก */
  color: #ffffff;                  /* ตัวอักษรปุ่มที่ถูกเลือก */
}

/* ถ้าอยากเพิ่มเอฟเฟกต์ hover เพิ่มเติม */
.segmented-control button:not(.active):hover {
  background: #f8f9fa;
}

.status-wait {
  display: inline-block;
  background-color: #fcedbb;
  color: #000000;
  padding: 0.1rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 0.5rem;
  /* border: 1px solid #f3d78f; */
  margin: 0.3rem 0;
}


.status-refund {
  display: inline-block;
  background-color: #FFBD73;
  color: #000000;
  padding: 0.1rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 0.5rem;
  margin: 0.3rem 0;
}


.status-cancel {
  display: inline-block;
  background-color: #fcccca;
  color: #000000;
  padding: 0.1rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 0.5rem;
  /* border: 1px solid #f3d78f; */
  margin: 0.3rem 0;
}

.status-success {
  display: inline-block;
  background-color: #b0eae7;
  color: #000000;
  padding: 0.1rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 0.5rem;
  /* border: 1px solid #f3d78f; */
  margin: 0.3rem 0;
}

form label {
  color: #6b7280
}

/* ระดับแรก */
ol.decimal-dot {
  counter-reset: level1;
  list-style: none;
  padding-left: 0;
}
ol.decimal-dot > li {
  counter-increment: level1;
  position: relative;
  padding-left: 1em;
  margin-bottom: .5em;
}
ol.decimal-dot > li::before {
  content: counter(level1) ". ";
  position: absolute;
  left: 0;
}

/* ระดับที่สอง */
ol.decimal-dot > li > ol {
  counter-reset: level2;
  list-style: none;
  padding-left: 0em;
  margin-top: .25em;
}
ol.decimal-dot > li > ol > li {
  counter-increment: level2;
  position: relative;
  padding-left: 2em;
  margin-bottom: .25em;
}
ol.decimal-dot > li > ol > li::before {
  content: counter(level1) "." counter(level2) ". ";
  position: absolute;
  left: 0;
}

/* ระดับที่สาม */
ol.decimal-dot > li > ol > li > ol {
  counter-reset: level3;
  list-style: none;
  padding-left: 0em;
  margin-top: .25em;
}
ol.decimal-dot > li > ol > li > ol > li {
  counter-increment: level3;
  position: relative;
  padding-left: 2.5em;
  margin-bottom: .25em;
}
ol.decimal-dot > li > ol > li > ol > li::before {
  content:
    counter(level1) "."
    counter(level2) "."
    counter(level3) ". ";
  position: absolute;
  left: 0;
}