/* ===== ANIMEGOJO design system (shared) — ใช้ร่วมทุกหน้า ===== */
@font-face { font-family:'Itim'; font-style:normal; font-weight:400; src:url(/css/Itim.woff2) format('woff2'); unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC; font-display:swap; }
@font-face { font-family:'Itim'; font-style:normal; font-weight:400; src:url(/css/Itim2.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; font-display:swap; }
:root {
    --bg-dark: #0f0f12;
    --bg-surface: #1a1a22;
    --primary: #6787ff;
    --secondary: #ff0055;
    --text-main: #ffffff;
    --text-muted: #aaaaaa;
    --max-width: 1300px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg-dark); color: var(--text-main); font-family: 'Itim', system-ui, -apple-system, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/* ---- header / nav ---- */
header { background: rgba(26,26,34,0.95); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); border-bottom: 1px solid #2a2a35; }
.nav-container { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 0.75rem 1rem; }
.nav-container > nav { flex: 1; min-width: 0; }
.brand { display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; font-family: 'Montserrat','Segoe UI',sans-serif; line-height: 1; }
.brand .logo-text-wrapper { display: flex; align-items: baseline; line-height: 1; }
.brand .text-anime { color: #fff; font-weight: 900; font-size: 18px; letter-spacing: 0.8px; }
.brand .text-gojo { font-weight: 900; font-size: 20px; letter-spacing: -0.2px; margin-left: 2px; background: linear-gradient(135deg,#6787ff,#8ca5ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 8px rgba(103,135,255,0.4)); }
.brand .neon-line { width: 46px; height: 2px; background: linear-gradient(90deg,#6787ff,transparent); margin-top: 3px; }
.nav-menu { display: flex; gap: 1.5rem; list-style: none; }
.nav-link { font-weight: 500; font-size: 0.95rem; transition: color 0.2s; }
.nav-link:hover { color: var(--primary); }
.nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; align-items: center; }
.search-box { display: flex; align-items: center; background: #252530; border-radius: 20px; padding: 0.25rem 0.75rem; border: 1px solid #3a3a48; flex-shrink: 0; }
.search-box input { background: none; border: none; color: white; padding: 0.4rem; outline: none; font-size: 0.9rem; width: 180px; }
.search-box button { background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; }

/* ---- ads ---- */
.ad-container { max-width: var(--max-width); margin: 1rem auto; padding: 0; }
.ad-slot { background: #15151f; border: 1px dashed #3a3a48; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.8rem; aspect-ratio: 728 / 90; width: 100%; max-height: 90px; }
.sticky-bottom-ad { position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(15,15,18,0.95); padding: 0.5rem; box-shadow: 0 -4px 15px rgba(0,0,0,0.8); z-index: 999; display: flex; flex-direction: column; align-items: center; }
.close-ad { font-size: 0.75rem; color: var(--text-muted); background: #222; padding: 2px 8px; border-radius: 4px; margin-bottom: 4px; cursor: pointer; align-self: flex-end; max-width: var(--max-width); }

/* ---- layout ---- */
.layout-grid { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; padding: 1rem 0 0; }
.layout-grid > main { min-width: 0; }
.layout-grid > aside { padding-right: 1rem; }
.pad { padding-left: 1rem; padding-right: 1rem; }
.pad-l { padding-left: 1rem; }
.section-title { font-size: 1.4rem; margin-bottom: 1rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
.section-title::before { content: ''; width: 4px; height: 1.4rem; background: linear-gradient(to bottom, var(--primary), var(--secondary)); display: inline-block; border-radius: 2px; }

/* ---- home: scroll-row + grid + card ---- */
.scroll-row { display: flex; gap: 1rem; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 0.5rem; cursor: grab; }
.scroll-row.grabbing { cursor: grabbing; }
.scroll-row::-webkit-scrollbar { display: none; }
.hscroll-wrap { position: relative; }
.hscroll-btn { position: absolute; top: 42%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #3a3a48; background: rgba(15,15,18,0.8); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: 0.2s; }
.hscroll-btn:hover { background: var(--primary); border-color: var(--primary); }
.hscroll-btn.prev { left: -10px; }
.hscroll-btn.next { right: -10px; }
.anime-card { background: var(--bg-surface); border-radius: 8px; overflow: hidden; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.anime-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(172,0,255,0.2); }
.scroll-row .anime-card { flex: 0 0 calc(20% - 0.8rem); }
.card-thumb { width: 100%; aspect-ratio: 3/4; background-size: cover; background-position: center; position: relative; background-color: #252530; }
.badge { position: absolute; top: 8px; left: 8px; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.badge.sub { background: linear-gradient(135deg, var(--primary), var(--secondary)); }
.badge.dub { background: #00b359; }
.new-flag { position: absolute; top: 8px; right: 8px; background: var(--secondary); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; }
.ep-tag { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.8); padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.card-info { padding: 0.75rem; }
.card-info h3 { font-size: 0.9rem; font-weight: 600; line-height: 1.45; height: calc(1.45em * 3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.anime-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-top: 1.5rem; }

/* ---- watch / list page ---- */
.crumb { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 0.5rem; }
.crumb a { transition: 0.15s; }
.crumb a:hover { color: var(--primary); }
.crumb .sep { margin: 0 4px; opacity: 0.5; }
.page-title { font-size: 1.45rem; font-weight: 700; line-height: 1.3; margin-bottom: 1rem; }
.bframe-row { margin-bottom: 1rem; }
.player-wrap { position: relative; width: 100%; padding-bottom: calc(56.25% + 64px); height: 0; border-radius: 8px; overflow: hidden; }
.player-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.watch-btns { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0; }
.wbtn { padding: 0.55rem 1.2rem; border-radius: 6px; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 0; color: #fff; display: inline-flex; align-items: center; transition: 0.2s; }
.wbtn.prev { background: #ed3b3b; }
.wbtn.reserve { background: #f7941e; }
.wbtn.next { background: #2d82f5; }
.wbtn:hover { opacity: 0.88; }
.watch-note { font-size: 0.85rem; color: var(--text-muted); line-height: 1.7; margin: 0.5rem 0 1.5rem; }
.watch-note strong { color: #ddd; }
.detail-card { display: flex; gap: 1.2rem; background: var(--bg-surface); border: 1px solid #232330; border-radius: 8px; padding: 1.2rem; margin: 1.5rem 1rem 0; }
.detail-card .dposter { width: 160px; flex-shrink: 0; border-radius: 6px; overflow: hidden; }
.detail-card .dposter img { width: 100%; display: block; }
.detail-meta { font-size: 0.9rem; line-height: 1.8; min-width: 0; }
.detail-meta .lbl { color: var(--text-muted); margin-right: 6px; }
.detail-meta .syn { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.4rem; }
.genres { display: inline-block; background: #252535; border-radius: 6px; font-size: 0.8rem; padding: 0.15rem 0.6rem; margin: 0 4px 4px 0; transition: 0.2s; }
a:hover > .genres { background: var(--primary); color: #fff; }
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; margin-top: 1rem; }
.ep-item { display: block; text-align: center; padding: 0.65rem 0.4rem; background: var(--bg-surface); border: 1px solid #2a2a35; border-radius: 6px; font-size: 0.85rem; color: var(--text-muted); transition: 0.2s; }
.ep-item:hover { border-color: var(--primary); color: #fff; }
.ep-item.now { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }

/* ---- sidebar ---- */
.sidebar-widget { background: var(--bg-surface); padding: 1.25rem; border-radius: 8px; margin-bottom: 1.5rem; border: 1px solid #232330; }
.widget-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; border-bottom: 1px solid #2d2d3d; padding-bottom: 0.5rem; }
.cate-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cate-tag { background: #252535; padding: 0.4rem 0.75rem; border-radius: 6px; font-size: 0.85rem; transition: all 0.2s; }
.cate-tag:hover { background: var(--primary); color: white; }

/* ---- pagination ---- */
.pagination-container { display: flex; justify-content: center; flex-wrap: wrap; margin: 2rem 0; gap: 0.5rem; }
.page-btn { background: var(--bg-surface); border: 1px solid #2a2a35; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; transition: 0.2s; }
.page-btn.active, .page-btn:hover { background: var(--primary); border-color: var(--primary); }

/* ---- seo + footer ---- */
.seo-content { background: #12121a; border-radius: 8px; padding: 1.5rem; margin: 2rem 1rem 0; border-left: 4px solid var(--primary); }
.seo-content h2 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.seo-content p { color: var(--text-muted); font-size: 0.9rem; }
footer { background: #0b0b0e; padding: 2rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; border-top: 1px solid #1a1a25; }

/* ---- responsive ---- */
@media (max-width: 992px) {
    .layout-grid { grid-template-columns: 1fr; }
    .layout-grid > aside { padding-left: 1rem; }
    .scroll-row .anime-card { flex: 0 0 calc(33.33% - 0.7rem); }
}
@media (max-width: 768px) {
    .nav-toggle { display: flex; order: 3; }
    header nav { position: absolute; top: 100%; left: 0; right: 0; background: rgba(26,26,34,0.98); border-bottom: 1px solid #2a2a35; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
    header nav.open { max-height: 320px; }
    .nav-menu { flex-direction: column; gap: 0; padding: 0.25rem 1rem; }
    .nav-menu li { width: 100%; }
    .nav-menu .nav-link { display: block; padding: 0.85rem 0; border-bottom: 1px solid #2a2a35; }
    .search-box { order: 2; flex: 1; }
    .search-box input { width: 100%; flex: 1; }
    .detail-card { flex-direction: column; }
    .detail-card .dposter { width: 140px; }
    .player-wrap { border-radius: 0; }
}
@media (max-width: 576px) {
    .hscroll-btn { width: 36px; height: 36px; font-size: 22px; }
    .scroll-row .anime-card { flex: 0 0 calc(50% - 0.5rem); }
    .anime-grid { grid-template-columns: repeat(2, 1fr); }
}