/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.counter {
  box-shadow: none;
  position: relative;
  z-index: 2;
  margin-left: -23px;
  border-radius: 10em;
  padding: 1px 7px;
  background-color: transparent;
  font-size: 100px;
  color: #fff;
  left: auto;
  top: -23px;
}

.fullwidth {
  width: 100%;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

html,
body {
  font-family: Prompt;
}

/* .file-field.medium .file-path-wrapper {
    height: 3rem;
}

.file-field.medium .file-path-wrapper .file-path {
    height: 2.8rem;
}

.file-field.medium input[type=file] {
    height: 2.8rem;
}

.file-field.big-2 .file-path-wrapper {
    height: 3.7rem;
}

.file-field.big-2 .file-path-wrapper .file-path {
    height: 3.5rem;
}

.file-field input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    height: 2.8rem;
}

.d-flex .justify-content-center {
    height: 2.8rem;
} */

.md-form.md-outline label.active {
  transform: translateY(-18px) scale(0.8);
  background: #fff;
  font-weight: 500;
  padding-right: 5px;
  padding-left: 5px;
  left: 8px;
}

main {
  margin: 75px 0 0 75px;
}

.white-skin .card-header,
.white-skin .form-header {
  background-color: #e89127;
  /* color: #e89127; */
}

.fix-164 {
  width: 164px !important;
  max-width: 164px !important;
}

.advads-group-1962294502 {
  /* เปลี่ยน ID เป็นเลข ID ของกลุ่มโฆษณาคุณ */
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* ระยะห่างระหว่างโฆษณา */
}
.advads-group-1962294502 > div {
  flex: 0 0 calc(50% - 5px); /* แบ่งเป็น 2 คอลัมน์ (50% ลบค่า gap) */
}

.rerer-mobile_ads {
  display: flex; /* สั่งให้เรียงตัวแบบแนวนอน */
  flex-wrap: wrap; /* ถ้าพื้นที่ไม่พอให้ขึ้นบรรทัดใหม่ */
  gap: 10px; /* ระยะห่างระหว่างโฆษณา (ปรับได้ตามใจชอบ) */
  justify-content: center; /* จัดให้อยู่กึ่งกลางหน้าจอ */
}

.rerer-mobile_ads > * {
  /* เลือก Element ลูกทุกตัวที่อยู่ในคลาสนี้ */
  flex: 0 0 calc(50% - 5px); /* บังคับให้กว้าง 50% ลบด้วยครึ่งหนึ่งของค่า gap */
  box-sizing: border-box; /* ป้องกันขอบหรือ padding ดันจนหลุดแถว */
}

/* จัดตำแหน่งให้อินพุตและคำว่า บาท อยู่ในระนาบเดียวกัน */
.mdb-currency-container {
  position: relative;
  display: flex;
  align-items: center;
}

/* เว้นช่องว่างด้านขวาของช่องกรอก ไม่ให้ตัวเลขพิมพ์ไปทับคำว่า บาท */
.mdb-currency-container .form-control {
  padding-right: 3.5rem !important;
}

/* ปรับแต่งตำแหน่งและหน้าตาของคำว่า บาท ให้ลอยอยู่ด้านในขวาสุด */
.mdb-currency-suffix {
  position: absolute;
  right: 12px;
  z-index: 5; /* ดันให้อยู่เหนือเลเยอร์ของกล่องอินพุต */
  color: #4f4f4f; /* สีข้อความให้เข้ากับธีม MDB */
  pointer-events: none; /* เพื่อให้คลิกทะลุไปโดนช่องกรอกได้ */
  font-size: 0.9rem;
}

/* 1. ซ่อนกล่องรูปภาพตารางไซส์ไว้เป็นค่าเริ่มต้น */
.size-chart-hover-zone .size-chart-dropdown {
  display: none !important;
  position: absolute !important;
  top: 100% !important; /* ให้กล่องแสดงผลตกลงด้านล่างถัดจากตัวอักษร */
  left: 0 !important;
  z-index: 9999 !important; /* ตั้งค่าเลเยอร์ให้ลอยอยู่บนสุดเหนือปุ่มเรดิโอตัวอื่น */
}

/* 2. สั่งแสดงผลรูปภาพทันทีเมื่อมีการนำเมาส์มา Hover */
.size-chart-hover-zone:hover .size-chart-dropdown {
  display: block !important;
}