/* text */
.tx-ct{font-size:16px;font-weight:300;line-height:1.4;}
.tx-ct1{font-size:13px;font-size:clamp(13px, 0.75vw, 15px);font-weight:300;line-height:1.1;}
.tx-ct1{font-size:15px;font-size:clamp(15px, 1vw, 18px);font-weight:300;line-height:1.1;}
.tx-ft{font-size:12px;font-weight:300;line-height:1.2;}
.tx-center{text-align:center !important;}
.tx-left{text-align:left !important;}
.tx-right{text-align:right !important;}
.upercase{text-transform:uppercase;}
.indent{text-indent:5vw}
.tx-i{font-style: italic;}

.tx-black{color:#000}
.tx-white{color:#fff}

.topic-xxx{font-size:40px;font-size:clamp(46px, 4vw, 66px);}
.topic-xx{font-size:28px;font-size:clamp(30px, 3vw, 50px);}
.topic-xl{font-size:25px;font-size:clamp(26px, 3vw, 46px);}
.topic-x{font-size:22px;font-size:clamp(22px, 2vw, 34px);}
.topic-m{font-size:18px;font-size:clamp(16px, 1.2vw, 24px);}
.topic-s{font-size:16px;font-size:clamp(16px, 1.1vw, 18px);}

/* button */
.btn-1{padding:5px .5rem;color:var(--white1);background:var(--tem8);border-radius:6px;font-size:.8rem;line-height: 1;font-weight:400;}
.btn-1:hover{color:var(--white1);background:var(--tem1);}

.btn-addline{width: auto;padding:.25rem .75rem;color:var(--white1);background:var(--bgline);border-radius:6px;font-size:1rem;line-height: 1;font-weight:400;border:1px solid var(--bgline);}
.btn-addline:hover{background:var(--bglineup);}

.btn-line{padding:.25rem .5rem;color:var(--white1);background:var(--bgline);border-radius:4px;font-size:.75rem;line-height: 1;font-weight:500;border:1px solid var(--bgline);}
.btn-line:hover{background:var(--bglineup);color:#1bc208;}
.btn-line2{padding:.5rem 1rem;color:var(--white1);background:var(--bgline);border-radius:4px;font-size:1.2rem;line-height: 1;font-weight:500;border:1px solid var(--bgline);text-align:center;}
.btn-line2:hover{background:var(--bglineup);color:#1bc208;}

.btn-fb{width: auto;padding:.25rem .75rem;color:var(--white1);background:var(--bgfb);border-radius:6px;font-size:1rem;line-height: 1;font-weight:400;border:1px solid var(--bgfb);}
.btn-fb:hover{background:var(--bgfbup);}

.btn-close{position:absolute;top:0;right:0;}
.btn-close:after{content:"X";display:flex;justify-content:center;align-items:center;width:24px;height:24px;text-align:center;line-height:16px;font-size:14px;background:#000;color:#fff;}

.btn-topbar{width: auto;padding:.25rem .75rem;color:var(--white1);background:var(--tem1);border-radius:2rem;font-size:1.1rem;line-height: 1;font-weight:400;}
.btn-topbar:hover{background:var(--tem5);color:var(--tem1);}


/* head */
.main-head{z-index:997;width:100%;padding:0;margin:0 auto;display:grid;grid-template-columns:1fr;-webkit-transition:all .5s ease-in;transition:all .5s ease-in;max-height: 100px;}
.head-r1{width:100%;display:flex;justify-content: space-between;align-items: center;padding:3px 1rem;grid-gap:1rem;background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 53%, rgba(0,0,0,0) 56%, rgba(0,0,0,1) 85%, rgba(0,0,0,1) 100%);}
.h-left{width:100%;display:flex;display:-webkit-flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;}

.fixbar{z-index:990;position:sticky;top:0;box-shadow:0 0 10px rgb(0 0 0 / 40%);}
.topic-site{font-size:1.25rem;font-weight:600;color:#fff;}

.h-logo{display:grid;justify-content:center;}
.h-name{margin:auto;display:flex;justify-content:center;padding:0.5rem;align-items:center;}
.h-name span{margin:auto;font-size:24px;font-size:clamp(20px, 2vw, 28px);font-weight:600;line-height:1;color:var(--tem1);letter-spacing:0;}
.h-name b{color:var(--tem2);font-weight:600;}
.main-logo{width:100%;max-width:320px;display:flex;align-items:center;justify-items:center;}
.main-logo img{width:100%;object-position: center;object-fit: cover;}
.topic-hss{display:grid;grid-template-columns:auto auto;grid-template-areas:"tss1 tss3""tss2 tss3";justify-items:end;align-items:center;margin:0;padding:0;grid-gap:0;}
.tss1{height: 100%;display:grid;grid-area:tss1;color:var(--white1);font-size:12px;line-height:1;text-transform:uppercase;align-items: end;}
.tss2{height: 100%;display:grid;grid-area:tss2;color:var(--white1);font-size:20px;line-height:.8;text-transform:uppercase;align-items: start;align-items:start;}
.tss3{height: 100%;display:grid;grid-area:tss3;color:var(--white1);font-size:60px;line-height:1;font-weight:700;align-items:center;}

.search-box{width:100%;display:flex;flex-wrap:nowrap;}
.search-box .input-01{width:100%;padding-right:40px;border-radius:60px !important;background:var(--gray1);}
.btn-top-search{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;}

#ads_1234 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%; /* Full width for responsive layout */
        margin: 0 auto; /* Centering the container */
    }
    iframe {
        width: 300px; /* Default ad width */
        height: 100px; /* Default ad height */
    }

/* home */
.maxcol{max-width:var(--maxcol);margin: auto;}
.full{width:var(--w100);max-width:var(--w100);}
.bg-f1{background: #000 url(../../images/bg-f1.webp)no-repeat center center;background-size: cover;}
.bg-f2{background: #000 url(../../images/bg-f2.webp)no-repeat center center;background-size: cover;}
.bg-f3{background: #000 url(../../images/bg-f3.webp)no-repeat center center;background-size: cover;}
.bg-f4{background: #000 url(../../images/bg-f4.webp)no-repeat center center;background-size: cover;}
.bg-f5{background: #000 url(../../images/bg-f5.webp)no-repeat center center;background-size: cover;}
.bg-f6{background: #000 url(../../images/bg-f6.webp)no-repeat center center;background-size: cover;}
.bg-f7{background: #000 url(../../images/bg-f7.webp)no-repeat center center;background-size: cover;}
.bg-f8{background: #000 url(../../images/bg-f8.webp)no-repeat center center;background-size: cover;}
.ss1{background:url(../../images/ss1-ch1.webp)no-repeat 90% center;background-size: contain;}
.ss2{background:url(../../images/ss2-ch1.webp)no-repeat 90% center;background-size: contain;}
.ss3{background:url(../../images/ss3-ch1.webp)no-repeat 90% center;background-size: contain;}
.ss4{background:url(../../images/ss4-ch1.webp)no-repeat 90% center;background-size: contain;}
.ss5{background:url(../../images/ss5-ch1.webp)no-repeat 90% center;background-size: contain;}
.ss6{background:url(../../images/ss6-ch1.webp)no-repeat 90% center;background-size: contain;}
.ss7{background:url(../../images/ss7-ch1.webp)no-repeat 90% center;background-size: contain;}
.ss8{background:url(../../images/ss8-ch1.webp)no-repeat 90% center;background-size: contain;}
.bg-play{background: #000 url(../../images/bg-play.webp)no-repeat fixed top center;background-size:100%;}

.main-page{width:100%;}
.area-box{width:100%;display:grid;min-height:calc(100vh - 100px);}
.ct-area{width:100%;height:100%;display:grid;margin:auto;padding:2rem;}
.layout-ct{display:grid;grid-template-columns:30% 1fr;grid-template-areas:"cta1 cta2""cta1 cta3";justify-items:end;align-items:end;margin:0;padding:0;grid-gap:0;grid-template-rows: 1fr auto;}
	.ct-a1{grid-area:cta1;height:100%;max-height:75vh;overflow:hidden;background:var(--black80);padding:1rem;}
	.ct-a2{grid-area:cta2;align-content: end;height:100%;padding:0.5rem 1rem;}
.ct-a3{grid-area:cta3;grid-template-columns:35% 1fr;grid-template-areas:"cta3-1 cta3-2""cta3-1 cta3-3";justify-items:end;align-items:center;margin:0;padding:0;grid-gap:0;grid-template-rows: 1fr auto;}
	.ct-a3-1{grid-area:cta3-1;height:100%;align-content: end;}
		.ct-a3-1 img{width:100%;max-width:400px;}
	.ct-a3-2{grid-area:cta3-2;height:100%;background:var(--black80);padding:1rem 1rem 3rem 1rem;overflow:hidden;}
	.ct-a3-3{grid-area:cta3-3;height:100%;background:var(--tem9);padding:1rem;}	
.ct-in{width:100%;display:grid;color:#fff;}

.article-inbox{width:100%;overflow-y:auto;display:grid;padding:1rem;margin:0;grid-gap:1rem;}
.article-inbox h3{color:var(--tem1);}
.article-inbox span{color:#4f3a24;}

.ct-a2-in{display:flex;align-items:baseline;}
.tx-imdb{font-size:25px;font-size:clamp(26px, 5vw, 60px);line-height:.8;display:flex;padding-right:10px;}
.tx-imdb:before{content:"IMDB";font-size:13px;color:var(--tem3);position:absolute;top:-10px;left:0;}
.tx-imdb:after{content:"";position:absolute;right:0;top:0;width:1px;height:100%;background:#fff;}
.tx-year{font-size:18px;font-size:clamp(16px, 1vw, 20px);line-height:1;font-weight:700;display:flex;padding-left:20px;}

.ep-listbox{width:100%;height:fit-content;max-height:190px;overflow-x:auto;display:flex;align-content:flex-start;border-top:1px solid rgb(255 255 255 / 10%);border-right:1px solid rgb(255 255 255 / 10%);padding:0;margin:0;flex-wrap:wrap;}
.ep-listbox li{width:100%;display:grid;border-left:1px solid rgb(255 255 255 / 10%);border-bottom:1px solid rgb(255 255 255 / 10%);padding:0;margin:0;}
.list-ep{font-size:16px;color:var(--tem1);padding: 3px 1rem;}
.list-ep:hover{color:var(--white1);background:var(--tem7);}


.play-area{width:100%;display:flex;gap:1rem;}
.play-box-cover{width:100%;display:flex;max-width:200px;margin-top:-40px;aspect-ratio: 16 / 9;}
.play-box-cover img{object-position: center;object-fit: cover;}
.play-box{width:100%;display:flex;align-items:center;justify-content:center;align-content:center;flex-wrap: wrap;gap:5px;}
.btn-play{width:100%;grid-area:pm-play;width:100%;display:grid;padding:.5rem 1rem;text-align:center;background:var(--gar-2);color:#fff;font-weight: 600;font-size: 1.8rem;line-height: 1;overflow:hidden;border-radius:4px;border: inset 2px #e81919;}
.btn-play:hover{background:var(--tem-red2);box-shadow:0 3px 20px rgb(255 0 0 / 74%), inset 0 0 40px 2px #520000;border: inset 2px #a90000;text-shadow: 0 0 6px #fff;color:#fff;}
.btn-play:after{content:"";-webkit-transition:all .3s ease-out;transition:all .3s ease-out;}
.btn-play:hover:after{content:"";width:100%;height:40px;position:absolute;left:0;top:0;background:linear-gradient(0deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 18%) 70%,rgb(255 255 255 / 98%) 100%);}
.icon-play{width:60px;height:60px;position:absolute;left:50%;top:50%;background:url(../../images/icon-play.webp)no-repeat center center;background-size:100%;transform:translate(-50%,-50%);}



/* page video */
.page-play-video{width:100%;display:grid;padding:2rem;}
.play-bc{width:100%;display:flex;}
.main-video-play{width:100%;display:grid;grid-template-columns:1fr;background:var(--black80);}
.video-info{width:100%;display:grid;}

.play-h{width:100%;display:grid;}
.video-box{width:100%;display:grid;}
.video-fullsize{width:100%;display:grid;overflow:hidden;align-items:start;justify-items:center;min-height: min-content;aspect-ratio:16/9;max-height:min-content;}
.video-ft{width:100%;display:flex;padding:1rem;gap:10px;justify-content: flex-end;}

.video-info{width:100%;display:grid;margin:0;}
.play-info-ct{width:100%;display:grid;grid-template-columns:250px 1fr;grid-gap:2rem;background:var(--black80);}
.play-in-left{width:100%;display:grid;padding:0;margin:0;}
.play-in-left img{width:100%;object-position: center;object-fit: cover;}
.play-in-right{width:100%;display:grid;padding:2rem;}

.name-movie{width:100%;display:grid;padding:0;font-size:20px;font-size:clamp(20px, 3vw, 30px);line-height:1;font-weight:500;color:var(--white1);}
.ct-story, .ct-story p{font-size:16px;font-size:clamp(14px, 1vw, 16px);line-height:1.3;font-weight:400;color:var(--white1);}

.btn-video{width: auto;padding:.75rem 2rem;color:var(--white1);background:var(--tem6);border-radius:0;font-size:1rem;font-size:clamp(16px, 1.2vw, 1.2rem);line-height: 1;font-weight:600;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
.btn-video:hover{box-shadow:0 4px 16px rgb(0 0 0 / 25%);color:var(--tem6);background:var(--white1);}


 /* Container for video and ads layout */
  .main-video-play {
    display: flex; /* Flex layout for desktop */
    justify-content: space-between; /* Space between video and ads */
    align-items: flex-start; /* Align items at the top */
    gap: 20px; /* Reduced gap between video and ads */
    flex-wrap: wrap; /* Allows wrapping for smaller screens */
  }

  /* Styling for the video player */
  .video-box {
    flex: 2; /* Take more space compared to ads */
    max-width: 100%; /* Allow video to occupy up to 70% of the container */
    position: relative; /* To ensure proper iframe placement */
  }

  .video-fullsize {
    width: 100%; /* Full width of the video container */
    height: auto; /* Maintain aspect ratio */
  }

  /* Styling for ads */
  #ads_right {
    flex: 1; /* Take less space compared to video */
    width: 350px; /* Fixed width for the ads */
    height: auto; /* Adjust height dynamically */
    max-height: 250px; /* Limit max height */
    text-align: center; /* Center-align ads */
  }

  /* Styling for buttons */
  .video-ft {
    margin-top: 20px; /* Add spacing above buttons */
    display: flex;
    flex-wrap: wrap; /* Wrap buttons if needed */
    gap: 10px; /* Spacing between buttons */
    justify-content: center; /* Center-align buttons */
  }

  .btn-video {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
  }

  /* Responsive design for smaller screens */
  @media (max-width: 768px) {
    .main-video-play {
      flex-direction: column; /* Stack video and ads vertically */
      align-items: center; /* Center-align items */
    }

    .video-box {
      max-width: 100%; /* Full width for video */
    }

    #ads_right {
      width: 100%; /* Full width for ads */
      margin-top: 20px; /* Add spacing above ads */
    }
  }


/* side */
.side-widget{width:100%;display:flex;padding:0 1rem;justify-content:center;}
.widget-box{width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items: center;gap: 10px;}
.widget-box span{width:100%;text-align:center;}

#image-side1{max-width:140px;margin:0 auto 1rem;}
#image-side2{max-width:140px;margin:0 auto 1rem;}




/* form */
.input-01{width:100%;display:grid;grid-template-columns:1fr;padding:.5rem 1rem;margin:auto;font-size:14px;font-size: clamp(14px, 2vw, 1.2rem);line-height: 1.1;font-weight:400;color:var(--tem2);border-radius:4px;border:1px solid #ededed;}
.input-01:focus{background:var(--tem3);color:var(--tem1);}

.input-02{width:100%;display:grid;grid-template-columns:1fr;padding:.5rem 1rem;margin:auto;font-size:14px;font-size: clamp(14px, 2vw, 1.2rem);line-height: 1.1;font-weight:400;color:var(--tem2);border-radius:4px;border:none;}
.input-02:focus{background:var(--white1);color:var(--tem1);}

.input-03{width:100%;display:grid;grid-template-columns:1fr;padding:1rem;margin:auto;font-size:14px;font-size: clamp(14px, 2vw, 1.2rem);line-height: 1.1;font-weight:400;color:var(--tem2);resize:none;border-radius:6px;border:1px solid #ededed;}
.input-03:focus{background:var(--tem3);color:var(--tem1);}

.input-file{width:100%;font-size:14px;font-size: clamp(14px, 1vw, 1rem);line-height: 1.1;font-weight:300;color:var(--white1);display:flex;justify-items:center;}
.input-file::file-selector-button {content: "เลือกไฟล์";color: black;margin-right:10px;background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);border: 1px solid #999;border-radius: 3px;padding: 5px 2rem;outline: none;white-space: nowrap;-webkit-user-select: none;cursor: pointer;text-shadow: 1px 1px #fff;font-weight: 400;font-size: 12pt;font-family:'Prompt', sans-serif !important;}

.form-gender{position:absolute;right:1rem;top:-1rem;}
.form-gender label{font-size:14px;font-size: clamp(16px, 2vw, 1.2rem);line-height: 1.1;font-weight:300;color:var(--white1);}

.btn-reset1{width: auto;padding:.75rem 2rem;color:var(--tem6);background:var(--white1);border-radius:0;font-size:1rem;font-size:clamp(16px, 1.8vw, 1.6rem);line-height: 1;font-weight:400;border:2px solid var(--tem6);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
.btn-reset1:hover{color:var(--tem1);background:var(--tem3);border:2px solid var(--tem1);}

.btn-submit1{width: auto;padding:.75rem 2rem;color:var(--white1);background:var(--tem1);border-radius:0;font-size:1rem;font-size:clamp(16px, 1.8vw, 1.6rem);line-height: 1;font-weight:600;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
.btn-submit1:hover{box-shadow:0 4px 16px rgb(0 0 0 / 25%);color:var(--tem6);background:var(--white1);}

.form-control{border:1px solid #ededed !important;}


input::placeholder{color:#444;font-weight:300;}
input::-webkit-placeholder{color:#444;font-weight:300;}
textarea::placeholder{color:#444;font-weight:300;}
textarea::-webkit-placeholder{color:#444;font-weight:300;}
select option{padding-left:2rem !important;}


/* page navigation */
.page-nav{width:100%;margin:1rem 0;display: flex;justify-content: center;}
.page-link{color:var(--white1) !important;background:var(--tem3) !important;border:1px solid #ececec !important;}
.page-link:hover{color:var(--white1) !important;background:var(--tem1) !important;border:1px solid var(--tem1) !important;}



/* breadcrumb */
.breadcrumb-area{width:100%;display:grid;}
.breadcrumb{width:100% !important;padding:0 1rem; !important;background:var(--tem7)!important;margin:auto !important;align-items: center !important;border-radius:0.75rem 0.75rem 0 0 !important;}
.breadcrumb-item{display: flex;align-items: center !important;}
.breadcrumb-item a{display: flex;font-size:16px;font-size:clamp(14px, 1vw, 16px);font-weight:400;padding:5px 8px;color:var(--white1);}
.breadcrumb-item a:hover{color:var(--white1) !important;}
.breadcrumb-item+.breadcrumb-item::before{display: flex;content:">" !important;color:var(--white1) !important;align-items: center !important;}
.breadcrumb-item.active{display: flex;color:var(--tem1) !important;align-items: center !important;}



/* add fix */
.fixspot-left{z-index:801;height:100vh;max-width:160px;position:fixed;left:0;top:50%;display:grid;align-items:center;overflow:hidden;transform: translateY(-50%);}
.fixspot-right{z-index:802;height:100vh;max-width:160px;position:fixed;right:0;top:50%;display:grid;align-items:center;overflow:hidden;transform: translateY(-50%);}
.fixspot-left img,.fixspot-right img{width:100%;max-width:100%;display:grid;object-position: center;object-fit:scale-down;}

.fixspot-bottom{z-index:803;width:100vw;max-height:90px;max-width:728px;position:fixed;left:50%;bottom:0;display:grid;justify-items:center;overflow:hidden;transform: translateX(-50%);}
.fixspot-bottom img{width:100%;max-width:100%;display:grid;object-position:top;object-fit:scale-down;}

.fixspot-in{display:block;width:100%;}
.fixspot-left,.fixspot-right,.fixspot-bottom{display:none !important;}

/* Nav */
.main-nav{z-index:980;width:100%;display:flex;display:-webkit-flex;justify-content:space-between;flex-wrap:wrap;background:var(--tem3);gap:1rem;padding:0 3rem;}
.main-nav ul{display:flex;display:-webkit-flex;align-items:center;flex-wrap: wrap;margin:0;padding:0;}
.main-nav ul li{display: flex;justify-items:center;justify-content:space-around;margin:0;padding:0;}
.main-nav-link{display:grid;padding:.75rem 1rem;color:var(--white1);}
.main-nav-link:hover{color:var(--tem1);background:#fff;}

.main-nav ul li.li-dropdown{display:flex;justify-items:center;width: auto;padding: 0 1rem;cursor: pointer;}
.main-nav ul ul {display: none;position: absolute;top:2em;left:1rem;max-height:450px;overflow:hidden;overflow-y: auto;padding:0 0 1rem 0;background:var(--white1);box-shadow:0 5px 10px rgb(0 0 0 / 5%);}
.main-nav ul li:hover > ul {display: flex;flex-wrap: wrap;}
.main-nav ul ul li {width:100%;	float:none;	display:flex;flex-wrap:wrap;position: relative;}
.li-dropdown ul a{width:100%;padding:3px 10px;color:var(--tem8);border-bottom: 1px solid var(--gray1);}
.li-dropdown ul a:hover{color:var(--tem4);background:var(--tem1);}

li.li-dropdown > span:after { content:"+";font-size:1.5em;position:absolute;right:0;top:-2px;}
li > a:only-child:after { content:""; }




/* footer */
.fix-bottom{z-index:996;width:100%;position:sticky;bottom:0;padding:0;margin:auto;justify-items:center;display:flex;justify-content:center;gap:.5rem;align-items:flex-end;overflow: hidden;background:var(--white1);box-shadow: 0 -2px 60px 20px rgb(0 0 0 / 6%);}
.fix-bt{padding:.5rem 0;display:grid;}
.area-ft{width:100%;display:block;margin:auto;padding:1rem;text-align:center;}
.tx-ft{font-size: 14px;font-weight: 300;line-height: 1.4;color:var(--tem8);}
.copyright{width:100%;display:grid;padding:1rem 5vw;}


/* menu mobile*/
.mobile-menu{width: auto;display: grid;}
.side-box{z-index:998;position:fixed;right:-200%;top:0;width:100%;max-width:220px;height:100vh;padding:40px 0;overflow-x:auto;box-sizing:border-box;text-align:center;align-items:center;align-content:center;-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;opacity: 0;background:var(--black1);box-shadow:3px 0 8px rgb(0 0 0 / 5%);}
#toggle{position:fixed;appearance:none;cursor:pointer;right:-1000px;top:0;}
#toggle + label{z-index:9999;display:grid;max-width: 50px;cursor:pointer;padding:0;margin:0;color:var(--tem1);line-height:1em;font-size:1.4em;text-align:center;-webkit-font-smoothing:antialiased;background:transparent;border-radius:0 0 6px 6px;
cursor:pointer;}
#toggle + label:hover{color:var(--tem2) !important;}
#toggle + label:after{content:"☰";padding:10px;}
.container{transition:margin 0.5s cubic-bezier(0.17, 0.04, 0.03, 0.94);padding:0 1%;}
#toggle:checked ~ .side-box{right:0;opacity:1;}
#toggle:checked ~ .container{margin-left:0px;}
#toggle:checked + label{background:none;}
#toggle:checked + label:after{width:auto;content:"X";}


.side-btn{background:transparent;}
.side-btn:hover{opacity:0.8;}

.menu-side{width:100%;display: grid;grid-template-columns:1fr;grid-gap:0.5rem;height: 100%;align-content:start;padding:1rem;}
.menu-side a{background:transparent;padding:1rem;}
.menu-side a:hover{background:var(--tem1) !important;}
.quick-menu-box{-webkit-transition: all 0.5s ; transition: all 0.5s;
width:100%;overflow:auto;display:block;}


.topmenu{-webkit-transition: all 0.5s ; transition: all 0.5s;margin:0;overflow:hidden;display:flex;display: -webkit-flex;-webkit-align-items:center;align-items:center;align-content:center;-webkit-justify-content:flex-end;justify-content:flex-end;flex-direction:row;flex-wrap:wrap;}
a.menu-main:link,a.menu-main:visited{display:grid;width:100%;height:100%;color:#444;margin:0;padding:8px 1em;text-align:center;font-size:.8rem;-webkit-transition: all 0.3s ; transition: all 0.3s;}
a.menu-main:hover{color:#fff;background: rgb(18 110 115);
background: linear-gradient(0deg, rgb(73 201 207) 0%, rgb(31 121 113) 63%, rgb(18 110 115) 63%, rgba(98,98,98,1) 90%, rgb(56 183 165) 100%);}
a.menu-main:active{color:#f27541;}

a.p-link2:link,a.p-link2:visited,a.p-link2:active{color:#606060;}
a.p-link2:hover{color:#00a8ff}

.head-topic{width:100%;text-align:left;}
.sub-list{width:100%;position:relative;padding:10px 0;margin:0 auto;display:flex;display:-webkit-flex;-webkit-justify-content:center;justify-content:center;justify-items:center;align-items:center;justify-items:center;flex-wrap:wrap;}
.sub-list li{width:100%;position:relative;display:grid;grid-template-columns:1fr;align-content:start;}
.sub-list li a:link,.sub-list li a:visited,.sub-list li a:active{width:100%;font-size:.9rem;line-height:1;padding:0;margin:0 auto;color:var(--tem1);background:transparent;}
.sub-list li a:hover{color:var(--white1) !important;text-shadow:0 2px 3px rgb(0 0 0 / 32%);background:#212121;}

.li-menu-ss{width:100%;position:relative;display:grid;grid-template-columns:1fr;align-content:start;padding:5px;-webkit-transition:all .3s ease-in;transition:all .3s ease-in;}
.li-menu-ss:hover{filter: contrast(95%) brightness(120%);min-height: min-content;}

/* lazy */

img.yall-loaded img.yall-error{opacity: 1;}
img.slowloading,img.yall_lazy {visibility: hidden !important;opacity: 0;-webkit-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
img.yall_loaded {visibility: visible !important;opacity: 1;}


/* to top */
#button {
  display: inline-block;
  background-color:rgb(185 175 177 / 12%);
  width: 32px;
  height: 32px;
  text-align: center;
  border-radius: 50%;
  position: fixed;
  bottom: 60px;
  right: 2vw;
  border:1px solid #fff;
  text-decoration: none;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 900;
}
#button::after {
  content: "▲";
  font-size:1em;
  line-height:30px;
  color: #d2d2d2;
  text-decoration: none;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
  text-decoration: none;
}


#ads_1 {
	width: 780px;
	margin: 0 auto;
}
/* drop link */


/* responsive */
@media only screen and (max-width:1200px){

}

@media (max-width:1080px){

}

@media (max-width:960px){
body{background-attachment:fixed !important;}
.ss1,.ss2,.ss3,.ss4,.ss5,.ss6,.ss7,.ss8{background-size: 400px;background-position:140% 5%;}	
.layout-ct{grid-template-columns: 1fr;grid-template-areas:
        "cta2"
        "cta3"
        "cta1";
    justify-items: center;align-items: start;}
.ct-a1{max-height: fit-content;}
.ct-a3{grid-template-columns: 35% 1fr;grid-template-areas:
        "cta3-1 cta3-2"
        "cta3-3 cta3-3";
    justify-items: stretch;}
.ep-listbox{max-height:300px;}
.ct-a3-2{align-content: start;}
}

@media (max-width:760px){
.head-r1{background: rgb(0 0 0 / 75%);}	
.ct-a3{grid-template-columns: 40% 1fr;}	
.ep-listbox{max-height:220px;}
.play-info-ct{grid-template-columns: 1fr;grid-gap: 0;}
.play-in-left{justify-content:center;}
.play-in-left img{max-width: 220px;margin-top: 20px;}
.play-in-right{padding:1.5rem 0;}
}

@media (max-width:640px){
.ct-a3{grid-template-columns:1fr;grid-template-areas:
        "cta3-1""cta3-2""cta3-3";
    justify-items: stretch;}
.ct-a3-1{justify-content:start;}	
.ct-a3-1 img{max-width:360px;margin-bottom:1rem;}
.ct-a2{justify-content:start;}
.main-logo{max-width:240px;}
}

@media (max-width:540px){
.topic-hss{display:none;}	
.ct-a3-1 img{max-width:100%;}	
.ct-a3-1,.ct-a2{justify-content:center;}	
.ss1,.ss2,.ss3,.ss4,.ss5,.ss6,.ss7,.ss8{background:none !important;}
.play-area{flex-wrap:wrap;}
.play-box-cover{max-width: 100%;margin: 0 auto;}
}
 #ads_1 iframe {
        width: 100% !important;
        text-align: center;
    }
@media (max-width:400px){

}

@media (max-width: 520px) {
    #ads_1 iframe, .list-post iframe {
        width: 100% !important;
    }
    #ads_1 {
    	width: 100%;
    }
}
@media (max-width: 320px) {
        iframe {
            width: 280px; /* Adjust iframe width for smaller screens */
        }
    }