* {
     box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Tahoma', sans-serif;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  
  background:url('../img/bg1.png') no-repeat;
 background-size: cover; /* ปรับขนาดให้คลุมพื้นที่ */
  background-position: center; /* จัดให้อยู่ตรงกลาง */
  background-repeat: no-repeat; /* ไม่ให้รูปภาพซ้ำ */
  background-attachment: fixed; /* (ตัวเลือก) ให้ภาพตรึงอยู่กับที่เมื่อเลื่อนหน้าจอ */
  
  height: 100vh; /* ให้ความสูงเท่ากับความสูงหน้าจอ */
  
  
}

.wrapper{
  width:1000px;
  background:#ffffff;
  height: 100vh;
box-shadow: 5px 5px 20px 5px #b6b4b4;
}
.top-bar {

  background:url('../img/bar2.jpg') no-repeat;
   background-size: cover;
  background-position: center;
  display: flex;
 
  justify-content: space-between; /* ดันลูกคนแรกไปซ้ายสุด คนที่สองไปขวาสุด */
  align-items: center;
  padding: 15px 20px;
  color: white;
  position: sticky;
    top: 0px;        /* ปรับค่านี้ตามความสูงของ .top-nav เพื่อให้ต่อกันพอดี */
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* เพิ่มเงาให้ดูมีมิติเวลาเลื่อน */
   
 
}

.wrapper .logo {
   display: flex;
  font-weight: bold;
  font-size: 1.2rem;
  align-items: center;
}
.wrapper .logo img {
  width:60px;
  height: 60px;
}

.user-section {
  display: flex;
  align-items: center;
  gap: 15px; /* ระยะห่างระหว่างชื่อกับปุ่ม Logout */
}
.logout-btn {
  text-decoration: none;
  color: rgb(1, 29, 6);
  margin-left: 15px;
  font-weight: bold;
  padding: 5px 10px;    /* เพิ่มพื้นที่รอบตัวอักษรให้เห็นสีพื้นหลังชัดขึ้น */
  border-radius: 4px;   /* ทำมุมโค้งมนเล็กน้อย */
  transition: background-color 0.3s ease; /* ทำให้สีค่อยๆ เปลี่ยน */
}
.logout-btn:hover {
  background-color: #3498db; /* สีฟ้า (ปรับเฉดได้ตามต้องการ) */
  color: white;              /* มั่นใจว่าตัวอักษรยังเป็นสีขาว */
}
.logout-btn i {
  font-size: 14px;
}

.menu-toggle {
  display: none; /* ซ่อนปุ่มสามขีดในหน้าจอคอม */
  font-size: 24px;
  cursor: pointer;
  color: white;
}



.menu-bar {
  background-color: #c0f78c; /* สีเทาอ่อน */
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #9daf96;
  position: sticky;
    top: 67px;        /* ปรับค่านี้ตามความสูงของ .top-nav เพื่อให้ต่อกันพอดี */
     z-index: 999;
    box-shadow: 0 4px 10px rgba(1, 31, 3, 0.1); /* เพิ่มเงาให้ดูมีมิติเวลาเลื่อน */
    
}


.menu-item {
  position: relative; /* สำคัญ: เพื่อให้เมนูย่อยอ้างอิงตำแหน่งจากตัวนี้ */
  display: flex;          /* เปิดใช้ Flexbox */
  flex-direction: column; /* จัดให้ไอคอนกับข้อความเรียงกันเป็นแนวตั้ง */
  align-items: center;    /* จัดให้อยู่กึ่งกลางแนวนอน */
  justify-content: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
  padding: 15px;
  cursor: pointer;
  transition: background 0.3s;
  
}

.menu-header {
    position: relative; /* สำคัญ: เพื่อให้เมนูย่อยอ้างอิงตำแหน่งจากตัวนี้ */
  display: flex;          /* เปิดใช้ Flexbox */
  flex-direction: column; /* จัดให้ไอคอนกับข้อความเรียงกันเป็นแนวตั้ง */
  align-items: center;    /* จัดให้อยู่กึ่งกลางแนวนอน */

  font-weight: 600;
  justify-content: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
  cursor: pointer;
  transition: background 0.3s; 
}
.menu-item:hover {
  background-color: #f0e162;
}

.menu-item:last-child {
  border-right: none;
}
.menu-item i {
  font-size: 18px;   /* ปรับขนาดไอคอน */
   color:#5e4e0d;  /* สีเหลืองตามรูป */
  margin-bottom: 5px; /* ระยะห่างระหว่างไอคอนกับตัวหนังสือ */
}
.menu-item span {
  font-size: 14px;
  color: #444242;
}
.submenu {
  display: none;      /* ซ่อนเมนูย่อย */
  position: absolute;
  top: 100%;          /* ให้แสดงต่อลงมาจากเมนูหลักพอดี */
  left: 0;
   background-color: #c5c2c2; /* สีเทาอ่อน */
  min-width: 200px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
  z-index: 100;
  border-top: 2px solid #f1c40f;
}
.submenu a {
  color: #333;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}

.submenu a:hover {
   background-color: #f0e162;
  
}

/* เมื่อเอาเมาส์มาชี้ที่เมนูหลัก ให้แสดงเมนูย่อย */
.has-submenu:hover .submenu {
  display: block;
}
.show1{
   display:none;
}

/*-------------------*/



.container {
    max-width: 1100px;
 background:#ffffff;
  
    padding: 15px;
    border: 1px solid #45484d;
    
}
.container2 {
    max-width: 1100px;
 background:#ffffff;
 
    padding: 15px;
    border: 1px solid #45484d;
    
}


footer{
    /* position: fixed; */
    bottom: 0;    
    margin-top: 40px;
    z-index: 999;
    width: 100%;
    text-align: center;
    background: transparent;
    color: #666;
    /* background: #175d68;
    color: #fff; */
}
footer p{
    margin: 10px 0;    
    padding: 10px 0;
}
/* จัดการกล่องสไลด์หลัก */
.slider-container {
  width: 100%;
  max-width: 100%; /* ปรับขนาดความกว้างตามต้องการ */
 height: auto;       /* ปล่อยให้ความสูงเปลี่ยนตามสัดส่วน */
  aspect-ratio: 16 / 9; /* บังคับสัดส่วนสี่เหลี่ยม (เช่น 16:9 หรือ 4:3) เพื่อไม่ให้รูปเพี้ยน */
  position: relative;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 8px; /* เพิ่มความโค้งมนให้เข้ากับดีไซน์โมบายล์สมัยใหม่ */
}

/* ส่วนจัดวางรูปภาพ (มี 5 รูป ความกว้างรวมจึงเป็น 500%) */
.slides {
  display: flex;
  width: 500%;
  height: 100%;
  animation: autoplaySlider 16s infinite ease-in-out; /* เลื่อนอัตโนมัติทุก 4 วินาทีต่อรูป */
}

.slide {
  width: 20%; /* 100% หาร 5 รูป */
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* แอนิเมชันสำหรับเลื่อนรูปภาพ */
@keyframes autoplaySlider {
  /* รูปที่ 1 (แสดง 0s - 3s, เลื่อนไปรูปถัดไป 1s) */
  0%, 18.75% { transform: translateX(0%); }
  
  /* รูปที่ 2 (แสดง 4s - 7s, เลื่อนไปรูปถัดไป 1s) */
  25%, 43.75% { transform: translateX(-20%); }
  
  /* รูปที่ 3 (แสดง 8s - 11s, เลื่อนไปรูปถัดไป 1s) */
  50%, 68.75% { transform: translateX(-40%); }
  
  /* รูปที่ 4 (แสดง 12s - 15s, เลื่อนไปรูปถัดไป 1s) */
  75%, 93.75% { transform: translateX(-60%); }
  
  /* วนกลับไปรูปแรกแบบไร้รอยต่อ */
  100% { transform: translateX(-80%); }
}

/* จัดการตำแหน่งปุ่มจุดด้านล่าง */
.navigation-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
}

.dot {
  width: 15px;
  height: 15px;
  background-color: #bbb;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

/* แอนิเมชันเปลี่ยนสีจุดตามรูปภาพ */
.d1 { animation: dot1 16s infinite; }
.d2 { animation: dot2 16s infinite; }
.d3 { animation: dot3 16s infinite; }
.d4 { animation: dot4 16s infinite; }

@keyframes dot1 {
  0%, 18.75% { background-color: red; }
  25%, 100% { background-color: #bbb; }
}
@keyframes dot2 {
  0%, 18.75% { background-color: #bbb; }
  25%, 43.75% { background-color: red; }
  50%, 100% { background-color: #bbb; }
}
@keyframes dot3 {
  0%, 43.75% { background-color: #bbb; }
  50%, 68.75% { background-color: red; }
  75%, 100% { background-color: #bbb; }
}
@keyframes dot4 {
  0%, 68.75% { background-color: #bbb; }
  75%, 93.75% { background-color: red; }
  100% { background-color: #bbb; }
}


/* Purchase*/
.main-title {
    color: #006600; 
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}
.red-title {
    color: #cc0000;
    font-size: 20px;
    font-weight: bold;
    margin-top: 25px;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

/* หัวข้อสีเขียว "ติดต่อเราได้ทาง" */
.green-title {
    color: #006600;
    font-size: 16px;
    font-weight: bold;
    margin-top: 25px;
    margin-bottom: 15px;
}
.content-text {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* รายการช่องทางการติดต่อ */
.contact-list {
    list-style: none;
    margin-bottom: 15px;
}

.contact-list li {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 8px;
}

/* สัญลักษณ์หัวข้อย่อยพิเศษ (เช่น ♦) */
.bullet-item {
    font-size: 15px;
    font-weight: bold;
    margin-left: 10px;
    margin-bottom: 15px;
}

/* ==========================================
   4. ส่วนลิงก์เชื่อมโยง (Links & Buttons)
   ========================================== */
/* ลิงก์สีน้ำเงินหนา "เพิ่มเพื่อน..คลิก" */
.blue-link {
    color: #0000ff;
    text-decoration: none;
    font-weight: bold;
}

.blue-link:hover {
    text-decoration: underline;
}


.form-container {
    width: 100%;
    max-width: 650px;
    background-color: #ffffff;
}

/* ส่วนหัวข้อหลัก */
.form-header {
    text-align: center;
    margin-bottom: 25px;
}

.form-header h2 {
    color: #2e6b12; /* สีเขียวเข้มตามภาพ */
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}

.form-header p {
    color: #666666;
    font-size: 13px;
}

/* จัดแถวของแต่ละ Input */
.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

/* เลเบลข้อความด้านซ้าย */
.form-group label {
    width: 140px; /* กำหนดความกว้างคงที่เพื่อให้ช่องอินพุตตรงกัน */
    text-align: right;
    padding-right: 15px;
    font-size: 13px;
    color: #333333;
    font-weight: bold;
}

/* ช่องกรอกข้อมูล (Input & Textarea) */
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group textarea {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
}

/* สำหรับช่องอัปโหลดไฟล์ */
.form-group input[type="file"] {
    font-size: 13px;
}

/* กล่องข้อความเพิ่มเติมปรับความสูง */
.form-group textarea {
    height: 90px;
    resize: vertical;
}

/* ส่วนของปุ่มกด */
.button-group {
    margin-top: 20px;
    padding-left: 140px; /* ดันปุ่มให้ตรงกับช่องอินพุต */
}

.btn-submit {
    width: 100%;
    background-color: #2e6b12; /* สีเขียวตามแบรนด์ */
    color: #ffffff;
    border: none;
    padding: 10px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-submit:hover {
    background-color: #22510d;
}

/* ข้อความหมายเหตุด้านล่างสุด */
.form-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 11px;
    color: #666666;
}



/* กล่องควบคุมความกว้างทั้งหมด */
.contact-container {
    max-width: 950px;
    margin: 0 auto;
}

/* หัวข้อใหญ่ด้านซ้ายบน */
.main-heading {
    color: #006600; /* สีเขียวเข้ม */
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 20px;
     max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center; 
}
.main-headingD {
    color: #006600; /* สีเขียวเข้ม */
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
     max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center; 
}

/* กล่องเนื้อหาด้านขวา (ดันระยะให้อยู่ขวาตามภาพ) */
.content-right {
    margin-left: 20%; /* ดันเนื้อหาไปทางขวา */
}

/* หัวข้อย่อยสถานที่ตั้งร้าน */
.sub-heading {
    color: #008800; /* สีเขียวสว่างขึ้นเล็กน้อย */
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 25px;
}

/* ตารางข้อมูลรายละเอียด */
.info-table {
    width: 100%;
    border-collapse: collapse;
}

.info-table td {
    vertical-align: top;
    padding-bottom: 10px;
    font-size: 14px;
}

/* คอลัมน์หัวข้อด้านซ้าย (สีเขียวหนา จัดขวา) */
.info-label {
    color: #006600;
    font-weight: bold;
    text-align: right;
    width: 120px;
    padding-right: 10px;
    white-space: nowrap;
}

/* คอลัมน์รายละเอียดด้านขวา (สีดำหนา) */
.info-value {
    color: #000000;
    font-weight: bold;
}

/* ลิงก์ข้อความ */
.info-value a {
    color: #000000;
    text-decoration: none;
}

.info-value a:hover {
    text-decoration: underline;
}
.main-image {
   width: 100%;
  max-width: 100%; /* ปรับขนาดความกว้างตามต้องการ */
 height: auto;       /* ปล่อยให้ความสูงเปลี่ยนตามสัดส่วน */
  aspect-ratio: 16 / 9; /* บังคับสัดส่วนสี่เหลี่ยม (เช่น 16:9 หรือ 4:3) เพื่อไม่ให้รูปเพี้ยน */
  position: relative;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 8px; /* เพิ่มความโค้งมนให้เข้ากับดีไซน์โมบายล์สมัยใหม่ */
  
}
.main-image2 {
   width: 100%;
  max-width: 100%; /* ปรับขนาดความกว้างตามต้องการ */
 height: auto;       /* ปล่อยให้ความสูงเปลี่ยนตามสัดส่วน */
  
  position: relative;
  overflow: hidden;
  
  border-radius: 8px; /* เพิ่มความโค้งมนให้เข้ากับดีไซน์โมบายล์สมัยใหม่ */
  
}

.main-image img {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-imageD {
   width: 100%;
  max-width: 100%; /* ปรับขนาดความกว้างตามต้องการ */
 height: auto;       /* ปล่อยให้ความสูงเปลี่ยนตามสัดส่วน */
  
  position: relative;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 8px; /* เพิ่มความโค้งมนให้เข้ากับดีไซน์โมบายล์สมัยใหม่ */
  
}
.main-imageD img {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.btn-submit {
  background-color:#006600;
  color:#ffffff;
  border: none;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
  width: 100%;
}


/*---------*/
@media screen and (max-width: 780px) {


    .table-container {
        /* เพิ่มเงาเล็กน้อยเพื่อให้รู้ว่าเลื่อนได้ */
        box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.1);
    }

.search-form {
        flex-wrap: wrap;       /* อนุญาตให้ขึ้นบรรทัดใหม่ */
        flex-direction: column; /* ปรับให้เรียงลงมาเป็นแนวตั้ง (Optional) */
        align-items: flex-start; /* จัดให้ชิดซ้าย */
    }
    
    .input-group2 {
        width: 100%;           /* ให้แต่ละช่องยาวเต็มความกว้างหน้าจอ */
    }
    
   
    
.input-group2 label {
     width: 150px; 
    font-size: 14px;
    color: #333;
}

.input-group2 input {
    
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 200px;       /* กำหนดความกว้างคงที่เพื่อให้เรียงกันสวยงาม */
}

  /*-----------*/

.table-responsive {
    border: 2px solid #ddd;
}
    
    .button-group {
        margin-left: 0;
        width: 50%;
        margin-top: 10px;
    }

    .button-group button {
        flex: 1; /* ให้ปุ่มกว้างเท่ากันในมือถือ */
    }
  /*-------*/
  
/*---ข้อมูลสมาชิก---*/
 .wrapper .main-container{
        margin-left: 0;
        margin-top: 0;
        width: 100%;
    }
  
    .register .card-register .col-form-label{
        padding-bottom: 0;
    }

   
  .card-body1 {
  
  padding-left: 50px;

}
.card-body2 {
    padding-top: 20px;
  padding-left: 20px;
  
}
.card-body3 {

  padding-left: 50px;
 
}
.container-fluid1 {
  
  padding-left: 50px;
  
}


.register .card-register .btn.btn-success{
    width: 150px;
    background: #28A745;
    margin-right: 10px;
}

.register .card-register .btn.btn-danger{
    width: 100px;
    background: #DC3545;
    margin-right: 10px;
}

.register .card-register .btn.btn-info{
    width: 150px;
    background: #007AD9;
    color:#fff;
}
/*---*/

  .user-name {
    display: none; 
  }
  
.logout-btn i {
  font-size: 18px;
}

.menu-toggle {
    display: block; /* แสดงปุ่มสามขีด */
    font-weight: 900;
     color:#0f0f0f;
  }

 .show1{
   display: block;
}

.menu-bar{
  position: fixed;
  top: 87px;
  left: -220px; /* ผลักไปทางซ้ายนอกหน้าจอ */
  width: 220px;
   height: 100vh;
  background-color: #c0f78c; 
  z-index: 1001;
  transition: 0.4s ease; /* ทำให้สไลด์นุ่มนวล */
  box-shadow: 5px 0 15px rgba(1, 31, 3, 0.1);
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  list-style: none;
  overflow-y: auto; /* เปิดให้เลื่อนในแนวตั้งเมื่อเมนูยาวเกินหน้าจอ */
  flex-grow: 1; /* ขยายพื้นที่ให้เต็มส่วนที่เหลือ */
}


.menu-bar.active {
  left: 0; /* สไลด์กลับเข้ามาในหน้าจอ */
}

.menu-item {
   display: block;
  flex-direction:row;         /* จัดเรียงลูกๆ ในแนวนอน */
  align-items: center;   /* จัดให้ไอคอนและข้อความอยู่กึ่งกลางในแนวตั้ง (ระนาบเดียวกัน) */
 justify-content: flex-start; /* บังคับให้ทุกอย่างชิดซ้าย (ค่าเริ่มต้น) */
  gap: 12px;             /* กำหนดระยะห่างระหว่างไอคอนกับข้อความ */
  padding: 0; 
   margin: 0;   /* เพิ่มพื้นที่รอบๆ ให้กดง่ายขึ้น */
  cursor: pointer;       /* เปลี่ยนเมาส์เป็นรูปมือเมื่อชี้ */
  width: 100%;           /* ให้เมนูขยายเต็มความกว้างของแถบข้าง */
  box-sizing: border-box; /* ป้องกัน padding ทำให้ความกว้างเกิน */
   border-bottom: 1px solid #eee;
 
  
}
.menu-item:hover {

 background-color: #f0e162;
   
}

.menu-item i {
  font-size: 20px;       
  width: 25px;           /* กำหนดความกว้างคงที่เพื่อให้ข้อความแนวตั้งตรงกัน */
  text-align: center;
}
.menu-item span {
  font-size: 16px;
  line-height: 1;        /* ช่วยให้การจัดกึ่งกลางแม่นยำขึ้น */
}


.submenu {
  display: none; 
  
  position:static; 
  min-width: 220px;    /* เริ่มต้นซ่อนไว้ */
    /* ห้ามใช้ absolute! ให้ใช้ static (ค่าปกติ) เพื่อให้มันกินพื้นที่บรรทัด */
  flex-direction: column;
  
}
.submenu a {
  display: block;
       /* ระยะห่างบน-ล่างของเมนูย่อย */
  margin: 0;
  text-decoration: none;
  color: #555;
}

.menu-item.has-submenu {
  display: block;
  flex-direction:row; /* ให้ลูกๆ (หัวเมนู และ submenu) เรียงกันลงมา */
  user-select: none;
}

.menu-header {
  display: flex; 
  flex-direction:row;         /* จัดเรียงลูกๆ ในแนวนอน */
  align-items: center;   /* จัดให้ไอคอนและข้อความอยู่กึ่งกลางในแนวตั้ง (ระนาบเดียวกัน) */
 justify-content: flex-start; /* บังคับให้ทุกอย่างชิดซ้าย (ค่าเริ่มต้น) */
 padding: 5px 5px; /* กำหนดระยะห่างจากขอบซ้ายที่นี่ */
  gap: 12px;             /* กำหนดระยะห่างระหว่างไอคอนกับข้อความ */
  /* เพิ่มพื้นที่รอบๆ ให้กดง่ายขึ้น */
  cursor: pointer;       /* เปลี่ยนเมาส์เป็นรูปมือเมื่อชี้ */
  width: 100%;           /* ให้เมนูขยายเต็มความกว้างของแถบข้าง */
  box-sizing: border-box; /* ป้องกัน padding ทำให้ความกว้างเกิน */

 
}
.menu-header i:first-child {
  width: 25px; /* ล็อคความกว้างไอคอนให้ข้อความตรงกัน */
  margin-right: 10px;
}

.menu-header .arrow {
  margin-left: auto; /* ดันลูกศรไปขวาสุด */
  font-size: 12px;
  transition: transform 0.3s;
}

/* เมื่อ Hover ให้แสดง Submenu และหมุนลูกศร */
.menu-item:hover .submenu {
  display: flex;       /* แสดงผลแบบ Flex เพื่อดันเมนูถัดไปลงด้านล่าง */
}

.menu-item:hover .arrow {
  transform: rotate(180deg); /* หมุนลูกศรชี้ขึ้นเมื่อกางออก */
}

.menu-header span {
  flex-grow: 1;          /* (ทางเลือก) ช่วยดันพื้นที่ให้ลูกศรไปขวาสุดได้แม่นขึ้น */
}

/*--------------*/

 
    .title2 {
  font-size: 18px;
  margin: 0;
  color: #333;
  font-weight: bold;
}

.subtitle2 {
  font-size: 14px;
  color: #666;
  margin-top: 5px; /* ระยะห่างระหว่าง Dashboard กับ Welcome */
}
     .header-btns {
        display: flex;
    gap: 8px;
    flex-grow: 1;           /* ให้ปุ่มกินพื้นที่ที่เหลือ */
    justify-content: flex-end; /* ดันปุ่มไปทางขวา */
    max-width: 250px; 
    }

    .btn-yellow {
         flex: 1;           /* สำคัญ! ทำให้ปุ่มยืดหดเท่ากันทั้ง 2 ปุ่ม */
    min-width: 60px;   /* ขนาดขั้นต่ำเพื่อไม่ให้ปุ่มเล็กเกินไปจนกดไม่ได้ */
    padding: 10px 5px;
    background-color: #ffc107; /* สีเหลือง Dashboard */
    color: #000;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3); /* เงาสีเดียวกับปุ่มให้ดูนวล */
    transition: all 0.2s ease;
    white-space: nowrap; /* กันตัวหนังสือในปุ่มตกบรรทัด */
    }
    .btn-flex:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
    filter: brightness(1.05);
}
 /* 1. ปรับ Layout หลักให้ยุบเหลือแถวเดียว */
    .main-layout {
        grid-template-columns: 1fr; /* ยุบเหลือ 1 คอลัมน์ */
        display: flex; /* หรือจะใช้ flex เพื่อคุมลำดับง่ายๆ */
        flex-direction: column; 
        gap: 15px;
    }

    /* 2. กำหนดลำดับ (Order) */
    .sidebar-left {
        order: 1; /* ให้ลำดับ 1 (ขึ้นก่อนเพื่อน) */
    }

    .content-center {
        order: 2; /* ให้ลำดับ 2 */
    }

    .sidebar-right {
        order: 3; /* ให้ลำดับ 3 (อยู่ล่างสุด) */
        min-height: 150px;
    }

    /* 3. ปรับแต่งส่วนอื่นๆ ให้ดูง่ายขึ้นในมือถือ */
   

    .image-grid {
        grid-template-columns: 1fr 1fr; /* ยังคง 2 คอลัมน์รูปภาพไว้ หรือจะปรับเป็น 1fr ก็ได้ */
    }


}
@media screen and (max-width:550px) {
/*---ข้อมูลสมาชิก---*/

.main-heading {
   margin-left: 25%; /* ดันเนื้อหาไปทางขวา */
   font-size: 18px;
}
.main-headingD {
   margin-left: 25%; /* ดันเนื้อหาไปทางขวา */
   font-size: 18px;
}
.content-right {
    margin-left: 20%; /* ดันเนื้อหาไปทางขวา */
}

.main-image {
 margin-left: 25%; /* ดันเนื้อหาไปทางขวา */
    align-items: center;    /* จัดให้อยู่กึ่งกลางหน้าจอ */
    width: 70%;
    
}
.main-image2 {
 margin-left: 25%; /* ดันเนื้อหาไปทางขวา */
    align-items: center;    /* จัดให้อยู่กึ่งกลางหน้าจอ */
    width: 70%;
    
}




.btn-submit {
  background-color:#006600;
  color:#ffffff;
  border: none;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
  width: 50%;
}
}

@media screen and (max-width: 480px) {
    .summary-container {
        justify-content: flex-start; /* เปลี่ยนเป็นชิดซ้ายเพื่อให้อ่านง่ายขึ้น */
        font-size: 16px;
        gap: 10px;
    }
    .form-group2 {
      
        justify-content: flex-start; /* เปลี่ยนเป็นชิดซ้ายเพื่อให้อ่านง่ายขึ้น */
        font-size: 16px;
        gap: 10px;
    }
     
     .select-row {
        justify-content: space-between; /* จัดให้ตัวเลือกกระจายเต็มความกว้าง */
    }
    
    .select-row select {
        flex: 1; /* ให้ Dropdown กว้างขึ้นเพื่อกดง่ายบนมือถือ */
        min-width: 60px;
    }
     .data-tableincome th,
    .data-tableincome td
 {
       font-size: 10px;
    }

    .point-container {
    
    width: 100%;
  
   
}
}