@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: 43px;
    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: 16px;
    color: #FFF;
    list-style: none;
    text-indent: 5px;
    background: #333333;
  }

  .menu_div ul li {
    background: #333333;
    line-height: 35px;
    /* ระยะห่างระหว่างบรรทัด */
    border-bottom: 1px;
    /* เส้นขั้นระหว่างเมนู solid #000 */
    text-align: left;
  }

  .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
  }

  .movie-thumb-table {
    width: 100%;
  }

  .browse_page {
    width: fit-content;
    clear: both;
    margin-left: 12px;
    height: 35px;
    margin-top: 20px;
    display: block;
    padding: 1%;
  }

  .browse_page a,
  .browse_page a:hover {
    /*2..>>*/
    display: block;
    width: 28px;
    height: 23px;
    font-size: 18px;
    float: left;
    margin-right: 8px;
    border: 1px solid #CCCCCC;
    background-color: #F4F4F4;
    color: #333333;
    text-align: center;
    line-height: 18px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;


  }

  .browse_page a:hover {
    border: 1px solid #B81212;
    background-color: #B81212;
    color: #FFFFFF;
    border-radius: 4px;
  }

  .browse_page a.selectPage {
    /*1*/
    display: block;
    width: 28px;
    height: 23px;
    font-size: 18px;
    float: left;
    margin-right: 8px;
    border: 1px solid #B81212;
    background-color: #B81212;
    color: #FFFFFF;
    text-align: center;
    line-height: 18px;
    font-weight: bold;
    border-radius: 4px;

  }

  .browse_page a.SpaceC {
    /*...*/
    display: block;
    width: 50px;
    height: 25px;
    font-size: 18px;
    float: left;
    margin-right: 8px;
    border: 0px dotted #B81212;
    font-size: 18px;
    background-color: #FFFFFF;
    color: #333333;
    text-align: center;
    line-height: 18px;
    font-weight: bold;
    border-radius: 4px;
  }

  .browse_page a.naviPN {
    /*next*/
    width: 80px;
    height: 23px;
    font-size: 18px;
    display: block;
    float: left;
    border: 1px solid #B81212;
    background-color: #B81212;
    color: #FFFFFF;
    text-align: center;
    line-height: 18px;
    font-weight: bold;
    border-radius: 4px;
  }

  .browse_page a.naviPN:hover {
    /*next*/
    width: 80px;
    height: 23px;
    font-size: 18px;
    display: block;
    float: left;
    border: 1px solid #B81212;
    background-color: #B81212;
    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;
  }


  /* Effect img */
  #m5 {
    -webkit-mask-image: linear-gradient(45deg, #000 25%, rgba(0, 0, 0, .2) 50%, #000 75%);
    /*มีมุม 45 องศา*/
    mask-image: linear-gradient(45deg, #000 25%, rgba(0, 0, 0, .2) 50%, #000 75%);
    -webkit-mask-size: 800%;
    /*ไล่ระดับสีจะทำซ้ำ 8 ครั้ง*/
    mask-size: 800%;
    -webkit-mask-position: 0;
    /*0เริ่มจากด้านขวา*/
    mask-position: 0;
  }

  #m5:hover {
    transition: mask-position 2s ease, -webkit-mask-position 1s ease;
    /*transition 1 ความเร็ว 1วิ */
    -webkit-mask-position: 120%;
    mask-position: 120%;
    opacity: 1;
    /*opacity 1 เห็นภาพได้เมื่อภาพเคลื่อนไหวเสร็จสิ้น*/
  }

  /* =========================
   MOBILE RESPONSIVE
========================= */
  @media screen and (max-width: 768px) {

    /* ตารางหลักเต็มจอ */
    table {
      width: 100% !important;
    }

    /* ซ่อนเมนูซ้าย ขวา */
    td[width="10%"] {
      display: none !important;
    }

    /* ตรงกลางเต็มจอ */
    td[width="80%"] {
      width: 100% !important;
      display: block;
    }

    /* ตารางกลาง */
    #bg-main {
      width: 100% !important;
    }

    /* กล่องหนัง */
    .box {
      width: 100% !important;
      height: auto !important;
    }

    /* รูปหนัง */
    #m5 {
      width: 100% !important;
      height: auto !important;
    }

    /* ตารางรายการหนัง */
    table[width="170"],
    table[width="163"],
    td[width="180"] {
      width: 48% !important;
    }

    /* จัด 2 คอลัมน์ */
    td[width="180"] {
      display: inline-block;
      vertical-align: top;
      margin-bottom: 10px;
    }

    /* banner โฆษณา */
    table[width="728"],
    img[width="728"] {
      width: 100% !important;
      height: auto !important;
    }

    /* ตัวหนังสือ */
    h2,
    h3 {
      font-size: 20px !important;
    }

    /* ตารางรายการหนัง */
    table[cellspacing="1"] {
      width: 100% !important;
    }

    /* td หนัง */
    td[width="180"] {
      width: 50% !important;
      display: inline-block !important;
      vertical-align: top;
      margin: 0 !important;
      padding: 4px !important;
      box-sizing: border-box;
    }

    /* กล่องหนัง */
    .box {
      width: 100% !important;
      height: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden;
    }

    /* ตารางด้านในทั้งหมด */
    .box table {
      width: 100% !important;
    }

    /* td ด้านใน */
    .box td {
      width: 100% !important;
    }

    /* รูปหนัง */
    #m5 {
      width: 100% !important;
      height: auto !important;
      display: block;
    }

    /* ตารางรูป */
    table[width="170"],
    table[width="163"],
    table[width="160"] {
      width: 100% !important;
    }

    /* ชื่อหนัง */
    #font-main {
      font-size: 13px !important;
      line-height: 1.4;
    }

    /* กล่องชื่อหนัง */
    .container.p-3 {
      padding: 6px !important;
    }

    /* ribbon */
    .ribbon span {
      font-size: 11px !important;
    }

    .ribbon2 span {
      font-size: 10px !important;
    }

  }

  /* =========================
   MOBILE HEADER RESPONSIVE
========================= */
  @media screen and (max-width: 768px) {

    /* แปลง tr เป็น flex */
    .header-row {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
    }

    /* logo */
    .header-logo {
      order: 1;
      width: 50% !important;
      text-align: left !important;
      padding-left: 10px;
    }

    /* search */
    .header-search {
      order: 2;
      width: 50% !important;
      text-align: right !important;
      padding-right: 10px;
    }

    /* title กลาง */
    .header-center {
      order: 3;
      width: 100% !important;
      display: none;
      text-align: center !important;
      padding: 10px 0;
    }

    /* ซ่อน spacer */
    td[width="5"] {
      display: none !important;
    }

    /* logo responsive */
    .header-logo img {
      width: 180px !important;
      height: auto !important;
    }

    /* search box */
    .header-search input[type="text"] {
      width: 120px !important;
    }

    /* title */
    .header-center h1 {
      font-size: 22px !important;
      margin: 0;
    }

  }

  /* responsive image */
  .img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* popup ads mobile */
  @media screen and (max-width: 768px) {

    .white_content1 {
      width: 95% !important;
      left: 50% !important;
      margin-left: 0 !important;
      transform: translateX(-50%);
      padding: 10px;
      box-sizing: border-box;
    }

    .white_content1 img {
      max-width: 100% !important;
      height: auto !important;
    }

  }

  /* =========================
   MOBILE MENU RESPONSIVE
========================= */
  @media screen and (max-width: 768px) {

    /* container เมนู */
    #menucase{
        overflow-x:auto;
        overflow-y:hidden;
        white-space:nowrap;
        width:100%;
    }

    #stylefour{
        height:auto !important;
        overflow:visible !important;
    }

    #stylefour ul{
        display:flex !important;
        flex-wrap:nowrap !important;
        padding:0;
        margin:0;
        list-style:none;
        width:max-content;
    }

    #stylefour ul li{
        float:none !important;
        display:inline-block !important;
        width:auto !important;
        flex:none !important;
        white-space:nowrap;
    }

    #stylefour ul li a{
        display:block;
        padding:12px 16px;
        font-size:14px !important;
        white-space:nowrap;
    }

    /* menu background */
    .menu {
      height: auto !important;
    }

    /* FIX MENU TOP */
    #menu td,
    .menu td,
    .top-menu td {
      display: table-cell !important;
      width: auto !important;
      float: none !important;
    }

    #menu table,
    .menu table,
    .top-menu table {
      width: 100% !important;
      table-layout: auto !important;
    }

  }