/*:root {
  --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
    "Source Han Sans CN", sans-serif;
}
*/



a, a:hover, a:focus {
  text-decoration: none;
}


.main-container {
  overflow: hidden;
}

.main-container,
.main-container * {
  box-sizing: border-box;
}

input,
select,
textarea,
button {
  outline: 0;
}

.main-container {
  position: relative;
  width: 1440px;
  height: 2385px;
  margin: 0 auto;
  background: #ffffff;
  overflow: hidden;
}
.flex-row-ef {
  position: relative;
  width: 1440px;
  height: 99px;
  margin: 0 0 0 0;
  z-index: 33;
}
.rectangle {
  position: absolute;
  width: 1440px;
  height: 66px;
  top: 0;
  left: 0;
  background: #ffffff;
  z-index: 15;
}
.witsanaporn {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 44px;
  top: 25px;
  left: 135px;
  color: #162647;
 
  font-size: 36px;
  font-weight: 500;
  line-height: 43.568px;
  text-align: left;
  white-space: nowrap;
  letter-spacing: 0.36px;
  z-index: 18;
}
.logo-black {
  position: absolute;
  width: 68px;
  height: 68px;
  top: 31px;
  left: 45px;
  background: url(./assets/images/0c1049584d60d5a72e6c435ca9b049a394184fa7.png)
    no-repeat center;
  background-size: cover;
  z-index: 33;
}
.rectangle-button {
  position: absolute;
  width: 212px;
  height: 42px;
  top: 47px;
  left: 1183px;
  cursor: pointer;
  background: #ffeab3;
  border: none;
  z-index: 22;
  border-radius: 15px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.apply {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 109px;
  height: 29px;
  top: 5px;
  left: 56px;
  color: #000000;
 
  font-size: 24px;
  font-weight: 800;
  line-height: 29px;
  text-align: center;
  white-space: nowrap;
  z-index: 23;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.undergraduate-program {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 206px;
  height: 36px;
  top: 54px;
  left: 457px;
  color: #000000;
  font-family: Prompt, var(--default-font-family);
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  text-align: center;
  white-space: nowrap;
  z-index: 16;
}
.postgraduate-program {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 178px;
  height: 29px;
  top: 54px;
  left: 703px;
  color: #000000;
 
  font-size: 24px;
  font-weight: 500;
  line-height: 29px;
  text-align: center;
  white-space: nowrap;
  z-index: 17;
}
.master-program {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 185px;
  height: 29px;
  top: 54px;
  left: 929px;
  color: #000000;
 
  font-size: 24px;
  font-weight: 500;
  line-height: 29px;
  text-align: center;
  white-space: nowrap;
  z-index: 21;
}
.line {
  position: absolute;
  width: 230px;
  height: 1px;
  top: 71px;
  left: 135px;
  background: url(./assets/images/367d0665-eef9-407c-8b0c-7578abab7b6e.png)
    no-repeat center;
  background-size: cover;
  z-index: 20;
}
.degree-programs {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 232px;
  height: 22px;
  top: 77px;
  left: 133px;
  color: #162647;
 
  font-size: 18px;
  font-weight: 500;
  line-height: 21.784px;
  text-align: center;
  white-space: nowrap;
  z-index: 19;
}
.rectangle-news {
  position: relative;
  width: 1440px;
  height: 34px;
  margin: 27px 0 0 0;
  background: #d9d9d9;
}
.text-7 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 105px;
  height: 17px;
  top: 9px;
  left: 142px;
  color: #000000;
 
  font-size: 14px;
  font-weight: 400;
  line-height: 16.943px;
  text-align: center;
  white-space: nowrap;
  z-index: 2;
}
.home-page {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 46px;
  height: 17px;
  top: 9px;
  left: 72px;
  color: #000000;
 
  font-size: 14px;
  font-weight: 400;
  line-height: 16.943px;
  text-align: center;
  white-space: nowrap;
  z-index: 1;
}
.arrow {
  position: absolute;
  width: 16px;
  top: 19px;
  left: 119px;
  background: url(./assets/images/b2f41713-1a4b-4ca0-8dd1-956f36f9af29.png)
    no-repeat center;
  background-size: cover;
  z-index: 34;
}
.arrow-1 {
  position: absolute;
  width: 1px;
  top: 19px;
  left: 54px;
  background: url(./assets/images/ddde1d3a-51d2-4bff-9637-2925ac5cf63c.png)
    no-repeat center;
  background-size: cover;
  z-index: 35;
}
.arrow-2 {
  position: absolute;
  width: 1px;
  top: 19px;
  left: 62px;
  background: url(./assets/images/fff2e965-3717-4f2d-a116-338b6e873a3d.png)
    no-repeat center;
  background-size: cover;
  z-index: 36;
}
.news-announcement {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 143px;
  height: 24px;
  margin: 16px 0 0 5px;
  color: #000000;
 
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.4px;
  z-index: 9;
}
.undergraduate-recruitment-announcement {
  display: block;
  position: relative;
  height: 32px;
  margin: 695px 0 0 0px;
  color: #ffffff;
 
  font-size: 32px;
  font-weight: 400;
  line-height: 32px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -1.28px;
  z-index: 8;
  text-shadow: 0 2px 4px #000000;
}

blog-image {
  position: relative; /* ใช้เป็นจุดอ้างอิงสำหรับตำแหน่งของข้อความ */
  display: inline-block;
}

.undergraduate-recruitment-announcement-stu {
  position: absolute;
  top: 700px; /* ตำแหน่งตรงกลางแนวตั้ง */
  left: 50%; /* ตำแหน่งตรงกลางแนวนอน */
  transform: translate(-50%, -50%); /* ปรับให้ข้อความอยู่กึ่งกลางพอดี */
  width: 100%; /* ให้ข้อความเต็มความกว้างของรูป */
  text-align: center;
  color: #ffffff;
  font-size: 32px;
  font-weight: 400;
   text-shadow: 0 2px 4px #000000;
  /* background: rgba(0, 0, 0, 0.5);  */
  padding: 10px 0; /* เพิ่มระยะห่างรอบข้อความ */
  z-index: 10; /* ให้แน่ใจว่าข้อความอยู่บนสุด */
}

@media (max-width: 992px) {
  .undergraduate-recruitment-announcement-stu {
    top: 470px; /* ตำแหน่งตรงกลางแนวตั้ง */
    font-size: 32px;
    font-weight: 400;
   
  }
}

@media (max-width: 767px) {
  .undergraduate-recruitment-announcement-stu {
    top: 20%; /* ตำแหน่งตรงกลางแนวตั้ง */
    font-size: 20px;
    font-weight: 400;
   
  }
}

@media (max-width: 576px) {
  .undergraduate-recruitment-announcement-stu {
    top: 13%; /* ตำแหน่งตรงกลางแนวตั้ง */
    left: 50%; /* ตำแหน่งตรงกลางแนวนอน */
    font-size: 12px;
    font-weight: 500;
   
  }
}

@media (max-width: 489px) {
  .undergraduate-recruitment-announcement-stu {
    top: 13%; /* ตำแหน่งตรงกลางแนวตั้ง */
    left: 50%; /* ตำแหน่งตรงกลางแนวนอน */
    font-size: 12px;
    font-weight: 500;
   
  }
}

@media (max-width: 339px) {
  .undergraduate-recruitment-announcement-stu {
    top: 9%; /* ตำแหน่งตรงกลางแนวตั้ง */
    left: 50%; /* ตำแหน่งตรงกลางแนวนอน */
    font-size: 12px;
    font-weight: 500;
   
  }
}


.rectangle-3 {
  position: relative;
  width: 1440px;
  height: 117px;
  margin: -4px 0 0 -1px;
  background: #ffffff;
  z-index: 3;
  overflow: visible auto;
}
.flex-row-cf {
  position: relative;
  width: 1257px;
  height: 29px;
  margin: 69px 0 0 95px;
  z-index: 6;
}
.previous {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 82px;
  height: 29px;
  top: 0;
  left: 0;
  color: #0a3180;
 
  font-size: 24px;
  font-weight: 400;
  line-height: 29px;
  text-align: center;
  white-space: nowrap;
  z-index: 4;
}
.view-all {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 86px;
  height: 29px;
  top: 0;
  left: 582px;
  color: #0a3180;
 
  font-size: 24px;
  font-weight: 400;
  line-height: 29px;
  text-align: center;
  white-space: nowrap;
  z-index: 5;
}
.next {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 51px;
  height: 29px;
  top: 0;
  left: 1206px;
  color: #0a3180;
 
  font-size: 24px;
  font-weight: 400;
  line-height: 29px;
  text-align: center;
  white-space: nowrap;
  z-index: 6;
}
.arrow-4 {
  position: relative;
  width: 90px;
  height: 0px;
  margin: 2px 0 0 85px;
  background: url(./assets/images/2f31bd64-a82a-4c9d-882a-2da2a681d541.png)
    no-repeat center;
  background-size: cover;
  z-index: 39;
}
.flex-row-cd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 700px;
  margin: 7px 0 0 670px;
  z-index: 41;
}
.line-5 {
  flex-shrink: 0;
  position: relative;
  width: 99px;
  height: 2px;
  background: url(./assets/images/80ef851d-cfea-4dce-bc00-ec7036f8ceef.png)
    no-repeat center;
  background-size: cover;
  z-index: 41;
}
.arrow-6 {
  flex-shrink: 0;
  position: relative;
  width: 90px;
  background: url(./assets/images/fd16505a-613b-41b1-b186-5ae5504c82e1.png)
    no-repeat center;
  background-size: cover;
  z-index: 40;
}
.flex-row-da {
  position: relative;
  width: 625px;
  height: 58px;
  margin: 10px 0 0 104px;
  z-index: 32;
  top: -50px; /* ปรับค่านี้ให้เหมาะสม */
}

/* For tablets (max-width: 992px) */
@media (max-width: 992px) {
  .flex-row-da {
    width: 90%; /* Increase width to fit smaller screens */
    top: -60px; /* Adjust positioning */
    margin-left: auto; /* Center alignment */
    margin-right: auto;
  }
}

/* For smaller tablets & landscape phones (max-width: 768px) */
@media (max-width: 768px) {
  .flex-row-da {
    width: 95%; /* Use almost full width */
    top: -60px;
  }
}

/* For mobile phones (max-width: 576px) */
@media (max-width: 576px) {
  .flex-row-da {
    width: 100%; /* Full width for small screens */
    top: -50px;
    margin-left: 0; /* Reset left margin */
  }
}


.flex-row-da-content {
  position: relative;
  width: 625px;
  height: 58px;
  margin: 10px 0 0 104px;
  z-index: 32;
  top: -60px; /* ปรับค่านี้ให้เหมาะสม */
}

/* For tablets (max-width: 992px) */
@media (max-width: 992px) {
  .flex-row-da-content {
    width: 90%; /* Increase width to fit smaller screens */
    top: -50px; /* Adjust positioning */
    margin-left: auto; /* Center alignment */
    margin-right: auto;
  }
}

/* For smaller tablets & landscape phones (max-width: 768px) */
@media (max-width: 768px) {
  .flex-row-da-content {
    width: 95%; /* Use almost full width */
    top: -40px;
  }
}

/* For mobile phones (max-width: 576px) */
@media (max-width: 576px) {
  .flex-row-da-content {
    width: 100%; /* Full width for small screens */
    top: -30px;
  }
}

.news-announcement-7 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 58px;
  top: 0;
  left: 0;
  color: #0a3080;
 
  font-size: 28px;
  font-weight: 300;
  line-height: 58px;
  text-align: left;
  white-space: nowrap;
  z-index: 24;
}


/* Tablet Screens (max-width: 992px) */
@media (max-width: 992px) {
  .news-announcement-7 {
    font-size: 24px; /* Reduce font size */
  }
}

/* Small Tablets & Large Phones (max-width: 768px) */
@media (max-width: 768px) {
  .news-announcement-7 {
    font-size: 22px;
    white-space: normal; /* Ensure text wraps */
  }
}

/* Mobile Phones (max-width: 576px) */
@media (max-width: 576px) {
  .news-announcement-7 {
    font-size: 20px;
    margin-left: 15px;
    left: 50%; /* Position in the middle */
    transform: translateX(-50%);
    width: 100%; /* Make sure it fills the width */
  }
}


.line-8 {
  position: absolute;
  width: 244px;
  height: 2px;
  top: 30px;
  left: 250px;
  background: url(./assets/images/29a0d3c3-ea3b-4014-8d01-9e41a5374ee5.png)
    no-repeat center;

      /* background: url(./assets/images/8bc5e40a-26a4-4f05-ae22-42c1b8893d8b.png)
    no-repeat center; */
  background-size: cover;
  z-index: 32;
}


/* Tablet Screens (max-width: 992px) */
@media (max-width: 992px) {
  .line-8 {
    width: 25%;
    
    left: 200px;
  }
}

/* Small Tablets & Large Phones (max-width: 768px) */
@media (max-width: 768px) {
  .line-8 {
    width: 30%;
    
    left: 180px;
  }
}

/* Mobile Phones (max-width: 576px) */
@media (max-width: 576px) {
  .line-8 {
    width: 50%;
       
    left: 180px;
  }
}

.line-9 {
  position: relative;
  width: 80%;
  height: 1px;
  margin: 24px 0 0 104px;
  background: url(./assets/images/line.png)
    no-repeat center;
  /* background: url(./assets/images/8f6d4024-2ae7-4f82-8135-76cb1e7b614a.png)
    no-repeat center; */
  background-size: cover;
  z-index: 25;
  top: -80px; /* ปรับค่านี้ให้เหมาะสม */
}


/* Tablet Screens (max-width: 992px) */
@media (max-width: 992px) {
  .line-9 {
    width: 85%; /* Slightly wider on tablets */
    top: -80px; /* Adjust vertical position */
    margin: 24px 0 0 45px;
  }
}

/* Small Tablets & Large Phones (max-width: 768px) */
@media (max-width: 768px) {
  .line-9 {
    width: 90%;
    top: -80px; /* Adjust vertical position */
    margin: 24px 0 0 18px;
  }
}

/* Mobile Phones (max-width: 576px) */
@media (max-width: 576px) {
  .line-9 {
    width: 95%;
    top: -80px; /* Adjust vertical position */
    margin: 24px 0 0 15px;
  }
}


.undergraduate-announcement {
  display: block;
  position: relative;
  height: 39px;
  margin: 10px 0 0 0px;
  color: #000000;
 
  font-size: 22px;
  font-weight: 600;
  line-height: 38.727px;
  text-align: left;
  white-space: nowrap;
  z-index: 28;
  top: -50px; /* ปรับค่านี้ให้เหมาะสม */
}


/* Tablet Screens (max-width: 992px) */
@media (max-width: 992px) {
  .undergraduate-announcement {
    font-size: 20px; /* Reduce font size */
    top: -60px; /* Adjust positioning */
    text-align: left !important; /* Ensure it stays left-aligned */
    margin-left: auto; /* Ensure no extra left margin */
    padding-left: auto; /* Reset any padding */
    
  }
}

/* Small Tablets & Large Phones (max-width: 768px) */
@media (max-width: 768px) {
  .undergraduate-announcement {
    font-size: 18px;
    top: -70px;
    text-align: left !important; /* Ensure it stays left-aligned */
    margin-left: 0; /* Ensure no extra left margin */
    padding-left: 0; /* Reset any padding */
  }
}

/* Mobile Phones (max-width: 576px) */
@media (max-width: 576px) {
  .undergraduate-announcement {
    font-size: 14px; /* Reduce font size for better readability */
    top: -75px; /* Adjust positioning */
    text-align: left; /* Keep it aligned left */
    width: 90%; /* Ensure text doesn't exceed container */
    max-width: 100%; /* Prevent overflow */
    margin: 0 auto; /* Center block within its container */
    white-space: normal; /* Allow text to wrap */
    line-height: 1.4; /* Improve readability */
    padding: 5px; /* Add some spacing */
  }
}



.flex-row-bfc {
  width: 625px;
  height: 58px;
  margin: 10px 0 0 104px;
  z-index: 32;
  top: -50px; 
 
}


/* Tablet Screens (max-width: 992px) */
@media (max-width: 992px) {
  .flex-row-bfc {
    width: 95%; /* Slightly increase width */
    top: -80px; /* Adjust position */
   
  }
}

/* Small Tablets & Large Phones (max-width: 768px) */
@media (max-width: 768px) {
  .flex-row-bfc {
    width: 90%;
    top: -90px;
  }
}

/* Mobile Phones (max-width: 576px) */
@media (max-width: 576px) {
  .flex-row-bfc {
    width: 100%; /* Full width on small screens */
    top: -105px;
  }
}
/*
.santapol-college-announcement {
  position: absolute;
  width: 880px;
  height: 432px;
  top: 10px;
  left: 60px;
 
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  text-align: left;
  z-index: 13;
}
  */

.santapol-college-announcement {
  position: absolute;
  width: 200%;
  max-width: 880px; 
  height: auto;
  top: -5px; 
  left: 75%; 
  transform: translateX(-50%); 
 
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5; 
  text-align: left;
  white-space: normal; 
  z-index: 13;
  padding: 10px; 
}
  

/* Tablet Screens (max-width: 992px) */
@media (max-width: 1024px) {
  .santapol-college-announcement {
     /* width: 90%;   */
    font-size: 22px; /* Adjust font size */
    top: 20px;
    margin-left: 20px;
    margin-right: 20px;
     left: 40%; 
    
  }
}

/* Small Tablets & Large Phones (max-width: 768px) */
@media (max-width: 768px) {
  .santapol-college-announcement {
    width: 95%;
    font-size: 20px;
    top: 30px;
  
  }
}

/* Mobile Phones (max-width: 576px) */
@media (max-width: 576px) {
  .santapol-college-announcement {
    width: 100%; /* Full width for small screens */
    font-size: 18px; /* Smaller font for readability */
    top: 5px;
    text-align: center; /* Center text for better mobile appearance */
    padding: 5px; /* Adjust spacing */
    margin-right: 10px;
    margin-left: 10px; 
     left: 50%; 
  }
}
/*
.nbsp {
  position: relative;
  color: #000000;
 
  font-size: 14px;
  font-weight: 300;
  line-height: 36px;
  text-align: left;
}

*/
.nbsp {
  position: relative;
  color: #000000;
 
  font-size: 16px; /* Default font size */
  font-weight: 300;
  line-height: 1.5; /* Improve text readability */
  text-align: left; /* Default alignment */
  word-wrap: break-word; /* Ensure text wraps properly */
}

/* Tablet Screens (max-width: 992px) */
@media (max-width: 992px) {
  .nbsp {
    font-size: 13px; /* Reduce font size */
    line-height: 1.6;
  }
}

/* Small Tablets & Large Phones (max-width: 768px) */
@media (max-width: 768px) {
  .nbsp {
    font-size: 12px;
    line-height: 1.7;
   top: -50px;
   margin-right: 10px;
   
  }
}

/* Mobile Phones (max-width: 576px) */
@media (max-width: 576px) {
  .nbsp {
    font-size: 11px; /* Smaller font for better readability */
    line-height: 1.8;
    
    padding: 5px; /* Add padding for spacing */
    margin-right: 10px;
  }
}

.dash {
  position: relative;
  color: #000000;
 
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  text-align: left;
}
.nbsp-a {
  position: relative;
  color: #000000;
 
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  text-align: left;
}
.dash-b {
  position: relative;
  color: #000000;
 
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  text-align: left;
}
.nbsp-c {
  position: relative;
  color: #000000;
 
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  text-align: left;
}
.dash-d {
  position: relative;
  color: #000000;
 
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  text-align: left;
}
.nbsp-e {
  position: relative;
  color: #000000;
 
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  text-align: left;
}
.dash-f {
  position: relative;
  color: #000000;
 
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  text-align: left;
}
.nbsp-10 {
  position: relative;
  color: #000000;
 
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  text-align: left;
}
.line-11 {
  position: absolute;
  width: 80%;
  height: 1px;
  top: 460px;
  margin: 40px 0 0 114px;
  left: 0;
   background: url(./assets/images/line.png)
    no-repeat center;
  /* background: url(./assets/images/8bc5e40a-26a4-4f05-ae22-42c1b8893d8b.png)
    no-repeat center; */
  background-size: cover;
  z-index: 25;
}
@media (max-width: 1024px) {
  .flex-row-bfc {
      max-width: 90%; /* ลดขนาด container */
  }

  .santapol-college-announcement {
    max-width: 90%;
    text-align: center; /* 🔹 จัดข้อความตรงกลาง */
}
  .line-11 {
      width: 90%;
      margin: 100px 0 0 45px;
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .flex-row-bfc {
      max-width: 90%; /* ลดขนาด container */
  }

  .santapol-college-announcement {
    max-width: 90%;
    text-align: center; /* 🔹 จัดข้อความตรงกลาง */
}
  .line-11 {
    
      margin: 130px 0 0 45px;
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .flex-row-bfc {
      max-width: 95%; /* ลดขนาดลงอีกสำหรับจอเล็ก */
  }

  .santapol-college-announcement {
    max-width: 100%;
    padding: 10px; /* 🔹 ลด padding เพื่อให้พอดีกับจอเล็ก */
}

  .line-11 {
      /* width: 95vw;
      background-size: cover; 
      margin: 24px 0 0 24px; */

      display: none;
  }
}


.flex-row-af {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 20px 0 0 1px;
  z-index: 42;
  top: 300px;
  left: 150px;
}

@media (max-width: 1024px) {
 .flex-row-af {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 20px 0 0 1px;
  z-index: 42;
  top: 250px;
  left: 50px;
}
}
/* 📌 ปรับตำแหน่งเมื่อหน้าจอเล็กลง (Tablet - ≤ 768px) */
@media (max-width: 768px) {
  .flex-row-af {
      top: 250px; /* ลดค่าการเลื่อนขึ้น */
      left: 10px; /* ลดการเลื่อนซ้าย */
      flex-direction: column; /* ซ้อนแนวตั้งเมื่อจอเล็ก */
      /* align-items: center; */
      justify-content: center;
      margin: 150px auto; 
      text-align: center;
       left: 50px;
  }
}

/* 📌 ปรับตำแหน่งเมื่อเป็นหน้าจอมือถือ (Mobile - ≤ 480px) */
@media (max-width: 480px) {
  .flex-row-af {
      top: 330px; /* ลดการเลื่อนขึ้น */
      left: 0; /* จัดให้อยู่ตรงกลาง */
      margin: 250px auto; /* จัดให้อยู่กลางแนวนอน */
      width: 100%; /* ให้กว้างเต็มหน้าจอ */
      text-align: left;
      left: 20px;
  }
}


.rectangle-12 {
  flex-shrink: 0;
  position: relative;
  width: 120px;
  height: 30px;
  cursor: pointer;
  background: #ffeca2;
  border: none;
  z-index: 42;
  border-radius: 10px;
}
.download {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 43px;
  width: 100%;
  top: -3px;
  left: 15px;
  color: #000000;
 
  font-size: 15px;
  font-weight: 400;
  line-height: 36px;
  text-align: left;
  white-space: nowrap;
  z-index: 43;
}
.undergraduate-announcement-13 {
  flex-shrink: 0;
  position: relative;
  height: 36px;
  color: #000000;
 
  font-size: 14px;
  font-weight: 300;
  line-height: 36px;
 left: 10px;
  white-space: nowrap;
  z-index: 12;
}

/* 📌 ปรับตำแหน่งและขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .undergraduate-announcement-13 {
      font-size: 12px; /* ลดขนาดตัวอักษร */
      height: auto; /* ให้สูงตามเนื้อหา */
      line-height: normal; /* ปรับให้ข้อความอ่านง่าย */
      left: 5px; /* ลดระยะชิดขอบ */
      white-space: normal; /* ให้ข้อความขึ้นบรรทัดใหม่ได้ */
      text-align: left; /* จัดให้อยู่ตรงกลาง */
  }
}

/* 📌 ปรับสำหรับหน้าจอมือถือขนาดเล็ก (≤ 480px) */
@media (max-width: 480px) {
  .undergraduate-announcement-13 {
      font-size: 11px; /* ปรับขนาดเล็กลง */
      height: auto; /* ให้เนื้อหาปรับขนาดอัตโนมัติ */
      left: 0; /* จัดให้อยู่ตรงกลาง */
      text-align: left; /* จัดข้อความตรงกลาง */
      width: 100%; /* ให้ข้อความกว้างเต็ม */
  }
}

.online-application {
  display: block;
  position: relative;
  height: 36px;
  margin: 0 0 0 366px;
  color: #000000;
 
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  text-align: left;
  white-space: nowrap;
  z-index: 11;
}
.line-14 {
  position: absolute;
  width: 80%;
  height: 1px;
  top: 650px;
  margin: 24px 0 0 104px;
  left: 0;
   background: url(./assets/images/line.png)
    no-repeat center;
        /* background: url(./assets/images/8bc5e40a-26a4-4f05-ae22-42c1b8893d8b.png)
    no-repeat center; */
  /* background: url(./assets/images/433663bb-4b12-48c0-b254-3764a9b9d63f.png)
    no-repeat center; */
  background-size: cover;
  z-index: 27;
}

@media (max-width: 1024px) {
  .flex-row-bfc {
      max-width: 90%; /* ลดขนาด container */
  }
  .line-14 {
      width: 90%;
      margin: 224px 0 0 45px;
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .flex-row-bfc {
      max-width: 90%; /* ลดขนาด container */
  }
  .line-14 {
      width: 90%;
      margin: 280px 0 0 45px;
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .flex-row-bfc {
      max-width: 95%; /* ลดขนาดลงอีกสำหรับจอเล็ก */
  }
  .line-14 {
      /* width: 95vw;
      background-size: cover; 
      margin: 24px 0 0 24px; */
      display: none;
  }
}



/* 📌 ทำให้ .flex-row อยู่ใต้ .flex-row-af และอยู่กึ่งกลาง */
.flex-row {
  display: flex;
  align-items: center;
  justify-content: center; /* ทำให้ .flex-row อยู่กึ่งกลาง */
  position: relative;
  width: 100%;
  margin-top: 400px; /* ระยะห่างจาก .flex-row-af */
  z-index: 38;
}

/* 📌 ปรับขนาดและตำแหน่งเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .flex-row {
      flex-direction: column; /* เรียงแนวตั้งเมื่อจอเล็ก */
      margin-top: 360px; /* ลดระยะห่างให้เหมาะสม */
      text-align: center;
  }
}

/* 📌 ปรับขนาดและตำแหน่งเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .flex-row {
      flex-direction: column; /* ใช้แนวตั้ง */
      width: 100%; /* ให้กว้างเต็มหน้าจอ */
      margin-top: 380px; /* ลดระยะห่างจาก .flex-row-af */
      text-align: center;
  }
}


.rb {
  flex-shrink: 0;
  position: relative;
  width: 35px;
  height: 35px;
  background: url(./assets/images/ec427fa0-be54-45e9-9132-c9cc28b2497d.png)
    no-repeat center;
  background-size: cover;
  z-index: 37;
  margin-top: 26px;
  margin-bottom: 10px;
}

/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .rb {
      width: 55px; /* ลดขนาดลง */
      height: 55px;
      background-size: contain; /* ป้องกันภาพบิดเบี้ยว */
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .rb {
      width: 45px; /* ลดขนาดเล็กลงอีก */
      height: 45px;
      background-size: contain; /* ป้องกันภาพแตก */
  }
}

.facebook-logo-x {
  flex-shrink: 0;
  position: relative;
  width: 35px;
  height: 35px;
  background: url(./assets/images/59b5c26d085bbe826f4da57049bc00252250ec83.png)
    no-repeat center;
  background-size: cover;
  z-index: 37;
  margin-bottom: 10px;
  margin-top: 26px;
}


/* 📌 ปรับขนาดเมื่อเป็น Tablet (≤ 768px) */
@media (max-width: 768px) {
  .facebook-logo-x {
      width: 55px; /* ลดขนาดลง */
      height: 55px;
      background-size: contain; /* ป้องกันภาพบิดเบี้ยว */
  }
}

/* 📌 ปรับขนาดเมื่อเป็น Mobile (≤ 480px) */
@media (max-width: 480px) {
  .facebook-logo-x {
      width: 80px; /* ลดขนาดเล็กลงอีก */
      height: 80px;
      background-size: contain; /* ป้องกันภาพแตก */
  }
}

.rectangle-15 {
  position: relative;
  width: 1440px;
  height: 292px;
  margin: 35px 0 0 1px;
  background: #162647;
  z-index: 31;
}
.research-service-scaj {
  position: absolute;
  width: 414px;
  height: 169px;
  top: 54px;
  left: 534px;
 
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
  z-index: 30;
}
.research-service {
  position: relative;
  color: #ffffff;
 
  font-size: 48px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
}
.research-journal-scaj {
  position: relative;
  color: #ffffff;
 
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
}
.education-santapol {
  position: absolute;
  width: 288px;
  height: 203px;
  top: 54px;
  left: 105px;
 
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
  text-overflow: initial;
  white-space: nowrap;
  z-index: 29;
}
.education {
  position: relative;
  color: #ffffff;
 
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  text-align: left;
  margin-bottom: 50px;
  
}
.education-curriculum-santapol {
  position: relative;
  color: #ffffff;
 
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
}
.others-santapol {
  position: absolute;
  width: 269px;
  height: 171px;
  top: 54px;
  left: 1066px;
 
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
  text-overflow: initial;
  white-space: nowrap;
  z-index: 31;
}
.others {
  position: relative;
  color: #ffffff;
 
  font-size: 48px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
}
.map-wifi-santapol {
  position: relative;
  color: #ffffff;
 
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
}
.p {
  position: absolute;
  width: 1440px;
  height: 739px;
  top: 223px;
  left: 0;
  
  background-size: cover;
  z-index: 7;
}
.rectangle-16 {
  position: absolute;
  width: 1440px;
  height: 1049px;
  top: 1058px;
  left: -1px;
  background: url(./assets/images/ba4315ca-8fa5-4a75-833d-de2bd6f87f99.png)
    no-repeat center;
  background-size: cover;
  z-index: 10;
}

.social-media-section {


    text-align: center;
    position: relative; margin-top: 500px;
}

@media screen and (max-width: 768px) {
   .line-8 {
   display: none;
}

.social-media-section {
  
    margin-top: 400px;
}
}

.space-ptb-stu {
    padding: 0px 0;
}

.filter-btn {
    width: 10%;
    cursor: pointer;
}

.li-text {
  width: 500px;
}

@media (max-width: 1024px) {
    .filter-btn {
        width: 15%;
        
    }

  .li-text {
  width: auto;
}
  
}

@media (max-width: 768px) {
    .filter-btn {
        width: 15%;
        
    }
  
}