/*-- Start Import Font */
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
@import url("https://fonts.googleapis.com/css2?family=Itim&family=Noto+Sans+Thai+Looped&family=Sarabun:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@700&display=swap");
/*-- END Import Font */

/*-- Start Setting */
html,
body {
  background-color: #fcf1ff;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.center {
  align-items: center;
  text-align: center;
  float: center;
}
#logo {
  position: relative;
  height: 70px;
  margin: auto;
  object-fit: cover;
}
.fonttopic {
  font-size: 23px;
  font-weight: bolder;
  font-style: normal;
}
.fontcontent {
  font-size: 18px;
  font-weight: 200;
  font-style: normal;
}
.fontsmall {
  font-weight: 400;
  font-size: small;
}
.fontplaylist {
  font-weight: 700;
  font-size: larger;
  font-family: "Noto Sans Thai Looped", "sans-serif";
}
.linehight1 {
  margin-top: 13px;
}

.linehight2 {
  margin-top: 13px;
  margin-bottom: 13px;
}

.displaydatetime {
  margin-left: 91px;
  color: black;
  font-family: "Noto Sans Thai Looped", "sans-serif";
  font-weight: 100;
  font-size: 13px;
}
.playlistcolorbackground {
  color: black;
  border-color: 2px white;
  font-family: "Itim", sans-serif;
  font-size: 21px;
  width: auto;
  height: 25px;
  padding: 10px;
  padding-left: 13px;
  border-radius: 5px;
  background: linear-gradient(
    180deg,
    rgb(224, 224, 224) 10%,
    rgb(223, 222, 222) 90%
  );
  overflow: hidden;
}

/*-- End Setting */

/*-- Star Navbar Header --*/

header {
  display: flex;
  justify-content: space-between;
  padding: 15px 49px;
  background: linear-gradient(180deg, #a467d3 10%, rgb(221, 119, 224) 100%);
}

ul {
  list-style: none;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.4s ease 0s;
}

@media (max-width: 500px) {
  #logo {
    float: right;
  }
  nav ul {
    display: contents;
    width: 100%;
    padding: 5px 5px;
  }
}

.topnav {
  padding-left: 100px;
  overflow: hidden;
  background-color: #f9f9f9;
  font-size: small;
  font-family: "Noto Sans Thai", sans-serif;
}

.topnav a {
  float: left;
  color: #000000;
  text-align: center;
  margin: auto;
  padding: 9px 16px;
  text-decoration: none;
  font-size: 15px;
}

.topnav a:hover {
  background-color: rgba(255, 194, 255, 0.658);
  color: rgb(0, 0, 0);
  transition: all 0.5s ease 0s;
}

.topnav a.active {
  background-color: #04aa6d;
  color: rgb(255, 0, 0);
}

.redlive {
  background: red;
  color: white;
  border-radius: 3rem;
  padding: 0.1rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  align-items: center;
  display: inline-flex;
  vertical-align: middle;
  font-size: 11px;
  font-family: "Noto Sans Thai", sans-serif;
}

/*-- End Navbar Header --*/

/* Start Dropdown */

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 15px;
  border: none;
  outline: none;
  color: rgb(0, 0, 0);
  padding: 8.5px 35px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}
.dropdown .dropbtn:hover {
  color: rgb(162, 0, 255);
}

.dropdown-content {
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: rgb(255, 0, 0);
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: rgba(183, 0, 255, 0.301);
}

.dropdown:hover .dropdown-content {
  display: block;
}

/*-- End Dropdown */

/*-- Start Header Live Blink */
.mainheader {
  display: inline;
  text-align: center;
  padding: 5px 5px;
  font-size: large;
  color: rgb(0, 0, 0);
  font-family: "Noto Sans Thai Looped", "sans-serif";
}
.light.blink {
  width: 21px;
  height: 21px;
  background: red;
  border-radius: 50px;
  display: inline-block;
}
.blink {
  animation: blink 0.6s alternate infinite;
}
@keyframes blink {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}

.hr {
  position: static;
  align-items: center;
  width: 80%;
  border: 0;
  height: 0;
  border-top: 1px solid rgb(247, 185, 255);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.hr2 {
  position: sticky;
  align-items: center;
  width: 40%;
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.hr3 {
  margin-bottom: 15px;
  position: sticky;
  align-items: center;
  width: 100%;
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.hr4 {
  position: sticky;
  align-items: center;
  width: 100%;
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/*-- End Header Live Blink */

/*-- Start Shadow */
.shadow1 {
  -webkit-box-shadow: 3px 3px 10px -4px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 3px 3px 10px -4px rgba(0, 0, 0, 0.4);
  box-shadow: 3px 3px 10px -4px rgba(0, 0, 0, 0.4);
}

/*-- Start Button */

.buttondownload {
  display: inline-block;
  height: 30px;
  width: 200px;
  line-height: 29px;
  text-decoration: none;
  border-radius: 5px;
  background-color: rgb(162, 0, 255);
  color: white;
  cursor: pointer;
  font-family: "Itim", sans-serif;
  font-size: large;
  box-shadow: 0px 0px 5px -3px #000000;
  -webkit-box-shadow: 0px 0px 5px -3px #000000;
}

.buttondownload:hover {
  background-color: rgb(255, 0, 200);
  color: #fff;
  transition: all 0.2s ease 0s;
}

button {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 15px 20px;
  position: relative;
}
button:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 4px;
  left: 50%;
  position: absolute;
  background: rgba(255, 0, 0, 0.815);
  transition: width 0.4s ease 0s, left 0.4s ease 0s;
  width: 0;
}
button:hover:after {
  width: 100%;
  left: 0;
}

/*-- END Button */

/*-- Start Choose Playlist */
.pageplaylist {
  text-align: center;
  padding: auto;
  position: relative;
  padding-top: 15px;
  padding-bottom: 200px;
}
.playlistprogram {
  display: inline-block;
  text-align: center;
  padding-bottom: 85px;
  width: 300px;
  height: 80px;
  box-shadow: -1px 5px 20px 0px rgba(0, 0, 0, 0.81);
  -webkit-box-shadow: -1px 5px 20px 0px rgba(0, 0, 0, 0.81);
  -moz-box-shadow: -1px 5px 20px 0px rgba(0, 0, 0, 0.81);
  background-color: transparent;
}
/*-- End Choose Playlist */

/*-- Start Zoom */
.zoom {
  transition: transform 0.6s;
}
.zoom:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.zoomsc {
  transition: transform 0.2s;
}
.zoomsc:hover {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}
/*-- End Zoom) */

/*-- Start Box Playlist */
.container {
  max-width: 1250px;
  margin: 50px auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 25px;
}
.container .main-video-container {
  flex: 1 1 700px;
  border-radius: 5px;
  background-color: rgb(255, 255, 255);
  padding: 15px;
  box-shadow: 9px 8px 12px -7px rgba(0,0,0,0.41);
  -webkit-box-shadow: 9px 8px 12px -7px rgba(0,0,0,0.41);
  -moz-box-shadow: 9px 8px 12px -7px rgba(0,0,0,0.41);
}
.container .main-video-container .main-video {
  margin-bottom: 7px;
  border-radius: 5px;
  width: 100%;
}
.container .main-video-container .main-vid-title {
  font-size: 25px;
  color: rgb(0, 0, 0);
}
.container .video-list-container {
  flex: 1 1 350px;
  height: 690px;
  overflow-y: scroll;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 15px;
  box-shadow: 9px 8px 12px -7px rgba(0,0,0,0.41);
  -webkit-box-shadow: 9px 8px 12px -7px rgba(0,0,0,0.41);
  -moz-box-shadow: 9px 8px 12px -7px rgba(0,0,0,0.41);
}
.container .video-list-container::-webkit-scrollbar {
  width: 12px;
}
.container .video-list-container::-webkit-scrollbar-track {
  background-color: rgb(226, 226, 226);
  border-radius: 5px;
}
.container .video-list-container::-webkit-scrollbar-thumb {
  background-color: #8f54a0;
  border-radius: 5px;
}
.container .video-list-container::-webkit-scrollbar-thumb:hover {
  background-color: rgb(134, 52, 156);
}

.container .video-list-container .list {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 0px;
  background-color: #eee;
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 12px;
}

.container .video-list-container .list:last-child {
  margin-bottom: 0;
}
.container .video-list-container .list:hover {
  background-color: rgb(200, 200, 200);
}
.container .video-list-container .list:active {
  background-color: rgb(139, 139, 139);
}
.container .video-list-container .list:active .list-title {
  color: #fff;
}
.container .video-list-container .list .list-video {
  width: 130px;
  height: 80px;
  margin: 8px 8px 8px 8px;
  border-radius: 5px;
}
.container .video-list-container .list .list-title {
  margin-top: 6px;
  font-size: 19px;
  color: rgb(0, 0, 0);
}
@media (max-width: 1200px) {
  .container {
    margin: 0;
  }
}
@media (max-width: 450px) {
  .container .main-video-container .main-vid-title {
    font-size: 15px;
    text-align: center;
  }
  .container .video-list-container .list {
    flex-flow: column;
    gap: 10px;
  }
  .container .video-list-container .list .list-video {
    width: 100%;
  }
  .container .video-list-container .list .list-title {
    font-size: 15px;
    text-align: center;
  }
}

/*-- End Box Playlist */

/*-- Start link */
.link {
  color: black;
  text-decoration: none;
}
.link:hover {
  color: rgb(255, 255, 255);
  transition: all 0.3s;
  transform: translateY(5px);
  cursor: pointer;
}
/*-- END link */

/*-- Start Video */
.videomain {
  display: flex;
  justify-content: center;
  margin-bottom: 80px;
  margin-top: 25px;
}
.center {
  align-items: center;
  text-align: center;
}
.formatvideo {
  padding-top: 25px;
  padding-bottom: 25px;
}
/*-- END Video */

/*-- Start footer */
.footer {
  color: white;
  background: linear-gradient(180deg, rgb(220, 99, 224) 40%, #8a26d7 100%);
  padding: 25px;
  text-align: center;
}
/*-- END footer */

/*-- Start Social */
.social {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
}
.social:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  transition: transform 0.4s;
}
/*-- END Social */

/*-- Start Marquee */
.marquee {
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  background-color: #f9f9f9;
  font-family: "Sarabun", sans-serif;
  font-size: small;
}
/*-- End Marquee */

/*-- Start Schedule */
select {
  width: 190px;
  padding: 8px;
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  border: none;
  box-shadow: 0px 0px 5px -3px #000000;
  -webkit-box-shadow: 0px 0px 5px -3px #000000;
  border-radius: 100px 100px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A%23424242%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
  background-repeat: no-repeat;
  background-position: 94%;
  background-size: 14px;
}
select:hover {    
  background-color: rgb(243, 243, 243);
}

table {
  margin: 2px auto;
  background-color: #f5a5ff;
  border-radius: 10px;
  max-width: 600px;
  min-width: 360px;
  -webkit-box-shadow: 3px 3px 10px -4px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 3px 3px 10px -4px rgba(0, 0, 0, 0.4);
  box-shadow: 3px 3px 10px -4px rgba(0, 0, 0, 0.4);
  border-spacing: 11px;
  margin-bottom: 5em;
}

tbody td {
  border-bottom: 1px solid black;
  border-radius: 7px;
  padding: 5px;
  font-weight: 400;
}

tbody td:nth-child(even) {
  background-color: rgb(255, 255, 255);
}

tr:nth-child(odd) td:nth-child(even) {
  background-color: rgb(255, 255, 255);
}

tbody td:nth-child(odd) {
  background-color: rgb(255, 255, 255);
}

thead td {
  text-align: center;
  font-size: x-large;
  color: rgb(8, 8, 8);
  background-color: #ffffff;
  border-radius: 9px;
  padding: 5px;
  border-bottom: 1px solid black;
}

tfoot td {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.7);
}

th {
  text-transform: uppercase;
  font-family: "Playfair Display", serif;
  font-size: 1.2rem;
  text-align: center;
  background-color: rgb(255, 255, 255);
  border-radius: 7px;
  border-bottom: 1px solid black;
}

td {
  font-family: "Open Sans", sans-serif;
}

/*-- End Schedule */

/* Start Scrollbar CSS */
/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #8f54a0 #ffffff;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 14px;
}
*::-webkit-scrollbar-track {
  background: #ffffff;
}
*::-webkit-scrollbar-thumb {
  background-color: #8f54a0;
  border-radius: 10px;
}
/* End Scrollbar CSS */

/* Start Block Dummy */
.parentdivimage {
  background-color: transparent;
  width: 300px;
  height: 60px;
  text-decoration: none;
  font-weight: 800;
}
/* End Block Dummy */

/* Start Top to Back Scroll */
#button {
  display: inline-block;
  background-color: #ff9800;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 18px;
  right: 18px;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 34px;
  color: #ffffff;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
}
/* Ending Top to Back Scroll */


.fb-comments {
font-weight: 200;
display:block;
margin:0 auto;
}