/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/MenuNavbar.vue?vue&type=style&index=0&id=81529602&lang=css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.leftNavbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: relative;
}
.leftMenu {
  display: flex;
  align-items: center;
  gap: 24px;
}
.logoImg {
  width: 50px;
  margin: 0 24px 0 0;
}
.menu {
  text-decoration: none;
  color: #000000;
}
.menuNev-dropdown,
.Changelanguage-dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.dropdown-button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.caret-down {
  width: 20px;
  height: 20px;
  margin-left: 8px;
}
.dropdown-content {
  display: flex;
  flex-direction: column;
  position: absolute;
  background-color: #ffffff;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  z-index: 1;
  top: calc(100% + 8px);
  left: 0;
  min-width: 277px;
  padding: 8px 0;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}
.dropdown-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  gap: 12px;
}
.dropdown-item:hover {
  background-color: #F5F7FA;
  color: #5D5FEF;
}
.dropdown-item:hover .icon {
  color: #5D5FEF;
}
.icon {
  color: rgba(101, 101, 101, 0.65);
  font-size: 28px;
  margin-right: 8px;
}

/* Hamburger icon for mobile view */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.hamburger span {
  width: 25px;
  height: 3px;
  background-color: #333;
  border-radius: 3px;
}

/* Left menu for larger screens */
.leftMenu {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Responsive styles */
@media (max-width: 1024px) {
  /* For tablets or medium screens */
.leftMenu {
    gap: 16px;
}
}
@media (max-width: 768px) {
.menu {
    text-decoration: none;
  color: #000000;
  display: block;           /* ให้กินพื้นที่เต็มความกว้างของพ่อ */
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
  background-color: #f9f9f9;
  border-radius: 4px;
  transition: background-color 0.2s;
}
.leftMenu {
    position: fixed; /* ใช้ fixed แทน absolute เพื่ออิงกับ viewport */
    top: 60px;
    left: 0;
    width: 93%; /* ให้ความกว้างเต็มหน้าจอ */
    background-color: rgba(0, 0, 0, 0.5); /* พื้นหลังสีดำโปร่งใส */
  backdrop-filter: blur(10px); /* เอฟเฟกต์เบลอพื้นหลัง */
  -webkit-backdrop-filter: blur(10px); /* รองรับเบราว์เซอร์บางตัวที่ต้องใช้ -webkit- */
    border-top: 2px solid #e0e0e0;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
    display: none; /* ซ่อนไว้โดย default */
    z-index: 1000; /* เผื่อให้ลอยอยู่บนเนื้อหาอื่น */
}
.leftMenu.open {
    display: flex; /* Show menu when open class is added */
}

  /* Show hamburger icon */
.hamburger {
    display: flex;
}

  /* Adjust logo size for smaller screens */
.logoImg {
    width: 40px;
    margin: 0 16px 0 0;
}
.leftNavbar {
    padding: 0 8px;
}
.dropdown-content {
    min-width: 200px; /* Adjust dropdown width on mobile */
    width: 100%;
}
.menuNev-dropdown,
  .Changelanguage-dropdown {
    width: 100%;
}
.dropdown-button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    text-decoration: none;
    color: #000000;
    padding: 12px 16px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    border-radius: 4px;
    transition: background-color 0.2s;
}
}
@media (max-width: 480px) {
  /* For very small screens, such as phones in portrait mode */
.leftMenu {
    padding: 24px;
    border-top: 2px solid #e0e0e0;
    width: 89%; /* ให้ความกว้างเต็มหน้าจอ */
}
.logoImg {
    width: 35px;
    margin: 0 16px 0 0;
}
.hamburger span {
    width: 20px; /* Adjust hamburger icon size */
    height: 2px;
}
.dropdown-content {
    min-width: 180px; /* Further reduce dropdown width on small screens */
}
}


/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/NavbarBeforeLogin.vue?vue&type=style&index=0&id=18c8fbfa&lang=css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************/

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  background-color: #fff;
}
.Navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 60px;
}
.page-container {
  padding-top: 60px;
}
.right-navbar {
  display: flex;
  align-items: center;
  gap: 24px;
}
.primaryButton {
  background: #5d5fef;
  padding: 8px 16px;
  border-radius: 8px;
  color: #fff;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.primaryButton svg {
  fill: #ffffff;
  margin-right: 8px;
}
.primaryButton:hover {
  background: #4a4ae6;
}
.secondButton {
  background: #ffffff;
  border: 1px solid #202FA6;
  padding: 8px 16px;
  border-radius: 8px;
  color: #202FA6;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.secondButton svg {
  fill: #202FA6;
  margin-right: 8px;
}
.secondButton:hover {
  background: #ffffff;
}
.profile-menu {
  position: relative;
}
.profile-btn {
  background: none;
  border: none;
  font-size: 14px;
  color: #000;
  cursor: pointer;
  padding: 8px;
}
.profile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  list-style: none;
  padding: 10px;
  margin: 0;
  display: none;
}
.profile-dropdown li {
  padding: 8px;
}
.profile-dropdown li a,
.profile-dropdown li button {
  color: #000;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}
.profile-dropdown li a:hover,
.profile-dropdown li button:hover {
  background: #f0f0f0;
}
.profile-menu:hover .profile-dropdown {
  display: block;
}

/* Responsive styles */
@media (max-width: 1024px) {
  /* For tablets or medium screens */
.Navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px;
}
}
@media (max-width: 768px) {
.Navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px;
}
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************/

body, .app {
  font-family: 'Prompt', sans-serif;
  margin: 0;
  padding: 0;
}
.router-view {
  background-color: #EEF2FB;
  /*background-color: #f4f6f8;*/
  min-height: 100vh; /* ให้พื้นที่เต็มหน้าจอ */
}


/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/Header.vue?vue&type=style&index=0&id=61dd7a3d&lang=css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/

/* การตั้งค่าเริ่มต้นสำหรับหน้าจอขนาดใหญ่ */
.header {
  position: relative;
  left: 0;
  right: 0;
}
.slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 700px;
  margin: auto;
  border-radius: 0 0 60px 60px;
}
.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.slide {
  min-width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.slide::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  z-index: 1;
  pointer-events: none;
}
.status {
  position: absolute;
  bottom: 120px;
  left: 25%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.status-indicators {
  display: flex;
  gap: 12px;
}
.indicator {
  width: 84px;
  height: 84px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.indicator-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.indicator.active .indicator-image {
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 1);
  box-sizing: border-box;
}
.nameWeb h1 {
  font-size: 60px;
  color: #ffffff;
  margin: 16px 0;
}
.nameWeb p {
  color: #ffffff;
  margin: 8px 0;
}
hr {
  margin: 0;
  padding: 0;
  color: #D9D9D9;
}
.headBox {
  position: relative; /* เปลี่ยนจาก absolute เป็น relative */
  top: -60px; /* เลือกตำแหน่งตามความเหมาะสม */
  left: 50%;
  padding: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 16px;
  border-radius: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1;
  background-color: #ffffff;
  transform: translateX(-50%);
  width: 80%; /* กำหนดความกว้างที่ไม่เต็มหน้าจอ เช่น 80% */
  max-width: 1200px; /* จำกัดความกว้างสูงสุด หากต้องการ */
}
.headBox1, .headBox2, .headBox3 {
  width: 306px;
  flex: 1; /* ใช้ flex เพื่อให้ box ภายในแบ่งพื้นที่อย่างสมดุล */
  text-align: center;
}
.headBox1 h3, .headBox2 h3, .headBox3 h3 {
  color: #6B71F2;
}
.headBox1 p, .headBox2 p, .headBox3 p {
  color: #656565;
}

/* การตั้งค่าตัวเลขตามขนาดหน้าจอที่คุณต้องการ */

/* หน้าจอขนาดเล็ก (แท็บเล็ตแนวตั้ง) */
@media (max-width: 768px) {
.slider {
    height: 450px; /* ปรับความสูง */
}
.status {
    bottom: 100px; /* ปรับตำแหน่ง */
    left: 50%; /* ชิดตรงกลาง */
}
.indicator {
    width: 60px; /* ขนาดเล็กลง */
    height: 60px;
}
}

/* หน้าจอขนาดเล็กมาก (โทรศัพท์มือถือ) */
@media (max-width: 480px) {
.slider {
    height: 300px; /* ปรับความสูง */
}
.status {
    bottom: 80px; /* ปรับตำแหน่ง */
    left: 50%; /* ชิดตรงกลาง */
}
.indicator {
    width: 40px; /* ขนาดเล็กลงอีก */
    height: 40px;
}
.nameWeb h1 {
    font-size: 32px; /* ปรับขนาดฟอนต์ */
}
.nameWeb p {
    font-size: 14px; /* ปรับขนาดฟอนต์ */
}
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/contentDoc.vue?vue&type=style&index=0&id=7305908f&lang=css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.contentDoc {
  margin: 40px 20px;
  padding: 0 20px;
}
.contentDoc h1 {
  margin: 0;
  font-size: 48px;
}
.headText {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 8px;
  margin: 0 0 40px 0;
}
.headText h2 {
  font-size: 24px;
  font-weight: normal;
}
.headText-free h2 {
  font-weight: bold;
}
.background-class {
  background-image: url("/img/world%20map.c0e79747.png");
  background-size: cover;
  background-position: center;
  width: 100%;
  min-height: 800px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  margin-top: 60px;
  box-sizing: border-box;
  overflow: hidden; /* ✅ ป้องกัน ::before เกิน */
}
.background-class::before {
  content: '';
  position: absolute;
  inset: 0; /* ✅ shorthand for top/left/right/bottom: 0 */
  background-color: rgba(255, 255, 255, 0.4);
  z-index: 0;
  pointer-events: none; /* ✅ ให้คลิกทะลุ */
}
.overlay-class {
  position: relative;
  z-index: 1; /* อยู่บนพื้นหลัง */
  width: 100%;
  max-width: 1200px;
}
.Doc {
  width: 100%;
}

/* ทำให้เนื้อหาภายใน Doc ยัง responsive ตามเดิม */
.petroleumDoc, .cargoDoc {
  display: flex;
  
  justify-content: space-between; /* ✅ new */
  gap: 40px;
  
  margin-bottom: 60px;
}
.petroleumDoc h2 , .cargoDoc h2 {
  font-weight: 500;
  margin: 0;
}
.petroleumIMG, .cargoDocIMG {
  width: 100%;
  max-width: 600px;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain; /* ✅ ทำให้ภาพไม่ยืด บีบอัตราส่วน */
  display: block; /* ✅ ป้องกัน space ด้านล่างของ inline element */
}
.cargoDocIMG {
  transform: rotate(-7.39deg);
}
.topic {
  letter-spacing: 2px;
  margin: 8px 0;
}
.petroleumDoc-Box, .cargoDoc-Box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.petroleumDoc-BoxRow ,.cargoDoc-BoxRow {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
}
.BoxDetail {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 16px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #dddddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  width: 100%;
  max-width: 100%;     /* ✅ ให้ขยายเต็มหน้าจอ */
  height: auto;
  box-sizing: border-box; /* ✅ ป้องกัน padding overflow */
}
.BoxDetail-Text h3 {
  font-size: 18px;
  width: auto;
  color: #5d5fef;
  font-weight: 500;
  margin: 0 0 8px 0;
}
.BoxDetail-Text p {
  font-size: 16px;
  color: #656565;
  line-height: 1.5;
  margin: 0;
}

/* ---------- Responsive Adjustments ---------- */
@media screen and (max-width: 768px) {
.contentDoc h1 {
    font-size: 36px;
}
.headText h2 {
    font-size: 20px;
}
.petroleumDoc {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* ✅ reset space-between */
    gap: 24px;
}
.cargoDoc {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-start; /* ✅ reset space-between */
    gap: 24px;
}
.petroleumDoc-BoxRow,.cargoDoc-BoxRow {
    flex-direction: column;
    align-items: center;
}
.BoxDetail {
    flex-direction: column;
    align-items: flex-start;
}
.BoxDetail-Text h3 {
    width: 100%;
}
.background-class {
    padding: 20px 10px;
    min-height: auto; /* ✅ ปรับความสูงให้ปรับตามเนื้อหา */
}
}


/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/contentMenuLanding.vue?vue&type=style&index=0&id=61a3600f&scoped=true&lang=css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.menuLanding[data-v-61a3600f] {
  width: 100%; /* ขยายเต็มความกว้างของหน้าจอ */
  margin: 0; /* ตั้งค่า margin เป็น 0 เพื่อไม่ให้มีขอบ */
  padding: 40px 20px; /* ลด padding ด้านข้างเพื่อให้มีพื้นที่มากขึ้น */
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #353689, #5d5fef);
  box-sizing: border-box; /* รวม padding และ border ในขนาดของกล่อง */
  align-items: center;
  gap: 24px;
}
.menuLanding-row[data-v-61a3600f] {
  display: flex;
  flex-wrap: wrap; /* ให้แถวข้ามบรรทัดเมื่อเนื้อหามากเกินไป */
  gap: 24px;
  justify-content: center; /* จัดกลางแถว */
}
.topic[data-v-61a3600f] {
  letter-spacing: 2px;
  margin: 4px 0;
}
.topic-box[data-v-61a3600f] {
  width: 200px; /* ขยายขนาด */
  height: 220px;
  padding: 24px 16px; /* ลด padding */
  color: #ffffff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center; /* จัดกลาง */
  text-align: center; /* จัดกลางข้อความ */
}
.topic-box h2[data-v-61a3600f] {
  font-size: 32px; /* ขยายขนาดฟอนต์ */
  font-weight: bold;
}
.menu-box[data-v-61a3600f] {
  width: 200px; /* ขยายขนาด */
  height: 220px;
  text-align: center;
  padding: 24px 16px; /* ลด padding */
  background: #ffffff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background 0.3s; /* เพิ่ม transition สำหรับการเปลี่ยนสีพื้นหลัง */
  border: 1px solid #ffffff;
  cursor: pointer;
}
.menu-box[data-v-61a3600f]:hover {
  background: #5d5fef; /* เปลี่ยนสีพื้นหลังของ menu-box เมื่อชี้ */
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.menu-box:hover .menuBG-icon[data-v-61a3600f] {
  background: #5355d1; /* เปลี่ยนสีพื้นหลังของ menuBG-icon เมื่อชี้ */
}
.menu-box:hover #menu-icon[data-v-61a3600f] {
  color: #ffffff; /* เปลี่ยนสีของ menu-icon เป็นสีขาวเมื่อชี้ */
}
.menuBG-icon[data-v-61a3600f] {
  width: 120px; /* ขยายขนาด */
  height: 120px;
  background: #eef2fb;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#menu-icon[data-v-61a3600f] {
  font-size: 60px;
  color: #5d5fef; /* สีเริ่มต้นของ menu-icon */
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ThreadSelector.vue?vue&type=style&index=0&id=c833c48e&scoped=true&lang=css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.select-Thread[data-v-c833c48e] {
  position: relative;
  width: auto; /* Adjust width as needed */
}
.custom-select[data-v-c833c48e] {
  padding: 8px 20px;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  cursor: pointer;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.caret-down[data-v-c833c48e] {
  width: 20px;
  height: 20px;
  margin-left: 8px; /* Adjust space between text and arrow */
}
.options[data-v-c833c48e] {
  position: absolute;
  width: 100%;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  background-color: #fff;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 1000;
}
.option[data-v-c833c48e] {
  padding: 8px 16px;
  cursor: pointer;
  text-align: left; /* Align text to the left */
}
.option[data-v-c833c48e]:hover {
  background-color: #F5F7FA;
  color: #5D5FEF;
}
.caret-down[data-v-c833c48e] {
  width: 20px;
  height: 20px;
  fill: #333;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/PostsList1.vue?vue&type=style&index=0&id=73564520&scoped=true&lang=css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.contant-ul[data-v-73564520] {
  padding: 0;
}
.post-item[data-v-73564520] {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 16px 24px;
  background-color: #ffffff;
  position: relative;
  cursor: pointer;
}
.post-item[data-v-73564520]:hover {
  border: 1px solid #5d5fef;
}
.post-content[data-v-73564520] {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.post-content-left[data-v-73564520] {
  display: flex; /* Enables flex layout */
  gap: 16px; /* Adds 8px spacing between items */
  align-items: center;
}
.post-index[data-v-73564520] {
  font-size: 16px;
  color: #656565;
}
.post-image-wrapper[data-v-73564520] {
  margin-right: 10px;
}
.post-image[data-v-73564520] {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.no-image[data-v-73564520] {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background-color: #ffa233;
}
.no-image p[data-v-73564520] {
  font-size: 20px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-title-author[data-v-73564520] {
  display: flex;
  justify-content: space-between; /* ซ้าย-ขวาแยกกัน */
  align-items: flex-start;
  width: 100%;
}
.post-title-author-left[data-v-73564520] {
  display: flex;
  flex-direction: column; /* เรียง title และ author ลงล่าง */
  gap: 4px;
}
.post-title[data-v-73564520] {
  font-weight: 500;
  color: #333333;
  margin: 0;
}
.post-author[data-v-73564520] {
  color: #656565;
  font-size: 16px;
  margin: 0;
}
.post-date[data-v-73564520] {
  font-size: 16px;
  color: #000000;
  white-space: nowrap;
  margin-left: 16px; /* ถ้าต้องการเพิ่มระยะห่างกับด้านซ้าย */
  align-self: flex-start; /* จัดตำแหน่งบนเหมือนกัน */
}

/* ซ่อน .post-author-mobile บน desktop */
.post-author-mobile[data-v-73564520] {
  display: none;
}

/* เพิ่ม media queries เพื่อรองรับขนาดหน้าจอที่เล็กลง */
@media (max-width: 768px) {
.post-content[data-v-73564520] {
    display: flex;
    flex-direction: column; /* เรียงแนวตั้ง */
    align-items: flex-start; /* ชิดซ้าย */
    gap: 10px; /* ระยะห่างระหว่าง post-index และ no-image */
}
.post-title-author-left[data-v-73564520] {
    display: flex;
    flex-direction: column-reverse; /* สลับลำดับ post-author ขึ้นก่อน post-title */
    gap: 4px;
}
.post-item[data-v-73564520] {
    flex-direction: column; /* แสดงเป็นคอลัมน์เมื่อหน้าจอเล็กลง */
}
.post-title-author[data-v-73564520] {
    flex-direction: column; /* เรียง title และ author ลงล่าง */
    align-items: flex-start;
    margin-top: 8px; /* เพิ่มระยะห่างจากส่วนบน */
    order: 1; /* ย้าย post-title-author ลงมาด้านล่าง */
}
.post-date[data-v-73564520] {
    margin-left: 0;
    /* ย้ายวันที่ไปที่ด้านล่าง */
    margin-top: 8px;
    /* เพิ่มระยะห่างระหว่างวันที่กับ content */
    color: #656565;
}
  /* เพิ่มการจัดการให้ .post-index และ .no-image อยู่แถวเดียวกัน */
.post-index[data-v-73564520], .no-image[data-v-73564520] {
    display: inline-flex; /* ทำให้ทั้งสองอยู่ในแถวเดียวกัน */
    align-items: center; /* จัดให้อยู่ตรงกลางในแนวตั้ง */
}
.post-author[data-v-73564520] {
    display: none;
    /* ซ่อนที่อยู่ใน .post-title-author-left บน mobile */
}
.post-author-mobile[data-v-73564520] {
    display: inline-block;
    margin-left: 16px;
    font-size: 16px;
    color: #000000;
    vertical-align: middle;
}
.no-image[data-v-73564520] {
    height: 40px;
    width: 40px;
    margin: 0;
}
}
@media (max-width: 480px) {
.post-title[data-v-73564520] {
    font-size: 18px; /* ปรับขนาดฟอนต์ title สำหรับหน้าจอมือถือ */
}
.post-author[data-v-73564520] {
    font-size: 14px; /* ปรับขนาดฟอนต์ author สำหรับหน้าจอมือถือ */
}
.post-date[data-v-73564520] {
    font-size: 14px; /* ปรับขนาดฟอนต์วันที่สำหรับหน้าจอมือถือ */
}
}



/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/contentWebboard.vue?vue&type=style&index=0&id=6378dc4b&scoped=true&lang=css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.contentWebboard[data-v-6378dc4b] {
  margin: 40px 70px;
}
.head[data-v-6378dc4b] {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* จัดให้อยู่ขอบสองด้าน */
  align-items: flex-end; /* จัดแนวให้ตรงกับขอบล่างของคอนเทนเนอร์ */
}
.Thread-box[data-v-6378dc4b] {
  color: #000000;
  margin: 4px 0;
}
.topic[data-v-6378dc4b] {
  letter-spacing: 2px;
}
.Thread-box h1[data-v-6378dc4b] {
  margin: 0;
}
.dropdown[data-v-6378dc4b] {
  text-align: right; /* สำหรับการจัดข้อความให้ชิดขวา */
}


/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/HomeView.vue?vue&type=style&index=0&id=9ea40744&scoped=true&lang=css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.home[data-v-9ea40744] {
  background-color: #ffffff;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/Register.vue?vue&type=style&index=0&id=63ae9146&scoped=true&lang=css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.login-page[data-v-63ae9146] {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background-color: #2B64D5; /* พื้นหลังหลัก */
}
.background-image.main-bg[data-v-63ae9146] {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 400px;

  background-image: url(data:image/png;base64,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);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;

  z-index: 0;
  transform-origin: center bottom;
  transform: scale(1.3);
  overflow: hidden;
}
.background-image.overlay-bg[data-v-63ae9146] {
  position: absolute;
  bottom: 20%;
  left: 25%;
  width: 100%;
  height: 45%; /* ปรับขนาดตามต้องการ */
  transform: rotate(5deg);
  
  background-image: url("/img/register%20right.3d4d013d.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  
  z-index: 1;
}
.background-image.overlay-bg-bg[data-v-63ae9146] {
  position: absolute;
  bottom: 5%;
  right: 5%;
  width: 100%;
  height: 70%; /* ปรับขนาดตามต้องการ */
  
  background-image: url("/img/Group%203.f286ce58.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  
  z-index: 1;
}

/* เพิ่มสไตล์ที่ต้องการ */
.signup-form[data-v-63ae9146] {
  width: 300px;
  margin: 0 auto;
}
.register-container[data-v-63ae9146] {
  position: relative;
  z-index: 1; /* ให้อยู่เหนือพื้นหลัง */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 60px;
  gap: 25%;
  box-sizing: border-box;
  min-height: 100vh;
}

/* ✅ ฝั่งซ้าย */
.login-left[data-v-63ae9146] {
  max-width: 400px;
  color: #07112a;
}
.login-left h1[data-v-63ae9146] {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  font-family: 'Prompt', sans-serif;
  color: #fff;
}
.login-left p[data-v-63ae9146] {
  font-size: 16px;
  margin: 6px 0;
  color: #fff;
}

/* ✅ กล่องขวา Login */
.login-section[data-v-63ae9146] {
  background: white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  padding: 40px;
  width: 480px;
}
.login-form[data-v-63ae9146] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: 'Prompt', sans-serif;
}
.login-form h2[data-v-63ae9146] {
  font-size: 36px;
  font-weight: 700;
  margin: 0;
  color: #000;
  text-align: center;
}
.login-form > p[data-v-63ae9146] {
  color: #07112a;
  font-size: 16px;
  margin: 0;
  text-align: center;
}

/* ✅ ปุ่ม Google Login */
.google-login-button[data-v-63ae9146] {
  background: #eef2fb;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: rgba(7, 17, 42, 0.7);
  justify-content: center;
  cursor: pointer;
}
.google-login-button[data-v-63ae9146]:hover {
  background-color: #dbe2f7;
}
.google-icon[data-v-63ae9146] {
  width: 24px;
  height: 24px;
}

/* ✅ Label + Input Field */
.form-input[data-v-63ae9146] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-form label[data-v-63ae9146] {
  font-size: 16px;
  color: rgba(7, 17, 42, 0.7);
  display: flex;
  align-items: center;
  gap: 4px;
}
.login-form label .required[data-v-63ae9146] {
  color: #ee3636;
}
.login-form input[data-v-63ae9146] {
  padding: 10px 16px;
  border: 1px solid #d9d9d9;
  background: #f8f8f8;
  border-radius: 8px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

/*รหัสผ่าน */
.password-input-wrapper[data-v-63ae9146] {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}
.password-input-wrapper input[data-v-63ae9146] {
  width: 100% !important;
  padding-right: 40px !important; /* ช่องสำหรับไอคอนตา */
  font-size: 1rem !important;
  box-sizing: border-box !important;
}
.toggle-password[data-v-63ae9146] {
  position: absolute !important;
  right: 8px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}
.required[data-v-63ae9146] {
  color: red;
}

/* ✅ ปุ่ม Login */
.login-form button[type="submit"][data-v-63ae9146] {
  background-color: #5d5fef;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.login-form button[type="submit"][data-v-63ae9146]:hover {
  background-color: #3a3dde;
}
.error-message[data-v-63ae9146] {
  color: red;
  margin-top: 10px;
  text-align: center;
}

/* ✅ ปุ่ม Register */
.register-button[data-v-63ae9146] {
  border: 1px solid #FFFFFF;
  border-radius: 8px;
  background-color: transparent; /* ปรับตามดีไซน์ */

    /* Text */
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;

  padding: 10px 20px;
  border-radius: 8px;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* ✅ ยังไม่มีบัญชี */
.login-form .mx-0[data-v-63ae9146] {
  font-size: 16px;
  text-align: center;
  color: #000;
  margin: 0;
}
.login-form .mx-0 .register-button[data-v-63ae9146] {
  background: none !important;
  color: #5d5fef !important;
  padding: 0;
  font-weight: 500;
}


/* ✅ Responsive Tablet และมือถือ */
@media (max-width: 1024px) {
.register-container[data-v-63ae9146] {
    gap: 40px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    box-sizing: border-box;
    min-height: 100vh;
}
.login-left[data-v-63ae9146] {
    max-width: 100%;
    text-align: center;
    order: 1;
}
.login-left h1[data-v-63ae9146] {
    font-size: 24px;
}
.login-left p[data-v-63ae9146] {
    font-size: 14px;
}
.login-section[data-v-63ae9146] {
    width: 100%;
    max-width: 55%;
    order: 2;
}
.login-form h2[data-v-63ae9146] {
    font-size: 28px;
}
.login-form p[data-v-63ae9146],
  .login-form label[data-v-63ae9146] {
    font-size: 14px;
}
.google-login-button[data-v-63ae9146] {
    font-size: 14px;
}
.text[data-v-63ae9146] {
    font-size: 14px;
}
.login-form button[type="submit"][data-v-63ae9146] {
    font-size: 14px;
}
.login-form .mx-0[data-v-63ae9146] {
    font-size: 14px;
}
.background-image.main-bg[data-v-63ae9146] {
    height: 300px;
    transform: scale(1.5);
    bottom: 10%;
}
.background-image.overlay-bg[data-v-63ae9146] {
    bottom: 20%;
    right: 20%;
    height: 30%;
    transform: rotate(-5deg);
}
.background-image.overlay-bg-bg[data-v-63ae9146] {
    bottom: 21%;
    right: 2%;
    height: 60%;
}
}
@media (max-width: 600px) {
.register-container[data-v-63ae9146] {
    padding: 30px 16px;
}
.login-left h1[data-v-63ae9146] {
    font-size: 20px;
}
.login-left p[data-v-63ae9146] {
    font-size: 13px;
}
.login-section[data-v-63ae9146] {
    padding: 24px 16px;
    width: 100%;
    max-width: 80%;
}
.login-form h2[data-v-63ae9146] {
    font-size: 24px;
}
.google-login-button[data-v-63ae9146] {
    gap: 8px;
    font-size: 13px;
}
.google-icon[data-v-63ae9146] {
    width: 20px;
    height: 20px;
}
.login-form label[data-v-63ae9146] {
    font-size: 13px;
}
.login-form input[data-v-63ae9146] {
    font-size: 14px;
}
.login-form button[type="submit"][data-v-63ae9146] {
    font-size: 14px;
    padding: 10px;
}
.text[data-v-63ae9146] {
    font-size: 13px;
}
.login-form .mx-0[data-v-63ae9146] {
    font-size: 13px;
}
.background-image.main-bg[data-v-63ae9146] {
    height: 300px;
    transform: scale(1.5);
    bottom: 0%;
}
.background-image.overlay-bg[data-v-63ae9146] {
    bottom: 30%;
    right: 25%;
    height: 30%;
    transform: rotate(-5deg) !important;
}
.background-image.overlay-bg-bg[data-v-63ae9146] {
    bottom: 40%;
    right: 5%;
    height: 60%;
}
}


/* ✅ iPad (แนวตั้ง) */
@media (min-width: 769px) and (max-width: 834px) {
.register-container[data-v-63ae9146] {
    flex-direction: column;
    align-items: center;
    padding: 50px 24px;
    gap: 40px;
}
.login-left[data-v-63ae9146] {
    max-width: 100%;
    text-align: center;
}
.login-left h1[data-v-63ae9146] {
    font-size: 26px;
}
.login-left p[data-v-63ae9146] {
    font-size: 15px;
}
.login-section[data-v-63ae9146] {
    width: 100%;
    max-width: 450px;
    padding: 32px 24px;
}
.login-form h2[data-v-63ae9146] {
    font-size: 30px;
}
.login-form label[data-v-63ae9146],
  .login-form input[data-v-63ae9146],
  .text[data-v-63ae9146],
  .login-form .mx-0[data-v-63ae9146] {
    font-size: 15px;
}
.background-image.main-bg[data-v-63ae9146] {
    height: 300px;
    transform: scale(1.5);
    bottom: 10%;
}
.background-image.overlay-bg[data-v-63ae9146] {
    bottom: 25%;
    right: 20%;
    height: 30%;
}
.background-image.overlay-bg-bg[data-v-63ae9146] {
    bottom: 27%;
    right: 5%;
    height: 60%;
}
}

/* ✅ iPad Pro แนวนอน (สูงสุด 1366px) */
@media (min-width: 1025px) and (max-width: 1366px) {
.register-container[data-v-63ae9146] {
    padding: 60px 40px;
    gap: 15%;
}
.login-left h1[data-v-63ae9146] {
    font-size: 28px;
}
.login-left p[data-v-63ae9146] {
    font-size: 16px;
}
.login-section[data-v-63ae9146] {
    width: 440px;
    padding: 36px 30px;
}
.login-form h2[data-v-63ae9146] {
    font-size: 32px;
}
.login-form label[data-v-63ae9146],
  .login-form input[data-v-63ae9146],
  .text[data-v-63ae9146],
  .login-form .mx-0[data-v-63ae9146] {
    font-size: 16px;
}
.background-image.main-bg[data-v-63ae9146] {
    height: 400px;
    transform: scale(1.3);
}
.background-image.overlay-bg[data-v-63ae9146] {
    height: 45%;
}
.background-image.overlay-bg-bg[data-v-63ae9146] {
    height: 70%;
}
}


/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/Login.vue?vue&type=style&index=0&id=26084dc2&scoped=true&lang=css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************/

body[data-v-26084dc2], html[data-v-26084dc2] {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}
.login-page[data-v-26084dc2] {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background-color: #2B64D5; /* พื้นหลังหลัก */
}
.background-image.main-bg[data-v-26084dc2] {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 400px;

  background-image: url(data:image/png;base64,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);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;

  z-index: 0;
  transform-origin: center bottom;
  transform: scale(1.3);
  overflow: hidden;
}
.background-image.overlay-bg[data-v-26084dc2] {
  position: absolute;
  bottom: 20%;
  right: 25%;
  width: 100%;
  height: 45%; /* ปรับขนาดตามต้องการ */
  transform: rotate(5deg);
  
  background-image: url("/img/login%20left.13428f83.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  
  z-index: 1;
}
.background-image.overlay-bg-bg[data-v-26084dc2] {
  position: absolute;
  bottom: 5%;
  right: 5%;
  width: 100%;
  height: 70%; /* ปรับขนาดตามต้องการ */
  
  background-image: url("/img/Group%203.f286ce58.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  
  z-index: 1;
}


/* ✅ Container หลัก */
.login-container[data-v-26084dc2] {
  position: relative;
  z-index: 1; /* ให้อยู่เหนือพื้นหลัง */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 60px;
  gap: 25%;
  box-sizing: border-box;
  min-height: 100vh;
}


/* ✅ ฝั่งซ้าย */
.login-left[data-v-26084dc2] {
  max-width: 400px;
  color: #07112a;
}
.login-left h1[data-v-26084dc2] {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  font-family: 'Prompt', sans-serif;
  color: #fff;
}
.login-left p[data-v-26084dc2] {
  font-size: 16px;
  margin: 6px 0;
  color: #fff;
}

/* ✅ ปุ่ม Register */
.register-button[data-v-26084dc2] {
  border: 1px solid #FFFFFF;
  border-radius: 8px;
  background-color: transparent; /* ปรับตามดีไซน์ */

    /* Text */
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;

  padding: 10px 20px;
  border-radius: 8px;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* ✅ กล่องขวา Login */
.login-section[data-v-26084dc2] {
  background: white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  padding: 40px;
  width: 480px;
}
.login-form[data-v-26084dc2] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: 'Prompt', sans-serif;
}
.login-form h2[data-v-26084dc2] {
  font-size: 36px;
  font-weight: 700;
  margin: 0;
  color: #000;
  text-align: center;
}
.login-form > p[data-v-26084dc2] {
  color: #07112a;
  font-size: 16px;
  margin: 0;
  text-align: center;
}

/* ✅ ปุ่ม Google Login */
.google-login-button[data-v-26084dc2] {
  background: #eef2fb;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: rgba(7, 17, 42, 0.7);
  justify-content: center;
  cursor: pointer;
}
.google-login-button[data-v-26084dc2]:hover {
  background-color: #dbe2f7;
}
.google-icon[data-v-26084dc2] {
  width: 24px;
  height: 24px;
}

/* ✅ เส้นคั่น หรือ */
.separator-container[data-v-26084dc2] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  width: 100%;
}
.line[data-v-26084dc2] {
  flex: 1;
  height: 1px;
  background-color: #d9d9d9;
}
.text[data-v-26084dc2] {
  font-size: 16px;
  color: rgba(7, 17, 42, 0.7);
}

/* ✅ Label + Input Field */
.form-input[data-v-26084dc2] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-form label[data-v-26084dc2] {
  font-size: 16px;
  color: rgba(7, 17, 42, 0.7);
  display: flex;
  align-items: center;
  gap: 4px;
}
.login-form label .required[data-v-26084dc2] {
  color: #ee3636;
}
.login-form input[data-v-26084dc2] {
  padding: 10px 16px;
  border: 1px solid #d9d9d9;
  background: #f8f8f8;
  border-radius: 8px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

/*รหัสผ่าน */
.password-input-wrapper[data-v-26084dc2] {
  position: relative;
  display: flex;
  align-items: center;
}
.password-input-wrapper input[data-v-26084dc2] {
  width: 100%;
  padding-right: 40px; /* ช่องสำหรับไอคอนตา */
  font-size: 1rem;
  box-sizing: border-box;
}
.toggle-password[data-v-26084dc2] {
  position: absolute;
  right: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.required[data-v-26084dc2] {
  color: red;
}

/* ✅ ลืมรหัสผ่าน */
.login-form .forgot[data-v-26084dc2] {
  text-align: right;
  font-size: 14px;
  color: #5d5fef;
  cursor: pointer;
}

/* ✅ ปุ่ม Login */
.login-form button[type="submit"][data-v-26084dc2] {
  background-color: #5d5fef;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.login-form button[type="submit"][data-v-26084dc2]:hover {
  background-color: #3a3dde;
}

/* ✅ ยังไม่มีบัญชี */
.login-form .mx-0[data-v-26084dc2] {
  font-size: 16px;
  text-align: center;
  color: #000;
  margin: 0;
}
.login-form .mx-0 .register-button[data-v-26084dc2] {
  background: none !important;
  color: #5d5fef !important;
  padding: 0;
  font-weight: 500;
}


/* ✅ Responsive Tablet และมือถือ */
@media (max-width: 1024px) {
.login-container[data-v-26084dc2] {
    gap: 40px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    box-sizing: border-box;
    min-height: 100vh;
}
.login-left[data-v-26084dc2] {
    max-width: 100%;
    text-align: center;
}
.login-left h1[data-v-26084dc2] {
    font-size: 24px;
}
.login-left p[data-v-26084dc2] {
    font-size: 14px;
}
.login-section[data-v-26084dc2] {
    width: 100%;
    max-width: 55%;
}
.login-form h2[data-v-26084dc2] {
    font-size: 28px;
}
.login-form p[data-v-26084dc2],
  .login-form label[data-v-26084dc2] {
    font-size: 14px;
}
.google-login-button[data-v-26084dc2] {
    font-size: 14px;
}
.text[data-v-26084dc2] {
    font-size: 14px;
}
.login-form button[type="submit"][data-v-26084dc2] {
    font-size: 14px;
}
.login-form .mx-0[data-v-26084dc2] {
    font-size: 14px;
}
.background-image.main-bg[data-v-26084dc2] {
    height: 300px;
    transform: scale(1.5);
    bottom: 10%;
}
.background-image.overlay-bg[data-v-26084dc2] {
    bottom: 20%;
    right: 20%;
    height: 30%;
}
.background-image.overlay-bg-bg[data-v-26084dc2] {
    bottom: 21%;
    right: 2%;
    height: 60%;
}
}
@media (max-width: 600px) {
.login-container[data-v-26084dc2] {
    padding: 30px 16px;
}
.login-left h1[data-v-26084dc2] {
    font-size: 20px;
}
.login-left p[data-v-26084dc2] {
    font-size: 13px;
}
.login-section[data-v-26084dc2] {
    padding: 24px 16px;
    width: 100%;
    max-width: 80%;
}
.login-form h2[data-v-26084dc2] {
    font-size: 24px;
}
.google-login-button[data-v-26084dc2] {
    gap: 8px;
    font-size: 13px;
}
.google-icon[data-v-26084dc2] {
    width: 20px;
    height: 20px;
}
.login-form label[data-v-26084dc2] {
    font-size: 13px;
}
.login-form input[data-v-26084dc2] {
    font-size: 14px;
}
.login-form button[type="submit"][data-v-26084dc2] {
    font-size: 14px;
    padding: 10px;
}
.text[data-v-26084dc2] {
    font-size: 13px;
}
.login-form .mx-0[data-v-26084dc2] {
    font-size: 13px;
}
.background-image.main-bg[data-v-26084dc2] {
    height: 300px;
    transform: scale(1.5);
    bottom: 10%;
}
.background-image.overlay-bg[data-v-26084dc2] {
    bottom: 35%;
    right: 20%;
    height: 30%;
}
.background-image.overlay-bg-bg[data-v-26084dc2] {
    bottom: 45%;
    right: 5%;
    height: 60%;
}
}


/* ✅ iPad (แนวตั้ง) */
@media (min-width: 769px) and (max-width: 834px) {
.login-container[data-v-26084dc2] {
    flex-direction: column;
    align-items: center;
    padding: 50px 24px;
    gap: 40px;
}
.login-left[data-v-26084dc2] {
    max-width: 100%;
    text-align: center;
}
.login-left h1[data-v-26084dc2] {
    font-size: 26px;
}
.login-left p[data-v-26084dc2] {
    font-size: 15px;
}
.login-section[data-v-26084dc2] {
    width: 100%;
    max-width: 450px;
    padding: 32px 24px;
}
.login-form h2[data-v-26084dc2] {
    font-size: 30px;
}
.login-form label[data-v-26084dc2],
  .login-form input[data-v-26084dc2],
  .text[data-v-26084dc2],
  .login-form .mx-0[data-v-26084dc2] {
    font-size: 15px;
}
.background-image.main-bg[data-v-26084dc2] {
    height: 300px;
    transform: scale(1.5);
    bottom: 10%;
}
.background-image.overlay-bg[data-v-26084dc2] {
    bottom: 25%;
    right: 20%;
    height: 30%;
}
.background-image.overlay-bg-bg[data-v-26084dc2] {
    bottom: 27%;
    right: 5%;
    height: 60%;
}
}

/* ✅ iPad Pro แนวนอน (สูงสุด 1366px) */
@media (min-width: 1025px) and (max-width: 1366px) {
.login-container[data-v-26084dc2] {
    padding: 60px 40px;
    gap: 15%;
}
.login-left h1[data-v-26084dc2] {
    font-size: 28px;
}
.login-left p[data-v-26084dc2] {
    font-size: 16px;
}
.login-section[data-v-26084dc2] {
    width: 440px;
    padding: 36px 30px;
}
.login-form h2[data-v-26084dc2] {
    font-size: 32px;
}
.login-form label[data-v-26084dc2],
  .login-form input[data-v-26084dc2],
  .text[data-v-26084dc2],
  .login-form .mx-0[data-v-26084dc2] {
    font-size: 16px;
}
.background-image.main-bg[data-v-26084dc2] {
    height: 400px;
    transform: scale(1.3);
}
.background-image.overlay-bg[data-v-26084dc2] {
    height: 45%;
}
.background-image.overlay-bg-bg[data-v-26084dc2] {
    height: 70%;
}
}


/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/ViewThread.vue?vue&type=style&index=0&id=bbf0116e&scoped=true&lang=css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.CoverSection[data-v-bbf0116e] {
  align-items: center;
  padding: 40px 20px; /* Padding inside the Navbar */
  gap: 24px; /* ระยะห่างระหว่างองค์ประกอบใน CoverSection */
}
.HeadThread[data-v-bbf0116e] {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Ensure space between items */
  margin-bottom: 24px; /* ระยะห่างด้านล่างของ HeadTopic */
}
.ThreadMenu[data-v-bbf0116e] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.HeadName[data-v-bbf0116e] {
  font-size: 24px;
  font-weight: 500;
}
.TopSection[data-v-bbf0116e] {
  gap: 12px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  margin-bottom: 24px; /* ระยะห่างด้านล่างของ TopSection */
}
.ThreadName[data-v-bbf0116e] {
  font-size: 24px;
  font-weight: 500;
  padding: 0;
  margin: 0;
}
.DateTime[data-v-bbf0116e] {
  font-size: 16px;
  color: #656565;
  display: flex; /* ใช้ flexbox สำหรับจัดเรียง */
  align-items: center; /* จัดตำแหน่งแนวตั้ง */
  justify-content: flex-start; /* จัดตำแหน่งแนวนอน */
  gap: 8px;
}
.PostedBy[data-v-bbf0116e] {
  display: flex;
  align-items: center; /* จัดตำแหน่งแนวตั้ง */
  gap: 16px;
}
.post-image-wrapper[data-v-bbf0116e] {
  margin-right: 10px;
}
.post-image[data-v-bbf0116e] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.no-image[data-v-bbf0116e] {
  border-radius: 50%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background-color: #ffa233;
}
.no-image p[data-v-bbf0116e] {
  font-size: 20px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.UserName[data-v-bbf0116e] {
  font-size: 16px;
  margin: 0;
}
.content[data-v-bbf0116e] {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
}
.Paragraph[data-v-bbf0116e] {
  padding-bottom: 4px;
  margin: 0;
}
.Paragraph p[data-v-bbf0116e] {
  font-size: 16px;
}
.image-container[data-v-bbf0116e] {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 16px; /* Space between images */
  margin: 10px 0; /* Space above and below images */
}
.image-wrapper[data-v-bbf0116e] {
  position: relative; /* Allows button to overlay the image */
}
.ThreadIMG[data-v-bbf0116e] {
  width: 100%;
  height: 500px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
}
.view-full-button[data-v-bbf0116e] {
  position: absolute;
  bottom: 16px; /* Position button at the bottom */
  right: 16px; /* Position button on the right */
  background-color: rgba(0, 0, 0, 0.6); /* Slightly transparent background */
  color: #ffffff;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.view-full-button[data-v-bbf0116e]:hover {
  background-color: rgba(0, 0, 0, 0.8); /* Darker on hover */
}
.tooltip-text[data-v-bbf0116e] {
  visibility: hidden;
  width: 120px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  bottom: 100%; /* Place it just above the button */
  right: 0; /* Align to the right edge of the button */
  transform: translateY(-8px); /* Slightly above the button */
  opacity: 0;
  transition: opacity 0.3s;
}
.view-full-button:hover .tooltip-text[data-v-bbf0116e] {
  visibility: visible;
  opacity: 1;
}
.tooltip-text[data-v-bbf0116e]::after {
  content: '';
  position: absolute;
  bottom: -8px; /* Position the arrow just below the tooltip */
  left: 50%;
  transform: translateX(-50%); /* Center it horizontally */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.7); /* The arrow's color matches the tooltip background */
}
.modal[data-v-bbf0116e] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Bring modal above other content */
}
.full-image[data-v-bbf0116e] {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
}
@media (max-width: 820px) {
.ThreadName[data-v-bbf0116e] {
    font-size: 18px;
}
.image-container[data-v-bbf0116e] {
    display: flex;
    flex-direction: column;
}
}
@media (max-width: 431px) {
.DateTime[data-v-bbf0116e] {
    margin: 8px 0 !important;
}
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/FormThread.vue?vue&type=style&index=0&id=2105d71e&scoped=true&lang=css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.FormSection[data-v-2105d71e] {
  background: #ffffff;
  /* Background color */
  padding: 24px;
  /* Internal spacing 24px */
  margin: 24px 0;
  border-radius: 8px;
  border: 1px solid #D9D9D9;
  /* Border */
}
.FormSection[data-v-2105d71e]>* {
  margin-bottom: 40px;
  /* Spacing between each element */
}
.ThreadSelec[data-v-2105d71e] {
  display: flex;
  align-items: center;
  gap: 24px;
}
.Topic-input[data-v-2105d71e],
.Content-input[data-v-2105d71e] {
  padding: 10px;
  width: 100%;
  min-height: 50px;
  /* Minimum height */
  border-radius: 5px;
  border: none;
  /* Remove border */
  font-size: 24px;
  background-color: transparent;
  /* Make background transparent */
  outline: none;
  /* No border when focused */
}
.Content-input[data-v-2105d71e] {
  font-size: 16px;
}
.Topic-input.Topic-has-content[data-v-2105d71e],
.Content-input.Content-has-content[data-v-2105d71e] {
  /* Add styles for when there is content */
}
.Content-input[data-v-2105d71e] {
  resize: vertical;
  /* Allow vertical resizing */
  min-height: 100px;
  /* Minimum height for content */
}

/* Placeholder style for contenteditable elements */
.Topic-input[data-v-2105d71e]:empty::before,
.Content-input[data-v-2105d71e]:empty::before {
  content: attr(placeholder);
  color: #999;
  /* Color of placeholder */
}

/* Styles for paragraph containers */
.paragraph-container[data-v-2105d71e] {
  /* Space between the paragraph and buttons */
  position: relative;
  /* Keep the container position relative for absolute positioning of the buttons */
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #D9D9D9;
  border-radius: 5px;
  background-color: #f9f9f9;
}
.HeadBox-Container[data-v-2105d71e] {
  justify-content: space-between;
  display: flex;
  /* Use flexbox for layout */
}
.button-group[data-v-2105d71e] {
  display: flex;
  /* Use flexbox for layout */
  gap: 10px;
  /* Space between the buttons */
  align-items: center;
  /* Vertically center the buttons */
}
.addIMG[data-v-2105d71e] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  color: #000;
  cursor: pointer;
}
.addIMG[data-v-2105d71e] :hover {}

/* Styles for delete button */
.delete-button[data-v-2105d71e] {
  color: white;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.delete-button[data-v-2105d71e]:hover {}





/* Vertical line style */
.vertical-line[data-v-2105d71e] {
  position: absolute;
  top: 0;
  /* Align to the top of the paragraph */
  right: -10px;
  /* Position to the right of the paragraph */
  width: 2px;
  /* Width of the vertical line */
  height: calc(100% - 20px);
  /* Full height minus padding */
  background-color: #D9D9D9;
  /* Color of the vertical line */
}

/* Divider style */
.vertical-divider[data-v-2105d71e] {
  height: 5px;
  /* Height of the divider */
  background-color: #ff0000;
  /* Color of the divider */
  margin: 10px 0;
  /* Space above and below the divider */
  height: 100%;
  /* Full width */
}
.image-preview[data-v-2105d71e] {
  margin-top: 10px;
  /* Space above the image */
}
.image-preview img[data-v-2105d71e] {
  max-width: 100%;
  /* Ensure image fits within the container */
  height: auto;
  /* Maintain aspect ratio */
}
.action-buttons-container[data-v-2105d71e] {
  display: flex;
  justify-content: space-between;
  /* Push "เพิ่มย่อหน้า" to the left and the others to the right */
  align-items: center;
  /* Center align the buttons vertically */
  margin-top: 20px;
  /* Space above the button group */
}
.post-cancel-buttons[data-v-2105d71e] {
  display: flex;
  gap: 10px;
  /* Space between the post and cancel buttons */
}
.cancel-button[data-v-2105d71e] {
  font-size: 14px;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background-color: #ffffff;
  color: #656565;
  border: 1px solid #D9D9D9;
}
.cancel-button[data-v-2105d71e]:hover {
  background-color: #D9D9D9;
}
.addParagraph[data-v-2105d71e] {
  display: flex;
  color: #5D5FEF;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}
.addParagraph svg[data-v-2105d71e] {
  fill: #5D5FEF;
}
.vertical-line[data-v-2105d71e] {
  border-left: 1px solid #000;
  height: 24px;
  margin: 0 10px;
}
.tooltip[data-v-2105d71e] {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext[data-v-2105d71e] {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Positioning */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  /* Position above the button */
  left: 50%;
  margin-left: -60px;
  /* Center the tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext[data-v-2105d71e] {
  visibility: visible;
  opacity: 1;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/CreateThread.vue?vue&type=style&index=0&id=1ff74740&scoped=true&lang=css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.CreateThread-Section[data-v-1ff74740] {
  align-items: center;
  padding: 60px 108px; /* Padding inside the Navbar */
  gap: 24px; /* ระยะห่างระหว่างองค์ประกอบใน CoverSection */
}
.BackButton[data-v-1ff74740]{
    display: flex;
    gap: 8px;
}
.BackButton a[data-v-1ff74740]{
    cursor: pointer;
}
.PreviousPage[data-v-1ff74740]{
    display: flex;
    justify-content: center;
    gap: 8px;
    color: rgba(0, 0, 0, 0.25);
}
.PreviousIcon path[data-v-1ff74740] {
    fill: rgba(0, 0, 0, 0.25);
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/CheckBox-ThreadSelector.vue?vue&type=style&index=0&id=0b50d813&scoped=true&lang=css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.select-Thread[data-v-0b50d813] {
  position: relative;
  width: 100%;
}
.options[data-v-0b50d813] {
  padding: 8px 16px;
  margin: 0;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  background-color: #fff;
  list-style: none;
  text-align: left;
  width: 100%;
}
.option[data-v-0b50d813] {
  display: flex;
  padding: 8px 0px;
  align-items: center;
}
.option label[data-v-0b50d813] {
  cursor: pointer;
}
.option input[type="checkbox"][data-v-0b50d813] {
  margin-right: 8px;
}

/* Mobile Drawer */
.mobile-drawer[data-v-0b50d813] {
  display: none;
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  transition: right 0.3s ease;
  z-index: 9999;
}
.mobile-drawer.open[data-v-0b50d813] {
  right: 0;
}
.drawer-header[data-v-0b50d813] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.close-btn[data-v-0b50d813] {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
.desktop-filter[data-v-0b50d813] {
  display: block;
}
.mobile-filter-toggle[data-v-0b50d813] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px; /* ระยะห่างระหว่างข้อความกับไอคอน */
  font-family: inherit; /* ใช้ฟอนต์ที่เว็บกำหนด */
  font-size: 16px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.filter-button-content[data-v-0b50d813] {
  display: flex;
  gap: 8px;
}
.filter-button-content p[data-v-0b50d813] {
  margin: 0;
  font-family: inherit;
  color: #5D5FEF;
}
.filter-content[data-v-0b50d813] {
  display: flex;
  gap: 8px;
  padding: 8px 8px 8px 0;
}
.filter-content p[data-v-0b50d813] {
  margin: 0;
  font-family: inherit;
  color: #5D5FEF;
  font-size: 18px;
  font-weight: 500;
}


/* Mobile View */
@media (max-width: 820px) {
.mobile-filter-toggle[data-v-0b50d813] {
    margin-bottom: 10px;
    padding: 8px 16px;
    margin: 0;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    background-color: #fff;
    color: #000;
    list-style: none;
    text-align: left;
    width: 100%;
}
.mobile-drawer[data-v-0b50d813] {
    display: block; /* แสดง Mobile Drawer เมื่อเปิด */
}
.desktop-filter[data-v-0b50d813] {
    display: none; /* ซ่อนตัวเลือกสำหรับ Desktop */
}
.options[data-v-0b50d813] {
    border: none;
}
.document-list[data-v-0b50d813] {
    grid-template-columns: 1fr; /* 1 คอลัมน์ สำหรับมือถือ */
}
}

/* Desktop View - ซ่อน Mobile Filter และ Mobile Drawer */
@media (min-width: 821px) {
.mobile-filter-toggle[data-v-0b50d813] {
    display: none; /* ซ่อนปุ่มตัวกรองมือถือ */
}
.mobile-drawer[data-v-0b50d813] {
    display: none; /* ซ่อน Mobile Drawer */
}
.desktop-filter[data-v-0b50d813] {
    display: block; /* แสดงตัวเลือกสำหรับ Desktop */
}
.options[data-v-0b50d813] {
    border: 1px solid #D9D9D9; /* ตัวเลือกที่แสดงสำหรับ Desktop */
}
.document-list[data-v-0b50d813] {
    grid-template-columns: repeat(3, 1fr); /* 3 คอลัมน์ สำหรับ Desktop */
}
}


/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/HistoryViewThread.vue?vue&type=style&index=0&id=1442f343&scoped=true&lang=css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.ThreadMenu[data-v-1442f343] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.custom-select[data-v-1442f343] {
  padding: 24px 24px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #fff;
  align-items: center;
  width: 100%;
}
.custom-select-right[data-v-1442f343] {
  gap: 16px; /* เว้นระยะห่างระหว่างกลุ่ม */
}
.custom-select-right-Top[data-v-1442f343] {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Ensure content is vertically centered */
  margin-bottom: 20px; /* Add space at the bottom */
  flex-wrap: wrap; /* Allow elements to wrap on smaller screens */
  width: 100%;
}
.custom-select-right-Top p[data-v-1442f343] {
  font-size: 16px;
  color: #333; /* Adjust text color */
  margin: 0; /* Remove default margin for better spacing control */
}
.selected-threads[data-v-1442f343] {
  display: flex;
  flex-wrap: wrap; /* ทำให้ไอเทมสามารถแสดงผลหลายบรรทัด */
  gap: 8px; /* ระยะห่างระหว่างไอเทม */
  margin: 0;
  padding: 0;
  list-style: none;
}
.Selected-ThreadType[data-v-1442f343] {
  display: flex;
  align-items: center;
  gap: 4px; /* ระยะห่างระหว่างชื่อหมวดหมู่กับจำนวนกระทู้ */
  font-size: 14px; /* ปรับขนาดฟอนต์ */
  color: #333333;
  background-color: #f9f9f9; /* เพิ่มพื้นหลังเพื่อเน้น */
  padding: 4px 8px;
  border-radius: 4px;
}
.Selected-ThreadType p[data-v-1442f343] {
  margin: 0; /* Remove margin to ensure consistent spacing */
}
.selected-threads > li[data-v-1442f343]:last-child {
  margin-bottom: 0; /* Remove bottom margin for the last item */
}
.ThreadMenu-Button[data-v-1442f343] {
  display: flex;
  gap: 12px; /* ระยะห่างระหว่างปุ่ม */
  justify-content: space-between; /* ตำแหน่งอยู่ด้านขวา */
}
.thread-type[data-v-1442f343] {
  font-size: 14px;
  color: #656565;
  margin-top: 4px;
}
.contant-ul[data-v-1442f343] {
  padding: 0;
}
.post-item[data-v-1442f343] {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 16px 24px;
  background-color: #ffffff;
  position: relative;
  cursor: pointer;
}
.post-item[data-v-1442f343]:hover {
  border: 1px solid #5d5fef;
}
.post-content[data-v-1442f343] {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.post-index[data-v-1442f343] {
  font-size: 16px;
  color: #656565;
}
.post-image-wrapper[data-v-1442f343] {
  margin-right: 10px;
}
.post-image[data-v-1442f343] {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.no-image[data-v-1442f343] {
  border-radius: 50%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background-color: #ffa233;
}
.no-image p[data-v-1442f343] {
  font-size: 20px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-title-author[data-v-1442f343] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.post-title[data-v-1442f343] {
  font-weight: 500;
  color: #333333;
  margin: 0;
}
.post-author[data-v-1442f343] {
  color: #656565;
  font-size: 16px;
  margin: 0;
}
.post-date[data-v-1442f343] {
  position: absolute;
  right: 24px;
  top: 16px;
  font-size: 16px;
  color: #000000;
}
.thread-group[data-v-1442f343] {
  margin-bottom: 32px;
  list-style: none;
}
.thread-group ul[data-v-1442f343] {
  padding: 0;
}
.thread-header[data-v-1442f343] {
  font-size: 18px;
  font-weight: bold;
  list-style: none;
  display: flex;
  align-items: center; /* Center the items vertically */
  gap: 8px;
}
.Selected-ThreadType[data-v-1442f343] {
  list-style: none;
  display: flex;
  align-items: center; /* Center the items vertically */
  gap: 8px;
}
.pagination[data-v-1442f343] {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}
.pagination[data-v-1442f343] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.pagination button[data-v-1442f343] {
  background-color: #5d5fef;
  color: #ffffff;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.pagination button[data-v-1442f343]:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
.AllThread-button[data-v-1442f343] {
  color: rgba(101, 101, 101, 0.5);  /* Set text color with 50% opacity */
  padding: 0 16px 0 0;  /* Set padding */
  cursor: pointer;
}
.history-button[data-v-1442f343] {
  text-decoration: underline;
  text-decoration-thickness: 2px; /* Set underline thickness */
  text-decoration-color: #5D5FEF; /* Underline color */
  cursor: pointer;
}
.calendar-container[data-v-1442f343] {
  width: 300px;
  margin: auto;
  text-align: center;
  font-family: Arial, sans-serif;
}
.calendar-header[data-v-1442f343] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.calendar-header select[data-v-1442f343] {
  padding: 5px;
  font-size: 14px;
}
.calendar-days[data-v-1442f343],
.calendar-dates[data-v-1442f343] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.day[data-v-1442f343] {
  font-weight: bold;
}
.date[data-v-1442f343] {
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.date[data-v-1442f343]:hover {
  background-color: #f0f0f0;
}
.current-date[data-v-1442f343] {
  background-color: #4caf50;
  color: white;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/HistoryThread.vue?vue&type=style&index=0&id=49eb4e18&scoped=true&lang=css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.contentWebboard[data-v-49eb4e18] {
  padding: 40px 70px;
}
.head[data-v-49eb4e18] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.CheckBox-ThreadList[data-v-49eb4e18] {
  display: flex;
  justify-content: space-between;
  gap: 56px;
}
.Thread-box[data-v-49eb4e18] {
  color: #000000;
  margin: 4px 0;
}
.topic[data-v-49eb4e18] {
  letter-spacing: 2px;
}
.Thread-box h1[data-v-49eb4e18] {
  margin: 0;
}
.dropdown[data-v-49eb4e18] {
  text-align: right;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/FromThreadTopic.vue?vue&type=style&index=0&id=59d03bbb&scoped=true&lang=css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.CoverSection[data-v-59d03bbb] {
  align-items: center;
  padding: 40px 70px;
  gap: 24px; /* ระยะห่างระหว่างองค์ประกอบใน CoverSection */
}
.TopSection[data-v-59d03bbb],
.ContentSection[data-v-59d03bbb] {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  margin-bottom: 24px; /* ระยะห่างด้านล่างของ TopSection */
}

/* เลือกกระทู้ */
.select-Thread[data-v-59d03bbb],
.ThreadName[data-v-59d03bbb] {
  display: flex;
  flex-direction: column; /* Arrange items vertically */
  margin-bottom: 16px; /* Spacing between sections */
}
.select-Thread[data-v-59d03bbb] {
  position: relative;
}
.custom-select[data-v-59d03bbb] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
  background-color: #ffffff;
}
.selected-option[data-v-59d03bbb] {
  flex: 1; /* Take available space */
  color: #333; /* Default text color */
}
.caret-down[data-v-59d03bbb] {
  width: 16px;
  height: 16px;
}
.options[data-v-59d03bbb] {
  position: absolute;
  top: 100%; /* Place below the custom select */
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  max-height: 200px; /* Limit dropdown height */
  overflow-y: auto; /* Enable scrolling */
  z-index: 100; /* Ensure it is above other elements */
  list-style: none;
  border-radius: 8px;
 
  padding: 0;
}
.option[data-v-59d03bbb] {
  padding: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.option[data-v-59d03bbb]:hover {
  background-color: #f5f7fa;
  color: #5d5fef;
}
.ThreadName[data-v-59d03bbb] {
  margin-top: 16px; /* Spacing above Thread Name section */
}
.ThreadName-Input[data-v-59d03bbb] {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 10px;
  font-size: 16px; /* Set input font size */
}
.ThreadName-Input[data-v-59d03bbb]:focus {
  border-color: #5d5fef;
  box-shadow: 0 0 5px rgba(93, 95, 239, 0.5);
  outline: none;
}
.topic-p[data-v-59d03bbb] {
  font-size: 16px; /* Label font size */
  color: #333; /* Label color */

  width: 200px;
}
.signup-form[data-v-59d03bbb] {
  width: 300px;
  margin: 0 auto;
}
button[data-v-59d03bbb] {
  margin-top: 10px;
}
.ContentTop[data-v-59d03bbb] {
  display: flex;
  text-align: center;
  justify-content: space-between;
  padding: 0 0 24px 0;
}
.AddParagraph[data-v-59d03bbb] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.AddParagraph p[data-v-59d03bbb] {
  font-size: 1rem;
}
.AddParagraph button[data-v-59d03bbb] {
  background-color: #ffffff;
  color: #5d5fef; /* Color for the icon inside the button */
  border: 1px solid #5d5fef; /* Border color */
  border-radius: 50%; /* Circular shape */
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}
.AddParagraph button[data-v-59d03bbb]:hover {
  background-color: #5d5fef; /* Background on hover */
  color: #ffffff; /* Icon color on hover */
  border-color: #5d5fef;
}
.AddParagraph button svg[data-v-59d03bbb] {
  fill: currentColor; /* Inherit the button color */
  width: 24px; /* Adjust as needed */
  height: 24px;
}
.ContentMid[data-v-59d03bbb] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ShowParagraph-Button[data-v-59d03bbb] {
  display: flex;
  align-items: center; /* Center vertically */
  text-align: center;
  justify-content: space-between; /* Align items to the start (left) */
}
.TypeContent[data-v-59d03bbb] {
  width: 100%; /* Expand TypeContent to full width of container */
  padding: 0 0 44px 0;
}
.TypeContent-input[data-v-59d03bbb] {
  width: 100%; /* Expand input area to full width */
  padding: 0 0 4px 0;
}
.TypeContent-input textarea[data-v-59d03bbb] {
  width: 100%; /* Ensure the textarea inside also takes full width */
  padding: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 16px;
  box-sizing: border-box;
  resize: vertical; /* Allow vertical resizing */
  min-height: 100px; /* Minimum height for better UX */
}
.TypeContent-input textarea[data-v-59d03bbb]:focus {
  border-color: #5d5fef;
  box-shadow: 0 0 5px rgba(93, 95, 239, 0.5);
  outline: none;
}
.TypeContent-lower[data-v-59d03bbb] {
  display: flex;
  justify-content: right; /* Center items horizontally */
  gap: 16px; /* Space between items */
}
.UploadIMG[data-v-59d03bbb] {
  display: flex;
  align-items: center; /* Center items vertically */
  gap: 16px; /* Space between items */
}
.removeParagraph[data-v-59d03bbb] {
  background-color: #ffffff;
  color: #000000; /* Color for the icon inside the button */
  border: 1px solid #d9d9d9; /* Border color */
  border-radius: 8px; /* Circular shape */
  width: 40px;
  height: 40px;
  margin: 0;
  display: flex;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}
.removeParagraph[data-v-59d03bbb]:focus {
  /* Corrected this selector */
  outline: none; /* Removes the default outline */
  box-shadow: 0 0 0 3px rgba(93, 95, 239, 0.5); /* Custom focus ring */
}
.removeParagraph svg[data-v-59d03bbb] {
  fill: currentColor; /* Inherit the button color */
  width: 24px; /* Adjust as needed */
  height: 24px;
}
.file-upload[data-v-59d03bbb] {
  position: relative;
  display: inline-block;
}
input[type="file"][data-v-59d03bbb] {
  display: none; /* Hide the default file input */
}
.file-upload-label[data-v-59d03bbb] {
  background-color: #ffffff;
  color: #000000; /* Color for the icon inside the button */
  border: 1px solid #d9d9d9; /* Border color */
  height: 40px;
  border-radius: 8px; /* Slightly rounded corners */
  padding: 0px 16px; /* Padding for better spacing */
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}
.file-upload-label svg[data-v-59d03bbb] {
  margin-right: 8px; /* Space between the icon and text */
  fill: currentColor; /* Inherit the label text color */
  width: 24px; /* Adjust as needed */
  height: 24px;
}
.ShowIMGUpload[data-v-59d03bbb] {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 16px; /* Space between images */
  margin: 10px 0; /* Space above and below images */
}
.imageContainer[data-v-59d03bbb] {
  position: relative; /* Make this position relative to position child elements absolutely */
}
.ShowIMG[data-v-59d03bbb] {
  width: 100%;
  height: 500px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
}
.removeImage[data-v-59d03bbb] {
  position: absolute; /* Position the button absolutely */
  top: 8px; /* Adjust this value for vertical positioning */
  right: 8px; /* Adjust this value for horizontal positioning */
  background-color: rgba(0, 0, 0, 0.6); /* Slightly transparent background */
  color: #ffffff;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.removeImage[data-v-59d03bbb]:hover {
  background-color: rgba(0, 0, 0, 0.8); /* Darken on hover */
}
.paragraph-divider[data-v-59d03bbb] {

  border-top: 2px solid #ff0000; /* เส้นคั่นแนวนอนสีแดง */
  margin: 10px 0; /* ระยะห่างด้านบนและล่าง */
}
.SubmitCancel-Button[data-v-59d03bbb] {
  display: flex;
  gap: 16px;
}
.submitButton[data-v-59d03bbb] {
  width: 100%;
  background: #5d5fef;
  padding: 8px 16px;
  border-radius: 8px;
  color: #fff;
  border: none; /* Removes default border */
  font-size: 16px; /* Adjust text size */
  cursor: pointer; /* Changes cursor to pointer on hover */
  transition: background 0.2s ease; /* Smooth background color transition */
  text-align: center;
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Center items vertically */
  justify-content: center; /* Center items horizontally */
}
.submitButton[data-v-59d03bbb]:hover {
  background: #4a4ae6;
}
.cancelButton[data-v-59d03bbb] {
  width: 100%;
  background: #FFFFFF;
  padding: 8px 16px;
  color: #656565;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 16px; /* Adjust text size */
  cursor: pointer; /* Changes cursor to pointer on hover */
  transition: background 0.2s ease; /* Smooth background color transition */
  text-align: center;
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Center items vertically */
  justify-content: center; /* Center items horizontally */
}
.cancelButton[data-v-59d03bbb]:hover {
}
.tooltip-text[data-v-59d03bbb] {
  visibility: hidden;
  width: 120px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  top: 67%; /* Place it just above the button */
  right: 5%; /* Align to the right edge of the button */
  transform: translateY(-8px); /* Slightly above the button */
  opacity: 0;
  transition: opacity 0.3s;
}
.add-button:hover .tooltip-text[data-v-59d03bbb] {
  visibility: visible;
  opacity: 1;
}
.tooltip-text[data-v-59d03bbb]::after {
  content: '';
  position: absolute;
  bottom: -8px; /* Position the arrow just below the tooltip */
  left: 50%;
  transform: translateX(-50%); /* Center it horizontally */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.7); /* The arrow's color matches the tooltip background */
}
.tooltip-removeImage[data-v-59d03bbb] {
  visibility: hidden;
  width: 120px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  bottom: 100%; /* Place it just above the button */
  right: 10%; /* Align to the right edge of the button */
  transform: translateY(-8px); /* Slightly above the button */
  opacity: 0;
  transition: opacity 0.3s;
}
.removeImage:hover .tooltip-removeImage[data-v-59d03bbb] {
  visibility: visible;
  opacity: 1;
}
.tooltip-removeImage[data-v-59d03bbb]::after {
  content: '';
  position: absolute;
  bottom: -8px; /* Position the arrow just below the tooltip */
  left: 50%;
  transform: translateX(-50%); /* Center it horizontally */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.7); /* The arrow's color matches the tooltip background */
}
.tooltip-file-upload-label[data-v-59d03bbb] {
  font-size: 14px;
  visibility: hidden;
  width: 120px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  bottom: 100%; /* Place it just above the button */
  right: 10%; /* Align to the right edge of the button */
  transform: translateY(-8px); /* Slightly above the button */
  opacity: 0;
  transition: opacity 0.3s;
}
.file-upload-label:hover .tooltip-file-upload-label[data-v-59d03bbb] {
  visibility: visible;
  opacity: 1;
}
.tooltip-file-upload-label[data-v-59d03bbb]::after {
  content: '';
  position: absolute;
  bottom: -8px; /* Position the arrow just below the tooltip */
  left: 50%;
  transform: translateX(-50%); /* Center it horizontally */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.7); /* The arrow's color matches the tooltip background */
}
.tooltip-removeParagraph[data-v-59d03bbb] {
  visibility: hidden;
  width: 120px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  top: 94%; /* Place it just above the button */
  right: 6%; /* Align to the right edge of the button */
  transform: translateY(-8px); /* Slightly above the button */
  opacity: 0;
  transition: opacity 0.3s;
}
.removeParagraph:hover .tooltip-removeParagraph[data-v-59d03bbb] {
  visibility: visible;
  opacity: 1;
}
.tooltip-removeParagraph[data-v-59d03bbb]::after {
  content: '';
  position: absolute;
  bottom: -8px; /* Position the arrow just below the tooltip */
  left: 50%;
  transform: translateX(-50%); /* Center it horizontally */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.7); /* The arrow's color matches the tooltip background */
}
@media (max-width: 820px) {
.CoverSection[data-v-59d03bbb] {
    padding: 40px 20px;
}
}
@media (max-width: 431px) {
.ShowIMGUpload[data-v-59d03bbb] {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Space between images */
}
.ShowIMG[data-v-59d03bbb] {
    width: 100%;
    height: 300px;
}
.file-upload-label[data-v-59d03bbb] {
    padding: 0 8px;
}
.file-upload-label svg[data-v-59d03bbb]{
    margin: 0;
}
.file-upload-label p[data-v-59d03bbb] {
    display: none;
}
}


/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/FromThreadContent.vue?vue&type=style&index=0&id=686ae105&scoped=true&lang=css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.FormSection[data-v-686ae105] {
  background: #ffffff;
  /* Background color */
  padding: 24px;
  /* Internal spacing 24px */
  margin: 24px 0;
  border-radius: 8px;
  border: 1px solid #D9D9D9;
  /* Border */
}
.FormSection[data-v-686ae105]>* {
  margin-bottom: 40px;
  /* Spacing between each element */
}
.ThreadSelec[data-v-686ae105] {
  display: flex;
  align-items: center;
  gap: 24px;
}
.Topic-input[data-v-686ae105],
.Content-input[data-v-686ae105] {
  padding: 10px;
  width: 100%;
  min-height: 50px;
  /* Minimum height */
  border-radius: 5px;
  border: none;
  /* Remove border */
  font-size: 24px;
  background-color: transparent;
  /* Make background transparent */
  outline: none;
  /* No border when focused */
}
.Content-input[data-v-686ae105] {
  font-size: 16px;
}
.Topic-input.Topic-has-content[data-v-686ae105],
.Content-input.Content-has-content[data-v-686ae105] {
  /* Add styles for when there is content */
}
.Content-input[data-v-686ae105] {
  resize: vertical;
  /* Allow vertical resizing */
  min-height: 100px;
  /* Minimum height for content */
}

/* Placeholder style for contenteditable elements */
.Topic-input[data-v-686ae105]:empty::before,
.Content-input[data-v-686ae105]:empty::before {
  content: attr(placeholder);
  color: #999;
  /* Color of placeholder */
}

/* Styles for paragraph containers */
.paragraph-container[data-v-686ae105] {
  /* Space between the paragraph and buttons */
  position: relative;
  /* Keep the container position relative for absolute positioning of the buttons */
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #D9D9D9;
  border-radius: 5px;
  background-color: #f9f9f9;
}
.HeadBox-Container[data-v-686ae105] {
  justify-content: space-between;
  display: flex;
  /* Use flexbox for layout */
}
.button-group[data-v-686ae105] {
  display: flex;
  /* Use flexbox for layout */
  gap: 10px;
  /* Space between the buttons */
  align-items: center;
  /* Vertically center the buttons */
}
.addIMG[data-v-686ae105] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  color: #000;
  cursor: pointer;
}
.addIMG[data-v-686ae105] :hover {}

/* Styles for delete button */
.delete-button[data-v-686ae105] {
  color: white;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.delete-button[data-v-686ae105]:hover {}





/* Vertical line style */
.vertical-line[data-v-686ae105] {
  position: absolute;
  top: 0;
  /* Align to the top of the paragraph */
  right: -10px;
  /* Position to the right of the paragraph */
  width: 2px;
  /* Width of the vertical line */
  height: calc(100% - 20px);
  /* Full height minus padding */
  background-color: #D9D9D9;
  /* Color of the vertical line */
}

/* Divider style */
.vertical-divider[data-v-686ae105] {
  height: 5px;
  /* Height of the divider */
  background-color: #ff0000;
  /* Color of the divider */
  margin: 10px 0;
  /* Space above and below the divider */
  height: 100%;
  /* Full width */
}
.image-preview[data-v-686ae105] {
  margin-top: 10px;
  /* Space above the image */
}
.image-preview img[data-v-686ae105] {
  max-width: 100%;
  /* Ensure image fits within the container */
  height: auto;
  /* Maintain aspect ratio */
}
.action-buttons-container[data-v-686ae105] {
  display: flex;
  justify-content: space-between;
  /* Push "เพิ่มย่อหน้า" to the left and the others to the right */
  align-items: center;
  /* Center align the buttons vertically */
  margin-top: 20px;
  /* Space above the button group */
}
.post-cancel-buttons[data-v-686ae105] {
  display: flex;
  gap: 10px;
  /* Space between the post and cancel buttons */
}
.cancel-button[data-v-686ae105] {
  font-size: 14px;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background-color: #ffffff;
  color: #656565;
  border: 1px solid #D9D9D9;
}
.cancel-button[data-v-686ae105]:hover {
  background-color: #D9D9D9;
}
.addParagraph[data-v-686ae105] {
  display: flex;
  color: #5D5FEF;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}
.addParagraph svg[data-v-686ae105] {
  fill: #5D5FEF;
}
.vertical-line[data-v-686ae105] {
  border-left: 1px solid #000;
  height: 24px;
  margin: 0 10px;
}
.tooltip[data-v-686ae105] {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext[data-v-686ae105] {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Positioning */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  /* Position above the button */
  left: 50%;
  margin-left: -60px;
  /* Center the tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext[data-v-686ae105] {
  visibility: visible;
  opacity: 1;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/PostsList2.vue?vue&type=style&index=0&id=733a161e&scoped=true&lang=css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.ThreadMenu[data-v-733a161e] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.custom-select[data-v-733a161e] {
  padding: 24px 24px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #fff;
  align-items: center;
  width: 100%;
}
.custom-select-right[data-v-733a161e] {
  gap: 16px;
  /* เว้นระยะห่างระหว่างกลุ่ม */
}
.custom-select-right-Top[data-v-733a161e] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Ensure content is vertically centered */
  margin-bottom: 20px;
  /* Add space at the bottom */
  flex-wrap: wrap;
  /* Allow elements to wrap on smaller screens */
  width: 100%;
}
.custom-select-right-Top p[data-v-733a161e] {
  font-size: 16px;
  color: #333;
  /* Adjust text color */
  margin: 0;
  /* Remove default margin for better spacing control */
}
.selected-threads[data-v-733a161e] {
  display: flex;
  flex-wrap: wrap;
  /* ทำให้ไอเทมสามารถแสดงผลหลายบรรทัด */
  gap: 8px;
  /* ระยะห่างระหว่างไอเทม */
  margin: 0;
  padding: 0;
  list-style: none;
}
.Selected-ThreadType[data-v-733a161e] {
  display: flex;
  align-items: center;
  gap: 4px;
  /* ระยะห่างระหว่างชื่อหมวดหมู่กับจำนวนกระทู้ */
  font-size: 14px;
  /* ปรับขนาดฟอนต์ */
  color: #333333;
  background-color: #f9f9f9;
  /* เพิ่มพื้นหลังเพื่อเน้น */
  padding: 4px 8px;
  border-radius: 4px;
}
.Selected-ThreadType p[data-v-733a161e] {
  margin: 0;
  /* Remove margin to ensure consistent spacing */
}
.selected-threads>li[data-v-733a161e]:last-child {
  margin-bottom: 0;
  /* Remove bottom margin for the last item */
}
.ThreadMenu-Button[data-v-733a161e] {
  display: flex;
  gap: 12px;
  /* ระยะห่างระหว่างปุ่ม */
  justify-content: space-between;
  /* ตำแหน่งอยู่ด้านขวา */
}
.thread-type[data-v-733a161e] {
  font-size: 14px;
  color: #656565;
  margin-top: 4px;
}
.contant-ul[data-v-733a161e] {
  padding: 0;
}
.post-item[data-v-733a161e] {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 16px 24px;
  background-color: #ffffff;
  position: relative;
  cursor: pointer;
}
.post-item[data-v-733a161e]:hover {
  border: 1px solid #5d5fef;
}
.post-content[data-v-733a161e] {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.post-index[data-v-733a161e] {
  font-size: 16px;
  color: #656565;
}
.post-image-wrapper[data-v-733a161e] {
  margin-right: 10px;
}
.post-image[data-v-733a161e] {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.no-image[data-v-733a161e] {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background-color: #ffa233;
}
.no-image p[data-v-733a161e] {
  font-size: 20px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-title-author[data-v-733a161e] {
  display: flex;
  justify-content: space-between;
  /* ซ้าย-ขวาแยกกัน */
  align-items: flex-start;
  width: 100%;
}
.post-title-author-left[data-v-733a161e] {
  display: flex;
  flex-direction: column;
  /* เรียง title และ author ลงล่าง */
  gap: 4px;
}
.post-title[data-v-733a161e] {
  font-weight: 500;
  color: #333333;
  margin: 0;
}
.post-author[data-v-733a161e] {
  color: #656565;
  font-size: 16px;
  margin: 0;
}
.post-date[data-v-733a161e] {
  font-size: 16px;
  color: #000000;
  white-space: nowrap;
  margin-left: 16px;
  /* ถ้าต้องการเพิ่มระยะห่างกับด้านซ้าย */
  align-self: flex-start;
  /* จัดตำแหน่งบนเหมือนกัน */
}
.thread-group[data-v-733a161e] {
  margin-bottom: 32px;
  list-style: none;
}
.thread-group ul[data-v-733a161e] {
  padding: 0;
}
.thread-header[data-v-733a161e] {
  font-size: 18px;
  font-weight: bold;
  list-style: none;
  display: flex;
  align-items: center;
  /* Center the items vertically */
  gap: 8px;
}
.Selected-ThreadType[data-v-733a161e] {
  list-style: none;
  display: flex;
  align-items: center;
  /* Center the items vertically */
  gap: 8px;
}
.pagination[data-v-733a161e] {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}
.pagination[data-v-733a161e] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.pagination button[data-v-733a161e] {
  background-color: #5d5fef;
  color: #ffffff;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.pagination button[data-v-733a161e]:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
.history-button[data-v-733a161e] {
  color: rgba(101, 101, 101, 0.5);
  /* Set text color with 50% opacity */
  cursor: pointer;
}
.AllThread-button[data-v-733a161e] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  /* Set underline thickness */
  text-decoration-color: #5D5FEF;
  /* Underline color */
  padding: 0 16px 0 0;
  /* Set padding */
  cursor: pointer;
}

/* ซ่อน .post-author-mobile บน desktop */
.post-author-mobile[data-v-733a161e] {
  display: none;
}
@media (max-width: 820px) {
.CheckBox-ThreadList[data-v-733a161e] {
    gap: 24px !important;
}
.custom-select[data-v-733a161e] {
    width: 100%;
    /* ให้ขยายเต็มความกว้างของคอนเทนเนอร์ */
    box-sizing: border-box;
    /* ให้รวม padding และ border ในการคำนวณความกว้าง */
}
}
@media (max-width: 768px) {
.post-content[data-v-733a161e] {
    display: flex;
    flex-direction: column;
    /* เรียงแนวตั้ง */
    align-items: flex-start;
    /* ชิดซ้าย */
    gap: 10px;
    /* ระยะห่างระหว่าง post-index และ no-image */
}
.post-title-author-left[data-v-733a161e] {
    display: flex;

    gap: 4px;
}
.post-item[data-v-733a161e] {
    flex-direction: column;
    /* แสดงเป็นคอลัมน์เมื่อหน้าจอเล็กลง */
}
.post-title-author[data-v-733a161e] {
    flex-direction: column;
    /* เรียง title และ author ลงล่าง */
    align-items: flex-start;
    margin-top: 8px;
    /* เพิ่มระยะห่างจากส่วนบน */
    order: 1;
    /* ย้าย post-title-author ลงมาด้านล่าง */
}
.post-date[data-v-733a161e] {
    margin-left: 0;
    /* ย้ายวันที่ไปที่ด้านล่าง */
    margin-top: 8px;
    /* เพิ่มระยะห่างระหว่างวันที่กับ content */
    color: #656565;
}

  /* เพิ่มการจัดการให้ .post-index และ .no-image อยู่แถวเดียวกัน */
.post-index[data-v-733a161e],
  .no-image[data-v-733a161e] {
    display: inline-flex;
    /* ทำให้ทั้งสองอยู่ในแถวเดียวกัน */
    align-items: center;
    /* จัดให้อยู่ตรงกลางในแนวตั้ง */
}
.no-image[data-v-733a161e] {
    height: 40px;
    width: 40px;
    margin: 0;
}
.post-author[data-v-733a161e] {
    display: none;
    /* ซ่อนที่อยู่ใน .post-title-author-left บน mobile */
}
.post-author-mobile[data-v-733a161e] {
    display: inline-block;
    margin-left: 16px;
    font-size: 16px;
    color: #000000;
    vertical-align: middle;
}
}
@media (max-width: 480px) {
.post-title[data-v-733a161e] {
    font-size: 18px;
    /* ปรับขนาดฟอนต์ title สำหรับหน้าจอมือถือ */
}
.post-author[data-v-733a161e] {
    font-size: 14px;
    /* ปรับขนาดฟอนต์ author สำหรับหน้าจอมือถือ */
}
.post-date[data-v-733a161e] {
    font-size: 14px;
    /* ปรับขนาดฟอนต์วันที่สำหรับหน้าจอมือถือ */
}
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/NewsCommunity-ThreadMenu.vue?vue&type=style&index=0&id=4495a4ba&scoped=true&lang=css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.contentWebboard[data-v-4495a4ba] {
  padding: 40px 70px;
}
.head[data-v-4495a4ba] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.CheckBox-ThreadList[data-v-4495a4ba] {
  display: flex;
  justify-content: space-between;
  gap: 56px;
}
.Thread-box[data-v-4495a4ba] {
  color: #000000;
  margin: 4px 0;
}
.topic[data-v-4495a4ba] {
  letter-spacing: 2px;
}
.Thread-box h1[data-v-4495a4ba] {
  margin: 0;
}
.dropdown[data-v-4495a4ba] {
  text-align: right;
}
@media (max-width: 820px) {
.contentWebboard[data-v-4495a4ba] {
  padding: 40px 20px;
}
.CheckBox-ThreadList[data-v-4495a4ba] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/PostListProfile.vue?vue&type=style&index=0&id=0134aa2a&scoped=true&lang=css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.contant-ul[data-v-0134aa2a] {
  padding: 0;
}
.post-item[data-v-0134aa2a] {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 16px 24px;
  background-color: #ffffff;
  position: relative;
  cursor: pointer;
}
.post-item[data-v-0134aa2a]:hover {
  border: 1px solid #5d5fef;
}
.post-content[data-v-0134aa2a] {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.post-index[data-v-0134aa2a] {
  font-size: 16px;
  color: #656565;
}
.post-image-wrapper[data-v-0134aa2a] {
  margin-right: 10px;
}
.post-image[data-v-0134aa2a] {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.no-image[data-v-0134aa2a] {
  border-radius: 50%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background-color: #ffa233;
}
.no-image p[data-v-0134aa2a] {
  font-size: 20px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-title-author[data-v-0134aa2a] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.post-title[data-v-0134aa2a] {
  font-weight: 500;
  color: #333333;
  margin: 0;
}
.post-author[data-v-0134aa2a] {
  color: #656565;
  font-size: 16px;
  margin: 0;
}
.post-date[data-v-0134aa2a] {
  position: absolute;
  right: 24px;
  top: 16px;
  font-size: 16px;
  color: #000000;
}
.dropdown-menu[data-v-0134aa2a] {
  display: flex;
  gap: 8px;
}
.dropdown-menu svg[data-v-0134aa2a] {
  width: 24px;
  height: 24px;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ProfileSetting.vue?vue&type=style&index=0&id=cad2c1d2&scoped=true&lang=css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

template[data-v-cad2c1d2] {
    display: flex;
    flex-direction: column;
}
.contentWebboard[data-v-cad2c1d2] {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-sizing: border-box;
}
.CheckBox-ThreadList[data-v-cad2c1d2] {
}
.divider[data-v-cad2c1d2] {
    width: 100%;
    border: none;
    height: 1px;
    background-color: #ddd;
    margin: 10px 0;
}
.post-container[data-v-cad2c1d2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.post-container-input[data-v-cad2c1d2] {
    width: 100%;
    gap: 8px;
}
.FisrtLast-Name[data-v-cad2c1d2] {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}
.username-input[data-v-cad2c1d2] {
  box-sizing: border-box;

  /* Auto layout */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 16px;
  gap: 10px;

  width: 100%;
  height: 44px; /* สามารถปรับเป็น auto ได้หากต้องการให้ปรับตามเนื้อหา */

  background: #f8f8f8;
  border: 1px solid #d9d9d9;
  border-radius: 8px;

  /* Inside auto layout */
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 1;
  
  /* Text styles for user name */
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  
  color: rgba(7, 17, 42, 0.7);
}
.username-input[data-v-cad2c1d2]:focus {
  outline: none;
  border-color: #5D5FEF;
  background: #ffffff;
}


/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/Profile.vue?vue&type=style&index=0&id=ced23842&scoped=true&lang=css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.contentWebboard[data-v-ced23842] {
    padding: 40px 70px;
    display: flex;

    gap: 24px;
}
.head[data-v-ced23842] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%; /* ให้ header ขยายเต็มที่ */
}
.CheckBox-ThreadList[data-v-ced23842] {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    width: 30%; /* ใช้ความกว้างเต็ม */
    height: 100%; /* ความสูงจะปรับตามเนื้อหาภายใน */
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
}

  /* ปรับความกว้างของ CheckBox-ThreadList เมื่อหน้าจอเล็ก */
@media (max-width: 768px) {
.CheckBox-ThreadList[data-v-ced23842] {
      width: 100%; /* ใช้ความกว้างเต็มที่บนหน้าจอเล็ก */
      padding: 10px;
}
.contentWebboard[data-v-ced23842] {
      padding: 20px;
}
}
.Thread-box[data-v-ced23842] {
    color: #000000;
    margin: 4px 0;
}
.topic[data-v-ced23842] {
    letter-spacing: 2px;
}
.Thread-box h1[data-v-ced23842] {
    margin: 0;
}
.dropdown[data-v-ced23842] {
    text-align: right;
}
.switch-view[data-v-ced23842] {
    width: auto;
    height: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.radio-container[data-v-ced23842] {
    display: flex;
    align-items: center;
    width: 100%;
}
.radio-container svg[data-v-ced23842] {
    width: 24px;
    height: 24px;
    fill: #656565;
    transition: fill 0.3s ease-in-out;
    margin-right: 8px;
}
.radio-label[data-v-ced23842] {
    flex-grow: 1;
    text-align: left;
    padding: 16px;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Prompt', sans-serif;
    color: #656565;
    background: #FFFFFF;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.radio-container:hover svg[data-v-ced23842],
  .radio-label[data-v-ced23842]:hover {
    color: #5D5FEF;
    fill: #5D5FEF;
}
.radio-label input[type="radio"][data-v-ced23842] {
    display: none;
}
.radio-container.selected[data-v-ced23842] {
  color: #5D5FEF;
  background: rgba(93, 95, 239, 0.1);
  font-weight: 600;
}
.divider[data-v-ced23842] {
    width: 100%;
    border: none;
    height: 1px;
    background-color: #ddd;
    margin: 10px 0;
}
.post-container[data-v-ced23842] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 24px;
}

  /* รูปโปรไฟล์ */
.post-image-wrapper[data-v-ced23842] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #ddd;
}
.post-image[data-v-ced23842] {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

  /* ถ้าไม่มีรูป */
.no-image[data-v-ced23842] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    background-color: #ccc;
    border-radius: 50%;
    font-size: 36px;
    font-weight: bold;
    color: white;
}
.Username-Email[data-v-ced23842] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.post-username[data-v-ced23842] {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    width: 100%;
    color: #000000;
    margin: 0;
}
.post-email[data-v-ced23842] {
    color: #656565;
    margin: 0;
}
.Content-Right[data-v-ced23842] {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    gap: 20px;
}

  /* Responsive layout for smaller screens */
@media (max-width: 480px) {
.contentWebboard[data-v-ced23842] {
      padding: 20px;
      flex-direction: column;
}
.CheckBox-ThreadList[data-v-ced23842] {
      width: 100%;
}
.post-image-wrapper[data-v-ced23842] {
      width: 80px;
      height: 80px;
}
.post-username[data-v-ced23842] {
      font-size: 20px;
}
.profile-view[data-v-ced23842], .posts-view[data-v-ced23842] {
      padding: 15px;
}
}


/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/Edit-FromThreadTopic.vue?vue&type=style&index=0&id=7541e988&scoped=true&lang=css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.CoverSection[data-v-7541e988] {
  align-items: center;
  padding: 60px 108px;
  /* Padding inside the Navbar */
  gap: 24px;
  /* ระยะห่างระหว่างองค์ประกอบใน CoverSection */
}
.TopSection[data-v-7541e988],
.ContentSection[data-v-7541e988] {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  margin-bottom: 24px;
  /* ระยะห่างด้านล่างของ TopSection */
}

/* เลือกกระทู้ */
.select-Thread[data-v-7541e988],
.ThreadName[data-v-7541e988] {
  display: flex;
  flex-direction: column;
  /* Arrange items vertically */
  margin-bottom: 16px;
  /* Spacing between sections */
}
.select-Thread[data-v-7541e988] {
  position: relative;
}
.custom-select[data-v-7541e988] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
  background-color: #ffffff;
}
.selected-option[data-v-7541e988] {
  flex: 1;
  /* Take available space */
  color: #333;
  /* Default text color */
}
.caret-down[data-v-7541e988] {
  width: 16px;
  height: 16px;
}
.options[data-v-7541e988] {
  position: absolute;
  top: 100%;
  /* Place below the custom select */
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  max-height: 200px;
  /* Limit dropdown height */
  overflow-y: auto;
  /* Enable scrolling */
  z-index: 100;
  /* Ensure it is above other elements */
  list-style: none;
  border-radius: 8px;

  padding: 0;
}
.option[data-v-7541e988] {
  padding: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.option[data-v-7541e988]:hover {
  background-color: #f5f7fa;
  color: #5d5fef;
}
.ThreadName[data-v-7541e988] {
  margin-top: 16px;
  /* Spacing above Thread Name section */
}
.ThreadName-Input[data-v-7541e988] {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 10px;
  font-size: 16px;
}
.ThreadName-Input[data-v-7541e988]:focus {
  border-color: #5d5fef;
  box-shadow: 0 0 5px rgba(93, 95, 239, 0.5);
  outline: none;
}
.topic-p[data-v-7541e988] {
  font-size: 16px;
  /* Label font size */
  color: #333;
  /* Label color */

  width: 200px;
}
.signup-form[data-v-7541e988] {
  width: 300px;
  margin: 0 auto;
}
button[data-v-7541e988] {
  margin-top: 10px;
}
.ContentTop[data-v-7541e988] {
  display: flex;
  text-align: center;
  justify-content: space-between;
  padding: 0 0 24px 0;
}
.AddParagraph[data-v-7541e988] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.AddParagraph p[data-v-7541e988] {
  font-size: 1rem;
}
.AddParagraph button[data-v-7541e988] {
  background-color: #ffffff;
  color: #5d5fef;
  /* Color for the icon inside the button */
  border: 1px solid #5d5fef;
  /* Border color */
  border-radius: 50%;
  /* Circular shape */
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}
.AddParagraph button[data-v-7541e988]:hover {
  background-color: #5d5fef;
  /* Background on hover */
  color: #ffffff;
  /* Icon color on hover */
  border-color: #5d5fef;
}
.AddParagraph button svg[data-v-7541e988] {
  fill: currentColor;
  /* Inherit the button color */
  width: 24px;
  /* Adjust as needed */
  height: 24px;
}
.ContentMid[data-v-7541e988] {
  display: flex;
  gap: 44px;
}
.ShowParagraph-Button button[data-v-7541e988] {
  width: 200px;
  height: 44px;
  font-size: 16px;
  text-align: left;
  /* Align text to the left */
  display: flex;
  align-items: center;
  /* Center vertically */
  justify-content: flex-start;
  /* Align items to the start (left) */
  border-radius: 8px;
  /* Circular shape */
  background-color: rgba(93,
      95,
      239,
      0.2);
  /* Background color at 20% opacity */
  color: #5d5fef;
  /* Text/icon color */
  border: 1px solid #5d5fef;
  /* Border color */
  padding: 0 12px;
  /* Add padding for spacing */
  transition: background-color 0.3s ease, color 0.3s ease;
  /* Smooth transition */
}
.TypeContent[data-v-7541e988] {
  width: 100%;
  /* Expand TypeContent to full width of container */
  padding: 0 0 44px 0;
}
.TypeContent-input[data-v-7541e988] {
  width: 100%;
  /* Expand input area to full width */
  padding: 0 0 4px 0;
}
.TypeContent-input textarea[data-v-7541e988] {
  width: 100%;
  /* Ensure the textarea inside also takes full width */
  padding: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 16px;
  box-sizing: border-box;
  resize: vertical;
  /* Allow vertical resizing */
  min-height: 100px;
  /* Minimum height for better UX */
}
.TypeContent-input textarea[data-v-7541e988]:focus {
  border-color: #5d5fef;
  box-shadow: 0 0 5px rgba(93, 95, 239, 0.5);
  outline: none;
}
.TypeContent-lower[data-v-7541e988] {
  display: flex;
  justify-content: right;
  /* Center items horizontally */
  gap: 16px;
  /* Space between items */
}
.UploadIMG[data-v-7541e988] {
  display: flex;
  align-items: center;
  /* Center items vertically */
  gap: 16px;
  /* Space between items */
}
.removeParagraph[data-v-7541e988] {
  background-color: #ffffff;
  color: #000000;
  /* Color for the icon inside the button */
  border: 1px solid #d9d9d9;
  /* Border color */
  border-radius: 8px;
  /* Circular shape */
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}
.removeParagraph[data-v-7541e988]:focus {
  /* Corrected this selector */
  outline: none;
  /* Removes the default outline */
  box-shadow: 0 0 0 3px rgba(93, 95, 239, 0.5);
  /* Custom focus ring */
}
.removeParagraph svg[data-v-7541e988] {
  fill: currentColor;
  /* Inherit the button color */
  width: 24px;
  /* Adjust as needed */
  height: 24px;
}
.file-upload[data-v-7541e988] {
  position: relative;
  display: inline-block;
}
input[type="file"][data-v-7541e988] {
  display: none;
  /* Hide the default file input */
}
.file-upload-label[data-v-7541e988] {
  background-color: #ffffff;
  color: #000000;
  /* Color for the icon inside the button */
  border: 1px solid #d9d9d9;
  /* Border color */
  height: 40px;
  border-radius: 8px;
  /* Slightly rounded corners */
  padding: 0px 16px;
  /* Padding for better spacing */
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}
.file-upload-label svg[data-v-7541e988] {
  margin-right: 8px;
  /* Space between the icon and text */
  fill: currentColor;
  /* Inherit the label text color */
  width: 24px;
  /* Adjust as needed */
  height: 24px;
}
.ShowIMGUpload[data-v-7541e988] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2 columns */
  gap: 16px;
  /* Space between images */
  margin: 10px 0;
  /* Space above and below images */
}
.imageContainer[data-v-7541e988] {
  position: relative;
  /* Make this position relative to position child elements absolutely */
}
.ShowIMG[data-v-7541e988] {
  width: 100%;
  height: 500px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
}
.removeImage[data-v-7541e988] {
  position: absolute;
  /* Position the button absolutely */
  top: 8px;
  /* Adjust this value for vertical positioning */
  right: 8px;
  /* Adjust this value for horizontal positioning */
  background-color: rgba(0, 0, 0, 0.6);
  /* Slightly transparent background */
  color: #ffffff;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.removeImage[data-v-7541e988]:hover {
  background-color: rgba(0, 0, 0, 0.8);
  /* Darken on hover */
}
.paragraph-divider[data-v-7541e988] {
  border-top: 2px solid #ff0000;
  /* เส้นคั่นแนวนอนสีแดง */
  margin: 10px 0;
  /* ระยะห่างด้านบนและล่าง */
}
.SubmitCancel-Button[data-v-7541e988] {
  display: flex;
  gap: 16px;
}
.submitButton[data-v-7541e988] {
  width: 100%;
  background: #5d5fef;
  padding: 8px 16px;
  border-radius: 8px;
  color: #fff;
  border: none;
  /* Removes default border */
  font-size: 16px;
  /* Adjust text size */
  cursor: pointer;
  /* Changes cursor to pointer on hover */
  transition: background 0.2s ease;
  /* Smooth background color transition */
  text-align: center;
  display: flex;
  /* Use flexbox for layout */
  align-items: center;
  /* Center items vertically */
  justify-content: center;
  /* Center items horizontally */
}
.submitButton[data-v-7541e988]:hover {
  background: #4a4ae6;
}
.cancelButton[data-v-7541e988] {
  width: 100%;
  background: #ffffff;
  padding: 8px 16px;
  color: #656565;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 16px;
  /* Adjust text size */
  cursor: pointer;
  /* Changes cursor to pointer on hover */
  transition: background 0.2s ease;
  /* Smooth background color transition */
  text-align: center;
  display: flex;
  /* Use flexbox for layout */
  align-items: center;
  /* Center items vertically */
  justify-content: center;
  /* Center items horizontally */
}
.cancelButton[data-v-7541e988]:hover {}
.tooltip-text[data-v-7541e988] {
  visibility: hidden;
  width: 120px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  top: 67%;
  /* Place it just above the button */
  right: 5%;
  /* Align to the right edge of the button */
  transform: translateY(-8px);
  /* Slightly above the button */
  opacity: 0;
  transition: opacity 0.3s;
}
.add-button:hover .tooltip-text[data-v-7541e988] {
  visibility: visible;
  opacity: 1;
}
.tooltip-text[data-v-7541e988]::after {
  content: "";
  position: absolute;
  bottom: -8px;
  /* Position the arrow just below the tooltip */
  left: 50%;
  transform: translateX(-50%);
  /* Center it horizontally */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.7);
  /* The arrow's color matches the tooltip background */
}
.tooltip-removeImage[data-v-7541e988] {
  visibility: hidden;
  width: 120px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  bottom: 100%;
  /* Place it just above the button */
  right: 10%;
  /* Align to the right edge of the button */
  transform: translateY(-8px);
  /* Slightly above the button */
  opacity: 0;
  transition: opacity 0.3s;
}
.removeImage:hover .tooltip-removeImage[data-v-7541e988] {
  visibility: visible;
  opacity: 1;
}
.tooltip-removeImage[data-v-7541e988]::after {
  content: "";
  position: absolute;
  bottom: -8px;
  /* Position the arrow just below the tooltip */
  left: 50%;
  transform: translateX(-50%);
  /* Center it horizontally */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.7);
  /* The arrow's color matches the tooltip background */
}
.tooltip-file-upload-label[data-v-7541e988] {
  font-size: 14px;
  visibility: hidden;
  width: 120px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  bottom: 100%;
  /* Place it just above the button */
  right: 10%;
  /* Align to the right edge of the button */
  transform: translateY(-8px);
  /* Slightly above the button */
  opacity: 0;
  transition: opacity 0.3s;
}
.file-upload-label:hover .tooltip-file-upload-label[data-v-7541e988] {
  visibility: visible;
  opacity: 1;
}
.tooltip-file-upload-label[data-v-7541e988]::after {
  content: "";
  position: absolute;
  bottom: -8px;
  /* Position the arrow just below the tooltip */
  left: 50%;
  transform: translateX(-50%);
  /* Center it horizontally */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.7);
  /* The arrow's color matches the tooltip background */
}
.tooltip-removeParagraph[data-v-7541e988] {
  visibility: hidden;
  width: 120px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  top: 94%;
  /* Place it just above the button */
  right: 6%;
  /* Align to the right edge of the button */
  transform: translateY(-8px);
  /* Slightly above the button */
  opacity: 0;
  transition: opacity 0.3s;
}
.removeParagraph:hover .tooltip-removeParagraph[data-v-7541e988] {
  visibility: visible;
  opacity: 1;
}
.tooltip-removeParagraph[data-v-7541e988]::after {
  content: "";
  position: absolute;
  bottom: -8px;
  /* Position the arrow just below the tooltip */
  left: 50%;
  transform: translateX(-50%);
  /* Center it horizontally */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.7);
  /* The arrow's color matches the tooltip background */
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/CheckBox-RuelsType.vue?vue&type=style&index=0&id=1d900a49&scoped=true&lang=css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.select-Thread[data-v-1d900a49] {
  position: relative;
  width: 100%;
}
.options[data-v-1d900a49] {
  padding: 8px 16px;
  margin: 0;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  background-color: #fff;
  list-style: none;
  text-align: left;
  width: 100%;
}
.option[data-v-1d900a49] {
  display: flex;
  padding: 8px 0px;
  align-items: center;
}
.option label[data-v-1d900a49] {
  cursor: pointer;
}
.option input[type="checkbox"][data-v-1d900a49] {
  margin-right: 8px;
}

/* Mobile Drawer */
.mobile-drawer[data-v-1d900a49] {
  display: none;
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  transition: right 0.3s ease;
  z-index: 9999;
}
.mobile-drawer.open[data-v-1d900a49] {
  right: 0;
}
.drawer-header[data-v-1d900a49] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.close-btn[data-v-1d900a49] {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
.desktop-filter[data-v-1d900a49] {
  display: block;
}
.mobile-filter-toggle[data-v-1d900a49] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px; /* ระยะห่างระหว่างข้อความกับไอคอน */
  font-family: inherit; /* ใช้ฟอนต์ที่เว็บกำหนด */
  font-size: 16px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.filter-button-content[data-v-1d900a49] {
  display: flex;
  gap: 8px;
}
.filter-button-content p[data-v-1d900a49] {
  margin: 0;
  font-family: inherit;
  color: #5D5FEF;
}
.filter-content[data-v-1d900a49] {
  display: flex;
  gap: 8px;
  padding: 8px 8px 8px 0;
}
.filter-content p[data-v-1d900a49] {
  margin: 0;
  font-family: inherit;
  color: #5D5FEF;
  font-size: 18px;
  font-weight: 500;
}


/* Mobile View */
@media (max-width: 820px) {
.mobile-filter-toggle[data-v-1d900a49] {
    margin-bottom: 10px;
    padding: 8px 16px;
    margin: 0;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    background-color: #fff;
    color: #000;
    list-style: none;
    text-align: left;
    width: 100%;
}
.mobile-drawer[data-v-1d900a49] {
    display: block; /* แสดง Mobile Drawer เมื่อเปิด */
}
.desktop-filter[data-v-1d900a49] {
    display: none; /* ซ่อนตัวเลือกสำหรับ Desktop */
}
.options[data-v-1d900a49] {
    border: none;
}
.document-list[data-v-1d900a49] {
    grid-template-columns: 1fr; /* 1 คอลัมน์ สำหรับมือถือ */
}
}

/* Desktop View - ซ่อน Mobile Filter และ Mobile Drawer */
@media (min-width: 821px) {
.mobile-filter-toggle[data-v-1d900a49] {
    display: none; /* ซ่อนปุ่มตัวกรองมือถือ */
}
.mobile-drawer[data-v-1d900a49] {
    display: none; /* ซ่อน Mobile Drawer */
}
.desktop-filter[data-v-1d900a49] {
    display: block; /* แสดงตัวเลือกสำหรับ Desktop */
}
.options[data-v-1d900a49] {
    border: 1px solid #D9D9D9; /* ตัวเลือกที่แสดงสำหรับ Desktop */
}
.document-list[data-v-1d900a49] {
    grid-template-columns: repeat(3, 1fr); /* 3 คอลัมน์ สำหรับ Desktop */
}
}


/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/RulesList.vue?vue&type=style&index=0&id=a1f22096&scoped=true&lang=css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.custom-select[data-v-a1f22096] {
  padding: 24px 24px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #fff;
  align-items: center;
  width: 100%;
}
.custom-select-right[data-v-a1f22096] {
  gap: 16px;
  /* เว้นระยะห่างระหว่างกลุ่ม */
}
.RulesData-list[data-v-a1f22096] {
  margin: 0;
  padding: 0;
}
.RulesData-item[data-v-a1f22096] {
  list-style: none;
}
.RulesData-item svg[data-v-a1f22096] {
  width: 20px;
  /* ระบุหน่วย px */
  height: 20px;
  /* ระบุหน่วย px */
}
.RulesTypeName[data-v-a1f22096] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.Text-RulesTypeName[data-v-a1f22096] {
  margin: 16px 0;
  font-size: 18px;
}
.Gruop-PostItem[data-v-a1f22096] {
  display: flex;
  align-items: stretch;
  /* ให้ลูกของ flex container ขยายเต็มความสูง */
  margin-bottom: 8px;
  position: relative;
  cursor: pointer;
}
.Text-RulesNameAbb[data-v-a1f22096] {
  font-size: 18px;
  font-weight: 600;
}
.PostItem-NameAbbr[data-v-a1f22096] {
  min-width: 180px;
  max-width: 180px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #7B81FE;
  color: #fff;
  cursor: pointer;
}

/* SVG as background */
.svg-background[data-v-a1f22096] {
  position: absolute;
  top: 0;
  left: -500px;
  width: 100% !important;
  height: 100% !important;
  fill: rgba(255, 255, 255, 0.1); /* semi-transparent white */
  z-index: 0;
}

/* Ensure text is above SVG */
.Text-RulesNameAbb[data-v-a1f22096] {
  position: relative;
  z-index: 1;
}
.PostItem-NameFull[data-v-a1f22096] {
  width: 100%;
  min-height: 180px;
  text-align: start;
  margin-bottom: 16px;
  padding: 16px 16px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #ffffff;
  cursor: pointer;
}
.Text-RulesNameFull[data-v-a1f22096] {
  font-size: 18px;
  color: #5D5FEF;
}
.Date-Origin[data-v-a1f22096] {
  display: flex;
  gap: 16px;
  padding: 0px;
}
.origin-link[data-v-a1f22096] {
  font-weight: 300;
  /* ตัวหนา */
  text-decoration: underline;
  /* เส้นใต้ */
  color: inherit;
  /* ใช้สีเดียวกับสีของข้อความที่อยู่รอบๆ */
  cursor: pointer;
  /* เปลี่ยน cursor เป็น pointer เมื่อ hover */
}
.origin-link[data-v-a1f22096]:hover {
  color: blue;
  /* เปลี่ยนสีเป็นสีน้ำเงินเมื่อ hover (สามารถปรับได้) */
}


/* Media Query สำหรับหน้าจอขนาดเล็ก */
@media (max-width: 1024px) {
.Date-Origin[data-v-a1f22096] {
    flex-direction: column;
    /* จัดเรียงเนื้อหาในแนวตั้ง */
    gap: 8px;
    /* ลดช่องว่างระหว่างบรรทัดถ้าต้องการ */
}
.svg-background[data-v-a1f22096] {
    top: 0;
    left: -250px;
    width: 100% !important;
    height: 100% !important;
}
}
@media (max-width: 820px) {
.custom-select[data-v-a1f22096] {
    box-sizing: border-box;
}
.Gruop-PostItem[data-v-a1f22096] {
    display: flex;
    flex-direction: column; /* เปลี่ยนให้เรียงเป็นแนวตั้ง */
}
.PostItem-NameAbbr[data-v-a1f22096] {
    min-width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}
.PostItem-NameFull[data-v-a1f22096] {
    width: 100%;
    box-sizing: border-box;
}
.svg-background[data-v-a1f22096] {
    top: 0;
    left: -80px;
    width: 50% !important;
    height: 50% !important;
}
}
@media (max-width: 431px) {
.svg-background[data-v-a1f22096] {
    top: -30px;
    left: 0;
    width: 50% !important;
    height: 50% !important;
}
}



/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/MaritimeRules.vue?vue&type=style&index=0&id=2ed30716&scoped=true&lang=css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.contentWebboard[data-v-2ed30716] {
  padding: 40px 70px;
}
.head[data-v-2ed30716] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.CheckBox-ThreadList[data-v-2ed30716] {
  display: flex;
  justify-content: space-between;
  gap: 56px;
}
.Thread-box[data-v-2ed30716] {
  color: #000000;
  margin: 4px 0;
}
.topic[data-v-2ed30716] {
  letter-spacing: 2px;
}
.Thread-box h1[data-v-2ed30716] {
  margin: 0;
}
.dropdown[data-v-2ed30716] {
  text-align: right;
}
@media (max-width: 820px) {
.contentWebboard[data-v-2ed30716] {
    padding: 40px 20px;
}
.CheckBox-ThreadList[data-v-2ed30716] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/CheckBox-AgencyType.vue?vue&type=style&index=0&id=6a49c22e&scoped=true&lang=css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.select-Thread[data-v-6a49c22e] {
  position: relative;
  width: 100%;
}
.options[data-v-6a49c22e] {
  padding: 8px 16px;
  margin: 0;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  background-color: #fff;
  list-style: none;
  text-align: left;
  width: 100%;
}
.option[data-v-6a49c22e] {
  display: flex;
  padding: 8px 0px;
  align-items: center;
}
.option label[data-v-6a49c22e] {
  cursor: pointer;
}
.option input[type="checkbox"][data-v-6a49c22e] {
  margin-right: 8px;
}

/* Mobile Drawer */
.mobile-drawer[data-v-6a49c22e] {
  display: none;
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  transition: right 0.3s ease;
  z-index: 9999;
}
.mobile-drawer.open[data-v-6a49c22e] {
  right: 0;
}
.drawer-header[data-v-6a49c22e] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.close-btn[data-v-6a49c22e] {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
.desktop-filter[data-v-6a49c22e] {
  display: block;
}
.mobile-filter-toggle[data-v-6a49c22e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px; /* ระยะห่างระหว่างข้อความกับไอคอน */
  font-family: inherit; /* ใช้ฟอนต์ที่เว็บกำหนด */
  font-size: 16px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.filter-button-content[data-v-6a49c22e] {
  display: flex;
  gap: 8px;
}
.filter-button-content p[data-v-6a49c22e] {
  margin: 0;
  font-family: inherit;
  color: #5D5FEF;
}
.filter-content[data-v-6a49c22e] {
  display: flex;
  gap: 8px;
  padding: 8px 8px 8px 0;
}
.filter-content p[data-v-6a49c22e] {
  margin: 0;
  font-family: inherit;
  color: #5D5FEF;
  font-size: 18px;
  font-weight: 500;
}


/* Mobile View */
@media (max-width: 820px) {
.mobile-filter-toggle[data-v-6a49c22e] {
    margin-bottom: 10px;
    padding: 8px 16px;
    margin: 0;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    background-color: #fff;
    color: #000;
    list-style: none;
    text-align: left;
    width: 100%;
}
.mobile-drawer[data-v-6a49c22e] {
    display: block; /* แสดง Mobile Drawer เมื่อเปิด */
}
.desktop-filter[data-v-6a49c22e] {
    display: none; /* ซ่อนตัวเลือกสำหรับ Desktop */
}
.options[data-v-6a49c22e] {
    border: none;
    width: 100%;
    box-sizing: border-box;
}
.document-list[data-v-6a49c22e] {
    grid-template-columns: 1fr; /* 1 คอลัมน์ สำหรับมือถือ */
}
}

/* Desktop View - ซ่อน Mobile Filter และ Mobile Drawer */
@media (min-width: 821px) {
.mobile-filter-toggle[data-v-6a49c22e] {
    display: none; /* ซ่อนปุ่มตัวกรองมือถือ */
}
.mobile-drawer[data-v-6a49c22e] {
    display: none; /* ซ่อน Mobile Drawer */
}
.desktop-filter[data-v-6a49c22e] {
    display: block; /* แสดงตัวเลือกสำหรับ Desktop */
}
.options[data-v-6a49c22e] {
    border: 1px solid #D9D9D9; /* ตัวเลือกที่แสดงสำหรับ Desktop */
}
.document-list[data-v-6a49c22e] {
    grid-template-columns: repeat(3, 1fr); /* 3 คอลัมน์ สำหรับ Desktop */
}
}


/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/AgencyList.vue?vue&type=style&index=0&id=2515f6f3&scoped=true&lang=css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.custom-select[data-v-2515f6f3] {
  padding: 24px 24px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #fff;
  align-items: center;
  width: 100%;
}
.custom-select-right[data-v-2515f6f3] {
  gap: 16px; /* เว้นระยะห่างระหว่างกลุ่ม */
}
.RulesData-list[data-v-2515f6f3] {
    margin: 0;
    padding: 0;
}
.RulesData-item[data-v-2515f6f3] {
    list-style: none;
}
.RulesData-item svg[data-v-2515f6f3] {
  width: 20px; /* ระบุหน่วย px */
  height: 20px; /* ระบุหน่วย px */
}
.RulesTypeName[data-v-2515f6f3] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.Text-RulesTypeName[data-v-2515f6f3] {
    margin: 16px 0;
    font-size: 18px;
}
.Gruop-PostItem[data-v-2515f6f3] {
  display: grid; /* ใช้ grid layout */
  grid-template-columns: repeat(2, 1fr); /* แสดง 2 คอลัมน์ */
  gap: 16px; /* ช่องว่างระหว่างคอลัมน์ */
  margin: 0; 
  padding: 0;
}
.Gruop-PostItem li[data-v-2515f6f3] {
  list-style: none; /* ลบจุด bullet */
}
.PostItem[data-v-2515f6f3] {
  flex: 1 1 300px; /* ขนาดขั้นต่ำ 300px ยืดหยุ่นได้ */
  min-height: 180px; /* กำหนดความสูงขั้นต่ำ */
  margin-bottom: 16px; /* ระยะห่างด้านล่าง */
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #ffffff;
  display: flex; /* ทำให้เนื้อหาภายในจัดการได้ง่าย */
  flex-direction: column; /* จัดเนื้อหาในแนวตั้ง */
}
.PostItem2[data-v-2515f6f3] {
  padding: 16px 16px;
}
.Text-AgencyName[data-v-2515f6f3] {
  font-size: 18px;
  color: #5D5FEF;
}
.PostItem-Topic[data-v-2515f6f3] {
  display: flex;
  gap: 16px;
}
.PostItem-Topic svg[data-v-2515f6f3]{
  width: 24px; /* ระบุหน่วย px */
  height: 24px; /* ระบุหน่วย px */
}
.PostItem-Detail[data-v-2515f6f3] {
  gap: 16px;
}
.Text-ItemTopic[data-v-2515f6f3] {
  margin: 0;
}
.Text-ItemDetail[data-v-2515f6f3] {
  margin-top: 4px;
  color: #656565;
}
.Seemore-Button[data-v-2515f6f3] {
  width: 100%;
  height: 40px;
  border-radius: 0 0 8px 8px;
  border: none;
  background: #5D5FEF;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
@media (max-width: 820px) {
.custom-select[data-v-2515f6f3] {
    box-sizing: border-box;
}
}
@media (max-width: 431px) {
.Gruop-PostItem[data-v-2515f6f3] {
    display: flex;
    flex-direction: column; /* เปลี่ยนให้เรียงเป็นแนวตั้ง */
}
.Text-AgencyName[data-v-2515f6f3] {
    margin: 0 0 16px 0;
}
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/MaritimeAgency.vue?vue&type=style&index=0&id=79860712&scoped=true&lang=css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.contentWebboard[data-v-79860712] {
  padding: 40px 70px;
}
.head[data-v-79860712] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.CheckBox-ThreadList[data-v-79860712] {
  display: flex;
  justify-content: space-between;
  gap: 56px;
}
.Thread-box[data-v-79860712] {
  color: #000000;
  margin: 4px 0;
}
.topic[data-v-79860712] {
  letter-spacing: 2px;
}
.Thread-box h1[data-v-79860712] {
  margin: 0;
}
.dropdown[data-v-79860712] {
  text-align: right;
}
@media (max-width: 820px) {
.contentWebboard[data-v-79860712] {
    padding: 40px 20px;
}
.CheckBox-ThreadList[data-v-79860712] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/CheckBox-EducationalInst.vue?vue&type=style&index=0&id=4531b91f&scoped=true&lang=css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.select-Thread[data-v-4531b91f] {
  position: relative;
  width: 100%;
}
.options[data-v-4531b91f] {
  padding: 8px 16px;
  margin: 0;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  background-color: #fff;
  list-style: none;
  text-align: left;
  width: 100%;
}
.option[data-v-4531b91f] {
  display: flex;
  padding: 8px 0px;
  align-items: center;
}
.option label[data-v-4531b91f] {
  cursor: pointer;
}
.option input[type="checkbox"][data-v-4531b91f] {
  margin-right: 8px;
}

/* Mobile Drawer */
.mobile-drawer[data-v-4531b91f] {
  display: none;
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  transition: right 0.3s ease;
  z-index: 9999;
}
.mobile-drawer.open[data-v-4531b91f] {
  right: 0;
}
.drawer-header[data-v-4531b91f] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.close-btn[data-v-4531b91f] {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
.desktop-filter[data-v-4531b91f] {
  display: block;
}
.mobile-filter-toggle[data-v-4531b91f] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px; /* ระยะห่างระหว่างข้อความกับไอคอน */
  font-family: inherit; /* ใช้ฟอนต์ที่เว็บกำหนด */
  font-size: 16px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.filter-button-content[data-v-4531b91f] {
  display: flex;
  gap: 8px;
}
.filter-button-content p[data-v-4531b91f] {
  margin: 0;
  font-family: inherit;
  color: #5D5FEF;
}
.filter-content[data-v-4531b91f] {
  display: flex;
  gap: 8px;
  padding: 8px 8px 8px 0;
}
.filter-content p[data-v-4531b91f] {
  margin: 0;
  font-family: inherit;
  color: #5D5FEF;
  font-size: 18px;
  font-weight: 500;
}


/* Mobile View */
@media (max-width: 820px) {
.mobile-filter-toggle[data-v-4531b91f] {
    margin-bottom: 10px;
    padding: 8px 16px;
    margin: 0;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    background-color: #fff;
    color: #000;
    list-style: none;
    text-align: left;
    width: 100%;
}
.mobile-drawer[data-v-4531b91f] {
    display: block; /* แสดง Mobile Drawer เมื่อเปิด */
}
.desktop-filter[data-v-4531b91f] {
    display: none; /* ซ่อนตัวเลือกสำหรับ Desktop */
}
.options[data-v-4531b91f] {
    border: none;
}
.document-list[data-v-4531b91f] {
    grid-template-columns: 1fr; /* 1 คอลัมน์ สำหรับมือถือ */
}
}

/* Desktop View - ซ่อน Mobile Filter และ Mobile Drawer */
@media (min-width: 821px) {
.mobile-filter-toggle[data-v-4531b91f] {
    display: none; /* ซ่อนปุ่มตัวกรองมือถือ */
}
.mobile-drawer[data-v-4531b91f] {
    display: none; /* ซ่อน Mobile Drawer */
}
.desktop-filter[data-v-4531b91f] {
    display: block; /* แสดงตัวเลือกสำหรับ Desktop */
}
.options[data-v-4531b91f] {
    border: 1px solid #D9D9D9; /* ตัวเลือกที่แสดงสำหรับ Desktop */
}
.document-list[data-v-4531b91f] {
    grid-template-columns: repeat(3, 1fr); /* 3 คอลัมน์ สำหรับ Desktop */
}
}


/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/EducationalInstList.vue?vue&type=style&index=0&id=4dc70577&scoped=true&lang=css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.custom-select[data-v-4dc70577] {
  padding: 24px 24px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #fff;
  align-items: center;
  width: 100%;
}
.custom-select-right[data-v-4dc70577] {
  gap: 16px; /* เว้นระยะห่างระหว่างกลุ่ม */
}
.RulesData-list[data-v-4dc70577] {
    margin: 0;
    padding: 0;
}
.RulesData-item[data-v-4dc70577] {
    list-style: none;
}
.RulesData-item svg[data-v-4dc70577] {
  width: 20px; /* ระบุหน่วย px */
  height: 20px; /* ระบุหน่วย px */
}
.RulesTypeName[data-v-4dc70577] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.Text-RulesTypeName[data-v-4dc70577] {
    margin: 16px 0;
    font-size: 18px;
}
.Gruop-PostItem[data-v-4dc70577] {
  display: grid; /* ใช้ grid layout */
  grid-template-columns: repeat(2, 1fr); /* แสดง 2 คอลัมน์ */
  gap: 20px; /* ช่องว่างระหว่างคอลัมน์ */
  margin: 0; 
  padding: 0;
}
.Gruop-PostItem li[data-v-4dc70577] {
  list-style: none; /* ลบจุด bullet */
}
.PostItem[data-v-4dc70577] {
  flex: 1 1 300px; /* ขนาดขั้นต่ำ 300px ยืดหยุ่นได้ */
  min-height: 250px; /* กำหนดความสูงขั้นต่ำ */
  margin-bottom: 20px; /* ระยะห่างด้านล่าง */
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #ffffff;
  display: flex; /* ทำให้เนื้อหาภายในจัดการได้ง่าย */
  flex-direction: column; /* จัดเนื้อหาในแนวตั้ง */
  height: 100%; /* ขยายให้เต็มความสูง */
}
.PostItem2[data-v-4dc70577] {
  padding: 16px 16px;
  flex-grow: 1; /* ขยายพื้นที่ให้เต็มกรอบ */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* จัดการพื้นที่ภายในให้อยู่ในลำดับ */
  height: 100%; /* ขยายให้เต็มความสูงของบรรทัดในกริด */
}
.Text-AgencyName[data-v-4dc70577] {
  font-size: 18px;
  color: #5D5FEF;
}
.PostItem-Topic[data-v-4dc70577] {
  display: flex;
  gap: 16px;
}
.PostItem-Topic svg[data-v-4dc70577]{
  width: 24px; /* ระบุหน่วย px */
  height: 24px; /* ระบุหน่วย px */
}
.PostItem-Detail[data-v-4dc70577] {
  gap: 16px;
}
.Text-ItemTopic[data-v-4dc70577] {
  margin: 0;
}
.Text-ItemDetail[data-v-4dc70577] {
  margin-top: 4px;
  color: #656565;
}
.Seemore-Button[data-v-4dc70577] {
  width: 100%;
  height: 40px;
  border-radius: 0 0 8px 8px;
  border: none;
  background: #5D5FEF;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.options[data-v-4dc70577] {
  list-style-type: none;
  padding: 0;
}
.option[data-v-4dc70577] {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  border: 1px solid #D9D9D9;
  border-radius: 20px;
  background-color: #fff;
  cursor: pointer;
  color: #656565;
}
.option.active[data-v-4dc70577] {
  background-color: rgb(93, 95, 239,0.2);
  border: 1px solid #5D5FEF;
  color: #5D5FEF;
}
.option[data-v-4dc70577]:hover {
  background-color: rgb(93, 95, 239,0.2);
  border: 1px solid #5D5FEF;
  color: #5D5FEF;
}
@media (max-width: 820px) {
.custom-select[data-v-4dc70577] {
    box-sizing: border-box;
}
}
@media (max-width: 431px) {
.Gruop-PostItem[data-v-4dc70577] {
    display: flex;
    flex-direction: column; /* เปลี่ยนให้เรียงเป็นแนวตั้ง */
}
.Text-AgencyName[data-v-4dc70577] {
    margin: 0 0 16px 0;
}
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/EducationalInst.vue?vue&type=style&index=0&id=f4ab9222&scoped=true&lang=css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.contentWebboard[data-v-f4ab9222] {
  padding: 40px 70px;
}
.head[data-v-f4ab9222] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.CheckBox-ThreadList[data-v-f4ab9222] {
  display: flex;
  justify-content: space-between;
  gap: 56px;
}
.Thread-box[data-v-f4ab9222] {
  color: #000000;
  margin: 4px 0;
}
.topic[data-v-f4ab9222] {
  letter-spacing: 2px;
}
.Thread-box h1[data-v-f4ab9222] {
  margin: 0;
}
.dropdown[data-v-f4ab9222] {
  text-align: right;
}
@media (max-width: 820px) {
.contentWebboard[data-v-f4ab9222] {
    padding: 40px 20px;
}
.CheckBox-ThreadList[data-v-f4ab9222] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ThreadJobList.vue?vue&type=style&index=0&id=5dfa7811&scoped=true&lang=css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.ThreadMenu[data-v-5dfa7811] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.custom-select[data-v-5dfa7811] {
  padding: 24px 24px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #fff;
  align-items: center;
  width: 100%;
}
.custom-select-right[data-v-5dfa7811] {
  gap: 16px;
  /* เว้นระยะห่างระหว่างกลุ่ม */
}
.custom-select-right-Top[data-v-5dfa7811] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Ensure content is vertically centered */
  margin-bottom: 20px;
  /* Add space at the bottom */
  flex-wrap: wrap;
  /* Allow elements to wrap on smaller screens */
  width: 100%;
}
.custom-select-right-Top p[data-v-5dfa7811] {
  font-size: 16px;
  color: #333;
  /* Adjust text color */
  margin: 0;
  /* Remove default margin for better spacing control */
}
.selected-threads[data-v-5dfa7811] {
  display: flex;
  flex-wrap: wrap;
  /* ทำให้ไอเทมสามารถแสดงผลหลายบรรทัด */
  gap: 8px;
  /* ระยะห่างระหว่างไอเทม */
  margin: 0;
  padding: 0;
  list-style: none;
}
.Selected-ThreadType[data-v-5dfa7811] {
  display: flex;
  align-items: center;
  gap: 4px;
  /* ระยะห่างระหว่างชื่อหมวดหมู่กับจำนวนกระทู้ */
  font-size: 14px;
  /* ปรับขนาดฟอนต์ */
  color: #333333;
  background-color: #f9f9f9;
  /* เพิ่มพื้นหลังเพื่อเน้น */
  padding: 4px 8px;
  border-radius: 4px;
}
.Selected-ThreadType p[data-v-5dfa7811] {
  margin: 0;
  /* Remove margin to ensure consistent spacing */
}
.selected-threads>li[data-v-5dfa7811]:last-child {
  margin-bottom: 0;
  /* Remove bottom margin for the last item */
}
.ThreadMenu-Button[data-v-5dfa7811] {
  display: flex;
  gap: 12px;
  /* ระยะห่างระหว่างปุ่ม */
  justify-content: space-between;
  /* ตำแหน่งอยู่ด้านขวา */
}
.thread-type[data-v-5dfa7811] {
  font-size: 14px;
  color: #656565;
  margin-top: 4px;
}
.contant-ul[data-v-5dfa7811] {
  padding: 0;
}
.post-item[data-v-5dfa7811] {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 16px 24px;
  background-color: #ffffff;
  position: relative;
  cursor: pointer;
}
.post-item[data-v-5dfa7811]:hover {
  border: 1px solid #5d5fef;
}
.post-content[data-v-5dfa7811] {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.post-index[data-v-5dfa7811] {
  font-size: 16px;
  color: #656565;
}
.post-image-wrapper[data-v-5dfa7811] {
  margin-right: 10px;
}
.no-image[data-v-5dfa7811] {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background-color: #ffa233;
}
.no-image p[data-v-5dfa7811] {
  font-size: 20px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-title-author[data-v-5dfa7811] {
  display: flex;
  justify-content: space-between; /* ซ้าย-ขวาแยกกัน */
  align-items: flex-start;
  width: 100%;
}
.post-title-author-left[data-v-5dfa7811] {
  display: flex;
  flex-direction: column; /* เรียง title และ author ลงล่าง */
  gap: 4px;
}
.post-title[data-v-5dfa7811] {
  font-weight: 500;
  color: #333333;
  margin: 0;
}
.post-author[data-v-5dfa7811] {
  color: #656565;
  font-size: 16px;
  margin: 0;
}
.post-date[data-v-5dfa7811] {
  font-size: 16px;
  color: #000000;
  white-space: nowrap;
  margin-left: 16px; /* ถ้าต้องการเพิ่มระยะห่างกับด้านซ้าย */
  align-self: flex-start; /* จัดตำแหน่งบนเหมือนกัน */
}
.thread-group[data-v-5dfa7811] {
  margin-bottom: 32px;
  list-style: none;
}
.thread-group ul[data-v-5dfa7811] {
  padding: 0;
}
.thread-header[data-v-5dfa7811] {
  font-size: 18px;
  font-weight: bold;
  list-style: none;
  display: flex;
  align-items: center;
  /* Center the items vertically */
  gap: 8px;
}
.Selected-ThreadType[data-v-5dfa7811] {
  list-style: none;
  display: flex;
  align-items: center;
  /* Center the items vertically */
  gap: 8px;
}
.pagination[data-v-5dfa7811] {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}
.pagination[data-v-5dfa7811] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.pagination button[data-v-5dfa7811] {
  background-color: #5d5fef;
  color: #ffffff;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.pagination button[data-v-5dfa7811]:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
.history-button[data-v-5dfa7811] {
  color: rgba(101, 101, 101, 0.5);
  /* Set text color with 50% opacity */
  cursor: pointer;
}
.AllThread-button[data-v-5dfa7811] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  /* Set underline thickness */
  text-decoration-color: #5D5FEF;
  /* Underline color */
  padding: 0 16px 0 0;
  /* Set padding */
  cursor: pointer;
}
@media (max-width: 768px) {
.post-content[data-v-5dfa7811] {
    display: flex;
    flex-direction: column;
    /* เรียงแนวตั้ง */
    align-items: flex-start;
    /* ชิดซ้าย */
    gap: 10px;
    /* ระยะห่างระหว่าง post-index และ no-image */
}
.post-title-author-left[data-v-5dfa7811] {
    display: flex;

    gap: 4px;
}
.post-item[data-v-5dfa7811] {
    display: flex;
    flex-direction: column;
    /* แสดงเป็นคอลัมน์เมื่อหน้าจอเล็กลง */
}
.post-title-author[data-v-5dfa7811] {
    flex-direction: column;
    /* เรียง title และ author ลงล่าง */
    align-items: flex-start;
    margin-top: 8px;
    /* เพิ่มระยะห่างจากส่วนบน */
    order: 1;
    /* ย้าย post-title-author ลงมาด้านล่าง */
}
.post-date[data-v-5dfa7811] {
    margin-left: 0;
    /* ย้ายวันที่ไปที่ด้านล่าง */
    margin-top: 8px;
    /* เพิ่มระยะห่างระหว่างวันที่กับ content */
    color: #656565;
}

  /* เพิ่มการจัดการให้ .post-index และ .no-image อยู่แถวเดียวกัน */
.post-index[data-v-5dfa7811],
  .no-image[data-v-5dfa7811] {
    display: inline-flex;
    /* ทำให้ทั้งสองอยู่ในแถวเดียวกัน */
    align-items: center;
    /* จัดให้อยู่ตรงกลางในแนวตั้ง */
}
.no-image[data-v-5dfa7811] {
    height: 40px;
    width: 40px;
    margin: 0;
}
.post-author[data-v-5dfa7811] {
    display: none;
    /* ซ่อนที่อยู่ใน .post-title-author-left บน mobile */
}
.post-author-mobile[data-v-5dfa7811] {
    display: inline-block !important;
    margin-left: 16px;
    font-size: 16px;
    color: #000000;
    vertical-align: middle;
}
}
.post-author-mobile[data-v-5dfa7811] {
  display: none;
}
@media (max-width: 480px) {
.post-title[data-v-5dfa7811] {
    font-size: 18px;
    /* ปรับขนาดฟอนต์ title สำหรับหน้าจอมือถือ */
}
.post-author[data-v-5dfa7811] {
    font-size: 14px;
    /* ปรับขนาดฟอนต์ author สำหรับหน้าจอมือถือ */
}
.post-date[data-v-5dfa7811] {
    font-size: 14px;
    /* ปรับขนาดฟอนต์วันที่สำหรับหน้าจอมือถือ */
}
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/MaritimeJobHome.vue?vue&type=style&index=0&id=7895348c&scoped=true&lang=css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.contentWebboard[data-v-7895348c] {
  padding: 40px 70px;
}
.popup[data-v-7895348c] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 992px;
  max-height: 80vh;
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15),
    0px 4px 6px rgba(0, 0, 0, 0.1);
  /* ปรับเงาให้สมจริงขึ้น */
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 1000;
  overflow: hidden;
}
.popup-content[data-v-7895348c] {
  flex-grow: 1;
  overflow-y: auto;
  max-height: calc(80vh - 100px);
  /* ปรับความสูงอัตโนมัติให้เหมาะกับ popup */
  padding-right: 12px;
  /* ป้องกัน scrollbar ชนกับเนื้อหา */
  margin-bottom: 8px;
  /* เพิ่มระยะห่างจากปุ่ม */
}

/* ปรับ scrollbar ให้ดูเรียบเนียนขึ้น */
.popup-content[data-v-7895348c]::-webkit-scrollbar {
  width: 6px;
}
.popup-content[data-v-7895348c]::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}
.popup-content[data-v-7895348c]::-webkit-scrollbar-thumb:hover {
  background: #999;
}


/* หัวข้อ */
.popup-content h3[data-v-7895348c] {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 10px;
}

/* รายการข้อมูล */
.popup-content ul[data-v-7895348c] {
  list-style-type: none;
  padding: 0;
}
.popup-content ul li[data-v-7895348c] {
  background: #f5f5f5;
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 5px;
  font-size: 0.9rem;
}

/* ปุ่มปิด */
.close-btn[data-v-7895348c] {
  background: #ff4d4d;
  color: white;
  border: none;
  padding: 8px 15px;
  font-size: 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  display: block;
  width: 100%;
  margin-top: 15px;
  text-align: center;
}
.close-btn[data-v-7895348c]:hover {
  background: #e60000;
}
.background-container[data-v-7895348c] {
  width: 100%;
  height: 421px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://logistics-manager.com/wp-content/uploads/2020/07/Feature-Image.jpg') center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.content[data-v-7895348c] {
  text-align: center;
  color: white;
}
h1[data-v-7895348c] {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
}
.search-bar[data-v-7895348c] {
  width: 300px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
}
.select-Thread[data-v-7895348c] {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.options[data-v-7895348c] {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.option[data-v-7895348c] {
  background: linear-gradient(360deg, #5D5FEF 0%, #5152AE 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  padding: 8px 16px;
  color: white;
  font-size: 18px;
  text-align: center;
}
.option label[data-v-7895348c] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.Gruop-PostItem[data-v-7895348c] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* ปรับขนาดให้เต็มพื้นที่ */
  gap: 24px;
  /* ปรับให้ระยะห่างสมดุล */
  width: 100%;
  max-width: 1200px;
  /* จำกัดความกว้างให้สมดุล */
  margin: 0 auto;
  padding: 0;
  /* เพิ่ม padding ให้ระยะห่างเท่ากัน */
  list-style: none;
}
.PostItem[data-v-7895348c] {
  position: relative;
  width: 100%;
  height: 240px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 2px solid rgba(255, 255, 255, 0.3);
  /* ✅ เพิ่มขอบ */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  /* ✅ เพิ่มเงา */
}

/* ✅ กล่องข้อมูลด้านล่าง */
.PostItem2[data-v-7895348c] {
  position: absolute;
  width: 100%;
  min-height: 74px;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  /* ✅ ทำให้พื้นหลังเข้มขึ้น */
  backdrop-filter: blur(5px);
  /* ✅ เบลอพื้นหลัง */
  border-radius: 0 0 8px 8px;
  box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.3);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ✅ ข้อความหัวข้อ */
.Text-ItemDetail[data-v-7895348c] {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #FFFFFF;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
  margin: 0;
}

/* ✅ คำอธิบาย */
.Text-ItemDescription[data-v-7895348c] {
  font-size: 14px;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* ✅ ทำให้ข้อความยาวเกินถูกตัด */
}

/* ✅ ปุ่มดูรายละเอียด */
.btn-detail[data-v-7895348c] {
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 14px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s;
}
.btn-detail[data-v-7895348c]:hover {
  background: rgba(255, 255, 255, 0.5);
}


/* จัดการข้อมูลภายในโพสต์ */
.PostItem-Topic[data-v-7895348c] {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.PostItem-Detail[data-v-7895348c] {
  width: 100%;
  box-sizing: border-box;
}

/* ข้อความรายละเอียด */
.Text-ItemDetail[data-v-7895348c] {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
  /* ทำให้ข้อความอ่านง่ายขึ้น */
  margin: 0;
}
.container[data-v-7895348c] {
  align-items: flex-end;
  width: 100%;
  max-width: 1200px;
  /* ให้มีขนาดเท่ากับ .Gruop-PostItem */
  margin: 40px 0 0 0;
  padding: 0;
  /* ใช้ padding เท่ากับ .Gruop-PostItem */
}
.content2[data-v-7895348c] {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  /* จัดให้องค์ประกอบทั้งหมดชิดด้านล่าง */
  gap: 8px;
  height: 100%;
  /* ให้ container มีความสูงเต็มที่ */
  margin: 0 0 16px 0;
  /* ด้านบน 0, ด้านขวา 16px, ด้านล่าง 16px, ด้านซ้าย 0 */
}
.webboard-label[data-v-7895348c] {
  font-size: 20px;
  letter-spacing: 0.2em;
  color: #000;
}
.title[data-v-7895348c] {
  font-weight: 500;
  font-size: 40px;
  color: #000;
  margin: 0;
}
.actions[data-v-7895348c] {
  display: flex;
  align-items: center;
}
.btn-primary[data-v-7895348c] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: #5D5FEF;
  color: #fff;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: 0.3s;
}
.btn-primary[data-v-7895348c]:hover {
  background: #4A4BEB;
}
@media (max-width: 820px) {
.contentWebboard[data-v-7895348c] {
    padding: 40px 20px;
}
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/ViewThreadJob.vue?vue&type=style&index=0&id=791b7164&scoped=true&lang=css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

/* ---------- Cover Section ---------- */
.CoverSection[data-v-791b7164] {
  align-items: center;
  padding: 40px 70px !important;
  gap: 24px;
}
.HeadJob[data-v-791b7164] {
  display: flex;
  gap: 24px;
}
.jobDetail[data-v-791b7164] {
  width: 100%;
}
/* ---------- Header & Thread Menu ---------- */
.HeadThread[data-v-791b7164] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.ThreadMenu[data-v-791b7164] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.HeadName[data-v-791b7164] {
  font-size: 24px;
  font-weight: 500;
}
.ThreadName[data-v-791b7164] {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: #5D5FEF !important;
}

/* ---------- Top Section ---------- */
.TopSection[data-v-791b7164] {
  gap: 12px;
  padding: 24px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  margin-bottom: 24px;
}

/* ---------- Date & Author ---------- */
.DateTime[data-v-791b7164] {
  font-size: 16px;
  color: #656565;
  display: flex;
  align-items: center;
  gap: 8px;
}
.PostedBy[data-v-791b7164] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.job-section1[data-v-791b7164] {
  display: flex;
  align-items: center;
}
.job-title1[data-v-791b7164] {
  font-size: 16px;
  width: 150px;
}

/* ---------- User Image & Name ---------- */
.post-image-wrapper[data-v-791b7164] {
  margin-right: 10px;
}
.post-image[data-v-791b7164],
.no-image[data-v-791b7164] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-image[data-v-791b7164] {
  -o-object-fit: cover;
     object-fit: cover;
}
.no-image[data-v-791b7164] {
  border-radius: 50%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background-color: #ffa233;
}
.no-image p[data-v-791b7164] {
  font-size: 20px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.UserName[data-v-791b7164] {
  font-size: 16px;
  margin: 0;
}

/* ---------- Content & Paragraphs ---------- */
.content[data-v-791b7164] {
  padding: 24px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
}
.Paragraph[data-v-791b7164] {
  margin: 0;
  padding-bottom: 4px;
}
.Paragraph p[data-v-791b7164] {
  font-size: 16px;
}

/* ---------- Image Grid ---------- */
.image-container[data-v-791b7164] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 10px 0;
}
.image-wrapper[data-v-791b7164] {
  position: relative;
}
.ThreadIMG[data-v-791b7164] {
  width: 100%;
  height: 500px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
}

/* ---------- View Full Image Button ---------- */
.view-full-button[data-v-791b7164] {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.view-full-button[data-v-791b7164]:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* ---------- Tooltip ---------- */
.tooltip-text[data-v-791b7164] {
  visibility: hidden;
  width: 120px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  bottom: 100%;
  right: 0;
  transform: translateY(-8px);
  opacity: 0;
  transition: opacity 0.3s;
}
.view-full-button:hover .tooltip-text[data-v-791b7164] {
  visibility: visible;
  opacity: 1;
}
.tooltip-text[data-v-791b7164]::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.7);
}

/* ---------- Modal ---------- */
.modal[data-v-791b7164] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.full-image[data-v-791b7164] {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
}

/* ---------- Job Section ---------- */
.job-section[data-v-791b7164] {
  margin-bottom: 28px;
}
.job-title[data-v-791b7164] {
  display: block;
  margin-bottom: 2px;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #5D5FEF !important;
}
.job-text[data-v-791b7164] {
  font-size: 16px;
}
.job-list[data-v-791b7164] {
  padding-left: 20px;
}
.job-list li[data-v-791b7164] {
  margin-bottom: 5px;
  font-size: 16px;
}

/* ---------- Company Details ---------- */
.company-info[data-v-791b7164] {
  width: 350px;
  height: 100%;
  gap: 12px;
  padding: 24px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  margin-bottom: 24px;
}
.companyDetail[data-v-791b7164] {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin: 0 0 16px 0;
}
.company-name[data-v-791b7164] {
  font-weight: 500;
  color: #333;
}
.company-website[data-v-791b7164] {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center; /* center ไอคอนและข้อความ */
  text-align: center;
  background-color: #5D5FEF; /* สีพื้นหลัง */
  color: #fff; /* สีข้อความ */
  padding: 8px 12px; /* ขนาด padding */
  border: none; /* ไม่มีเส้นขอบ */
  border-radius: 100px; /* มุมโค้ง */
  cursor: pointer; /* เป็น cursor ของปุ่ม */
  font-size: 16px;
  font-weight: 500;
  gap: 8px; /* ระยะห่างระหว่างไอคอนกับข้อความ */
  transition: background-color 0.3s ease; /* เอฟเฟกต์เมื่อ hover */
}
.company-website[data-v-791b7164]:hover {
  background-color: #4c4dd1;
}
.company-website[data-v-791b7164]:active {
  background-color: #3a3ab3;
}
.company-website svg[data-v-791b7164] {
  fill: #fff;
}
.company-address[data-v-791b7164],
.company-contact[data-v-791b7164],
.company-email[data-v-791b7164] {
  color: #000;
}

/* ---------- Separator ---------- */
.separator[data-v-791b7164] {
  color: #656565;
  margin: 0 5px;
}

/* ---------- Job Section List ---------- */
.job-section h3[data-v-791b7164] {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 10px;
}
.job-section ul[data-v-791b7164] {
  list-style-type: none;
  padding: 0;
}
.job-section ul li[data-v-791b7164] {
  background: #f5f5f5;
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 5px;
  font-size: 0.9rem;
}
@media (max-width: 820px) {
.CoverSection[data-v-791b7164] {
    padding: 40px 20px !important;
}
.content[data-v-791b7164] {
    padding: 16px;
}
.job-title[data-v-791b7164] {
    margin: 0 0 10px 0;
}
}
@media (max-width: 431px) {
.DateTime[data-v-791b7164] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 8px 0;
}
.DateTime p[data-v-791b7164] {
    margin: 0 0 16px 0;
}
.DateTimePost p[data-v-791b7164] {
    margin: 0;
}
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/FromThreadJobContent.vue?vue&type=style&index=0&id=591f63a0&scoped=true&lang=css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

h1[data-v-591f63a0] {
  text-align: center;
  margin-bottom: 20px;
}
.CoverSection[data-v-591f63a0] {
  align-items: center;
  padding: 40px 70px;
  /* Padding inside the Navbar */
  gap: 24px;
  /* ระยะห่างระหว่างองค์ประกอบใน CoverSection */
}
.ContentMid[data-v-591f63a0] {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  margin-bottom: 24px;
  /* ระยะห่างด้านล่างของ TopSection */
}
.select-Thread[data-v-591f63a0] {
  width: 100%;
  margin-bottom: 15px;
  display: flex;
}
.options[data-v-591f63a0] {
  list-style: none;
  padding: 0;
}
.option[data-v-591f63a0] {
  margin: 5px 0;
}
.ThreadName[data-v-591f63a0],
.job-section[data-v-591f63a0] {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 15px;
  gap: 10px;
}
.topic-p[data-v-591f63a0] {
  flex: 0 0 150px;
  /* กำหนดความกว้างของ label ให้เท่ากันทุกตัว */
  text-align: left;
  /* จัดข้อความให้อยู่ทางซ้าย */
  font-weight: 500;
  /* ลดความหนา (สามารถเปลี่ยนเป็น 400 ถ้าต้องการให้บางกว่านี้) */
  white-space: nowrap;
}
.ThreadName-Input[data-v-591f63a0] {
  flex: 1;
  /* ทำให้ input ขยายเต็มที่ */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}
.SubmitCancel-Button[data-v-591f63a0] {
  display: flex;
  gap: 16px;
}
button[data-v-591f63a0] {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.submitButton[data-v-591f63a0] {
  width: 100%;
  background: #5d5fef;
  padding: 8px 16px;
  border-radius: 8px;
  color: #fff;
  border: none;
  /* Removes default border */
  font-size: 16px;
  /* Adjust text size */
  cursor: pointer;
  /* Changes cursor to pointer on hover */
  transition: background 0.2s ease;
  /* Smooth background color transition */
  text-align: center;
  display: flex;
  /* Use flexbox for layout */
  align-items: center;
  /* Center items vertically */
  justify-content: center;
  /* Center items horizontally */
}
.submitButton[data-v-591f63a0]:hover {
  background: #4a4ae6;
}
.cancelButton[data-v-591f63a0] {
  width: 100%;
  background: #FFFFFF;
  padding: 8px 16px;
  color: #656565;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 16px;
  /* Adjust text size */
  cursor: pointer;
  /* Changes cursor to pointer on hover */
  transition: background 0.2s ease;
  /* Smooth background color transition */
  text-align: center;
  display: flex;
  /* Use flexbox for layout */
  align-items: center;
  /* Center items vertically */
  justify-content: center;
  /* Center items horizontally */
}
.jobSection-jobList[data-v-591f63a0] {
  width: 100%;
}
.job-section[data-v-591f63a0] {
  width: 100%;
}
.job-section p[data-v-591f63a0] {
  flex: 0 0 150px; /* กำหนดความกว้างของ label */
  max-width: 150px; /* กำหนดความกว้างสูงสุด */
  text-align: left; /* จัดข้อความให้อยู่ทางซ้าย */
  font-weight: 500; /* ลดความหนา */
  white-space: normal; /* อนุญาตให้ข้อความขึ้นบรรทัดใหม่ */
  word-wrap: break-word; /* ทำให้คำที่ยาวเกินไปขึ้นบรรทัดใหม่ */
  overflow-wrap: break-word; /* ป้องกันข้อความล้น */
  align-self: flex-start; /* ทำให้ข้อความอยู่ด้านบน */
  margin-top: 4px; /* เพิ่มระยะห่างด้านบนเล็กน้อย */
}
.job-list[data-v-591f63a0] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px; /* เพิ่มระยะห่างระหว่าง input และปุ่ม */
  margin-bottom: 10px; /* เพิ่มระยะห่างระหว่างแต่ละ job-list */
}
.job-list input[data-v-591f63a0], .JobNoteDetail input[data-v-591f63a0] {
  flex: 1;
  /* ทำให้ input ขยายเต็มพื้นที่ของ container */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  gap: 8px;
}
.job-list-button[data-v-591f63a0] {
  display: flex;
  gap: 8px;
}
.JobNote[data-v-591f63a0] {
  width: 100%;
  display: flex;
  flex-direction: column; /* จัดให้ input อยู่เรียงกันในแนวตั้ง */
  gap: 12px; /* เพิ่มระยะห่างระหว่าง input */
}
.JobNoteDetail[data-v-591f63a0] {
  margin-bottom: 16px;
  width: 100%;
  display: flex;
  flex-direction: column; /* จัด label และ input ให้อยู่คนละบรรทัด */
  gap: 4px; /* ปรับระยะห่างระหว่าง label กับ input */
}
.JobNote .JobNoteDetail p[data-v-591f63a0] {
  flex: 0 0 0px; /* กำหนดความกว้างของ label */
  max-width: 150px; /* กำหนดความกว้างสูงสุด */
  margin-bottom: 8px;
  font-weight: 400; /* ปรับให้เป็นตัวอักษรปกติ */
  line-height: 1.4; /* ปรับความสูงให้เหมาะสมกับข้อความ */
  padding: 2px 0; /* ปรับ padding ให้ข้อความไม่ชิดขอบ */
  display: block; /* ทำให้แน่ใจว่าข้อความอยู่บรรทัดของตัวเอง */
}
.JobNoteDetail input[data-v-591f63a0] {
  flex-grow: 1; /* ทำให้ input ขยายเต็มพื้นที่ */
  min-width: 0; /* ป้องกันการย่อจน input เล็กเกินไป */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
}
.number-input[data-v-591f63a0] {
  display: flex;
  align-items: center;
  gap: 5px;
}
.number-input button[data-v-591f63a0] {
  padding: 8px 12px;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
}
.number-input button[data-v-591f63a0]:hover {
  background-color: #e0e0e0;
}
@media (max-width: 820px) {
.CoverSection[data-v-591f63a0] {
    padding: 40px 20px;
}
}
@media (max-width: 431px) {
.ContentMid h3[data-v-591f63a0] {
    margin: 0 0 16px 0;
    display: inline-flex;  /* หรือ inline-block */
    white-space: nowrap;  /* ป้องกันไม่ให้ข้อความตัดเป็นหลายบรรทัด */
}
.select-Thread[data-v-591f63a0] {
    display: flex;
    flex-direction: column;
}
.topic-p[data-v-591f63a0] {
    flex: 0;
    margin: 0;
}
.ThreadName[data-v-591f63a0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* หรือ center ถ้าต้องการจัดกลาง */
    gap: 8px; /* ระยะห่างระหว่าง p และ input */
}
.ThreadName-Input[data-v-591f63a0] {
    width: 100%; /* ให้ input ขยายเต็มความกว้าง */
    box-sizing: border-box;
}
.job-section[data-v-591f63a0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* หรือ center ถ้าต้องการจัดกลาง */
    gap: 8px; /* ระยะห่างระหว่างแต่ละส่วน */
    margin: 24px 0 0 0;
}
.job-section p[data-v-591f63a0] {
    margin: 0;
    flex: 0;
    box-sizing: border-box!important;
    display: inline-flex;  /* หรือ inline-block */
    white-space: nowrap;  /* ป้องกันไม่ให้ข้อความตัดเป็นหลายบรรทัด */
}
.jobSection-jobList[data-v-591f63a0] {
    display: flex;
    flex-direction: column; /* จัดเป็นคอลัมน์ */
    gap: 8px; /* ระยะห่างระหว่าง job list */
}
.job-list[data-v-591f63a0] {
    display: flex;
    gap: 8px; /* ระยะห่างระหว่าง input และปุ่มลบ */
}
.job-list input[data-v-591f63a0] {
    width: 100%;
    box-sizing: border-box;
}
.job-list button[data-v-591f63a0] {
    width: auto;
}
.job-list-button[data-v-591f63a0] {
    display: flex;
    justify-content: flex-start; /* จัดปุ่มเพิ่มไปทางซ้าย */
}
.add-button[data-v-591f63a0] {
    padding: 8px 16px;
    font-size: 14px;
}
.JobNote[data-v-591f63a0] {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
}
.JobNoteDetail[data-v-591f63a0] {
    box-sizing: border-box;
    width: 100%; /* ให้ .JobNoteDetail ขยายเต็มความกว้างของ .JobNote */
    margin: 0;
}
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/CheckBox-ThreadJobSelector.vue?vue&type=style&index=0&id=96be8690&scoped=true&lang=css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.select-Thread[data-v-96be8690] {
  position: relative;
  width: auto;
}
.options[data-v-96be8690] {
  padding: 8px 16px;
  margin: 0;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  background-color: #fff;
  list-style: none;
  text-align: left;
  width: 100%;
}
.option[data-v-96be8690] {
  display: flex;
  padding: 8px 0px;
  align-items: center;
}
.option label[data-v-96be8690] {
  cursor: pointer;
}
.option input[type="checkbox"][data-v-96be8690] {
  margin-right: 8px;
}
.selected-threads[data-v-96be8690] {
  margin-top: 20px;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/ThreadJobMenu.vue?vue&type=style&index=0&id=87244ef0&scoped=true&lang=css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.HeadThread[data-v-87244ef0] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Ensure space between items */
}
.ThreadMenu[data-v-87244ef0] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.HeadName[data-v-87244ef0] {
  font-size: 24px;
  font-weight: 500;
}
.custom-select[data-v-87244ef0] {
  padding: 24px 24px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #fff;
  align-items: center;
  width: 100%;
}
.contentWebboard[data-v-87244ef0] {
  padding: 40px 70px;
}
.head[data-v-87244ef0] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.CheckBox-ThreadList[data-v-87244ef0] {
  display: flex;
  justify-content: space-between;
  gap: 56px;
}
.Thread-box[data-v-87244ef0] {
  color: #000000;
  margin: 4px 0;
}
.topic[data-v-87244ef0] {
  letter-spacing: 2px;
}
.Thread-box h1[data-v-87244ef0] {
  margin: 0;
}
.dropdown[data-v-87244ef0] {
  text-align: right;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/Edit-FromThreadJobContent.vue?vue&type=style&index=0&id=50834df3&scoped=true&lang=css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

h1[data-v-50834df3] {
  text-align: center;
  margin-bottom: 20px;
}
.CoverSection[data-v-50834df3] {
  align-items: center;
  padding: 60px 108px;
  /* Padding inside the Navbar */
  gap: 24px;
  /* ระยะห่างระหว่างองค์ประกอบใน CoverSection */
}
.ContentMid[data-v-50834df3] {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  margin-bottom: 24px;
  /* ระยะห่างด้านล่างของ TopSection */
}
.select-Thread[data-v-50834df3] {
  width: 100%;
  margin-bottom: 15px;
  display: flex;
}
.options[data-v-50834df3] {
  list-style: none;
  padding: 0;
}
.option[data-v-50834df3] {
  margin: 5px 0;
}
.ThreadName[data-v-50834df3],
.job-section[data-v-50834df3] {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 15px;
  gap: 10px;
}
.topic-p[data-v-50834df3] {
  flex: 0 0 150px;
  /* กำหนดความกว้างของ label ให้เท่ากันทุกตัว */
  text-align: left;
  /* จัดข้อความให้อยู่ทางซ้าย */
  font-weight: 500;
  /* ลดความหนา (สามารถเปลี่ยนเป็น 400 ถ้าต้องการให้บางกว่านี้) */
  white-space: nowrap;
}
.ThreadName-Input[data-v-50834df3] {
  flex: 1;
  /* ทำให้ input ขยายเต็มที่ */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}
.SubmitCancel-Button[data-v-50834df3] {
  display: flex;
  gap: 16px;
}
button[data-v-50834df3] {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.submitButton[data-v-50834df3] {
  width: 100%;
  background: #5d5fef;
  padding: 8px 16px;
  border-radius: 8px;
  color: #fff;
  border: none;
  /* Removes default border */
  font-size: 16px;
  /* Adjust text size */
  cursor: pointer;
  /* Changes cursor to pointer on hover */
  transition: background 0.2s ease;
  /* Smooth background color transition */
  text-align: center;
  display: flex;
  /* Use flexbox for layout */
  align-items: center;
  /* Center items vertically */
  justify-content: center;
  /* Center items horizontally */
}
.submitButton[data-v-50834df3]:hover {
  background: #4a4ae6;
}
.cancelButton[data-v-50834df3] {
  width: 100%;
  background: #FFFFFF;
  padding: 8px 16px;
  color: #656565;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 16px;
  /* Adjust text size */
  cursor: pointer;
  /* Changes cursor to pointer on hover */
  transition: background 0.2s ease;
  /* Smooth background color transition */
  text-align: center;
  display: flex;
  /* Use flexbox for layout */
  align-items: center;
  /* Center items vertically */
  justify-content: center;
  /* Center items horizontally */
}
.jobSection-jobList[data-v-50834df3] {
  width: 100%;
}
.job-section[data-v-50834df3] {
  width: 100%;
}
.job-section p[data-v-50834df3] {
  flex: 0 0 150px; /* กำหนดความกว้างของ label */
  max-width: 150px; /* กำหนดความกว้างสูงสุด */
  text-align: left; /* จัดข้อความให้อยู่ทางซ้าย */
  font-weight: 500; /* ลดความหนา */
  white-space: normal; /* อนุญาตให้ข้อความขึ้นบรรทัดใหม่ */
  word-wrap: break-word; /* ทำให้คำที่ยาวเกินไปขึ้นบรรทัดใหม่ */
  overflow-wrap: break-word; /* ป้องกันข้อความล้น */
  align-self: flex-start; /* ทำให้ข้อความอยู่ด้านบน */
  margin-top: 4px; /* เพิ่มระยะห่างด้านบนเล็กน้อย */
}
.job-list[data-v-50834df3] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px; /* เพิ่มระยะห่างระหว่าง input และปุ่ม */
  margin-bottom: 10px; /* เพิ่มระยะห่างระหว่างแต่ละ job-list */
}
.job-list input[data-v-50834df3], .JobNoteDetail input[data-v-50834df3] {
  flex: 1;
  /* ทำให้ input ขยายเต็มพื้นที่ของ container */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  gap: 8px;
}
.job-list-button[data-v-50834df3] {
  display: flex;
  gap: 8px;
}
.JobNote[data-v-50834df3] {
  width: 100%;
  display: flex;
  flex-direction: column; /* จัดให้ input อยู่เรียงกันในแนวตั้ง */
  gap: 12px; /* เพิ่มระยะห่างระหว่าง input */
}
.JobNoteDetail[data-v-50834df3] {
  margin-bottom: 16px;
  width: 100%;
  display: flex;
  flex-direction: column; /* จัด label และ input ให้อยู่คนละบรรทัด */
  gap: 4px; /* ปรับระยะห่างระหว่าง label กับ input */
}
.JobNote .JobNoteDetail p[data-v-50834df3] {
  flex: 0 0 0px; /* กำหนดความกว้างของ label */
  max-width: 150px; /* กำหนดความกว้างสูงสุด */
  margin-bottom: 8px;
  font-weight: 400; /* ปรับให้เป็นตัวอักษรปกติ */
  line-height: 1.4; /* ปรับความสูงให้เหมาะสมกับข้อความ */
  padding: 2px 0; /* ปรับ padding ให้ข้อความไม่ชิดขอบ */
  display: block; /* ทำให้แน่ใจว่าข้อความอยู่บรรทัดของตัวเอง */
}
.JobNoteDetail input[data-v-50834df3] {
  flex-grow: 1; /* ทำให้ input ขยายเต็มพื้นที่ */
  min-width: 0; /* ป้องกันการย่อจน input เล็กเกินไป */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
}
.number-input[data-v-50834df3] {
  display: flex;
  align-items: center;
  gap: 5px;
}
.number-input button[data-v-50834df3] {
  padding: 8px 12px;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
}
.number-input button[data-v-50834df3]:hover {
  background-color: #e0e0e0;
}


/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/DocumentList.vue?vue&type=style&index=0&id=44f2b009&scoped=true&lang=css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

/* โครงสร้างของรายการ */
/* โครงสร้างของรายการ */
.document-list[data-v-44f2b009] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* รวม padding เข้ากับ width/height */
}
.document-list ul[data-v-44f2b009] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* ขนาด 3 ช่อง */
  gap: 24px;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

/* ลดขนาด li สำหรับหน้าจอใหญ่ (desktop) */
@media (min-width: 821px) {
.document-list ul[data-v-44f2b009] {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 3 ช่อง */
    gap: 16px; /* ลด gap */
}
.post-item[data-v-44f2b009] {
    width: 90%; /* ทำให้ post-item เล็กลง */
    height: 400px; /* ปรับขนาดให้เล็กลง */
    padding: 12px; /* ลด padding */
}
}

/* Responsive: เมื่อหน้าจอเล็ก (mobile) ให้เหลือ 2 ช่อง */
@media (max-width: 820px) {
.document-list ul[data-v-44f2b009] {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* ขนาด 2 ช่อง */
}
.post-item[data-v-44f2b009] {
    width: 100%; /* ทำให้ post-item กว้างเต็มที่ */
    height: 350px; /* ปรับความสูง */
    padding: 16px; /* เพิ่ม padding บนมือถือ */
}
.post-index[data-v-44f2b009] {
    font-size: 14px;
}
.post-detail[data-v-44f2b009] {
    font-size: 12px; /* ขนาดตัวอักษร */
    padding: 6px 12px; /* เพิ่ม padding ทั้งแนวนอนและแนวตั้ง */
    display: flex;
    align-items: center; /* ใช้ align-items แทน align-content เพื่อให้จัดตำแหน่งไอคอนและข้อความ */
    gap: 8px; /* เพิ่มระยะห่างระหว่างข้อความและไอคอน */
    border: 1px solid #e5e5e5; /* สีของเส้นขอบ */
    border-radius: 20px; /* มุมโค้งมน */
    background-color: #f9f9f9; /* เพิ่มพื้นหลังเพื่อให้ดูชัดเจน */
    margin: 0 0 0 8px 0;
}
}
@media (max-width: 431px) {
.document-list ul[data-v-44f2b009] {
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* ขนาด 1 ช่อง */
}
.post-item[data-v-44f2b009] {
    width: 100%; /* ทำให้ post-item กว้างเต็มที่ */
    height: 350px; /* ปรับความสูง */
    padding: 16px; /* เพิ่ม padding บนมือถือ */
}
.post-content[data-v-44f2b009] {
    display: flex;
    gap: 16px;
}
.post-index[data-v-44f2b009] {
    font-size: 14px;
    margin: 0 0 8px 0 !important; /* ใช้ margin เฉพาะบนมือถือ */
}
.post-detail[data-v-44f2b009] {
    font-size: 12px;
}
}
.post-item[data-v-44f2b009] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.1s cubic-bezier(0.68, -0.55, 0.27, 1.55),
              box-shadow 0.1s ease-out,
              background-color 0.3s ease;
  box-sizing: border-box;
}
.post-item[data-v-44f2b009]:hover {
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
  background-color: #F9F9F9;
  cursor: pointer;
}
.bgIMG[data-v-44f2b009] {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: #F9F9F9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
}
.ThreadIMG[data-v-44f2b009] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid #e5e5e5;
  box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);
}

/* ชื่อเอกสาร */
.post-index[data-v-44f2b009] {
  font-size: 16px;
  font-weight: 600;
  margin: 12px 0 8px 0;
  text-align: start;
  color: #5D5FEF;
  width: 100%;
}

/* รายละเอียด */
.post-detail[data-v-44f2b009] {
  font-size: 14px;
  color: #656565;
  text-align: start;
  padding: 6px 12px; /* เพิ่ม padding ทั้งแนวนอนและแนวตั้ง */
  display: flex;
  align-items: center; /* ใช้ align-items แทน align-content เพื่อให้จัดตำแหน่งไอคอนและข้อความ */
  gap: 8px; /* เพิ่มระยะห่างระหว่างข้อความและไอคอน */
  border: 1px solid #e5e5e5; /* สีของเส้นขอบ */
  border-radius: 20px; /* มุมโค้งมน */
  background-color: #f9f9f9; /* เพิ่มพื้นหลังเพื่อให้ดูชัดเจน */
  margin: 0 0 8px 0; /* เพิ่ม margin ด้านล่างเป็น 12px */
}
.post-detail svg[data-v-44f2b009] {
    width: 20px; /* ขนาดของไอคอน */
    height: 20px; /* ขนาดของไอคอน */
    color: #656565; /* สีของไอคอน */
}


/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/CheckBox-DocumentTypeCategory.vue?vue&type=style&index=0&id=13ccf49d&scoped=true&lang=css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.select-Thread[data-v-13ccf49d] {
  position: relative;
  width: 100%;
}
.select-Thread ul[data-v-13ccf49d] {
  width: 210px;
}
.mobile-filter-toggle[data-v-13ccf49d] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px; /* ระยะห่างระหว่างข้อความกับไอคอน */
  font-family: inherit; /* ใช้ฟอนต์ที่เว็บกำหนด */
  font-size: 16px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.filter-button-content[data-v-13ccf49d] {
  display: flex;
  gap: 8px;
}
.filter-button-content p[data-v-13ccf49d] {
  margin: 0;
  font-family: inherit;
  color: #5D5FEF;
}
.filter-content[data-v-13ccf49d] {
  display: flex;
  gap: 8px;
  padding: 8px 8px 8px 0;
}
.filter-content p[data-v-13ccf49d] {
  margin: 0;
  font-family: inherit;
  color: #5D5FEF;
  font-size: 18px;
  font-weight: 500;
}

/* Drawer */
.mobile-drawer[data-v-13ccf49d] {
  display: none;
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  transition: right 0.3s ease;
  z-index: 9999;
}
.mobile-drawer.open[data-v-13ccf49d] {
  right: 0;
}
.drawer-header[data-v-13ccf49d] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.close-btn[data-v-13ccf49d] {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
.options[data-v-13ccf49d] {
  padding: 8px 16px;
  margin: 0;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  background-color: #fff;
  list-style: none;
  text-align: left;
  width: 100%;
}
.option[data-v-13ccf49d] {
  display: flex;
  flex-direction: column;
  padding: 8px 0px;
  align-items: flex-start;
}
.option-label[data-v-13ccf49d] {
  width: 100%;
}
.toggle-button[data-v-13ccf49d] {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between; /* กระจายไอเทมภายใน */
  width: 100%; /* ให้ความกว้างเต็มพื้นที่ */
  padding: 8px 0;
}
.toggle-button svg[data-v-13ccf49d] {
  margin-left: auto;
  transition: transform 0.3s ease;
}
.toggle-button .rotated[data-v-13ccf49d] {
  transform: rotate(180deg);
}
.document-list[data-v-13ccf49d] {
  gap: 8px 16px; /* ช่องว่างแนวนอนและแนวตั้ง */
  padding-left: 0;
  margin: 8px 0;
}
.document-list li[data-v-13ccf49d] {
  width: 100%;
  list-style: none;
  padding: 0 0 0 8px;
}


/* Mobile View */
@media (max-width: 820px) {
.mobile-filter-toggle[data-v-13ccf49d] {
    margin-bottom: 10px;
    padding: 8px 16px;
    margin: 0;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    background-color: #fff;
    color: #000;
    list-style: none;
    text-align: left;
    width: 100%;
}
.mobile-drawer[data-v-13ccf49d] {
    display: block;
}
.desktop-filter[data-v-13ccf49d] {
    display: none;
}
.options[data-v-13ccf49d] {
    border: none;
}
.document-list[data-v-13ccf49d] {
    grid-template-columns: 1fr; /* 1 ช่อง สำหรับมือถือ */
}
}

/* Desktop View */
@media (min-width: 821px) {
.mobile-filter-toggle[data-v-13ccf49d],
  .mobile-drawer[data-v-13ccf49d] {
    display: none;
}
.desktop-filter[data-v-13ccf49d] {
    display: block;
}
}


/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/previousPage.vue?vue&type=style&index=0&id=78c10b36&scoped=true&lang=css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.previous[data-v-78c10b36] {
    display: flex;
}
.previous-page[data-v-78c10b36] {
    color: #a0a0a0;
    /* สีเทาอ่อนสำหรับหน้าที่เคยดู */
    cursor: pointer;
    font-weight: 500;
    /* ความหนาของข้อความเป็น 600 */
}
.current-page[data-v-78c10b36] {
    color: #5d5fef;
    /* สีสำหรับหน้าปัจจุบัน */
    font-weight: 500;
    /* ความหนาของข้อความเป็น 600 */
}
span[data-v-78c10b36] {
    margin-right: 10px;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/DocumentHome.vue?vue&type=style&index=0&id=49e948d4&scoped=true&lang=css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.contentWebboard[data-v-49e948d4] {
  padding: 40px 70px;
}

/* Default layout for desktop */
.CheckBox-ThreadList[data-v-49e948d4] {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

/* Custom Select Style */
.custom-select[data-v-49e948d4] {
  padding: 16px 20px; /* ลด padding ให้อ่านง่ายขึ้น */
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #fff;
  align-items: center;
  width: 100%;
  box-sizing: border-box; /* สำคัญมาก เพื่อรวม padding เข้ากับ width */
}

/* Media Query for Mobile */
@media (max-width: 820px) {
.contentWebboard[data-v-49e948d4] {
    padding: 40px 20px; /* Reduce padding for mobile */
}

  /* Change the layout for mobile */
.CheckBox-ThreadList[data-v-49e948d4] {
    flex-direction: column; /* Make the dropdown on top and the document list below */
    gap: 12px; /* Reduce gap for mobile */
}
.dropdown[data-v-49e948d4] {
    margin-bottom: 16px; /* Add space between checkbox and document list */
}
.custom-select[data-v-49e948d4] {
    padding: 12px 16px;
}
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/DocumentDetail.vue?vue&type=style&index=0&id=83154508&scoped=true&lang=css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

body[data-v-83154508] {
  background-color: #EEF2FB;
}
.contentWebboard[data-v-83154508] {
  padding: 40px 70px;
}

/* โครงสร้างของรายการ */
.document-list[data-v-83154508] {
  padding: 20px 20px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  margin: 0 0 24px 0
}
.document-list2[data-v-83154508] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  height: 300px;
  z-index: -1;
}
.document-list2[data-v-83154508]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  filter: blur(5px);
  background-image: inherit;
  z-index: -1;
}

/* รายการโพสต์ */
.post-item label[data-v-83154508] {
  width: 100%;
  height: auto;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #656565;
  cursor: pointer;
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  margin: 0 0 16px 0;
  box-sizing: border-box; /* ✅ แก้หลัก */
}
.post-item label[data-v-83154508]:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-color: #5D5FEF;
}
.post-item label input[type="radio"][data-v-83154508] {
  width: 12px;
  height: 12px;
  border: 2px solid #5D5FEF;
  border-radius: 50%;
  background-color: #FFFFFF;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.post-item label input[type="radio"][data-v-83154508]:checked {
  background-color: #5D5FEF;
  border-color: #5D5FEF;
}
.post-item[data-v-83154508] {
  margin-bottom: 12px;
  width: 100%;
}

/* รูปภาพ */
.ThreadIMG[data-v-83154508] {
  width: 288px;
  /* Fixed width */
  height: 350px;
  /* Automatically adjust the height based on the aspect ratio */
  -o-object-fit: cover;
     object-fit: cover;
  /* Ensures the image covers the container without distortion */
  border-radius: 8px;
  border: 1px solid #e5e5e5;
}
.ThreadIMG[data-v-83154508]:hover {
  cursor: pointer;
}

/* ภาพเต็มจอ */
.image-overlay[data-v-83154508] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.full-image[data-v-83154508] {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
}
.Group-post-content[data-v-83154508] {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}
.document-detail[data-v-83154508] {
  padding: 20px 20px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #fff;
  gap: 40px;
}
.Text-Title[data-v-83154508] {
  color: #5D5FEF;
}
.post-index[data-v-83154508] {
  gap: 20px;
  display: flex;
  text-align: start;
}
.post-index2[data-v-83154508] {
  display: flex;
  gap: 24px;
}
.TitleNumber[data-v-83154508] {
  font-size: 24px;
  color: #5D5FEF;
  width: 60px;
  display: flex;
  justify-content: center;
}
.PageTitle[data-v-83154508] {
  display: flex;
  flex-direction: column;
  margin: 0 0 20px 0;
}
.PageTitle h3[data-v-83154508] {
  font-size: 16px;
  font-weight: 500;
  color: #5D5FEF;
  margin: 0 0 4px 0;
}
.PageTitle p[data-v-83154508] {
  margin: 0;
}
.TextTitle[data-v-83154508] {
  font-size: 24px;
  color: #000000;
  font-weight: bold;
}
.post-detail[data-v-83154508] {
  font-size: 16px;
  color: #666;
  text-align: start;
  margin: 8px 0 12px 0;
}
.post-detail p[data-v-83154508] {
  color: #000000;
}
.post-detail-bottom[data-v-83154508] {
  font-size: 16px;
  color: #000000;
  margin: 0 0 12px 0;
  display: flex;
}
.post-detail-bottom svg[data-v-83154508] {
  fill: #5D5FEF;
}
.bottom-detail[data-v-83154508] {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 0 12px 0 0;
}
.post-detail-type[data-v-83154508] {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: 4px 8px;
  margin: 0 8px 0 0;
  gap: 4px;
  width: auto;
  height: 29px;
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  border-radius: 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: #656565;
  flex: none;
  order: 0;
  flex-grow: 0;
}
.PdfView[data-v-83154508] {
  display: flex;
}
.PdfView ul[data-v-83154508] {
  margin: 0;
}
.pdf-viewer[data-v-83154508] {
  width: 488px;
  height: 570px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: flex;
  justify-content: center;
}
.pdf-container[data-v-83154508] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pdf-container img[data-v-83154508] {
  max-width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
.custom-select[data-v-83154508] {
  padding: 20px 70px;
  background: #ffffff;
}
.DocumentList[data-v-83154508] {
  background: none !important;
  border: none !important;
  padding: 0;
  margin: 0;
}

/* ------------------------------------------------ */
/* ✅ เพิ่ม Media Queries Responsive */
@media (max-width: 500px) {
.contentWebboard[data-v-83154508] {
    padding: 40px 20px;
}
.post-item label[data-v-83154508] {
    width: 100%;
    font-size: 14px;
    gap: 8px;
}
.pdf-viewer[data-v-83154508] {
    width: 50%;
    height: 400px;
}
.ThreadIMG[data-v-83154508] {
    width: 250px;
    height: 300px;
}
.post-index[data-v-83154508] {
    display: flex;
    flex-direction: column; /* ✅ จัดเรียงในแนวตั้ง */
    align-items: flex-start; /* หรือ center ขึ้นอยู่กับการจัดชิด */
    gap: 4px; /* ระยะห่างระหว่างแต่ละบรรทัด */
}
.PdfView[data-v-83154508] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.PdfView ul[data-v-83154508] {
    padding: 0;
}
.pdf-container img[data-v-83154508]{
    height: 100%;
}
}
@media (max-width: 431px) {
.contentWebboard[data-v-83154508] {
    padding: 40px 20px;
}
.post-item label[data-v-83154508] {
    font-size: 12px;
    padding: 10px;
}
.pdf-viewer[data-v-83154508] {
    width: 100%;
    height: 300px;
}
.ThreadIMG[data-v-83154508] {
    width: 100%;
}
.TextTitle[data-v-83154508] {
    font-size: 20px;
}
}
@media (min-width: 768px) {
.contentWebboard[data-v-83154508] {
    padding: 40px 20px;
}
.pdf-viewer[data-v-83154508] {
    width: 488px;
    height: 570px;
}
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/ViewDocument.vue?vue&type=style&index=0&id=4b757c1a&scoped=true&lang=css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.contentWebboard[data-v-4b757c1a] {
    padding: 40px 70px;
}

/* โครงสร้างของรายการ */
.document-list[data-v-4b757c1a] {
    padding: 20px 20px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    margin: 0 0 24px 0
}
.SelectRadio[data-v-4b757c1a] {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.radio-label[data-v-4b757c1a] {
    display: flex;
    align-items: flex-start;
    /* Align radio button and text in a horizontal line */
    gap: 8px;
    /* Add some space between the radio button and text */
    margin-bottom: 8px;
    /* Optional, to space out the items vertically */
}
.text-content[data-v-4b757c1a] {
    display: flex;
    flex-direction: column;
    /* Ensure the text is stacked vertically */
}
.PageNumber[data-v-4b757c1a] {
    color: #656565;
}
.post-item[data-v-4b757c1a] {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 16px;
    width: 300px;
    background: #fff;
    border-radius: 0 8px 8px 0;
    /* เปลี่ยน horizontal offset เป็น 4px เพื่อให้เงาออกด้านขวาและด้านล่าง */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 16px;
    gap: 8px;
}

/* รูปภาพ */
.ThreadIMG[data-v-4b757c1a] {
    width: 288px;
    /* Fixed width */
    height: 100%;
    /* Automatically adjust the height based on the aspect ratio */
    -o-object-fit: cover;
       object-fit: cover;
    /* Ensures the image covers the container without distortion */
    border-radius: 8px;
    border: 1px solid #e5e5e5;
}
.ThreadIMG[data-v-4b757c1a]:hover {
    cursor: pointer;
}

/* ภาพเต็มจอ */
.image-overlay[data-v-4b757c1a] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.full-image[data-v-4b757c1a] {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
}
.Group-post-content[data-v-4b757c1a] {
    display: flex;
    flex-direction: column;
    /* จัดเรียงแนวตั้ง */
    flex-grow: 1;
    /* ขยายเต็มพื้นที่ของ parent container */
    justify-content: space-between;
    /* เนื้อหาบนสุด-ล่างสุดติดขอบ และมีช่องว่างตรงกลาง */
}
.TextTitle[data-v-4b757c1a] {
    font-size: 24px;
    color: #000000;
    font-weight: bold;
}
.post-detail-type[data-v-4b757c1a] {
    box-sizing: border-box;

    /* Auto layout */
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding: 4px 8px;
    margin: 0 8px 0 0;
    gap: 4px;

    width: auto;
    /* ปรับขนาดให้พอดีกับข้อความ */
    height: 29px;
    /* หรือใช้ min-height ถ้าต้องการให้ปรับขนาดอัตโนมัติ */

    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 20px;

    /* Text styles */
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #656565;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}
.post-detail[data-v-4b757c1a] {
    font-size: 16px;
    color: #666;
    text-align: start;
    margin: 8px 0 12px 0;
}
.post-detail p[data-v-4b757c1a] {
    color: #000000;
}
.post-detail-bottom[data-v-4b757c1a] {
    font-size: 16px;
    color: #000000;
    margin: 0 0 12px 0;
    display: flex;
}
.post-detail-bottom svg[data-v-4b757c1a] {
    fill: #5D5FEF;
    /* กำหนดสีให้กับไอคอน */
}
.bottom-detail[data-v-4b757c1a] {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 0 12px 0 0;
}
.document-detail[data-v-4b757c1a] {
    padding: 20px 0;
    width: auto;
}

/* ชื่อเอกสาร */
.post-index[data-v-4b757c1a] {
    height: 340px;
    gap: 20px;
    display: flex;
    text-align: start;
}


/* รายละเอียด */
.post-detail[data-v-4b757c1a] {
    font-size: 16px;
    color: #666;
    text-align: start;
    margin: 8px 0 12px 0;
}
.document-detail[data-v-4b757c1a] {
    display: flex;
}
.pdf-viewer[data-v-4b757c1a] {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    /* ✅ ปรับให้สูงเต็มจอ */
    overflow-y: auto;
    /* ✅ เลื่อนดูแนวตั้ง */
    overflow-x: auto;
    /* ✅ เลื่อนดูแนวนอนถ้าขนาดเกิน */
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    display: flex;
    justify-content: center;
}
.pdf-container[data-v-4b757c1a] {
    display: flex;
    flex-direction: column;
    /* ✅ เรียงภาพในแนวตั้ง */
    align-items: center;
    padding: 8px;
    border-radius: 8px 0 8px 8px;
}
.pdf-container img[data-v-4b757c1a] {
    max-width: 100%;
    height: 100%;
    margin-bottom: 10px;
    /* ✅ เพิ่มระยะห่างระหว่างภาพ */
    border-radius: 4px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
.pdf-viewer img[data-v-4b757c1a] {
    pointer-events: none;
    /* Disables interaction with the image */
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    /* Prevents selection of the image */
    -webkit-user-drag: none;
    /* Prevents dragging of the image in WebKit browsers */
    -moz-user-drag: none;
    /* Prevents dragging of the image in Firefox */
}
.document-list[data-v-4b757c1a] {
    list-style: none;
    padding: 0;
    width: 100%;
}
.document-item[data-v-4b757c1a] {
    border-bottom: 1px solid #ddd;
    padding: 10px;
}
.document-title[data-v-4b757c1a] {
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
    background: #f8f8f8;
    border-radius: 5px;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.document-title[data-v-4b757c1a]:hover {
    background: #eaeaea;
}
.document-title svg[data-v-4b757c1a] {
    transition: transform 0.3s ease;
}
.document-title svg.rotate[data-v-4b757c1a] {
    transform: rotate(180deg);
}
.document-details[data-v-4b757c1a] {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    padding: 12px;
    background: white;
    border-left: 3px solid #5D5FEF;
    transition: max-height 0.3s ease-out;
}


/* Transition Effect */
.slide-enter-active[data-v-4b757c1a],
.slide-leave-active[data-v-4b757c1a] {
    transition: opacity 0.3s, transform 0.3s;
}
.slide-enter[data-v-4b757c1a],
.slide-leave-to[data-v-4b757c1a] {
    opacity: 0;
    transform: translateY(-10px);
}
@media (max-width: 820px) {
.contentWebboard[data-v-4b757c1a] {
        padding: 40px 20px;
}
.post-item[data-v-4b757c1a] {
        box-sizing: border-box;
        /* ใช้ border-box */
        width: 100%;
        /* ขนาดตาม parent */
        margin: 0;
        border-radius: 8px 8px 0 0;
}
.pdf-viewer[data-v-4b757c1a] {
        border-radius: 0 0 8px 8px;
        /* ใช้ radius ที่ด้านล่าง */
        /* เงาที่ด้านข้างและด้านล่าง */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.document-details[data-v-4b757c1a] {
        display: flex;
        flex-direction: column;
}
}
@media (max-width: 768px) {
.post-item[data-v-4b757c1a] {}
}
@media (max-width: 431px) {
.document-detail[data-v-4b757c1a] {
        display: flex;
        flex-direction: column-reverse;
}
.post-item[data-v-4b757c1a] {}
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/GoogleGmailverify.vue?vue&type=style&index=0&id=7227019e&scoped=true&lang=css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.verify-container[data-v-7227019e] {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
}
.verify-container h1[data-v-7227019e] {
    font-size: 28px;
    margin-bottom: 20px;
}
.verify-container p[data-v-7227019e] {
    font-size: 16px;
    margin-bottom: 20px;
}
.verify-container button[data-v-7227019e] {
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}
.verify-container button[data-v-7227019e]:hover {
    background-color: #0056b3;
}
.error-message[data-v-7227019e] {
    margin-top: 15px;
    color: red;
    font-size: 14px;
}