.offer_section .box {
  /* ✅ บังคับใช้สีธีมม่วงไล่เฉดเป็นมาตรฐานเดียว */
  background: linear-gradient(
    135deg,
    rgb(80 0 80 / 70%),
    rgb(80 0 80 / 90%)
  ) !important;
  border-radius: 15px;
  padding: 25px 15px;
  min-height: 200px;
  transition: all 0.3s ease;
  border: none;
}

.offer_section .box h5,
.offer_section .box h6,
.offer_section .box i {
  color: #ffffff !important;
  /* ✅ บังคับตัวอักษรและไอคอนเป็นสีขาว */
}

.offer_section .box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* จัดการ Grid ของรายการไอคอนใน Modal */
.icon-grid {
    max-height: 160px !important; /* บีบให้เตี้ยลงเพื่อให้เห็นฟิลด์ด้านล่างเร็วขึ้น */
    overflow-y: auto;
    margin-bottom: 10px;
    background: #f9f9f9;
    border-radius: 5px;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    gap: 10px;
}

.icon-item {
  text-align: center;
  padding: 10px 5px;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.2s;
  border: 1px solid transparent;
}

.icon-item:hover {
  background: #e9ecef;
  border-color: #dee2e6;
}

.icon-item.active {
  background: #007bff;
  color: #fff;
  border-color: #0056b3;
}

/* ปรับแต่งปุ่มเพิ่มรายการใหม่ที่เป็นเส้นประ */
.border-dashed {
  border: 2px dashed #ccc !important;
  background: #fafafa;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.border-dashed:hover {
  background: #f0f0f0;
  border-color: #007bff !important;
  color: #007bff;
}

.offer_section .box {
  position: relative;
  overflow: hidden;
  /* สำคัญ: เพื่อไม่ให้ไอคอนที่ขยายใหญ่ออกนอกกรอบการ์ด */
  transition: all 0.3s ease;
}

/* ✅ สไตล์สำหรับไอคอนพื้นหลัง */
.offer_section .box .bg-icon {
  position: absolute;
  right: -20px;
  /* วางเยื้องไปทางขวา */
  bottom: -20px;
  /* วางเยื้องไปทางด้านล่าง */
  font-size: 150px;
  /* ขยายขนาดให้ใหญ่ */
  color: rgba(255, 255, 255, 0.1) !important;
  /* ปรับให้โปร่งใสมาก (10%) */
  transform: rotate(-15deg);
  /* หมุนไอคอนเล็กน้อยให้ดูมีลูกเล่น */
  z-index: 1;
  /* อยู่หลังเนื้อหาหลัก */
  pointer-events: none;
  /* ป้องกันการขวางการคลิก */
}

.offer_section .box:hover .bg-icon {
  transform: rotate(-25deg) scale(1.1);
  /* เพิ่ม Effect ตอน Hover ให้ไอคอนขยับ */
  transition: all 0.5s ease;
}

.offer_section .box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* เพิ่มสไตล์เพื่อให้รู้ว่าลากได้ */
.offer_section .box {
  cursor: grab;
}

.offer_section .box:active {
  cursor: grabbing;
}

/* สไตล์ตอนที่กำลังลาก (Ghost class) */
.sortable-ghost {
  opacity: 0.4;
  border: 2px dashed #680268 !important;
}

body.modal-open {
  overflow: auto !important;
  padding-right: 0 !important;
}

.modal {
  overflow-y: auto !important;
}

/* ซ่อน Scrollbar ของตัว Modal Dialog เพื่อไม่ให้เกิดเส้นซ้ำ */
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: hidden !important;
}

/* --- ส่วนจัดการ Modal ให้รองรับ Scrollbar และปุ่มไม่ตกจอ --- */

/* 1. คุมโครงสร้างหลักของ Modal */
.modal-dialog {
  display: flex;
  align-items: center; /* จัดกลางจอแนวตั้ง */
  min-height: calc(100% - 3.5rem);
}

.modal-content {
    /* ปรับความสูงให้พอดีกับ iPad (80% ของหน้าจอ) */
    max-height: 80vh !important; 
    display: flex !important;
    flex-direction: column !important;
    border-radius: 15px;
    overflow: hidden;
    border: none;
}

/* 2. บีบส่วนหัวและท้ายให้เล็กลง */
.modal-header, 
.modal-footer {
    flex-shrink: 0; /* ✅ สำคัญ: ห้ามให้ปุ่มและหัวหดตัวหรือหายไป */
    background: #fff;
    padding: 10px 20px !important;
}

.modal-body {
    overflow-y: auto !important; /* ✅ เปิด Scrollbar เฉพาะจุดนี้ */
    flex: 1 1 auto;
    padding: 15px 25px !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch; /* เลื่อนใน iPad ได้ลื่นๆ */
}

/* 3. ตกแต่ง Scrollbar ให้ดูสะอาดตา (สไตล์ iOS/Chrome) */
.modal-body::-webkit-scrollbar {
    width: 6px;
}
.modal-body::-webkit-scrollbar-track {
    background: #f8f9fa;
}
.modal-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}



/* --- คงสไตล์เดิมของพี่ไว้ (Offer Section) --- */
.offer_section .box {
  background: linear-gradient(
    135deg,
    rgb(80 0 80 / 70%),
    rgb(80 0 80 / 90%)
  ) !important;
  border-radius: 15px;
  padding: 25px 15px;
  min-height: 200px;
  transition: all 0.3s ease;
  border: none;
  position: relative;
  overflow: hidden;
  cursor: grab;
}
.offer_section .box h5,
.offer_section .box h6,
.offer_section .box i {
  color: #ffffff !important;
}