/* ---- extracted essentials from blog.html for look & feel ---- */
:root{--primary:#8B5A3C;--primary-700:#6F452F;--accent:#F6E7E3;--dark:#0B1220;--bg:#F7F6F4;--line:#E8DED6}
/* Topbar */
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.topbar .row .searchbar{flex:1;display:flex;gap:8px}
.logo img{height:56px}
.desk-nav{display:flex;gap:12px;margin:0 6px}
.desk-nav a{color:#0f172a;text-decoration:none;padding:6px 10px;border-radius:10px;font-weight:500;white-space:nowrap}
.desk-nav a:hover{background:#f1f5f9}
/* Chips */
.chip{white-space:nowrap;background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:999px}
/* Mega */
.mega-bar{background:#fff;border-bottom:1px solid var(--line)}
.mega-panel{display:none}
.mega-open .mega-panel{display:block}
.mega-panel .panel-inner{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 45px rgba(0,0,0,.08);padding:16px;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mega-col h4{margin:0 0 6px}
/* Mobile top search (simplified) */
#mtop{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);padding:10px}
.mtop-row{display:grid;grid-template-columns:110px 1fr auto;gap:8px;align-items:center}
/* Side widget */
.zw-sidewidget{position:fixed;left:8px;top:50%;transform:translateY(-50%);display:grid;gap:8px;z-index:1200}
.zw-sidewidget .zw-more,.zw-sidewidget .zw-wa{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line);background:#fff;color:#e89c9c;box-shadow:0 8px 20px rgba(2,8,23,.08);cursor:pointer}
.zw-drawer{position:absolute;left:54px;top:0;background:#fff;border:1px solid var(--line);border-radius:14px;min-width:180px;box-shadow:0 18px 40px rgba(2,8,23,.12);padding:10px;display:flex;flex-direction:column;gap:6px;visibility:hidden;opacity:0;transform:translateX(-8px);transition:.18s}
.zw-drawer a{display:block;padding:8px 10px;border-radius:10px}
.zw-sidewidget.is-open .zw-drawer{visibility:visible;opacity:1;transform:translateX(0)}
/* Cards */
.card .thumb{aspect-ratio:16/9;object-fit:cover}
/* Footer */
.desk-footer a{color:#3c3837;text-decoration:none}
@media(min-width:992px){#mtop{display:none}.mega-bar{display:block}}
@media(max-width:991px){.mega-bar,.mega-panel,.desk-nav{display:none}}