/* Header, tab menu, area konten, footer */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--navy) var(--kawung);color:#fff;box-shadow:0 2px 10px -4px rgba(0,0,0,.35)}
.topbar-in{display:flex;align-items:center;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:11px;color:#fff!important;text-decoration:none;min-width:0}
.brand svg{width:30px;height:36px;flex:none}
.brand span{min-width:0}
.brand b{display:block;font-size:15.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{display:block;font-size:12px;opacity:.72}
.who{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.hbtn{font:600 13px var(--font);color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:7px 11px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.hbtn:hover{background:rgba(255,255,255,.14)}
.hbtn svg{width:16px;height:16px;flex:none}
.tabs{background:var(--navy-d)}
.tabs .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs .wrap::-webkit-scrollbar{display:none}
.tab{color:rgba(255,255,255,.72)!important;text-decoration:none;padding:11px 14px 10px;font-weight:600;font-size:14px;border-bottom:3px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:7px}
.tab:hover{color:#fff!important}
.tab.on{color:#fff!important;border-bottom-color:var(--gold)}
.tab .count{background:var(--gold);color:var(--navy-d);border-radius:99px;font-size:11px;font-weight:800;padding:1px 7px;line-height:1.5}
main{flex:1;padding-top:40px;padding-bottom:56px;min-height:60vh}
.foot{border-top:1px solid var(--line);padding:18px 0 26px;color:var(--muted);font-size:13px}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.foot a{color:inherit;font-weight:600;text-underline-offset:3px}
.foot a:hover{color:var(--link)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin-bottom:24px}
.page-head p{color:var(--muted);max-width:62ch}
.back{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;text-decoration:none;margin-bottom:14px}
.back svg{width:16px;height:16px}
@media (max-width:640px){
  main{padding-top:32px;padding-bottom:44px}
  .brand small,.hbtn .txt{display:none}
  .hbtn{padding:6px 9px;font-size:12px}
  .hbtn.hide-sm{display:none}
}