@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600;700;800&display=swap");
/* ── DekEnHUB สมัครสมาชิก — เข้าชุด design ใหม่ ── */
#dh-reg,
#dh-reg * {
  font-family: "Prompt", sans-serif !important;
}
#dh-reg,
#dh-reg * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
body {
  font-family: "Prompt", sans-serif !important;
  color: #26244b;
  background: #f4f5fa !important;
  padding-top: 0 !important;
}
#dh-reg {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #f4f5fa;
  max-width: 440px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#dh-reg .top {
  padding: calc(22px + env(safe-area-inset-top)) 20px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
}
#dh-reg .top img {
  height: 34px;
  object-fit: contain;
  object-position: left;
  cursor: pointer;
}
#dh-reg .burger {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(38, 36, 75, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#dh-reg .body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 8px 26px 46px;
}
#dh-reg .head {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#dh-reg .logo-big {
  height: 52px;
  object-fit: contain;
  margin-top: 8px;
}
#dh-reg .h1 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 12px;
}
#dh-reg .col {
  max-width: 360px;
  margin: 0 auto;
  width: 100%;
}
/* stepper */
#dh-reg .steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 18px auto 20px;
  max-width: 300px;
}
#dh-reg .dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  background: #eaecf4;
  color: #8a8fa8;
  transition: all 0.2s;
}
#dh-reg .dot svg {
  display: block;
}
#dh-reg .dot.on {
  background: linear-gradient(130deg, #ff8e3c, #ff4e6b);
  color: #fff;
  box-shadow: 0 6px 14px rgba(255, 78, 107, 0.3);
}
#dh-reg .dot.done {
  background: #1fa971;
  color: #fff;
}
#dh-reg .bar {
  flex: 1;
  height: 2px;
  background: #eaecf4;
  transition: background 0.2s;
}
#dh-reg .bar.on {
  background: #ff6b2c;
}
/* steps visibility (คุมด้วย class .active เดิมที่ JS toggle) */
#dh-reg .step1,
#dh-reg .step2,
#dh-reg .step3,
#dh-reg .step4,
#dh-reg .regis-action {
  display: none;
}
#dh-reg .step1.active,
#dh-reg .step2.active,
#dh-reg .step3.active,
#dh-reg .step4.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#dh-reg .regis-action.active {
  display: flex;
  gap: 10px;
}
#dh-reg .steptitle {
  font-size: 13px;
  color: #8a8fa8;
  text-align: center;
  margin-bottom: 2px;
}
/* type pills */
#dh-reg .types {
  display: flex;
  gap: 10px;
}
#dh-reg .type {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: #fff;
  border: 1.5px solid #e0e2ee;
  color: #8a8fa8;
  transition: all 0.18s;
}
#dh-reg .type.on {
  border-color: #ff6b2c;
  color: #fff;
  background: linear-gradient(130deg, #ff8e3c, #ff4e6b);
  box-shadow: 0 6px 14px rgba(255, 78, 107, 0.28);
}
/* fields */
#dh-reg .field {
  width: 100%;
  background: #fff;
  border: 1.5px solid #ff6b2c;
  border-radius: 999px;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
#dh-reg .field.gray {
  background: #f1f2f8;
  border-color: #e0e2ee;
}
#dh-reg .field input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: "Prompt", sans-serif;
  font-size: 14px;
  color: #26244b;
  min-width: 0;
}
#dh-reg .field input::placeholder {
  color: #b9bdcf;
}
#dh-reg .field .eye {
  flex: none;
  cursor: pointer;
  display: flex;
  color: #b9bdcf;
}
/* เลือกค่าจากประวัติที่เคยพิมพ์ Chrome จะทาพื้นหลังฟ้าให้เอง override background ตรง ๆ ไม่ได้
     ต้องกลบด้วย box-shadow inset แล้วหน่วง transition ยาว ๆ ให้สีพื้นของเบราว์เซอร์ไม่มีโอกาสวาด */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #1f1f1f;
  caret-color: #1f1f1f;
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  transition:
    background-color 600000s 0s,
    color 600000s 0s;
}
#dh-reg .two {
  display: flex;
  gap: 10px;
}
#dh-reg .two .field {
  flex: 1;
}
#dh-reg .lbl {
  font-size: 12.5px;
  color: #8a8fa8;
  text-align: center;
}
#dh-reg .btn-grad {
  width: 100%;
  background: linear-gradient(130deg, #ff8e3c, #ff4e6b);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 0;
  text-align: center;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: "Prompt", sans-serif;
  box-shadow: 0 10px 24px rgba(255, 78, 107, 0.32);
  text-decoration: none;
}
#dh-reg .btn-ghost {
  width: 100%;
  background: #fff;
  border: 1.5px solid #e0e2ee;
  color: #55597a;
  border-radius: 999px;
  padding: 14px 0;
  text-align: center;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: "Prompt", sans-serif;
  text-decoration: none;
}
#dh-reg .terms {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: #55597a;
  line-height: 1.5;
  padding: 2px 4px 2px 30px;
}
#dh-reg .terms input {
  margin-top: 2px;
  flex: none;
  width: 17px;
  height: 17px;
  accent-color: #ff6b2c;
}
#dh-reg .terms a {
  color: #ff6b2c;
  font-weight: 600;
  text-decoration: none;
}
#dh-reg .back {
  display: block;
  text-align: center;
  margin-top: 18px;
  font-size: 12px;
  color: #8a8fa8;
  cursor: pointer;
  text-decoration: none;
}
/* ── ปิดระบบ gutter ของ Bootstrap ใน .row ──
     หน้านี้จัดระยะด้วย gap เองอยู่แล้ว เหลือไว้แต่ margin ติดลบที่ทำให้เนื้อหาล้นออกข้าง
     และ .body ที่ตั้ง overflow-y:auto จะถูกบังคับให้แกนนอนเป็น auto ตามไปด้วย = เลื่อนไปข้างได้ */
#dh-reg .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}
#dh-reg .row > * {
  margin-top: 0;
} /* ห้ามล้าง padding ตรงนี้ — .field เป็นลูกตรงของ .row จะโดนล้างไปด้วย (gutter เป็น 0 จากบรรทัดบนอยู่แล้ว) */
#dh-reg .body {
  overflow-x: hidden;
}
/* ช่องคู่ (ชื่อ/นามสกุล): ต้องล้าง width:100% ที่ .field ตั้งไว้ ไม่งั้นสองช่องกินเต็มความกว้างคนละอัน = ล้นออกข้าง */
#dh-reg .two {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  width: 100%;
  min-width: 0;
}
#dh-reg .two > .field {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
/* ไอคอนในช่องกรอก: ขยับเข้ามาจากขอบอีกหน่อย ไม่ให้ดูชิดเส้นขอบ */
#dh-reg .field > svg:first-child {
  margin-left: 2px;
}
/* ไม่ให้ชื่อลิงก์ขาดกลางคำ ("...เป็นส่วน / ตัว") */
#dh-reg .terms a {
  white-space: nowrap;
}
/* ซ่อน select เดิม (คง element ไว้ให้ JS อ่าน .val()) */
#regis_url {
  display: none !important;
}
/* ── SweetAlert2 ให้เข้าธีม DekEnHUB ── */
.swal2-popup {
  font-family: "Prompt", sans-serif !important;
  border-radius: 24px !important;
  padding: 26px 22px 22px !important;
}
.swal2-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #26244b !important;
}
.swal2-html-container {
  font-size: 13px !important;
  color: #8a8fa8 !important;
}
.swal2-actions {
  gap: 8px !important;
  margin-top: 18px !important;
  width: 100% !important;
  padding: 0 4px !important;
}
.swal2-styled {
  font-family: "Prompt", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 13px !important;
  padding: 11px 22px !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.swal2-styled:focus {
  box-shadow: none !important;
}
.swal2-confirm {
  background: linear-gradient(130deg, #ff8e3c, #ff4e6b) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(255, 78, 107, 0.3) !important;
}
.swal2-deny,
.swal2-cancel {
  background: #f1f2f8 !important;
  color: #55597a !important;
}
.swal2-icon.swal2-success {
  border-color: #1fa971 !important;
  color: #1fa971 !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(31, 169, 113, 0.3) !important;
}
.swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: #1fa971 !important;
}
.swal2-icon.swal2-error {
  border-color: #e5484d !important;
  color: #e5484d !important;
}
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background-color: #e5484d !important;
}
.swal2-icon.swal2-warning {
  border-color: #f59e0b !important;
  color: #f59e0b !important;
}