/**🟢🟢🟢🟢🟢🟢โปสเตอร์เลือกตอน **/
  .separatorz {
   clear: both;
   padding: 0em 0;
   text-align: center;     
    }
   .separatorz img {
    border-style: groove;     
    width: 600px;     
    } /**🔴🔴🔴🔴🔴🔴สิ้นสุด โปสเตอร์เลือกตอน **/ 
    
/**🟢🟢🟢🟢🟢🟢ข้อความโปสเตอร์เลือกตอน **/
     /* จัดองค์ประกอบให้อยู่กึ่งกลาง */
   .demotext {
    display: flex; /**/
    justify-content: center; /*ปิดตัวนี้เพื่อข้อความชิดขอบ เปิดด้วยข้อความอยู่กึ่งกลาง*/
    align-items: center;
    gap: 5px; /* เพิ่มระยะห่างระหว่างข้อความกับปุ่ม */  
   }
     /* สไตล์สำหรับข้อความ */
   #demotext-1 {
      font-size: 18px;
      font-weight: bold; /**/
      color: #c3d2d9; /* สีตัวอักษร */
      transform: translate(0px, 4px); /* ระบุทิศทางการเคลื่อนย้ายได้ทั้งในแกน 0 X (แนวนอน) และแกน 10 Y (แนวตั้ง) */
    } /** 🔴🔴🔴🔴🔴🔴สิ้นสุด ข้อความโปสเตอร์เลือกตอน **/

/**🟢🟢🟢🟢เส้นล่างโปสเตอร์เลือกตอน🟢🟢🟢🟢เส้นล่าง🟢🟢🟢🟢เส้นล่าง🟢🟢🟢🟢*/
   .tcin {
      text-align: center;
     /* font-family: Arial, sans-serif; /*******ฟอนต์ตัวหนังสือ*********/
      overflow: hidden; /* ป้องกัน scrollbar จากข้อความที่วิ่งเกิน */
    }
   .terq {
      border: 1px solid rgb(82, 82, 82);  
      padding-top: 0px; /*******ปรับความกว้างกล่องด้านบน*********/
      margin-top: 0px; /********ระยะห่างขอบด้านบน*************/
      padding-bottom: 0px; /*******ปรับความกว้างกล่องด้านล่าง*********/
      margin-bottom: 0px; /******ระยะห่างขอบล่าง***********/ 
      padding-right: 0px;
      margin-right: 0px;
      padding-left: 0px;
      margin-left: 0px;
      background-color: #; /*******สีพื้นหลังข้อความ*********/
      text-align: center;
      box-shadow: 0 0 15px rgba(0,0,0,0.1); /*****เงาปุ่ม******/
      position: relative; /* สำหรับตำแหน่งของข้อความ */  
    }
   @keyframes run-left-and-fader {
   0% {
      transform: translateX(0%);
      opacity: 1;
            }
   99% {
      transform: translateX(-100%);
      opacity: 1;
      visibility: visible;
            }
   100% {
      transform: translateX(-100%);
      opacity: 0;
      visibility: hidden;
            }
        }
   .teed1 {
      font-size: 18px; /* ทำให้ข้อความใหญ่ขึ้น */
      font-weight: bold;
      color: white; /* สีข้อความ */
      padding-top: 0px; /*******ปรับความกว้างกล่องด้านบน*********/
      padding-bottom: 0px; /*******ปรับความกว้างกล่องด้านล่าง*********/
      animation: run-left-and-fader 10s linear 10 forwards; /* 2s ต่อรอบ, วน 10 รอบ, คงสถานะสุดท้าย */
      white-space: nowrap;
      overflow: hidden;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
     /*🔴 display: inline-block; /* สำคัญสำหรับ transform 🔴ปิดได้ถ้าไม่มีข้อความ เพื่อให้เหลือเพียงเส้น */
      padding-left: 100%; /* 🟢ทำให้ข้อความเริ่มต้นจากนอกจอทางขวา */      
      }  /*🔴🔴🔴🔴🔴🔴🔴🔴🔴สิ้นสุดเส้นล่างโปสเตอร์เลือกตอน*/

/**ปิด*************************************************************************************/

   .bcin { /*🟢🟢🟢🟢เส้นล่าง🟢🟢🟢🟢เส้นล่าง🟢🟢🟢🟢เส้นล่าง🟢🟢🟢🟢*/
      text-align: center;
     /* font-family: Arial, sans-serif; /*******ฟอนต์ตัวหนังสือ*********/
      overflow: hidden; /* ป้องกัน scrollbar จากข้อความที่วิ่งเกิน */
      display: none;  /*ปิดเส้น*/
    }
   .perq {
      border: 1px solid rgb(82, 82, 82); 
      padding-top: 0px; /*******ปรับความกว้างกล่องด้านบน*********/
      margin-top: 0px; /********ระยะห่างขอบด้านบน*************/
      padding-bottom: 0px; /*******ปรับความกว้างกล่องด้านล่าง*********/
      margin-bottom: 0px; /******ระยะห่างขอบล่าง***********/ 
      padding-right: 0px;
      margin-right: 0px;
      padding-left: 0px;
      margin-left: 0px;
      background-color: #; /*******สีพื้นหลังข้อความ*********/
      text-align: center;
      box-shadow: 0 0 15px rgba(0,0,0,0.1); /*****เงาปุ่ม******/
      position: relative; /* สำหรับตำแหน่งของข้อความ */  
    }
   @keyframes run-left-and-fader {
   0% {
      transform: translateX(0%);
      opacity: 1;
            }
   99% {
      transform: translateX(-100%);
      opacity: 1;
      visibility: visible;
            }
   100% {
      transform: translateX(-100%);
      opacity: 0;
      visibility: hidden;
            }
        }
   .deed1 {
      font-size: 18px; /* ทำให้ข้อความใหญ่ขึ้น */
      font-weight: bold;
      color: white; /* สีข้อความ */
      padding-top: 0px; /*******ปรับความกว้างกล่องด้านบน*********/
      padding-bottom: 0px; /*******ปรับความกว้างกล่องด้านล่าง*********/
      animation: run-left-and-fader 10s linear 10 forwards; /* 2s ต่อรอบ, วน 10 รอบ, คงสถานะสุดท้าย */
      white-space: nowrap;
      overflow: hidden;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
     /*🔴 display: inline-block; /* สำคัญสำหรับ transform 🔴ปิดได้ถ้าไม่มีข้อความ เพื่อให้เหลือเพียงเส้น */
      padding-left: 100%; /* 🟢ทำให้ข้อความเริ่มต้นจากนอกจอทางขวา */      
      }  /*🔴🔴🔴🔴🔴🔴🔴🔴🔴สิ้นสุดเส้นล่าง*/

  /*🟢🟢🟢🟢🟢🟢ปิดปุ่มเฟส*/
  /* จัดองค์ประกอบให้อยู่กึ่งกลาง */
  .center-ext {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px; /* เพิ่มระยะห่างระหว่างข้อความกับปุ่ม */  
}
/* สไตล์สำหรับข้อความ */
 .text-1 {
    font-size: 18px;
    font-weight: bold;
    color: #c3d2d9; /* สีตัวอักษร */
    transform: translate(0px, 4px); /* ระบุทิศทางการเคลื่อนย้ายได้ทั้งในแกน 0 X (แนวนอน) และแกน 10 Y (แนวตั้ง) */
    display: none;  /*ตัวปิด ปิดปุ่มเฟส*/
}

/* สไตล์สำหรับปุ่ม */
  .button-1 {
    margin-top: 10px; /************ขอบด้านบน*************/
    margin-bottom: 0px; /************ขอบล่าง*************/
    background-color: #33577F;
    font-size: 18px;
    font-weight: bold;
    color: white;
    padding: 2px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: 1px solid white; /**เงาสีชายแดนปุ่ม อาจจะทำให้ผมเคลื่อนไหว**/
   /* border: none; /*ซ้ำกับตัวบน none ปิดเงาสีชายแดนปุ่ม เมื่อเปิดตัวบนให้ปิดตัวล่าง*/  
    border-radius: 8px; 
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: none;  /*ตัวปิด ปิดปุ่มเฟส*/
}
  .button-1:hover {
    background-color: #5500ff;
    box-shadow: 0 1px #666; /******เงาปุ่ม*******/
    transform: translateY(2px);
  }  /*🔴🔴🔴🔴🔴🔴ปิดปุ่มสุดปุ่มเฟส*/