.skew-menu{
  text-align:center; margin-left: 280px; padding-top: 10px;
}

.skew-menu ul{
  display:inline-block;
  margin:0;
  padding:0;
  list-style:none;
  transform:skew(-25deg);
}

.skew-menu ul li{
  background:#fff;
  float:left;
  border-right:1px solid #eee;
  box-shadow:0 1px 1px rgba(0,0,0,0.1);
  text-transform:uppercase;
  color:#555;
  font-weight:bolder;
  transition:all 0.3s linear;
}
.skew-menu ul li:first-child{ border-radius:7px 0 0 7px; }
.skew-menu ul li:last-child{ border-right:none; border-radius:0 7px 7px 0; }
.skew-menu ul li:hover{ background:#eee; color:tomato; }
  
.skew-menu a{
    display:block;
    padding:0.6em 0.75em;
    color:inherit;
    text-decoration:none;
    transform:skew(25deg);
}

/* موبایل - کشویی */
#menu-toggle{
  display:none;
}

.menu-btn{
  display:none; /* دسکتاپ مخفی */
  cursor:pointer;
  color:#fff;
  background:#0E2F50;
  padding:10px 14px;
  border-radius:8px;
  margin:10px auto;
  width: fit-content;
}

/* فقط روی موبایل */
@media (max-width: 980px){
  .skew-menu{
    padding:10px 0;
    width:100%;
	margin:0 auto;
  }

  .menu-btn{
    display:block;
	margin: 0 20px;
	float:right;
  }

  .skew-menu ul{
    /* تبدیل به عمودی */
    float:none;
    transform:none;     /* برای جلوگیری از به‌هم‌ریختگی skew در حالت عمودی */
    display:block;
    width:100%;
    overflow:hidden;
    max-height:0;      /* بسته */
    transition:max-height .3s ease;
  }

  .skew-menu ul li{
    float:none;
    border-right:none;
    border-top:1px solid #eee;
    box-shadow:none;
    border-radius:0;
  }

  .skew-menu ul li a{
    transform:none;
    padding:12px 14px;
    text-align:center;
  }

  /* وقتی checkbox تیک بخورد => باز میشه */
  #menu-toggle:checked ~ ul{
    max-height: 400px; /* عدد کافی بزرگ بگذار */
  }
}