/* ===== Ribbon Menu inline with brand (Blue gradient, rounded head & rivet) ===== */
:root{
  --bg-main:#f3f6fb;
  --tab-h:54px;
  --skew:-18deg;
}
html,body{background:var(--bg-main);}
.header-bar{background:#eef2fb;border-bottom:1px solid #dfe6f7;border-top:1px solid #fff;border-radius:0 0 16px 16px}
.brand{font-weight:900;font-size:24px;color:#0b3b76;text-decoration:none;line-height:1}
@media (max-width:992px){ .brand{font-size:20px} }

/* ribbon container */
.ribbon-nav{overflow:auto padding:0;margin:0 0 0 .25rem}
.ribbon-list{display:flex;gap:0;list-style:none;margin:0;padding:8px 0;overflow:auto}
.ribbon-list .tab{position:relative;height:var(--tab-h);margin-left:-18px;transform:skewX(var(--skew));border-radius:16px;box-shadow:0 8px 18px rgba(2,6,23,.09);z-index:1}
.ribbon-list .tab:first-child{margin-left:0}
.ribbon-list .tab a{position:relative;display:flex;align-items:center;height:100%;padding:0 34px 0 38px;text-decoration:none;color:#fff;font-weight:800;letter-spacing:.2px}
.ribbon-list .tab span{transform:skewX(calc(-1*var(--skew)));}

/* Rounded head extension using ::before (inherits gradient) */
.ribbon-list .tab::before{
  content:''; position:absolute; left:-22px; top:0; bottom:0; width:26px;
  background:inherit; transform:skewX(var(--skew));
  border-radius:22px 0 0 22px; filter:brightness(0.98);
  box-shadow: -2px 4px 10px rgba(2,6,23,.06) inset;
}

/* Rivet "น็อต" using ::after */
.ribbon-list .tab::after{
  content:''; position:absolute; right:10px; top:-7px;
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ffffff 0%, #e6eefb 40%, #c3d2f5 70%, #a7b9e6 100%);
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 2px 4px rgba(2,6,23,.25);
  transform:skewX(var(--skew));
}

/* Gradients per tab */
.tab-1{background:linear-gradient(120deg,#0b3b76 0%, #2563eb 70%)}
.tab-2{background:linear-gradient(120deg,#0ea5e9 0%, #1d4ed8 85%)}
.tab-3{background:linear-gradient(120deg,#2563eb 0%, #60a5fa 85%)}
.tab-4{background:linear-gradient(120deg,#0891b2 0%, #22d3ee 85%)}
.tab-5{background:linear-gradient(120deg,#1e3a8a 0%, #4f46e5 85%)}

/* Active/hover state */
.ribbon-list .tab.is-active{z-index:3;filter:saturate(1.15) drop-shadow(0 10px 18px rgba(2,6,23,.15))}
.ribbon-list .tab:hover{filter:saturate(1.08) brightness(1.03)}
.ribbon-list .tab a:hover{color:#fff}

@media (max-width: 992px){
  :root{ --tab-h:50px; }
  .ribbon-list .tab a{ padding:0 26px 0 30px; }
}