/*
Theme Name: Theme
Theme URI: https://example.com
Author: williamkane
Description: Theme
Version: 3.0.1
Text Domain: anime-theme
*/

*{box-sizing:border-box}
html{background:#0f1014}
body{margin:0;background:#0f1014;color:#e8e8ea;font-family:Arial,Helvetica,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none;margin:0;padding:0}
button,input{font:inherit}
.container{width:min(1580px,100%);margin:0 auto;padding:0 18px}

/* Header - modeled after the compact mobile layout in the reference */
.site-header{background:#15161c;border-bottom:1px solid #272a33;position:relative;z-index:100}
.header-top{min-height:70px;display:flex;align-items:center;gap:28px}
.site-logo{font-size:25px;line-height:1;font-weight:800;letter-spacing:-.6px;color:#ff4058;white-space:nowrap}
.site-logo img,.site-logo .custom-logo{max-height:38px;width:auto}
.main-nav{margin-left:4px;flex:1}
.main-nav>ul{display:flex;align-items:center;gap:28px}
.main-nav a{display:block;color:#c9cbd1;font-size:16px;padding:8px 0}
.main-nav a:hover{color:#ff4058}
.main-nav .menu-item-has-children>a::after{content:"▾";display:inline-block;margin-left:7px;font-size:.72em;line-height:1;vertical-align:middle;opacity:.8}
.main-nav .sub-menu{position:absolute;top:100%;left:0;min-width:190px;padding:7px 0;background:#191b22;border:1px solid #2b2e37;border-radius:6px;box-shadow:0 12px 28px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(5px);transition:.15s}
.main-nav li{position:relative}
.main-nav li:hover>.sub-menu,.main-nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.main-nav .sub-menu a{padding:8px 14px;font-size:14px}
.main-nav .sub-menu a:hover{background:#22252d}
.mobile-menu-toggle{display:none;margin-left:auto;width:42px;height:42px;border:0;background:transparent;padding:7px;cursor:pointer}
.mobile-menu-toggle span{display:block;height:3px;margin:5px 0;border-radius:2px;background:#e5e6e8}
.header-search{padding-bottom:16px}
.search-form{display:flex;width:100%;height:52px}
.search-form input[type=search]{min-width:0;flex:1;background:#1c1e27;border:1px solid #303440;border-right:0;border-radius:6px 0 0 6px;color:#f4f4f5;padding:0 16px;outline:none;font-size:16px}
.search-form input[type=search]::placeholder{color:#888d98}
.search-form input[type=search]:focus{border-color:#454a58}
.search-form button{width:108px;border:0;border-radius:0 6px 6px 0;background:#ff4058;color:#fff;cursor:pointer;font-size:16px}
.search-form button:hover{background:#ff5268}

/* Main */
.page-shell{padding-top:42px;padding-bottom:70px}
.site-main--full{width:100%}
.anime-section{width:100%}
.section-title{position:relative;margin:0 0 24px;padding-left:16px;font-size:28px;line-height:1.2;font-weight:700;color:#f0f0f2}
.section-title:before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:#ff4058;border-radius:0 2px 2px 0}

/* Cards */
.anime-grid,.anime-grid--full{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.anime-card{display:block;min-width:0;background:#191b22;border-radius:8px;overflow:hidden;transition:transform .15s ease,background .15s ease}
.anime-card:hover{transform:translateY(-2px);background:#1d2028}
.poster-wrap{position:relative;background:#0a0b0e;overflow:hidden;aspect-ratio:16/9}
.anime-card__eps{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.75);color:#fff;font-size:11px;font-weight:600;letter-spacing:.02em;padding:2px 7px;border-radius:4px}
.anime-card .poster-wrap img{width:100%;height:100%;object-fit:cover}
.anime-card__body{padding:14px 14px 17px}
.anime-title{margin:0;color:#ededee;font-size:18px;font-weight:700;line-height:1.35;word-break:break-word}
.anime-excerpt{margin-top:9px;color:#c4c6cc;font-size:14px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.empty-state{color:#8e929c}

/* Pagination */
.pagination{margin-top:30px}
.pagination .nav-links{display:flex;gap:7px;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;background:#191b22;border:1px solid #2c2f38;border-radius:5px;color:#c9cbd0}
.pagination .current{background:#ff4058;border-color:#ff4058;color:#fff}

/* Single page */
.anime-hero{display:grid;grid-template-columns:220px 1fr;gap:24px;margin-bottom:28px;background:#191b22;border:1px solid #272a33;border-radius:8px;padding:20px}
.anime-hero__poster img{width:100%;border-radius:6px}
.anime-hero__body{min-width:0}
.anime-hero__title{margin:0 0 16px;font-size:27px;line-height:1.25;word-break:break-word}
.anime-hero__row{display:flex;gap:12px;align-items:flex-start;margin-bottom:11px}
.anime-hero__label{width:58px;flex:0 0 58px;padding-top:4px;color:#8c909b;font-size:12px;font-weight:700;text-transform:uppercase}
.anime-hero__tags{display:flex;flex-wrap:wrap;gap:6px}
.anime-tag{display:inline-block;padding:5px 10px;border-radius:999px;background:#272a33;color:#d0d2d7;font-size:13px}
.anime-tag:hover{background:#ff4058;color:#fff}
.anime-tag--status{background:#202d35}
.anime-tag--eps{background:#202d35;color:#ff8a97}


.anime-desc,.anime-description{color:#c7c9cf;font-size:15px}.anime-description__content{position:relative;max-height:7.2em;overflow:hidden;line-height:1.8}.anime-description__content:after{content:"";position:absolute;left:0;right:0;bottom:0;height:42px;background:linear-gradient(to bottom,rgba(25,27,34,0),#191b22);pointer-events:none}.anime-description.is-expanded .anime-description__content{max-height:none}.anime-description.is-expanded .anime-description__content:after,.anime-description.is-not-collapsible .anime-description__content:after{display:none}.anime-description .content-toggle-btn{margin-top:8px}.anime-description.is-not-collapsible .content-toggle-btn{display:none}

.player-box,.anime-player{background:#000;border-radius:7px;overflow:hidden;margin-bottom:20px}
.anime-player-stage{position:relative;aspect-ratio:16/9}
.anime-player-stage video,.anime-player-stage iframe,.anime-player .anime-video{width:100%;height:100%;border:0;display:block;background:#000}
.player-box .player-empty{color:#fff;text-align:center;padding-top:40%;aspect-ratio:16/9}
.anime-player-notice{position:absolute;top:0;left:0;right:0;padding:8px 12px;background:rgba(0,0,0,.75);color:#fff;font-size:13px;text-align:center}
.anime-server-switch{display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px;background:#15161c}
.anime-server-btn{background:transparent;border:1px solid #3a3d45;color:#a9adb6;font-size:13px;padding:6px 16px;border-radius:20px;cursor:pointer}
.anime-server-btn:hover,.anime-server-btn.is-active{background:#ff4058;border-color:#ff4058;color:#fff}

/* Player controls */
.anime-controls{display:flex;align-items:center;gap:10px;position:absolute;left:0;right:0;bottom:0;padding:8px 12px;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0));color:#fff}
.pc-btn{background:transparent;border:0;color:#fff;width:28px;height:28px;padding:0;cursor:pointer;flex-shrink:0}.pc-btn svg{width:100%;height:100%}
.pc-time{font-size:12px;min-width:38px;text-align:center}.pc-progress{position:relative;flex:1;height:6px;background:rgba(255,255,255,.25);border-radius:3px;overflow:hidden}.pc-progress-buffered,.pc-progress-played{position:absolute;left:0;top:0;bottom:0}.pc-progress-buffered{width:0;background:rgba(255,255,255,.35)}.pc-progress-played{width:0;background:#ff4058}.pc-seek{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}.pc-volume{width:70px;accent-color:#ff4058}.pc-quality{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:4px;font-size:12px;padding:3px 6px}

/* Player actions / modals */

/* Sidebars: kéo thả widget WordPress / Custom HTML / Ad vào cột trái hoặc phải */
.page-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 220px;gap:24px;align-items:start}
.page-layout--no-sidebar{display:block}
.page-layout--left-only{grid-template-columns:220px minmax(0,1fr)}
.page-layout--right-only{grid-template-columns:minmax(0,1fr) 220px}
.site-sidebar{min-width:0}
.widget{background:#191b22;border-radius:7px;padding:16px;margin-bottom:20px;overflow:hidden}.widget-title{font-size:15px;font-weight:700;margin:0 0 12px}.widget-anime-item{display:flex;gap:10px;margin-bottom:10px}.widget-anime-item img{width:50px;height:70px;object-fit:cover;border-radius:4px}.widget-anime-item .t{font-size:13px;font-weight:600}.widget-anime-item .y{font-size:12px;color:#8a8e97}.widget-anime-item--views{align-items:center}.widget-anime-item--views .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.most-viewed-tabs{display:flex;gap:5px;margin:0 0 12px}.most-viewed-tab{flex:1;padding:6px 5px;border:1px solid #303440;background:transparent;color:#9da1aa;border-radius:4px;font-size:12px;cursor:pointer}.most-viewed-tab.is-active{background:#ff4058;border-color:#ff4058;color:#fff}.most-viewed-panel{min-height:20px}.most-viewed-loading{font-size:12px;color:#8a8e97;padding:8px 0}
.widget--main{background:transparent;padding:0;margin-bottom:32px}.widget--banner{text-align:center}.anime-ad-slot{display:flex;justify-content:center;align-items:center;overflow:hidden}.anime-ad-slot img{max-width:100%;height:auto;border-radius:6px}.single-banner{margin:20px 0}
.single-related{margin-top:28px}
.site-content-wrap--full{display:block}.site-main--full{width:100%}
.widget img,.widget iframe,.widget video,.widget table{max-width:100%}.widget pre{white-space:pre-wrap;word-break:break-word}

.site-footer{background:#15161c;border-top:1px solid #272a33;padding:25px 0;text-align:center;font-size:13px;color:#858995}

/* Mobile: match reference - compact header, hamburger, 2-column anime cards */
@media(max-width:900px){
  .container{padding-left:16px;padding-right:16px}
  .header-top{min-height:64px;gap:0}
  .main-nav{display:none;margin:0;padding:0 0 12px}
  .main-nav.is-open{display:block}
  .main-nav>ul{display:block;border-top:1px solid #272a33;padding-top:7px}
  .main-nav>ul>li>a{padding:11px 2px}
  .main-nav .sub-menu{position:static;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;background:#121318;padding-left:12px}
  .main-nav li:hover>.sub-menu{display:block}
  .mobile-menu-toggle{display:block}
  .header-top{flex-wrap:wrap}
  .header-top .main-nav{order:3;flex-basis:100%}
  .header-search{padding-bottom:16px}
  .page-shell{padding-top:32px}
  .anime-grid,.anime-grid--full{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .section-title{font-size:25px;margin-bottom:20px}
  .anime-card__body{padding:11px 12px 14px}
  .anime-title{font-size:17px}
  .anime-excerpt{font-size:14px;line-height:1.4;-webkit-line-clamp:6}
  .page-layout,.page-layout--left-only,.page-layout--right-only{grid-template-columns:minmax(0,1fr);gap:0}
  .site-sidebar{margin-top:28px}
  .page-layout > .site-sidebar{order:2}
  .page-layout > .site-main{order:1}
  .anime-hero{grid-template-columns:1fr;padding:14px}
  .anime-hero__poster{max-width:260px}
}
@media(max-width:520px){
  .site-logo{font-size:25px}
  .search-form{height:52px}
  .search-form button{width:106px}
  .page-shell{padding-top:34px}
  .section-title{font-size:27px}
  .anime-grid,.anime-grid--full{gap:10px}
  .anime-card{border-radius:7px}
  .anime-title{font-size:18px;line-height:1.35}
  .anime-excerpt{font-size:14px}
}

/* Header/menu robustness: always show a real mobile hamburger and Home/Anime menu. */
@media (max-width:900px){
  .site-header .header-top{position:relative;display:flex;align-items:center;min-height:64px;flex-wrap:nowrap;gap:0}
  .site-header .site-logo{display:block;max-width:calc(100% - 58px);overflow:hidden;text-overflow:ellipsis}
  .site-header .mobile-menu-toggle{display:block!important;visibility:visible!important;opacity:1!important;position:relative;z-index:101;margin-left:auto;flex:0 0 42px;width:42px;height:42px;padding:6px;background:transparent;border:0}
  .site-header .mobile-menu-toggle span{display:block!important;width:27px;height:3px;margin:5px auto;background:#e8e8ea;border-radius:2px}
  .site-header .main-nav{display:none!important;order:initial;flex:0 0 100%;width:100%;margin:0;padding:0 0 10px}
  .site-header .main-nav.is-open{display:block!important}
  .site-header .header-top:has(.main-nav.is-open){flex-wrap:wrap}
  .site-header .main-nav>ul{display:block;width:100%;border-top:1px solid #272a33;padding-top:7px}
  .site-header .main-nav>ul>li>a{display:block;padding:11px 2px;color:#e5e6e8;font-size:16px}
  .site-header .main-nav .sub-menu{position:static;display:none;padding-left:12px;background:transparent;border:0;box-shadow:none}
  .site-header .main-nav li:hover>.sub-menu,.site-header .main-nav li:focus-within>.sub-menu{display:block}
}

/* =========================================================
   SIDEBAR LAYOUT FIX v1.19
   Desktop: left sidebar | main | right sidebar
   WordPress widgets stay inside their respective columns.
   ========================================================= */
@media (min-width: 901px){
  .container.page-shell.page-layout{
    display:grid !important;
    grid-template-columns:220px minmax(0,1fr) 220px !important;
    grid-template-areas:"left main right" !important;
    column-gap:24px !important;
    row-gap:0 !important;
    align-items:start !important;
    width:min(1580px,100%) !important;
  }

  .container.page-shell.page-layout > .site-sidebar--left{
    grid-area:left !important;
    display:block !important;
    width:220px !important;
    min-width:0 !important;
    margin:0 !important;
  }

  .container.page-shell.page-layout > .site-main{
    grid-area:main !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
  }

  .container.page-shell.page-layout > .site-sidebar--right{
    grid-area:right !important;
    display:block !important;
    width:220px !important;
    min-width:0 !important;
    margin:0 !important;
  }

  .container.page-shell.page-layout.page-layout--left-only{
    grid-template-columns:220px minmax(0,1fr) !important;
    grid-template-areas:"left main" !important;
  }

  .container.page-shell.page-layout.page-layout--right-only{
    grid-template-columns:minmax(0,1fr) 220px !important;
    grid-template-areas:"main right" !important;
  }

  .container.page-shell.page-layout.page-layout--no-sidebar{
    display:block !important;
    width:min(1580px,100%) !important;
  }

  .container.page-shell.page-layout .site-sidebar .widget{
    width:100%;
    box-sizing:border-box;
  }
}

/* At desktop widths below 1200px, keep the content readable by
   collapsing sidebars instead of squeezing the anime grid. */
@media (min-width:901px) and (max-width:1199px){
  .container.page-shell.page-layout{
    grid-template-columns:190px minmax(0,1fr) 190px !important;
    column-gap:16px !important;
  }
  .container.page-shell.page-layout > .site-sidebar--left,
  .container.page-shell.page-layout > .site-sidebar--right{
    width:190px !important;
  }
}

/* Frontend admin controls on anime player */
.anime-admin-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-8px 0 18px;padding:10px 12px;background:#15171d;border:1px solid #292c34;border-radius:7px}
.anime-admin-tools__label{font-size:12px;font-weight:700;color:#8f949f;text-transform:uppercase;margin-right:4px}
.anime-admin-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #3a3d45;background:transparent;color:#d8dbe1;border-radius:5px;padding:7px 12px;font-size:13px;line-height:1.2;cursor:pointer}
.anime-admin-btn:hover{border-color:#777d89;color:#fff}
.anime-admin-btn--delete:hover{border-color:#d84a5f;color:#fff}
.anime-admin-btn:disabled{opacity:.55;cursor:wait}
.anime-admin-status{display:none;font-size:12px;color:#8fd694;margin-left:4px}
.anime-admin-status.is-error{color:#ff7b8d}
@media (max-width:600px){.anime-admin-tools{margin:-4px 0 14px}.anime-admin-btn{flex:1}.anime-admin-tools__label{width:100%}}


/* Episode selector */
.episode-selector{display:flex;align-items:center;gap:10px;margin:0 0 24px;width:100%}.episode-selector__field{flex:1;min-width:0}.episode-selector__select{display:block;width:100%;height:48px;padding:0 42px 0 15px;border:1px solid #30333d;border-radius:8px;background:#191b22;color:#e7e8eb;font-size:15px;font-weight:600;outline:none;cursor:pointer}.episode-selector__select:focus{border-color:#555a67}.episode-selector__nav{display:inline-flex;align-items:center;justify-content:center;min-width:96px;height:48px;padding:0 16px;border:1px solid #343844;border-radius:8px;background:#191b22;color:#d0d2d7;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .15s ease,border-color .15s ease,color .15s ease}.episode-selector__nav:hover{background:#ff4058;border-color:#ff4058;color:#fff}.episode-selector__nav--disabled{opacity:.4;cursor:not-allowed}.episode-selector.is-loading{opacity:.72}.episode-selector.is-loading .episode-selector__nav,.episode-selector.is-loading .episode-selector__select{cursor:wait}.episode-selector__nav--disabled:hover{background:#191b22;border-color:#343844;color:#d0d2d7}.episode-selector + .section-title{margin-top:0}.episode-selector__field--jump{display:flex;flex:1;min-width:0;gap:8px}.episode-selector__jump-input{flex:1;min-width:0;height:48px;padding:0 15px;border:1px solid #30333d;border-radius:8px;background:#191b22;color:#e7e8eb;font-size:15px;font-weight:600;outline:none}.episode-selector__jump-input:focus{border-color:#555a67}.episode-selector__jump-btn{height:48px;padding:0 18px;border:1px solid #343844;border-radius:8px;background:#ff4058;color:#fff;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}.episode-selector__jump-btn:hover{background:#e5364c}
@media (max-width:700px){.episode-selector{gap:7px}.episode-selector__nav{min-width:74px;height:44px;padding:0 10px;font-size:13px}.episode-selector__select{height:44px;font-size:14px}}