@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600&display=swap");
body {
   font-family: 'Chakra Petch', sans-serif;
   font-size: 17px; 

	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a:link {
	text-decoration: none;
	color:#FFFFFF;
}
a:visited {
	text-decoration: none;
	color:#FFFFFF;
}
/*
a:hover {
	text-decoration: underline;
}
*/
a:active {
	text-decoration: none;
	color:#FFFFFF;
}
#box-search {
	
	border:0px solid #CCCCCC;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
.stylefour2{
display: flex;
justify-content: center;
align-items: center;
	}
#stylefour{
  position:relative;
  display:block;
  height:48px;
  font-size:18px;
  height:58px;   /* ความสูง */
width: fit-content ;

  /*background-color:#000000;   สีเมนูด้านบน #ed9005*/

  }

#stylefour ul{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	}

#stylefour ul li{
	display:block;
	float:left;

	margin:0;

	}

#stylefour ul li a{
	display:block;
	float:none;
vertical-align: center;
	color:#FFFFFF;
	text-decoration:none;
	padding:15px 20px 0 20px;
	height:39px;
	}

#stylefour ul li a:hover,#stylefour ul li a.current{
	display:block;
	color:#CCCCCC;
	height:58px;
	background-color:#222222;   /* สีเมนูเมาส์OVER */
	}
#bg-main {
	background-color:#000000;   /* สีพื้นตรงกลาง */
}
#font-main {

   font-size:16px;
   color:#FFFFFF;
}
#box-movie {
	background-color:#333333;
	border:1px solid #CCCCCC;
}
#box-menu {
	background-color:#333333;
	border:0px solid #000000;
}
.menu_div ul
{
    padding:0px 10px 10px 10px;
    margin:0px;
   
    font-size:15px;
    color:#FFF;
    list-style:none;
    text-indent:5px;
    background:#333333;
}
.menu_div ul li
{
    background:#333333;
    line-height:35px;  /* ระยะห่างระหว่างบรรทัด */
    border-bottom:1px ;  /* เส้นขั้นระหว่างเมนู solid #000 */

}
.menu_div ul li a
{
    text-decoration:none;
    color:#FFF;
    display:block;
}
.menu_div ul li a:hover
{
    background:#222222;
}
.menu_div ul li#active
{
    background:#3ea5ea;
}
#title-movie {
	
	font-size:16px;
	
	color:#FFFFFF;
	text-shadow:0.1em 0.1em #333;
	border-bottom:1px solid #f1b00d;
}
#font-title {
	
	font-size:15px;
	
	color:#f1b00d;
}
#footer {
	background-color:#222222;
	
	font-size:15px;
	color:#333333;
}
.movie-corner {
    width: 75px;
    position: absolute;
    text-align: center;
    line-height: 20px;
    letter-spacing: 1px;
    color: #f0f0f0;
    top: 10px;
    right: -19px;
    left: auto;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    font-weight: 600;
    box-shadow: 0 0 0px rgba(0, 0, 0, .3);
    text-shadow: 1px 1px 1px #222


}
.movie-HD {
    background: #dc0603
}
.movie-SD {
    background: #ff9900
}
.movie-ZM {
    background: #0e9f00
}
.movie-SUB {
    background: #0033ff
}

.browse_page{
   width: fit-content;
    clear:both;
    margin-left:12px;
    height:35px;
    margin-top:5px;
    display:block;
}
.browse_page a,.browse_page a:hover{
    display:block;
    height:18px;
    width:18px;
    font-size:10px;
    float:left;
    margin-right:2px;
    border:1px solid #CCCCCC;
    background-color:#F4F4F4;
    color:#333333;
    text-align:center;
    line-height:18px;
    font-weight:bold;
    text-decoration:none;
}
.browse_page a:hover{
    border:1px solid #f57e00;
    background-color:#f57e00;
    color:#FFFFFF;
}
.browse_page a.selectPage{
    display:block;
    height:18px;
    width:18px;
    font-size:10px;
    float:left;
    margin-right:2px;
    border:1px solid #f57e00;
    background-color:#f57e00;
    color:#FFFFFF;
    text-align:center;
    line-height:18px;
    font-weight:bold;
}
.browse_page a.SpaceC{
    display:block;
    height:18px;
    width:18px;
    font-size:10px;
    float:left;
    margin-right:2px;
    border:0px dotted #f57e00;
    font-size:11px;
    background-color:#FFFFFF;
    color:#333333;
    text-align:center;
    line-height:18px;
    font-weight:bold;
}
.browse_page a.naviPN{
    width:50px;
    font-size:12px;
    display:block;
    height:18px;
    float:left;
    border:1px solid #f57e00;
    background-color:#f57e00;
    color:#FFFFFF;
    text-align:center;
    line-height:18px;
    font-weight:bold;   
}
.browse_page a.naviPN:hover{
    width:50px;
    font-size:12px;
    display:block; 
    height:18px;
    float:left;
    border:1px solid #f57e00;
    background-color:#f57e00;
    color:#FFFFFF;
    text-align:center;
    line-height:18px;
    font-weight:bold;   
}


.box {
  height: 347px;  /* ส่วนสูงของกล่อง */
  position: relative;
  border: 0px ;  /* เส้นขอบของกล่อง solid #BBB*/
  background: #303030;   /* สีพื้นของกล่อง */
  padding: 1px 0 0px;   /* ความสูงของรูป */
  margin:3;   /* ระยะห่างของกล่อง */
}
.ribbon {
  position: absolute;
  right: 0px; top: 0px;    /* ขึ้นลงของแถบสี */
  z-index: 1;
  overflow: hidden;
  width: 100px; height: 70px;    /* มุมของแถบสี */
  text-align: right;
}
.ribbon span {
  font-size: 15px;  /* ขนาดตัวอักษรในกล่อง */
  font-weight: 0;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 19px;    /* ความสูงของแถบสี */
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block; 
  
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 13px; right: -30px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  /*border-left: 3px solid #1e5799;   สีเงา */
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  /* border-top: 3px solid #1e5799;  สีเงา */
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  /*border-right: 3px solid #1e5799;   สีเงา */
  border-bottom: 3px solid transparent;
  /* border-top: 3px solid #1e5799;  สีเงา */
}


.ribbon2 {
  position: absolute;
  left: -25px; top: -4.5px;    /* ขึ้นลงของแถบสี */
  z-index: 1;
  overflow: hidden;
  width: 80px; height: 70px;    /* มุมของแถบสี */
  text-align: left;
}
.ribbon2 span {
  font-size: 13px;  /* ขนาดตัวอักษรในกล่อง */
  font-weight: 0;
  color: #FFF;
  background: #000000;

  text-transform: uppercase;
  text-align: center;
  line-height: 19px;    /* ความสูงของแถบสี */
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  width: 40px;
  display: block; 
  
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 10px; left: 30px;   /* ความยาว */
}
 /* ขอบของบล๊อก */
#rcorners4 {
    border-radius: 6px 6px 0px 0px;
    padding: 0px; 
    width: 100%;
    height: 20px; 
} 

#rcorners5 {
    border-radius: 0px 0px 6px 6px;
    padding: 0px; 
    width: 100%;
    height: 10px; 
}