/* ==========================================================
   Custom Fixes - 9nung.com
   Manages: mobile header buttons, slider arrows, pagination
   ========================================================== */


/* ----------------------------------------------------------
   0. Content font size 17px - เฉพาะส่วนที่เห็น
   ---------------------------------------------------------- */

.head-main-nav ul.main-header li a {
    font-size: 14px;
    font-weight: 500;
    padding: 28px 16px;
    float: left;
}

/* ข้อมูลหนัง (IMDB, วันฉาย, ความยาว ฯลฯ) */
.sheader .data,
.sheader .data p,
.sheader .data span,
.sbox .sdata,
.sbox p,
.extra span {
    font-size: 17px !important;
}

/* เนื้อเรื่อง */
.wp-content p,
.wp-content {
    font-size: 17px !important;
}

/* นักแสดง / ผู้กำกับ */
.cast p, .cast a,
.director p, .director a {
    font-size: 17px !important;
}

/* Sidebar: เมนูหลัก, CATEGORIES, TAGS */
.widget ul li a,
.widget ul li,
.tagcloud a {
    font-size: 17px !important;
}

/* ----------------------------------------------------------
   1. Mobile header buttons - fix icons
   ---------------------------------------------------------- */
header button.aresp,
header.responsive button.aresp {
    background: transparent !important;
    color: #c8c8c8 !important;
    -webkit-text-fill-color: #c8c8c8 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 12px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

header button.aresp:hover,
header.responsive button.aresp:hover {
    background: rgba(255,255,255,.08) !important;
}

/* No ::before icons — icons are injected as <i> elements by JS */
header button.aresp::before,
header.responsive button.aresp::before {
    display: none !important;
    content: none !important;
}

/* Style the <i> icon elements inside header buttons */
header button.aresp i,
header.responsive button.aresp i {
    font-size: 22px !important;
    color: #c8c8c8 !important;
    -webkit-text-fill-color: #c8c8c8 !important;
    display: inline-block !important;
    line-height: 1 !important;
    pointer-events: none;
}

header button.aresp:hover i,
header.responsive button.aresp:hover i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* พื้นหลังปุ่มค้นหาเป็นสีดำ (ทั้ง PC และมือถือ) */
header .search button.search-resp,
header .search a.search-resp,
header.responsive .search button.search-resp,
header.responsive .search a.search-resp {
    background: #000 !important;
    background-color: #000 !important;
}
header .search button.search-resp:hover,
header .search a.search-resp:hover,
header.responsive .search button.search-resp:hover,
header.responsive .search a.search-resp:hover {
    background: #000 !important;
    background-color: #000 !important;
}

/* ----------------------------------------------------------
   2. Slider arrows - smaller silver
   ---------------------------------------------------------- */
.btn.prevf, .btn.nextf, .btn.prev4, .btn.next4 {
    padding: 4px 10px !important;
    font-size: 12px !important;
    min-width: 0 !important;
    background: rgba(50,50,50,.88) !important;
    color: #c0c0c0 !important;
    -webkit-text-fill-color: #c0c0c0 !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.4) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
}

.btn.prevf i, .btn.nextf i, .btn.prev4 i, .btn.next4 i {
    color: #c0c0c0 !important;
    -webkit-text-fill-color: #c0c0c0 !important;
    font-size: 12px !important;
}

/* ----------------------------------------------------------
   3. Pagination wrapper - center everything
   ---------------------------------------------------------- */
.module .content .pagination,
.pagination {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 12px auto !important;
    padding: 0 !important;
}

/* ----------------------------------------------------------
   4. Pagination items sizing
   ---------------------------------------------------------- */
.module .content .pagination span.current,
.module .content .pagination a.inactive,
.module .content .pagination a.arrow_pag,
.pagination span.current,
.pagination a.inactive,
.pagination a.arrow_pag {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}

.pagination a.arrow_pag,
.module .content .pagination a.arrow_pag {
    min-width: 40px !important;
}

/* Hide "Page X" text label */
.pagination span:first-child,
.module .content .pagination span:first-child {
    display: none !important;
}

/* ----------------------------------------------------------
   5. Pagination - silver colors (override any green from cache)
   ---------------------------------------------------------- */
.module .content .pagination span.current,
.pagination span.current {
    color: #ffffff !important;
    background: rgba(200,200,200,.18) !important;
    border-color: #b0b0b0 !important;
}

.module .content .pagination a.inactive,
.pagination a.inactive {
    color: #a0a0a0 !important;
    border-color: rgba(180,180,180,.35) !important;
    background: transparent !important;
}

.module .content .pagination a.inactive:hover,
.pagination a.inactive:hover {
    color: #ffffff !important;
    border-color: #c8c8c8 !important;
    background: rgba(200,200,200,.12) !important;
}

.module .content .pagination a.arrow_pag,
.pagination a.arrow_pag {
    border-color: rgba(180,180,180,.5) !important;
    color: #c8c8c8 !important;
    background: transparent !important;
}

.module .content .pagination a.arrow_pag:hover,
.pagination a.arrow_pag:hover {
    border-color: #c8c8c8 !important;
    color: #ffffff !important;
    background: rgba(200,200,200,.12) !important;
}

/* ----------------------------------------------------------
   6. Pagination jump (Go to page) - centered separate row
   ---------------------------------------------------------- */
.doo-jump-wrap {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    margin: 8px auto 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* ----------------------------------------------------------
   7. Homepage H1 — accessible hidden (Google อ่านได้ ตาไม่เห็น)
   ---------------------------------------------------------- */
.home-seo-h1.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ----------------------------------------------------------
   8. See-all button ใต้ genre widget
   ---------------------------------------------------------- */
.seeall-wrap {
    clear: both;
    text-align: center;
    margin: 14px 0 6px;
}
.btn-seeall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none !important;
    background: rgba(200,200,200,.10);
    border: 1px solid rgba(200,200,200,.25);
    color: #d0d0d0 !important;
    transition: background .2s, color .2s, border-color .2s;
}
.btn-seeall:hover {
    background: rgba(200,200,200,.22);
    border-color: rgba(200,200,200,.5);
    color: #fff !important;
}
.btn-seeall i {
    font-size: 15px;
}

/* ----------------------------------------------------------
   9. Footer — keywords bar + centered menu
   ---------------------------------------------------------- */

/* Keywords bar: full-width, centered, below copy+top-page */
.nx-footer-kw {
    clear: both;
    float: left;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 12px;
    text-align: center;
    padding: 10px 0 12px;
    font-size: 12px;
    line-height: 1.9;
    color: #d0d0d0;
    border-top: 1px solid rgba(255,255,255,.06);
}
.nx-footer-kw a {
    color: #e0e0e0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 8px 4px;
    min-height: 24px;
}
.nx-footer-kw span {
    color: #d0d0d0;
}
.nx-footer-kw a:hover { color: #fff; }

/* Accessibility: footer copy + DMCA box contrast fix */
footer.main, footer.main .fcmpbox, footer.main .copy { color: #d0d0d0 !important; }
footer.main a, footer.main .copy a { color: #e8e8e8 !important; }
footer.main a:hover { color: #fff !important; }

/* Footer menu: clear floats, center all links */
footer.main .fbox .fmenu {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    padding: 0 0 16px !important;
    text-align: center;
}
footer.main .fbox .fmenu ul {
    float: none !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
}
footer.main .fbox .fmenu ul li {
    float: none !important;
    padding: 4px 6px !important;
}
/* Touch target 24×24 minimum (WCAG 2.5.8) */
footer.main .fbox .fmenu ul li a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px !important;
    color: #e8e8e8 !important;
}
footer.main .fbox .fmenu ul li a:hover { color: #fff !important; }

/* Copy: tighten padding */
footer.main .fbox .copy {
    padding: 22px 0 !important;
    max-width: 70%;
}

/* Top-page button: tighten padding to align with copy */
span.top-page {
    padding: 16px 0 !important;
}

/* แสดง footer ทุกขนาดหน้าจอ (front.mobile.css ซ่อน display:none) */
footer.main { display: block !important; }

/* ซ่อน loading overlay (JS a(".content").load() ไม่ทำงานใน browser ใหม่) */
.load_modules { display: none !important; }

/* Force owl-carousel visible — front.owl.css ซ่อน .owl-carousel{display:none}
   JS ควบคุม opacity เอง (0→1 ระหว่าง init) ไม่ต้อง override opacity */
.owl-carousel { display: block !important; }
.owl-carousel .owl-wrapper { display: block !important; }

/* Single gallery fallback — front.style.css ซ่อน #dt_galery ไว้ก่อน init */
#dt_galery,
#dt_galery_ep {
    display: block !important;
}

/* Featured Movies / module sliders — front.style.css ซ่อนไว้รอ OWL init
   ถ้า JS ไม่ fire (plugin conflict / defer / error อื่น) items จะไม่โผล่เลย
   บังคับแสดงเป็น grid เดิมไว้ก่อน; OWL จะจัด layout ทับเองเมื่อ init สำเร็จ */
#featured-titles,
#dt-movies,
#dt-tvshows,
#dt-episodes,
#dt-seasons,
#slider-movies,
#slider-tvshows,
#slider-movies-tvshows,
#slider-master {
    display: block !important;
}

/* StatCounter pixel — กำหนดขนาดกัน CLS warning */
img[src^="data:image/gif;base64,R0lGOD"][alt*="StatCounter"],
img[src^="https://c.statcounter.com"] {
    width: 1px;
    height: 1px;
}

#dt_galery .g-item a,
#dt_galery_ep .g-item a {
    display: block;
    width: 100%;
    height: 100%;
}

/* แสดง items เสมอ — safety net กรณี JS ไม่ทำงาน */
.module .content .items .item { visibility: visible !important; }

/* Responsive: stack on mobile */
@media (max-width: 767px) {
    footer.main .fbox .copy {
        float: none !important;
        max-width: 100% !important;
        text-align: center;
        padding: 18px 0 8px !important;
    }
    span.top-page {
        float: none !important;
        display: block !important;
        text-align: center;
        padding: 10px 0 4px !important;
    }
    span.top-page a {
        float: none !important;
        display: inline-block !important;
    }
    .nx-footer-kw {
        border-top: none;
        gap: 6px 8px;
        padding: 2px 12px 12px !important;
        font-size: 11px;
        line-height: 1.8;
    }
    .nx-footer-kw a,
    .nx-footer-kw span {
        white-space: normal;
    }
    footer.main .fbox .fmenu {
        padding: 0 10px 16px !important;
    }
    footer.main .fbox .fmenu ul li {
        padding: 5px 10px !important;
    }
}

/* ----------------------------------------------------------
   10. Mobile header — logo อยู่บรรทัดเดียวกับ menu/search
   ---------------------------------------------------------- */

/* ซ่อน responsive header บน desktop */
@media (min-width: 769px) {
    header.responsive { display: none !important; }
}

/* Flexbox + order: แน่ใจว่า nav|logo|search อยู่แถวเดียวกัน
   DOM order: .nav (1st) → .search (2nd) → .logo (3rd)
   Visual order: nav ซ้าย | logo กลาง | search ขวา          */
@media only screen and (max-width: 768px) {
    header.responsive {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: 100% !important;
        height: 6px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        overflow: hidden !important;
        float: none !important;
        box-sizing: border-box;
    }
    /* .nav → ซ้าย */
    header.responsive .nav {
        order: 1 !important;
        flex: 0 0 56px !important;
        width: 56px !important;
        height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        padding: 0 !important;
        border-right: solid 1px rgba(255,255,255,.1) !important;
        border-left: none !important;
        box-sizing: border-box;
    }
    /* .logo → กลาง */
    header.responsive .logo {
        order: 2 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        padding: 0 6px !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box;
    }
    /* .search → ขวา */
    header.responsive .search {
        order: 3 !important;
        flex: 0 0 56px !important;
        width: 56px !important;
        height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        padding: 0 !important;
        border-left: solid 1px rgba(255,255,255,.1) !important;
        border-right: none !important;
        box-sizing: border-box;
    }
    /* ย่อโลโก้ให้พอดีช่องกลาง */
    header.responsive .logo a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    header.responsive .logo .doo-logo-premium {
        transform: scale(.76) !important;
        transform-origin: center center !important;
        white-space: nowrap !important;
        display: inline-flex !important;
    }
    /* ปรับ margin-top ของ contenedor ให้ตรงกับ header 56px */
    #contenedor { margin-top: 56px !important; }

    /* ลบช่องว่างระหว่าง header กับ content บนมือถือ */
    #contenedor .module .content,
    #contenedor .module .sidebar { padding-top: 0 !important; }
    #contenedor .module .content > header:first-child,
    #contenedor .module .content > header.archive_post:first-child { padding-top: 0 !important; margin-top: 0 !important; }
    #contenedor .module .content > header:first-child h2 { margin-top: 0 !important; }
}

/* ----------------------------------------------------------
   Featured items — layout: Title บรรทัดบน, [★ Year] บรรทัดล่าง
   ---------------------------------------------------------- */
.module .content .items .item .dfeatur {
    padding-left: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 2px;
}
.module .content .items .item .dfeatur h3 {
    order: 1;
    flex: 0 0 100%;
    width: 100% !important;
    float: none !important;
    line-height: 20px !important;
    margin-bottom: 0 !important;
}
.module .content .items .item .dfeatur .mark {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 2;
    flex: 0 0 auto;
    line-height: 1;
}
.module .content .items .item .dfeatur .mark i {
    font-size: 14px !important;
    line-height: 1 !important;
    color: #f5c518 !important;
    -webkit-text-fill-color: #f5c518 !important;
    opacity: 1;
    vertical-align: baseline;
}
.module .content .items .item .dfeatur > span {
    order: 3;
    flex: 1 1 auto;
    width: auto !important;
    float: none !important;
}

/* ----------------------------------------------------------
   Featured badge — แทน text "FEATURED" ด้วย icon ไฟ (icomoon \e902)
   badge ทรงกลมเล็ก สีทอง โดดเด่นแต่ไม่เกะกะ
   ---------------------------------------------------------- */
.featu {
    font-size: 0 !important;
    line-height: 1 !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: linear-gradient(135deg,#ffb524,#ff6b00) !important;
    box-shadow: 0 2px 8px rgba(255,120,0,.45), 0 0 0 2px rgba(0,0,0,.15);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    top: 5px !important;
    left: 8px !important;
    z-index: 3;
}
.featu::before {
    font-family: 'icomoon' !important;
    content: "\e907";               /* icon-star-full */
    font-size: 15px !important;
    line-height: 1 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}