*{box-sizing:border-box}
body{
 margin:0;
 font-family:Arial, Helvetica, sans-serif;
 background:#f1f5f9;
 color:#0f172a;
}

/* HEADER */
header{
 background:#fff;
 border-bottom:1px solid #e5e7eb;
 padding:14px 20px;
 display:flex;
 justify-content:space-between;
 align-items:center;
}

header h1{margin:0;font-size:20px}

/* NAV */
nav a{
 margin-left:10px;
 text-decoration:none;
 color:#334155;
 padding:6px 10px;
 border-radius:6px;
 font-size:14px;
}

nav a.active,nav a:hover{
 background:#2563eb;
 color:#fff;
}

/* LAYOUT */
.container{
 max-width:1200px;
 margin:auto;
 padding:15px;
 display:grid;
 grid-template-columns:3fr 1fr;
 gap:20px;
}

/* POST */
.post{
 background:#fff;
 border:1px solid #e5e7eb;
 border-radius:10px;
 padding:15px;
 margin-bottom:15px;
}

.post-title{font-size:18px;font-weight:bold}
.meta{font-size:12px;color:#64748b;margin-bottom:10px}

.row{
 display:flex;
 justify-content:space-between;
 font-size:14px;
}

.pick{color:#16a34a;font-weight:bold}
.win{color:#16a34a}
.lose{color:#dc2626}

/* SIDEBAR */
.sidebar{
 background:#fff;
 border:1px solid #e5e7eb;
 padding:15px;
 border-radius:10px;
}

/* SLIDER */
.slider{
 max-width:1200px;
 margin:15px auto;
 position:relative;
 border-radius:12px;
 overflow:hidden;
}

.slides{position:relative;height:260px}
.slide{position:absolute;inset:0;opacity:0;transition:.6s}
.slide.active{opacity:1}

.slide img{
 width:100%;
 height:100%;
 object-fit:cover;
}

.caption{
 position:absolute;
 bottom:0;
 width:100%;
 padding:12px;
 color:#fff;
 background:linear-gradient(to top,rgba(0,0,0,.7),transparent);
}

.dots{
 position:absolute;
 bottom:10px;
 right:10px;
}

.dot{
 width:10px;
 height:10px;
 border-radius:50%;
 display:inline-block;
 margin-left:6px;
 background:rgba(255,255,255,.5);
 cursor:pointer;
}

.dot.active{background:#2563eb}

/* FOOTER */
footer{
 text-align:center;
 padding:12px;
 font-size:12px;
 color:#64748b;
}

/* MOBILE */
@media(max-width:768px){
 .container{grid-template-columns:1fr}
 .slides{height:180px}
}