/*
Theme Name: The MovieHD
Author: GO-SOLUTION
Description: Theme เว็บไซต์ดูหนังออนไลน์พร้อมระบบโฆษณา
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-moviehd
*/

/* =========================================================
   FONT
========================================================= */
@font-face{
  font-family:'Kanit';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4-ORWzVaFrNlJzIu4.woff2) format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:'Kanit';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4-ORWoVaFrNlJzIu4.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:'Kanit';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4-ORWpVaFrNlJzIu4.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Kanit';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4-ORWnVaFrNlJz.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB,U+02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* =========================================================
   ROOT / RESET
========================================================= */
:root{
  --nhd-green:#66CC00;
  --nhd-green-dark:#4fa000;
  --nhd-bg:#000000;
  --nhd-bg-soft:#061200;
  --nhd-card:#101114;
  --nhd-card-2:#181a1f;
  --nhd-border:rgba(255,255,255,.08);
  --nhd-border-strong:rgba(255,255,255,.14);
  --nhd-text:#ffffff;
  --nhd-text-soft:#cfcfd8;
  --nhd-shadow:0 10px 30px rgba(0,0,0,.35);
  --nhd-radius:12px;
  --nhd-wrap:1200px;
  --nhd-side:170px;
  --nhd-gap:12px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
  background:var(--nhd-bg);
  color:var(--nhd-text);
  font-family:Kanit,sans-serif,"Times New Roman",Times,serif;
}

body{
  line-height:1.6;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  max-width:100%;
  height:auto;
  margin-left:auto;
  margin-right:auto;
}

iframe{
  border:0;
  max-width:100%;
}

ul,
ol{
  margin:0;
  padding:0;
}

li{
  list-style:none;
}

/* =========================================================
   GLOBAL WRAPPERS
========================================================= */
.wrap,
.container-head,
.container{
  width:100%;
  max-width:var(--nhd-wrap);
  margin-left:auto;
  margin-right:auto;
}

.content{
  width:100%;
  min-width:0;
  margin-top:18px;
}

.contentmovie{
  min-width:0;
  color:#fff;
}

.movie{
  background:transparent;
}

.container_att{
  width:100%;
  margin:0 auto;
}

.container_att .img_att{
  text-align:center;
}

.container_att .img_att img{
  display:inline-block;
}

/* =========================================================
   HEADER
========================================================= */
.header{
  width:100%;
  background-repeat:no-repeat;
  background-size:cover;
}

.header .container-logo{
  width:100%;
  max-width:var(--nhd-wrap);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
}

.header .container-logo .logo-head{
  flex:0 0 auto;
}

.logo-head img,
.header .container-logo .logo-head img{
  width:auto;
  max-width:250px;
  max-height:83px;
}

.header .container-logo .h1-logo{
  flex:1 1 auto;
  text-align:center;
  padding:10px 14px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:18px;
  line-height:1.35;
  border-radius:10px;
}

.header .container-logo .search{
  flex:0 0 230px;
  display:flex;
  justify-content:flex-end;
}

/* =========================================================
   SEARCH FORM
========================================================= */
.search,
.widget_search{
  width:100%;
}

.searchform,
.search .widget_search .searchform{
  display:flex;
  align-items:center;
  width:100%;
  overflow:hidden;
  border:1px solid var(--nhd-border);
  border-radius:12px;
  background:var(--nhd-card);
  box-shadow:var(--nhd-shadow);
}

.searchform input,
.search .widget_search .searchform input{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  height:42px;
  padding:10px 14px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:14px;
  outline:none;
}

.searchform input::placeholder{
  color:#b8bec7;
}

.searchform button,
.search .widget_search .searchform button{
  width:50px;
  min-width:50px;
  height:42px;
  border:0;
  background:var(--nhd-green);
  color:#fff;
  cursor:pointer;
  transition:background .2s ease;
}

.searchform button:hover,
.search .widget_search .searchform button:hover{
  background:var(--nhd-green-dark);
}

.searchform button i,
.search .widget_search .searchform button i{
  color:#fff;
  font-size:16px;
}

.searchform button .nhd-icon-search::before,
.search .widget_search .searchform button .nhd-icon-search::before{
  content:"\1F50D";
  font-style:normal;
  display:inline-block;
  line-height:1;
  color:#fff;
}

/* =========================================================
   NAVBAR
========================================================= */
.nhd-navbar-full{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background:var(--nhd-green);
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.navbar{
  width:100%;
  margin:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

.navbar ul{
  width:100%;
  max-width:var(--nhd-wrap);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  padding:10px;
}

.navbar li{
  display:block;
}

.navbar a{
  display:block;
  padding:8px 12px;
  color:#fff;
  font-size:16px;
  line-height:1.2;
  font-weight:700;
  border-radius:8px;
  transition:background .2s ease, color .2s ease;
}

.navbar a:hover{
  color:#fff;
  background:rgba(0,0,0,.12);
}

.nhd-mobile-toggle,
.nhd-mobile-backdrop{
  display:none;
}

/* =========================================================
   MAIN 3 COLUMN LAYOUT
========================================================= */
.content-movie{
  display:grid;
  grid-template-columns:var(--nhd-side) minmax(0,1fr) var(--nhd-side);
  gap:var(--nhd-gap);
  align-items:start;
  width:100%;
}

.left-sidebar,
.right-sidebar,
.sidebar-left,
.sidebar-right,
.adlf,
.adlf2{
  width:100%;
  min-width:0;
}

/* =========================================================
   SECTION HEADER
========================================================= */
.movietext{
  background:var(--nhd-green);
  color:#fff;
  border-radius:10px;
  margin:0 0 12px;
  padding:11px 14px;
  box-shadow:var(--nhd-shadow);
}

.movietext h1,
.movietext h2,
.movietext h3,
.movietext h4{
  margin:0;
  color:#fff;
  font-size:20px;
  line-height:1.35;
  font-weight:800;
}

.movietext--between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.movietext--between .more-link{
  color:#fff;
  font-weight:700;
  white-space:nowrap;
}

/* =========================================================
   GRID / CARD
========================================================= */
.grid-movie,
.nhd-post-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.box{
  display:block;
  width:100%;
  min-width:0;
  background:var(--nhd-card);
  border:1px solid var(--nhd-border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--nhd-shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.box:hover{
  transform:translateY(-3px);
  border-color:var(--nhd-border-strong);
  box-shadow:0 16px 30px rgba(0,0,0,.45);
}

.box a{
  display:block;
  color:#fff;
}

.box-img{
  position:relative;
  overflow:hidden;
  background:#0d0e12;
}

.box-img img{
  width:100%;
  aspect-ratio:350 / 465;
  object-fit:cover;
}

.figure-box{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.info1{
  position:absolute;
  top:8px;
  left:8px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:54px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-size:12px;
  font-weight:700;
}

.info1 p{
  margin:0;
  line-height:1;
}

.info1 img.star{
  width:16px;
  height:16px;
}

.movie-corner.movie-HD{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  left:auto !important;
  width:auto !important;
  min-width:58px;
  padding:3px 8px;
  border-bottom-left-radius:10px;
  color:#fff;
  font-size:11px;
  line-height:20px;
  font-weight:800;
  text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

.p-box{
  padding:8px 8px 10px;
}

.p-box .p1{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:3px 8px;
  margin-bottom:8px;
  border-radius:999px;
  background:#332281;
  color:#fff;
  font-size:11px;
  font-weight:700;
  text-align:center;
}

.p-box .p2{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  min-height:40px;
  padding:6px;
  border-radius:8px;
  background:var(--nhd-card-2);
  color:#fff;
  font-size:13px;
  line-height:1.4;
  text-align:center;
}

/* =========================================================
   PAGINATION
========================================================= */
.navigation{
  text-align:center;
}

.navigation.pagination{
  margin:20px 0 0;
}

.navigation.pagination .nav-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
}

.navigation.pagination a,
.navigation.pagination span,
.page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--nhd-border);
  background:var(--nhd-card);
  color:#fff;
  font-size:13px;
  font-weight:700;
  box-shadow:var(--nhd-shadow);
}

.navigation.pagination a:hover{
  background:var(--nhd-green);
  border-color:var(--nhd-green);
}

.navigation.pagination .current,
.page-numbers.current{
  background:#209b56;
  border-color:#209b56;
}

/* =========================================================
   SINGLE PAGE CONTENT
========================================================= */
.content-col{
  display:flex;
  flex-direction:column;
}

.content-col .content-col1{
  display:grid;
  grid-template-columns:34% 65%;
  gap:1%;
}

.content-col .content-col1 img{
  width:100%;
  height:375px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:12px;
}

.content-col .content-col2{
  color:#fff;
}

.content-col .content-col2 .col-in1{
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:14px;
  margin:1% 0 5%;
  padding:1%;
  border-radius:12px;
  background:#363636;
  color:#fff;
}

.content-col .content-col2 .col-in1 .year{
  margin:auto 0;
}

.content-col .content-col2 .col-in1 .year a{
  color:#fff;
  font-size:14px;
}

.content-col .content-col2 .col-in1 .score{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.content-col .content-col2 .col-in1 .res1,
.content-col .content-col2 .col-in1 .res2{
  width:7%;
  min-width:60px;
  padding:2px 5px;
  border-radius:5px;
  font-size:12px;
  text-align:center;
}

.content-col .content-col2 .col-in1 .res1{
  background:#fe0000;
}

.content-col .content-col2 .col-in1 .res2{
  background:#39b54a;
}

.content-col .content-col2 .col-in3{
  margin-bottom:1%;
  padding:12px 14px;
  border:1px solid var(--nhd-border);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  color:#fff;
}

.content-col .content-col2 .col-in4{
  margin-bottom:5%;
  font-size:14px;
}

.content-col .content-col2 .col-in4 a{
  color:#209b56;
}

.col-in2{
  margin:3% 0;
}

.col-in2 h2{
  font-size:20px;
  color:#fff;
}

.inline-content{
  color:#eee;
  line-height:1.75;
}

.inline-content h2,
.inline-content p{
  display:inline;
}

.custom-h2{
  font-size:18px;
}

.inline-content a{
  color:var(--nhd-green);
  font-weight:700;
}

.button-comment{
  display:flex;
  margin-top:5%;
  color:#fff;
}

.button-comment .comment,
.button-comment .trailer,
.button-comment .ss{
  padding:.5% 2%;
  background:#209b56;
  font-size:14px;
  cursor:pointer;
}

.button-comment .comment{
  border-radius:5px 0 0 5px;
}

.button-comment .ss{
  border-radius:0 5px 5px 0;
}

.button-comment .active{
  background:#4f008e;
}

.show-trailer,
.show-ss{
  display:none;
}

.show-comment{
  background:#d3d3d3;
}

.show-ss ul{
  display:flex;
  list-style:none;
}

.show-ss ul li{
  width:200px;
  margin-right:1%;
}

.show-ss ul li img{
  width:100%;
  height:280px;
  object-fit:cover;
}

.list-part{
  margin:20px 0 10px;
  font-size:16px;
  text-align:center;
}

.list-part li{
  margin:5px 0;
}

/* =========================================================
   HOME INTRO / SIMPLE CONTENT BLOCK
========================================================= */
.nhd-home-intro .nhd-home-intro__box{
  padding:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  line-height:1.75;
  text-align:center;
}

.nhd-home-intro .nhd-home-intro__box h1,
.nhd-home-intro .nhd-home-intro__box h2,
.nhd-home-intro .nhd-home-intro__box h3,
.nhd-home-intro .nhd-home-intro__box h4,
.nhd-home-intro .nhd-home-intro__box h5,
.nhd-home-intro .nhd-home-intro__box h6,
.nhd-home-intro .nhd-home-intro__box p,
.nhd-home-intro .nhd-home-intro__box ul,
.nhd-home-intro .nhd-home-intro__box ol,
.nhd-home-intro .nhd-home-intro__box li{
  text-align:center;
}

.nhd-home-intro .nhd-home-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:14px;
}

.nhd-home-intro .nhd-home-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* =========================================================
   HUB PAGES
========================================================= */
.nhd-hub-wrap{
  max-width:var(--nhd-wrap);
  margin:0 auto;
  padding:18px 14px;
}

.nhd-hub-title{
  margin:6px 0 14px;
  color:#fff;
  font-size:28px;
  font-weight:800;
}

.nhd-hub-section{
  margin:20px 0;
}

.nhd-hub-section h2{
  margin:0 0 12px;
  color:#fff;
  font-size:18px;
  font-weight:800;
}

.nhd-hub-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.nhd-hub-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:700;
  line-height:1;
  transition:all .2s ease;
}

.nhd-hub-chip:hover{
  background:rgba(255,255,255,.12);
  transform:translateY(-1px);
}

/* =========================================================
   SIDEBAR / WIDGETS
========================================================= */
.widget_wp_categories_widget{
  position:relative;
  border-radius:0 0 5px 5px;
  background:#0b1600;
}

.widgettitle{
  display:block;
  padding:8px 10px;
  background:var(--nhd-green);
  color:#fff;
  font-size:16px;
  text-align:center;
  border-radius:5px 5px 0 0;
}

.wp_categories_widget h2{
  margin:0 0 25px;
  color:#4a5f6d;
  font-size:24px;
  font-weight:400;
  line-height:24px;
  text-transform:uppercase;
}

.ve-cat-widget-div ul.ve-cat-widget-listing,
.ve-cat-widget-listing{
  overflow:hidden;
  padding:10px;
}

.ve-cat-widget-div ul.ve-cat-widget-listing li,
.ve-cat-widget-listing li{
  position:relative;
  padding:4px 0 !important;
  line-height:1.4;
  text-align:center;
  list-style:none;
}

.ve-cat-widget-div ul.ve-cat-widget-listing li:last-child{
  border:none;
}

.ve-cat-widget-div ul.ve-cat-widget-listing li a,
.ve-cat-widget-listing li a{
  display:block;
  padding:8px 6px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:13px !important;
  font-weight:700;
  text-decoration:none;
  transition:background .2s ease, color .2s ease;
}

.ve-cat-widget-div ul.ve-cat-widget-listing li a:hover,
.ve-cat-widget-listing li a:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
}

.ve-cat-widget-div ul.ve-cat-widget-listing li span.post-count,
.ve-cat-widget-listing li span{
  display:block;
  margin-top:4px;
  color:#cfcfd8;
  font-size:11px !important;
}

#tag_cloud-2{
  display:none;
}

.side_nav-year{
  margin-top:5%;
}

.side_nav-year .side-menu{
  list-style:none;
}

.side_nav-year .side-menu h5{
  padding:7px 0;
  border-radius:5px 5px 0 0;
  background:#209b56;
  color:#fff;
  font-size:16px;
  text-align:center;
}

.side_nav-year .side-menu p{
  padding:4%;
  background:#363636;
  color:#fff;
  font-size:14px;
  text-align:center;
}

.side_nav-year .side-menu .widget_search{
  margin-bottom:5%;
  padding-bottom:8%;
  border-radius:0 0 5px 5px;
  background:#363636;
}

.side_nav-year .side-menu .widget_search .searchform{
  width:80%;
  margin:0 auto;
  padding:5% 0;
}

.side_nav-type{
  margin-bottom:5%;
  list-style:none;
}

.side_nav .side-menu .side_ul,
.menu-side-menu-container .side_ul{
  padding:0;
  background:transparent;
  border-radius:0;
  text-align:center;
}

.side_nav .side-menu .side_ul li{
  list-style:none;
  margin:3% 0;
}

.side_nav .side-menu .side_ul li a{
  color:#fff;
  font-size:14px;
}

.side_nav .side-menu .side_ul li a:hover{
  color:#209b56;
}

/* =========================================================
   FOOTER
========================================================= */
.content-site{
  width:100%;
  max-width:100%;
  margin-top:24px;
  padding:24px 14px;
  background:var(--nhd-bg-soft);
  color:#a0a5aa;
  font-size:14px;
  text-align:center;
  overflow:hidden;
}

.content-site .container{
  max-width:980px;
}

.content-site .search{
  margin-top:10px;
}

.content-site .search li{
  list-style:none;
}

.content-site .searchform,
.content-site form{
  max-width:760px;
  margin:0 auto;
}

.content-site figure{
  margin:18px auto;
}

.content-site p{
  margin-bottom:14px;
  color:#ddd;
}

.content-site details{
  max-width:100%;
  margin:12px auto 0;
  padding:12px 14px;
  border:1px solid var(--nhd-border);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  color:#eee;
}

.content-site details summary{
  cursor:pointer;
  color:var(--nhd-green);
  font-weight:700;
  outline:none;
}

footer{
  width:100%;
  max-width:100%;
  padding:0 14px 20px;
  background:var(--nhd-bg-soft);
  text-align:center;
  font-size:12px;
}

footer > a{
  display:inline-block;
  margin-bottom:10px;
  color:#fff;
  font-size:14px;
  font-weight:700;
}

footer a{
  color:#e2e4e7;
  transition:opacity .2s ease, color .2s ease;
}

footer a:hover{
  color:#209b56;
  opacity:.9;
}

.menu-footer{
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding:14px 0 0;
  border-top:1px solid rgba(255,255,255,.08);
}

.menu-footer ul{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px 16px;
}

.menu-footer ul li{
  display:block;
  padding:0;
  font-size:16px;
}

.copyright{
  padding:10px;
  background:#209b56;
}

/* =========================================================
   FORMS / CONTACT
========================================================= */
.wpcf7-form{
  max-width:500px;
  margin:auto;
}

.wpcf7-form-control{
  width:100%;
  padding:10px;
  font-size:16px;
}

.wpcf7-submit{
  padding:15px;
  border:0;
  background:#2196F3;
  color:#fff;
  font-size:16px;
}

.wpcf7-submit:hover{
  background:#2196F3;
}

details{
  padding:12px 14px;
  border:1px solid var(--nhd-border);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  color:#eee;
}

details summary{
  outline:none;
}

/* =========================================================
   MISC
========================================================= */
.wpdiscuz-front-actions,
.stats,
.widgettitle-banner{
  display:none;
}

.active{
  background:#4f008e !important;
  color:#dbdbdb;
}

.button-sub{
  position:relative;
  display:flex;
  height:30px;
  text-align:center;
}

.button-sub .button-sub-1,
.button-sub .button-sub-2{
  width:120px;
  height:30px;
  background:#209b56;
  cursor:pointer;
}

.link-main{
  position:absolute;
  right:0;
}

.link-support{
  position:absolute;
  right:16%;
}

.link-main button,
.link-support button{
  width:120px;
  height:30px;
  border:0;
  background:#209b56;
  font-family:Kanit,sans-serif;
  cursor:pointer;
}

.link-main button.active,
.link-support button.active{
  background:#4f008e !important;
  color:#dbdbdb;
}

.model{
  position:fixed;
  top:0;
  left:0;
  z-index:99;
  display:none;
  width:100%;
  height:100%;
  padding-top:100px;
  overflow:auto;
  background-color:rgba(0,0,0,.9);
}

.model-content{
  display:block;
  width:80%;
  max-width:40%;
  margin:auto;
  animation:zoom .6s;
}

#img-ss{
  cursor:pointer;
}

.attachment-medium:hover{
  opacity:.7;
  cursor:pointer;
}

.close{
  position:absolute;
  top:15px;
  right:35px;
  color:#f1f1f1;
  font-size:40px;
  font-weight:700;
  transition:.3s;
}

.close:hover,
.close:focus{
  color:#bbb;
  text-decoration:none;
  cursor:pointer;
}

@keyframes zoom{
  from{transform:scale(0);}
  to{transform:scale(1);}
}

/* =========================================================
   WORDPRESS BLOCK BASICS
========================================================= */
.wp-block-audio figcaption{margin-top:.5em;margin-bottom:1em;}
.wp-block-audio audio{width:100%;min-width:300px;}
.wp-block-button{color:#fff;}
.wp-block-button.aligncenter{text-align:center;}
.wp-block-button.alignright{text-align:right;}
.wp-block-button__link{
  display:inline-block;
  padding:12px 24px;
  border:none;
  border-radius:28px;
  background:#32373c;
  color:inherit;
  font-size:18px;
  text-align:center;
  box-shadow:none;
  cursor:pointer;
  overflow-wrap:break-word;
}
.wp-block-calendar{text-align:center;}
.wp-block-calendar table{width:100%;border-collapse:collapse;}
.wp-block-columns{display:flex;flex-wrap:wrap;margin-bottom:28px;}
.wp-block-column{flex-grow:1;min-width:0;word-break:break-word;overflow-wrap:break-word;}
.wp-block-cover,
.wp-block-cover-image{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:430px;
  overflow:hidden;
  background:#000;
  background-position:50%;
  background-size:cover;
}
.wp-block-embed{margin-bottom:1em;}
.wp-block-file{margin-bottom:1.5em;}
.wp-block-gallery,
.blocks-gallery-grid{
  display:flex;
  flex-wrap:wrap;
  margin:0;
  padding:0;
  list-style:none;
}
.wp-block-image{max-width:100%;margin-bottom:1em;}
.wp-block-latest-comments__comment{margin-bottom:1em;font-size:15px;line-height:1.1;list-style:none;}
.wp-block-latest-posts.wp-block-latest-posts__list{list-style:none;}
.wp-block-media-text{display:grid;grid-template-columns:50% 1fr;}
.wp-block-pullquote{margin-left:0;margin-right:0;padding:3em 0;text-align:center;}
.wp-block-quote.is-large,
.wp-block-quote.is-style-large{margin:0 0 16px;padding:0 1em;}
.wp-block-rss{list-style:none;}
.wp-block-search{display:flex;flex-wrap:wrap;}
.wp-block-social-links{display:flex;justify-content:flex-start;margin-left:0;padding-left:0;padding-right:0;}
.wp-social-link{width:36px;height:36px;margin-right:8px;border-radius:36px;}
.wp-block-spacer{clear:both;}
.wp-block-table{overflow-x:auto;}
.wp-block-table table{width:100%;}
.wp-block-text-columns,
.wp-block-text-columns.aligncenter{display:flex;}
.wp-block-video{margin-left:0;margin-right:0;}
.wp-block-video video{max-width:100%;}

/* =========================================================
   COLOR UTILITIES
========================================================= */
:root .has-pale-pink-background-color{background-color:#f78da7}
:root .has-vivid-red-background-color{background-color:#cf2e2e}
:root .has-luminous-vivid-orange-background-color{background-color:#ff6900}
:root .has-luminous-vivid-amber-background-color{background-color:#fcb900}
:root .has-light-green-cyan-background-color{background-color:#7bdcb5}
:root .has-vivid-green-cyan-background-color{background-color:#00d084}
:root .has-pale-cyan-blue-background-color{background-color:#8ed1fc}
:root .has-vivid-cyan-blue-background-color{background-color:#0693e3}
:root .has-vivid-purple-background-color{background-color:#9b51e0}
:root .has-very-light-gray-background-color{background-color:#eee}
:root .has-cyan-bluish-gray-background-color{background-color:#abb8c3}
:root .has-very-dark-gray-background-color{background-color:#313131}
:root .has-pale-pink-color{color:#f78da7}
:root .has-vivid-red-color{color:#cf2e2e}
:root .has-luminous-vivid-orange-color{color:#ff6900}
:root .has-luminous-vivid-amber-color{color:#fcb900}
:root .has-light-green-cyan-color{color:#7bdcb5}
:root .has-vivid-green-cyan-color{color:#00d084}
:root .has-pale-cyan-blue-color{color:#8ed1fc}
:root .has-vivid-cyan-blue-color{color:#0693e3}
:root .has-vivid-purple-color{color:#9b51e0}
:root .has-very-light-gray-color{color:#eee}
:root .has-cyan-bluish-gray-color{color:#abb8c3}
:root .has-very-dark-gray-color{color:#313131}
.has-small-font-size{font-size:13px}
.has-normal-font-size,
.has-regular-font-size{font-size:16px}
.has-medium-font-size{font-size:20px}
.has-large-font-size{font-size:36px}
.has-huge-font-size,
.has-larger-font-size{font-size:42px}
.has-text-align-center{text-align:center}
.has-text-align-left{text-align:left}
.has-text-align-right{text-align:right}

/* =========================================================
   SINGLE SCALE WRAPPER
========================================================= */
.nhd-single-scale-stage{
  width:100%;
  overflow:visible;
}

.nhd-single-scale-wrap{
  width:100%;
}

/* =========================================================
   TABLET / MOBILE
========================================================= */
@media (max-width: 1024px){
  html,
  body{
    min-width:0 !important;
    max-width:100%;
    overflow-x:hidden;
  }

  .wrap,
  .container-head,
  .container,
  .content-site,
  footer,
  .header .container-logo{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .content{
    margin-top:14px;
  }

  body.nhd-menu-open{
    overflow:hidden !important;
  }

  .header .container-logo{
    display:grid !important;
    grid-template-columns:auto 1fr auto;
    gap:10px;
    align-items:center;
    padding:10px 12px;
  }

  .logo-head img,
  .header .container-logo .logo-head img{
    max-width:140px;
    max-height:56px;
  }

  .header .container-logo .h1-logo{
    max-width:none;
    margin:0;
    padding:0 6px;
    background:transparent;
    opacity:1;
    font-size:13px;
    line-height:1.35;
  }

  .nhd-mobile-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    width:58px;
    height:58px;
    padding:0;
    border:1px solid rgba(255,255,255,.22);
    border-radius:16px;
    background:linear-gradient(180deg, #6fd400 0%, #5ab600 100%);
    color:#fff;
    box-shadow:
      0 10px 24px rgba(0,0,0,.25),
      inset 0 1px 0 rgba(255,255,255,.18);
    cursor:pointer;
  }

  .nhd-mobile-toggle span{
    display:block;
    width:24px;
    height:3px;
    border-radius:999px;
    background:#fff;
    transition:.25s ease;
  }

  .nhd-mobile-toggle.is-open span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }

  .nhd-mobile-toggle.is-open span:nth-child(2){
    opacity:0;
  }

  .nhd-mobile-toggle.is-open span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }

  .header .container-logo .search{
    grid-column:1 / -1;
    width:100%;
    margin:8px 0 0;
    justify-content:stretch;
  }

  .searchform,
  .search .widget_search .searchform{
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background:#070b12;
    box-shadow:0 10px 24px rgba(0,0,0,.32);
  }

  .searchform input,
  .search .widget_search .searchform input{
    height:50px;
    padding:12px 16px;
    font-size:16px;
  }

  .searchform button,
  .search .widget_search .searchform button{
    width:64px;
    min-width:64px;
    height:50px;
    background:linear-gradient(180deg, #79da08 0%, #62c300 100%);
  }

  .nhd-navbar-full{
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .navbar{
    width:100% !important;
    position:relative;
    overflow:visible;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .navbar ul,
  .navbar ul#js-menu{
    width:100%;
    max-width:100%;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:12px 0 16px !important;
    margin:0 !important;
    background:linear-gradient(180deg, rgba(102,204,0,.96) 0%, rgba(74,150,0,.98) 100%) !important;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 40px rgba(0,0,0,.42);
  }

  .navbar ul#js-menu.is-open{
    display:flex;
  }

  .navbar li,
  .navbar ul#js-menu li{
    width:100%;
    padding:0 12px !important;
    margin:0 !important;
  }

  .navbar a,
  .navbar ul#js-menu li a{
    display:flex;
    align-items:center;
    width:100%;
    min-height:54px;
    padding:14px 16px !important;
    border-radius:14px;
    background:rgba(0,0,0,.08) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    color:#fff !important;
    font-size:17px !important;
    font-weight:800 !important;
    line-height:1.3;
    white-space:normal;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 6px 14px rgba(0,0,0,.12);
    transition:all .2s ease;
  }

  .navbar a:hover,
  .navbar ul#js-menu li a:hover{
    background:rgba(0,0,0,.16) !important;
    border-color:rgba(255,255,255,.12) !important;
  }

  .navbar ul#js-menu li.current-menu-item a,
  .navbar ul#js-menu li.current_page_item a,
  .navbar ul#js-menu li.current-cat a,
  .navbar ul#js-menu li a[aria-current="page"]{
    background:rgba(0,0,0,.22) !important;
    border-color:rgba(255,255,255,.16) !important;
  }

  .nhd-mobile-backdrop{
    display:none;
  }

  .nhd-mobile-backdrop.is-open{
    position:fixed;
    inset:0;
    z-index:99;
    display:block;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(2px);
  }

  /* HOME / ARCHIVE / PAGE */
  body:not(.single) .content-movie{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  body:not(.single) .contentmovie{
    width:100%;
    order:1;
  }

  body:not(.single) .left-sidebar,
  body:not(.single) .sidebar-left,
  body:not(.single) .adlf2{
    order:2;
    width:100%;
    max-width:100%;
  }

  body:not(.single) .right-sidebar,
  body:not(.single) .sidebar-right,
  body:not(.single) .adlf{
    order:3;
    width:100%;
    max-width:100%;
  }

  body:not(.single) .grid-movie,
  body:not(.single) .nhd-post-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  body:not(.single) .movietext h1,
  body:not(.single) .movietext h2,
  body:not(.single) .movietext h3{
    font-size:16px;
  }

  body:not(.single) .p-box .p2{
    min-height:38px;
    font-size:12px;
  }

  /* SINGLE */
  body.single .container,
  body.single .content{
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  body.single .nhd-single-scale-stage{
    position:relative !important;
    width:100% !important;
    overflow:hidden !important;
  }

  body.single .nhd-single-scale-wrap{
    width:1200px !important;
    max-width:none !important;
    min-width:1200px !important;
    transform-origin:top left !important;
    will-change:transform !important;
  }

  body.single .content-movie{
    display:grid !important;
    grid-template-columns:170px minmax(0,1fr) 170px !important;
    gap:12px !important;
    width:1200px !important;
    min-width:1200px !important;
  }

  body.single .left-sidebar,
  body.single .right-sidebar,
  body.single .sidebar-left,
  body.single .sidebar-right,
  body.single .adlf,
  body.single .adlf2{
    width:170px !important;
    max-width:170px !important;
    min-width:170px !important;
    order:initial !important;
  }

  body.single .contentmovie{
    order:initial !important;
  }

  body.single .grid-movie{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  body.single .content-col .content-col1{
    grid-template-columns:34% 65% !important;
    gap:1% !important;
  }

  body.single .content-col .content-col1 img{
    height:375px !important;
  }

  body.single .content-col .content-col2 .col-in1{
    flex-wrap:nowrap !important;
  }

  body.single .movie iframe,
  body.single .content-movie .contentmovie .movie iframe{
    width:100% !important;
    height:500px !important;
  }

  body.single .content-site,
  body.single footer{
    width:100% !important;
    max-width:100% !important;
  }

  .menu-footer ul{
    gap:8px 12px;
  }

  .menu-footer ul li{
    font-size:14px;
  }
}

@media (max-width: 560px){
  body:not(.single) .grid-movie,
  body:not(.single) .nhd-post-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  body:not(.single) .p-box{
    padding:7px 7px 9px;
  }

  body:not(.single) .p-box .p1{
    min-height:22px;
    margin-bottom:6px;
    padding:3px 7px;
    font-size:10px;
  }

  body:not(.single) .p-box .p2{
    min-height:34px;
    padding:5px;
    font-size:11px;
  }

  body:not(.single) .info1{
    top:6px;
    left:6px;
    min-width:48px;
    padding:3px 6px;
    font-size:10px;
  }

  body:not(.single) .info1 img.star{
    width:13px;
    height:13px;
  }

  body:not(.single) .movie-corner.movie-HD{
    min-width:52px;
    padding:2px 6px;
    font-size:10px;
    line-height:18px;
  }

  .logo-head img,
  .header .container-logo .logo-head img{
    max-width:120px;
    max-height:50px;
  }

  .header .container-logo .h1-logo{
    font-size:12px;
  }

  .menu-footer ul{
    flex-direction:column;
    gap:8px;
  }
}
/* =========================================================
   NHD HEADER / NAV FIX
   แก้ 3 จุด:
   1) เมนูมือถือกดได้
   2) เมนูคอมอยู่กึ่งกลาง
   3) โลโก้อยู่กึ่งกลาง
========================================================= */

/* desktop */
.header .container-logo{
  display:grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items:center !important;
  gap:20px !important;
  padding:18px 0 !important;
}

.header .container-logo .logo-head{
  grid-column:1 / 2;
  justify-self:center;
  text-align:center;
}

.header .container-logo .logo-head a,
.header .container-logo .logo-head .custom-logo-link{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
}

.logo-head img,
.header .container-logo .logo-head img,
.custom-logo{
  display:block;
  margin:0 auto;
}

.header .container-logo .h1-logo{
  grid-column:2 / 3;
  justify-self:center;
  max-width:100%;
  margin:0 !important;
  text-align:center !important;
}

.header .container-logo .search{
  grid-column:3 / 4;
  justify-self:end;
  width:100%;
  max-width:260px;
  margin:0 !important;
}

.nhd-mobile-toggle{
  display:none !important;
}

.nhd-navbar-full{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background:var(--nhd-green);
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.navbar{
  width:100%;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.navbar.wrap{
  max-width:100% !important;
}

.navbar ul,
.navbar ul#js-menu{
  width:100%;
  max-width:var(--nhd-wrap);
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  padding:10px 14px !important;
  background:transparent !important;
}

.navbar li,
.navbar ul#js-menu li{
  display:block;
  width:auto;
  padding:0 !important;
  margin:0 !important;
}

.navbar a,
.navbar ul#js-menu li a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:8px 14px !important;
  border-radius:8px;
  background:transparent !important;
  border:0 !important;
  color:#fff !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
}

.navbar a:hover,
.navbar ul#js-menu li a:hover{
  background:rgba(0,0,0,.12) !important;
}

.nhd-mobile-backdrop{
  display:none;
  pointer-events:none;
}

/* mobile */
@media (max-width: 1024px){
  .header .container-logo{
    display:grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "logo toggle"
      "title title"
      "search search" !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px 12px !important;
  }

  .header .container-logo .logo-head{
    grid-area:logo;
    justify-self:center !important;
    width:100%;
    text-align:center !important;
  }

  .header .container-logo .logo-head a,
  .header .container-logo .logo-head .custom-logo-link{
    display:inline-flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:auto;
  }

  .logo-head img,
  .header .container-logo .logo-head img,
  .custom-logo{
    margin:0 auto !important;
    max-width:140px !important;
    max-height:56px !important;
  }

  .header .container-logo .h1-logo{
    grid-area:title;
    justify-self:center !important;
    width:100%;
    margin:0 !important;
    padding:0 6px !important;
    background:transparent !important;
    text-align:center !important;
    font-size:13px !important;
    line-height:1.35 !important;
  }

  .header .container-logo .search{
    grid-area:search;
    justify-self:stretch !important;
    width:100% !important;
    max-width:none !important;
    margin:4px 0 0 !important;
  }

  .nhd-mobile-toggle{
    grid-area:toggle;
    justify-self:end;
    z-index:1003;
    display:flex !important;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    width:52px;
    height:52px;
    padding:0;
    border:1px solid rgba(255,255,255,.22);
    border-radius:14px;
    background:linear-gradient(180deg, #6fd400 0%, #5ab600 100%);
    color:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,.25);
    cursor:pointer;
  }

  .nhd-mobile-toggle span{
    display:block;
    width:22px;
    height:3px;
    border-radius:999px;
    background:#fff;
    transition:.25s ease;
  }

  .nhd-mobile-toggle.is-open span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }

  .nhd-mobile-toggle.is-open span:nth-child(2){
    opacity:0;
  }

  .nhd-mobile-toggle.is-open span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }

  .nhd-navbar-full{
    position:relative;
    z-index:1001;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .navbar{
    position:relative !important;
    z-index:1002 !important;
    overflow:visible !important;
    background:transparent !important;
  }

  .navbar ul,
  .navbar ul#js-menu{
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:12px !important;
    background:linear-gradient(180deg, rgba(102,204,0,.98) 0%, rgba(74,150,0,.98) 100%) !important;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 40px rgba(0,0,0,.42);
    position:relative !important;
    z-index:1002 !important;
  }

  .navbar ul#js-menu.is-open{
    display:flex !important;
  }

  .navbar li,
  .navbar ul#js-menu li{
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
  }

  .navbar a,
  .navbar ul#js-menu li a{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:52px !important;
    padding:14px 16px !important;
    border-radius:14px !important;
    background:rgba(0,0,0,.08) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    color:#fff !important;
    font-size:17px !important;
    font-weight:800 !important;
    line-height:1.3 !important;
    white-space:normal !important;
    text-align:left !important;
    pointer-events:auto !important;
    position:relative;
    z-index:1003;
  }

  .navbar a:hover,
  .navbar ul#js-menu li a:hover{
    background:rgba(0,0,0,.16) !important;
    border-color:rgba(255,255,255,.12) !important;
  }

  .nhd-mobile-backdrop.is-open{
    position:fixed !important;
    inset:0 !important;
    z-index:1000 !important;
    display:block !important;
    background:rgba(0,0,0,.55) !important;
    backdrop-filter:blur(2px);
    pointer-events:auto !important;
  }
}

@media (max-width: 560px){
  .logo-head img,
  .header .container-logo .logo-head img,
  .custom-logo{
    max-width:120px !important;
    max-height:50px !important;
  }

  .header .container-logo .h1-logo{
    font-size:12px !important;
  }
}
.nhd-card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.nhd-card-meta .p1{
  margin-bottom:0 !important;
}

.nhd-ep-inline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 10px;
  border-radius:999px;
  background:linear-gradient(135deg, #ff5a7a 0%, #ff6b57 100%);
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
}
.nhd-hub-wrap{
max-width:1200px;
margin:auto;
padding:20px;
}

.nhd-hub-title{
font-size:28px;
font-weight:800;
margin-bottom:20px;
}

.nhd-hub-section{
margin-bottom:28px;
}

.nhd-hub-section h2{
font-size:20px;
margin-bottom:12px;
font-weight:700;
}

.nhd-hub-grid{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.nhd-hub-chip{
display:inline-block;
padding:8px 14px;
background:#1f1f1f;
border-radius:999px;
font-size:14px;
color:#fff;
text-decoration:none;
transition:.2s;
}

.nhd-hub-chip:hover{
background:#66CC00;
color:#fff;
}
/* =========================================================
   ARTICLE TEMPLATES (Reviews / News / Ending Explained)
========================================================= */
.nhd-article-wrap{
  max-width:860px;
  margin:0 auto;
  padding:22px 16px 40px;
  color:#e8e8e8;
}
.nhd-breadcrumb{
  font-size:13px;
  margin-bottom:14px;
  color:#aab;
}
.nhd-breadcrumb a{ color:#9cc; text-decoration:none; }
.nhd-breadcrumb .sep{ margin:0 6px; color:#667; }
.nhd-article-h1{
  font-size:30px;
  line-height:1.3;
  font-weight:800;
  color:#fff;
  margin:0 0 12px;
}
.nhd-article-header{ margin-bottom:18px; }
.nhd-article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  font-size:14px;
  color:#aab;
}
.nhd-article-meta a{ color:#9cc; text-decoration:none; }
.nhd-article-hero{ margin:0 0 22px; }
.nhd-article-hero img{
  width:100%;
  height:auto;
  border-radius:12px;
  display:block;
}
.nhd-article-body{
  font-size:17px;
  line-height:1.85;
  color:#ddd;
}
.nhd-article-body p{ margin:0 0 18px; }
.nhd-article-body h2,
.nhd-article-body h3{
  color:#fff;
  margin:26px 0 12px;
  line-height:1.4;
}
.nhd-article-body h2{ font-size:22px; }
.nhd-article-body h3{ font-size:19px; }
.nhd-article-body a{ color:#7bd76a; }
.nhd-article-body strong{ color:#fff; }
.nhd-article-body img{
  max-width:100%;
  height:auto;
  border-radius:8px;
}
.nhd-article-tags{
  margin:22px 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.nhd-article-tags a{
  background:#1f1f1f;
  color:#cde;
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  text-decoration:none;
}
.nhd-article-tags a:hover{ background:#66CC00; color:#fff; }
.nhd-author-box{
  display:flex;
  gap:14px;
  margin:26px 0;
  padding:18px;
  background:#12180e;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
}
.nhd-author-avatar{ font-size:40px; line-height:1; }
.nhd-author-name{ font-weight:800; color:#fff; margin-bottom:6px; }
.nhd-author-bio{ font-size:14px; line-height:1.7; color:#bcc; }
.nhd-related{ margin-top:30px; }
.nhd-related-title{
  font-size:20px;
  font-weight:800;
  color:#fff;
  margin:0 0 14px;
}
.nhd-related-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.nhd-related-card{
  display:block;
  background:#12180e;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
}
.nhd-related-card img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:16/9;
  object-fit:cover;
}
.nhd-related-card-title{
  display:block;
  padding:10px 12px 4px;
  font-weight:700;
  color:#fff;
  line-height:1.4;
}
.nhd-related-card-date{
  display:block;
  padding:0 12px 12px;
  font-size:12px;
  color:#889;
}

/* Archive listing */
.nhd-archive-wrap{ max-width:1100px; }
.nhd-archive-header{ margin-bottom:22px; }
.nhd-archive-desc{
  font-size:16px;
  line-height:1.8;
  color:#ccd;
  margin-top:10px;
}
.nhd-article-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.nhd-article-card{
  background:#12180e;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
  transition:transform .18s ease, border-color .18s ease;
}
.nhd-article-card:hover{
  transform:translateY(-3px);
  border-color:#66CC00;
}
.nhd-article-card a{ text-decoration:none; display:block; }
.nhd-article-card-thumb img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:16/9;
  object-fit:cover;
}
.nhd-article-card-body{ padding:14px; }
.nhd-article-card-title{
  font-size:16px;
  line-height:1.45;
  font-weight:700;
  color:#fff;
  margin:0 0 8px;
}
.nhd-article-card-date{ font-size:12px; color:#889; margin-bottom:8px; }
.nhd-article-card-excerpt{
  font-size:14px;
  line-height:1.6;
  color:#bbc;
  margin:0;
}
.nhd-article-pagination{ margin-top:26px; text-align:center; }
.nhd-article-pagination .page-numbers{
  display:inline-block;
  padding:7px 13px;
  margin:0 3px;
  background:#1f1f1f;
  color:#fff;
  border-radius:7px;
  text-decoration:none;
}
.nhd-article-pagination .page-numbers.current{ background:#66CC00; color:#fff; }
.nhd-empty{
  text-align:center;
  color:#aab;
  padding:40px 0;
}

@media (max-width:768px){
  .nhd-article-h1{ font-size:24px; }
  .nhd-article-body{ font-size:16px; }
  .nhd-article-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .nhd-related-grid{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .nhd-article-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   ARTICLE -> MOVIE LINK (cover badge)
========================================================= */
.nhd-article-card-thumb{ position:relative; display:block; overflow:hidden; }
.nhd-watch-badge{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  background:linear-gradient(135deg,#66CC00,#4d9a00);
  color:#fff;
  font-size:13px;
  font-weight:800;
  padding:7px 16px;
  border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  white-space:nowrap;
  opacity:.96;
  transition:opacity .18s ease, transform .18s ease;
}
.nhd-article-card-thumb:hover .nhd-watch-badge{ opacity:1; }
.nhd-watch-badge-lg{
  font-size:15px;
  padding:9px 20px;
  bottom:16px;
}
.nhd-hero-movielink{ position:relative; display:block; }

/* =========================================================
   BREADCRUMB BAR (below menu)
========================================================= */
.nhd-breadcrumb-bar{
  max-width:var(--nhd-wrap);
  margin:0 auto;
  padding:10px 14px 4px;
  font-size:14px;
  color:#aab;
}
.nhd-breadcrumb-bar .nhd-breadcrumb{ margin:0; }
.nhd-breadcrumb-bar a{ color:#9cc; text-decoration:none; }
.nhd-breadcrumb-bar a:hover{ color:#fff; }
.nhd-breadcrumb-bar .breadcrumb_last{ color:#e8e8e8; }

/* =========================================================
   NAV DROPDOWN (บทความหนัง sub-menu)
========================================================= */
.navbar li{
  position:relative;
}
.navbar ul .sub-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:210px;
  margin:0;
  padding:6px;
  flex-direction:column;
  align-items:stretch;
  gap:2px;
  background:var(--nhd-green);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  box-shadow:0 12px 24px rgba(0,0,0,.28);
  z-index:60;
}
.navbar li.menu-item-has-children:hover > .sub-menu,
.navbar li.menu-item-has-children:focus-within > .sub-menu{
  display:flex;
}
.navbar ul .sub-menu a{
  padding:9px 12px;
  font-size:15px;
  white-space:nowrap;
}

/* =========================================================
   MOVIE PAGE: RELATED ARTICLES (internal links)
========================================================= */
.nhd-related-articles{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  margin-bottom:14px;
}
.nhd-related-article-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  text-decoration:none;
  color:#e8e8e8;
  transition:background .2s ease;
}
.nhd-related-article-link:hover{
  background:rgba(102,204,0,.14);
}
.nhd-ra-title{
  font-weight:700;
  color:#fff;
}
.nhd-ra-date{
  flex-shrink:0;
  font-size:13px;
  color:#9aa;
}

/* =========================================================
   ARTICLE CARD: WATCH LINK (ไปหน้าดูหนัง)
========================================================= */
.nhd-card-watch-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  padding:7px 12px;
  border-radius:999px;
  background:#66CC00;
  color:#fff;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  transition:opacity .2s ease;
}
.nhd-card-watch-link:hover{
  opacity:.88;
  color:#fff;
}

/* =========================================================
   YOUTUBE TRAILER (full-width responsive)
========================================================= */
.nhd-youtube-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  margin:0 0 14px;
  border-radius:12px;
  overflow:hidden;
  background:#000;
}
.nhd-youtube-frame{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}