/* ===== Base ===== */
*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;margin:0;background:#f7fafc;color:#1f2937}
a{color:#0ea5e9;text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Header ===== */
header{background:#0f766e;color:#fff;padding:22px 16px}
header .wrap{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px}
header h1{margin:0;font-size:26px}
header nav a{color:#fff;margin-right:14px;font-weight:700}

/* ===== Layout ===== */
.mains{max-width:1100px;margin:22px auto;display:grid;padding:0 16px}
@media (max-width:960px){.main{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 2px 5px rgba(0,0,0,.05)}

/* ===== Articles ===== */
article{padding:18px}
article h2{margin:0 0 6px;color:#0ea5e9}
.meta{font-size:12px;color:#6b7280;margin-bottom:10px}
.readmore{display:inline-block;margin-top:10px;font-weight:700}

/* ===== Sidebar ===== */
.sidebar{display:flex;flex-direction:column;gap:18px}
.widget{padding:16px}
.widget h3{margin:0 0 10px;font-size:16px;color:#111827}
.badge{background:#0ea5e9;color:#fff;border-radius:999px;font-size:12px;padding:2px 8px}

/* CTA / Banner */
.cta{background:#ecfeff;border:1px solid #a5f3fc}
.cta a.btn{display:block;text-align:center;background:#0f766e;color:#fff;padding:12px;border-radius:10px;font-weight:700}
.banner img{width:100%;height:auto;border-radius:10px}

/* Footer */
footer{margin-top:24px;background:#f3f4f6;color:#4b5563;text-align:center;padding:16px}