:root{
	--bg:#0e1116;
	--surface:#161b23;
	--surface2:#1e2530;
	--line:#252d3a;
	--text:#e8ebf2;
	--muted:#94a0b4;
	--accent:#00c896;
	--accent-dark:#00a37c;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Tahoma,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{margin:0;font-weight:700}
.wrap{max-width:1200px;margin:0 auto;padding:0 14px;width:100%}
/* main: เอาขอบออก แล้วใส่กลับเป็น margin (ไม่ชนกับ padding ของ element เช่น .detail/.panel) */
main.wrap{padding-left:0;padding-right:0}
main>*{margin-left:14px;margin-right:14px}
main>#video{margin-left:0;margin-right:0} /* player full-bleed (แบนเนอร์ใช้ margin:auto inline เอง) */

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:200;background:rgba(14,17,22,.97);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:56px}
.logo{font-size:20px;font-weight:800;letter-spacing:.5px;white-space:nowrap;color:#fff}
.logo b{color:var(--accent)}
.mainnav{display:flex;gap:2px;flex:1;min-width:0}
.mainnav a{padding:6px 12px;border-radius:6px;color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap}
.mainnav a:hover{color:#fff;background:var(--surface2)}
.navsearch{display:flex;align-items:center;background:var(--surface2);border:1px solid var(--line);border-radius:20px;overflow:hidden;flex-shrink:0}
.navsearch input[type=text]{background:none;border:0;outline:0;color:var(--text);padding:7px 14px;width:180px;font-size:13.5px;font-family:inherit}
.navsearch button{background:none;border:0;color:var(--muted);padding:7px 12px 7px 4px;cursor:pointer;font-size:14px;line-height:1}
.navsearch button:hover{color:var(--accent)}
.navtoggle{display:none;background:none;border:0;color:var(--text);font-size:22px;cursor:pointer;padding:4px 8px;line-height:1}

/* ---------- sections ---------- */
main{display:block;min-height:60vh;padding-bottom:30px}
.sec{margin-top:24px}
.sec-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sec-head:before{content:"";width:4px;height:18px;background:var(--accent);border-radius:2px}
.sec-head h1,.sec-head h2,.sec-head .t{font-size:17px;font-weight:700;margin:0}

/* ---------- poster grid ---------- */
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:block}
.card:hover{border-color:var(--accent)}
.card .poster{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;background:#10141a}
.card .meta{padding:8px 10px 9px}
.card .title{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .ep{font-size:12px;color:var(--accent);margin-top:2px}
.noresult{padding:40px 0;text-align:center;color:var(--muted)}

/* ---------- pagination ---------- */
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:26px 14px 6px;padding:0;list-style:none}
.pager a,.pager span{display:block;min-width:34px;padding:6px 10px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:6px;font-size:13.5px;color:var(--muted)}
.pager a:hover{color:#fff;border-color:var(--accent)}
.pager .now{background:var(--accent);border-color:var(--accent);color:#04221a;font-weight:700}
.pager .gap{border:0;background:none;min-width:auto;padding:6px 2px}

/* ---------- watch page ---------- */
/* ระยะห่างกรอบเรื่องย่อจากเมนูบน = 100px ตายตัว (เท่ากันทุกจอ ไม่บวมบน PC) */
.detail-top{padding-top:100px}
.detail-top>.detail{margin-top:0}
/* โซนคอนเทนต์ใต้ banner — แยกสายตาออกจากแถบ banner ด้านบนด้วยพื้นหลัง+ขอบบนสีเน้น */
.watch-zone{background:var(--surface);border-top:3px solid var(--accent);border-radius:12px;margin:14px 0 0;padding:2px 0 14px}
.watch-zone>.breadcrumb{margin-top:14px}
/* .sec ใน watch-zone หลุด margin ข้างจาก main>* (กลายเป็นลูก zone) — ใส่คืน 14px ให้ตรงกับชื่อเรื่อง */
.watch-zone .sec{margin-left:14px;margin-right:14px}
.watch-head{display:flex;align-items:center;gap:12px;margin:20px 14px 12px}
.watch-head h1{font-size:18px;font-weight:700;flex:1;min-width:0}
.epnav{display:flex;gap:8px;flex-shrink:0}
.epnav a{display:block;padding:6px 14px;background:var(--surface2);border:1px solid var(--line);border-radius:6px;font-size:13.5px;color:var(--muted)}
.epnav a:hover{color:#fff;border-color:var(--accent)}
#video{position:relative;padding-bottom:calc(56.25% + 64px);height:0;border-radius:8px;overflow:hidden}
#video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

.detail{display:flex;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;margin-top:20px}
.detail .dposter{width:170px;flex-shrink:0;border-radius:6px;object-fit:cover;align-self:flex-start}
.detail .dinfo{flex:1;min-width:0;font-size:15.5px}
.detail .dinfo h2{font-size:15px;color:var(--accent);margin-bottom:8px}
.detail .row{margin-bottom:8px;color:var(--muted)}
.detail .row strong{color:var(--text);font-weight:600}
.tag{display:inline-block;background:var(--surface2);border:1px solid var(--line);color:var(--muted);font-size:12.5px;border-radius:12px;padding:2px 10px;margin:0 4px 4px 0}
.synopsis{color:var(--muted);font-size:16px;line-height:1.7}

.epgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px}
.epitem{display:block;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 6px;text-align:center}
.epitem:hover{border-color:var(--accent)}
.epitem .e{font-weight:700;font-size:14.5px}
.epitem .d{font-size:11.5px;color:var(--muted);margin-top:2px}
.epitem.now{background:rgba(0,200,150,.14);border-color:var(--accent)}
.epitem.now .e,.epitem.now .d{color:var(--accent)}

/* ---------- contact ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:24px;font-size:15px}
.panel a{color:var(--accent)}

/* ---------- footer ---------- */
.sitefoot{background:#0a0d11;border-top:1px solid var(--line);margin-top:40px;padding:24px 0;font-size:13.5px;color:var(--muted)}
.sitefoot .logo{font-size:16px;margin-bottom:8px;display:block}
.sitefoot a{color:var(--muted);margin-right:14px}
.sitefoot a:hover{color:var(--accent)}

/* ---------- ad-include compatibility (banner.php / adsmini.php / bottom ads) ---------- */
#banner{max-width:1300px;margin:10px auto;width:100%;text-align:center;overflow:hidden}
.banner{max-width:728px;margin:1px auto;width:50%;float:left}
.bannerrow{max-width:1300px;margin:10px auto;text-align:center;overflow:hidden;line-height:0;font-size:0}
.adsmini2{padding:2px;width:140px}

/* ---------- responsive ---------- */
@media (max-width:900px){
	.navsearch input[type=text]{width:130px}
	.grid{grid-template-columns:repeat(4,1fr);gap:10px}
}
@media (max-width:736px){
	.topbar .wrap{height:52px;gap:10px}
	.navtoggle{display:block;order:3}
	.mainnav{display:none;position:absolute;top:52px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);flex-direction:column;padding:8px 14px;gap:0}
	.mainnav.open{display:flex}
	.mainnav a{padding:11px 6px;border-bottom:1px solid var(--line);border-radius:0}
	.mainnav a:last-child{border-bottom:0}
	.navsearch{flex:1;order:2}
	.navsearch input[type=text]{width:100%;flex:1}
	.grid{grid-template-columns:repeat(3,1fr)}
	.watch-head{flex-wrap:wrap}
	.detail{flex-direction:column}
	.detail .dposter{width:150px}
.adsmini2{width:90px}
}
@media (max-width:480px){
	.grid{grid-template-columns:repeat(2,1fr)}
	.logo{font-size:17px}
}

/* ---------- breadcrumb ---------- */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:14px 14px 2px;font-size:13px;color:var(--muted);line-height:1.5}
.breadcrumb a{color:var(--muted);transition:color .15s ease}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{color:#3a4452;font-size:12px;user-select:none}
.breadcrumb .cur{color:var(--text);font-weight:600;max-width:62vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:480px){
	.breadcrumb{font-size:12px;gap:5px;margin-top:10px}
}